اصل مجاورت در طراحی وب سایت


اخیراً یک کلاس کتاب طراحی قدیمی که مدتی بود به آن دست نزده بودم، و مرا به یاد یک اصل طراحی می‌اندازد که بسیاری از ما احتمالاً فقط به صورت ناخودآگاه، اگر اصلاً آن را اجرا می‌کردیم.

این کتاب به طراحی برای چاپ می‌پردازد، اما فکر می‌کردم موضوع بسیار خوبی برای بحث در زمینه طراحی وب خواهد بود.

اصل مجاورت می‌خواهد موارد مرتبط به صورت بصری گروه‌بندی شوند، درهم‌کاری کمتری ایجاد کرده و چیدمان سازمان‌یافته‌تری ایجاد می‌کند. موارد غیر مرتبط با یکدیگر باید بیشتر از هم قرار گیرند تا بر عدم ارتباط آنها تأکید شود.

درباره جزئیات و برخی از روش‌هایی که می‌توان این کار را به طور مؤثر پیاده‌سازی کرد، بحث خواهم کرد، اما این تعریف برای آنچه در این مقاله به آن خواهیم پرداخت، کافی است.

استفاده صحیح از مجاورت، در ارتباط با سایر اصول طراحی، تأثیر زیادی بر تجربه کاربر و در نهایت، موفقیت کلی یک وب سایت دارد.

 

از فضای سفید نترسید

اولین گام برای اجرای صحیح اصل مجاورت، درک اهمیت فضای سفید در طراحی است.

فقدان فضای سفید یک مشکل رایج در طراحی های آماتور است. طراحی وسیله ای برای انتقال اطلاعات است و وقتی آماتورها سعی می کنند پیامی را از طریق طراحی منتقل کنند، تمایل طبیعی آنها این است که محتوا را به طور مساوی پخش کنند تا فضا را پر کند، بدون اینکه زیاد به پتانسیل فضای سفید به خوبی سازماندهی شده فکر کنند.

فضای سفید می‌تواند بر رفتار کاربر تأثیر بگذارد، اگر نه بیشتر از محتوای واقعی صفحه. فضای سفید چشم کاربر را در جهت مورد نظر هدایت می کند، کنتراست ایجاد می کند و تاثیری ماندگار می گذارد.

W3Avenue

اگرچه وب‌سایت W3Avenue در بالا حاوی مقدار قابل توجهی محتوا (با مقالات تحت دسته‌های متعدد، مانند هر وبلاگ طراحی) و یک سری تبلیغات نوار کناری است، از نظر بصری کاربر را تحت تأثیر قرار نمی‌دهد.

اتاق سخاوتمندانه در سرصفحه و موارد با فاصله مناسب در قسمت‌های محتوا و نوار کناری به این ظاهر تمیز و سازمان‌یافته کمک می‌کنند. W3Avenue با محتوای خود کار خاصی انجام نمی دهد، اما طراحی آن احتمالاً به کمک می کند. ترافیک قوی در یک مدت زمانی کوتاه دریافت می‌کند.

بنابراین نسبت به فضای خالی در طراحی خود ناامن نباشید. استفاده صحیح از فضای سفید اولین قدم در اجرای اصل مجاورت و در نتیجه جذاب‌تر کردن طراحی از نظر بصری است.

 

عناصر مرتبط با گروه بصری

فضای سفید، اما تنها بخشی از پیاده سازی مجاورت است. یک طرح می‌تواند فضای سفید زیادی داشته باشد، اما اگر مواردبه‌درستی گروه‌بندی نشده باشند، فضای سفید تأثیر کمی خواهد داشت، همانطور که در دو کارت ویزیت زیر نشان داده شده است:

Two Business Cards

کارت سمت چپ به هم ریخته نیست. مقداری فضای سفید دارد اما عناصر به طور منطقی گروه بندی نشده اند، بنابراین اثر ضعیف است.

خواننده مجبور است کارت را چندین بار اسکن کند. کارت سمت راست اما جلوه بصری دلپذیرتری دارد. خواننده فقط باید به آن نگاهی بیندازد تا اطلاعات را دریافت کند (در ادامه در این مورد بیشتر خواهد شد).

گروه‌بندی عناصر در کارت سمت راست نیز منطقیتر است. در اولین مجموعه از عناصر، نام شرکت را با فونت بزرگ با مکان زیر آن می بینیم. مجموعه دوم به ما می گوید که چگونه می توانیم اطلاعات خدمات ارائه شده (یعنی شماره تلفن و آدرس وب سایت) را دریافت کنیم.

این مثال اهمیت مجاورت را در طراحی چاپ نشان می‌دهد، و ایده مشابهی را می‌توان برای عناصر در طراحی وب، همانطور که در تصویر زیر نشان داده شده است، استفاده کرد.

Arora Designs

اگرچه وب‌سایت Arora Designs پیچیده یا دارای اطلاعات سنگین نیست، استفاده از فضای سفید و جداسازی بصری عناصر گروه‌بندی شده در آن مؤثر است. در اینجا باید توجه داشت که “فضای سفید” نباید سفید باشد. این می تواند هر فضای خالی بین عناصر بدون توجه به رنگ باشد.

در مورد طرح‌های Arora، اگرچه فضای سفید دارای رنگ است، اما به همان هدف جداسازی بصری سرصفحه، ناوبری و قسمت‌های محتوا عمل می‌کند.

 

ایجاد سلسله مراتب بصری

استفاده موثر از فضای سفید و گروه بندی عناصر مرتبط برای ارائه یک سلسله مراتب بصری واضح به وب سایت شما حیاتی است. البته، معماری وب سایت و جریان اطلاعات پایه و اساس نزدیکی موثر است.

سلسله مراتب با روشی که در آن عناصر گروه بندی و زیر گروه بندی می شوند، منتقل می شود.

این سلسله مراتب به کاربر کمک می‌کند تا بفهمد کجا بوده است و کجا می‌خواهد برود و در نتیجه به برقراری ارتباط با هدف وب‌سایت کمک می‌کند. همانطور که در تصویر زیر نشان داده شده است، یک لیست مثال خوبی از عنصری است که پتانسیل برقراری ارتباط با سلسله مراتب بصری را دارد:

Lists Show Visual Hierarchy

فقط با نگاهی اجمالی به دو لیست بالا، بدون حتی بررسی محتوا، خواهید دید که لیست سمت چپ دارای یک سلسله مراتب بصری واضح است و روابط بین موارد را نشان می دهد (اقلام تورفتگی زیر مجموعه های موارد اولیه هستند. ).

این سلسله مراتب بدون فضای سفید (شامل ماکرو و میکروامکان پذیر نخواهد بود. > فضای سفید). لیست سمت راست فقط یک گروه بندی تصادفی از عناصر است که هیچ رابطه یا سلسله مراتب ظاهری ندارد.

اجرای این اصل در یک وب سایت با چیزی به سادگی یک لیست HTML آسان است. چالش استفاده از این اصل به عنوان یک عامل راهنما در ساخت وب سایت از مرحله برنامه ریزی و قالب بندی تا طراحی است.

 

طرح‌بندی‌هایی که اسکن و خواندن آنها آسان است

محتوای که در یک سلسله مراتب سازماندهی شده و به طور منطقی گروه بندی شده است، خواندن و اسکن کردن آن آسان تر است.

عنوان‌ها، برای مثال، باید به کاربر اجازه دهند تا با مشخص کردن واضح نکات اصلی، اسکن کند. نیازی به گفتن نیست که محتوا باید از همان ابتدا برنامه ریزی شود تا سلسله مراتب بصری مناسب را منعکس کند. لیست بالا با موارد تورفتگی مثال ضعیفی است، زیرا محتوا با سلسله مراتب بصری مطابقت ندارد.

وب سایتی که از مجاورت در معماری و طراحی خود استفاده می کند، کاربر را غرق در اطلاعات نمی کند.

بنابراین، اگرچه اجرای اصول مجاورت در وب‌سایت‌هایی که از نظر محتوا سبک هستند، نسبتاً آسان است، نزدیکی در وب‌سایت‌های غنی از محتوا بسیار مهم‌تر است.

وب سایت های خبری مطالعات موردی خوبی برای این اصل هستند. در زیر مقایسه ای از لس آنجلس تایمز و گلوب و نامه.

Los Angeles Times

به طور کلی، وب سایت LA Times عمدتاً به دلیل انتخاب رنگ و تایپوگرافی طراحی دلپذیری دارد. اما ظاهری تمیز و نامرتب به خصوص در قسمت هدر نیز دارد.

این لوگو بزرگ و برجسته است و به طور موثری به برندسازی وب سایت کمک می کند. نزدیکترین شی به لوگو نوار پیمایش افقی زیر است. از آنجایی که نوار پیمایش تاریک است، با لوگو در تضاد است.

پیوندهای نوشتاری بالای لوگو به‌خوبی چیده شده‌اند و فضای زیادی بین دو بخش وجود دارد. تراز سمت چپ محتوا در هدر نیز به ظاهر تمیز کمک می کند.

هر بیت از اطلاعات در هدر LA Times با موارد مرتبط گروه بندی می شود، به جز لوگو که به تنهایی وجود دارد. هیچ چیزی در سرصفحه شما را گیج نمی کند یا باعث می شود تعجب کنید که به کجا تعلق دارد.

در مورد وب‌سایت Globe and Mail که در زیر نشان داده شده است، چطور؟

The Globe and Mail

وب‌سایت Globe and Mail یک بخش هدر پیچیده دارد که اصل مجاورت را اجرا نمی‌کند.

تنها مقدار قابل توجهی از فضای سفید در مرکز، در کنار آرم است که هیچ کاری انجام نمی دهد. دو تبلیغ در هدر ظاهر می شود که به درهم ریختگی کمک می کند. تبلیغات ممکن است به دلایل مالی ضروری باشد، بنابراین مشکلات قابل درک است.

بزرگترین مشکل بخش نامرتب بالای بنر تبلیغاتی بزرگ است. هیچ تمایز واضحی بین عناصر موجود در آن بخش وجود ندارد.

سه خط عمودی نقطه‌دار سعی می‌کنند این ناحیه را به چهار بخش جدا کنند، اما جداکننده اول معنایی ندارد. در واقع، اگر آن جداکننده های نقطه چین حذف شوند، احتمالاً آن بخش جذاب تر به نظر می رسد.

 

شبکه‌ها به نزدیکی کمک می‌کنند

یک راه برای گروه بندی آیتم ها و استفاده مناسب از فضای سفید این است که با شبکه شروع کنید.

با نگاهی گذرا به وب‌سایت‌های LA Times و Globe and Mail، به نظر می‌رسد که فقط LA Times طراحی خود را بر اساس یک شبکه استوار کرده است، یا حداقل از اصول مبتنی بر شبکه در مرحله برنامه‌ریزی استفاده کرده است. وب سایت Globe and Mail شواهد کمی از قالب شبکه ای نشان می دهد.

یک چیدمان مبتنی بر شبکه، با اندازه‌های ناودانی مناسب، فضای زیادی را بین بخش‌ها ایجاد می‌کند و در بسیاری از موارد طراح را مجبور می‌کند تا اصول مجاورت را بدون حتی فکر کردن به آن پیاده‌سازی کند.

در زیر تصاویری از دو وب‌سایت وجود دارد که از سیستم شبکه 960 استفاده کرده‌اند. هر دو نسبتاً ساده هستند (یعنی مانند وب‌سایت‌های خبری که در بالا به آن‌ها پرداخته شد، محتوای سنگینی ندارند)، اما نشان می‌دهند که شبکه‌ها به عناصر صفحه اتاق تنفس می‌دهند و به هر بخش خانه بصری خود را می‌دهند.

Anton Peck
Phil Coffman

 

کاربران را در مسیر درست هدایت کنید

یکی دیگر از مزایای اصلی نزدیکی این است که به کاربران کمک می کند تا بدون تاخیر یا موانع غیرضروری در وب سایت حرکت کنند. هنگامی که پیمایش اصلی به وضوح از سایر عناصر موجود در صفحه جدا شود، فوراً پیدا می شود و احتمال فراموشی آن کمتر است.

سلسله مراتب بصری مناسب از طریق نزدیکی به کاربران کمک می‌کند تا بدون نگرانی درباره اینکه کجا بوده‌اند یا به کجا می‌روند، عمیق‌تر در وب‌سایت شما کاوش کنند.

آن‌ها همیشه احساس راحتی می‌کنند و به‌سرعت و کارآمد به مهم‌ترین بخش‌های وب‌سایت شما می‌رسند.

طراحان وب با تجربه کم یا بدون تجربه در طراحی چاپ می‌توانند از اصولی که طراحان چاپ از سال‌ها قبل از رونق وب در عمل به کار می‌برند، بهره زیادی ببرند.

نزدیک بودن تنها اصل طراحی نیست که به یک سایت کمک می‌کند قابل استفاده‌تر و از نظر بصری جذاب‌تر باشد، اما به دلیل بسیاری از دلایلی که اخیراً در مورد آنها صحبت شد، فاکتور مهمی است که باید در نظر گرفته شود.

 

ادامه مطلب

این پست به طور انحصاری برای Webdesigner Depot توسط لوئیس لازاریس، نویسنده مستقل و توسعه دهنده وب نوشته شده است. لوئیس وب‌های تاثیرگذار را اجرا می‌کند، جایی که مقالات و آموزش‌هایی را در مورد طراحی وب پست می‌کند. می‌توانید لویی را در توییتر دنبال کنید یا با او در تماس باشید از طریق وب سایت او.

بدون دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.