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

طراحی تعامل (IxD) چیست؟

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

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

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

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

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

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

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

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

گفت‌وگو یعنی هر کنش، یک پاسخ

اگر بخواهم بُعد پنجم را به یک تصویر ساده تقلیل بدهم، این است:

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

شش پرسشی که طراح تعامل می‌پرسد

این شش سؤال — که ریشه‌شان به راهنماهای Usability.gov برمی‌گردد — چک‌لیست خوبی برای مرور هر صفحه‌اند:

• - ۱. کاربر با ماوس، انگشت یا قلم، چه کنش‌های مستقیمی می‌تواند انجام دهد؟
• - ۲. ظاهر عناصر — رنگ، شکل، اندازه — چطور کارکردشان را به کاربر اعلام می‌کند؟ (این دقیقاً همان بحث افوردنس است.)
• - ۳. پیام‌های خطا به کاربر امکان اصلاح می‌دهند یا فقط اعلام شکست می‌کنند؟
• - ۴. بعد از هر کنش کاربر، چه بازخوردی داده می‌شود؟
• - ۵. اندازهٔ عناصر برای تعامل معقول است؟ (دکمه‌ای که روی نمایشگر بزرگ عالی است، ممکن است زیر انگشت شست غیرقابل‌زدن باشد.)
• - ۶. از قالب‌های آشنا و استاندارد استفاده شده؟ (نوآوری در جای اشتباه، فقط هزینهٔ یادگیری است.)

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

طراحی تعامل بخشی از تجربهٔ کاربری است

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

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

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

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

طراح تعامل عملاً چه کار می‌کند؟

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

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

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

چند اشتباه رایج

این بخش افزودهٔ من است و در مطلب اصلی نیامده، اما هر چهار مورد را بارها در پروژه‌های واقعی دیده‌ام:

• - طراحی برای بهترین حالت. اینترنت سریع، داده‌های کامل، کاربر متمرکز. حالت خالی، حالت خطا و حالت کند شدن هم بخشی از طراحی تعامل‌اند، نه کارهای باقی‌مانده برای آخر پروژه.
• - انیمیشن به‌جای بازخورد. انیمیشن اگر معنا نداشته باشد، فقط تأخیر است. بازخورد باید بگوید «چه شد»، نه فقط «چیزی دارد اتفاق می‌افتد».
• - نادیده‌گرفتن بُعد سوم. تصمیم‌هایی که پشت مانیتور ۲۷ اینچ گرفته می‌شوند و روی گوشی در آفتاب امتحان نمی‌شوند.
• - نوآوری در الگوهای پایه. اسکرول، بازگشت و جست‌وجو را دوباره اختراع نکنید؛ سرمایهٔ نوآوری‌تان را برای مسئلهٔ اصلی محصول نگه دارید.

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

جمع‌بندی

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