مغز انسان یک پردازش گر فوق العاده است، که هنوز هم تمام قابلیت های آن شناخته نشده است. برای طراحانی که با هر نوع تجربه کاربری (UX: User Experience) سر و کار دارند، آگاهی از توانایی های شناختی و مکانیزم های آن می تواند در ایجاد یک واسط کاربری (User Interface) قوی، بسیار مفید باشد. امروز ما می خواهیم کمی در این باره صحبت کنیم.
نظریه گشتالت بر این ایده است که، وقتی مردم یک شی پیچیده شامل اجزای مختلف را درک می کنند، آن ها از روش های آگاهانه و ناخودآگاه برای سازمان دادن قسمت های مختلف به عنوان یک سازمان یکپارچه استفاده می کنند، بجای آنکه آن شی پیچیده را به عنوان یک مجموعه ساده در نظر بگیرند. این فرآیند در سطوح مختلف اتفاق می افتد، اما قسمت بصری آن برای طراحان بسیار جذاب است. نظریه گشتالت دارای اصول مختلفی مانند اصول دسته بندی (Principles Of Grouping) و اصول شباهت (Principle Of Similarity) می باشد. ما در این مقاله می خواهیم به اصل دیگری به نام اصل نزدیکی یا مجاورت (Principle Of Proximity) در طراحی UX بپردازیم.
اصل مجاورت
این اصل بر اساس تمایل شناختی به مرتبط دانستن اشیا نزدیک به هم، نسبت به اشیا دور تر می باشد. مردم تمایل به درک کردن انواع اطلاعات و اشیاء اطراف شان را دارند و آن هم نه بر اساس فکر کردن واقعی بلکه به صورت اتوماتیک و با کمک اصل مجاورت، و این روش نیز بسیار برای ذهن سریع تر است. بنابراین برای یک طراح این اصل راهنمایی خوبی است تا بوسیله آن واسط کاربری و اطلاعات را به صورت طبیعی و سازگار با ذهن انسان سازمان دهند. مثلا اگر ما ساختاری حاوی بلوک های چهار در چهار را مشاهده کنیم، ذهن ما به نوعی تمایل دارد که این ساختار را به شکل دو ستون دوتایی درک کند.
در واسط کاربری، که پر از محتوا است، اصل مجاورت به طراح کمک می کند که ساختار آن را طوری سازمان دهد که برای کاربر قابل اسکن و به راحتی قابل درک باشد. این کاملا بدیهی است که کاربر علاقه یی به صرف زمان برای یاد گرفتن یک واسط کاربری پیچیده ندارد. تنها یک طراحی غریزی است که می تواند کاربر را در وب سایت نگه دارد، تا به تواند یا یک اسکن یا نگاه گذرا مهمترین عملکرد وب سایت را تشخیص داده و به کار برد.
به طور عمومی ما می توانیم دو راهنما را برای به کار بردن اصل مجاورت در طراحی واسط کاربری تعریف کنیم. تایپ گرافی (Typography) و متن محتوا (Copy Content) برای بلوک های مختلف محتوا و کنترل ها.
تایپ گرافی و متن
یکی از زمینه هایی که اصل مجاورت در آن نقش اساسی دارد سازمان دهی متن محتوا در واسط کاربری است. قابلیت اسکن (Scannability) بلوک های محتوا در ساختار صفحه بسیار حیاتی است، برای اینکه خوانندگان در صفحاتی که دارای متن طولانی و یکنواخت است باقی نمی مانند. اول از همه بیشتر کاربران صفحه را با یک نگاه کلی (یا اسکن) کرده در این مرحله تمام چیز های برجسته یک متن مانند عنوان ها، زیر عنوان ها، کلمات کلیدی است که به چشم بازدیدکننده می آید، سپس اگر موضوعی نظر آن ها را جلب کرد به خواندن ادامه می دهند. برای همین است که متن یا محتوا باید بر اساس هر دو قانون زیبایی و درک سریع سازماندهی شود.
فضای سفید (یا فضای منفی) نقش بزرگی در این سازماندهی بازی می کند. که به طراح اجازه می دهد که فضای خالی را پر قدرت کند: فضای بدون محتوا نه تنها مقداری هوا برای تنفس به ساختار عمومی اضافه می کند، بلکه می تواند در سازماندهی و دسته بندی محتویات مختلف در جای مناسب کمک کند.
برای محتوای متنی، از راه های مختلفی می توان استفاده کرد. برای مثال با فضای سفید یک طراح می تواند به طور متوازن یک پاراگراف را از یک قطعه بزرگ متن جدا کند تا هم بهتر قابل فهم باشد و هم از نظر بصری حس خوبی به خواننده دهد. این رویکرد معمولا در مقالات وبلاگ و متون بلند در وب سایت ها به کار می رود. در این مورد، اصل مجاورت به خواننده این پیام را می رساند که محتویاتی که به یکدیگر نزدیک تر هستند، به یکدیگر مرتبط بوده و یک ایده کلی را ارائه می دهند و به این طریق متن ساختار پیدا می کند.
در مثالی دیگر می توان از اصل مجاورت در سطوح مختلف طراحی UI استفاده کرد. ابتدا این اصل خطوط متن را به عنوان قطعه ایی از اطلاعات دسته بندی کرده، سپس این قطعه در کنار یک تصویر قرار می گیرد که نه تنها خوانایی و موضوع متون را به راحتی می توان تشخیص داد، بلکه تکرار این ساختار نوع سازماندهی صفحه را به کاربر می آموزد.
همچنین در این طرح بندی می توان CTA (call-to-action) را کمی دورتر از بدنه متن، اما به گونه ایی که ارتباط این دو با هم حفظ شود قرار داد. این CTA می تواند یک دکمه "بیشتر بخوانید" یا "خرید" باشد. CTA ها نباید خیلی بالای صفحه قرار بگیرند، چون کاربران تمایل دارند بدانند که برای چه چیزی کلیک می کنند، پس باید ابتدا به وسیله متن و تصویر اطلاعاتی به کاربر بدهیم و با اضافه کردن کمی فضای خالی سپس دکمه CTA کاربر را به کلیک تشویق کنیم.
به این طریق است که طراح می تواند فضای داخلی و خارجی را از هم تفکیک داده، محتویات را به طور متوازن سازمان دهد، تصاویر و متون را قابل اسکن کند.
این رویکرد همچنین برای سازماندهی منوها و کاتالوگ ها قابل استفاده است. استفاده آگاهانه از اصل مجاورت امروز به یک ابزار مفید برای سازماندهی، چیدمان و دسته بندی تبدیل شده است.
برای مثال می توان لینک ها و منوهای ناوبری را با کمی فاصله در سربرگ قرار داد. با این کار هسته اصلی تعامل وب سایت به راحتی قابل درک است و به چشم کاربر می آید. علاوه بر این می توان تمامی این پیوند ها را به گونه ایی با یکدیگر دسته بندی نمود تا ارتباط آن ها با یکدیگر حفظ شود. همین روش را می توان برای منوهای قابل افزایش (Hamburger Button) به کار برد. پیوند ها با یکدیگر دسته بندی و یکی شده و از طرف دیگر فضای اطراف (فضای منفی) طبق اصل مجاورت قدرت ساختار را به طبقه بندی بصری صفحه اضافه می کند.
بلوک های محتوا و کنترل ها
یک زمینه دیگر که اصل مجاورت می تواند تاثیر مثبتی بر تجربه کاربر داشته باشد، سازماندهی بلوک های متنوع محتوا در طرح بندی صفحه است. این محتوای متنوع می تواند به جز متن شامل تصاویر، پیوندها، آیکون ها، CTA ها، کارت و انواع مختلف محتوا باشد. اصل مجاورت به طراح اجازه می دهد که این بلوک های متنوع را به گونه ایی طبیعی و پاسخگوی توانایی انسان در درک صبری سازمان دهد.
برای مثال کارت محصول در طراحی می تواند اطلاعات عمومی محصول را نمایش دهد: هر یک از اطلاعات مانند رنگ، اندازه، جنس و قیمت در خطوط مختلف. هم می تواند ارتباط این موارد را با هم حفظ کند و هم خواندن و درک آن ها را آسان می کند. از سوی دیگر می توان اطلاعات توصیفی را با کمی فاصله به شکل یک پاراگراف در قسمت پایینی کارت محصول قرار داد. به این طریق ابتدا کاربر اطلاعات کلی و ضروری را با یک نگاه دریافت می کند و با کمی فاصله در صورت تمایل می تواند اطلاعات بیشتر و توصیفی را بخواند.
در مثالی دیگر می توان محتویات متنوع و بلوک ها را در شبکه طرح بندی بدون قاب بندی مجزا ارائه نمود. در این حالت نیز اصل مجاورت است که به کاربر اجازه درک منطقه های مختلف صفحه را می دهد. مجموعه ایی از پیوند ها در سر برگ، و لیستی از آخرین پست ها در سمت چپ، پیش نمایش مقالات تازه و بلوک پیوند های شبکه های اجتماعی در پانویس.
می توان در بلوک اصلی یا بدنه با تنظیم فاصله ها بلوک های فرعی را دسته بندی و جدا نمود. این نوع رویکرد طراحی را با وقار و قابل اسکن می کند و از سوی دیگر حالتی غریزی و کاربردی به محتوا می دهد.
با بررسی تئوری گشتالت در طراحی برای ما آشکار شد که دانستن اصول کارکرد ذهن انسان، می تواند حجم زیادی از تلاش کاربر را کاهش داده و طراحی را به نوعی کاربرپسند و موثر نمود. همچنین بجز اصل مجاورت که در این مقاله توضیح داده شد، می توان از سایر نظریه ها از قبیل تقارن، امتداد و بستگی برای فهم روانی بهتر محتوا استفاده کرد.