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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

حالت‌ها: جایی که تعامل واقعاً ساخته می‌شود

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

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

و صفحه‌ها هم همین‌طورند: هر صفحه‌ای که داده نشان می‌دهد، دست‌کم چهار حالت دارد — خالی، در حال بارگذاری، پرِ داده، و خطا. اگر این چهار را نکشیده باشید، کسی دیگر بعداً به‌شکل تصادفی طراحی‌شان می‌کند، معمولاً در کد و بدون فکر.

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

زمان: بُعدی که کمتر از همه طراحی می‌شود

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

• - تا حدود ۱۰۰ هزارم ثانیه: کاربر حس می‌کند سامانه بی‌درنگ واکنش داده. بازخورد لمس و فشردن دکمه باید در این بازه باشد.
• - تا حدود یک ثانیه: جریان فکر کاربر پیوسته می‌ماند، هرچند تأخیر را حس می‌کند. در این بازه به نشانگر نیازی نیست.
• - بیش از یک ثانیه: باید نشانه‌ای بدهید که کاری در جریان است، وگرنه کاربر دوباره کلیک می‌کند — و در فرم‌های پرداخت، دوباره‌کلیک می‌تواند یعنی دو تراکنش.
• - بیش از حدود ده ثانیه: توجه کاربر می‌رود. اینجا نشانگر ساده کافی نیست؛ باید بگویید چقدر مانده یا اجازه دهید کاربر کار دیگری بکند و بعد خبرش کنید.

دو نکتهٔ عملی که از این آستانه‌ها بیرون می‌آید. اول، انیمیشن باید کوتاه باشد. انتقالی که نیم‌ثانیه طول بکشد بار اول جذاب است و بار بیستم مانع؛ محدودهٔ متعارف برای انتقال‌های رابط، حدود ۱۵۰ تا ۳۰۰ هزارم ثانیه است. دوم، سرعتِ ادراک‌شده مهم‌تر از سرعت واقعی است. نشان‌دادن فوری چارچوب صفحه و پرکردن تدریجی محتوا، همان زمان انتظار را کوتاه‌تر حس می‌کند — و در بازارِ ما با اینترنت ناپایدار، این تفاوت بیشتر از هر بهینه‌سازی دیگری به چشم می‌آید.

جمع‌بندی

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