5 قانون ناب روانشناسی در طراحی UI/UX

مقدمه

چه عنوان جالبی! 5 قانون ناب روانشناسی در طراحی UI/UX سایت و اپلیکیشن!! اصلا این یعنی چی؟؟

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

5 اصل مهم روانشناسی که هر طراح یوآی و یوایکس باید بداند

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

1- اثر وُن رستورف (Von Restorff Effect)

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

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

اثر ون استورف در طراحی UI/UX

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

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

“وقتی چندین چیز مشابه وجود داشته باشد، به احتمال زیاد چیزی که از بقیه متفاوت است، به خاطر سپرده می‌شود!”

2-    اثر موقعیت سریالی (Serial Position Effect)

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

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

اصل تاخر میگه: این اصل میگه افراد اطلاعات انتهایی فهرست، سخنرانی و یا رویداد رو نسبت به اطلاعات میانی به خاطر می سپارند.

مثال کاربردی این قانون در زندگی روزمره: دیدین وقتی میرید سر کلاس یا سخنرانی، مطالبی که استاد اول جلسه میگه و همینطور مطالبی که در آخر اون جلسه گفته میشه رو بادقت‌تر و با انرژی‌تر گوش میدین؟

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

اثر موقعیت سریالی در طراحی UI/UX

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

“اطلاعاتی که در ابتدا و انتها ارائه می شوند بهتر بخاطر سپرده می شوند“.

3- بارشناختی (Cognitive load)

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

ذهن انسان توی سه مرحله اطلاعاتی رو که از محیط می‌گیره و دسته‌بندی می‌کنه:

نحوه یادگیری انسان

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

“بار شناختی مقدار تلاشی است که ذهن برای پردازش اطلاعات انجام می‌دهد”

این نظریه در تحقیقات جان سویلر در دهه 1980 معرفی شد. او معتقد بود تئوری بار شناختی را می‌توان به سه دسته تقسیم کرد:

الف) بارشناختی ذاتی: یعنی سختی ذاتی مسئله چقدره.

ب) بارشناختی اضافی: اگر روش ارائه مسئله، پیچیده باشه، یعنی بار شناختی اضافی به وجود اومده.

ج) بارشناختی وابسته: اطلاعات و ساختاری که از قبل در ذهن فرد ایجاد شده.

در طراحی تجربه کاربری بارشناختی ذاتی و وابسته پرکاربردتر هستند در ادامه اون‌ها رو توضیح میدیم.

بارشناختی ذاتی

فرض کنید ما از کاربران می‌خواهیم کاری انجام بدهند مثل ثبت نام، پر کردن فرم نظرسنجی و …. ما به عنوان طراح تجربه کاربری باید طراحی خودمون رو طوری ارائه بدیم که مراحل تا حد ممکن کوتاه، ساده و با کلمات مناسب باشند و کاربر بتواند به راحتی مراحل رو انجام بده. پس ما مسئله پر کرن فرم را برای کاربر رو ذاتاً راحت طراحی کردیم.

بارشناختی وابسته

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

“برای کاربر زمانی یادگیری یک چیز جدید آسان می شود که بتوانند آن را به الگوی چیزی که قبلا آنرا درک کرده بودند، مطابقت دهند”

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

نظریه بارشناختی در UI/UX

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

 تا اینجای مقاله 5 قانون ناب روانشناسی در طراحی UI/UX خوب بود؟ پس دو قانون دیگه رو هم ادامه بده.

4- قانون هیک (Hick’s Law)

این قانون محبوب ترین اصل به همراه قانون گشتالته.

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

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

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

قانون هیک در طراحی UI/UX

نظریه هیک میگه هر چه تعداد انتخاب ها بیشتر باشه و گزینه ها پیچیده تر باشند، زمان لازم برای تصمیم گیری بیشتر میشه.

5- قانون مجاورت (Law of Proximity)

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

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

قانون مجاورت در طراحی UI/UX

در مثال بالا 72 دایره وجود دارد. ما می‌تونیم این دایره‌ها رو با توجه به فاصله‌ای که بین آنهاست تشخیص بدهیم. می فهمیم یک گروه 36 تایی در سمت چپ و 3 گروه 12 تایی دایره در سمت راست تصویر وجود داره.

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

جمع‌بندی

توی این مقاله با دنیای هیجان انگیز طراحی تجربه‌کاربری آشنا شدیم. طراحی خوب اتفاقی نیست و برای به دست آوردن دل کاربران باید کلی زمان گذاشت تا اونها رو درک کرد. قوانین این طراحی خیلی زیاده و ما به صورت خلاصه 5  قانون ناب روانشناسی در طراحی UI/UX سایت و اپلیکیشن رو خیلی ساده توضیح دادیم. از قانون ون رستورف (اثر جداسازی)، موقعیت سریالی و اثر بارشناختی گفتیم تا قانون هیک و اثر مجاورت که جزو قوانین گشتالت در طراحی بودند و به ما کمک می‌کنن تا ذهن کاربران رو درک کنیم. حتما نظراتتون رو با ما در میان بگذارید. اگر هم پروژه‌ای دارید و نمیدونید تجربه‌کاربری اون رو چیکار کنید، با ما تماس بگیرید یا واتساپ یوایکس نت پیام بدید.