مقاله طراحی تجربه کاربری: فرم پرداخت کارت اعتباری در طراحی سایت ها

اگر شما به صورت آنلاین مواردی را به فروش می رسانید، می دانید که کار ساده ای نمی باشد. شما به یافتن مشتریان موثر و سودمند، نمایش محصولات تان به روش تاثیر گذار، هدایت کردن مشتریان در مسیر خرید از وب سایت و در نهایت کسب درآمد از آن ها نیاز دارید. در هر مرحله، شما در معرض ریسک از دست دادن مشتریان خود می باشید. این مورد بسیار دردناک است.

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

کاهش حس ریسک و اجتناب از سردرگمی و حواس پرتی- باید چیزی باشد که در حین طراحی کردن فرم کارت اعتباری باید به آن دقت کنید و آن را مد نظر داشته باشید. این مورد آخرین عملکرد در طراحی تجربه کاربری شما محسوب می شود.

ناراحت کننده نیست که مشتری را در آخرین محله فروش محصولات در وب سایت خود از دست بدهید؟ شما هر کار دیگری را به خوبی انجام دادید، ولی تنها یک مورد کوچک در مرحله نهایی با خطا و اشکال مواجه شده بود. اگر پرداخت به صورت کامل انجام نشود، شما تنها باید اشک بریزید و ناراحت باشید، دیگر هیچ کاری نمی توانید انجام دهید.

 

ما این احساسات را می شناسیم و درک می کنیم.

UXPIN برای مدت زمان طولانی به PAYPAL به عنوان تنها گزینه پرداختی وب سایت خود، روی آورده بود. سرعت پیشرفت و کمبود برورکراسی در این زمینه بسیار وسوسه برانگیز می باشد، و ما می توانیم در برابر آن مقاومت کنیم. این موضوع یک تصمیم گیری بسیار مهم و عظیم محسوب می شود. ما به طور مداوم 20 درصد از مشتریان خود را در مرحله  آخر پروسه خرید و یا فروش در وب سایت از دست می دهیم. دلایل این امر بسیار آشکار است:

  • کمبود وجود گزینه های پرداختی (اگرچه PAYPAL در ایالات متحده آمریکا بسیار محبوب می باشد، اما افراد بسیاری زمانی که بحث پرداخت اشتراکات به اپلیکیشن طراحی تجربه کاربری ما می شود، از استفاده از آن سرباز می زنند).
  • پروسه پیچیده هدایت شدن به PAYPAL و طراحی وحشتناک در صفحه PAYPAL.

 

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

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

 

به مردم کمک کنید تا موفق شوند

من برا شما خبرهای خوشی دارم: اگر مشتری موثر و واقعی شما به نقطه ای برسد که نیاز به تایپ کردن شماره کارت اعتباری خود داشته باشد، او واقعا می خواهد تا موردی را پرداخت نماید. درست است. افرادی می خواهند به شما پول بدهند. این که شما این گونه مشتریان را خواهید داشت یا خیر، بستگی به طراحی سایت و طراحی صفحه پرداخت وب سایت شما دارد.

آیا به کاربران خود کمک می کنید تا در مرحله خرید موفق شوند و یا آیا این پروسه را برای آن ها سخت و دشوار می سازید؟ این امر بستگی به شما دارد.

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

نه تنها به این ترتیب شما به آن ها کمک نمی کنید، بلکه شما موانعی را در سر راه خرید آن ها از سایت نیز ایجاد می کنید.

LUKE WROBLEWSKI در کتاب خود تحت عنوان "WEB FORMS: FILLING THE BLANKS"، این گونه اظهار می دارد: هر سوالی که از مردم در فرم های وب بپرسید، به تجزیه و تحلیل کردن، فرمول بندی یک پاسخ و مهیا کردن ارائه پاسخ در یک بخش راحت و ساده که شما برای آن ها مهیا می کنید، نیاز دارد. آگاه و هوشیار بودن در رابطه با هر سوالی که می پرسید این امکان را به شما می دهد تا سوالاتی که واقعا ضروری نمی باشند را حذف نمایید و یا در زمان بهتر و یا مکان مناسب تری بپرسید. هر چه سوالات کمتری بپرسید، احتمال بیشتر وجود دارد تا کاربران، فرم ها را به سرعت و راحت تر کامل کنند.

 

به پروسه پرداخت وب سایت AMAZON نگاهی بی اندازید و به فرم پرداخت آن ها توجه کنید. AMAZON می داند که تایپ کردن شماره کارت اعتباری هر زمانی که کاربران بخواهند خرید کنند، موردی است که مانند یک مانع دیده می شود و از این رو آن ها از کاربران می خواهند تا شماره کارت اعتباری خود را به اکانت شخصی خود اضافه نمایند، از این رو کاربران در این وب سایت تنها با یک کلیک خرید خود را انجام می دهند.

 

AMAZON در نظر دارد تا جایی که می تواند در این پروسه ساده عمل نماید.

 

آن ها هم چنین میزان اطلاعات مورد نیاز را تنها به "شماره کارت اعتباری"، "نام کارت اعتباری" و "تاریخ انقضا" محدود نمودند.

AMAZON سعی دارد تا به مشتریان خود کمک نماید تا هر چه سریع تر وارد پروسه پرداخت شوند.

 

برای کاربران خود، کارهایی را انجام دهید.

ساده ساختن فرم پرداخت توسط کاهش تعداد فیلد های فرم تنها چیزی نیست که شما می توانید به روش خود انجام دهید تا تجربه کاربری شگرفی را به وجود آورید، بلکه می توانید کمک های خود را با انجام دادن بخشی از کار مشتریان و کاربران، توسعه و بسط دهید.

 

فرم کارت اعتباری APPLE

APPLE در فرم پرداخت کارت اعتباری، نوع کارت اعتباری که استفاده می کنید را بررسی می کند و برای شما این مسیر را ساده تر نیز می سازد و از این رو شما نیازی ندارید تا از لیست، موردی را برگزینید. ریسپانسیو بودن فرم هم چنین بسیار اهمیت دارد، زیرا مردم می توانند توجه خود را به خوبی روی آن معطوف نمایند. زمانی که شما شروع به تایپ کردن شماره کارت اعتباری خود می کنید، آیکون سمت راست هم چنان رنگارنگ باقی می ماند، این در حالی است که باقی عوامل به رنگ خاکستری در می آیند.

شما هم چنین باید توجه کنید که APPLE گزینه ای را با دو کارت اعتباری و کارت DEBIT ارائه می دارد. این مورد بسیار عالی است و اندک مشتریانی به این امر توجه می کنند. اگر شما به طور مثال چرخ دنده گران قیمتی را در وب سایت خود به فروش می رسانید- شما باید این گزینه را در سایت خود در نظر بگیرید.

GUMROAD روش یکسانی را برای سایت خود به کار برده است و به این ترتیب کاربران و مشتریان می دانند که چه نوع کارت اعتباری را باید استفاده نمایند.

 

از نظر تکنیکی، این موضوع بسیار ساده می باشد. شماره های کارت اعتباری به روش منسجم و پایداری ساخته می شوند. شماره کارت اعتباری آمریکایی ها با 34 و یا 37 شروع می شود. شماره های مستر کارت با 51 و 55 آغاز می شود و ابتدای شماره کارت های مربوط به ویزا عدد 4 می باشد و غیره. این اطلاعات می توانند تنها با نگاه کردن به شماره کارت به فهمیدن این موضوع کمک نماید که افراد از چه کارت هایی استفاده می کنند.

 

ارائه توضیحات

برای این که فرم پرداخت سایت خود را ساده و فاقد هر گونه سختی بسازید، نیاز دارید تا آن را آشکار و واضح در معرض نمایش بگذارید. اگر شما لیبلی را برای فیلد های فرم در اختیار دارید که هیچ توضیحی را در بر ندارد، برخی از مشتریان تان نسبت به آن احساس سردرگمی می کنند. آن ها ممکن است متوجه نشوند که کد CVV چیست و یا دلیل این که نام آن ها را می خواهید، چه می باشد.

باید این سختی ها را با اضافه کردن مثال و توضیح کوتاهی در کنار برچسب ها و لیبل ها کاهش دهید.

نگاهی به فرم پرداخت ساده که توسط تیم THREADLESS ساخته شده است، بی اندازید. زیبایی های این طراحی به جزئیاتی مربوط می شود که پنهان هستند.

 

بیایید فیلد های این فرم را مورد ملاحضه قرار دهیم:

  • نام (همان اسمی که روی کارت مشهود می باشد)- تمام شک و شبهات را در رابطه با این که نیاز دارید تا در این فرم چه چیزی را تایپ کنید را برطرف می نماید.
  • شماره کارت اعتباری (بدون فاصله و یا خط تیره)- اطلاعاتی را درباره فرمت مورد نیاز وارد کردن شماره کارت اعتباری را به کاربران خود ارائه دهید. البته اگر فرم مورد نظر هر نوع ورود داده ای را قبول کند، این امر بسیار بهتر می شود. هم چنین گزینه خوبی می باشد که مردم را از فرمت اشتباه با پیام خطا آگاه سازیم.
  • کد امنیتی- تصویر حاوی کد امنیتی باید به طور واضحی نشان دهد که شما می بایست تا آن را در کجا وارد نمایید. این اولین فرم پرداخت کارت اعتباری می باشد که به طور واضحی کد امنیتی کارت های AMERICAN EXPRESS در جلوی آن قرار دارد نه در پشت آن و شامل 4 رقم می باشد نه سه رقم.

 

می توانید مشاهده کنید که چگونه تیم THREADLESS از روی عمد این فرم را ساده می سازد؟ آن ها می خواهند از ایجاد سردرگمی مشتریان خود جلوگیری به عمل آورند که این امر باعث افزایش میزان تبدیل مخاطبین به مشتریان سایت آن ها می شود.

 

ترفند اصلی در این جا این گونه است: باید تا جایی که می توانید آشکار و واضح عمل کنید. به یاد داشته باشید که تمامی مشتریان شما به کمک بسیار زیادی نیاز ندارند. شما ممکن است به فکر پنهان کردن کمک و راهنمایی های در پشت پرده سوالات بی افتید. توضیحات و آوردن مثال های بیش از حد، ممکن است درگیری های ذهنی را برای کاربران ایجاد نماید که همیشه یک مورد خطرناک و ریسک پذیر به شمار می آید.

 

باید به مشتریان خود احساس امنیت بدهید.

زمانی که مردم به نقطه ای در وب سایت رسیدند که باید کارت های اعتباری خود را وارد نمایند، شما باید کاری کنید تا احساس امنیت کنند. اگر شما نتوانید طراحی سایت را از نظر آن ها امن بسازید، فرم پرداخت کارت اعتباری شما یک فاجعه خواهد شد، مگر این که شما شهرت بسیاری داشته باشید، مانند APLLE و یا AMAZON. در هر صورت شما می بایست نشان دهید که مراقب امنیت مشتریان سایت خود می باشید.

به طراحی تجربه کاربری صفحه پرداخت وب سایت زیر نگاهی بی اندازید.

 

ما به مشتریان خود نشان می دهیم که ما روی پروتوکل انکریپت شده 128 بیت SSL سرمایه گذاری کرده ایم تا داده های شان را امن نگاه داریم. ما می خواهیم تا آن ها تا جایی که امکان دارد، احساس امنیت نمایند. ما هم چنین دقت بسیار زیادی را روی طراحی بصری صرف می کنیم.

طراحی بصری اهمیت بسیار بالایی دارد، مخصوصا زمانی که بحث امنیت و حس آرامش در وب سایت می شود. اگر شما مانند یک وب سایت متقلب به نظر برسید، و یا این که مانند یک سایت کلاهبردار رفتار کنید، این را بدانید که هیچ کس تشویق نمی شود که به شما اطمینان کرده و شماره کارت اعتبار خود را در دسترس شما قرار دهد.

 

 

اطمینان حاصل کنید که مشتریان از قیمت های محصولات و سرویس ها موجود در سایت خبر دارند.

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

BUFFER APP این مورد را به بهترین روش انجام می دهد.

BUFFER به شما اجازه می دهد تا بدانید که چه اشتراک سرویسی را از آن خود خواهید کرد و به شما گزینه های را ارائه می دهد تا پرداخت اولیه ای را در برای یک سال انجام دهید.

 

 

متن عالی و کاربردی و آرامش دهنده آن ها باعث می شود تا شما اطمینان حاصل کنید که افرادی در پس این ماجرا قرار دارند و خبری از سایبورگ های تبه کارانه نمی باشد. این وب سایت هم چنین به مشتریان حس آرامش و امنیت را القاء می کند.

 

آموزش قدم به قدم

بیایید تا از آگاهی ها و دانستنی هایی که ما در بالا جمع آوری نموده ایم استفاده کنیم و وارد پروسه طراحی کردن فرم پرداخت کارت اعتباری عالی و بدون نقص برای سایت های مان شویم. آماده اید؟

من از اپلیکیشن UXPIN- THE UX DESIGN APP استفاده می کنم تا به سرعت این رابط کاربری را بسازیم، اما شما می توانید به انتخاب های مد نظر خود رجوع کنید و در این مورد آزاد هستید.

 

1.ساختار اولیه

 

من همیشه دوست دارم با ساختار پایه رابط کاربری در ذهن شروع نمایم. کادر و باکس های خالی نشان دهنده فضا و بخش کلی محتوا می باشد که با عوامل رابط کاربری پر خواهند شد. این مورد به من این امکان را می دهد تا واقعا روی بخش محتوایی، متمرکز باقی بمانم.

 

  1. تیتر و عامل دعوت به عمل

 

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

به زیر فصل ها نگاهی بی اندازید، " ما visa, MasterCard, American express را قبول می کنیم. اگر کارت شما در این لیست قرار ندارد، ما را در جریان بگذارید".

با این جمله، من به مشتریان خود درباره کارت های قابل قبول اطلاع رسانی می کنم، اما به طور همزمان، پشتیبانی های را در مواقع ضروری نیز ارائه می دارم.

اگر مشتریان شما از کارت های اعتباری استفاده می کنند که پشتیبانی نمی شود، شما واقعا نیاز دارید تا در این باره به آن ها اطلاع رسانی کنید.

یک عامل دعوت به عمل هم باید به طور واضح در این میان قرار داشته باشد. سعی نکنید از موارد کلی مانند "ادامه دهید"، "خوب است" و "انجام شد" استفاده نمایید- این دست از عبارت ها، مفهومی را برای پروسه کلی به وجود نمی آورند و باعث سردرگم شدن مشتریان تان می شوند. آن ها هم چنین باعث می شوند تا حس ضرورت در وب سایت از بین برود. از این رو تنها سعی کنید که از دکمه هایی استفاده نمایید که واقعا مشتریان را ترغیب به انجام عملکردی می کند.

 

  1. نشانه ها و عوامل امنیتی

 

دو پاراگراف بالایی درباره اهمیت امنیت و وجود قیمت در فرم پرداخت کارت اعتباری صحبت نمودیم. حالا بیایید این دو مورد را به صورت عملکردی مشاهده نماییم.

به مواردی نگاه بی اندازید که من برای اطمینان یافتن از اینکه پروسه پرداخت وب سایت بسیار کاربردی و عالی پیش می رود، استفاده می نمایم:

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

 

  1. فیلد های فرم.

 

سپس، من فیلد های مهمی را قرار می دهم. من گمان می کنم که به علت مکانیسم تراکنش ذاتی که وجود دارد، نیاز ندارم نام مشتریانم را بدانم و به این ترتیب اجازه می دهم که در پروسه پرداخت پیش روند، اما مطمئنا به کد CVV کارت اعتباری آن ها نیاز دارم. این یک نمونه محبوب و عالی در این زمینه می باشد.

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

با قرار دادن "/" بین دو عدد تاریخ انقضای کارت، من مدل ذهنی از کارت اعتباری را در فرم فیلد خود اجرا می نمایم. این فرمت و الگو از داده ها در بیشتر کارت های اعتباری در سراسر دنیا به کار می رود.

 

  1. برچسب ها و لیبل ها و توضیحات.

 

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

کد امنیتی همیشه یک بخش سخت و بسیار مهم می باشد، از این رو من آن را با یک پیام متنی، امنیت بخشیدم: "LAST 3 DIGIT ON THE BACK. AMEX: 4 ON THE FRONT". هم چنین این آیکون نشان می دهد که در کجا باید کد امنیتی را بیابید و در کجا باید آن را وارد کنید.