۱۰ راه موثر برای چاشنی بخشیدن به طراحی UI

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

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

روح بخشیدن به نوشته‌ها در طراحی رابط کاربری

چه صفحه خوش‌آمدگویی (Onboarding) باشد چه  Loading Message  کاربران از جزئیات کوچک لذت می‌برند.

شرکت‌هایی مثل Old Spice  و GreiCo   به این دلیل برندهای شناخته شده‌ای هستند که به جزئیات کار توجه می‌کنند. با افزودن طنز و شخصیت‌سازی در بازاریابی‌ تبلیغات و محتوایی ماندگار تولید می‌کنند.

روح بخشیدن به نوشته‌های رابط کاربری، تفاوت میان دو جمله‌ی «اینترنت قطع شد.» و “اوه، یکی پاش رفت رو سیم…!” است. متن دوم کاملا غیر منتظره و برای کاربر سرگرم کننده‌ است.

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

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

۲- به کار بردن  آیکن و ایموجی مناسب

با افزودن آیکن و ایموجی، این امکان به کاربر داده می‌شود که در نگاه اول متوجه منظور و عملکرد اِلمان‌های شما شود.

بطور مثال، مشاهده آیکن ذره‌بین این امکان را به کاربر می‌دهد تا سریع‌تر متوجه شود که با کلیک بر روی این بخش، متن مورد نظر خودش را جستجو کند.

چگونگی استفاده از ایموجی‌ها در طراحی

من طرز استفاده از ایموجی‌های Pieter Levels در سایش ،Nomadlist ، که بسیار کاربر پسند و جذاب بوده رو دوست دارم. سادست اما UI ایی با جذابیت بصری بالایی طراحی کرده.

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

نحوه استفاده از ایموجی‌های Pieter Levels در سایتش ،Nomadlist، بسیار کاربر پسند و جذاب است. به ظاهر ساده اما UI ایی با جذابیت بصری بالا طراحی شده است.

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

• Emojione
• Icons8
• BoxIcons
• Feather
• Material

۳- انسان محور کردن طراحی به کمک تصویرسازی

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

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

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

تصویرسازی باید بر روی ارتقا بخشیدن به UX (طراحی تجربه کاربری)  باشد نه این که کاربر را از اصل قضیه دور کند.

در ادامه چند نمونه سایت برای دسترسی به عکس‌های با کیفیت معرفی می‌شود.

• Ouch!
• Freepik
• BoxIcons
• Undraw
• Humaans

۴- افزودن قابلیت حالت شب (Dark Mode)

با توجه به اپلیکیشنی که شما در حال توسعه هستید، اضافه کردن حالت شب (Dark Mode) باعث ایجاد آرامش در کاربر می‌شود.­

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

طراحی حالت شب

طراحی حالت شب (Dark Mode) تفاوت چندانی با حالت روز (Light Mode) ندارد، تنها پالت رنگی متفاوتی لازم دارند.

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

۵- استفاده از عکس‌های با کیفیت

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

در ادامه چند نمونه سایت برای یافتن عکس‌هایی با کیفیت به شما معرفی می‌شود.

• Unsplash
• Pexels
• Freepik
• Adobe Stock
• Pixabay

۶- طراحی صفحات خطا (Error)

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

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

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

۷- افزودن موشن به طراحی

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

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

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

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

تبدیل حس، سرعت، جهت و… انیمشین‌ها، به زندگی واقعی می‌توانید تاثیر چشمگیری در طراحی‌های شما داشته باشد.

با به وجود آمدن ابزار‌های متعددی مثل principle، Adobe XD، Invision studio و… امکانات زیادی در اختیار طراحان قرار گرفته شد تا بتوانند موشن‌های مورد نظرشان را به طراحی اضافه کنند.

Adobe XD، auto-animate Prototyping است. XD کاملا حسی و شهودی هست و به سرعت می‌توان موشن‌های لازم در طراحی را بدون سرمایه گذاری و توسعه، پیاده‌سازی کرد.

ابزار دیگری که در این زمینه می‌تواند مورد استفاده قرار بگیرد lottie  است.

این ابزار این امکان را به شما می‌دهد تا انیمیشن‌های After Effects  را به انیمیشن svg سازگار با وب تبدیل کنید.

در صورتی که علاقه‌ای به یادگیری After Effect  ندارید حتما Lottie را بررسی کنید تا از موشن‌های رایگانش بهره‌مند شوید.

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

خوشبختانه منابع طراحی زیادی مانند Google Material وجود دارد که به شما در طراحی استاندارد موشن‌ها کمک میکند.

این نکته مهم رو هیچ‌وقت فراموش نکنید، موشن‌ها نباید سرعت کاربر شما را کُند کنند.

۸- تمرکز روی جزییات با استفاده از micro-interactions

مشابه موشن‌ها، Micro-interaction ها (طراحی تعاملی) نیز تجربه لطیفی برای کاربران ارائه می‌کنند که مورد استقلال زیادی قرار گرفتند.

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

Medium claps ، مثال خوبی از چگونگی استفاده از Micro-interaction ها، می‌تواند تجربه تعاملی خوبی را برای اپلیکیش‌ها ایجاد کند.

Claps در Medium و دکمه لایک در YouTube را مقایسه کنید، متوجه می‌شوید که تجربه‌های کاملا متفاوتی را ایجاد می‌کنند.

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

به هر حال در یوتیوب Micro-interactoin ها ممکن است کاربر را از هدف اصلی (مشاهده ویدئوها) دور کند در نتیجه micro-interaction ها نیز باید متناسب با محتوا و هدفی که مد نظر شماست مورد استفاده قرار گیرند.

۹- استفاده از Pattern و Gradient

گرادینت و پترن‌ها یکی دیگر از راه‌های تبدیل طراحی و محتوایی خسته‌کننده، به طرحی زیبا و پر انرژی است که امروزه محبوبیت زیادی در بین کاربران و طراحان پیدا کردند.

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

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

۱۰- استفاده از سایه، افزودن عمق

سایه‌ها بهترین راه برای افزودن عمق در طراحی هستند که به طرح شما بُعد می‌دهند. طراحی برجسته اِلمان‎‌ها در ایجاد سلسه مراتب اطلاعات اپلیکیشن شما کمک می‌کند.

همچنین عمق، دسترسی به بخش‌های مهم را آسان‌تر می‌کند.

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

مهم این است که هدف‌مند و در جهت طراحی شما باشند. اهمیت اِلمان‌ها را با اضافه کردن سایه مشخص کنید.

نتیجه‌گیری

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

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

منبع: uxdesign