۴۷ درس کلیدی برای طراحان UI و UX [بخش ۲]

47 key lesson for ui ux designers

۱۱. گزینه حالت تاریک اضافه کن

| image 8
By ProCreator — Dribbble

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

طراحی برای حالت تاریک تفاوت زیادی با طراحی برای حالت روشن ندارد. فقط نیاز به یک پالت رنگ متفاوت است. توصیه می کنم به کاربر اجازه دهید بین حالت تاریک یا روشن اختیار داشته باشد – امکان جابجایی بین دو حالت باعث بهبود تجربه (UX) برنامه شما می شود و به کاربران امکان می دهد کنترل خود را بر تجربه شان حفظ کنند.

۱۲. توضیحات خطای مزخرف ایجاد نکنید

هر رویدادی در برنامه خود، حتی موارد نه چندان مهیج را، به عنوان فرصتی برای ارائه یک تجربه به یاد ماندنی ببینید.

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

| image 45

نمونه مورد علاقه من در این مورد صفحه خطای “قطعی اینترنت” Google Chrome است. آنها تمام اطلاعات لازم را برای آگاهی کاربر در مورد چگونگی رفع آن فراهم می کنند، اما یک بازی دونده بی پایان T-Rex هم وجود دارد. عجب نبوغی!

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

الکسیس اوهانیان، بنیانگذار Hipmunk، می گوید: «مردم هنوز در مورد پیام خطای ما در Hipmunk توییت می کنند و این یک پیام خطا است؛ چرا آنها این کار را می‏‎کنند؟ چون وقتی آنها کاری را انجام می دادند که انتظار می رفت مانند جستجوی پرواز بسیار خسته کننده باشد، به آنها یک لحظه از سبک سری می بخشد.»

۱۳. مقداری از الگو (pattern) و گرادینت استفاده کنید

| image 46
صفحه ثبت نام Whimsical

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

| image 47
از صفحه فرود UserTesting.com

با الگوها می توانید به هر اندازه که می خواهید خلاق و یا کمینه گرا (minimal) باشید. گرچه نباید حواس را از محتوای اصلی پرت کرد.


| image 48

اصول طراحی که غالباً فراموش می شوند.

مقاله اصلی – ۱۰ دستور برای طراحی UI

۱۴. حالت های خالی

| image 49

بخش های نمایشی خالی ایجاد شده توسط شما باید چیزی بیش از یک بخش خالی باشد

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

این می تواند لیستی از کتابها، پروژه ها، کارها، مشتریان یا آهنگ ها باشد – اما از آنجا که آنها هنوز چیزی اضافه نکرده اند، خالی است.

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

برای جهت دهی به کاربران باید از بخش نمایشی خالی خود استفاده کنید.

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

هر کاری که می خواهید انجام دهید، اما فقط اطمینان حاصل کنید که نگویید، “اینجا هنوز چیزی وجود ندارد …”

۱۵. اهداف

| image 50

باید برای انگشتان انسان کنترل هایی به اندازه کافی بزرگ ایجاد کنید

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

صرف نظر از انتخاب یک بخش به خاطر انتخاب دیگری، اذیت کننده است و تجربه لذت بخشی نخواهد بود اگر گزینه‎ای انتخاب شود که قصد انتخابش نباشد.

پر کردن (padding) 2 میلی‌متر بین عناصر، یک قانون اساسی برای جلوگیری از ضربه (tap) های از دست رفته است.

اپل در دستورالعمل های رابط انسانی آیفون حداقل اندازه هدف ۴۴ پیکسل عرض ۴۴ پیکسل بلندا را توصیه می‎‏کند.

مایکروسافت در راهنمای طراحی و تعامل UI ویندوز فون اندازه لمس پیشنهادی ۳۴px و حداقل اندازه لمس را ۲۶px می‌داند.

۱۶. پیمایش نامحدود

| image 51

از پیمایش بی نهایت فقط برای محتوا به سبک خوراک استفاده خواهید کرد

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

این برای خوراک خبری بسیار خوب عمل می کند، اما اگر در پیام ها، ایمیل ها، لیست انجام کار (to-do)، جستجو و مانند آن اعمال شود کاربر نمی تواند بفهمد که ابتدا، وسط و انتها کجاست.

هنگامی که یک کاربر می تواند ۹۴۵ صفحه را در لیست ببیند، می تواند تصمیم بگیرد که خواه لیست را با جستجو، مرتب‌سازی یا فیلتر کردن محدود می کند. اما اگر تصوری از تعداد موارد موجود در لیست نداشته باشد نمی تواند تصمیم بگیرد.

۱۷. نشان بده، نگو

| image 55

برای درک چگونگی عملکرد یک برنامه، به مطالعه طاقت فرسا احتیاج ندارید

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

کاربران نمی خواهند بخوانند تا بفهمند – در عوض، محل را به آنها نشان دهید و اجازه دهید آن را به صورت بصری تجربه کنند.

نمایش نحوه استفاده از محصول به کاربران، همیشه بهتر از گفتن آن است.

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

۱۸. مولفه های بومی

| image 54

در صورت امکان از مولفه های رابط بومی دستگاه استفاده خواهید کرد

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

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

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


| image 53

اگر مناسب استفاده شوند، لیست های کشویی خیلی افتضاح نیستند

مقاله اصلی – ۱۰ روش برای بهبود لیست کرکره ای در طراحی UI و UX

۱۹. پیش فرض هوشمندانه

| image 52

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

اگر ۸۰٪ از کاربران گزینه خاصی را انتخاب کنند، با قرار دادن آن بصورت پیش فرض هوشمندانه، می توانیم به ۸۰٪ از کاربران اجازه دهیم این مرحله را به طور کامل رد کنند.

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

۲۰. ساده کنید

| image 56

در صورت امکان، می توانیم با تجزیه و تحلیل بفهمیم کدام گزینه ها از لیست کشویی ما غیرضروری است.

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

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

با امتیازتان ما را سر حال بیاورید
میانگین: ۰

توسط حسین مرتضوی فر

من کارشناسی معماری دارم. حدود سال 92 بود که متوجه شدم که به کد نویسی و علوم رایانه علاقه مندم. بنابراین شروع به یادگیری جاوا و برنامه نویسی برای اندروید کردم. سپس به ارتقاء مهارت های خود پرداخته و در دانشگاه فردوسی شروع به تحصیل در رشته هوش مصنوعی کردم. در ضمنِ این کار، به علاقه ام یعنی زیباسازی همه چیز ادامه دادم و آن را با تبدیل شدن به طراح UI و UX به پایان رساندم. من اکنون یک طراحم که از سال 97 در حال انجام این کار هستم و به ارتقاء مهارت هایم می پردازم

دیدگاهی بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *