کاربرا چجوری میبینن؟

چیز‌هایی که می‌بینیم!

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

تخصص من که تو لکه‌های دیوارهاست بعضی وقتا شاید دقیقه‌ها میشینم تا بتونم یه سری اشکال منطقی از توشون در بیارم. (قبلا از این روش برای تصویرسازی و خلق کاراکتر استفاده می‌کردم. خیلی کاربردی بود.)

حالا؛ چرا ما باید ابر‌هایی که کیلومتر‌ها از ما فاصله دارن و یک اسب دونده ببینیم؟ یا لکه‌ی دو سانتی‌متری روی دیوار رو یک کاروان شتر؟

دلیلش روشیه که مغز ما اطلاعات رو پردازش می‌کنه!

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

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

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

خب حالا که چی؟

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

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

اصول اصلی گشتالت:

۱)اصل شکل و زمینه (Figure-ground)

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

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

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

۲)اصل مجاورت (Proximity)

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

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

۳)اصل مشابهت(similarity)

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

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

۴)اصل بستار(Closure)

ذهن انسان همیشه به دنبال الگوهای آشناست. درصورتی که اطلاعاتی که ما اغلب دریافت می‌کنیم ناکامله، ذهن انسان سعی می‌کنه تا فواصل و فضاهای خالی رو پر کرده و شکل کامل رو درک کنه.

نوارهای وضعیت، اسلایدر‌های سایت، لودینگ‌ها و ... همگی از این اصل پیروی می‌کنند.

۵) اصل منطقه مشترک (Common Region)

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

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

۶)اصل سرنوشت مشترک(common fate)

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

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

۸)اصل تقارن (symmetry)

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

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

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

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

اگر این مقاله براتون مفید بوده، برای دوستاتونم مفیده. پس چرا به اشتراک نذاریدش؟ :)