منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · ترجمه: ۶ شهریور ۱۴۰۵ · زمان مطالعه: حدود ۸ دقیقه

نمونهٔ تعاملی (Interactive Prototypes) چیست؟

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

وایرفریم ایستا به شما می‌گوید صفحه چه شکلی است. نمونهٔ تعاملی می‌گوید کاربر چه می‌کند. و این دو خیلی کم با هم می‌خوانند.

تعریف

نمونهٔ تعاملی، «مدل کارآمدی از یک محصول یا اپلیکیشن است که به کاربر اجازه می‌دهد با قابلیت‌هایش تعامل کند، مثل اینکه نسخهٔ نهایی را به کار می‌برد.»

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

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

و کلمهٔ کلیدی در تعریف «مثل اینکه» است. نمونه یک وعده است، نه یک محصول — و دقیقاً به همین دلیل مفید است.

دو سطح وفاداری

نمونهٔ کم‌وفادار — طرح یا وایرفریم پایه با حداقل عناصر تعاملی، با تأکید بر ناوبری و جریان و نه جزئیات طراحی. و مناسب اعتبارسنجی مرحلهٔ اول و تکرار سریع است.

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

و تفاوت این دو در کیفیت نیست، در پرسشی است که جواب می‌دهند.

و نمونهٔ کم‌وفادار به پرسش «کاربر می‌فهمد کجا برود؟» جواب می‌دهد، و پروفادار به پرسش «کاربر این را دوست دارد؟»

و اگر پرسش اول را با نمونهٔ پروفادار بپرسید، کاربر دربارهٔ رنگ حرف می‌زند و شما دربارهٔ ناوبری چیزی یاد نمی‌گیرید.

شش گونهٔ نمونهٔ تعاملی

• - کم‌وفادار — جریان‌های کلیک‌پذیر که ناوبری پایه را اعتبارسنجی می‌کنند.
• - پروفادار — مدل کاملاً کارآمد و بصری‌صیقل‌خورده.
• - وایرفریم کلیک‌پذیر — میان‌وفادار، با عناصر تعاملی در چیدمان ایستا.
• - نمونهٔ کارکردی — به‌شدت تعاملی، با منطق پیچیده و دادهٔ زنده.
• - نمونهٔ افقی — پوشش گستردهٔ قابلیت‌ها، با عمق محدود در هر کدام.
• - و نمونهٔ عمودی — کارکرد عمیق در چند قابلیت حیاتی مشخص.

و دو مورد آخر تفکیک مهمی‌اند که کمتر به کار برده می‌شود.

و انتخاب میانشان یک پرسش است: می‌خواهید بدانید کاربر راهش را پیدا می‌کند، یا اینکه می‌تواند کار را تمام کند؟

و نمونهٔ افقی، مسئلهٔ معماری اطلاعات را پیدا می‌کند. و نمونهٔ عمودی، مسئلهٔ جریان کار را.

چهار فایده

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

کاهش هزینه. پیداکردن مسئلهٔ ناوبری در نمونه، به‌شکل معناداری ارزان‌تر از رفعش پس از توسعه است.

ارتباط بهتر. نمونه به طراح و توسعه‌دهنده و ذی‌نفع کمک می‌کند روی چشم‌انداز محصول هم‌راستا شوند.

رضایت کاربر. درگیرکردن زودهنگام کاربر، محصولی می‌سازد که هم کارآمد است و هم لذت‌بخش.

و فایدهٔ سوم بیشترین ارزش را دارد و کمترین ذکر می‌شود.

و دلیلش این است که نمونه، بحث را از سطح نظر به سطح مشاهده می‌برد.

یعنی جلسه‌ای که با «من فکر می‌کنم کاربر گیج می‌شود» شروع می‌شد، با «بیایید ببینیم» تمام می‌شود.

ابزارها

و منبع هشت ابزار را با کاربرد و سهولت و هزینه‌شان فهرست می‌کند.

فیگما (همکاری تیمی؛ آسان؛ رایگان و پرداختی) · اسکچ (طراحی رابط و تجربه؛ متوسط؛ پرداختی، فقط مک) · و اکسور آر‌پی (نمونه‌سازی پیچیده؛ پیشرفته؛ پرداختی).

و پروتو داتیو (نمونه‌سازی سریع موبایل؛ آسان؛ پرداختی) · بالسامیک (وایرفریم کم‌وفادار؛ آسان؛ پرداختی) · یو‌ایکس‌پین (پروفادار و سامانهٔ طراحی؛ متوسط؛ رایگان و پرداختی).

و مارول (نمونه‌سازی سریع و آزمون کاربر؛ آسان؛ رایگان و پرداختی) · و اوریگامی استودیو (طراحی تعامل موبایل؛ پیشرفته؛ رایگان، فقط مک).

رویکرد ترکیبی

و توصیهٔ منبع این است که طراح گونه‌ها را در طول توسعه ترکیب کند.

و ترتیبش این است: با کم‌وفادار برای اعتبارسنجی سریع شروع کنید.

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

و منطق پنهان این ترتیب، هزینهٔ تغییر است. هرچه نمونه وفادارتر شود، دور ریختنش سخت‌تر می‌شود — و دلبستگی به نمونه، همان اثری است که در طراحی مشارکتی هم دیده می‌شود.

نمونه‌سازی در واقعیت مجازی

و نمونهٔ واقعیت مجازی در محیط‌های سه‌بعدی کاملاً غوطه‌ور کار می‌کند و تفکر فضایی، ملاحظهٔ جای‌گذاری شیء، و ادراک عمق می‌خواهد.

و این با نمونهٔ دوبعدی صفحه‌محور — که به چیدمان تخت محدود است — تفاوت دارد.

و ابزارهایش یونیتی و آنریل انجین است، و آزمونش با هدست انجام می‌شود.

نمایش در نمونه‌کار

و بهترین‌روش‌های ارائهٔ نمونه در نمونه‌کار اینهاست:

• - پروژه را با بیان مسئلهٔ روشن قاب کنید.
• - فرایند طراحی را با طرح و وایرفریم نشان دهید.
• - از ویدئوی جاسازی‌شده، گیف، یا لینک تعاملی استفاده کنید.
• - تعامل‌های حیاتی را برجسته کنید، نه همهٔ قابلیت‌ها.
• - روایتی بدهید که استدلال طراحی را توضیح دهد.
• - نتیجهٔ آزمون کاربردپذیری و تکرارها را بگذارید.
• - مقایسهٔ پیش و پس را نشان دهید.
• - به نمونهٔ زنده لینک بدهید.
• - و با بینش‌های بازاندیشانه دربارهٔ آنچه یاد گرفتید تمام کنید.

روش‌های آزمون

و بازخورد را از این راه‌ها جمع کنید:

• - آزمون کاربردپذیری با کاربران واقعی.
• - پرسش‌های باز و پروتکل بلندگویی.
• - نظرسنجی برخط.
• - ردیابی تعامل با نقشهٔ حرارتی و ضبط نشست.
• - و جمع‌آوری ساختاریافتهٔ بازخورد، با تأکید بر بینش عمل‌پذیر.

سه چیزی که نمونه نمی‌تواند بگوید

این بخش افزودهٔ من است، چون نمونه ابزار قوی‌ای است و همین قدرت، حد آن را پنهان می‌کند.

یک: سرعت. نمونه همیشه سریع است، چون داده‌ای در کار نیست. و محصول واقعی معمولاً کند است.

و نتیجه‌اش این است که مسئله‌هایی که از انتظار می‌آیند — بی‌قراری، رهاکردن، دوباره‌زدن — در نمونه دیده نمی‌شوند.

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

و ساده‌ترین کار این است که نمونه را با بدترین دادهٔ ممکن پر کنید، نه با بهترین.

سه: استفادهٔ دومین بار. آزمون نمونه همیشه اولین برخورد کاربر است، پس فقط یادگیری‌پذیری را می‌سنجد.

و چیزهایی که کاربر روز پنجم آزارش می‌دهند — کلیک اضافه، تأییدیهٔ تکراری، نبود میان‌بر — در هیچ آزمون نمونه‌ای پیدا نمی‌شوند.

در بافت فارسی

یک: نمونه را با متن فارسی واقعی پر کنید. نمونه‌ای که با Lorem ipsum ساخته شده، دربارهٔ چیدمان راست‌به‌چپ چیزی نمی‌گوید.

و دلیلش این است که متن فارسی بلندتر و بلندسطرتر است — و همان دکمه‌ای که در انگلیسی جا می‌شد، در فارسی سرریز می‌کند.

دو: ابزارهای این فهرست همیشه در دسترس نیستند. بعضی سکوها با آی‌پی ایران کار نمی‌کنند و پرداخت برای بعضی‌شان ممکن نیست.

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

سه: «سرعتِ نمونه» اینجا گمراه‌کننده‌تر است. در بافتی که شبکه کند و نامطمئن است، فاصلهٔ نمونه و محصول واقعی بیشتر می‌شود.

و راه‌حلش این است که حالت انتظار و حالت خطا را هم در نمونه بگذارید — نه فقط مسیر موفق.

چهار: پروتکل بلندگویی اینجا کمتر جواب می‌دهد. بسیاری از کاربران در حین انجام کار حرف‌زدن را غیرطبیعی می‌بینند و ساکت می‌مانند.

و جایگزین عملی‌اش پرسیدن بعد از هر گام است — یعنی به‌جای «بگو چه فکر می‌کنی»، بپرسید «فکر کردی بعدش چه می‌شود؟»

جمع‌بندی

• - نمونهٔ تعاملی، مدل کارآمدی است که کاربر با قابلیت‌هایش تعامل می‌کند، مثل اینکه نسخهٔ نهایی را به کار می‌برد
• - دو سطح وفاداری: کم‌وفادار برای ناوبری و جریان · پروفادار برای تعامل پالوده و بازخورد ذی‌نفعان
• - و تفاوتشان در کیفیت نیست، در پرسشی است که جواب می‌دهند
• - شش گونه: کم‌وفادار · پروفادار · وایرفریم کلیک‌پذیر · کارکردی · افقی · عمودی
• - و افقی مسئلهٔ معماری اطلاعات را پیدا می‌کند، و عمودی مسئلهٔ جریان کار را
• - چهار فایده: تشخیص زودهنگام (پنج کاربر، ۸۵ درصد مسئله‌ها) · کاهش هزینه · ارتباط بهتر · رضایت کاربر
• - و ارتباط بهتر بیشترین ارزش را دارد: نمونه، بحث را از سطح نظر به سطح مشاهده می‌برد
• - ابزارها: فیگما · اسکچ · اکسور · پروتو داتیو · بالسامیک · یو‌ایکس‌پین · مارول · اوریگامی استودیو
• - ترتیب ترکیبی: کم‌وفادار، بعد کلیک‌پذیر یا افقی، بعد پروفادار و کارکردی — چون هرچه وفادارتر، دور ریختنش سخت‌تر
• - در واقعیت مجازی: تفکر فضایی و جای‌گذاری شیء و ادراک عمق · یونیتی و آنریل انجین
• - سه چیزی که نمونه نمی‌تواند بگوید: سرعت · دادهٔ واقعی · و استفادهٔ دومین بار
• - و در فارسی: با متن فارسی واقعی پر کنید · ساده‌ترین ابزار موجود · حالت انتظار و خطا را بگذارید · و به‌جای بلندگویی، بعد از هر گام بپرسید