هلیا سعیدی
هلیا سعیدی
خواندن ۵ دقیقه·۵ سال پیش

نمایش وضعیت سیستم در رابط کاربری (Visibility of system status)


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

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

جیکوب نیلسن ۱۰ اصل کلی 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
طراحی bottom bar navigation توسط Aurelien Salomon


  • چند مرحله نیاز است تا فرآیندی تکمیل شود

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

طراحی توسط selecto
طراحی توسط selecto


۲) تأیید اکشن کاربر با Visual feedback

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

طراحی button hover و active states توسط هلیا سعیدی
طراحی button hover و active states توسط هلیا سعیدی


علاوه بر این Visual feedback باعث visible بودن و قابل فهم بودن طراحی خواهد شد.

در زیر می‌توانید چند نمونه از طراحی‌های تعاملی من را که به Visual feedback اشاره دارند مشاهده کنید:


طراحی تعاملی دکمه player توسط هلیا سعیدی
طراحی تعاملی دکمه player توسط هلیا سعیدی


طراحی search box توسط هلیا سعیدی
طراحی search box توسط هلیا سعیدی


۳) نمایش وضعیت سیستم با Visual feedback

  • نشان دادن این‌که سیستم busy است و درگیر انجام کاری است

هنگامی که سیستم برای بارگذاری کامل به چند ثانیه زمان اضافی نیاز دارد، می‌توان فوراً به کاربر فیدبک داد. بسته به این‌که چه میزان زمان برای انتظار نیاز است، می‌توان از infinite loading indicator ها استفاده نمود که بیشتر مناسب عملیاتی است که کم‌تر از ۱۰ ثانیه زمان نیاز دارند.

طراحی توسط Renatorena
طراحی توسط Renatorena


همچنین می‌توان برای عملیاتی که بیش از ۱۰ ثانیه زمان می‌برند از progress bar استفاده کرد. پیشنهاد می‌کنم مقاله 8 خطای شناختی معروف در طراحی Progress Bar را نیز برای درک بیشتر مطالعه کنید.

طراحی progress bar توسط Allen Zhang
طراحی progress bar توسط Allen Zhang


برای اپلیکیشن‌های موبایل این امکان وجود دارد که در مراحل اولیه بارگذاری از animated splash screens استفاده کرد. splash screen اگر به درستی دیزاین شده باشد می‌تواند در یک کاربر که برای اولین بار است از سیستم استفاده می‌کند احساس خوبی ایجاد ‌نماید و او را از دغدغه انتظار کشیدن دور ‌کند.در این‌جا پیشنهاد می‌شود که مقاله‌ی چک لیست طراحی Splash Screen نوشته شده توسط امیر تقی آبادی را برای درک بیشتر مطالعه کنید.

طراحی splash screen توسط Hoang Nguyen
طراحی splash screen توسط Hoang Nguyen


  • محتوا در حال بارگذاری است

در مواقعی که بارگذاری محتوا زمان می‌برد، پیشنهاد می‌شود که از نوع خاصی container استفاده شود به نام skeleton screen. این نوع محتوای موقتی برای کاهش زمان انتظار استفاده می‌شود و می‌بایست به‌محض این‌که داده‌ها در دسترس قرار گرفتند، با محتوای واقعی جایگزین گردد.

طراحی skeleton loader توسط Ginney Wood
طراحی skeleton loader توسط Ginney Wood


۴) رویدادهای اتفاقی یا Triggered events

  • نوتیفیکیشن‌ها / Indicatorها

یک نوتیفیکیشن اثربخش هدفش این است که توجه کاربر را به یک رویداد جدید جلب کند. پیشنهاد می‌شود که در این‌جا از انیمیشن‌هایی خاص استفاده شود تا به جلب توجه کاربر کمک کند.

طراحی توسط Aleksei Kipin
طراحی توسط Aleksei Kipin


پس می‌بایست با توجه به اصل Visibility of system status هر اکشن کاربر در یک تایم منطقی با Visual feedback مناسب خود بازخورد داده شود تا بتوان تجربه کاربری اثربخشی را برای کاربر رقم زد.




منابع

https://uxplanet.org/4-ways-to-communicate-the-visibility-of-system-status-in-ui-14ff2351c8e8

Heuristic Evaluation
هلیا هستم :) یک علاقه‌مند به تجربه کاربری
یک تیم پر انرژی در تلاش برای تولید محتوای ناب و جدید در حوزه طراحی و توسعه‌ی تجربه و رابط کاربری.
شاید از این پست‌ها خوشتان بیاید