https://virgool.io/feed/@helia.saeedii هلیا هستم :) یک علاقه‌مند به تجربه کاربری fa 2026-06-17 16:53:53 https://files.virgool.io/upload/users/168873/avatar/Ax1SQL.jpeg?height=120&width=120 https://virgool.io/@helia.saeedii https://virgool.io/ux-unicorn/%D9%86%D9%85%D8%A7%DB%8C%D8%B4-%D9%88%D8%B6%D8%B9%DB%8C%D8%AA-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-%D8%AF%D8%B1-%D8%B1%D8%A7%D8%A8%D8%B7-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-visibility-of-system-status-drjfzpnchihh تا‌به‌حال برایتان پیش آمده است که حین ثبت نام در سایتی، پس از ایجاد رمز عبور با خطای مستطیل قرمز رنگ مواجه شوید و اصلا متوجه نشوید چگونه می‌توان آن را درست کرد و فرآیند ثبت نام را ترک کنید؟ نکته اینجاست که کاربران اصولاً نسبت به یک محصول دیجیتال صبور نیستند و به راحتی سایت را بدون آن‌که ثبت نام خود را تکمیل کنند ترک خواهند کرد و این موضوع موجب از دست رفتن یک فرصت کسب و کاری برای شما خواهد شد. در نتیجه دریافت یک فیدبک مناسب از سیستم بسیار مهم است.ما در خارج از دنیای دیجیتال دائما در حال دریافت فیدبک هستیم، فشار دادن یک دکمه فیزیکی، صدایی که موتور دستگاهی ایجاد می‌کند و لامپی که نور تولید می‌کند. محصولات دیجیتال نیز باید به‌گونه‌ای طراحی شوند که دائما به کاربر بازخورد دهند و او را از وضعیت فعلی سیستم آگاه سازند.جیکوب نیلسن ۱۰ اصل کلی Interaction Desgin برای تست کاربردپذیری و بررسی نتایج تجربه کاربری در ارزیابی اکتشافی ایجاد کرده است که با اصطلاحات Heuristic Evaluation و Heuristic Analysis هم شناخته می‌شود. یکی از این اصول نمایش وضعیت سیستم یا Visibility of system status است.نمایش وضعیت سیستم - Visibility of system statusیک سیستم همواره باید کاربر را مطلع کند که در حال حاضر چه چیزی در جریان است و کاربر کجاست. نمایش وضعیت فعلی یک اصل مهم در طراحی سیستم‌های تعاملی است و به معنی داشتن یک ارتباط شفاف و مناسب با کاربر است که باعث می‌شود احساس کند بر سیستم کنترل دارد و این احساس کنترل باعث شکل‌گیری حس اعتماد در او خواهد شد.در اینجا می‌خواهم ۴ متد فیدبک بصری یا Visual feedback را معرفی کنم که برای نمایش وضعیت سیستم استفاده می‌شوند:۱) استفاده از Visual feedback برای نشان دادن این‌که کاربر کجاست یا در کدام قسمت از فرآیند قرار دارد من کجا هستم؟ هیچ فردی دوست ندارد گم شود، ولی گم شدن می‌تواند هم در دنیای واقعی رخ دهد و هم در دنیای دیجیتال. خیلی مهم است که کاربر بداند در کجای اپلیکیشن است. این آگاهی درنهایت باعث شکل‌گیری یک تجربه ناوبری خوب خواهد شد. در زیر نمونه‌ای از طراحی bottom navigation را می‌توانید مشاهده کنید:طراحی bottom bar navigation توسط Aurelien Salomonچند مرحله نیاز است تا فرآیندی تکمیل شوددانستن این‌که چند مرحله نیاز است تا فرآیندی تکمیل شود، باعث می‌شود تا کاربر بداند، چه میزان زمان نیاز دارد تا عملیاتی مانند ثبت نام به پایان برسد.طراحی توسط selecto۲) تأیید اکشن کاربر با Visual feedback خیلی مهم است که در تمام رویدادهای تعاملی بلافاصله فیدبک داشته باشیم. بازخورد فوری نشان‌دهنده این است که اپلیکیشن، اکشن کاربر را دریافت کرده و به کاربر این احساس را می‌دهد که قدرت دارد. علاوه بر این باعث می‌شود که کاربر کم‌تر دچار خطا شود (مثلا خطای دوبار کلیک کردن بر روی یک دکمه). طراحی button hover و active states توسط هلیا سعیدیعلاوه بر این Visual feedback باعث visible بودن و قابل فهم بودن طراحی خواهد شد. در زیر می‌توانید چند نمونه از طراحی‌های تعاملی من را که به Visual feedback اشاره دارند مشاهده کنید:طراحی تعاملی دکمه player توسط هلیا سعیدیطراحی search box توسط هلیا سعیدی۳) نمایش وضعیت سیستم با Visual feedbackنشان دادن این‌که سیستم busy است و درگیر انجام کاری استهنگامی که سیستم برای بارگذاری کامل به چند ثانیه زمان اضافی نیاز دارد، می‌توان فوراً به کاربر فیدبک داد. بسته به این‌که چه میزان زمان برای انتظار نیاز است، می‌توان از infinite loading indicator ها استفاده نمود که بیشتر مناسب عملیاتی است که کم‌تر از ۱۰ ثانیه زمان نیاز دارند.طراحی توسط Renatorenaهمچنین می‌توان برای عملیاتی که بیش از ۱۰ ثانیه زمان می‌برند از progress bar استفاده کرد. پیشنهاد می‌کنم مقاله 8 خطای شناختی معروف در طراحی Progress Bar را نیز برای درک بیشتر مطالعه کنید.طراحی progress bar توسط Allen Zhangبرای اپلیکیشن‌های موبایل این امکان وجود دارد که در مراحل اولیه بارگذاری از animated splash screens استفاده کرد. splash screen اگر به درستی دیزاین شده باشد می‌تواند در یک کاربر که برای اولین بار است از سیستم استفاده می‌کند احساس خوبی ایجاد ‌نماید و او را از دغدغه انتظار کشیدن دور ‌کند.در این‌جا پیشنهاد می‌شود که مقاله‌ی چک لیست طراحی Splash Screen نوشته شده توسط امیر تقی آبادی را برای درک بیشتر مطالعه کنید.طراحی splash screen توسط Hoang Nguyenمحتوا در حال بارگذاری استدر مواقعی که بارگذاری محتوا زمان می‌برد، پیشنهاد می‌شود که از نوع خاصی container استفاده شود به نام skeleton screen. این نوع محتوای موقتی برای کاهش زمان انتظار استفاده می‌شود و می‌بایست به‌محض این‌که داده‌ها در دسترس قرار گرفتند، با محتوای واقعی جایگزین گردد.طراحی skeleton loader توسط Ginney Wood۴) رویدادهای اتفاقی یا Triggered eventsنوتیفیکیشن‌ها / Indicatorهایک نوتیفیکیشن اثربخش هدفش این است که توجه کاربر را به یک رویداد جدید جلب کند. پیشنهاد می‌شود که در این‌جا از انیمیشن‌هایی خاص استفاده شود تا به جلب توجه کاربر کمک کند.طراحی توسط Aleksei Kipinپس می‌بایست با توجه به اصل Visibility of system status هر اکشن کاربر در یک تایم منطقی با Visual feedback مناسب خود بازخورد داده شود تا بتوان تجربه کاربری اثربخشی را برای کاربر رقم زد.منابعhttps://uxplanet.org/4-ways-to-communicate-the-visibility-of-system-status-in-ui-14ff2351c8e8 هلیا سعیدی هلیا سعیدی Wed, 06 May 2020 14:19:38 +0430 https://virgool.io/ux-unicorn/%D8%AA%D8%B3%D8%AA-fake-door-%DA%86%DB%8C%D8%B3%D8%AA-obcevnqqwyfm fake-door testingتا حالا شده روی یک گزینه کلیک کنین و با این پیام مواجه شید که «متأسفانه این فیچر در دسترس نیست؟». خب احتمالا ناراحت شدین و با خودتون گفتین واقعا چرا همچین گزینه ای رو در دسترس گذاشتن وقتی کار نمی‌کنه؟ شما با چیزی مواجه شدین به اسم تست Fake door. در این مقاله میخوام توضیح بدم که چجوری میشه از این تست استفاده کرد.تست fake door چجوری میتونه به فرآیند طراحی کمک کنه؟در تست fake door یا در تقلبی ایده شما می‌تونه خیلی سریع و راحت اعتبارسنجی شه ( حالا اون ایده می‌تونه یک محصول باشه، یک خدمت باشه یا حتی یک فیچر خاص). کاری که در این تست انجام میشه به این صورت هست، گزینه‌ای به کاربران نمایش داده می‌شه که در حقیقت وجود نداره. با این تست شما می‌تونید بدون نیاز به این‌که واقعا ایده خودتونو کد بزنین و پیاده‌سازی کنین، به‌راحتی میزان علاقمندی کاربرانتون را بسنجید. وقتی کاربر اکشنی انجام میده، مثلا (کلیک، ثبت نام و..) سیستم کاربر را متوجه می‌کنه که این فیچر، محصول یا خدمت هنوز در دسترس نیست. با سنجیدن و بررسی نمودن این‌که چه تعداد کاربر بالقوه نسبت به اون ایده خاص شما علاقه نشون دادن، می‌شه تصمیمات بهتر و اثربخش‌تری درمورد قدم بعدی فرآیند طراحی خودتون بگیرید. برای درک بهتر این موضوع قصد دارم مثالی بزنم از notino.ch که از بزرگترین خرده‌فروشی‌ها در حوزه زیبایی در اروپاست. این خرده‌فروشی در ۲۴ کشور فروشگاه داره و هدفش این بود که خیلی زود بتونه در مارکت‌های بیشتری خودش را توسعه بده. بیشتر سفارشات این خرده‌فروشی از طریق وبسایتش ثبت می‌شد، به همین خاطر هدفش این بود که روی بهینه‌سازی وبسایت تمرکز بیشتری داشته باشه. notino.ch خرده‌فروشیدر تابستان ۲۰۱۹ این کسب‌و‌کار به مارکت سوئیس وارد شد. ازونجایی‌ که کشور سوئیس چندین زبان رسمی داره، بنابراین هدف این شد که در راستای بهتر شدن عملکرد وبسایت، قابلیت چندزبانه را به آن اضافه کنند! قبل از اینکه ایده وبسایت چندزبانه به ذهن برسه تصمیم بر این شد که تست fake door انجام شه. ابتدای کار کمی ریسرچ انجام گرفت و دیتاهای بدست اومده بررسی شدند. نتایج گزارشات Google Data Studio اینطور نشون می‌داد که:چند کاربر notino.ch رو بازدید می‌کنند؟تنوع زبانی مرورگرشان به چه صورت هست؟تعداد خریدها چقدر است و conversion rate یا نرخ تبدیلشون به چه صورت هست؟تعداد خریدها و نرخ تبدیل – سپتامبر ۲۰۱۹ در این کیس کاری که انجام شد این بود که تنها یک switcher زبان در وبسایت قرار داده شد. وبسایت به زبان آلمانی بود و گزینه‌هایی که وجود داشت فرانسوی و ایتالیایی بود. با توجه به KPI های مورد نظر، هدف بررسی این بود که چند کلیک روی switcher می‌شود و درنهایت کدوم زبان توسط کاربر انتخاب می‌شه و آیا این کار تأثیری بر روی نرخ تبدیل خرید می‌گذارد یا خیر؟ دیتاهای بدست اومده نشان می‌دادن که کاربران با انواع دیگر زبان مرورگر، جزو اکثریت نبودند و نرخ تبدیلش آن‌ها هم زیاد نبود.چه کنیم که کاربران از fake door ناراحت نشوند؟یکی از مهم‌ترین نکاتی که در طراحی Fake door باید به خاطر داشت این است که به هیچ عنوان اجازه ندهیم کاربر از ما ناراحت یا ناامید شه. یکی از راه‌ها این هست که یک pop up در نظر گرفته شه تا هنگامی که کاربر روی Switcher کلیک کرد، یک تخفیف خرید به کاربر نمایش داده شه. البته notino.ch به این موضوع هم فکر کرد که ممکن هست کاربران فقط با هدف گرفتن تخفیف روی switcher کلیک کنند. پس خیلی سریع brainstorm انجام دادند تا بررسی شه که چه موارد دیگری میشه به افراد نمایش داد. نتیجه بر این شد که باید حقیقت به کاربر گفته شود. همونطور که در تصویر زیر می‌بینید طراحی نهایی به این صورت شد و برای تست قرار گرفت.در این‌جا می‌تونین نسخه اصلی modal window که به فرانسوی و ایتالیایی ترجمه شده بود رو مشاهده کنید.نتیجه بعد از دو هفته...تست بوسیله‌ Weblayer ها در در معرض قرار گرفت و از Exponea funnel برای بررسی نتایج استفاده شد. تست به مدت دو هفته انجام گرفت و هم‌زمان ترافیک وبسایت هم بسیار بالا بود.7.10.2019–21.10.2019نتیجه: در کل نرخ کلیک switcher فقط ۳.۵ درصد بود و مجموع کلیک‌ها بر روی فرانسوی و ایتالیایی برابر با مجموع کلیک‌های switcher نبود. چرا که بعضی افراد فقط به این خاطر بر روی switcher کلیک کردند تا گزینه‌ها را مشاهده کنند ولی درنهایت هیچ موردی رو انتخاب نکردند. اینطور به‌نظر میومد که عدم وجود زبان مورد نظر افراد، به هیچ عنوان مانع خرید آن‌ها نشده و حتی نرخ تبدیل خرید بعد از تست fake door بیشتر از میانگین هم شده. نتیجه بر این شد که اضافه نمودن زبان‌های مختلف به وبسایت notino.ch تعداد conversion یا تبدیل را بالا نمی‌برد. آماده‌سازی و لانچ این تست فقط یک روز و نیم زمان برد و در مقایسه با این‌که یک وبسایت چندزبانه طراحی و کدنویسی شود بسیار cost-effective و مقرون به صرفه بود.منابع:https://uxdesign.cc/how-we-run-a-fake-door-test-in-notino-ux-case-study-c7138940c1echttps://uxknowledgebase.com/fake-door-testing-48af0616185a هلیا سعیدی هلیا سعیدی Sat, 18 Apr 2020 11:44:02 +0430