تست پروتوتایپ فیگما با کاربر واقعی؛ آموزش قدم به قدم

پروتوتایپ فیگما یا HTML خود را قبل از برنامهنویسی با کاربر واقعی تست کنید. آموزش ساخت تست پروتوتایپ در یوزر تستینگ، از لینک فیگما تا خواندن نتیجه.
طراحی تمام شده، پروتوتایپ در فیگما کلیکخور است و تیم فنی منتظر است کار را شروع کند. این دقیقا همان لحظهای است که تست پروتوتایپ بیشترین ارزش را دارد. هر مشکلی که الان پیدا شود با چند دقیقه کار در فیگما درست میشود. همان مشکل بعد از برنامهنویسی یعنی چند روز کار، چند جلسه و یک نسخه جدید.
در این آموزش قدم به قدم نشان میدهیم چطور در یوزر تستینگ یک تست پروتوتایپ فیگما بسازید، لینکش را برای کاربران بفرستید و نتیجه را بخوانید. اگر پروتوتایپ شما HTML است، آن هم پشتیبانی میشود و حتی یک امتیاز اضافه دارد که پایینتر توضیح میدهیم.
چرا قبل از برنامهنویسی تست بگیریم
تیم طراحی معمولا آنقدر با محصول درگیر است که دیگر نمیتواند آن را با چشم یک کاربر تازه ببیند. دکمهای که برای شما واضح است، برای کسی که اولین بار صفحه را میبیند ممکن است اصلا دیده نشود. تست پروتوتایپ این فاصله را با کمترین هزینه نشان میدهد.
سه دلیل که تیمها را به سمت تست پروتوتایپ میبرد:
- هزینه اصلاح پایین است. جابهجا کردن یک دکمه در فیگما چند دقیقه کار است. همین تغییر بعد از انتشار اپ یعنی یک چرخه کامل توسعه و تست و انتشار.
- بحثهای تیم با داده تمام میشود. به جای اینکه سر جای منو نظر بدهید، میبینید کاربر واقعی آن را پیدا میکند یا نه.
- با اطمینان بیشتر به تیم فنی تحویل میدهید. طرحی که تست شده، کمتر در میانه توسعه دوباره باز میشود.
دو راه برای وارد کردن پروتوتایپ
لینک فیگما
اگر پروتوتایپ را در فیگما ساختهاید، کافی است لینک خود پروتوتایپ را بدهید. دقت کنید که لینک فایل طراحی با لینک پروتوتایپ فرق دارد. در فیگما وارد حالت نمایش پروتوتایپ شوید، روی Share بزنید و Copy link را انتخاب کنید. دسترسی لینک را هم طوری تنظیم کنید که هر کسی با لینک بتواند آن را ببیند، وگرنه شرکتکنندهها پشت صفحه ورود فیگما میمانند.
آپلود HTML
اگر پروتوتایپ را با کد ساختهاید یا از ابزاری خروجی HTML گرفتهاید، میتوانید یک فایل HTML یا یک فایل zip شامل HTML و فایلهای همراهش را تا ۲۵ مگابایت آپلود کنید. یوزر تستینگ آن را میزبانی میکند و نیازی به سرور جداگانه ندارید.
امتیاز بزرگ این روش این است که جلسه هر شرکتکننده روی پروتوتایپ HTML به طور خودکار ضبط میشود. بعد از تست میتوانید دقیقا ببینید هر نفر کجا کلیک کرد، کجا مکث کرد و کجا راه را گم کرد.
ساخت تست پروتوتایپ، قدم به قدم
- تست جدید بسازید. در پنل، تست پروتوتایپ را انتخاب کنید و یک نام برایش بنویسید. این نام فقط برای خود شماست.
- منبع پروتوتایپ را انتخاب کنید. لینک فیگما را بچسبانید یا فایل HTML را آپلود کنید.
- وظیفه را بنویسید. این مهمترین قسمت تست است. توضیح میدهیم چطور.
- قاب نمایش را انتخاب کنید. اگر طراحی برای اپ یا سایت موبایل است، قاب موبایل را بزنید تا پروتوتایپ داخل قاب گوشی نشان داده شود. برای طراحی دسکتاپ، قاب دسکتاپ را انتخاب کنید.
- پیامها و ظاهر را تنظیم کنید. در پلن حرفهای میتوانید پیام خوشآمد و پایان تست را خودتان بنویسید و در پلن سازمانی لوگو و رنگ برند خودتان را روی صفحه تست بگذارید.
- منتشر کنید و لینک را بفرستید. هر تست یک لینک اختصاصی دارد و با یک کلیک میتوانید لینک کوتاهش را هم بسازید تا در پیامک یا شبکههای اجتماعی راحتتر فرستاده شود.
وظیفه را درست بنویسید
هر تست پروتوتایپ یک وظیفه دارد. شرکتکننده وظیفه را میخواند، با پروتوتایپ کار میکند و در آخر یکی از دو گزینه را میزند: «پیدا کردم» یا «نتوانستم پیدا کنم».
وظیفه خوب یک موقعیت واقعی را توصیف میکند و کلمات خود رابط را لو نمیدهد. مقایسه کنید:
| وظیفه ضعیف | وظیفه بهتر |
|---|---|
| روی دکمه افزودن به سبد بزنید | یک هدفون بیسیم زیر سه میلیون تومان پیدا کنید و آماده خرید کنید |
| وارد تنظیمات اعلانها شوید | پیامکهای تبلیغاتی اپ اذیتتان میکند و میخواهید قطعشان کنید |
| صفحه پرداخت اقساطی را باز کنید | میخواهید بدانید این گوشی را میشود قسطی خرید یا نه |
اگر چند مسیر مختلف را میخواهید بسنجید، برای هر مسیر یک تست جداگانه بسازید. این کار نتیجه هر وظیفه را تمیز و جدا نگه میدارد و شرکتکننده هم با یک تست کوتاه زودتر کارش تمام میشود.
نتیجه را چطور بخوانیم
وقتی پاسخها جمع شد، در بخش تحلیل این اطلاعات را میبینید:
- نرخ تکمیل وظیفه: چند درصد شرکتکنندهها گفتند وظیفه را انجام دادند.
- تعداد منصرفشدهها: کسانی که اعلام کردند نتوانستند پیدا کنند.
- جدول شرکتکنندهها: نتیجه و زمان هر نفر. زمانهای خیلی طولانی حتی وقتی نتیجه موفق است، نشان میدهد مسیر برای کاربر سخت بوده.
- ضبط جلسهها: برای پروتوتایپ HTML، با یک کلیک جلسه هر شرکتکننده را تماشا میکنید.
یک قاعده سرانگشتی: اگر نرخ تکمیل زیر ۷۰ درصد است، قبل از تحویل به تیم فنی، طراحی را بازبینی کنید. اگر بالای ۸۰ درصد است ولی زمانها طولانی است، مسیر کار میکند ولی میشود کوتاهترش کرد.
چند نکته برای تست بهتر
- پروتوتایپ را خودتان یک بار از اول تا آخر بروید. لینک شکسته یا صفحهای که به جایی وصل نیست، تست را خراب میکند و شرکتکننده فکر میکند خودش اشتباه کرده.
- تست را کوتاه نگه دارید. یک وظیفه روشن که پنج دقیقه طول بکشد، خیلی بیشتر از یک تست طولانی پاسخ کامل میگیرد.
- با کاربر واقعی تست بگیرید. لینک را برای مشتریهای فعلی، دنبالکنندهها یا کاربران خبرنامه بفرستید. درباره تعداد مناسب، اینجا مفصل نوشتهایم.
- تست اولین کلیک را هم در نظر بگیرید. اگر فقط میخواهید بدانید کاربر از کجا شروع میکند، تست اولین کلیک سریعتر و سادهتر است.
شروع کنید
ساخت تست در یوزر تستینگ رایگان است و پلن رایگان ۵۰ پاسخ برای کل حساب شما دارد؛ برای اولین تست پروتوتایپ کاملا کافی است. همه چیز فارسی و راستچین است و پرداخت پلنهای بالاتر هم ریالی انجام میشود.
برای دیدن امکانات کامل به صفحه تست پروتوتایپ سر بزنید، راهنمای ساخت تست پروتوتایپ را بخوانید یا پلنها را در صفحه تعرفهها مقایسه کنید.
مطالعه بعدی

پرسشنامه تجربه کاربری؛ ساخت نظرسنجی کاربران سایت و اپ
با ۱۴ نوع سوال، صفحه خوشآمد و حتی تست ۵ ثانیه داخل پرسشنامه، نظرسنجی تجربه کاربری بسازید. آموزش ساخت پرسشنامه آنلاین کاربران در یوزر تستینگ.

ویجت نظرسنجی سایت؛ ساخت NPS و فرم بازخورد بدون کدنویسی
نظرسنجی NPS و فرم بازخورد را با یک خط کد روی سایت بگذارید و زمان و صفحه نمایشش را خودتان تعیین کنید. آموزش ساخت ویجت نظرسنجی سایت در یوزر تستینگ.

نصب هیت مپ و ضبط جلسه روی سایت؛ جایگزین فارسی هاتجر
هیت مپ و ضبط رفتار کاربران را در چند دقیقه روی وردپرس، شاپیفای یا Next.js نصب کنید. آموزش کامل ابزار ضبط جلسه یوزر تستینگ، جایگزین فارسی هاتجر.