طراحی تعاملی — مبانی و مفاهیم

«طراحی تعاملی» (Interaction Design و به اختصار IxD)، طراحی ابزارهای کاربردی به منظور ایجاد ارتباط و تعامل با افراد است. این نوع طراحی ریشه در طراحی گرافیکی و طراحی وب دارد اما با گذشت زمان، در یک قلمرو موضوعی مختص به خود گسترش یافته است. طراحان تعاملی، به غیر از کار با تصاویر و متون، وظیفه ایجاد تمام اجزای موجود در صفحه‌نمایش را بر عهده دارند. این اجزاء، شامل تمام قسمت‌هایی است که کاربران اعمال حرکت دادن، کلیک کردن، ضربه زدن یا تایپ کردن را بر روی آن‌ها انجام می‌دهند. به طور کلی، وظیفه فراهم کردن یک محیط برای ایجاد ارتباطات و تعاملاتی که کاربر در هنگام استفاده از یک برنامه تجربه می‌کند، بر عهده طراحان تعاملی است.

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

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

طراحی تعاملی از دیدگاه «انجمن طراحی تعاملی» (Interaction Design Association)، به صورت زیر تعریف می‌شود:

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

فیلم مجموعه آموزش طراحی رابط کاربری و تجربه کاربری UI/UX – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

طراحی تعاملی، با طراحی اولین صفحه به منظور نگه داشتن اطلاعات بیشتر نسبت به یک «کپی ایستا» (Static Copy) متولد شد. هر چیزی مانند یک دکمه، یک لینک یا یک فرم را می‌توان به عنوان بخشی از طراحی تعاملی در نظر گرفت. در طی چند دهه گذشته، تعدادی کتاب در زمینه تشریح جنبه‌های گوناگون طراحی تعاملی منتشر شده‌اند که به بررسی روش‌های تقاطع و هم‌پوشانی این نوع از طراحی با «طراحی تجربه کاربری» (User Experience Design) می‌پردازند.

طراحی تعاملی در جهت تسهیل تعاملات بین افراد و محیط اطرافشان تکامل یافته است. برخلاف طراحی تجربه کاربری که برای تمام جنبه‌های «سمت کاربر» (User-Facing) یک سیستم به کار برده می‌شود، طراحان تعاملی، تنها بر روی تعاملات خاص بین کاربران و صفحه‌نمایش متمرکز علاقه‌مند هستند. البته، چیزهای مختلف در عمل هیچ‌گاه به اندازه کافی واضح و مشخص نیستند.

روش‌های رایج در طراحی تعاملی

با اینکه طراحی تعاملی، تعداد بسیار زیادی از انواع مختلف وب اپلیکیشن‌ها، اپلیکیشن‌های تلفن همراه و سایت‌های گوناگون را پوشش می‌دهد، روش‌های معینی وجود دارند که تمام این دست از طراحان بر آن‌ها تکیه می‌کنند. برخی از رایج‌ترین روش‌های طراحی تعاملی عبارت‌اند از: «طراحی هدف‌گرا» (Goal-Driven Design)، «کاربردپذیری» (Usability)، «پنج بعد» طراحی تعاملی (The Five Dimensions)، «روانشناسی شناختی» (Cognitive Psychology) و «دستورالعمل‌های رابط انسانی» (Human Interface Guidelines).

طراحی هدف‌گرا

طراحی هدف‌گرا، با انتشار کتاب «The Inmates Are Running the Asylum»، نوشته «آلن کوپر» (Alan Cooper) در سال 1999 به محبوبیت رسید. کوپر، طراحی هدف‌گرا را به صورت یک طراحی با اولویت حل مشکلات تعریف می‌کند. به عبارت دیگر، برخلاف روش‌های قدیمی طراحی که تنها روی جنبه‌های تکنولوژیک ابزارهای گوناگون تمرکز داشتند، طراحی هدف‌گرا، در وهله اول بر روی رفع نیازها و جلب رضایت کاربران نهایی تمرکز می‌کند.

فیلم آموزش اصول روانشناسی طراحی UI و UX (رابط کاربری و تجربه کاربری) در فرادرس

کلیک کنید

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

فرآیند طراحی هدف‌گرا، نیاز به پنج تغییر در نحوه تفکر طراحان تعاملی دارد:

1. ابتدا طراحی و سپس برنامه‌نویسی: به عبارت دیگر، طراحی هدف‌گرا، به جای شروع با ملاحظات فنی، با در نظر گرفتن نحوه تعامل کاربران و چگونگی ظاهر تعاملات شروع می‌شود.
2. جدا کردن وظایف مربوط به طراحی از برنامه‌نویسی: این نکته، به الزام وجود یک طراح تعاملی اشاره می‌کند که بتواند بدون نگرانی راجع به محدودیت‌های فنی، از خواسته‌های کاربر نهایی حمایت کند. این طراح باید بتواند برای سپردن مسئولیت کنترل و انجام جنبه‌های فنی، به تیم توسعه خود اعتماد کند.
3. واگذاری مسئولیت بررسی کیفیت محصول و رضایت کاربر به طراح: اگرچه تولیدکنندگان و کاربران اهداف مختص به خود را دارند، مسئولیت رضایت کاربران بر عهده طراح تعاملی است.
4. مشخص کردن کاربر هدف برای محصول: در حال حاضر، این ایده به موضوع تحقیق بر روی کاربران تبدیل شده است و با نام «تجربه کاربری» شناخته می‌شود. باید محصول مورد نظر را به تجربه کاربری ارتباط داد و همیشه از خود سؤال کرد که: «کاربر این محصول را در کجا استفاده خواهد کرد؟» «این کاربر کیست؟» «کاربر با استفاده از محصول، می‌خواهد به چه چیزی دست یابد؟»
5. کار در گروه‌های دونفره: نکته آخر این است که طراحان تعاملی هرگز نباید به‌ تنهایی کار کنند. همکاری با دیگران یک مسئله‌ی بسیار مهم و کلیدی است و با عنوان «رابط طرح» شناخته می‌شود. رابط طرحی که در گذشته در نظر گرفته می‌شد، تنها یک تبلیغ‌کننده محصول بود اما امروزه این مفهوم، افرادی از قبیل مدیر پروژه، تولیدکننده محتوا، معمار اطلاعات و غیره را در بر می‌گیرد.

کاربردپذیری

شاید واژه کاربردپذیری، کمی مبهم به نظر برسد اما در دل این واژه، یک سؤال کلیدی نهفته است: «آیا کاربران می‌توانند به‌راحتی از محصول شما استفاده کنند؟»

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

- در کتاب «تعامل بین انسان و کامپیوتر» (Human Computer Interaction)، نوشته «آلن دیکس» (Alan Dix)، «جانت ای فینلی» (Janet E. Finlay)، «گرگوری دی آبود» (Gregory D. Abowd) و «راسل بیلی» (Russell Beale)، کاربردپذیری به سه بخش اصلی زیر تقسیم می‌شود:

• قابلیت یادگیری: چگونه یک کاربر جدید می‌تواند به‌راحتی کار با محیط رابط کاربری را بیاموزد؟
• انعطاف‌پذیری: چند روش برای تعامل بین کاربر و سیستم وجود دارد؟
• توانمندی: میزان پشتیبانی از کاربران در حین مواجه با خطا چقدر مناسب است؟

- در این‌ میان، «جاکوب نیلسن» (Jakob Nielsen) و «بن اسندیرمن» (Ben Shneiderman)، کاربردپذیری را به پنج بخش اصلی تقسیم می‌کنند:

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

- اخیراً، استاندارد بین‌المللی (ISO 9241)، پنج بخش اصلی کاربردپذیری را به صورت زیر تقسیم کرده است:

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

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

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

در کتاب مصاحبه‌های «بیل ماگریج» (Bill Moggridge)، «تعاملات طراحی» (Designing Interactions)، «جیلیان کرامپتون» (Gillian Crampton)، یکی از افراد دانشگاهی در زمینه طراحی تعاملی، مفهوم چهار بعد «زبان طراحی تعاملی» را معرفی کرد. به عبارت دیگر، این چهار بعد به خودی خود باعث ایجاد تعاملات و ارتباط بین یک کاربر و صفحه‌نمایش سیستم می‌شوند.

فیلم آموزش نرم افزار اکشر آر پی – طراحی رابط و تجربه کاربری UI/UX با Axure RP در فرادرس

کلیک کنید

چهار بعد اصلی عبارت‌اند از: کلمات، نمایش بصری، اشیا فیزیکی یا فضا و زمان. اخیراً، «کوین سیلور» (Kevin Silver)، طراح تعاملی ارشد آزمایشگاه‌های شرکت «IDEXX»، بعد پنجمی هم به این روش اضافه کرد. بعد پنج، «رفتار» است.

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

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

روانشناسی شناختی طراحی

روانشناسی شناختی، مطالعه بر روی نحوه عملکرد ذهن و ماهیت فرآیندهای ذهنی دخیل در این عملکرد است. بر اساس اتحادیه روانشناسان آمریکایی (American Psychological Association)، فرآیندهای دخیل در عملکرد ذهن عبارت‌اند از: توجه، استفاده از زبان، حافظه، ادراک، حل مسئله، خلاقیت و تفکر.

فیلم آموزش اصول روانشناسی طراحی UI و UX (رابط کاربری و تجربه کاربری) در فرادرس

کلیک کنید

درحالی‌که روانشناسی، رشته بسیار گسترده‌ای است، تعداد کمی از المان‌های روانشناسی شناختی وجود دارند که ارزش بخصوصی داشته و در ایجاد حوزه طراحی تعاملی به کار می‌آیند. دان نورمن (Don Norman)، نویسنده کتاب «طراحی کارهای روزمره – The Design of Everyday Things»، برخی از المان‌های دخیل روانشناسی شناختی در طراحی تعاملی را به صورت زیر تقسیم می‌کند:

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

دستورالعمل‌های رابط انسانی

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

وظایف طراح تعاملی

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

فیلم مجموعه آموزش طراحی رابط کاربری و تجربه کاربری UI/UX – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

استراتژی طراحی

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

چارچوب‌بندی تعاملات اصلی

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

ایجاد نمونه‌های اولیه

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

به‌روز بودن

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

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

امیدواریم این مقاله مفید واقع شده باشد.  در بخش بعدی این مطلب، 7 ابزار کاربردی در طراحی تعاملی را به شما معرفی خواهیم کرد.