۱۰ روش برای هیجان انگیز کردن یک طرح UI

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

۱. زندگی را در کارهای خود به جریان بیاندازید

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

Aarron Walter مدیر تجربه کاربری MailChimp می‌گوید:« ما متوجه شدیم که وجود طنز و شخصیت در کارهایمان می‌تواند یک تجربه معمولی را به تجربه‌ای هیجان انگیز و به یاد ماندنی تبدیل کند. این‌ها همان چیزهایی هستند که مردم به دنبالش می‌گردند.»

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

شوخ طبعی نباید از حد و مرزش عبور کند. زیرا طنز بیش از اندازه در بعضی برنامه‌ها یا صنعت‌ها، مناسب نخواهد بود. همانطور که دوستم لینا در وب سایت خود می‌نویسد:«جراحان و نیروگاه‌های هسته‌ای باید از عرصه طنز دور بمانند.»

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

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

۲. از چند آیکون یا ایموجی استفاده کنید 

اضافه کردن ایموجی‌ها و آیکون‌ها می‌تواند به شما در توصیف عملکرد عناصر کمک کند. دیدن آیکون ذره بین فوراً به کاربر می‌فهماند که با کلیک کردن بر روی آن می‌تواند چیزی را جستجو کند.

من عاشق شیوه‌ی استفاده‌ی Pieter Levels از ایموجی‌ها در سایتش هستم. او با استفاده از این ایموجی‌ها، کاری کرده که سایت دوستانه‌تر و جذاب‌تر شود. این یک روش ساده اما موثر برای جذاب‌تر کردن UI شماست.

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

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

Emojione

Icons8

BoxIcons

Feather

Material

۳. محصول خود را با تصویرپردازی انسانی‌تر کنید

تصویرپردازی به شما این امکان را می‌دهد تا یک پیام پیچیده را به روشی آسان و قابل هضم منتقل کنید. 

ما از زمان کودکی آموختیم که تصاویر را با کلمات و ایده‌ها مرتبط کنیم. آیا تا به حال کتابی ( کتاب مخصوص کودکان) را دیده‌اید که تصویرسازی نشده باشد؟ امیدوارم ندیده باشید. اضافه کردن تصاویر می‌تواند به بهبود روحیه و تعادل در رابط شما کمک کند. یک تصویر می‌تواند توجه کاربر را به خودش جلب کرده و فهم جنبه‌های برنامه شما را آسانتر کند.

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

مکان‌های مورد علاقه من برای گرفتن تصاویر رایگان عبارتند از:

Ouch!

Freepik

Undraw

Humaans

۴. یک گزینه برای حالت تاریک را اضافه کنید

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

۵. از تصاویری با کیفیت بالا استفاده کنید

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

Unsplash

Pexels

Freepik

Adobe Stock

Pixabay

۶. خطاهایی را بسازید که مضخرف نباشند

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

نمونه‌ی مورد علاقه‌ی من، صفحه‌ نمایش خطای "No Internet" در گوگل کروم است. آن‌ها تمام اطلاعات لازم برای رفع این خطا را به همراه یک بازی دودندگی بی پایان T-Rex ارائه داده‌اند. این دیگر آخر نبوغ و خلاقیت است!

یکی دیگر از موارد مورد علاقه‌ی من، صفحه‌ی Dribbble 404 است. این بسیار خیره کننده است، زیرا کاربر را درگیر خود نگه می‌دارد و سپس آن‌ها می‌توانند به سرعت به سراغ طراحی‌های فوق العاده بروند.

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

۷. به طراحی‌های خود کمی تحرک اضافه کنید

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

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

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

Principle

XD’s

Invision Studio

After Effects

Lottie

Flinto

من ترجیح می‌دهم از Adobe XD و ابزارهای نمونه سازی خودکار و متحرک آن استفاده کنم. زیرا قبل از صرف مقدار زیادی زمان بر روی یک ایده، می‌توانم ببینم که آیا ایده‌ی من کارساز است یا خیر.

یکی دیگر از ابزارهای عالی که اخیراً از آن زیاد استفاده کرده‌ام، Lottie‌ است. این برنامه به من کمک می‌کند تا هر یک از انیمیشن‌های After Effects را آسانتر به یک SVG سازگار با وب تبدیل کنم. اگر می‌خواهید این برنامه را امتحان کنید، LottieFiles را برای دریافت انیمیشن‌های رایگان بررسی کنید؛ اما باید بدانید که برای کار با این برنامه نیازی به بلد بودن After Effects ندارید.

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

۸. با تعاملات کوچکتر، روی جزئیات تمرکز کنید

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

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

۹. از کمی الگو و خط‌های شیب دار استفاده کنید

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

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

۱۰. برای اضافه کردن عمق به طرح‌های خود از سایه استفاده کنید

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

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

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

منبع