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

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 09 مرداد 1397
دسته بندی ها : طراحی وب , رابط کاربری

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

کلید اصلی برای رسیدن به چنین هدفی این است که به صورت همیشگی به کاربران فکر کنید.

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

در این مطلب با ۱۰ نکته بسیار مهم در رابطه با فرایند طراحی رابط کاربری با شما هستیم.

۱. کاربران‌تان را بشناسید

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

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

آن‌ها چه اهدافی را دنبال می‌کنند؟ چگونه یک وبسایت می‌تواند به هدف‌های آنان و چالش‌هایی که در پیش‌رو دارند کمک کند؟

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

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

۲. تعیین کنید که مردم چگونه از رابط کاربری شما استفاده کنند

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

در یک اپلیکیشن مانند Tinder مردم به دو صورت تعامل دارند: مستقیم (تعامل برقرار کردن با یکی از المان‌های محصول) و غیر مستقیم (تعامل برقرار کردن با محصول از طریق یک المان خارجی).

نمونه‌هایی از تعامل مستقیم

  • تپ کردن روی یک دکمه
  • کشیدن یک کارد
  • درگ/درپ کردن

نمونه‌هایی از تعامل غیر مستقیم

  • اشاره و کلیک کردن با استفاده از یک ماوس
  • استفاده از دستورات و میانبرهای کیبورد
  • تایپ در یک فرم ورودی

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

۳. انتظاراتی را در نظر بگیرید

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

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

قرار دادن انتظارات با استفاده از طراحی

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

قرار دادن انتظارات با استفاده از متن

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

برای کنش‌هایی که غیرقابل بازگشت هستند، (مثلا حذف دائمی)، بهتر است از مردم تاییدیه بگیرید.

۴. پیشبینی اشتباهات

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

  1. از خطاها قبل از اینکه اتفاق بیافتند جلوگیری کنید.
  2. راه‌هایی را برای حل خطاها بعد از اتفاق افتادن در نظر بگیرید.

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

پیشبینی کردن خطاها همواره خستگی کمتری نسبت به حالتی که بخواهید خطاها را اصلاح کنید دارد. 

۵. فیدبک بدهید - سریع

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

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

 رابط کاربری

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

فقط در نظر داشته باشید که این کارها را به سرعت انجام دهید. Usability.gov هر تاخیری که بیشتر از یک ثانیه باشد را به عنوان یک وقفه شناسایی می‌کند. 

۶. به دقت روی اندازه و مکان المان‌ها فکر کنید

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

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

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

۷. استانداردها را فراموش نکنید

خلاق بودن و تمایل داشتن طراحان به بازتولید چیزها، می‌تواند بسیار زیبا باشد، اما همیشه ایده خوبی هم نیست.

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

به همین دلیل است که گوگل داک (جدیدتر از مایکروسافت ورد) از گزینه‌های مربوط به مایکروسافت ورد استفاده کرده است:

 رابط کاربری

۸. روند یادگیری آسانی در رابط کاربری ایجاد کنید

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

برای مثال، سعی کنید از «بیشتر بدانید» استفاده نکنید. چرا؟ به این دلیل که این دو واژه به کاربران اطلاعات زیادی نمی‌دهد و وقتی در یک صفحه ۲۰ بار چنین موضوعی تکرار شده است،‌ به نظر نمی‌رسد که بتواند کمکی به کاربر بکند. این موضوع برای کاربرانی که از Screen Readerها استفاده می‌کنند بیشتر صادق است.

۹. تصمیم‌گیری را ساده کنید

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

به صورت یک قانون کلی:

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

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

۱۰. به داده‌ها دقت کنید

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

یک سیستم آنالیز برای وبسایت یا اپلیکیشن‌تان پیاده‌سازی کنید. می‌توانید از ابزارهای موجود بهره ببرید. برای مثال Google Analytics و Mixpanel.

MixPanel روی رویدادها تمرکز دارد، بنابراین داده‌های موجود در این سیستم از تعاملات و رویدادهای کاربری بدست می‌آید. Google Analytics بیشتر رفتاری است، به شما زمان نشست‌ها، منابع ترافیک و... را می‌دهد. هر دوی این ابزارها داده‌های خوبی را به شما می‌دهند اما بهتر است براساس نیازتان یکی از آن‌ها را انتخاب کنید.

منبع

مقالات پیشنهادی

10 ابزار متن باز معروف برای طراحی رابط کاربری

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

هشت قاعده طلایی برای طراحی رابط بهتر

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

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

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

50 مجموعه برتر UI برای طراحی وب سایت و گجت های همراه

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