اصول روانشناسی که هر طراح رابط کاربری UI باید بداند

8 دقیقه زمان مطالعه
1402/11/21
0 نظر

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

منظور از روانشناسی در طراحی UI چیست؟

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

اصول روانشناسی در طراحی UI

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

بیشتر بخوانید: بهترین کتاب‌های آموزش Ui

تاثیر به‌کارگیری اصول روانشناسی در رابط کاربری

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

تاثیر اصول روانشناسی در طراحی

موارد زیر، نتیجه‌ استفاده‌ صحیح از اصول روانشناسی در طراحی UI هستند:

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

۸ اصل مهم روانشناسی که باید رعایت کنید

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

اصول روانشناسی در طراحی UI

۱- اصول گشتالت

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

اصول گشتالت

مثلا اگر سه عنصر را با رنگ، شکل و اندازه مشابه ببینید، تصور می‌کنید که یکسان هستند. اصول گشتالت عبارتند از:

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

۲- قانون هیک

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

قانون هیک

۳- قانون فیتس

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

قانون فیتس

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

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

۴- سلسله مراتب بصری (Visual Hierarchy)

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

سلسله مراتب بصری

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

۵- یکپارچگی

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

پیوستگی در طراحی

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

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

۶- بازخورد

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

بازخورد در طراحی

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

۷- بار شناختی

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

بار شناختی

برای به حداقل رساندن بار شناختی، نکات زیر را رعایت کنید:

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

۸- بازیابی خطا

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

تحمل خطا

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

بیشتر بخوانید: فضای منفی در طراحی چیست؟

چرا کاربران یک رابط کاربری را ترک می‌کنند؟

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

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

سخن پایانی

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

منابع:

www.ramotion.com | bootcamp.uxdesign.cc

۴/۵ - (۱ امتیاز)

مطالب مرتبط