1 kLYofxl9rQzgeClhborymA

47 درس کلیدی برای طراحان UI و UX [بخش 1]

زمان مطالعه: 8 دقیقه

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

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

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

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

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

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

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

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

مقادیر پیکسل 3 یا 4 برابر مقادیر dp هستند

تراکم (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 شده است. به عنوان یک کاربر، دانستن اینکه من باید چه چیزی باید توجه داشته باشم در حالی که اتفاقات روی صفحه مدام در حال افتادن اند چالش برانگیز است. این همچنین باعث اتلاف وقت گرانبهای من می شود.

یک نمونه بد از انیمیشن برای 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 گفته که از آن خوشم آمد «کمی وقت بگذارید تا کمی انسانی تر شود یا -بسته به برند شما – کمی خنده دار تر، کمی متفاوت تر، یا کمی بیشتر یک چیزی. ارزشش را خواهد داشت و این چالش من است.»

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

دیدگاه‌ خود را بنویسید

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

خروج از نسخه موبایل