مغز ما همیشه تلاش می‌کند برای درک و به خاطرسپاری بهتر در اشیا و پدیده‌ها، معنا و مفهوم خاصی را کشف کند. اصول گشتالت توضیح می‌دهند که چرا و چطور انسان‌ها الگوها را در اطراف خود ادراک می‌کنند.
اکثر این اصول به صورت شهودی احساس و بدیهی به نظر می‌رسند اما هنوز هم گاهی درست رعایت نمی‌شود.
گشتالت یک لغت آلمانی به معنای شکل است و حاصل فعالیت تعدادی روانشناس به نام‌های ماکس ورتهایمر، ولفگاگ کهلر و کورت کافکا است. - ویکیپدیا
قواعد اساسی اصول گشتالت بر پایه 4 اصل کلی است.
ذهن ما تمایل به دیدن تصویر بزرگتر نسبت به جزییات در نگاه نخست دارد. این یک موضوع تکاملی است که به مرور زمان تقویت شده است. ذهن برای قضاوت سریعتر در زمان بررسی محیط اطراف ابتدا تصاویر بزرگ (با احتمال خطر بیشتر) را در مرکز توجه قرار می‌دهد و سپس به سراغ جزییات می‌رود.
در ابتدای مقاله‌ی 10 خطای شناختی مهم در زندگی در مورد دلیل تشخیص سریعتر چهره صحبت کردیم که می‌توانید ردپای همین تحلیل را در آنجا نیز پیدا کنید.
حتی اگر تصویر ناقص یا عنصر گمشده‌ای در شکل وجود داشته باشد ما می‌توانیم کل تصویر را ببینیم. این هم به نحوی یک ویژگی توسعه یافته‌ی تکاملی است.
ذهن ما برای ثبت و تشخیص اطلاعات جدید آن را به نزدیک‌ترین و شبیه‌ترین عنصر موجود در حافظه متصل می‌کند که در نتیجه باعث می‌شود حتی تصاویر ناقص را نیز بتوانیم تشخیص دهیم.
در مقاله‌ی کوتاه در مورد Recognition Over Recall در این مورد بیشتر صحبت کرده‌ام.
مردم اغلب اشیاء مبهم را به بیش از یک روش تفسیر می‌کنند. مغز ما بین گزینه‌ها بدنبال یقین، به عقب و جلو می‌رود و زمانی که یک دیدگاه مسلط‌تر شد دیدگاه دیگر سخت‌تر دیده خواهد شد.
بسته به اینکه در این تصویر ابتدا دو چهره‌ی رو به هم ببینید یا یک ظرف، دیدن تصویر دوم بسیار سخت می‌شود.
افراد می‌توانند اشیا ساده را مستقل از زاویه و مقیاس معمول خود تشخیص دهند. مغز ما می‌تواند اشیا را از دیدگاه‌های مختلف درک کند.
به این دلیل است که می‌توانیم انواع مختلف فونت و حروف کَپچا را بخوانیم و اشیا را در پرسپکتیوهای مختلف تشخیص دهیم.
این چهار اصل کلی، شاکله‌ی قوانین گشتالت را می‌سازد. در این مقاله به کاربرد برخی از اصول گشتالت در طراحی رابط کاربری (UI) اشاره می‌کنیم.
به تصویر ذیل نگاه کنید. به این فکر کنید که اگر بخواهید این تصویر را برای یک نابینا توضیح دهید چطور آن را توصیف می‌کنید؟
مطابق این اصل، عناصر نزدیک به یکدیگر مرتبط و در یک گروه توصیف می‌شوند. هر چقدر فاصله نسبت به سایر فواصل نزدیکتر باشد این ارتباط نزدیکتر است.
ذهن ما این مجموعه عناصر نزدیک را به عنوان یک گروه درک می‌کند. همینطور که در 9 عنصر سمت راست شکل بالا به نظر می‌رسد در هنگام گروه‌بندی ذهنی، مجاورت اولویت بالاتری نسبت به شکل و رنگ دارد.
اصل مجاورت در UI به شدت با مفهوم فضای سفید مرتبط است و آقای بسامی در مقاله‌ی فضای سفید را بشناسید؛ تمرین و الگوی مفید برای شروع یادگیری خیلی خوب به این موضوع پرداخته‌اند که پیشنهاد می‌کنم مطالعه کنید.
عدم رعایت فضای سفید در وبسایت XiaomiShop باعث شده است که نشان اسلایدر بالای متن جدیدترین‌ها به نظر مرتبط با جدیدترین‌ها باشد در حالی که مرتبط با قسمت بالایی است.
مشابه اصل مجاورت، قراردادن آیتم‌ها در یک منطقه (محدوده‌ی بسته) نیز آنها را به هم مرتبط می‌کند.
دفترچه تلفن موبایل و منوی ناوبری وبسایت‌ها نمونه‌هایی از استفاده Common Region است. وبسایت شیائومی شاپ که در بالا تصویر آن قرار داده شده بود علاوه بر اصل مجاورت می‌تواند مطابق تصویر ذیل، مشکل مطرح شده را با گروه‌بندی هر بخش حل کند.
در صفحه اول وبسایت فونت ایران همینطور که در تصویر زیر می‌بینید نوشته‌ی همه محصولات هر چند به محتوای بالایی مرتبط است اما چون در یک گروه قرار نگرفته است در نگاه اول به نظر می‌رسد وابسته به محتوای زیر خود است.
ذهن بشر اشکالی را که دارای خصوصیات مشابه هستند، مرتبط می‌بیند. سه عامل عمده‌ی تشابه، اندازه، رنگ و شکل هستند. لازم به ذکر است که، در میان این سه عامل اندازه نسبت به دو مورد دیگر از گشتالت قوی‌تری برخوردار است.
علاوه بر سه عامل شباهت گفته شده در UI، موارد دیگری مثل فونت، آیکون، سایه و بافت هم می‌توانند ایجاد شباهت کنند.
همان که پیشتر هم گفتم، مجاورت اثر قوی‌تری از شباهت دارد به همین دلیل است که در تصویر ذیل ابتدا متوجه 4 گروه می‌شویم و سپس بر اساس شکل و رنگ دکمه‌ها درک می‌کنیم که ماهیت همه‌ی دکمه‌های شبیه به هم یکسان است.
این اصل در طرف مقابل Similarity قرار دارد. به زبان ساده اشیا متمایز، یک نقطه‌ی کانونی ایجاد (جلب نظر) می‌کنند.
تمامی مواردی که ایجاد شباهت می‌کنند مثل رنگ، اندازه، شکل، فونت و ... می‌توانند ایجاد تمایز کنند. Bold کردن و تغییر اندازه‌ی متن در نوشته‌ها و رنگ و سایه‌ی دکمه‌ی FAB در اندروید مثال‌هایی از این اصل هستند.
چشم انسان به دلیل دید سه بعدی، قادر است عمق تصاویر را درک کند و بین اشکال پیش‌زمینه و پس‌زمینه تمایز قائل شود.
هر موقع که شما یک مودال یا (FAB (floating action button می‌بینید با این اصل سروکار دارید. راه‌های زیادی برای جدا کردن پیش‌زمینه از پس‌زمینه وجود دارد. نیمه شفاف، تیره و تار و حرکت پس‌زمینه و سایده‌دار کردن پیش‌زمینه از جمله‌ی این راه‌ها هستند.
برای مودال‌ها در طراحی متریال از لایه‌ی نیمه شفاف استفاده می‌شود اما در IOS مشابه تصویر زیر از تار کردن پس‌زمینه کمک گرفته می‌شود.
برای طراحی Modal در متریال از نیمه‌شفاف کردن زمینه استفاده می‌کنند اما در iOS مطابق تصویر زیر پس‌زمینه را تار می‌کنند.
زمانی که اشکال در یک جهت حرکت می‌کنند ما تمایل داریم که آنها را مرتبط با هم فرض کنیم.
حرکت یک موضوع مهم در طراحی است. مدل حرکت اسلایدرها در تصویر زیر نشان می‌دهد که همه‌ی این کارت‌ها از یک جنس هستند. همچنین هماهنگی انیمشن ورود اطلاعات به صفحه نیز نشان‌دهده‌ی ارتباط بین آنهاست.
اشکال اغلب به عنوان یک کل درک می‌شوند، حتی اگر ناقص باشند. در تصویر زیر برای ذهن راحت‌تر است که تصویر سمت راست را به عنوان یک دایره‌ی ناقص درک و به خاطر بسپارد تا دو منحنی و در تصویر سمت چپ هم راحت‌تر است که یک پنج‌ضلعی روی 5 دایره ببیند تا 5 دایره‌ی ناقص.
از جمله موارد استفاده‌ی این قانون در طراحی Progress Bar، لودینگ و آیکون است.
به کمک این موضوع می‌توانیم آیکون‌های تصویر زیر را زمانی که کامل نیستند را نیز درک کنیم که برای طراحی بسیار مهم است.
این اثر و Common Fate باعث شده که اجداد ما بتوانند ردپا و مسیر احتمالی حیوانات را در برف که ناقص شده است تشخیص دهند.
این مقاله برداشت آزاد مقاله‌ی UI Design in Practice: Gestalt Principles است.
اگر به طراحی رفتاری و نقش علوم شناختی در طراحی علاقه‌مندید این مقالات را از دست ندهید.
