جواد صابری Javad Saberi
جواد صابری Javad Saberi
خواندن ۳ دقیقه·۲ سال پیش

☑️ "فقط کالاهای موجود" در فیلترها، سوییچ باتن یا چک باکس!

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

Only available items, switch buttons or check boxes
Only available items, switch buttons or check boxes


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

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

سوییچ باتن
سوییچ باتن


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

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

قرار دادن چک باکس
قرار دادن چک باکس


یک بوم و دوهوا شنیدین؟ توی عکس کاملا مشهوده . ماهیتِ "فقط کالاهای موجود" با ماهیتِ "فقط کالاهای تخفیف‌دار" یکیه و نمیشه یکیشون با سوییچ باتن بیاد یکیشون با چک باکس

یک بوم و دو هوا به روایت تصویر
یک بوم و دو هوا به روایت تصویر


راهکار صحیحی که به ذهنم رسید این شد که هر دو باید از یک جنس باشند یا سوییچ باتن یا چک باکس و نظر خودم روی سوییچ باتن بود. در مورد فضاسازی این دو قابلیت با سعید علیپور دوست عزیزم که مهندس تجربه کاربر دیوار هست صحبت کردم، این که یک سوییچ باتن در ستون سمت راست باشه و یکی در بالای کارت ها کاربر رو گیج نمیکنه؟ (با اینکه از لحاظ تجربه کاربری میدونستم که دارم اشتباه میکنم اما باز هم میخواستم مطمئمن شم). سعید در پاسخ گفت دقیقا این که یکی بالا باشه یکی راست کاربر رو اذیت میکنه و کاربر ترجیح میده همه فیلترها رو یکجا ببینه ، نه یکی رو راست ببینه یکی رو یه جا دیگه.


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

قرارگیری دو سوییچ باتن در ستون سمت راست
قرارگیری دو سوییچ باتن در ستون سمت راست


? مشاهده وب‌سایت دایان‌شاپ
⚡️ مشاهده کیس‌استادی دایان‌شاپ



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

#producttips
| www.afroo.ir |

سوییچ باتنکالاهای موجودچک باکستخفیففیگما
شاید از این پست‌ها خوشتان بیاید