کاربردپذیری در سبد خرید

در طراحی بازار و فروشگاه‌های اینترنتی، مسیر checkout یکی از مهم‌ترین قسمت‌های user journey خرید محسوب می‌شه؛ چون مستقیما روی درک کاربرها از برند، تمایل آن‌ها برای بازگشت و مهم‌تر از همه سود سازمان تاثیر می‌ذاره.

برای طراحی یا بهبود مسیر checkout، از best practice های این زمینه خیلی می‌شه ایده گرفت، اما باتوجه به‌این‌که تعداد کاربرهایی که از گوشی‌های موبایل‌شان برای خرید استفاده می‌کنند روزبه‌روز بیش‌تر می‌شه، خیلی مهمه که مسیر checkout را به‌طور اختصاصی با توجه به قابلیت‌ها و محدودیت‌های موبایل طراحی کنیم.

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

در ادامه این نوشته، یک سری از بایدها و نبایدهای ابتدایی مسیر checkout را با هم مرور می‌کنیم.

سبد خرید

اصولا پروسه checkout با بازدید از سبد خرید شروع می‌شه. در این مرحله کاربرها محصولات اضافه شده به سبد را ویرایش می‌کنند تا به آیتم‌های نهایی که قصد خریدش را دارند برسند. برای این‌که کاربرها این مرحله را بدون درد (:دی) طی کنند، حتما حواستان به موارد زیر باشد:

• به کاربرها امکان دسترسی سریع به سبد خرید را بدهید. وقتی کاربرها روی سبد خرید کلیک می‌کنند یعنی می‌خواهند یک مرحله جلوتر بروند، بنابراین هر مانع یا تاخیری را در این مرحله حذف کنید.

ابتدایی‌ترین قدم در طراحی سبد خرید، اضافه کردن دسترسی سریع به سبد است. در اغلب فروشگاه‌های آنلاین، با قرار دادن سبد خرید در هدر امکان دسترسی سریع به سبد در تمام صفحات فراهم می‌شود. در وب‌سایت JCrew.com با اضافه کردن هر محصول به سبد، badge اضافه شده روی آیکون سبد خرید و دیالوگ کوچک بالای صفحه، فیدبک سریع این اکشن را به کاربرها می‌دهد. هم‌چنین با کلیک روی آیکون سبد خرید، بدون هیچ pop-up، کلیک یا قدم اضافه‌ای کاربرها به سبد خرید هدایت می‌شوند.

• به‌روزرسانی محتوای سبد خرید را برای کاربرها راحت کنید. کاربرها اغلب نظرشان درباره خرید یک محصول تغییر می‌کند و یا ممکن است تصادفا یک محصول را دو بار به سبد خرید اضافه کنند. به آن‌ها اجازه بدهید به راحتی محتوای سبد خرید خود را تغییر دهند.
• به کاربرها یک دکمه حذف واضح در کنار هر آیتم در سبد خریدشان بدهید. برای حذف یک آیتم از سبد خرید، کاربرها را وادار نکنید تعداد آن را به صفر تغییر دهند.

در یک تست کاربردپذیری برای خرید از وب‌سایت HP، یکی از شرکت‌کنندگان در تست از این‌که نمی‌توانست کارتریج‌ پرینتری که به سبد خریدش اضافه کرده‌بود را حذف کند، به ستوه آمده بود (برای این کار باید تعداد محصول را به صفر تغییر می‎‌داد) و نهایتا کارتریج پرینتر خود را از Amazon خرید!

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

این نوع طراحی به دو دلیل اصلا بهینه نیست: (1) کاربرها باید دو اکشن انجام دهند (تغییر تعداد، و کلیک روی دکمه به‌روزرسانی)؛ (2) کاربرها اصولا فراموش می‌کنند روی دکمه به‌روزرسانی کلیک کنند چون متوجه نمی‌شوند باید این‌کار را انجام دهند.

• امکان خرید مهمان را اضافه کنید. حتی کسانی که در وب‌سایت شما اکانت دارند، پسوردشان را فراموش می‌کنند. در بیشتر موارد، خرید کردن به‌عنوان کاربر مهمان برای کاربرها، از بازیابی پسوردشان خیلی راحت‌تر است. (البته هرچند خرید به‌عنوان کاربر مهمان از نظر کاربردپذیری امر مهمی به شمار می‌آید، اما باید سیاست‌های سازمان و کسب‌وکار را نیز مدنظر داشت).

خلاصه خرید و ارسال

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

• خلاصه خرید در موبایل را در دسترس قرار دهید. جزئیات خریدی که ما در خلاصه خرید قرار می‌دهیم (شامل مالیات، تخفیف، هزینه ارسال، هزینه کل و موارد دیگر) موارد مهمی هستند. اما این‌که این جزئیات را کجای layout قرار می‌دهیم نیز بسیار اهمیت دارد. در حالت موبایل به دلیل محدودیت اندازه صفحه، گاهی این موارد در پایین صفحه نمایش داده می‌شوند. برای این‌که کاربر بعدا در ادامه مسیر checkout با دیدن قیمت کل غافلگیر نشود، بهتر است خلاصه خرید را در بالای fold صفحات checkout قرار دهید. کاربرها را مجبور نکنید برای دیدن قیمت کل تا پایین صفحه اسکرول کنند.

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

فیلدها و input های فرم

پر کردن فرم‌ها در موبایل می‌تواند وقت‌گیر باشد یا خطاهای زیادی داشته‌باشد.  کم کردن تعداد فیلدهای یک فرم و پر کردن اتوماتیک آن‌ها (براساس اطلاعاتی که از آن کاربر در سیستم ثبت شده‌است) می‌تواند نقش موثری در پروسه checkout داشته باشد. در ادامه چند guideline درباره فرم‌های مسیر checkout را بررسی می‌کنیم:

• برای هر فیلد از کیبورد درست آن استفاده کنید.

• براساس ورودی‌های قبلی کاربر، فیلدهای‌شان را پر کنید. فیلدهایی مثل نوع شماره کارت بانکی، آدرس، استان و موارد مشابه را می‌توان براساس دیتایی که قبلا کاربر وارد کرده محاسبه کرد. (مثلا از کد پستی برای خواندن آدرس استفاده کرد).

• برای انتخاب استان و تاریخ از input به جای drop-down استفاده کنید. اگر لیست‎‌ گزینه‌هایی که در drop-down قرار می‌گیرد طولانی است، به جای drop-down از فیلدهای input استفاده کنید.

پرداخت راحت در موبایل

• درگاه‌های بانکی مناسب و mobile-friendly را به کاربر‌ها نمایش بدید، اما در تعداد گزینه‌ها این کار افراط نکنید. نمایش گزینه‌های زیاد به کاربرها، باعث می‌شود بار ذهنی آن‌ها برای تصمیم‌گیری زیاد شود و قادر به تصمیم‌گیری نباشند. سعی کنید از یک درگاه بانکی پیش‌فرض استفاده کنید یا اگر موارد مختلفی را به کاربرها نشان می‌دهید، تعدادشان آن‌قدر زیاد نباشد که کاربر را وادار به فکر کردن کند و تصمیم‌گیری را برایش سخت کند.

• امکان ذخیره شماره کارت برای خریدهای بعدی کاربرها را فراهم کنید. این کار علی‌الخصوص برای کاربرهایی که به‌طور مکرر از شما خرید می‌کنند، تجربه بهتری را رقم خواهد زد.
• برای کاربرها این امکان را فراهم کنید که به جای تایپ کردن اطلاعات کارت‌شان، عکس کارت‌شان را بارگذاری کنند.

در نوشته‌های بعدی، سراغ نکات دیگه در طراحی یک تجریه کاربری خوب و بهینه برای سبد خرید می‌ریم.