این لیست جامعی از دانشی بسیار ضروری برای طراحان UI ،UX، تعامل یا محصول در هر سطحی است.

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

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

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

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

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

مقاله اصلی – 10 قانون تجربی در طراحی UI.

1. طراحی برای تراکم، نه پیکسل

تراکم (Density) چیست؟ تعداد پیکسل ها در هر اینچ صفحه است که با نام PPI نیز شناخته می شود. واحد “dp” مخفف “پیکسل مستقل از تراکم” است، همچنین گاهی اوقات به اختصار “dip” گفته می شود.

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

ما این کار را انجام می دهیم تا اگر دکمه ای را طراحی کردیم، مثلاً به اندازه 200 در 50 dp، به صورت 200 در 50 پیکسل در صفحه نمایش 160 ppi و 400 در 100 پیکسل در صفحه 320 ppi یا 2 برابر اندازه اصلی نمایش داده شود.

از آنجا که پیکسل برخی از صفحه ها در هر اینچ از سایر صفحات بیشتر است، طراحی ها (assets) در صفحه هایی با تراکم پیکسل بالا کوچکتر نمایش داده نمی شوند. آنها در اندازه 2 برابر، 3 برابر و 4 برابر مقدار اصلی رندر می‎شوند. این اطمینان می دهد که تمام طراحی ها اندازه خود را در دستگاه های مختلف با تراکم های مختلف حفظ می کنند.

تراکم چگونه به اندازه صفحه نمایش برگردانده می شود؟ فرض کنید ابعاد صفحه نمایش iPhone XS Max 414 x 896 است. اما این پیکسل نیست، این تعداد نقاط است. بر حسب پیکسل، 1242 در 2688 px است. با توجه به این نکته، هنگام طراحی برای آیفون XS Max، من می توانم در 414 در 896 نقطه طراحی کنم و سپس طراحی‎ها را به اندازه سه برابر (@ 3x) تحویل دهم.

2. از افزایش های 8dp استفاده کنید

چرا با فاصله گذاری های 8 تایی طراحی کنیم؟ توضیحش بسیار ساده است. ما از عدد جادویی 8 استفاده می کنیم زیرا اعداد فرد را به درستی رندر می کند. در مقابل عدد 5 است، مثلا در دستگاهی با وضوح 1.5 برابر اعداد فرد به درستی رندر نمی شوند.

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

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

از کجا بیشتر بیاموزید؟ مقاله Bryn Jackson’s 8-Point Grid را بخوانید.

3- برای ایجاد سلسله مراتب از وزن رنگ استفاده کنید

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

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

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

اگر می خواهید به سرعت واریانس وزن (سایه و ته رنگ) ایجاد کنید، Shaderade را امتحان کنید.

4. سرعتم را کم نکن

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

“می خواهم سریع شوم” – ریکی بابی

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

قانون تجربی انیمیشن چیست؟ اگر انیمیشن ها و تعاملات خرد (micro-interactions) به زمان، بیش از حد لزوم بیفزایند، تجربه را بهبود نمی‎بخشند. هدفمند بودن در استفاده از انیمیشن ها می تواند تجربه را بهبود بخشد، اما افزودن حواس پرتی و حرکات غیرضرور به عناصر نه.

من اغلب در Dribbble طرح هایی را برای صفحات فرود (landing pages) می بینم که با پیمایش کاربر در صفحه متحرک می شوند. آن ها اغلب بیش از حد متحرک هستند و همه چیز در حال محو شدن و تحرک است، در حالی که توجه کمی به UX شده است. به عنوان یک کاربر، دانستن اینکه من باید چه چیزی باید توجه داشته باشم در حالی که اتفاقات روی صفحه مدام در حال افتادن اند چالش برانگیز است. این همچنین باعث اتلاف وقت گرانبهای من می شود.

سرعت بهینه برای انیمیشن ها چقدر است؟ “تحقیقات زیادی پی برده اند که سرعت مطلوب برای انیمیشن رابط بین 200 تا 500 میلی ثانیه است. این ارقام بر اساس خصوصیات خاص مغز انسان است. هر انیمیشن کوتاه تر از 100 میلی ثانیه آنی است و به هیچ وجه قابل تشخیص نیست. در حالی که انیمیشن بیشتر از 1 ثانیه احساس تاخیر را منتقل می کند و بنابراین برای کاربر کسل کننده است.” – راهنمای نهایی استفاده مناسب از انیمیشن در UX

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

استفاده از طراحی صادقانه UX برای ایجاد تجربیات معتبر و قابل اعتماد.

مقاله اصلی – 10 اصل طراحی اخلاقی UX

5. به من اطلاع دهید

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

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

یا بهتر از آن، اگر یک دوره آزمایشی رایگان ارائه می دهید، به هیچ وجه اطلاعات کارت اعتباری را درخواست نکنید بالاخره این یک دوره رایگان است – غیر از این است؟

هر زمان که کاربران شارژ می شوند یا از آنها هزینه دریافت می شود، اطلاع دهید.

6. اطلاعات منفی را برجسته کنید

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

من شیوه ای را که Airbnb به من اطلاع می دهد میزبانی که رزرو می کنم ردیاب مونوکسید کربن ندارد و اینکه نمی توانم مهمانی برگزار کنم را دوست دارم. آنها خیلی راحت می توانند این اطلاعات را پنهان کنند، اما روی این مطلب تأکید می کنند تا مطمئن شوند با تصمیمی که می گیرید راحت باشید.

7. هرزنامه را متوقف کنید

هیچ چیزی سریع تر از اعلان های جفنگ (spam) باعث نمی شود که من یک برنامه را حذف کنم.

با ارسال تنها مرتبط ترین اعلان ها در زمان لزوم به وقت کاربر خود احترام بگذارید. همچنین ضروری است که به کاربر اجازه دهید تنظیمات اعلان خود را سریع و راحت تنظیم کنند.

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

8. شفافیت حریم خصوصی

پنهان کردن همه چیز پشت سیاست حفظ حریم خصوصی را متوقف کنید.

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

9. لغو کردن را مثل آب خوردن راحت کنید

مسافرخانه صخره ای (roach motel) یک الگوی سیاه UX است که باعث می شود ورود به یک وضعیت خیلی ساده و بیرون آمدن از آن آزاردهنده و دشوار باشد.

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

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

راه های بهبود حس و ظاهر طراحی های UI شما.

مقاله اصلی – 10 راه برای میهج کردن طراحی UI.

10. زندگی را به نوشته خود تزریق کنید

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

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

تزریق زندگی به نوشته همان تفاوت بین گفتن “بارگیری …” و “تیم میمون های بسیار آموزش دیده در حال کار بر روی آن است.” می باشد؛ این غیر منتظره بوده و کمی سرگرمی برای کاربر شما فراهم می کند.

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

شوخ طبعی همچنین می تواند بیش از حد باشد و در برخی از برنامه ها یا صنایع، رک بودن کاملاً مناسب نیست. همانطور که Lianna در وب سایت خود می نویسد punchlinecopy، “سردخانه، جراحان و نیروگاه های هسته ای باید از عرصه نوشته های طنز بیرون بمانند.”

الکسیس اوهانیان، بنیانگذار Reddit، چیزی را در Tools of Titans گفته که از آن خوشم آمد «کمی وقت بگذارید تا کمی انسانی تر شود یا -بسته به برند شما – کمی خنده دار تر، کمی متفاوت تر، یا کمی بیشتر یک چیزی. ارزشش را خواهد داشت و این چالش من است.»

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

11. گزینه پیش پا افتاده حالت تاریک

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

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

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

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

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

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

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

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

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

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

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

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

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

14. حالت های خالی

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

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

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

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

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

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

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

15. اهداف

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

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

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

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

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

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

16. پیمایش نامحدود

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

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

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

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

17. نگو، نشان بده

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

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

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

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

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

18. مولفه های بومی

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

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

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

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

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

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

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

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

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

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

20. ساده سازی کنید

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

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

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