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

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

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

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

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

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

 

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

 

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

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

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

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

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

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