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

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

پایه‌های نظری: تست کاربر و پروتوتایپ چیست؟

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

طبق تعریف دانشنامه ویکی‌پدیا: «پروتوتایپ یا نمونه اولیه، یک مدل یا ساختار اولیه از یک محصول است که برای تست کردن یک مفهوم یا فرآیند ساخته می‌شود. پروتوتایپ معمولاً برای ارزیابی طرح توسط طراحان و کاربران نهایی مورد استفاده قرار می‌گیرد.»

در دنیای طراحی تجربه کاربری، پروتوتایپ‌ها به سه دسته کم‌جزئیات (Low-Fidelity)، میان‌جزئیات (Mid-Fidelity) و پرجزئیات (High-Fidelity) تقسیم می‌شوند. برای یک تست کاربر اثربخش، لزوماً نیازی نیست کدهای پیچیده زده شده باشد، بلکه میزان تعاملی بودن (Interactive بودن) طرح است که ارزش تست را تعیین می‌کند.

یاکوب نیلسن (Jakob Nielsen)، یکی از شناخته‌شده‌ترین متخصصان حوزه کاربردپذیری و از بنیان‌گذاران گروه Nielsen Norman، در این باره می‌گوید: «تست کردن با ۵ کاربر به شما اجازه می‌دهد تا بیش از ۸۵ درصد از مشکلات کاربردپذیری یک محصول را کشف کنید. نیازی به هزینه‌های سنگین و تست‌های طولانی نیست؛ ساختار درست و مهندسی‌شده پروتوتایپ، کلید موفقیت است.»

قدم اول: سناریو را بنویسید، نه راهنمای استفاده!

بزرگ‌ترین اشتباه طراحان در جلسات تست کاربر این است که به کاربر می‌گویند: «روی این دکمه کلیک کن و بعد فلان فرم را پر کن». این تست نیست، دیکته گفتن است!

شما باید برای کاربر یک سناریوی واقعی (Task-based Scenario) تعریف کنید. به عنوان مثال، اگر در حال تست یک فروشگاه اینترنتی مبتنی بر وردپرس و ووکامرس هستید، سناریو باید این‌گونه باشد: «تصور کنید تولد دوستتان است و می‌خواهید یک کتاب در حوزه مدیریت برای او بخرید و آن را با کادوپیچی پست کنید. این فرآیند را در سایت انجام دهید.»

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

قدم دوم: پاک‌سازی مسیرها و مدیریت «بن‌بست‌ها»

یک پروتوتایپ، محصول نهایی نیست؛ بنابراین طبیعی است که همه دکمه‌های آن کار نکنند. اما برای یک تست موفق، باید مسیر سناریوی کاربر را کاملاً هموار کنید.

  1. حذف نقاط گمراه‌کننده: دکمه‌ها یا لینک‌هایی که به سناریوی فعلی ربطی ندارند و هنوز طراحی نشده‌اند را غیرفعال یا پنهان کنید تا کاربر وارد مسیرهای فرعی و بدون سرانجام نشود.
  2. طراحی صفحات خطا و بن‌بست: اگر کاربر به هر دلیلی کلیکی انجام داد که خارج از مسیر سناریو بود، به جای قفل شدن برنامه، یک پیام ساده یا دکمه «بازگشت» برای او نمایش دهید.

آموزش ایکس دی

قدم سوم: استفاده از داده‌های واقعی به جای لورم ایپسوم (Lorem Ipsum)

وقتی کاربر با متن‌های ساختگی و بی‌معنی مثل «لورم ایپسوم» یا قیمت‌های عجیبی مثل «۱۱۱,۱۱۱ تومان» مواجه می‌شود، حس حضور در یک محیط واقعی را از دست می‌دهد. این موضوع تمرکز او را به هم می‌زند.

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

چک‌لیست نهایی قبل از شروع جلسه تست

قبل از اینکه لینک پروتوتایپ را باز کنید و کاربر پشت سیستم بنشیند، این ۴ مورد را حواستان باشد:

  • تست لود شدن و سرعت: مطمئن شوید پروتوتایپ روی دستگاه تست (موبایل یا لپ‌تاپ) به سرعت لود می‌شود. کندی ابزارهای طراحی نباید روی تجربه کاربر اثر بگذارد.
  • فول‌اسکرین کردن طرح: منوها و ابزارهای خود نرم‌افزار طراحی (مثل منوهای فیگما یا ابزارهای ادوبی) را مخفی کنید تا کاربر حس کند با یک اپلیکیشن یا سایت واقعی کار می‌کند.
  • بررسی نمایش Hotspotها: در ابزارهایی مثل فیگما، وقتی کاربر جایی اشتباه کلیک می‌کند، مناطق قابل کلیک به صورت آبی چشمک می‌زنند. برای تست‌های اولیه بهتر است این قابلیت (Hint) را غیرفعال کنید تا کاربر خودش با حدس و گشت‌وگذار دکمه‌ها را پیدا کند.