https://virgool.io/feed/@rominazamani91 در حال یادگیری رابط کاربری fa 2026-06-07 04:42:07 https://files.virgool.io/upload/users/65206/avatar/7Lg17O.png?height=120&width=120 https://virgool.io/@rominazamani91 https://virgool.io/ux-unicorn/%DA%86%DA%A9-%D9%84%DB%8C%D8%B3%D8%AA-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-empty-state-honacekz2ee1 هرآنچه در طراحی صفحات Empty state لازم است، بدانید!وظیفه اصلی یک طراح ایجاد حس رضایت و خشنودی در کاربران برنامه است. گاهی اوقات کار کردن بر روی صفحات اصلی برنامه و قسمت‌های مختلف پروژه باعث عدم توجه طراحان به اهمیت صفحات Empty state می‌شود. این موضوع می‌تواند باعث ایجاد مشکلات متعدد و حتی ترک برخی از کاربران از اپلیکیشن یا سایت شود. در این مقاله می‌خواهیم با علت اهمیت داشتن این صفحات و نحوه‌ی جذاب کردن آن، آشنا شویم.صفحه empty state چیست؟در واقع empty state یا zero-data state ها پیام‌هایی هستند که، کاربران زمانی‌که محتوایی جهت نمایش در صفحه وجود نداشته باشد، مشاهده می‌کنند.این صفحات روشی برای بهبود تجربه کاربری محصول شما هستند. طراحان UX فرصت‌های زیادی برای ایجاد یک تجربه‌ی جذاب و پرمعنی دارند اما متاسفانه بیشتر اوقات از اهمیت empty state غافل می‌شوند.اینکه بدانیم این صفحات از اولویت بالایی در پروسه طراحی UX برخوردارند، موضوع مهمی است. زیرا با وجودی‌که به ندرت رخ می‌دهند اما وقتی نمایش داده ‌شوند، باید رضایت کاربر را جلب نمایند. برای این‌کار باید مطمئن شوید در طراحی خود تمام نیازهای کاربر را مشاهده می‌کنید. توجه به این جزئیات نه تنها باعث حرفه‌ای تر شما می‌شود، بلکه باعث باقی‌ماندن شما در بازار رقابت و همچنین نمایش هویت بصری سازمانی شما می‌شود. البته باید توجه کنید که مهم‌ترین موضوع، ایجاد حس خوب در کاربرانی است که با این صفحات تعامل دارند.بررسی دقیق تر empty stateبرای اینکه بدانید یک empty state ایده‌آل شامل چه مواردی می‌شود، اول باید با عملکرد دقیق اپلیکیشن یا سایت خود آشنا باشید.گاهی empty state‌ها می‌توانند فرم‌های مختلفی به خود بگیرند و عملکردهای متفاوتی داشته‌باشند و اصولا برای علل متعددی طراحی می‌شوند. در اینجا ۴ مدل معمول empty state که اصولا رخ می‌دهد را آورده‌ایم:اولین استفاده کاربرزمانی اتفاق می‌افتد که هنوز اطلاعاتی جهت نمایش وجود ندارد و کاربر با یک محصول جدید کار می‌کند.نمونه ای از طراحی empty state جهت راهنمایی کاربر جدیدپاک کردن اطلاعات یک صفحهزمانی که کاربر عملی را به اتمام رسانده و یا محتوای یک صفحه را تماما پاک کند، در این مواقع یک صفحه خالی نمایش داده می‌شود.اطلاعات موجود در سطل زباله حذف شده است و این empty state نمایش داده می شود.خطاهااین مدل زمانی‌که مشکلی پیش می‌آید و یا مثلا اتصال به اینترنت از بین رفته است، رخ می‌دهد.خطای ۴۰۴ بدون نتیجه و اطلاعات زمانی‌که داده‌ای جهت نمایش وجود ندارد. مثلا جستجو بی‌نتیجه بوده و اطلاعاتی درباره‌ی آن موجود نیست.نحوه نمایش جستجوی بی‌نتیجه در اپلیکیشن پیادهپیدا نکردن مکان مورد نظر در اپلیکیشن اسنپخطا(Error) وقتی مشکلی در صفحه بوجود می‌آيد یا ارتباط با اینترنت قطع شود، کاربر باید صفحه‌ای ببیند که درباره‌ی آن موضوع اطلاع دهد. در این مواقع empty state نباید شامل جزئیات زیاد و گمراه‌کننده باشد و تنها یک توضیح کوتاه و مختصر کافی است تا به کاربر بگوید که در قدم بعدی باید چه عملی انجام دهد. اگر کاربر دسترسی به اینترنت نداشته باشد، می‌توانید یک بازی ساده و جذاب به صفحه‌ی خود اضافه کنید (مانند گروم کروم). بنابراین کاربر می‌تواند زمانی‌که در انتظار اتصال مجدد اینترنت است را، با یک روش سرگرم‌کننده سپری کند.بازی ساده گوگل کروم هنگام قطعی اینترنتمثال‌هایی از موقعیت‌های معمول empty state در برنامه‌هاصفحه دراپ باکس(dropBox) وقتی هنوز فایل یا فولدری ایجاد نشده‌است.نمایش نتیجه زمانی‌که تمام تسک‌های موجود در to-do list تکمیل شده‌است.نمایش خطا در slack وقتی از دستوری که پشتیبانی نمی‌شود، استفاده کرده‌ایم.وقتی برای اولین بار اکانتی در یک شبکه اجتماعی (مثلا faceBook) می‌سازیم و هنوز مخاطبی نداریم.جستجو در جیمیل (Gmail) و عدم نمایش نتیجهبهترین تمرین برای طراحی empty state اگر از شما خواسته شده تا یک صفحه empty state طراحی کنید، یک سری تمرین برای رسیدن به هدفتان وجود دارد:به کاربران خود بگویید چه کاری انجام دهند(Call to Action (CTAهمانطور که گفته شد، یک empty state خوب این فرصت را به ما می‌دهد که کاربر را برای تعامل با محصول تشویق کنیم. برای اینکار شما می‌توانید یک دکمه call to action در صفحه خود قرار دهید.دکمه Call to Action منطقی‌ترین عملی که کاربر می‌تواند در صفحه انجام دهد را نشان می‌دهد یعنی هنگامی طراحی دکمه باید بدانید بهترین عمل برای کاربر چیست. این دکمه لازم است باشد تا کاربر بتواند به راحتی از empty state وارد فضای دارای اطلاعات شود. دکمه ایجاد تیکت جدید در پشتیبانی علی بابا البته توجه کنید که نیازی نیست که در هر صفحه‌ی empty state لزوما این دکمه وجود داشته باشد زیرا گاهی یک تصویر مناسب به همراه توضیحات مختصر گویای همه چیز می‌باشد.عملکردهای مختلفی برای دکمه Call to Action وجود دارد:- کلیک کردن روی دکمه برای انجام یک عمل جدید- نوشتن فیدبک در یک بخش مخصوص - استفاده از آن برای آموزش کاربر و نمایش یک ویژگی مخصوص- فرستادن کاربر به صفحه helpبرای مثال به یک نمونه از شبکه اجتماعی زیر توجه کنید:دکمه call to action شبکه اجتماعی face bookیک لیست دوستان وجود دارد ولی درحال حاضر خالی است. یک call to action خوب از کاربر می‌خواهد که دوستان خود را پیدا کند و آنها را با برنامه پیوند می‌دهد.به empty state خود شخصیت اضافه کنید:این صفحات جایی هستند که شما می توانید کمی خلاقیت به خرج دهید و کمی خصوصیات خاص به برند خود اضافه کنید. البته توجه کنید شخصیت پردازی لزوما به معنی شوخ‌طبعی نیست! وقتی که می‌خواهید به محصول خود طنز اضافه کنید، باید خیلی محتاط باشید! مواردی که امروز بامزه و جالب به نظر می‌رسند ممکن است در آینده خسته‌کننده شوند.اگر می‌خواهید از تصویر و متن با هم استفاده کنید، توجه کنید که تعادل را در صفحه خود برقرار کنید.گاهی تصاویر به خوبی گویا هستند و تنها کافی است نوشته‌ای مرسوم و مستقیم به طراحی خود اضافه کرد.در تصویر زیر google به خوبی از این کار برآمده است:Googleمطابق با قواعد گوگل متریال دیزاین تصاویر استفاده شده باید:- دارای هارمونی مشخص و یکدستی باشند- با برند شما سازگار باشندهمچنین تگ لاین شما نیز باید:- پیغام مناسب و کمک کننده‌ای داشته باشد- با برند سازگار باشد- هدف صفحه را به خوبی برساندهر پیغام در empty state از دو بخش تشکیل شده است:ـ سربرگ یا headline که اطلاعات اصلی را می‌دهد-‌ متن یا body که اطلاعاتی را اضافه می‌کند.برای خوانایی بهتر، متن نباید از سایز عکس بزرگتر شود. همچنین باید کوتاه و دوستانه و گیرا باشد و برای جذب کردن بیشتر مخاطب از افعال در headline خود استفاده کنید.از empty state برای آموزش و راهنمایی کاربر استفاده کنید.شما می‌توانید از این صفحات برای راهنمایی کاربران جدید و هدایت آن ها در برنامه خود استفاده کنید و در واقع empty state‌ها نقش موثری در پروسه‌ی آموزش کاربر دارند.یک empty state خوب کلید اساسی در نگه داشتن کاربران است. به گفته برخی منابع پس از گذشت ۳ ماه، تنها ۴ درصد کاربران از برنامه استفاده می کنند. بنابراین طراحان Ux باید توجه بسیاری به نحوه‌ی راهنمایی کاربران داشته باشند.درواقع empty stateها باید شامل اطلاعاتی باشند که با خیلی از اوقات استفاده از دکمه‌های call to action نقش مهمی را ایفا می‌کنند.از محتواها‌ی آماده یا آغازکننده استفاده کنید:به پیشنهاد متریال دیزاین بهتر است که صفحات خالی خود را با محتواهای آغازکننده پر کنید. این کار باعث می‌شود که کاربر سریع‌تر بتواند از محصول استفاده کند. به عنوان مثال برنامه‌ی ورد (word) از نمونه‌های آماده (template) جهت دسترسی راحت‌تر کاربر استفاده می‌کند.اپلیکیشن‌های کتاب و یا موسیقی خیلی اوقات می‌توانند از این محتواها استفاده کنند و از آن نتیجه‌های خوبی بگیرند. در این برنامه با استفاده از کتاب‌های رایگانی که در دسترس قرار گرفته، می‌توان سایر بخش‌ها را نیز گردش کرد.مثالهای از طراحی empty stateطراحی خوبی که برای این صفحه(اولین بار که کاربر وارد برنامه می شود) به کار برده شده است. دکمه call_to_action که در اینجا Get started است به شما کمک می کند تا بدانید برای شروع چه کاری باید انجام دهید.(dropBox)یک مثال خوب برای طراحی empty state. زمانیکه جستجو نتیجه ای بر نمی گرداند.مثال از طراحی هایی که UX مناسبی برای empty state ندارند:اینجا یک طراحی empty state می بینید که فیدبک خوبی به کاربر می دهد اما این فرصت که به کاربر مسیری را نمایش دهد یا call_to_action داشته باشد را از دست داده است.در این طراحی ما تقریبا یک صفحه خالی می بینیم! این تصویر به تنهایی عالی است اما هیچ مسیر مشخصی را نمایش نمی دهد و یا هیچ عملکرد یا اطلاعات خاصی به کاربر نمی دهد.جمع بندیهیچوقت کاربر را تنها نگذارید!!! empty state شما باید یک پاسخ شفاف به این سوال بدهد که چرا کاربران آن را در صفحه خود می‌بینند و‌ در قدم بعدی باید چه کاری انجام دهند. یک empty state ایده‌آل به کاربر می‌گوید که هدف آن چیست و چرا کاربر آن را مشاهده می‌کند. همچنین روشی خوبی برای درگیری بیشتر کاربر با محصول است.منابعhttps://medium.com/@cadabrastudio/empty-states-design-best-practices-4ae6f72b654bhttps://www.justinmind.com/blog/everything-you-need-to-know-about-empty-state-design/https://www.toptal.com/designers/ux/empty-state-ux-design رومینا محمدزمانی رومینا محمدزمانی Sun, 14 Jun 2020 15:19:49 +0430 https://virgool.io/ux-unicorn/%DA%86%DA%A9-%D9%84%DB%8C%D8%B3%D8%AA-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-avatar-trj2ldhtbfjz عکس از Joe Schmoeآواتارها (Avatars) یکی از معمول‌ترین المان‌های طراحی هستند که اصولا در برنامه‌های بیزینسی، اجتماعی و یا بازی‌ها دیده می‌شوند.با وجود اینکه به طور نسبی دارای سایز کوچکی در صفحه هستند، اما از قدرت بالایی برخوردارند.آواتارها باعث ایجاد ارتباطات می‌شوند. ارتباط بین کاربر و محصول و یا ارتباط بین کاربران. آواتاری که خوب طراحی شده باشه می‌تواند تجربه‌ی واقعی‌تری از محصول به ما بدهد.هدف کاربردیمانند سایر المان‌های طراحی کاربری، آواتارها برای هدف مشخصی ایجاد شده اند. به نوعی پروسه‌ی تعامل و ارتباط را ساده‌تر می‌کنند: آواتارها فضای صفحه را ذخیره می‌کنند. درهم ریختگی‌های بصری کمتر می‌شود. طراح‌ها اصولا از تصاویر بصری به جای جملات استفاده می‌کنند. بهبود فهم و ادراک. کاربران برای شناسایی یک فرد به جای نوشته‌ها به تصاویر تکیه می‌کنند.کاوش ایده‌ها برای آواتارهای بهترواضح است که بهترین آواتار عکس واقعی خود فرد است. اما وقتی دسترسی به آن نداریم چه کنیم؟ جواب ساده است: از placeholder استفاده می‌کنیم. در خیلی از موارد، طراح‌ها از آواتارهای عمومی به عنوان placeholder ها استفاده می‌کنند. این آواتارها از اشکال ساده‌ای ساخته شده اند. تنها چیزی که برای ایجاد یک آواتار عمومی لازم است استفاده از دو شکل بیضی است: یک بیضی(oval) کوچک و یک بیضی بزرگدرحالیکه آواتارهای عمومی هدف کلی محصول را برآورده می‌کنند (رو نمایی از اشکال)، اما فاقد یک ویژگی مهم در یک UI خوب می‌باشند - شناسایی بصری - که باعث می‌شود یک محصول در رقابت تنگاتنگ با محصولات دیگر، باقی بماند.اینجا ۶ ایده برای ایجاد آواتار بهتر می‌گوییم:۱. استفاده از حروف آغازی اسامینمایش حرف اول مشخصات کاربر در قسمت آواتارها (silhouette). بسیاری از برنامه‌های ایمیل از این تکنیک استفاده می‌کنند.نمایش حروف آغازی اسامی‌ در جایگاه آواتارهمچنین می‌توان با تخصیص رنگ‌های منحصر به فرد برای هر کاربر، این تکنیک را بهبود بخشید.نمایش حروف آغازی اسامی همراه با پیش‌زمینه رنگیبا وجودیکه این تکنیک می‌تواند به خوبی نقش تشخیص هویتی را ایفا کند، اما یک ایراد مهم دارد - به راحتی می‌توان با موقعیتی مواجه شد که اسم تعدادی از کاربران حروف آغازی مشابهی داشته باشند.۲. تصویرسازیتصویرسازی می‌تواند جایگزین خوبی برای عکس باشد. یک تصویرسازی خوب می‌تواند به طراحی شما اصالت ببخشد.وقتی تصمیم به استفاده از آواتارهای تصویرسازی شده گرفته می‌شود، بهتر است به جای استفاده از آواتارهای از پیش تعریف شده، امکان طراحی آن در داخل برنامه قرار گیرد. این عمل کمک می‌کند تا کاربر آواتار خود را منطبق با نیاز خود ایجاد نماید.۳. حیواناتگوگل یک راه حل متقاعد کننده برای مشکل نبود آواتار پیدا کرده است. به جای استفاده از عکس‌های عمومی و تصویرسازی‌ها، گوگل داکز (Google Docs) به کاربرانی که داکیومنت‌ها را بدون انجام فرآیند احراز هویت، می‌بینند حیوان خاصی را اختصاص می‌دهد.آواتار کاربران ناشناس در Google Docکاربران خوش شانس می‌توانند نیان کت(Nyan cat) معروف را ببینند.اما استفاده از آواتار حیوانات هم مشکل خاص خودش را دارد. بهتر است که از عکس میمون یا لاک پشت استفاده نکنیم چون برخی از کاربران ممکن است به خودشان بگیرند :)۴. استفاده از ایموجی و اسمایلی‌هالبخند زدن می‌تواند باعث بهبود حال بد بشود. دانشمندان متوجه شده‌اند که لبخند زدن باعث بهتر شدن حال مردم می‌شود. استفاده از ایموجی ها هم، محصول را موردپسندتر می‌کند. به همین دلیل استفاده از یک صورت دوستانه در محل آواتار راه مناسبی برای افزایش مشارکت کاربران است.آواتار Drop Boxطراحی یک اسمایلی خوب می‌تواند باعث تعامل بیشتر کاربر شود.۵. استفاده از المان‌های برند محصولآواتار می‌تواند یکی از المان‌های برند محصول باشد. مثلا روح معروف اسنپ چت یک نمونه از استفاده برند در آواتار است. تصویر روح قبل از انتخاب تصویر برای پروفایل توسط کاربر، در محل آواتار نمایش داده می‌شود.رابط کاربری Snapchat۶. استفاده از محتواهای دارای حق کپی رایتمحصولاتی مانند نتفلیکس (Netflix) که صاحب مجموعه‌ای از محتواهای ویدئویی هستند، این امکان را دارند که از این محتواها در قسمت‌های مختلف UI خود استفاده کنند. از غیرمعمول‌ترین قسمت‌ها، جایگاه آواتار است. شما به عنوان یک کاربر می‌توانید شخصیت مورد علاقه‌ی خود را به عنوان آواتار خود انتخاب کنید.Bonus.Memesهمه عاشق Memeها هستند. استفاده از آن‌ها یک کار ساده برای افزایش جذابیت برنامه است. 9gag بخاطر استفاده از تصاویر محبوب و meme ها در قسمت پروفایل کاربران، بسیار معروف است. آواتارساز در 9gagابزارهای آنلاین برای ایجاد آواتاراینجا می‌توانید مجموعه جذاب از ابزارهایی را مشاهده کنید که به ساخت انواع آواتارها به شما کمک می‌کند. https://uxpro.cc/toolbox/visual-design/avatars/ منبع: https://uxplanet.org/6-ideas-for-creating-better-avatars-placeholders-a01cac5d7c6 رومینا محمدزمانی رومینا محمدزمانی Thu, 07 May 2020 21:31:18 +0430