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

ماکاپ (Mockup) چیست؟

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

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

تعریف

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

این مدل هم‌زمان وجه زیبایی‌شناختی و وجه کارکردی پروژه را مرئی می‌کند.

کارکرد دومش اهمیتی برابر دارد: ساختن فهم مشترک میان طراح، ذی‌نفع و کاربر.

ماکاپ رنگ، متن و شکل دارد — همان چیزهایی که وایرفریم عمداً کنارشان می‌گذارد.

در عوض چیزی ندارد که نمونهٔ اولیه دارد: پاسخ به عمل کاربر.

چهار مصنوع، و تفاوتشان

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

این چهار مصنوع معمولاً پشت سر هم فهرست می‌شوند، انگار پله‌های یک نردبان‌اند. ماکاپ روی نردبان جا نمی‌گیرد.

جای ماکاپ روی دو محور

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

دو چیز مستقل در این مسیر تغییر می‌کند. محور اول، وضوح بصری است: اینکه مصنوع چقدر شبیه محصول نهایی به‌نظر می‌رسد.

محور دوم، تعامل‌پذیری است: اینکه چقدر به عمل کاربر پاسخ می‌دهد.

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

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

گوشهٔ چهارم این صفحه کمتر دیده می‌شود، اما وجود دارد: نمونهٔ کاغذی که تعامل را شبیه‌سازی می‌کند و هیچ‌چیز بصری‌اش قطعی نیست.

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

خطای رایج دقیقاً همین‌جا رخ می‌دهد. تیم ماکاپ را پرجزئیات‌تر می‌کند، به این امید که پرسش‌های تعاملی هم جوابی بگیرند.

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

چرا ماکاپ می‌سازند

فرانک لوید رایت، معمار، جمله‌ای دارد که ارزش این مصنوع را در یک تصویر جمع می‌کند: «روی میز نقشه‌کشی می‌شود از پاک‌کن استفاده کرد؛ در کارگاه ساختمانی از پتک.»

فایده‌های ماکاپ از همان نسبت بیرون می‌آید:

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

یک نمونهٔ شناخته‌شده هم هست: ویندوز ۸. مایکروسافت منوی استارت را برداشت و صفحهٔ استارت را جایش گذاشت، و کاربران قدیمی را از خود راند.

آزمون گسترده‌تر کاربر با ماکاپ می‌توانست مسائل کاربردپذیری آن تغییر را زودتر آشکار کند.

دو سطح جزئیات

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

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

در مقابل واقع‌نما نیست، می‌تواند مسائل پیچیده را بیش از حد ساده کند، و از کاربر می‌خواهد جاهای خالی را در ذهنش پر کند.

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

هزینه‌اش هم روشن است: کند ساخته می‌شود، کند تکرار می‌شود، کیفیت ادراک‌شده را باد می‌کند، و به‌خاطر وقتی که رویش رفته در برابر تغییر مقاومت می‌سازد.

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

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

چه وقت به کار می‌آید

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

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

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

بهترین‌روش‌ها

• - ۱. پژوهش کاربر را به کار بگیرید: طراحی باید روی نیاز، ترجیح و نقاط درد واقعی بنشیند، نه روی سلیقه. پژوهش کاربر ورودی این کار است.
• - ۲. رقبا را بخوانید: ببینید چه چیزی در بازار کار می‌کند و از دام‌های تکراری فاصله بگیرید.
• - ۳. فناوری را بشناسید: طرح باید در محدودیت‌های فنی موجود شدنی باشد.
• - ۴. اول وایرفریم بسازید: اسکلت چیدمان پیش از طراحی بصری بسته می‌شود.
• - ۵. متمرکز بمانید: یک مفهوم پخته را ارائه دهید، نه چند گزینهٔ نیم‌بند.
• - ۶. شیوهٔ ارائه را جدی بگیرید: یادداشت‌های توضیحی برای ذی‌نفع مفیدند و برای کاربرِ آزمون سوگیری می‌سازند.

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

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

ابزار

مواد ماکاپ می‌تواند کاملاً ساده باشد: قلم و کاغذ و لوازم‌التحریر، وایت‌برد و ماژیک، کیت‌های آمادهٔ کارت و قالب، چاپ سه‌بعدی، و آجرهای لگو.

در سمت نرم‌افزار، پنج ابزار بیش از بقیه دیده می‌شوند. Sketch سادگی و اکوسیستم گستردهٔ افزونه دارد و روی مک‌اواس کار می‌کند.

Figma هم‌کاری هم‌زمان را روی وب و روی هر سیستم‌عاملی ممکن می‌کند. Justinmind کتابخانهٔ رابط و ساخت نمونهٔ تعاملی را کنار هم می‌گذارد.

Adobe XD سراغ تعامل و جزئیات پیشرفته‌تر می‌رود و Balsamiq روی طراحی دیجیتال دقیق تمرکز دارد.

ماکاپ در کار تیمی

در توسعهٔ چابک، ماکاپ تصمیم‌های آغازین را هدایت می‌کند، بازخورد کاربر را زود جمع می‌کند، و مفهوم را میان تیم‌ها روشن نگه می‌دارد.

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

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

همان مصنوع به بازاریابی و برنامه‌ریزی منابع هم خوراک می‌دهد.

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

چه چیزی را یک قاب ثابت قطعی می‌کند و چه چیزی را نه

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

ماکاپ دو بُعد دارد: عرض و ارتفاع. محور سومی که رابط واقعی دارد — زمان — در آن غایب است.

هرچه در دو بُعد جا می‌شود، همین‌جا قطعی می‌شود:

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

هرچه بُعد زمان می‌خواهد، در ماکاپ قطعی نمی‌شود:

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

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

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

دلیلش این است که خودِ کاربر ترتیب قاب‌ها را انتخاب نمی‌کند؛ شما انتخاب کرده‌اید. پس آنچه می‌بینید تأیید فرض خودتان است، نه آزمودنش.

نتیجهٔ عملی: تعداد قاب‌ها را زیاد نکنید تا نبودِ زمان را جبران کنید. از یک جایی به بعد، نمونهٔ تعاملی ارزان‌تر از بیست قاب ثابت درمی‌آید.

در بافت فارسی

یک: تایپوگرافی فارسی فقط در ماکاپ قطعی می‌شود. وایرفریم با مستطیل خاکستری کار می‌کند و مستطیل خاکستری قلم ندارد.

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

دو: عدد فارسی و لاتین را در یک قاب کنار هم بگذارید. قیمت، شماره تلفن و تاریخ، سه جایی هستند که این دو نظام رقم به هم می‌رسند.

یک ماکاپ با ارقام واقعی نشان می‌دهد که ترکیب «۱۲۰٬۰۰۰ تومان» و SKU لاتین، در یک سطر چه شکلی می‌شود. پر کردن قاب با متن نمونهٔ انگلیسی، این مسئله را کاملاً پنهان می‌کند.

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

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

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

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

جمع‌بندی

• - ماکاپ: مدل بصری برای ارائه، نمایش، آزمون و پالایش مفهوم — با رنگ و متن و شکل
• - کارکرد دومش ساختن فهم مشترک میان طراح، ذی‌نفع و کاربر است
• - چهار مصنوع: طرح دستی برای ایده · وایرفریم برای چیدمان · ماکاپ برای طراحی بصری · نمونهٔ اولیه برای تعامل
• - دو محور مستقل: وضوح بصری و تعامل‌پذیری — ماکاپ محور اول را بالا برده و محور دوم را دست‌نخورده گذاشته
• - پس پرداخته‌ترکردن ظاهر، ذره‌ای تعامل‌پذیری اضافه نمی‌کند
• - فایده‌ها: آزمایش پیش از توسعه · کاهش اصلاح گران · هم‌کاری و تکرار · راهنمای توسعه‌دهنده
• - ماکاپ کم‌جزئیات: ارزان و سریع و دعوت‌کنندهٔ نقد، اما غیرواقع‌نما و ساده‌ساز
• - ماکاپ پرجزئیات: قابل اتکا برای آزمون، اما کند و مقاوم در برابر تغییر
• - کاربردها: آزمون کاربردپذیری زودهنگام · آزمودن قلم و رنگ و بافت · آزمون A/B · ارائه به کارفرما · بازنمایی متحرک
• - بهترین‌روش‌ها: پژوهش کاربر · خواندن رقبا · شناخت فناوری · وایرفریم اول · تمرکز بر یک مفهوم · و شرح برای ذی‌نفع نه برای کاربر آزمون
• - قطعی می‌کند: تناسب و فاصله · سلسله‌مراتب بصری · تایپوگرافی · کنتراست · طول برچسب · لحن
• - قطعی نمی‌کند: ترتیب · حالت‌های میانی · حس سرعت · بازخورد حرکتی · مسیر فوکوس
• - آزمون تفکیک: اگر پرسش با «بعدش چه می‌شود؟» شروع شود، ماکاپ جوابش را ندارد
• - در فارسی: تایپوگرافی فقط اینجا قطعی می‌شود · عدد فارسی و لاتین را کنار هم بگذارید · تکلیف آینه‌کردن آیکون‌ها را همین‌جا روشن کنید · و فهرست تصمیم‌های باز را کنار قاب بنویسید