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

فرایند طراحی تعامل (Interaction Design Process) چیست؟

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

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

تعریف

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

و سه کلمهٔ «نیاز، هدف، رفتار» با هم فهرست نیستند — سه لایهٔ متفاوت‌اند.

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

و این سه اغلب یکی نیستند. و همین فاصله، دلیل وجود پژوهش است.

پنج مرحله

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

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

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

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

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

و مرحلهٔ دوم گران‌ترین مرحله است و کمترین وقت را می‌گیرد.

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

پنج بُعد طراحی تعامل

و جیلیان کرامپتون اسمیت چهار بُعد را معرفی کرد، و کوین سیلور پنجمی را اضافه کرد.

• - کلمه‌ها — برچسب دکمه‌ها و متن رابط باید معنادار و ساده باشند.
• - بازنمایی‌های بصری — تصویر، تایپوگرافی و آیکون.
• - شیء یا فضای فیزیکی — ابزار تعامل (ماوس، ترک‌پد، انگشت) و بافت کاربر.
• - زمان — انیمیشن، ویدئو، صدا، و ردیابی پیشرفت کاربر.
• - و رفتار — اینکه کاربر چطور کنش می‌کند و محصول چطور پاسخ می‌دهد.

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

و به همین دلیل، رفتار را نمی‌شود جداگانه طراحی کرد — فقط می‌شود چهار بُعد دیگر را تغییر داد و دید رفتار چه می‌شود.

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

چهره‌ها

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

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

و چهره‌های دیگری که منبع نام می‌برد: دان نورمن («پدر تجربهٔ کاربری») · ریکه فریس دام · و مدس سوگارد (بنیان‌گذاران بنیاد طراحی تعامل).

روش‌ها و فن‌ها

تمرین‌های پژوهش کاربر: پرسش‌گری بافتی در محیط واقعی · مصاحبه و نظرسنجی · و ساختن پرسونا بر پایهٔ الگوهای رفتاری.

فن‌های نقشه‌کشی پنج‌تاست.

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

و این پنج فن، پنج مقیاس متفاوت‌اند و نه پنج جایگزین.

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

دو نمونه

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

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

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

بازخورد کاربر

و آزمون کاربردپذیری چرخهٔ تکرارشونده‌ای دارد: آزمون، تحلیل، بهبود.

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

دسترس‌پذیری

و کارهای کلیدی‌اش هشت‌تاست.

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

همکاری

و طراح تعامل با طراح رابط و تجربه کار می‌کند تا مطمئن شود طراحی بصری از تعامل‌های موردنظر پشتیبانی می‌کند.

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

تطبیق با چابک

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

و سامانهٔ طراحی پیمانه‌ای · آزمون منظم با حلقهٔ بازخورد · و سازمان‌دهی اسپرینتی برای بهبود تدریجی.

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

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

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

فرایند خطی نیست

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

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

یک: از نمونه به تحلیل. نمونه اغلب نشان می‌دهد مسئله را اشتباه تعریف کرده‌اید — و این خبر خوبی است، چون ارزان‌ترین جای فهمیدنش همین‌جاست.

دو: از طراحی به پژوهش. وسط طراحی به پرسشی می‌رسید که در پژوهش نپرسیده‌اید. و یک تماس ده‌دقیقه‌ای با یک کاربر، از یک هفته بحث تیمی سریع‌تر است.

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

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

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

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

در بافت فارسی

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

و در بازاری که پژوهش کمّی گران و کم‌دقیق است، سه مشاهدهٔ میدانی بیشتر از سه هزار پاسخ نظرسنجی می‌ارزد.

دو: بُعد سوم — شیء و فضا — اینجا متفاوت است. بیشتر کاربران با گوشیِ نه‌چندان تازه و شبکهٔ نامطمئن کار می‌کنند.

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

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

و همین یعنی حالت انتظار را باید طراحی کنید، نه اینکه فرضش کنید نادر است.

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

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

یعنی در همان مصاحبه‌های مرحلهٔ اول، به کلمه‌هایی که کاربر به کار می‌برد دقت کنید.

جمع‌بندی

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