در اینجا یک سوال است که صفحه محصول باید در حدود پنج ثانیه به آن پاسخ دهد: “آیا این پایه تلفن مغناطیسی گوشی من را با قاب روشن نگه می دارد؟” هنگامی که یافتن پاسخ دشوار است، خریداران تمایل دارند به جای تماس با پشتیبانی، بخش دیگری را باز کنند.
فروشگاه هایی که هم لوازم جانبی خودرو و هم لوازم خانگی و محصولات آشپزخانه را می فروشند با چالش دیگری روبرو هستند: دو کاتالوگ بسیار متفاوت در یک سایت به اشتراک می گذارند. خریدار لوازم جانبی خودرو به تناسب، تناسب و سازگاری اهمیت می دهد. خریدار خانه و آشپزخانه به اندازه، ظرفیت و تمیز کردن آسان محصول اهمیت می دهد. یک صفحه محصول کلی هر دو را ناامید می کند.
این راهنما هفت نکته کاربردی تجارت الکترونیکی UX را پوشش می‌دهد که طراحان و توسعه‌دهندگان می‌توانند فوراً آنها را پیاده‌سازی کنند، و در پایان آن قطعه‌های کد و چک‌لیست وجود دارد.
یافته های کلیدی
- از یک جزء در صفحه محصول استفاده کنید، اما فیلدهای مشخصات را بر اساس دسته بندی عوض کنید.
- جزئیات مهم (مناسب، اندازه، سازگاری) را در کنار دکمه قیمت و خرید نگه دارید.
- برای گوشی یک دست طراحی کنید، سپس با صفحه کلید و صفحه‌خوان تست کنید.
- از عکس ها برای توضیح مقیاس و مونتاژ استفاده کنید، نه فقط برای خوب به نظر رسیدن.
- سؤالات پشتیبانی مکرر را به سؤالات متداول در صفحه تبدیل کنید.
1. الگوهای محصول خاص دسته را ایجاد کنید
پایه ماشین و پوست کن سبزیجات نباید برگه مشخصات یکسانی داشته باشند. یک جزء صفحه محصول را قابل استفاده مجدد نگه دارید و فقط فیلدها را بر اساس دسته تغییر دهید. در حالی که هر خریدار جزئیات مورد نیاز خود را می بیند، طرح ثابت باقی می ماند.
- لوازم جانبی خودرو: روش نصب و مکان، تلفن‌ها، کیس‌ها یا وسایل نقلیه سازگار، برق ورودی (12 ولت، USB-C، برق)، مراحل نصب و موارد موجود.
- آشپزخانه خانگی و آمپر: ابعاد (W x D x H)، ظرفیت (لیتر، فنجان، کیلوگرم)، مواد و ایمنی مواد غذایی، دستورالعمل های تمیز کردن و نگهداری.
در کد، این می تواند یک شی پیکربندی باشد که الگوی شما از آن می خواند:
const specFields = {
"car-accessories": ["Mounting method", "Compatible devices", "Vehicle fit", "Power input"],
"home-kitchen": ["Dimensions", "Capacity", "Materials", "Cleaning"]
};
function getSpecs(product) {
return (specFields[product.category] || []).map(label => ({
label,
value: product.specs[label] ?? "Not specified"
}));
}
نمایش Not Specified به جای پنهان کردن یک فیلد از دست رفته یک عادت کوچک با یک مزیت واقعی است: شکاف های موجود در داده های محصول شما را برای تیم شما قابل مشاهده می کند.
2. جزئیات مهم را در کنار دکمه خرید قرار دهید
خریداران به دنبال اطلاعات شکستن معامله در نزدیکی دکمه قیمت و خرید هستند: تناسب، اندازه و سازگاری. آن را در بخش “اطلاعات اضافی” در وسط صفحه دفن نکنید.
یک نمودار مقایسه کوتاه نیز بهتر از سه پاراگراف کپی بازاریابی کار می کند زیرا خریداران به جای خواندن، اسکن می کنند. تحقیقات صفحه محصول مؤسسه بایمرد به طور مداوم نشان می دهد که مشخصات مبهم یا یافتن آن دشوار است، یکی از دلایل رایج تردید خریداران است.
3. طراحی برای گوشی در دست خریدار
چیدمان پاسخگو نقطه شروع است نه خط پایان. مردم لوازم جانبی خودرو را در پارکینگ مقایسه می کنند و در حالی که در آشپزخانه ایستاده اند، اغلب با یک انگشت شست به وسایل آشپزخانه نگاه می کنند.
- اهداف را لمس کنید: معیار موفقیت WCAG 2.2 2.5.8 حداقل 24 × 24 پیکسل CSS را مشخص می کند. برای دکمه های اصلی، نزدیک به 44 پیکسل را هدف بگیرید.
- چسبنده افزودن به سبد خرید: قیمت و دکمه را در دسترس نگه دارید در حالی که خریدار مشخصات را مرور می کند.
- فیلترها: آنها را در یک صفحه پایین باز کنید و با یک ضربه به پاک کردن همه پیشنهاد دهید.
- دسترسی: هر صفحه را با صفحه‌کلید و صفحه‌خوان تست کنید، نه فقط شبیه‌ساز تلفن.
4. از عکس هایی استفاده کنید که مقیاس و مونتاژ را توضیح می دهند
نگهدارنده تلفن روی پس‌زمینه سفید چیزی در مورد نحوه اتصال آن به داشبورد نمی‌گوید. آن را در یک ماشین واقعی، از دید راننده نشان دهید. برای محصولات خانه و آشپزخانه، آن را در کنار چیزی آشنا، مانند لیوان قهوه، قرار دهید تا مردم بتوانند اندازه آن را قضاوت کنند.
متن جایگزین خوب برای دسترسی به تصویر و قابلیت جستجو اهمیت دارد. “هولدر تلفن” را با “هولدر تلفن مغناطیسی ثابت روی داشبورد خودرو در حالت افقی” مقایسه کنید. درخت تصمیم متن جایگزین W3C یک راهنمای مفید برای تصمیم گیری در مورد توصیف است.
تصاویر را نیز به سرعت ذخیره کنید.منابع پاسخگو با srcset و ابعاد، ابعاد واضح و بارگذاری تنبل به جلوگیری از جابجایی طرح‌بندی و کندی صفحات کمک می‌کنند:
img
src="mount-dash-800.webp"
srcset="mount-dash-400.webp 400w, mount-dash-800.webp 800w"
sizes="(max-width: 600px) 100vw, 50vw"
width="800" height="600"
loading="lazy"
alt="Magnetic phone mount fixed to a car dashboard, holding a phone in landscape mode">
یک هشدار: تصویر محصول اصلی را با تنبلی در بالای صفحه بارگذاری نکنید. این معمولاً عنصر طراحی با بیشترین محتوا است، بنابراین web.dev توصیه می کند مشتاقانه آن را بارگیری کنید.
5. مسائل مربوط به تطبیق پیمایش را ایجاد کنید، نه فقط نام محصول
خریداران اغلب به دنبال یک مشکل هستند، نه یک محصول. تعداد کمی از مردم در بار اول “پرکننده شکاف صندلی” را تایپ می کنند. آنها تایپ می کنند “مواردی که بین صندلی های ماشین می افتد.” جستجو، مترادف‌ها و نام دسته‌ها باید هر دو را انجام دهند.
- مترادف‌هایی را به جستجوی نقطه‌ای اضافه کنید (“دارنده تلفن”، “پایه تلفن”، “پایه داشبورد”).
- دسته بندی ها را به گونه ای که مشتریان صحبت می کنند نام ببرید: «لوازم جانبی خودرو» و «خانه و آشپزخانه» از برچسب های فروشنده داخلی پیشی می گیرند.
- یک توضیح یک خطی “رفع این مشکل” را به کارت های دسته اضافه کنید.
کاتالوگ های ترکیبی نشان می دهد که چرا این مهم است. فروشگاه‌هایی که هم وسایل نقلیه و هم محصولات خانگی را پوشش می‌دهند، مانند VNSPORT.org با مجموعه‌های محصولات جداگانه‌شان، این دو مخاطب را از هم جدا نگه می‌دارند تا کسی که به‌دنبال قفسه‌ای است هرگز مجبور نشود ابزار آشپزخانه را پشت سر بگذارد. این اصل برای هر فروشگاهی با بیش از یک مخاطب اعمال می شود: گروه بر اساس قصد خریدار، نه بر اساس لیست فروشنده شما.
6. با اطلاعاتی که خریداران می توانند تأیید کنند، اعتماد کسب کنید
نشان‌های تزئینی «100% ایمن» کار کمی انجام می‌دهند. چیزی که باعث ایجاد اعتماد می شود این است که خریداران می توانند اطلاعاتی را برای خود تأیید کنند:
- ایمیل تماس واقعی و شماره تلفن.
- زمان‌های تحویل و سیاست‌های بازگشت را به زبان انگلیسی ساده پاک کنید، قبل از پرداخت قابل مشاهده است.
- ادعاهای دقیق محصول و عکس های صادقانه.
هنگام تسویه‌حساب، قبل از تسویه‌حساب، قیمت کامل، از جمله هزینه حمل و نقل و مالیات را نشان دهید، به افراد اجازه دهید به راحتی اشتباهات را تصحیح کنند، و تسویه حساب مهمان را پیشنهاد دهید. در مطالعه قابلیت استفاده بایمرد، هزینه‌های اضافی غیرمنتظره و ایجاد حساب اجباری یکی از دلایل اصلی رها کردن سبد خرید توسط خریداران بود.
7. سؤالات تکراری پشتیبانی را به سؤالات متداول در صفحه تبدیل کنید
اگر صندوق پستی پشتیبانی شما هر هفته همان سؤال را دریافت می کند، صفحه محصول دارای یک شکاف است. به جای صفحه راهنمای عمومی با سه کلیک، در صفحه نزدیک به محل تصمیم گیری پاسخ دهید.
می‌توانید این پاسخ‌ها را با داده‌های ساختاریافته در صفحه پرسش‌های متداول برچسب‌گذاری کنید:
script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "Does this phone mount work with a thick case?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, with cases up to 3 mm. Thicker cases need the included metal ring."
}
}]
}
/script>
بررسی واقعیت: از سال 2023، گوگل نتایج پرسش‌های متداول غنی را فقط برای وب‌سایت‌های معروف دولتی و مراقبت‌های بهداشتی نشان می‌دهد. سوالات متداول را فقط برای تعقیب یک قطعه اضافه نکنید. آنها را اضافه کنید زیرا به سؤالات واقعی پاسخ می دهند و به خریداران کمک می کنند تصمیم بگیرند.
چک لیست UX Quick Audit
- آیا هر دسته فیلدهای مشخصات خود را نمایش می دهد؟
- آیا تناسب، اندازه و سازگاری در کنار قیمت قابل مشاهده است؟
- آیا خریدار می تواند با یک انگشت شست روی یک صفحه نمایش کوچک به سبد خرید اضافه کند؟
- آیا عکس ها محصول در حال استفاده و در مقیاس واقعی را نشان می دهند؟
- آیا جستجوی مکان پرس و جوهای سبک مشکل را درک می کند؟
- آیا یافتن زمان تحویل، بازگشت و جزئیات تماس آسان است؟
- آیا به مهمترین سوالات پشتیبانی در صفحه محصول پاسخ داده شده است؟
سوالات متداول
مهمترین نکات UX تجارت الکترونیک برای فروشگاه لوازم جانبی خودرو چیست؟ جزئیات سازگاری و چیدمان را در کنار قیمت نشان دهید، از عکس‌های داخل خودرو استفاده کنید و مطمئن شوید که چیدمان موبایل با یک دست کار می‌کند.
صفحات محصول برای لوازم جانبی خودرو و محصولات خانه و آشپزخانه چگونه باید متفاوت باشد؟ از طرح بندی یکسان، اما از فیلدهای مشخصات متفاوت استفاده کنید. لوازم جانبی خودرو به جزئیات نصب، نصب و قدرت نیاز دارند. محصولات آشپزخانه خانگی و آمپر به ابعاد، ظرفیت، مواد و دستورالعمل های نظافت نیاز دارند.
اندازه دکمه ها در صفحه محصول موبایل چقدر باید باشد؟ WCAG 2.2 حداقل اندازه هدف 24 × 24 پیکسل CSS را تعیین می کند. برای اقدامات اولیه مانند “افزودن به سبد خرید” حدود 44 پیکسل راحت تر است.
آیا بخش سؤالات متداول هنوز به سئو کمک می کند؟ عمدتا غیر مستقیم. نتایج پرسش‌های متداول گسترده در حال حاضر محدود است، اما پاسخ‌های واضح در صفحه می‌تواند با جستجوهای طولانی مطابقت داشته باشد، بازده را کاهش دهد و خریداران را در صفحه نگه دارد.
چگونه می توانم رها شدن سبد خرید را کاهش دهم؟ کل هزینه ها را زودتر نشان دهید، تسویه حساب مهمان را پیشنهاد دهید، زمان تحویل و شرایط بازگشت را قبل از پرداخت نشان دهید، و فرم پرداخت را کوتاه نگه دارید.
نتیجه گیری
UX خوب تجارت الکترونیک درباره انیمیشن های هوشمندانه نیست. این در مورد پاسخ دادن به سوال خریدار قبل از آن است که آنها آن را بپرسند. مشخصات واضح، عکس‌های صادقانه، کنترل‌های مناسب با انگشت شست و پرسش‌های متداول واقعی یک صفحه محصول ساده را به صفحه‌ای تبدیل می‌کند که به مردم کمک می‌کند خرید کنند، چه در حال خرید لوازم جانبی خودرو باشند و چه لوازم ضروری خانه و آشپزخانه.
