سپنتا پویا — طراح محصول

چهار پرسش و ارزان‌ترین چیزی که می‌تواند به هرکدام جواب بدهد، از طرح کاغذی تا نسخهٔ با محتوای واقعی
نویسندگان: Rikke Friis Dam و Yu Siang Teo · منبع: بنیاد طراحی تعامل (IxDF) · ترجمهٔ آزاد: سپنتا پویا · تیر ۱۴۰۵ · زمان مطالعه: حدود ۱۱ دقیقه

مرحلهٔ چهارم تفکر طراحی؛ نمونه‌سازی (Prototype)

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

در فرایند پنج‌مرحله‌ای تفکر طراحی، مرحلهٔ چهارم — نمونه‌سازی (Prototype) — جایی است که ایده‌ها از ذهن بیرون می‌آیند و شکلِ لمس‌پذیر به خود می‌گیرند. تیم طراحی نسخه‌هایی زودهنگام، ارزان و کوچک‌مقیاس از محصول (یا از بخش‌های خاصی از آن) می‌سازد تا مسائلی را که در آن پنهان شده کشف کند. نمونه‌سازی دربارهٔ ساختنِ محصولِ نهایی نیست؛ دربارهٔ ساختنِ چیزی است که بتوان از آن یاد گرفت.

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

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

یادمان باشد که پنج مرحلهٔ تفکر طراحی پشت‌سرِ هم و خطی نیستند؛ بیشتر شبیه پنج «حالتِ» فکری‌اند که می‌شود بارها و بارها به آن‌ها بازگشت. نمونه‌سازی و آزمایش اغلب دست‌در‌دستِ هم پیش می‌روند: هر پروتوتایپی که می‌سازید بهانه‌ای است برای آزمودن، و هر آزمونی بینشی می‌دهد که یا محصول را بهتر می‌کند یا مسئله را از نو می‌نویسد.

تیم براون، مدیرعامل شرکت آیدیو (IDEO)، جملهٔ درخشانی دربارهٔ این مرحله دارد: پروتوتایپ‌ها «ما را کُند می‌کنند تا در نهایت تندتر برویم». با صرفِ کمی وقت برای ساختِ نمونه، از اشتباه‌های پرهزینه — مثل پیچیده‌کردنِ زودهنگامِ یک ایده یا دنبال‌کردنِ ایده‌ای ضعیف برای مدتی طولانی — جلوگیری می‌کنیم. به‌جای اینکه محصولِ کامل را جلوی کاربر بگذاریم و منتظر شکست بمانیم، نسخه‌ای ساده‌شده می‌سازیم، رفتار کاربر را در برابرِ یک عنصرِ طراحیِ مشخص مشاهده و ثبت می‌کنیم، و عملکردش را می‌سنجیم.

انواع نمونه‌سازی

پروتوتایپ‌ها طیف گسترده‌ای دارند: از یک طرحِ خط‌خطی روی دستمال کاغذی تا نسخه‌ای نرم‌افزاری که تقریباً از محصولِ واقعی تشخیص‌ناپذیر است. برای ساده‌کردنِ ماجرا، معمولاً آن‌ها را در دو خانوادهٔ بزرگ دسته‌بندی می‌کنیم: نمونه‌های کم‌وفا (Low-Fidelity) و نمونه‌های پروفا / پرجزئیات (High-Fidelity). «وفاداری» (Fidelity) در اینجا یعنی میزان شباهتِ پروتوتایپ به محصولِ نهایی — چه از نظر ظاهر و چه از نظر عملکرد.

نمونهٔ کم‌وفا (Low-Fidelity)

نمونهٔ کم‌وفا: طرح روی کاغذ با فقط بخشی که آزموده می‌شود، بدون رنگ و قلم نهایی، و دورانداختنی
نمونهٔ کم‌وفا، عمداً خام — نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

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

  • - استوری‌بورد (Storyboard): روایتِ تصویریِ تجربهٔ کاربر، قاب‌به‌قاب، مثل یک کمیک.
  • - طرح‌زدن (Sketching): کشیدنِ سریعِ ایده روی کاغذ. البته بیل باکستون، از پیشگامانِ این حوزه، معتقد است طرح‌زدن دقیقاً «پروتوتایپ» نیست بلکه گامی حتی مقدماتی‌تر و ارزان‌تر است؛ اما هدفش همان است: بیرون‌کشیدنِ ایده از ذهن.
  • - مرتب‌سازی کارت (Card Sorting): چیدنِ مفاهیم روی کارت‌های جدا برای فهمِ منطقِ ذهنیِ کاربر و ساختارِ اطلاعات.
  • - جادوگرِ اوز (Wizard of Oz): کاربر فکر می‌کند با سیستمی خودکار کار می‌کند، اما در واقع پشتِ پرده یک انسان پاسخ‌ها را می‌دهد — راهی هوشمندانه برای آزمودنِ تجربه پیش از ساختِ فناوریِ واقعی.
ساختِ یک پروتوتایپ کاغذیِ اپلیکیشن با دست و خودکار
© Rodolphe Courtier، لایسنس CC BY-SA 2.0

مزایای نمونهٔ کم‌وفا:

  • - سریع و ارزان ساخته می‌شود؛ در چند دقیقه یا چند ساعت به نتیجه می‌رسید.
  • - امکانِ تکرار و آزمونِ فوری می‌دهد؛ همان‌جا اصلاحش می‌کنید و دوباره امتحان می‌کنید.
  • - چون دورانداختنی است، به آن دل نمی‌بندید و راحت‌تر تغییرش می‌دهید.
  • - با کمترین تلاش، نمایی کلی از کلِ محصول به دست می‌دهد.
  • - هر کسی، فارغ از تجربه و تخصص، می‌تواند بسازدش.
  • - ذهنیتِ «تفکر طراحی» و اقدام‌محوری را در تیم تقویت می‌کند.

معایب نمونهٔ کم‌وفا:

  • - نبودِ واقع‌گرایی، اعتبارِ آزمون را پایین می‌آورد؛ رفتارِ کاربر با کاغذ همان رفتارش با محصولِ واقعی نیست.
  • - برای کاربرانی با شرایطِ خاص (مثلاً محدودیت‌های جسمی یا زمینه‌های استفادهٔ ویژه) ممکن است مناسب نباشد.
  • - کنترلِ کاربر روی تعامل محدود است.
  • - کاربر بیشتر باید نحوهٔ استفاده را توصیف یا وانمود کند تا اینکه واقعاً آن را تجربه کند.

نمونهٔ پروفا / پرجزئیات (High-Fidelity)

نمونهٔ پرجزئیات: متن و دادهٔ واقعی، تعامل واقعی، و هزینه‌اش که دل‌بستگی به ساخته‌شده است
نمونهٔ پرجزئیات و هزینه‌اش — نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

نمونهٔ پرجزئیات آن‌قدر به محصولِ نهایی نزدیک است که هم در ظاهر و هم در عملکرد شبیه آن به نظر می‌رسد. مثلاً یک مدلِ پلاستیکیِ سه‌بُعدی با قطعاتِ متحرک، یا طرحی نرم‌افزاری که در ابزارهایی مانند اسکچ (Sketch) یا ایلستریتور ساخته شده و کاربر می‌تواند تقریباً مثلِ نسخهٔ واقعی با آن کار کند.

مزایای نمونهٔ پرجزئیات:

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

معایب نمونهٔ پرجزئیات:

  • - ساختش به‌مراتب زمان‌برتر است.
  • - کاربر ممکن است به‌جای محتوا و کارکرد، درگیرِ جزئیاتِ ظاهری و سطحی شود.
  • - وقتی برای ساختش وقتِ زیادی گذاشته‌اید، دیگر دلتان نمی‌آید تغییرش دهید؛ همان دل‌بستگی‌ای که دشمنِ اصلاح است.
  • - پروتوتایپ‌های نرم‌افزاری گاهی چنان کامل به نظر می‌رسند که این توهم را می‌سازند که محصول آماده است.
  • - هر تغییری زمانِ زیادی می‌بَرد و پروژه را عقب می‌اندازد — برخلافِ روش‌های کم‌وفا که در چند دقیقه یا ساعت قابلِ اصلاح‌اند.

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

چهار راهنمای عملی برای نمونه‌سازی

فارغ از اینکه سراغِ کدام نوع پروتوتایپ می‌روید، چهار اصلِ ساده کیفیتِ کارتان را بالا می‌برد:

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

وفاداری را از پرسش بیرون بکشید، نه از سلیقه

این بخش افزودهٔ مترجم است، چون «کم‌وفا یا پرجزئیات؟» تقریباً همیشه بر اساس ابزار موجود یا عادت تیم تصمیم گرفته می‌شود، در حالی که جوابش به یک چیز بستگی دارد: چه پرسشی را می‌خواهید جواب بدهید؟

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

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

نمونه‌ای که به پروژهٔ توسعه تبدیل می‌شود

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

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

مشکل این نیست که کد هدر می‌رود؛ مشکل این است که هزینهٔ تغییر مسیر بالا می‌رود. نمونه‌ای که سه روز وقت گرفته، به‌سختی دور انداخته می‌شود — و از آن لحظه، تیم به‌جای اینکه بپرسد «یافته‌ها چه می‌گویند؟» شروع می‌کند به دفاع از چیزی که ساخته. برای همین می‌گویند نمونه باید دورانداختنی باشد: ارزانی نمونه، آزادی تصمیم شماست.

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

نمونه‌سازی برای رابط فارسی

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

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

متن فارسی واقعی، نه متن لاتین جای‌گیر. این از راست‌به‌چپ هم مهم‌تر است: طول واژه‌های فارسی، ارتفاع خط لازم، و نبود حروف بزرگ باعث می‌شود چیدمانی که با متن انگلیسی زیبا بود، با متن فارسی بشکند. برچسب‌های واقعی را در نمونه بگذارید، حتی اگر خام است — «پیگیری وضعیت سفارش» جای دیگری از «Track» می‌گیرد.

داده‌های واقعی ایرانی. نمونه را با نام‌های فارسی، شمارهٔ موبایل با پیش‌شمارهٔ درست، مبلغ به ریال یا تومان با جداکنندهٔ هزارگان، و تاریخ شمسی پر کنید. جدولی که با «۱٫۲۵۰٫۰۰۰ تومان» و تاریخ شمسی پر شده، عرض ستون‌های کاملاً متفاوتی از نسخهٔ نمایشی انگلیسی می‌خواهد — و این را فقط وقتی می‌فهمید که داده واقعی باشد.

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

جمع‌بندی

  • - نمونه‌سازی، ایده‌ها را ارزان و سریع به چیزی لمس‌پذیر تبدیل می‌کند تا پیش از سرمایه‌گذاریِ سنگین، مسائلشان آشکار شود.
  • - دو خانوادهٔ اصلی: کم‌وفا (ساده، فوری، دورانداختنی) و پرجزئیات (نزدیک به محصولِ نهایی).
  • - هر کدام معامله‌ای دارد: کم‌وفا سریع تغییر می‌کند اما واقع‌گرا نیست؛ پرجزئیات واقع‌گراست اما تغییرش گران و کُند است.
  • - کم‌وفا برای مراحلِ آغازین، پرجزئیات برای مراحلِ پایانی که پرسشِ آزمون مشخص شده.
  • - چهار اصل: بساز، سریع بساز، بدان چه را آزمایش می‌کنی، و کاربر را جلوی چشم نگه دار.
  • - خروجیِ این مرحله، ورودیِ مرحلهٔ بعد است: ایده‌پردازی ایده می‌دهد، نمونه‌سازی آن را می‌آزماید، و آزمون دوباره مسئله را روشن‌تر می‌کند.
  • - وفاداری نمونه را پرسش تعیین می‌کند نه سلیقه: برای سنجش ساختار کاغذ کافی است، برای حس تعامل نمونهٔ تعاملی لازم است.
  • - هرچه به طرح‌تان مطمئن‌تر باشید نمونه باید خام‌تر باشد؛ نمونهٔ تمیز و رنگی نقد را خفه می‌کند چون «تمام‌شده» به نظر می‌رسد.
  • - نمونه باید دورانداختنی بماند: ارزانی نمونه همان آزادی تصمیم شماست. سقف زمانی بگذارید و سناریوی آزمون را پیش از ساختن بنویسید.
  • - برای رابط فارسی، نمونه را از همان اول راست‌به‌چپ و با متن و دادهٔ واقعی فارسی بسازید — نه با متن جای‌گیر لاتین.

منبع

این نوشته ترجمه‌ای آزاد است از مقالهٔ Stage 4 in the Design Thinking Process: Prototype نوشتهٔ Rikke Friis Dam و Yu Siang Teo، منتشرشده در وب‌سایت بنیاد طراحی تعامل (Interaction Design Foundation — IxDF).

متن نسخهٔ اصلی تحت لایسنس CC BY-NC-SA 3.0 منتشر شده و این ترجمه نیز با ذکر منبع و برای استفادهٔ غیرتجاری ارائه می‌شود. تصاویر: نمودارها و آیکون‌ها © Teo Yu Siang و بنیاد طراحی تعامل (CC BY-NC-SA 3.0)، عکس پروتوتایپ کاغذی © Rodolphe Courtier (CC BY-SA 2.0) و تصویر ابتدایی © Angeline Litvin (CC0). تصویرِ کاورِ نسخهٔ اصلی لایسنسِ باز ندارد و در مقالهٔ اصلی قابل‌مشاهده است.

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

تصاویر: چهار نمودار این صفحه از نو و به‌دست مترجم کشیده شده‌اند. تصویر ابتدای صفحه در نسخهٔ اصلی یک عکس استوکِ استعاری بود (© Angeline Litvin، CC0) — یعنی تزئین، نه سند — و جایش نموداری آمده که حرفِ همان بند را می‌زند: پرسش را اول بنویس، چون پرسش تعیین می‌کند اجازه داری چقدر بسازی. تصویر نخست همان نمودار غیرخطی پنج مرحله است که برای مقالهٔ پنج مرحله کشیده شده بود و اینجا دوباره به کار رفته، نه اینکه نسخهٔ تازه‌ای ساخته شود. عکس مستندِ ساختِ یک نمونهٔ کاغذی با دست عمداً بازکشیده نشده: تصویر دستی که در حال ساختن است چیزی را می‌گوید که نمودار نمی‌تواند، و با لایسنس و ذکر منبع خودش باقی مانده است. متن کامل انگلیسی به‌همراه همهٔ تصاویر در لینک زیر در دسترس است.

مشاهدهٔ مقالهٔ اصلی
سپنتا پویا

مترجم: سپنتا پویا

طراح ارشد محصول. مقالات تخصصی UI/UX را با حفظ ساختار و لحن نسخهٔ اصلی به فارسی برمی‌گردانم.

دربارهٔ من

در این مقاله

  • - نمونه‌سازی به چه کار می‌آید؟
  • - انواع نمونه‌سازی
  • - نمونهٔ کم‌وفا
  • - نمونهٔ پرجزئیات
  • - کم‌وفا یا پرجزئیات؟
  • - چهار راهنمای عملی
  • - وفاداری را از پرسش بیرون بکشید
  • - نمونه‌ای که به پروژه بدل می‌شود
  • - نمونه‌سازی برای رابط فارسی
  • - جمع‌بندی

برچسب‌ها

  • تفکر طراحی
  • نمونه‌سازی
  • UX
  • ترجمه