مهسا کاظم زاده
مهسا کاظم زاده
خواندن ۵ دقیقه·۳ سال پیش

ساختار و محدودیت‌های چشم و تاثیر آنها در طراحی

آیا تا به حال به تأثیر ادراک بصری (ساختار چشم‌) بر طراحی خود فکر کرده‌اید؟ پس بیایید در مورد چشم صحبت کنیم.

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



دید پیرامونی بر احساسات ما تاثیر می‌گذارد، و احساسات ما بر انتخاب‌هایمان.

اولین راه ارتباطی با صفحه نمایش مانیتورتان چیست؟ چشمها.

شما با دیدن آنچه در صفحه، نمایش داده می‌شود شروع به تصمیم گیری می‌کنید. همه انتخاب‌های شما با دیدن شروع می‌شود، چه این‌ که صفحه را ترک کنید یا دکمه خرید را فشار دهید یا صفحه را پیمایش کنید.

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

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

تصویر موقعیت آمیگدالا در مغز
تصویر موقعیت آمیگدالا در مغز


به زبان ساده، داده‌هایی که به آمیگدالا ارسال می‌شود در کاری که قرار است انجام دهیم بسیار اهمیت دارد.

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

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

دید پیرامونی برای درک محیط اهمیت دارد و دید مرکزی برای درک اشیاء.

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

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

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

برای درک دقیق تر آزمایش ذکر شده، پیشنهاد می‌کنم ویدیو مربوط به این آزمایش را در یوتیوب تماشا کنید.

همچنین این آزمایش در درس دوم از کتاب 100 نکته‌ای که در مورد مردم باید بدانید نیز مطرح شده که برای مطالعه بیشتر ‌می‌توانید به ان رجوع کنید.

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


دید پیرامونی تقریبا 2 برابر سریع‌تر از دید مرکزی تجزیه تحلیل می‌شود.

بیایید از اولین تکان‌های زندگی، در زیر آب شروع کنیم، حدود 300000 سال پیش.

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

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

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

برای درک بهتر این تفاوت می‌توانید این ویدیو یوتیوب که به بازی با مغز با این مورد تفاوت سرعت می‌پردازد را تماشا کنید.

چرا این نکات مهم است؟

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

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


دید پیرامونی حساسیت کمتری به رنگ‌ها دارد.

دید پیرامونی بیشتر از سلول های میله‌ای (Rod) تشکیل شده است که به رنگ آنچنان حساس نیست. حساسیت به رنگ توسط سلول‌های مخروطی (Cone) ایجاد می‌شود که در بخشی از چشم به نام فووا (بخشی از چشم که دید مرکزی را دریافت می کند) قرار دارد.

نمایش میزان پراکندگی سلول‌های میله‌ای و مخروطی در چشم
نمایش میزان پراکندگی سلول‌های میله‌ای و مخروطی در چشم


این نکته چگونه به ما در طراحی کمک می‌کند؟

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

نمایی از لومنوسیتی رنگ‌ها
نمایی از لومنوسیتی رنگ‌ها



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

همچنین می‌توانید این مقاله را در سایت مدیوم به زبان اینگلیسی نیز بخوانید.

https://mahsakz.medium.com/have-you-ever-thought-about-the-effect-of-visual-perception-on-your-design-d0dd7f23fc0c


برای مطالعه بیشتر در مورد کارکرد چشم و مفاهیم مربوط به آن نیز می‌توانید از مقالات و کتاب‌های زیر استفاده کنید.

https://jov.arvojournals.org/article.aspx?articleid=2122327
https://www.cell.com/current-biology/fulltext/S0960-9822%2812%2900582-9
https://motamem.org/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%DA%A9%D8%AA%D8%A7%D8%A8-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%AD%D8%B3%DB%8C-%D8%AF%D8%A7%D9%86%D9%84%D8%AF-%D9%86%D9%88%D8%B1%D9%85%D9%86/
https://www.navaar.ir/audiobook/1235/%DA%A9%D9%BE%D8%B3%D9%88%D9%84-100-%D9%86%DA%A9%D8%AA%D9%87-%D8%A7%DB%8C-%DA%A9%D9%87-%D9%87%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%AF%D8%B1%D8%A8%D8%A7%D8%B1%D9%87-%D9%85%D8%B1%D8%AF%D9%85-%D8%A8%D8%AF%D8%A7%D9%86%D8%AF-%D8%B3%D9%88%D8%B2%D8%A7%D9%86-%D8%A7%D9%85-%D9%88%D8%A7%DB%8C%D9%86%D8%B4%DB%8C%DA%A9
https://www.exploratorium.edu/snacks/peripheral-vision




طراحی تجربه کاربریuiuxuxruxd
شاید از این پست‌ها خوشتان بیاید