طراح تجربه‌ی کاربر در کافهبازار
بازطراحی «صفحه‌ی جزئیات برنامه‌ها» در نسخه‌ی جدید برنامه‌ی «بازار»
بهبود تجربه‌ی کاربری یکی از موارد مهم در بازطراحی هر برنامه است. این امر در نسخه‌ی جدید «بازار» نیز نقش مهمی داشت. انتشار نسخه‌ی ۷ بازار به سه سال پیش بازمی‌گشت. این نسخه از نظر تجربه‌ی کاربری مشکلاتی داشت که یکپارچه‌نبودن اجزای طراحی، دسترس‌پذیرنبودن، رعایت‌نشدن کنتراست رنگ و... از جمله‌ی آن‌هاست. در تیم طراحی بازار ما تصمیم گرفتیم با رفع این مشکلات در نسخه‌ی ۸، تجربه‌ی کاربری بازار را بهبود ببخشیم.
یکی از بخش‌های مهم در بازار «صفحه‌ی جزئیات برنامه» است که تمامی اطلاعات مربوط به یک برنامه یا بازی را در بر دارد؛ ازجمله‌ی اطلاعات مربوط به این صفحه می‌توان به نام برنامه یا بازی، نام توسعه‌دهنده، اطلاعاتی که توسعه‌دهنده درباره‌ی برنامه‌ی خود می‌نویسد، امتیازات کاربران و مواردی از این دست اشاره کرد. روزانه کاربران بیش از شانزده میلیون بار از آن بازدید می‌کنند؛ همین میزان از تعامل کاربران با این صفحه نیاز به بازبینی در طراحی آن را ضروری می‌کرد.
در ادامه‌ی این مطلب به هفت مورد از مهم‌ترین تغییراتی اشاره می‌کنیم که با هدف بهبود تجربه‌ی کاربری برای صفحه‌ی جزئیات برنامه ایجاد شده است.
۱. افزودن تصویر زمینه
تصویر زمینه قسمت جدیدی است که در نسخه‌ی ۸ بازار به صفحه‌ی جزئیات برنامه اضافه شده است. اضافه‌شدن تصویر زمینه در این نسخه مشخصاً سه بخش مختلف را بهبود بخشیده است:
الف. محتوا: هدف اصلی صفحه‌ی جزئیات برنامه این است که محتوای مفید در مکان مناسب به کاربر ارائه شود؛ به‌همین منظور، علاوه بر تصاویر برنامه یا بازی، تصویر زمینه را هم به این صفحه اضافه کردیم که این امر به درک بهتر کاربر از فضای حاکم بر بازی یا برنامه کمک می‌کند.
با اضافه شدن این ویژگی جدید، هر برنامه یا بازی می‌تواند تصویر زمینه‌ی مخصوص‌به‌خود را داشته باشد. توسعه‌دهندگان می‌توانند در این قسمت تصویری را نمایش دهند که هویت شرکتشان را معرفی می‌کند یا تصویری از فضای درون برنامه یا بازی خود را در این قسمت قرار دهند.
ب. محدوده‌ی حرکت انگشت شست: برای بهبود دسترسی انگشت شست می‌بایست اجزایی را که کاربر با آن‌ها بیشتر ارتباط دارد به پایین صفحه منتقل می‌کردیم؛ با این تغییر، محدوده‌ی حرکت انگشت شست روی این اجزا بهبود می‌یافت. افزودن تصویر زمینه به ما این امکان را می‌داد که بخش‌هایی را که کاربر با آن‌ها تعامل دارد به‌میزان مناسب به قسمت پایین صفحه منتقل کنیم.
برای آشنایی بیشتر با این موضوع می‌توانید این مقاله را مطالعه کنید:
How to design for thumbs
ج. چینش صفحه: دلیل دیگر برای افزودن تصویر زمینه وسط‌‌چین‌شدن صفحه‌ی جزئیات برنامه در نسخه‌ی ۸ بازار است. در این میان، ساختار نیم‌دایره‌ای تصویر پس‌زمینه هم به هدایت حرکت چشم به‌سمت پایین و جای‌گذاری آیکون برنامه در وسط صفحه کمک کرد.
۲. تغییر نحوه نمایش نام برنامه
نام برنامه‌ها و بازی‌ها یکی از عناصر مهم در صفحه‌ی جزئیات برنامه است؛ به‌همین علت، برای ما مهم بود که کاربر بتواند راحت آن را پیدا کند و همچنین نام برنامه‌ها یا بازی‌ها خوانا باشد. تغییراتی که به‌این منظور اعمال شد از این قرار است:
الف. بزرگ‌تر شدن فونت: برای خوانایی راحت‌تر نام برنامه‌ها و بازی‌ها و همچنین راحت‌تر پیداکردن نام آن‌ها در صفحه فونت آن را بزرگ‌تر کردیم.
ب. فضای بیشتر، خوانایی بهتر: وقتی متنی در دو خط جای می‌گیرد، چشم بعد از پایان خط اول برای رفتن به خط دوم درنگی کوتاه می‌کند. این توقف سرعت خوانش را پایین می‌آورد. برای جلوگیری از دوخطی شدن، به نام برنامه‌ها فضای بیشتری اختصاص دادیم که به‌راحتی خوانده شود.
۳. تغییرات سربرگ
الف. کنتراست بیشتر میان آیکون‌ها و پس‌زمینه: رنگ آیکون‌ها در سربرگ یکی از نقاط ضعف این قسمت بود. برای خوانایی و تمایز بهتر میان آیکون‌ها و پس‌زمینه‌ی سربرگ نیاز بود رنگ هر دو تغییر کند و کنتراست بهتری برای چشم به وجود آید؛ برای همین از مدل استاندارد WCAG کمک گرفتیم.
ب. اضافه‌شدن آیکون برنامه به داخل سربرگ: صفحات داخلیِ جزئیات برنامه باید این امکان را به کاربر بدهد که در هنگام جست‌وجو در آن به‌سرعت تشخیص دهد اطلاعات به کدام برنامه مربوط است؛ برای این منظور آیکون برنامه را به سربرگ اضافه کردیم. دلیل این تغییر به این امر بازمی‌گشت که تشخیص تصویر از تشخیص متن راحت‌تر است و درنتیجه، تصویر اطلاعات را با سرعت بیشتری به کاربر منتقل می‌کند. در نسخه‌ی جدید، متن مربوط به نام برنامه یا بازی هم موجود است و کاربر، در صورت تمایل، می‌تواند آن را بخواند؛ در واقع در این نسخه چیزی از بخش سربرگ حذف نشد، بلکه در مقایسه با گذشته اطلاعات کامل‌تر نمایش داده می‌شود.
۴. تغییرات در دکمه‌ی نصب
مهم‌ترین قسمت در صفحه‌ی جزئیات برنامه دکمه‌ی نصب برنامه است؛ زیرا روزانه ۵/۱ میلیون بار لمس می‌شود. این دکمه در نسخه‌ی قبلی جای کمی به خود اختصاص داده بود و در محدوده‌ی مناسب حرکت شست قرار نداشت؛ پس لازم بود در این زمینه تغییراتی انجام شود:
الف. دسترسی راحت‌تر برای انگشت شست: با جابه‌جاکردن دکمه در محدوده‌ی مدنظر اکنون کاربر راحت‌تر از قبل به آن دسترسی دارد.
ب. بزرگ‌ترکردن اندازه‌ی دکمه‌ی نصب: با بزرگ‌ترشدن دکمه‌ی نصب، علاوه بر این‌که کاربر آن را راحت‌تر پیدا می‌کند، زمان کمتری برای لمس آن نیاز دارد.
ج. جابه‌جایی دکمه‌های به‌روزرسانی و حذف: کاربر بعد از نصب برنامه دو دکمه‌ی «به‌روزرسانی» و «حذف» را مشاهده می‌کرد. این دو دکمه، علاوه بر این‌که در ناحیه‌ی مناسب حرکت شست قرار نداشتند، در فاصله‌ی بسیار کمی از یکدیگر قرار گرفته بودند؛ همین امر احتمال اشتباه فشردن دکمه‌ی مدنظر را افزایش می‌داد. در نسخه‌ی جدید این دو دکمه را با فاصله‌ی بیشتری در کنار هم قرار دادیم و اندازه‌ی هر دو را بزرگ‌تر کردیم که میزان لمس‌های اشتباه کاهش یابد.
د. دکمه‌ی شناور نصب: در صفحه‌ی جزئیات برنامه یا بازی، به‌تناسب محتوا، اطلاعات زیادی نمایش داده می‌شود. در نسخه‌ی قبلی کاربر باید اسکرول زیادی می‌کرد که بتواند همه‌ی اطلاعات را ببیند؛ به‌طوری که اگر اطلاعات، او را به نصب برنامه یا بازی ترغیب می‌کرد، باید به بالای صفحه بازمی‌گشت که بتواند دکمه‌ی نصب را لمس کند. یکی از نکات مهم در طراحی نسخه‌ی جدید در دسترس بودن دکمه‌ی نصب بود؛ به‌این صورت که هر زمان کاربر تصمیم گرفت برنامه یا بازی را دانلود کند، دکمه‌ی نصب دردسترسش باشد؛ برای همین، در طراحی نسخه‌ی جدید بعد از اسکرول به‌سمت پایین دکمه‌ای شناور در صفحه ظاهر می‌شود و کاربر می‌تواند در هر مکانی از صفحه‌ی جزئیات برنامه به آن دسترسی داشته باشد.
۵. بهبود ساختار نظرات
الف. ایجاد انسجام: در نسخه‌ی قبلی نظرات مربوط به برنامه‌ها یا بازی‌ها به‌صورت از هم گسسته و نامنسجم به نمایش درآمده بود؛ دکمه‌های «پسندیدم» و «نپسندیدم» و «گزارش نامناسب بودن محتوای نظر» خارج از چارچوب هر نظر قرار گرفته بود. این نحوه‌ی قرارگیری، تشخیص این امر را دشوار می‌کرد که این قسمت‌ها به نظر درباره‌ی برنامه یا بازی بالایی مربوط هستند یا به نظر درباره‌ی برنامه یا بازی پایینی بازمی‌گردند.
در نسخه‌ی جدید چارچوب نظرات را به‌همان صورت گذشته نگه داشتیم، اما دکمه‌های «پسندیدم» و «نپسندیدم» و «گزارش نامناسب بودن محتوای نظر» را داخل چارچوب هر نظر قرار دادیم که انسجام هر نظر حفظ شود.
همین‌طور برای خوانش راحت‌تر «نظرات دیگر کاربران» این بخش را به‌سمت راست منتقل کردیم و رنگش را تغییر دادیم؛ درنتیجه، درحالی‌که در نسخه‌ی قبلی بازار امتیاز نظرات در میان محتوای نظرات بود، در چینش جدید به امتیاز نظرات هم اهمیت ویژه‌ای دادیم.
ب. اضافه‌کردن امتیاز کلی برنامه: با توجه به ماهیت صفحه‌ی جزئیات برنامه، انتظار می‌رود کاربر بتواند تمامی اطلاعات درباره‌ی برنامه را در همین صفحه مشاهده کند؛ به‌همین دلیل تصمیم گرفتیم امتیاز کلی برنامه را از بخش نظرات به این صفحه منتقل کنیم.
۶. برنامه‌ها و بازی‌های برگزیده
در نسخه‌ی ۷ بازار صفحه‌ی برنامه و بازی‌های برگزیده وجود نداشت. این ویژگی در نسخه‌ی ۸ به بازار اضافه شد که کاربران به محتوای برگزیده دسترسی داشته باشند. قسمتی جداگانه در صفحه‌ی جزئیات برنامه برای این قسمت در نظر گرفتیم که کاربر با لمس آن به صفحه‌ی برگزیده‌ها برود.
۷. تغییر ساختار گزارش از برنامه‌ها
ثبت گزارش در نسخه‌ی قبلی بازار دومرحله‌ای بود؛ به‌این صورت که پس از لمس «گزارش برنامه» ابتدا دیالوگی با چند گزینه به کاربر نمایش داده می‌شد؛ پس از این در مرحله‌ی بعد کاربر با دیالوگی مواجه می‌شد که از کاربر می‌خواست پیامی بنویسد. در[1] هر یک از این مراحل درصورتی‌که کاربر محلی خارج از محدوده‌ی دیالوگ را لمس می‌کرد، از مراحل ثبت گزارش خارج می‌شد که تجربه‌ی چندان خوشایندی نبود.
در نسخه‌ی جدید فرایند ارسال گزارش به صفحه‌ای مستقل ارجاع داده می‌شود. در این حالت کاربر می‌تواند بعد از انتخاب یکی از گزینه‌های گزارش، در صورت تمایل، درباره‌ی گزارش خود متنی هم بنویسد یا با انتخاب یکی از گزینه‌ها برنامه را بدون متن گزارش کند. از دیگر مزایای ارجاع به صفحه‌ی دیگر حذف دیالوگ است؛ این کار از بسته‌شدن اتفاقی صفحه‌ی گزارش هم جلوگیری می‌کند.
در پایان باید گفت که روند بازبینی و بهبود تجربه‌ی کاربری در تیم طراحی بازار ادامه دارد و ما سعی می‌کنیم برای کاربران تجربه‌ی بهتری رقم بزنیم. در حال حاضر معیارهایی را برای بخش‌های مهم بازار در نظر گرفته‌ایم. براساس آن معیارها نسخه‌ی ۸ بازار را رصد می‌کنیم و آن را در مقایسه با نسخه‌ی ۷ بازار می‌سنجیم؛ این مقایسه امکان ادامه دادن روند بهبود طراحی را به ما می‌دهد.
اگر شما هم در زمینه‌ی تجربه‌ی کاربری از بازار انتقادی دارید یا برای بهبود آن پیشنهادی به ذهنتان می‌رسد، خوشحال می‌شویم از طریق این ایمیل آن را با ما در میان بگذارید: design@cafebazaar.ir
مطلبی دیگر از این انتشارات
سرو شدن پوشهٔ گیت: تجربهای از مواجهه با یک آسیبپذیری
مطلبی دیگر از این انتشارات
کامپوز و کافه بازار
مطلبی دیگر از این انتشارات
بازطراحی مسیر جست‌وجو در بازار