برای تولد بچه‌های همکارم میخوام کارت هدیه بهشون بدم تا هرچی می‌خوان بخرن. برای همین تصمیم گرفتم خدمت کارت هدیه توبانک رو بررسی کنم.

همینجا می‌تونم توی خدمات پرداخت، کارت هدیه رو ببینم

۵-

Dux Experiment

🧪

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

#داکس

به نظرم خیلی خوبه که همین اول مبالغ مازاد رو اشاره میکنه

Be Clear, Not Exhaustive

⚖️

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

#Ethical insight

من میخوام دو تا کارت جدا بگیرم. چقدر خوب که امکان اضافه کردن کارت داره.

خب می‌تونم مبلغ و تعداد هر کدوم رو جداگانه تعریف کنم. یه کارت ۲۰۰ هزار تومنی می‌خوام و یه ۳۰۰ هزار تومنی

Design Tip

🎨

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

#ترفند‌های طراحی

Design Principle*

DUX Experiment

🧪

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

#داکس

Root Page*

۵-

Hick's Law

🧠

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

#توصیه‌های روانشناسی

۵-

Reactance

🧠

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

#توصیه‌های روانشناسی

۵-

۵-

۵-

Feedforward

🧠

کاربران تمایل دارند قبل از انجام یک فرآیند، از مراحل آن آگاهی داشته باشند تا برای اقدامات پیش روی خود آمادگی لازم را کسب کنند. آگاهی از مسیر باقی‌مانده، انگیزه کاربر را برای تکمیل فرآيند و رسیدن به هدف نهایی افزایش می‌دهد.*

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

#توصیه‌های روانشناسی

با وجود اینکه در توبانک حساب داشتم، دوباره افتتاح حساب بهم نمایش داده شد

شفافیت در اعلام هزینه‌های مازاد، باعث شد اعتمادم به توبانک جلب بشه

وقتی برای تغییر تصویر خواستم به صفحه قبل برگردم، از فرآیند خرید خارج شدم و به صفحه خانه برگشتم

مسیریابی در برنامه کار آسونی نبود و CTA در صفحه مشخص نیست

به علت واضح نبودن راهنمای صفحه، بعد از وارد کردن متن دلخواه به اجبار باید متن پیش فرض انتخاب کنم

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

فرآیند خرید کارت طولانی بود و نمی‌دونستم چند مرحله تا اتمام تکمیل خرید مونده

رسیدی که برای گرفتن تایید نهایی نمایش داده شد، اطلاعات ناقصی ارائه می‌کرد و امکان ویرایش نداشت

در آخر مطمئن شدم که نمی‌تونم ۲ طرح و متن متفاوت برای کارت‌هام انتخاب کنم و از خرید انصراف دادم