web-ui-design-for-the-human-eye-part-1

طراحی رابط کاربری (ui) وب برای چشم انسان – بخش اول

برنامه کاربردی Gestalt برای طراحی رابط کاربری وب سایت

 

بپذیرید، در برخی موارد زندگیتان تحت ناثیر خطای بصری قرار گرفته اید.

شگفت انگیز است که چشمانمان چگونه ما را فریب می دهند، و جالب تر اینکه ما با دیدمان بیشتر از درک مرسوم خود کنار می آییم. اما خطای دید اغلب نتیجه علم مشاهده است – علم Gestalt (علم اشکال و فرم ها)

DuckRobbit
“خطای اردک خرگوش” Wikipedia.Creative Commons 2.0.

اصول Gestalt نظریه هایی است که چگونگی عملکر نواحی خاکستری دید ما را تجزیه و تحلیل می کند. این اصول توضیح می دهد که مردم چگونه چیزهای بصری را درک می کنند، و تغییر در آرایش، چشم انداز (perspective)، اندازه و غیره این احساس را تغییر می دهد.

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

 

ارکان Gestalt برای طراحی

علی رغم چیزی که به نظر می آید، اصول Gestalt نتیجه زندگی کاری تعدادی افراد به نام Gestalt نیست.

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

ui web design for human eye 2
“ترکیب های اصول Gestalt” Wikipedia. Creative Commons 2.0

 

بر اساس افسانه ای در سال ۱۹۱۰، روانشناس مکس وردیمر مسیری از چراغ های ریل راه آهن را در حال سوسوزدن و روشن خاموش شدن دید (مانند چراغ هایی که یک چادر تئاتر را احاطه کرده اند). این حرکت خطای دیدی را ایجاد می کرد که به نظر می رسید چراغ ها در یک دایره در حال حرکت اند، با اینکه آن ها فقط در فاصله زمانی مناسب متناوب یکدیگر بودند.

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

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

 

بگذارید نگاهی به ۴ شرط زیر در پیش زمینه Gestalt بیندازیم:

۱٫ ضروریات

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

این عکسی که گرفته شده است اصول Gestalt را توضیح می دهد.

 

در آن بیننده ابتدا سگ بزرگی را تشخیص می دهد. به جای چیزهایی مانند “پای سگ، سر سگ، مجموع آن ها با یکدیگر، و … ”

 

کاربرد در طراحی وب : اشکال و محیط های مرعی باید از جزئیات مقدم تر باشد (مهم نیست چقدر خلاقانه است یا چقدر خیره کننده به نظر می رسد). این مهم نیست که چه اندازه یک دکمه کلیکی شگفت انگیز به نظر می رسد اگر کاربر شما نداند که آن یک دکمه است. مانند چیزی که در کتاب Interaction Design Best Practice توضیح داده شده است. این “دلالت کننده ها” به پیشنهاد عملکرد کم می کند (مقرون به صرفه می داند).

 

۲٫ جسمیت دادن

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

 

جسمیت دادن

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

 

کاربرد در طراحی وب: علاوه بر نعل اسبی و نارنجک دستی، “بستن” همچنین در طراحی اهمیت دارد. همان اندازه که شما اطلاعات کافی برای انتقال یک چیز دارید، کاربر می تواند باقی را کامل کند.

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

در خاتمه بحث پایین تر این را توضیح خواهیم داد.

 

عملکرد فضای سفید به عنوان یک ابزار طراحی، نه یک Canvas خالی

 

۳٫ بی ثباتی:

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

 

همسرم و مادر زنم

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

کاربرد در طراحی وب : اجتناب کنید از چند تفسیری !

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

 

۴٫ تغییر ناپذیری :

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

 

تغییر ناپذیری

 

در مثال بالا، ما می توانیم جدا کنیم اشیای A به عنوان تفاوت از اشیای B، حتی اگر آن ها شبیه باشند. به هرحال ما می توانیم بفهمیم که اشیای در A همانند اشیای در A همانند اشیا در C و D می باشد، هرچند آن ها بدشکل شده باشند.

 

کاربرد در طراحی وب : تغییر ناپذیری ممکن است تاثیر مستقیم در طراحی وب نسبت به دیگر موارد Gestalt نداشته باشد؛ به هر حال اغلب در تست های کپچا بکار برده شود، به این خاطر که تغییر ناپذیری هنوز یکی از مزیت های انسان نسبت به ربات است.

 

۵ اصول پر استفاده Gestalt

در سال ۱۹۵۴، دهه های بعد از اولین مشاهده تامل وردیمر در چراغ های قطار، رادولف آرنهیم اصول Gestalt را در کتاب هنر و درک بصری : روانشناسی چشم خلاق مختصر و تالیف کرد.

به عنوان یک طراح کارولن بونر پیشنهاد می دهد، شالوده آن ۵ اصل که پر استفاده است در زیر می باشد :

  1. تشابه
  2. رابطه شکل-زمینه
  3. گروه بندی
  4. محصور شدن
  5. استمرار

که جزئیات آن ها را در زیر توضیح خواهیم داد :

۱٫ تشابه

اشیا که شبیه هستند مشابه دیده می شوند.

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

تشابه نباید آشکار باشد . به عنوان مثالی که نشان داده شده است. از آژانس طراحی Green Chamelon، آیکون های ناوبری همه متفاوت دیده می شوند. به هرحال، شباهت در رنگ، سایز، فضا، و مکان آیکون ها می گوید که هر آیکون در سطح ناوبری یکسان حاضر شده اند.

www.greenchameleondesign.com

 

قرار گرفتن روی منوها، یک تعاملی است که باعث می شود نوشته توضیحات هر بخش بعدی سایت Slide Out شود. این الگوی تعامل به ویژه به خوبی برای منوهای عمودی کار می کند چون فضا را ذخیره می کند اما عملکرد را قربانی نمی کند. (آیکون ها استعاره ای از یک جمله را می سازند).

این ارتباط الگوها و ثبات، عناوین بحث شده در Interaction Design Best Practices است. یک طراح باهوش از مشابهات استفاده خواهد کرد برای انتقال معانی، ذخیره زمان در توضیحات و هموار کردن تجربه.

 

۲٫ رابطه شکل-زمینه

عناصری که به هرشکلی دیده می شوند (عناصر غیر متمرکز) یا زمینه ها (پس زمینه هر شکل فرضی).

استیو بردلی سه عنوان رابطه زمینه-شکل را لیست می کند.

 

www.moddeals.com

 

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

 

http://tannbach-modul.zdf.de/

دقیق تر که شویم، سایت برای یک فیلم آلمانی Tannbach لایه های بیشتری به کار برده شده برای شکل / زمینه.

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

این یک انجام کاملا هوشمندانه اصل ساده Gestalt است و نشان می دهد که شما نیازی نیست تفسیر کنید که “ساخت یک منو pop out مقابل یک زمینه تار”

 

۳٫ گروهبندی

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

حصار – محصور کردن اشیا غیر مشابه با هم درون یک مرز محسوس در ذهن بیننده آن ها را یکی می کند.

مجاورت – اشیایی که نزدیک یکدیگر گروهبندی می شوند به صورت مشابه درک می شوند، بخصوص اگر فاصله بیشتری بین آن ها با گروه های دیگر برقرار باشد. این همچنین گره زده می شود با زمان و فضای عناصر قانون هیک ، که ما در Interaction Design Best Practice توضیح داده ایم.

 

www.facebook.com

 

در مثال صفحه فیسبوک بالا اصول محصور کردن و مجاورت بکار برده شده است.

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

 

بر اساس متن کتاب Web UI Design For The Human Eye

 

مطلب در حال تکمیل شدن است همراه باشید …