https://virgool.io/feed/@mreza.ghorbanirad fa 2026-06-08 07:22:30 https://files.virgool.io/upload/users/3566482/avatar/AEsfJ3.jpg?height=120&width=120 https://virgool.io/@mreza.ghorbanirad https://virgool.io/dgshahr/%D8%AA%D8%AD%D9%88%D9%84-%D9%81%D9%84%D9%88-%D8%AB%D8%A8%D8%AA-%D8%A2%D8%AF%D8%B1%D8%B3-%D8%AF%D8%B1-%D8%AF%DB%8C%D8%AC%DB%8C-%D8%B4%D9%87%D8%B1-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%D9%87%D8%A7-%D8%AA%D8%A7-%D8%A8%D9%87%D8%A8%D9%88%D8%AF-%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-j3mjsc3fnx7c فلو آدرس، به عنوان پلی بین مرحله سبد خرید و مرحله پرداخت سفارش می‌تونه تجربه‌ای خوشایند یا ناخوشایند رو برای کاربر رقم بزنه. تو این مقاله، به بررسی چالش‌هایی که در فلو آدرس قدیمی با اون مواجه بودیم و بهبودهایی که برای ارتقاء تجربه کاربری اعمال کردیم، می‌پردازیم.فلو قدیمی ثبت آدرس در فروشگاه دیجی‌شهر تو این مسیر یعنی ثبت سفارش (Ordering Flow) مواردی که حتما یک کاربر تازه‌وارد باهاش برخورد میکنه این‌ها هستن:ورود یا ثبت‌ناموارد کردن نام و نام خانوادگیکد ملی برای احراز هویتثبت آدرس یا انتخاب آدرس +‌ مشخصات گیرندهانتخاب نحوه پرداختپرداخت و ثبت نهایی سفارشهر کدوم از این موارد می‌تونه باعث بشه که کاربر نتونه سفارش رو ثبت کنه و یا حداقل با مشکل مواجه بشه. یکی از مهم‌ترین بخش‌ها فلو ثبت آدرس میتونه باشهموانع فلو آدرس قدیمیفلو قدیمی ثبت آدرس در فروشگاه دیجی‌شهر۱. دقیق نبودن آدرس متنی:شرح مشکل: چون آدرس متنی به طور پیش فرض بر اساس دیتای کدپستی و بعد از اون محل انتخاب شده روی نقشه پر می‌شد، کاربرا ترجیح میدادن اون رو تغییر ندن و خب اون دیتا همیشه درست نبود. به علاوه اون،‌ ترد پارتی‌ها ترجیح میدن کاربر خودش آدرس رو وارد کنه تا دقیق‌تر باشهاین عدم تغییر در آدرس پیش فرض میتونه دلیل اثر پیشفرض (Default effect) هم باشه که به تمایل افراد برای انتخاب گزینه‌ای اشاره دارد که به ‌طور پیش‌فرض برای آن‌ها تعیین شده است. این اثر در تصمیم‌گیری‌های روزمره نقشی مهم دارد، چرا که افراد اغلب از تغییر گزینه‌های پیش‌فرض اجتناب می‌کنند و ترجیح می‌دهند به همان گزینه‌ای که برای‌شان انتخاب شده پایبند بمانند.۲. عدم دقت در انتخاب موقعیت مکانی روی نقشه:شرح مشکل: بعضی از کاربران به دلایل مختلف، از جمله عدم توجه به موقعیت پیش‌فرض نمایش داده شده روی نقشه، عدم درک صحیح نحوه کار با نقشه یا مشکلات فنی در نمایش نقشه، اغلب آدرس خودشون رو به صورت دقیق روی نقشه مشخص نمی‌کردند. ۳. طولانی به نظر رسیدن مسیر انتخاب آدرس روی نقشه:شرح مشکل: با وجود اینکه مراحل انتخاب آدرس کوتاه بود، اما به دلیل طراحی نامناسب و عدم ارائه راهنمایی‌های کافی، مسیری که کاربر طی می‌کرد طولانی و پیچیده به نظر می‌رسید. به اصطلاح، کاربر حس می‌کرد خیلی باید وقت بذاره تا آدرسش رو پیدا کنه. عدم وجود یک مسیر خطی و واضح، کاربر رو دچار سردرگمی می‌کرد.۴. تجربه‌های کاربری متفاوت و ناهماهنگ:شرح مشکل: عدم اطلاع‌رسانی کافی در مورد امکانات موجود، مثل جستجو با کد پستی و تکمیل خودکار آدرس متنی، منجر به تجربه‌های کاربری بسیار متفاوت می‌شد. کاربرانی که از این امکانات اطلاع نداشتن، مجبور بودن مسیر طولانی‌تر و سخت‌تری رو طی کنن. در واقع، یه سری از کاربرا خیلی راحت آدرسشون رو پیدا می‌کردن، یه سری دیگه کلی اذیت می‌شدن.یه مثال: کاربری که با وارد کردن کد پستی به سرعت آدرسش رو پیدا می‌کرد، تجربه‌ای کاملاً متفاوت با کاربری داشت که مجبور بود به صورت دستی آدرسش رو روی نقشه پیدا کنه و اطلاعات متنی اون رو وارد کنه. این نشون می‌ده که اطلاع‌رسانی درست چقدر مهمه.فلو جدید ثبت آدرستغییر برای چی؟تردپارتی‌ها (3PL) بیشتر دوست دارن که کاربر خودش آدرس رو وارد کنهدقیق‌تر شدن محل انتخاب شده روی نقشهخطی شدن و یکپارچگی مسیر ثبت آدرسکوتاه شدن مسیر ثبت آدرس روی نقشهایجاد تجربه بهتر بر اساس اولویت‌های از پیش تعیین شدهبا توجه مشکلات موجود در نهایت به این نتیجه رسیدیم که سریع‌ترین روش تغییر با هزینه کمتر میتونه تغییر ترتیب ثبت آدرس باشهیعنی اول اطلاعات رو از کاربر بگیریم و بعد بر اساس دیتا‌ها و دسترسی‌هایی که داریم، بر اساس سه تا اولویت، نزدیک‌ترین محل به موقعیت کاربر رو نشون بدیماولویت‌های نمایش چه مواردی هستن؟کدپستیلوکیشن کاربرشهر کاربرفلو جدید ثبت آدرسیعنی اگر از کدپستی کاربر ریسپانس موقعیت جغرافیایی رو بگیریم، روی نقشه همونجا رو بهش نشون میدیمنمایش موقعیت بر اساس کدپستی و در فاز دوماگر کاربر روی نمایش محل فعلی کلیک کنه و دسترسی به لوکیشن رو بده، محل فعلی اون رو نمایش میدیمو یه حالت سوم داریم که اون زمانی هست که نه موقعیت جغرافیایی کاربر رو بر اساس کدپستی داریم و نه دسترسی به لوکیشن کاربر داریم.تو این حالت میریم سراغ شهر کاربر که برای هر شهر، بهترین محل برای اینکه کاربر بتونه این رو متوجه بشه که کجای شهر خودش هست رو بهش نشون میدیم.برای هر شهر چطوری اون محل رو انتخاب کردیم؟نمایش محل پیشفرض بر اساس شهر کاربراین محل بر اساس نماد یا محل شناخته شده شهر و یا بر اساس شلوغ بودن رفت و آمد تو یک نقطه از شهر انتخاب شده که می‌تونه باعث این بشه که درصد بیشتری از کاربرها بتونن تشخیص بِدَن که الان کجان و سریع تر برسن به محلی که میخوان.پبشنهاد میکنم مقاله‌ای که امیرحسین با عنوان "اضافه کردن فایل json نقشه استان‌های ایران به متابیس" نوشته رو بخونید و لیست کامل این شهرها به علاوه دیتا طول و عرض جغرافیایی رو داخل‌ش ببینید.بررسی نتیجهالبته که تاثیر باگ‌‌های موجود روی فلوی قدیمی رو نمیشه نادیده گرفت اما بعد از همه تغییرات نتایج زیر به دست اومدن:این تغییرات منجر به این شد که میزان تماس کاربران با علت مشکل در ثبت آدرس بعد انجام این تغییرات تقریبا به صفر برسه. از طرف دیگه مشکلاتی که از نظر تجربه کاربری وجود داشت باعث شده بود که فلو ثبت آدرس کانورژن خوبی نداشته باشه که بعد از تغییراتی که دادیم کانورژن از ۴۰ درصد به ۹۰.۸۸ درصد رسیدیعنی این میزان تونستن فلو آدرس رو (بدون در نظر گرفتن درست یا غلط بودن آدرسشون) تکمیل‌ کنن.در نهایت، تغییرات اعمال شده در فلو ثبت آدرس فروشگاه دیجی‌شهر به وضوح نشان‌دهنده اهمیت توجه به جزئیات در طراحی تجربه کاربری است. با شناسایی و رفع چالش‌های موجود در فلو قدیمی، نه تنها توانستیم دقت و کارایی ثبت آدرس را افزایش دهیم، بلکه تجربه کلی کاربر را نیز بهبود بخشیدیم.در آیندهاز مواردی که میشه به این فلو اضافه کرد تا اون رو باز هم بهتر کنیم اینه که به جای اینکه از دکمه دیسیبل استفاده کنیم، به کاربر خطای درست رو نمایش بدیمدر مقاله بعدی سعی دارم در مورد استفاده نکردن از دکمه دیسیبل به خصوص در فرم ها بنویسم.این تجربه به ما آموخت که طراحی کاربرمحور و توجه به نیازهای واقعی کاربران می‌تواند به بهبود قابل توجهی در عملکرد و رضایت مشتری منجر شود. با ادامه‌ی این رویکرد و جمع‌آوری بازخوردهای بیشتر، می‌توانیم به ارتقاء مداوم تجربه کاربری در دیجی‌شهر ادامه دهیم و به عنوان یک فروشگاه آنلاین پیشرو در ارائه خدمات بهتر به مشتریان خود شناخته شویم. محمدرضا قربانی راد محمدرضا قربانی راد Sat, 25 Jan 2025 17:07:35 +0330 https://virgool.io/dgshahr/%D9%BE%D9%88%DA%A9%D8%A7%DB%8C%D9%88%DA%A9%D9%87-%D8%AF%D8%B1-%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%DA%A9%D8%AF-%D8%AA%D8%AE%D9%81%DB%8C%D9%81-%DB%8C%D8%A7-%DA%A9%D8%AF-%D8%AF%D8%B9%D9%88%D8%AA-vn7ofrct0fzl پوکایوکه در تجربه کاربری استفاده از کد تخفیف یا کد دعوت کدها میتونن بخش مهمی از فرآیند یا افزایش فروش و تعامل کاربران با محصول ما باشنکد تخفیف، کد کارت هدیه، کد معرف و کد امنیتیبا این حال، فرآیند استفاده این کدها میتونه پر از اشتباهات و ناامیدی برای کاربران باشه و حتی ممکنه باعث کاهش رضایت کاربر و گذاشتن تاثیر بد روی محصول ما بشه.از وارد شدن اشتباه کد توسط کاربر تا کدهای منقضی شده و یا دارای شرط استفاده مواردی هستن که کاربر ممکنه با اون‌ها مواجه بشهاینجا جاییه که پوکایوکه وارد میشه و قبل از اینکه به بحث اصلیمون یعنی بهبود تجربه کاربری در استفاده از کدها وارد بشیم، نیازه که بدونیم پوکایوکه چیه؟اگر قبلا با این تکنیک آشنایی دارین میتونین تا بخش "پوکایوکه در کدها" یا دایره آبی 🔵 اسکرول کنینخطاناپذیرسازی یا Poka-yoke چیه؟تکنیک پوکایوکه در کل این رو بیان میکنه که پیش از اینکه یک خطا یا نقص رخ بده، جلوی اون رو بگیریم تا در نهایت بتونیم میزان خطاهای غیر عمدی رو به صفر برسونیماز این تکنیک بیشتر در صنعت استفاده میشه اما شاید بشه اون رو در زندگی روزمره و در هر جایی دید و از اون استفاده کردپوکا: در فارسی یعنی؛ (خطاهای غیرعمدی) | یوکه: در فارسی یعنی؛ (پرهیز)پوکایوکه از پیشروی فرایند به مرحله بعدی تا زمانی که شرایط مناسب فراهم بشه جلوگیری می‌کنه و میتونه به صورت هشدار یا کنترل باشهپوکایوکه هشداری؛ برای جلوگیری از بروز خطا یا نقص‌های اضافی | پوکایوکه کنترلی؛ از پیشروی فرایند به مرحله بعدی بدون کنترل نهایی، جلوگیری می‌کنهبریم با هم یه سری مثال در استفاده از پوکایوکه در زندگی روزمره و بعد از اون در تجربه کاربری ببینیمپوکایوکه در زندگی روزمرهرایج‌ترین مثال از پوکایوکه طراحی دو شاخه تلفن هست که شاخه سومش(وسط) که ظاهراً بدون کاربرد میاد، باعث میشه شما نتونی به اشتباه تلفن رو به پریز برق بزنی و باعث خراب شدن اون بشیپوکایوکه در عمل توقف خودکار مایکرویو در زمانی که در اون رو باز می‌کنید و روشن شدن اون فقط در زمانی که در اون بسته باشهاگر درِ ماشین لباسشویی بسته نباشه روشن نمی‎‌شهمثال پوکایوکه در UX۱. یادآور فراموشی اتچ کردن فایل در نوشتن ایمیل جدید در جیمیلجیمیل - یادآور فراموشی اتچ کردن فایل در نوشتن ایمیل جدید گرفتن تایید دوباره در اکشن های حساس مثل پاک کردن فایل، دیلیت کردن اکانت و یا خارج شدن از اکانت و...ذخیره خودکار، امکان برگشت رو به عقب و برگشت به جلو ذخیره خودکار، امکان برگشت رو به عقب و برگشت به جلو در وردهشدار دادن به کاربر در زمانی که فایل شما ذخیره نشده در فیگماتصحیح خودکار در ورودی‌ها مثل: پذیرفتن شماره موبایل بدون صفر و یا با صفرفعال شدن دکمه پس از وارد کردن ورودی‌هایی که اجباری هستنیکپارچه کردن ورود و ثبت نام برای جلوگیری از خطای کاربر در به یاد آوردن اینکه قبلا تو وب‌سایت ثبت‌نام کرده یا نه؟محدود کردن کاراکتر‌های مورد قبول در ورودی‌هانمایش شاخص میزان سختی رمز عبور انتخاب شده توسط کاربراگر دوست دارین بیشتر در مورد پوکایوکه بدونین میتونین مقاله "کوتاه در مورد Poka-yoke" رو بخونینپوکایوکه در کدهایی که از سمت کاربر وارد می‌شناصولا ساختار کدهای تخفیف ترکیبی از حروف انگلیسی و اعداد و در برخی موارد کاراکترهای خاص هستندبا فرض اینکه کاربر ما به هر دلیلی نتونسته اون کد رو کپی کنه، خوندن و وارد کردن این کد میتونه براش چالش برانگیز باشهو این چالش با وجود اینکه محصول ما فارسی هست بدتر هم میشه! که در ادامه بهش میرسیمموضوع اصلی شباهت بین یه سری حروف انگلیسی، حروف فارسی، اعداد فارسی، اعداد انگلیسی و کاراکترهای خاص نسبت به هم در شرایط مختلفه۱. شباهت ۷ و v و Vمثال این مورد رو میتونید توی کد دعوت آبانک و کد تخفیف در اسنپ به وضوح ببیند شباهت ۷ و v و V به نظر شما این کد کدوم گزینه میتونه باشه؟ Vote؟ ۷ote؟حتی تو این متن هم تشخیصش سخته متوجه بشیم کاراکتر اول حرف وی انگلیسی (V) هست یا اینکه هفت در اعداد فارسی (۷) ؟؟؟۲. شباهت O و 0 و o (او بزرگ - صفر - او کوچک )۳. شباهت - و ـ (خط تیره - اندرلاین)۴. شباهت 8 و B (هشت - بی)۵. شباهت ۹ و q (نُه - کیو)۶. شباهت . و ۰ (نقطه - صفر)۷. شباهت w W و vv VV و ۷۷ (دبلیو - دوتا پی - هفتاد و هفت)۸. شباهت S و 5 (اس - پنج)۹. شباهت ۱ و l و I (یک - آی بزرگ - اِل کوچک)مثال این مورد رو میتونید توی کد دعوت بلوبانک ببینیدشباهت ۱ و 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هدیهحالا که تا اینجا اومدین از کد تخفیف یک میلیون تومنی زیر میتونین استفاده کنین و خوشحال میشیم اگر نظری در رابطه با تجربه استفاده از کد تخفیف و تجربه کاربری کلی فروشگاه دیجی شهر دارین اینجا یا تو پرسشنامه‌ای که آخر همین مقاله گذاشتم برامون بنویسینDGYEKMP تخفیف خرید از فروشگاه دیجی شهرلینک پرسشنامه تجربه کاربری فروشگاه دیجی شهرلینک فروشگاه دیجی شهرلینک خرید اقساطی از دیجی شهر محمدرضا قربانی راد محمدرضا قربانی راد Wed, 23 Oct 2024 18:19:38 +0330