تجربه کاربری در نسخه موبایل سایت‌ها، به‌ویژه در صفحات لیست محصول (PLP)، دیگر یک مزیت رقابتی نیست، بلکه یک ضرورت قطعی برای موفقیت در کسب‌وکارهای آنلاین به شمار می‌رود. هدف اصلی ما در این صفحات، کاهش «اصطکاک» و فراهم آوردن سریع‌ترین مسیر ممکن برای کاربر جهت پیدا کردن محصول مورد نظرش است. در طراحی مجدد این صفحات برای موبایل، تمرکز بر روی سه محور اصلی قرار گرفت: نحوه نمایش محصولات، بهینه‌سازی کارت محصول و سیستم دسترسی به فیلترها.

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

چالش‌های کلیدی و راه‌حل‌های هوشمندانه در طراحی موبایل PLP

گذر از اسلایدشو به نمایش شبکه‌ای (Grid View): افزایش قدرت انتخاب در یک نگاه

هنگامی که تعداد محصولات در یک لیست یا دسته‌بندی خاص افزایش می‌یابد، به‌خصوص در سناریوهایی که تعداد آیتم‌ها از ۲۰ مورد فراتر می‌رود، استفاده از نمایش اسلایدی یا کراسل (Carousel) به یک مانع جدی تبدیل می‌شود. این چیدمان، کاربر را وادار می‌کند تا برای مشاهده هر محصول، چندین بار کلیک کرده یا انگشت خود را بکشاند تا در نهایت به آیتم مدنظر برسد. این فرایند تکراری، نه تنها خسته‌کننده است، بلکه قدرت اکسپلور کردن (کاوش) و مقایسه را از او سلب می‌کند.

برای رفع این چالش، ما از رویکرد نمایش شبکه‌ای (Grid View) استفاده کردیم. چیدمان گرید در نسخه موبایل به کاربران اجازه می‌دهد تا در هر بار اسکرول، تعداد بسیار بیشتری از محصولات را به‌صورت همزمان مشاهده کنند. این تغییر ساده اما قدرتمند، تجربه گشت‌وگذار در سایت را بهینه‌سازی کرده و به کاربر این امکان را می‌دهد که در سریع‌ترین زمان ممکن، گزینه مورد علاقه‌اش را بیابد.

بازطراحی کارت محصول: وقتی سادگی، سرعت مقایسه را چندبرابر می‌کند

یکی از رایج‌ترین اشتباهات در طراحی موبایل، استفاده از تصاویر تمام‌عرض (Full-Width) برای کارت‌های محصول است. وقتی تصویری با عرض کامل صفحه نمایش (مثلاً ۳۶۰ یا ۶۰۰ پیکسل) نمایش داده می‌شود، همان میزان ارتفاع را نیز اشغال می‌کند. نتیجه این کار این است که کاربر تنها می‌تواند یک یا نهایتاً دو محصول را در یک نگاه ببیند. اگر کارت محصول نیز با جزئیات و دیتای بیش از حد شلوغ شده باشد، این معضل تشدید می‌شود. این وضعیت، عمل مقایسه را برای کاربر بسیار دشوار می‌کند.

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

بهینه‌سازی فیلترها: دسترسی سریع به ابزار جستجو بدون تخریب تجربه کاربری

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

  • قراردادن فیلترها در بالا: اگر فیلترها را در بالای لیست محصولات قرار دهیم، کاربر باید حجم زیادی از فیلترها را اسکرول کند تا تازه به اولین محصول برسد. در این حالت، «محصولات» در نگاه اول اصلاً دیده نمی‌شوند.
  • قراردادن فیلترها در پایین: اگر فیلترها در انتهای صفحه قرار گیرند، ممکن است کاربر هیچ‌گاه متوجه نشود که امکان فیلتر کردن پیشرفته وجود دارد و قابلیت کشف‌پذیری فیلترها به شدت کاهش می‌یابد.

راه‌حل بهینه، انتقال این ابزارها به یک سایدبار یا منوی اورلی (Overlay) است که با یک دکمه مجزا و قابل دسترسی (اغلب فیکس شده در بالا یا پایین صفحه) فراخوانی می‌شود. علاوه بر این، ما یک استراتژی هوشمندانه به کار بردیم: دو فیلتر بسیار مهم و پرکاربرد که تأثیر مستقیم بر تصمیم خرید دارند، یعنی «ارسال فوری» و «تخفیف ویژه»، از سایدبار اصلی خارج شدند و به‌صورت دکمه‌های مجزا و برجسته در بالای صفحه قرار گرفتند. این اقدام باعث می‌شود که کاربر بتواند به‌سرعت به مهم‌ترین ابزارهای گزینش دسترسی داشته باشد، بدون آنکه تجربه کلی صفحه تحت تأثیر اسکرول فیلترها قرار گیرد.

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

یکی دیگر از اشتباهات رایج در اجرای پروژه، قرار دادن محتوای متنی بیش از حد در بالای لیست محصولات است. فرض کنید تیم تجربه کاربری (UX) صفحه را طوری طراحی کرده که محصولات بلافاصله در نگاه اول دیده شوند، اما در مرحله اجرا، تیم محتوا یک پاراگراف طولانی ۱۰۰ کلمه‌ای یا بیشتر را در بالای لیست قرار می‌دهد. در نتیجه، در نسخه موبایل، کاربر ابتدا با یک بلوک بزرگ متن روبرو می‌شود و برای دیدن محصولات مجبور به اسکرول است.

این نوع محتوای طولانی، عملاً آن UX درست و از پیش تعیین‌شده را تحت‌الشعاع قرار می‌دهد. در صفحات PLP، باید ساختار و طراحی صفحه مقدس تلقی شود. اگر محتوایی لازم است، باید بسیار مختصر (در حد نهایتاً دو پاراگراف) باشد تا محصولات بلافاصله قابل مشاهده باشند.

حفظ ناوبری پیشرفته در صفحات محتوامحور با «دسترسی سریع»

در صفحات لیست محصول که جنبه اطلاعاتی و محتوایی بیشتری دارند (مانند صفحه محصولات مقاوم به کم‌آبی یا لیست بیسیک محصولات)، محتوای متنی، ویژگی‌ها و تصاویر نقش مهم‌تری ایفا می‌کنند. در نسخه دسکتاپ این صفحات، یک منوی ناوبری داخلی (Table of Contents) وجود داشت که به کاربر کمک می‌کرد تا ساختار کلی صفحه را درک کرده و به سرعت به هر بخشی که نیاز دارد، دسترسی پیدا کند.

برای تکرار این تجربه عالی در موبایل، ما یک راهکار خلاقانه پیاده‌سازی کردیم:

گزینه دسترسی سریع: یک گزینه به نام «دسترسی سریع» به‌صورت فیکس‌شده در بالای صفحه موبایل اضافه شد.

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

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