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

خواندن کتاب، ‌ فی‌نفسه افق‌های جدیدی به روی خواننده علاقه‌مند باز می‌کند اما خواندن کتاب‌های عمیق و پایه‌ای برای تمام کسانی که در حال انجام کارهای مهندسی و بخصوص توسعه نرم‌افزار هستند، مزیت مهم دیگری که دارد این است باعث می‌شود فرد، سطحی نگر نباشد و جزئیاتی را در کارهای روزانه خود در نظر بگیرد که با جستجو در اینترنت و خواندن راهنمای نرم‌افزارها و آموزش‌های آنلاین بدست نمی‌آورد. یکی از این کتاب ها که هر کسی و علی‌ الخصوص طراحان باید بخوانند کتاب "۱۰۰ نکته که هر طراح باید درباره انسان ها بداند" است. [لینک کتاب]

نویسنده این کتاب Susan Weinschenk که یک روانشناس رفتاری است و از سال 1985 در زمینه طراحی و تجربه کاربری مشغول به کار است و تاکنون پنج کتاب در مورد تجربه کاربری منتشر کرده است.

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

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

افراد چگونه میبینند

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

آنچه می‌بینیم، چیزی نیست که مغز می‌فهمد

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

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

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

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

مغز ما هر لحظه در حال تصمیم گیری های مختلف است و به طور کلی میتوان گفت مغز ما دارای یک یادگیری ماشینی(machine learning) است که تصمیمات گرفته شده در هر لحظه با توجه به ادراک٬ تجربه های گذشته و محیط است.

مغز بر اساس ادراک گذشته و استفاده از قوانین کلی مثلاً نور محیط درباره چیزی که میبینیم حدس هاس میزند که اکثر اوقات این حدس ها درست کار میکنند ولی بعضی اوقات دارای خطا نیز هستند به مثال زیر توجه کنید :

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

الگو و گروهبندی

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

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

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

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

فضای سفید

فضای سفید در طراحی همانند استفاده از سکوت در یک موسیقی است. بدون استفاده متناسب از سکوت ، موسیقی بدون ساختار است و بدون استفاده از متناسب از فضای سفید در طراحی٬ طرح بدون ساختار است

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

انواع دید

دو نوع دید داریم: ۱- مرکزی ۲- پیرامونی.

• دید مرکزی : وقتی است که شما مستقیماً به یک‌ چیز نگاه می‌کنید و جزییاتش را می‌بینید.
• دید پیرامونی : وقتی است که شما چیزهایی را می‌بینید ولی مستقیماً به آن‌ها نگاه نمی‌کنید .

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

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

اگر می‌خواهید به کاربران اعلانی نشان دهید این فضا مکانی مناسب است چون ناخودآگاه کاربر آن را نگاه میکند.

کاربران چگونه صفحات را میبینند

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

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

الگوی F

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

البته عکس بالا برای زبان های چپ به راست است ولی برای راست به چپ به صورت F وارونه است به گونه ای که انگار F در روبروی آیینه قرار گرفته است.

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

کارایی

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

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

جمع بندی این قسمت

• حتما حالت های را برای وضعیت مختلف مثل فعال٬ هاور و یا غیرفعال برای اشیا در نظر بگیرید.
• از استفاده کردن سرنخ‌های hover روی محصولاتی که در دستگاه‌های لمسی قابل‌استفاده هستند خودداری کنید.

افراد ممکن است تغییرات را نبینند

ابتدا این فیلم زیر را حتما مشاهده کنید و تعداد پاس های که تیم سفید به هم میدهند را بشمارید.(طول ویدیو ۱ دقیقه است)

تحقیقات ردیابیِ چشم بر روی کسانی که ویدیوی گوریل را دیدند نشان داد که همه گوریل را «دیدند»؛ به این معنی که تصویر گوریل در دید مرکزی آن‌ها قرارگرفته است، اما فقط ۵۰% آن‌ها فهمیدند که گوریل را دیدند.

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

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

کوررنگی

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

• هر جا از رنگ برای رساندن معنی خاصی استفاده می‌کنید، از یک المان دیگر هم نیز استفاده کنید. مثلا ایکون٬ تا افرادی که دارای کوررنگی هستند هم بدون درک رنگ شما بتوانند معنی و منظور پیام شما را بفهمند.
• مطمئن شوید که بین رنگ پس زمینه و متن کنتراست خوبی برای خواندن متن هست. میتوانید از این سایت کمک بگیرید
• وقتی لیستی از رنگها برای انتخاب به کاربر نشان میدهید به طور مثال انتخاب رنگ برای لباس مطمئن شوید که نام رنگ هم در کنار خود رنگ به نمایش میگذارید تا افراد کوررنگ هم بتوانند رنگ دقیق را انتخاب کنند.
• طراحی لینک ها نباید متکی بر رنگ باشد و باید یک سرنخ بصری مانند خط زیر متن هم داشته باشد تا این گونه افراد هم به راحتی بتواند لینک ها را شناسایی شوند
• چون placeholder ها معمولا کنتراست پایینی دارند حتما از label در فرم های خود استفاده کنید.

ممنون که این پست را مطالعه کردید٬ امیدوارم این پست مفید واقع شده باشه برای شما

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

اگر موردی یا پیشنهادی تو ذهنتون هست که توی این پست نگفتیم اون رو کامنت کنید تا من و بقیه خوانندها استفاده کنیم