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

طرح دستی (Sketch) در طراحی تجربه کاربری چیست؟

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

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

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

طرح دستی چیست؟

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

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

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

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

طرح دستی یا نمونهٔ اولیه

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

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

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

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

پنج شکل، و چند عادت دست

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

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

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

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

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

در هر مرحلهٔ فرایند

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

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

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

از دفترچه تا نمونه‌کار

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

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

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

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

کجا طرح دستی کم می‌آورد

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

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

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

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

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

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

در بافت فارسی

چند نکته برای تیم‌هایی که برای کاربر فارسی‌زبان طراحی می‌کنند.

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

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

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

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

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

جمع‌بندی

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

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

اگر بخواهم یک پرسش بگذارم: آخرین باری که پیش از باز کردن ابزار طراحی، سه گزینهٔ متفاوت روی کاغذ کشیدید، کی بود؟