پوکایوکه در تجربه کاربری استفاده از کد تخفیف یا کد دعوت

کدها میتونن بخش مهمی از فرآیند یا افزایش فروش و تعامل کاربران با محصول ما باشن

کد تخفیف، کد کارت هدیه، کد معرف و کد امنیتی

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

از وارد شدن اشتباه کد توسط کاربر تا کدهای منقضی شده و یا دارای شرط استفاده مواردی هستن که کاربر ممکنه با اون‌ها مواجه بشه

اینجا جاییه که پوکایوکه وارد میشه و قبل از اینکه به بحث اصلیمون یعنی بهبود تجربه کاربری در استفاده از کدها وارد بشیم، نیازه که بدونیم پوکایوکه چیه؟

اگر قبلا با این تکنیک آشنایی دارین میتونین تا بخش "پوکایوکه در کدها" یا دایره آبی 🔵 اسکرول کنین

خطاناپذیرسازی یا Poka-yoke چیه؟

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

از این تکنیک بیشتر در صنعت استفاده میشه اما شاید بشه اون رو در زندگی روزمره و در هر جایی دید و از اون استفاده کرد

پوکا: در فارسی یعنی؛ (خطاهای غیرعمدی) | یوکه: در فارسی یعنی؛ (پرهیز)

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

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

بریم با هم یه سری مثال در استفاده از پوکایوکه در زندگی روزمره و بعد از اون در تجربه کاربری ببینیم

پوکایوکه در زندگی روزمره

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

• توقف خودکار مایکرویو در زمانی که در اون رو باز می‌کنید و روشن شدن اون فقط در زمانی که در اون بسته باشه
• اگر درِ ماشین لباسشویی بسته نباشه روشن نمی‎‌شه

مثال پوکایوکه در UX

۱. یادآور فراموشی اتچ کردن فایل در نوشتن ایمیل جدید در جیمیل

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

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

اگر دوست دارین بیشتر در مورد پوکایوکه بدونین میتونین مقاله "کوتاه در مورد Poka-yoke" رو بخونین

پوکایوکه در کدهایی که از سمت کاربر وارد می‌شن

اصولا ساختار کدهای تخفیف ترکیبی از حروف انگلیسی و اعداد و در برخی موارد کاراکترهای خاص هستند

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

و این چالش با وجود اینکه محصول ما فارسی هست بدتر هم میشه! که در ادامه بهش میرسیم

موضوع اصلی شباهت بین یه سری حروف انگلیسی، حروف فارسی، اعداد فارسی، اعداد انگلیسی و کاراکترهای خاص نسبت به هم در شرایط مختلفه

۱. شباهت ۷ و v و V

مثال این مورد رو میتونید توی کد دعوت آبانک و کد تخفیف در اسنپ به وضوح ببیند

به نظر شما این کد کدوم گزینه میتونه باشه؟ Vote؟ ۷ote؟

حتی تو این متن هم تشخیصش سخته متوجه بشیم کاراکتر اول حرف وی انگلیسی (V) هست یا اینکه هفت در اعداد فارسی (۷) ؟؟؟

۲. شباهت O و 0 و o (او بزرگ - صفر - او کوچک )

۳. شباهت - و ـ (خط تیره - اندرلاین)

۴. شباهت 8 و B (هشت - بی)

۵. شباهت ۹ و q (نُه - کیو)

۶. شباهت . و ۰ (نقطه - صفر)

۷. شباهت w W و vv VV و ۷۷ (دبلیو - دوتا پی - هفتاد و هفت)

۸. شباهت S و 5 (اس - پنج)

۹. شباهت ۱ و l و I (یک - آی بزرگ - اِل کوچک)

مثال این مورد رو میتونید توی کد دعوت بلوبانک ببینید

بلوبانک با بزرگ کردن حروف کد یه درجه این مورد رو بهتر کرده اما همچنان برای کاربری که ندونه حرف بزرگ i فقط میتونه اون شکلی باشه این مشکل همچنان به وجود میاد و ممکنه کاربر رو به اشتباه بندازه

بلوبانک برای حل این مشکل روش جالبی رو به کار برده که اینطوری اون رو توضیح دادن:

کاراکترهای ۰ و ۱ و ۲ و ۸ و ۹ جزو موارد مورد استفاده نیست و اگر استفاده کنید سمت سرور تصحیح میشه. مثلا صفر بزنید سمت سرور تبدیل میشه به ا ُ (O)

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

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

پیشنهاد‌ها

پیشنهاد ۱: حذف حروف و اعداد شبیه به هم

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

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

این راه حل زمانی که تعداد کد کمی داشته باشیم خیلی میتونه موثر باشه

ما در تیم محصول دیجی شهر تصمیم گرفتیم برای بهبود تجربه کاربری تا از این مورد استفاده کنیم و یک سری حروف و اعداد مثل هفت٬ وی و یک سری از موارد مشابه که در بخش قبل گفته شد رو حذف کنیم

مقایسه حالات مختلف در کد ۶ رقمی

حالت ۱ : اگر از تمام کاراکترها استفاده کنیم، مجموع تمام اعداد و حروف انگلیسی ۳۸ کاراکتر می‌شه و
در این صورت میتونیم ۳۸ به توان ۶ یعنی ۳٬۰۱۰٬۹۳۶٬۳۸۴ کد منحصر به فرد داشته باشیم.

حالت ۲ : اگر کاراکترهای 0,o,V,7,W,S,5,8,B,1,L,I,9,q رو از حالت ۱ حذف کنیم، مجموع کاراکترها ۲۶ می‌شه و در این صورت می‌تونیم ۲۶ به توان ۶ یعنی ۱۹۱٬۱۰۲٬۹۷۶ کد منحصر به فرد داشته باشیم.
ما در دیجی شهر برای اینکه تعداد کد بیشتری بتونیم داشته باشیم، کاراکترهای ۹ و q رو به دلیل اینکه داریم از حروف بزرگ استفاده میکنیم، حذف نکردیم و مجموع کاراکترها ۲۸ کاراکتر شدن و تونستیم ۲۸ به توان ۶ یعنی ۴۸۱٬۸۹۰٬۳۰۴ کد منحصر به فرد داشته باشیم.

حالت ۳ : اگر حالتی رو که بلوبانک داره استفاده میکنه رو بخوایم ایجاد کنیم و فقط کاراکترهای ۰ و ۱ و ۲ و ۸ و ۹ حذف کنیم، می‌تونیم ۳۳ به توان ۶ یعنی ۱,۲۹۱,۴۶۷,۹۶۹ کد منحصر به فرد داشته باشیم.

پیشنهاد ۲: بزرگ کردن حروف در ساختار و نمایش کد + تبدیل حروف کوچک به بزرگ در فیلد ورودی

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

پیشنهاد ۳: نمایش اعداد به انگلیسی در نمایش کد + تبدیل اعداد فارسی به انگلیسی در فیلد ورودی کد

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

با این تفکر کاربر ممکنه بار‌ها کیبوردش رو فارسی کنه تا اعداد در کد فارسی وارد کنه و دوباره کیبورد رو انگلیسی کنه تا حروف انگلیسی رو وارد کنه

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

پیشنهاد ۴: جلوی ورودی‌های غیر از ساختار کد رو بگیریم

برای مثال میتونیم زمانی که کاربر میخواد از کاراکترهایی استفاده کنه که تو ساختار کد وجود نداره مثل حروف فارسی جلوی اون رو بگیریم

پیشنهاد ۵: ارائه خطای درست به کاربر

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

• نمایش خطای حداقل مبلغ سبد خرید در دیجی شهر

• نمایش خطای پایان یافتن یا نرسیدن به بازه‌ی قابل استفاده بودن کد تخفیف دیجی شهر

• نمایش خطا دسته‌های قابل استفاده کد تخفیف در دیجی شهر

“If the system lets you make the error, it is badly designed. And if the system induces you to make the error, then it is really badly designed.”
Donald A. Norman

هدیه

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

لینک پرسشنامه تجربه کاربری فروشگاه دیجی شهر

لینک فروشگاه دیجی شهر

لینک خرید اقساطی از دیجی شهر