طراحی وایرفریم نسخه دسکتاپ – سکشنهای صفحه محصول
وقتی قرار است یک صفحه محصول در سایت فروشگاهی طراحی کنیم، اولین وسوسه این است که برویم سراغ قالبهای آماده و همهچیز را دقیقاً همانجا سر جای خودش بگذاریم. اما حقیقت این است که قالبهای پیشفرض وردپرس یا فروشگاهسازها، دقیقاً همان چیزهایی هستند که رقبای شما هم دارند. اگر قرار باشد تفاوتی ایجاد کنیم، باید از دل دادههای واقعی و نیازهای مخاطب شروع کنیم.
تصور کنید کاربر وارد صفحه خرید یک گیاه آپارتمانی شده است. او زمان زیادی ندارد و میان انبوهی از اطلاعات گیج میشود. چالش اصلی ما این است که چطور ساختار صفحه را از حالت خشک و کلیشهای قالبها خارج کنیم و دقیقاً همان اطلاعاتی را که کاربر برای تصمیمگیری نیاز دارد، در نگاه اول به او بدهیم.
مسیر بهینهسازی این صفحه با ساختار مسیریابی یا همان بردکریم (Breadcrumb) شروع میشود. به جای استفاده از عناوین تکراری و بیمعنی مثل «صفحه اصلی» یا «فروشگاه»، بهتر است از نام دقیق برند و نام دستهبندی استفاده کنیم؛ مثلاً به جای «فروشگاه»، نام دقیق گیاهی را که کاربر دنبالش است بنشانیم. نکته جالب اینجاست که الزامی ندارد ساختار آدرسها دقیقاً زیرمجموعه هم باشند؛ ساختار یوآرال میتواند مستقل از مسیری باشد که کاربر در منوها میبیند.
یکی از چالشهای عملی در طراحی، مدیریت تصاویر محصول است. وقتی با محصولاتی سر و کار داریم که مدلهای متنوعی دارند، بارگذاری چندین تصویر سنگین هم کار عکاس را سخت میکند و هم سرعت بارگذاری صفحه را در موبایل پایین میآورد. با حذف تصاویر اضافی و استفاده از گالریهای سبک یا تغییر ابعاد تصاویر به فرمتهای استاندارد مربع، هم تجربه کاربری بهتری خلق میکنیم و هم سرعت سایت را حفظ میکنیم.
- پاکسازی المانهای اضافی و پرتعداد مثل امتیازهای ستارهای در شروع کار که کمکی به تصمیمگر کاربر نمیکنند
- جابهجایی قیمت و دکمه خرید برای دسترسی سریعتر و حذف فاصلههای غیرضروری
- انتقال ارزشهای پیشنهادی و آفرها از فوتر یا بخشهای پایینی سایت به بالای صفحه در کنار دکمه خرید
یکی از بخشهای کلیدی که معمولاً در انتهای صفحه گم میشود، مشخصات فنی و ویژگیهای محصول است. ما این اطلاعات را بر اساس جستجوهای واقعی کاربران در قالب یک جدول ساختاریافته به بالای صفحه میآوریم. این کار هم به کاربر کمک میکند در یک نگاه ویژگیهایی مثل میزان نور مورد نیاز یا مقاومت در برابر کمآبی را ببیند و هم به موتورهای جستجو کمک میکند مفهوم صفحه را بهتر درک کنند.
برای اینکه صفحه از نظر محتوایی برای آینده نیز توسعهپذیر باشد، یک منوی دسترسی میانصفحه در نظر میگیریم. مواردی مانند راهنمای نگهداری اصولی، معرفی گیاه، محصولات مشابه و نظرات مشتریان ستونهای اصلی این ساختار هستند. نکته مهم این است که لازم نیست همه این بخشها از روز اول پر باشند؛ ساختار صفحه باید طوری چیده شود که با رشد محتوا و کامل شدن بخشهای مختلف، به مرور تکمیل شود بدون اینکه نیاز به تغییر اساسی در طراحی داشته باشد.