امیر تقی آبادی
امیر تقی آبادی
خواندن ۳ دقیقه·۵ سال پیش

کوتاه در مورد The Blurry-eye Test

در بخش دید پیرامونی بیشتر از دید مرکزی استفاده می‌شود کتاب ۱۰۰ چیزی که هر طراح باید بداند توضیح داده است که ما زمانی که بر روی یک موضوع متمرکزیم همزمان تصویری مات از حوالی آن نقطه‌ی تمرکز رو برای بررسی ناخودآگاه به مغز می‌فرستیم.

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

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

برای رعایت بهتر این موضوع بهتره UI نهایی رو به صورت تار نیز تماشا کنیم تا ببینین آیا روابط و اولویت بین المان‌ها در این شرایط رعایت شده یا نه.



ساختار بصری

آیا سلسله‌مراتب (hierarchy) بصری در طراحی رعایت شده؟ آیا کاربر می‌تونه وقتی تمرکزش روی متن نیست همچنان روابط پدر و فرزندی بین اطلاعات رو درک کنه؟

تار شده به کمک سایت pixlr.com
تار شده به کمک سایت pixlr.com


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


اولویت بصری

آیا مهمترین المان صفحه متمایز است؟

بارها در مقالات مختلف از جمله مقاله‌ی چک‌لیست طراحی User Onboarding اپلیکیشن گفتم که کاربرها نمی‌خونن بلکه اسکن می‌کنند. باید طراحی برای این نگاه سرسری طراحی شده باشه و المان‌های اصلی صفحه متمایز باشند. به کمک Blur کردن تصویر می‌شه متوجه شد که آیا اکشن اصلی صفحه توجه لازم رو به خودش می‌کشه یا نه.

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



گروه‌بندی بصری

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

بانی‌مود
بانی‌مود

یکی از بهترین راه‌ها برای اینکه ببینین آیا گروه‌ها به اندازه‌ی کافی با هم فاصله دارن یا نه، استفاده از Blur Usability Test.

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




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




منبع:

https://uxdesign.cc/the-blurry-eye-test-1bd12bc6c3f8

http://learnwebdesign.ir/UX/100Things/Things/2




از این دست کوتاه مقاله‌ها:

تست کاربردپذیریرابط کاربریhierarchyمعماری اطلاعاتقوانین گشتالت
راوی تجربه کاربری در #ویرگول و مدرس در #یوتیوب https://www.youtube.com/c/AmirTaqiabadi
آموزش طراحی تجربه کاربری (UX Design) و کمی هم رابط کاربری (UI Design) در قالب مقاله، ویدئو و دوره‌ی آموزشی UI UX
شاید از این پست‌ها خوشتان بیاید