mohammad hoseein imanjani
mohammad hoseein imanjani
خواندن ۵ دقیقه·۳ سال پیش

ایجاد تجربه بهتر در صفحه آگهی‌های همراه مکانیک

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

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

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

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

. در مرحله دوم با توجه به Heatmap و Recording هاتجر، شروع به تحلیل رفتار کاربران زمان استفاده از فیلترها کردم.

. در مرحله سوم هم به بررسی صفحات مشابه 4 سایت داخلی و 4 سایت خارجی پرداختم. با توجه به سه مرحله‌ی فوق ترتیب فیلترها رو به صورت زیر تغییر دادم:

ترتیب قرار گرفتن فیلترها
ترتیب قرار گرفتن فیلترها

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

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

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

به بررسی و تحقیق مدل‌های مختلف فیلترها در سایت‌های مختلف (Benchmark) و رفتار کاربران پرداختم تا مناسب‌ترین جایگاهی که کاربر میتواند با آن ارتباط برقرار کند را ارائه بدهم.

راهکارهایی که مناسب به نظر میرسید:

1- در موبایل یک صفحه جدا برای فیلترها باز شود تا کاربر راحت‌تر بتواند فیلترهای مورد نظرش را پیدا کند.

2- در دسکتاپ فیلترها رو به طور کامل و ثابت در کنار آگهی‌ها در اختیار کاربر قرار دهم تا در زمان نیاز به راحتی بتواند از آن‌ها استفاده کند و برای استفاده از آن‌ها اسکرول یا زمانی را صرف نکند.

مدل قرار گرفتن فیلترها در دسکتاپ
مدل قرار گرفتن فیلترها در دسکتاپ

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

قدم سوم
تصمیم گرفتم یک قدم کار را برای کاربران راحت‌تر کنم و اینجا تصمیم به اضافه کردن Quick Filter گرفتم. برای اینکه این فیلترها را قرار بدهم لازم بود مجددا بررسی کنم که کدام یک از فیلترها از نظر کاربران مهمتر و کاربردی‌تر است.

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

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

تست Card Sorting کاربران
تست Card Sorting کاربران

با توجه به Card Sorting و دیتاهایی که از رفتار کاربران داشتم، 2 دسته‌ی برندها و قیمت را برای Quick Filterها انتخاب کردم.

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

برای دسته‌بندی برندها، 10 برندی که پربازدیدترین‌ بودند، را در نظر گرفتم.

برای طبقه‌بندی قیمت‌ها، دو مدل دسته‌بندی در نظر گرفتم:

1) براساس بازه‌های قیمتی

2) براساس خودروهای اقتصادی، میان‌رده و لاکچری

در مدل اول باید به چند نکته توجه میکردم:

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

بخش‌بندی Quick Filter قیمت
بخش‌بندی Quick Filter قیمت

برای مدل دوم شروع به تحقیق و مصاحبه با تعدادی از کاربران کردم و به این نتیجه‌ رسیدم که کاربران از برچسب خوردن اقتصادی و میان رده هراس دارند و در کل این موضوع (خودروهای اقتصادی و میان‌رده) در ذهن هر کاربر متفاوت است؛ بر همین اساس این مدل تجربه خوبی برای کاربران نداشت. پس تصمیم گرفتم مدل اول را انتخاب کنم و بعد از رسیدن به پروتوتایپ یک تست با تعداد محدودی کاربر انجام دادم و رفتار آن‌ها را هنگام استفاده از Quick Filterها بررسی کردم و متوجه شدم کاربران موبایل تجربه بهتر و راحت‌تری داشتند و در دسکتاپ این تجربه تفاوتی نداشت پس تصمیم به قرار دادن Quick Filterها تنها در موبایل گرفتم.

قدم چهارم
یکی از نکاتی که در رفتار کاربران مشاهده کردم این بود که اکثرا در هنگام انتخاب یک آگهی، کل کارت آگهی را انتخاب میکردند و لزومی نداشت که ما کلید جزییات بیشتر را داشته باشیم. برای همین تغییری در دیتای داخل کارت‌ها ایجاد کردم که به صورت زیر بود:

تغییرات کارت آگهی
تغییرات کارت آگهی

این کار باعث حذف دیتای اضافی در داخل کارت‌ شد و فضای بیشتری برای پرداختن به قیمت و اسم آگهی و جزئیات خودرو بوجود آمد (قطعا برای اینکار هم با کاربران تست گرفته شد).

کارت‌ آگهی‌
کارت‌ آگهی‌

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

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