رومینا محمدزمانی
رومینا محمدزمانی
خواندن ۴ دقیقه·۵ سال پیش

چک لیست طراحی Avatar

عکس از Joe Schmoe
عکس از Joe Schmoe


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

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

آواتارها باعث ایجاد ارتباطات می‌شوند.

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

هدف کاربردی

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

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

کاوش ایده‌ها برای آواتارهای بهتر

واضح است که بهترین آواتار عکس واقعی خود فرد است. اما وقتی دسترسی به آن نداریم چه کنیم؟ جواب ساده است: از placeholder استفاده می‌کنیم. در خیلی از موارد، طراح‌ها از آواتارهای عمومی به عنوان placeholder ها استفاده می‌کنند. این آواتارها از اشکال ساده‌ای ساخته شده اند. تنها چیزی که برای ایجاد یک آواتار عمومی لازم است استفاده از دو شکل بیضی است: یک بیضی(oval) کوچک و یک بیضی بزرگ

درحالیکه آواتارهای عمومی هدف کلی محصول را برآورده می‌کنند (رو نمایی از اشکال)، اما فاقد یک ویژگی مهم در یک UI خوب می‌باشند - شناسایی بصری - که باعث می‌شود یک محصول در رقابت تنگاتنگ با محصولات دیگر، باقی بماند.

اینجا ۶ ایده برای ایجاد آواتار بهتر می‌گوییم:

۱. استفاده از حروف آغازی اسامی

نمایش حرف اول مشخصات کاربر در قسمت آواتارها (silhouette). بسیاری از برنامه‌های ایمیل از این تکنیک استفاده می‌کنند.

نمایش حروف آغازی اسامی‌ در جایگاه آواتار
نمایش حروف آغازی اسامی‌ در جایگاه آواتار

همچنین می‌توان با تخصیص رنگ‌های منحصر به فرد برای هر کاربر، این تکنیک را بهبود بخشید.

نمایش حروف آغازی اسامی همراه با پیش‌زمینه رنگی
نمایش حروف آغازی اسامی همراه با پیش‌زمینه رنگی

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

۲. تصویرسازی

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

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

۳. حیوانات

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

آواتار کاربران ناشناس در Google Doc
آواتار کاربران ناشناس در Google Doc

کاربران خوش شانس می‌توانند نیان کت(Nyan cat) معروف را ببینند.

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

۴. استفاده از ایموجی و اسمایلی‌ها

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

آواتار Drop Box
آواتار Drop Box
طراحی یک اسمایلی خوب می‌تواند باعث تعامل بیشتر کاربر شود.
طراحی یک اسمایلی خوب می‌تواند باعث تعامل بیشتر کاربر شود.


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

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

رابط کاربری Snapchat
رابط کاربری Snapchat


۶. استفاده از محتواهای دارای حق کپی رایت

محصولاتی مانند نتفلیکس (Netflix) که صاحب مجموعه‌ای از محتواهای ویدئویی هستند، این امکان را دارند که از این محتواها در قسمت‌های مختلف UI خود استفاده کنند. از غیرمعمول‌ترین قسمت‌ها، جایگاه آواتار است. شما به عنوان یک کاربر می‌توانید شخصیت مورد علاقه‌ی خود را به عنوان آواتار خود انتخاب کنید.

Bonus.Memes

همه عاشق Memeها هستند. استفاده از آن‌ها یک کار ساده برای افزایش جذابیت برنامه است. 9gag بخاطر استفاده از تصاویر محبوب و meme ها در قسمت پروفایل کاربران، بسیار معروف است.

 آواتارساز در 9gag
آواتارساز در 9gag


ابزارهای آنلاین برای ایجاد آواتار

اینجا می‌توانید مجموعه جذاب از ابزارهایی را مشاهده کنید که به ساخت انواع آواتارها به شما کمک می‌کند.


https://uxpro.cc/toolbox/visual-design/avatars/

منبع: https://uxplanet.org/6-ideas-for-creating-better-avatars-placeholders-a01cac5d7c6





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