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

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

نمونهٔ اولیهٔ کم‌جزئیات (Low-Fidelity Prototype) چیست؟

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

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

تعریف

نمونهٔ اولیهٔ کم‌جزئیات، بازنمایی ساده‌شده و مرحلهٔ‌آغازینِ یک محصول یا رابط است که کارکرد را بر زیبایی بصری مقدم می‌کند.

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

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

گونه‌ها

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

چه وقت

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

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

فایده‌ها

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

دو: هم‌ترازی ذی‌نفعان. بازنمایی بصری به غیرطراح‌ها کمک می‌کند مفهوم را بفهمند.

سه: کاهش هزینه. حل زودهنگام مسائل ناوبری و گردش‌کار، جلوی اصلاح‌های گران بعدی را می‌گیرد.

چهار: کاویدن خلاقانه. تکرارِ سریع و کم‌هزینه، رویکردهای آزمایشی‌تر را تشویق می‌کند.

محدودیت‌ها

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

کم‌جزئیات در برابر پرجزئیات

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

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

کم‌جزئیات در برابر پرجزئیات، و مرز آزمون‌پذیری
نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

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

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

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

چرا زشتی نمونه یک ویژگی است، نه نقص

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

و منطقش این است: هرچه نمونه پرداخته‌تر باشد، بازخوردی که می‌گیرید محافظه‌کارتر می‌شود.

و دلیلش دو چیز است. یک: خودِ طراح. کسی که سه روز روی چیدمانی وقت گذاشته، دیگر نمی‌خواهد بشنود که چیدمان غلط است.

دو: خودِ کاربر. کاربر وقتی چیزی تمام‌شده می‌بیند، ادب می‌کند و پیشنهاد بنیادی نمی‌دهد.

و در برابرِ یک طرح دستیِ کج، همان کاربر راحت می‌گوید «این کل مسیر اشتباه است» — چون معلوم است هیچ‌کس برایش زحمت نکشیده.

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

سه چیزی که کم‌جزئیات می‌آزماید و سه چیزی که نمی‌آزماید

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

و می‌آزماید: ترتیب مراحل یک کار، نام‌گذاری و دسته‌بندی، و اینکه کاربر اصلاً هدف صفحه را می‌فهمد یا نه.

و نمی‌آزماید: خوانایی و سلسله‌مراتب بصری، حسِ سرعت و پاسخ‌دهی، و اعتماد.

و دلیل تفکیک روشن است: دستهٔ اول به ساختار تصمیم بستگی دارد و دستهٔ دوم به اجرا.

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

در بافت فارسی

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

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

دو: طول متن فارسی را همین‌جا بسنجید. برچسب فارسی معمولاً از معادل انگلیسی‌اش بلندتر است.

و راهش این است که روی نمونهٔ کاغذی متن واقعی بنویسید، نه «متن نمونه» — وگرنه سرریز متن را در مرحلهٔ کد کشف می‌کنید.

سه: ذی‌نفع ایرانی طرح دستی را جدی نمی‌گیرد. در جلسهٔ فارسی، کاغذ مچاله «کار انجام‌نشده» خوانده می‌شود.

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

چهار: «نشان بده، توضیح نده» اینجا سود مضاعف دارد. در تیم‌هایی که تصمیم شفاهی گرفته می‌شود، هر ایده در گفتار متفاوت فهمیده می‌شود.

و یک ماکت زشت روی میز، مرجعِ مشترک می‌سازد — چیزی که همه به یک چیز اشاره کنند.

چهار مسئلهٔ نمونهٔ کم‌جزئیات در بافت ایران
نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

جمع‌بندی

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

منبع

این نوشته «بازنویسی آزاد» است از مطلب What are Low-Fidelity Prototypes? در وب‌سایت بنیاد طراحی تعامل (Interaction Design Foundation — IxDF؛ بدون نام نویسندهٔ مشخص). مفاهیم پایه — تعریف نمونهٔ کم‌جزئیات به‌عنوان بازنمایی ساده‌شده و مرحلهٔ‌آغازین محصول یا رابط با تقدم کارکرد بر زیبایی بصری، و کاغذ و قلم یا نرم‌افزار ساده به‌عنوان ابزار، و دیدن کارکردهای اصلی و مسیرهای کاربر پیش از صرف منابع بر نسخهٔ پرداخته؛ هشت گونه یعنی طرح دستی و استوری‌بورد و کاغذ یادداشت چسبان و نمونهٔ کاغذی و نقش‌بازی‌کردن و نمونه‌سازی جادوگر آز و نمونهٔ لگویی و وایرفریم دیجیتال با توضیح هرکدام؛ زمان استفاده یعنی مراحل آغازین طراحی برای آزمودن و تکرار سریع ایده بدون سرمایه‌گذاری سنگین و ارزشش برای کاویدن چند مفهوم و گرفتن بازخورد اولیه و اعتبارسنجی کارکرد اصلی؛ چهار فایده یعنی تشخیص زودهنگام مسئله و هم‌ترازی ذی‌نفعان و کاهش هزینه و کاویدن خلاقانه با توضیح هرکدام؛ محدودیت‌ها یعنی نداشتن عناصر بصری و تعاملی دقیق و برداشت اشتباه از محصول نهایی و نگرفتن بازخورد دقیق دربارهٔ تعامل پیچیده و ساده‌سازی افراطی مسائل پیچیده و کم‌اثر بودن در ارائه به مدیران ارشد؛ جدول شش‌سطری مقایسهٔ کم‌جزئیات و پرجزئیات در تمرکز و زمان ساخت و هزینه و سهولت تغییر و دقت بازخورد و خطر دلبستگی طراح؛ نقطهٔ گذار یعنی شناسایی و حل مسائل اصلی کاربردپذیری و محکم بودن تعامل‌های بنیادی و گردش اصلی؛ شش بهترین‌روش یعنی ساده و متمرکز نگه‌داشتن و گذاشتن چیدمان پایه و تعامل کلیدی و سفر کاربر و یادداشت توضیحی و پیچیده‌نکردن با جزئیات بصری و اولویت‌دادن کارکرد اصلی و به‌روزرسانی منظم با بازخورد و گرایش به عمل یعنی نشان‌دادن به‌جای توضیح‌دادن؛ و فهرست مواد و ابزار — از این منبع گرفته شده. متن فارسی، ساختار بخش‌ها و همهٔ تحلیل‌ها کاملاً مستقل نوشته شده‌اند.

متن مطلب اصلی تحت هیچ لایسنس بازی منتشر نشده است؛ به همین دلیل اینجا ترجمهٔ کلمه‌به‌کلمه ارائه نشده و متن کامل انگلیسی (به‌همراه همهٔ منابع مرتبط) در لینک زیر در دسترس است.

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

تصاویر: هیچ تصویری از مطلب اصلی بازتولید نشده است. هر سه نمودار این صفحه طراحی مستقل مترجم است.

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

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

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

دربارهٔ من

در این مقاله

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

برچسب‌ها

  • نمونهٔ اولیه
  • کم‌جزئیات
  • وایرفریم
  • UX
  • ترجمه