بازطراحی صفحهٔ اول اپلیکیشن دیوار

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

شرح کلی مسئله

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

شرایط مسئله قبل از بازطراحی:

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

۱/ چیپ فیلترها

۲/ چیپ دسته‌ها

۳/ یه تعداد زیردسته‌ٔ هوشمند که البته بعد از تعامل کاربر با اپلیکیشن کم‌کم هوشمند میشن و اول کار ۱۰ زیردستهٔ مشخص و ثابتن.

۴/ تب دوم دسته‌ها

۵/ استفاده از تاریخچهٔ جستجو

۶/ استفاده از جستجوی پیشنهادی، زمانی که کاربر شروع به تایپ عبارتی در فضای جستجو می‌کنه.

راه‌های مختلف انتخاب دسته‌بندی
راه‌های مختلف انتخاب دسته‌بندی


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

فیلترهای نمایش داده شده پس از انتخاب دسته توسط کاربر
فیلترهای نمایش داده شده پس از انتخاب دسته توسط کاربر


پژوهش‌های انجام شده

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

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

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

مجموع این موارد باعث می‌شد که در ادامه کاربران نتونن عملکرد فیلتر رو شناسایی کنن و به درستی ازش استفاده کنن.

داده‌های کمّی بررسی شده

علاوه بر بررسی خروجی تست‌های کاربردپذیری و پژوهش‌های انجام شده، در ادامه به بررسی داده‌های کمّی مرتبط با انتخاب دسته‌بندی از روش‌های مختلف کردیم. با کمک تحلیل‌گر دادهٔ تیم املاک، سهم انتخاب دسته رو از همهٔ روش‌های موجود (۶ روشی که بالاتر بهش اشاره کردم) حساب کردیم. حالا در ادامه می‌دونستیم که هر تغییری در نوع انتخاب دسته ایجاد کنیم باید چه انتظاری داشته باشیم و مطمئن بشیم که اثر نامطلوبی در جایی از مسیر کاربر نمی‌ذاریم.

راه‌حل پیشنهادی

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

برای حل مشکل به دو راه‌حل پیشنهادی رسیدم:

۱/ نوار بالا رو به فیلتر و چیپ‌های داخلش اختصاص بدم و دسته‌های پیشنهادی هوشمند رو حذف کنم. کلا نوار بالا رو به مفهوم فیلتر اختصاص بدم.

۲/ فیلتر رو زمانی که کاربر هنوز دسته‌ای انتخاب نکرده نمایش ندم و کلا نوار بالا رو به مفهوم انتخاب دسته اختصاص بدم.

راه‌حل‌های پیشنهادی
راه‌حل‌های پیشنهادی


با توجه به صحبت‌هایی که در تیم داشتم راه‌حل دوم رو به دلایل زیر انتخاب کردم:

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

چالشی که وجود داشت و منجر به طرح بعدی شد

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

صفحهٔ اول در طرح نهایی قبل و بعد از تعامل کاربر با اپلیکیشن دیوار
صفحهٔ اول در طرح نهایی قبل و بعد از تعامل کاربر با اپلیکیشن دیوار


نتیجه و اثرگذاری

انتظار داشتیم بعد از این طراحی:

۱/ نحوهٔ انتخاب دسته‌بندی طوری تغییر کنه که تاثیر منفی‌ای روی جستجوی کاربران و انتخاب دسته از اون روش نذاریم. (روش‌های ۵ و ۶)

۲/ انتخاب دسته‌بندی از نوار بالایی و بازدیدهای اخیر در طرح جدید، بیشتر از مجموع انتخاب دسته از سه روش قبلی (چیپ فیلتر (روش ۱)، چیپ دسته‌بندی (روش ۲) و چیپ‌های هوشمند انتخاب دسته (روش ۳)) بشه.

۳/ با توجه به شفاف‌تر شدن انتخاب دسته‌بندی در صفحهٔ اول، میزان انتخاب دسته از تب دسته‌ها (روش ۴) کاهش پیدا بکنه.

۴/ در ادامه با توجه به شفاف‌تر انتخاب شدن دسته‌بندی، کاربرها بیشتر از فیلتر در لیست آگهی‌ها استفاده کنند.

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