در طراحی بازار و فروشگاههای اینترنتی، مسیر checkout یکی از مهمترین قسمتهای user journey خرید محسوب میشه؛ چون مستقیما روی درک کاربرها از برند، تمایل آنها برای بازگشت و مهمتر از همه سود سازمان تاثیر میذاره.
برای طراحی یا بهبود مسیر checkout، از best practice های این زمینه خیلی میشه ایده گرفت، اما باتوجه بهاینکه تعداد کاربرهایی که از گوشیهای موبایلشان برای خرید استفاده میکنند روزبهروز بیشتر میشه، خیلی مهمه که مسیر checkout را بهطور اختصاصی با توجه به قابلیتها و محدودیتهای موبایل طراحی کنیم.
به نظر من اولین قدم برای طراحی یک مسیر بهینه و مناسب checkout برای کاربرهامون، اینه که طراحیهای غیربهینه و مسیرهایی که اصول کاربردپذیری در آنها رعایت نشده را ببینیم، ازشون درس بگیریم و سعی کنیم اشتباه دیگران را تکرار نکنیم.
در ادامه این نوشته، یک سری از بایدها و نبایدهای ابتدایی مسیر checkout را با هم مرور میکنیم.
سبد خرید
اصولا پروسه checkout با بازدید از سبد خرید شروع میشه. در این مرحله کاربرها محصولات اضافه شده به سبد را ویرایش میکنند تا به آیتمهای نهایی که قصد خریدش را دارند برسند. برای اینکه کاربرها این مرحله را بدون درد (:دی) طی کنند، حتما حواستان به موارد زیر باشد:
به کاربرها امکان دسترسی سریع به سبد خرید را بدهید. وقتی کاربرها روی سبد خرید کلیک میکنند یعنی میخواهند یک مرحله جلوتر بروند، بنابراین هر مانع یا تاخیری را در این مرحله حذف کنید.
دسترسی سریع و interaction سبد خرید در Jet.com
ابتداییترین قدم در طراحی سبد خرید، اضافه کردن دسترسی سریع به سبد است. در اغلب فروشگاههای آنلاین، با قرار دادن سبد خرید در هدر امکان دسترسی سریع به سبد در تمام صفحات فراهم میشود. در وبسایت JCrew.com با اضافه کردن هر محصول به سبد، badge اضافه شده روی آیکون سبد خرید و دیالوگ کوچک بالای صفحه، فیدبک سریع این اکشن را به کاربرها میدهد. همچنین با کلیک روی آیکون سبد خرید، بدون هیچ pop-up، کلیک یا قدم اضافهای کاربرها به سبد خرید هدایت میشوند.
در PSSW، با کلیک روی آیکون سبد خرید یک mini-cart باز میشود که در آن کاربرها باید مجددا روی دیدن سبد یا checkout کلیک کنند تا بتوانند جزئیات سبد خرید خود را ببینند. این قدم اضافه اصلا ضروری نیست. وقتی کاربرها روی سبد خرید کلیک میکنند، آنها را مستقیما به سبد خریدشان هدایت کنید.
بهروزرسانی محتوای سبد خرید را برای کاربرها راحت کنید. کاربرها اغلب نظرشان درباره خرید یک محصول تغییر میکند و یا ممکن است تصادفا یک محصول را دو بار به سبد خرید اضافه کنند. به آنها اجازه بدهید به راحتی محتوای سبد خرید خود را تغییر دهند.
به کاربرها یک دکمه حذف واضح در کنار هر آیتم در سبد خریدشان بدهید. برای حذف یک آیتم از سبد خرید، کاربرها را وادار نکنید تعداد آن را به صفر تغییر دهند.
در یک تست کاربردپذیری برای خرید از وبسایت HP، یکی از شرکتکنندگان در تست از اینکه نمیتوانست کارتریج پرینتری که به سبد خریدش اضافه کردهبود را حذف کند، به ستوه آمده بود (برای این کار باید تعداد محصول را به صفر تغییر میداد) و نهایتا کارتریج پرینتر خود را از Amazon خرید!
HP کاربرها را وادار میکرد برای حذف آیتمهای سبد خرید، تعدادشان را به صفر تغییر دهند
از دکمه بهروزرسانی برای اعمال تغییرات دادهشده در سبد خرید استفاده نکنید. گاهی اوقات وبسایتها کاربرها را مجبور میکنند برای اعمال تغییراتی که در سبد خرید انجام میدهند از دکمه بهروزرسانی استفاده کنند. در نتیجه کسی که میخواهد تعداد محصولات سبد خرید را تغییر دهد باید علاوه بر انتخاب تعداد مورد نظرش، روی دکمه بهروزرسانی نیز کلیک کند.
این نوع طراحی به دو دلیل اصلا بهینه نیست: (1) کاربرها باید دو اکشن انجام دهند (تغییر تعداد، و کلیک روی دکمه بهروزرسانی)؛ (2) کاربرها اصولا فراموش میکنند روی دکمه بهروزرسانی کلیک کنند چون متوجه نمیشوند باید اینکار را انجام دهند.
وب سایت Things Remembered از کاربرها میخواهد برای اعمال تغییرات روی update کلیک کنند.
امکان خرید مهمان را اضافه کنید. حتی کسانی که در وبسایت شما اکانت دارند، پسوردشان را فراموش میکنند. در بیشتر موارد، خرید کردن بهعنوان کاربر مهمان برای کاربرها، از بازیابی پسوردشان خیلی راحتتر است. (البته هرچند خرید بهعنوان کاربر مهمان از نظر کاربردپذیری امر مهمی به شمار میآید، اما باید سیاستهای سازمان و کسبوکار را نیز مدنظر داشت).
در Pottery Barn خرید مهمان اصلیترین گزینه برای پروسه خرید محسوب میشود. در این وبسایت خرید مهمان در viewport قرار گرفته و کال تو اکشن اصلی این صفحه است تا وقت کاربرها برای پیدا کردنش گرفته نشود.
خلاصه خرید و ارسال
خریداران از اینکه قیمتها گنگ باشند و هنگام checkout ببینند قیمت قابل پرداخت به هر دلیلی افزایش پیدا کرده خوششان نمیآید. وقتی کاربرها با چنین موردی مواجه میشوند اصولا سبد خرید خود را رها میکنند و سعی میکنند از وبسایتها یا راههای دیگری برای خرید استفاده کنند. این مورد علیالخصوص درباره هزینه ارسال زیاد اتفاق میافتد. با دو روش زیر میتوان از این مورد جلوگیری کرد:
خلاصه خرید در موبایل را در دسترس قرار دهید. جزئیات خریدی که ما در خلاصه خرید قرار میدهیم (شامل مالیات، تخفیف، هزینه ارسال، هزینه کل و موارد دیگر) موارد مهمی هستند. اما اینکه این جزئیات را کجای layout قرار میدهیم نیز بسیار اهمیت دارد. در حالت موبایل به دلیل محدودیت اندازه صفحه، گاهی این موارد در پایین صفحه نمایش داده میشوند. برای اینکه کاربر بعدا در ادامه مسیر checkout با دیدن قیمت کل غافلگیر نشود، بهتر است خلاصه خرید را در بالای fold صفحات checkout قرار دهید. کاربرها را مجبور نکنید برای دیدن قیمت کل تا پایین صفحه اسکرول کنند.
در Adidas.com، کاربرها مجبورند تا فوتر صفحه Review & Pay اسکرول کنند تا مشخصات خریدشان را ببینند. همچنین این مشخصات در یک باکس collapsible قرار گرفته که دیدن جزئیات قیمت را سختتر هم میکرد. اصه خرید در وبسایت Adidas در پایین صفحه قرار گرفتهاست.
در صفحه Review & Pay در Jet.com، خلاصه خرید مشخصا در بالای fold قرار گرفتهاست. در این حالت کاربرها قبل از رفتن به صفحه پرداخت، بدون اسکرول میتوانند مبلغ نهایی و جزئیات قیمت را ببینند.
از موقعیت فعلی کاربرها برای نشان دادن هزینه مالیات، ارسال و غیره استفاده کنید. برخی هزینههای جانبی مانند هزینه ارسال به آدرس وارد شده توسط کاربر بستگی دارند، و اصولا در اواخر مسیر checkout نمایش داده میشوند. در موقعیتهایی که امکان آن وجود دارد، بهتر است از موقعیت یا آدرس فعلی کاربر برای تخمین هزینههای جانبی استفاده کنید. استفاده از موقعیت فعلی کاربرها این امکان را نیز به شما میدهد که محصولاتی که به کاربرها نزدیکتر هستند را به آنها نشان دهید. البته برای استفاده از موقعیت فعلی کاربرها حتما از آنها اجازه دسترسی به این مشخصات را بگیرید و به آنها اجازه دهید این اطلاعات را بهراحتی تغییر دهند یا بهروزرسانی کنند.
در مسیر checkout کاربرها در Target، از موقعیت فعلی کاربرها استفاده میشود تا روش ارسال و مالیات تقریبی محصولات برایشان تخمین زده شود.
فیلدها و input های فرم
پر کردن فرمها در موبایل میتواند وقتگیر باشد یا خطاهای زیادی داشتهباشد. کم کردن تعداد فیلدهای یک فرم و پر کردن اتوماتیک آنها (براساس اطلاعاتی که از آن کاربر در سیستم ثبت شدهاست) میتواند نقش موثری در پروسه checkout داشته باشد. در ادامه چند guideline درباره فرمهای مسیر checkout را بررسی میکنیم:
برای هر فیلد از کیبورد درست آن استفاده کنید.
در وبسایت Nike از کیبوردهای درستی برای هر فیلد استفاده میشود. برای فیلدهایی که عدد میگیرند، کیبورد اعداد را نمایش دهید.
براساس ورودیهای قبلی کاربر، فیلدهایشان را پر کنید. فیلدهایی مثل نوع شماره کارت بانکی، آدرس، استان و موارد مشابه را میتوان براساس دیتایی که قبلا کاربر وارد کرده محاسبه کرد. (مثلا از کد پستی برای خواندن آدرس استفاده کرد).
Crutchfield از زیپ کدی که کاربر وارد میکند استفاده میکند تا برخی از فیلدها را بهصورت اتوماتیک لود کند
برای انتخاب استان و تاریخ از input به جای drop-down استفاده کنید. اگر لیست گزینههایی که در drop-down قرار میگیرد طولانی است، به جای drop-down از فیلدهای input استفاده کنید.
کاربرهای Staples مجبورند یک لیست طولانی را برای انتخاب نام ایالتشان انتخاب کنند، در صورتی که تایپ کردن این دیتا و نشون دادن نتایح با auto-complete کار کاربر رو خیلی راحتتر میکنه.
TM Lewin به کاربرها اجازه میدهد تاریخ انقضا کارت بانکیشان را خودشان تایپ کنند و برای این قسمت کیبورد درستی رو هم نشون میده.
پرداخت راحت در موبایل
درگاههای بانکی مناسب و mobile-friendly را به کاربرها نمایش بدید، اما در تعداد گزینهها این کار افراط نکنید. نمایش گزینههای زیاد به کاربرها، باعث میشود بار ذهنی آنها برای تصمیمگیری زیاد شود و قادر به تصمیمگیری نباشند. سعی کنید از یک درگاه بانکی پیشفرض استفاده کنید یا اگر موارد مختلفی را به کاربرها نشان میدهید، تعدادشان آنقدر زیاد نباشد که کاربر را وادار به فکر کردن کند و تصمیمگیری را برایش سخت کند.
Vineyard Vines گزینههای زیادی را برای پرداخت نمایش میداد.
امکان ذخیره شماره کارت برای خریدهای بعدی کاربرها را فراهم کنید. این کار علیالخصوص برای کاربرهایی که بهطور مکرر از شما خرید میکنند، تجربه بهتری را رقم خواهد زد.
برای کاربرها این امکان را فراهم کنید که به جای تایپ کردن اطلاعات کارتشان، عکس کارتشان را بارگذاری کنند.
ُTiffanys.com به کاربرها اجازه میدهد از امکان پرکردن اتوماتیک مشخصات کارت بانکی Safari استفاده کنند (سمت چپ) و با گرفتن عکس از کارت بانکیشان مشخصات کارت بانکیشان در سیستم بارگذاری میشود (سمت راست).
در نوشتههای بعدی، سراغ نکات دیگه در طراحی یک تجریه کاربری خوب و بهینه برای سبد خرید میریم.