طراحی تعامل یک جز مهم از چتر بزرگ تجربه کاربری یا UX Design است.
در این مقاله قراره براتون از:
- اهمیت طراحی تعاملی
- چیستی طراحی تعاملی
- تعدادی از مدل های مفید طراحی تعاملی
- توصیفی خلاصه از وظایفی که طراحان تعاملی معمولا انجام میدن
و در انتها تعدادی از نمونه و مثال های "طراحی تعامل گرا"
بگم.
پس با من تا انتهای این مقاله همراه باشید.
به طور خلاصه، در حرفه طراحی تجربه/رابط کاربری یا همون UI/UX Design ، یادگیری اینتراکشن دیزاین مزیت های زیادی داره :
- در یک زمینه به سرعت در حال تحولِ مابین روانشناسی رفتاری و تکنولوژی کار می کنین.
- می تونین در طیف وسیعی از شرکتهای فناوری فرصت های شغلی هیجان انگیزی را به دست بیارین.
- در صف اول تصمیمات نوآورانه در زمینه طراحی محصول هستین و می تونین در نحوه استفاده مردم از فناوری تفاوت و تغییر ایجاد کنین.
کوپر، به عنوان یکی از شرکت های طراحی محبوب اینطور جواب میده :
"طراحی تعاملی از نیاز به ارائه تجربیات نرم افزاری ایی به کاربران نشات میگیرد که منطقی باشند، نیاز های آنها را برآورده کنند، سازگار، منسجم و قابل استفاده و در نهایت مطلوب باشند."
تا حالا شده یه ریموت کنترلی که درست طراحی نشده و دکمه هاش و جایگذاری شون با عقل جور در نمیان اعصاب تون رو خرد کنه؟ یا دستگیره دری که نمیشه راحت ازش استفاده کرد؟
برنامه ای که دانلود کردید ولی هیچ ایده ای ندارید که چطور باید ازش استفاده کرد چی؟
اینا نمونه هایی از مشکلاتی هستن که بخاطر درک ضعیف از طراحی تعاملی پیش میان و ما میتونیم با متخصص شدن در این زمینه و پیش زمینه قوی در کاربرد پذیری، معماری اطلاعات، طراحی کاربر محور و دانش در الگو های طراحی موثر ازشون جلوگیری کنیم.
طراحی تعاملی رو میشه در یک جمله کوتاه (اما نه ذاتا ساده و تقلیل شده) اینطور توصیف کرد :
"به طراحی ارتباطات و تعاملات دوسویه و مستقیم بین کاربر و محصول، طراحی تعامل یا اینتراکشن دیزاین گفته میشه."
در واقع طراحی تعاملی ایجاد گفتگو بین یک شخص و یک محصول ، سیستم یا خدمات هست.
این گفتگو هم ماهیت جسمی و هم احساسی داره و در تعامل بین فُرم ، کارکردها و فناوری که به مرور تجربه میشه ، خودش رو نشون میده. اغلب اوقات وقتی صحبت از طراحی تعامل میشه، محصول به سمت محصولات نرم افزاری مثل اپلیکیشن یا سایت تمایل پیدا میکنه.
هدف طراحی تعامل، ساخت محصولی هست که کاربر رو قادر به رسیدن اهدافش از بهترین راه ممکن کنه.
البته این تعریف به علت گستردگی و وسعت این حوزه کلی به نظر میاد چون:
تعامل بین کاربر و محصول اغلب اوقات با اجزایی مثل زیبایی شناسی، حرکت، صدا، فضا و خیلی موارد دیگه درگیر میشه.که البته که هر کدوم از این زمینه ها خودشون با حوزه های خاص تری مرتبط و درگیر میشن مثل طراحی صدا برای جلوه های صوتی که در تعاملات کاربر استفاده میشه.
همونجوری که خودتون پی بردید، اشتراکات زیادی بین طراحی تعامل و طراحی تجربه کاربری وجود داره.
گذشته از اینها طراحی تجربه کاربری درباره شکل دهی تجربه استفاده از محصول هست که بخش زیادی از اون تجربه با برخی از تعاملات مابین کاربر و محصول درگیر و مرتبط هست.
اما طراحی تجربه کاربری چیزی بیشتر از طراحی تعاملی صرف هست و همچنین شامل :
مطالعه کاربر و یوزر ریسرچ (کشف کیستی کاربران در ابتدا)
خلق پرسونای کاربر (چرا و تحت چه شرایطی اون ها از محصول استفاده میکنن؟)
اجرا کردن تست های کاربری و تست کاربرد پذیری و غیره هم میشه ...
پنج بُعد طراحی تعامل یک مدل مفید برای اینه که بفهمیم طراحی تعامل با چه چیز هایی درگیر هست.
Gillian Crampton smith که یک طراح اینتراکشن آکادمیک هست در ابتدا مفهوم 4 بُعد از زبان طراحی تعامل را معرفی کرد که Kevin silver طراح IDEXX لابراتوریز ، بُعد 5 ام رو به اون اضافه کرد.
- بُعد اول : کلمات
کلمات بخصوص اون هایی که در طراحی تعامل مانند لیبل های دکمه ها، استفاده میشن، باید با معنی و آسان فهم باشن.
اون ها باید اطلاعات را به کاربران منتقل کنند اما نه اونقدر که کاربر در اون اطلاعات غرق بشه.
- بُعد دوم: ارائه بصری
مربوط به المان های گرافیکی مانند تصاویر، تایپوگرافی ها، و آیکون هایی میشه که کاربر با اون ها تعامل داره.
این بُعد معمولا مکمل کلماتی هست که برای انتقال اطلاعات به کاربران استفاده میشن.
- بُعد سوم : شی یا فضای فیزیکی
کاربران با استفاده از کدام اشیا فیزیکی با محصول تعامل میکنن؟
یک لپ تاپ با موس یا تاچ پد؟
یا یک گوشی هوشمند و با انگشت هاشون؟
و در چه فضای فیزیکی ایی کاربران چنین کاری رو انجام میدن؟
برای مثال
آیا کاربر زمان استفاده از برنامه روی موبایل داخل یک واگن شلوغ مترو وایساده یا موقع گشت و گذار داخل سایت پشت یک میز و داخل دفتر نشسته؟
اینها همه روی تعامل کابر با محصول تاثیرگذار هستن.
- بُعد چهارم : زمان
اگر چه این بُعد کمی انتزاعی به نظر می رسد، اما بیشتر به رسانه هایی که در طول زمان تغییر میکنند (مانند انیمیشن، ویدیو، صدا) اطلاق می‌شود.
صدا و حرکت نقش حیاتی در بازخورد بصری و صوتی به تعاملات کاربر بازی می کنن.
در عین حال نگرانی بابت مقدار زمانی که کاربر با محصول در تعامل هست وجود داره:
آیا کاربر ها می تونن میزان پیشرفت شون رو رهگیری کنن؟
یا امکان اینکه تعامل شون با محصول رو دوباره از سر بگیرن رو دارن؟
- بُعد پنجم: رفتار
شامل مکانیزم یک محصول میشه :
کاربر ها چطوری در وب سایت عمل میکنن؟
کاربر ها با محصول چگونه کار میکنند؟
به عبارت دیگه
اینکه بُعد های قبلی،تعامل با محصول را چگونه تعریف میکنن؟
همچنین شامل عکس العمل های کاربر ها و محصول میشه (به عنوان مثال پاسخ های احساسی یا فیدبک ها ).
در ویدیو زیر میتونیم ببینیم که چطور همه این قسمت ها در کنار هم قرار میگیرن و بهم متصل میشن تا یک تجربه کاربری مناسب برای مشتریان به ارمغان بیاد :
طراحان اینتراکشن چطوری با این 5 بُعد بالا کار میکنن تا تعاملات با معنی ایجاد کنن؟
برای اینکه بفهمیم، بیاین به سوالات مهمی که طراحان اینتراکشن موقع طراحی میپرسن نگاهی بندازیم:
- کاربر با استفاده از موس، انگشت یا قلمش چه کاری میتونه انجام بده تا به طور مستقیم با رابط کاربری تعامل کنه؟
- المان های ظاهری مثل رنگ، شکل، اندازه و غیره چه سر نخی به کاربر درباره چگونگی عملکرد میدن؟
- آیا پیام های خطا راهی جلوی کاربر برای اصلاح و ویرایش مشکل میزارن یا توضیح میدن که به چه دلیلی این مشکل به وجود اومده؟
- وقتی که کاربر عملی رو انجام میده، چه بازخوردی میگیره؟
- آیا المان های رابط کاربری اندازه معقولی برای تعامل با خودشون دارن؟
- آیا از فرمت های استاندارد و آشنایی (در طراحی) استفاده شده؟
خب، بستگی داره!
برای مثال، اگه شرکتی ، به اندازه کافی بزرگ باشه و منابع کافی داشته باشه، ممکنه یه پست شغلی مستقل و جداگانه برای طراح تجربه کاربری و طراح اینتراکشن داشته باشه.
مثلا در تیم های طراحی بزرگ
ممکنه یک محقق تجربه کاربری، یک معمار اطلاعات، یک طراح اینتر اکشن و یک طراح بصری وجود داشته باشه.
اما برای شرکت ها و تیم های کوچکتر، اکثر کارهای طراحی تجربه کاربری ممکنه توسط یک یا دو نفر انجام بشه و ممکنه عنوان "طراح اینتر اکشن" نداشته باشن.
در هر صورت، اینها تعدادی از وظایفی هستن که یک طراح اینتراکشن باید روزانه انجام بده :
• طراحی استراتژی
این تسک به اینکه اهداف یک کاربر چیه و کدوم اینتراکشن ها برای رسیدن به این هدف ضروری هستن مربوط میشه.
بسته به شرکت، طراحان اینتراکشن ممکنه مجبور باشن پیش از اینکه یک استراژی رو بسازن که اونو تبدیل تعاملات کنن، فرآیند مطالعه کاربر و یوزر ریسرچ رو هدایت کنن تا بفهمن که اهداف کاربران چیه.
• وایرفریم و پروتایپ ها
این بخش هم دوباره به شرح وظایف شرکت بستگی داره اما اغلب طراحان اینتراکشن وظیفه دارن که وایر فریم هایی ایجاد کنن که تعاملات موجود در محصول رو مشخص کنه
گاهی اوقات هم، طراحان اینتراکشن ممکنه پروتایپ های تعاملی یا همینطور High- Fidelity ایجاد کنن که دقیقا شبیه اپ یا سایت واقعی باشه.
خب
تا به اینجای کار با 5 بُعد کانسپت طراحی تعاملی آشنا شدیم و همینطور نگاهی روی مهم ترین سوالاتی که طراحان اینتراکشن در زمان طراحی تعاملات از خودشون میپرسن انداختیم و تعدادی از وظایف طراحان تعاملی هم براتون گفتم
حالا بیاین با هم نگاهی به نمونه ها و مثال هایی از طراحی تعامل و ارتباط اون با تجربه کاربری داشته باشیم:
تقسیم کردن رسید ها با دوستا همیشه اونطوری که فکر میکنیم ساده به نظر نمیاد، به خصوص اگه بیشتر فردی بصری باشیم تا فردی عددی
طرح مفهومی این اپ به ما اجازه میده که مبلغ کل رسید رو وارد کنیم، درصد انعام رو اضافه کنیم (البته تو کشور عزیزمون معمولا ما همچین کاری نمیکنیم و به جاش خودشون ازمون به زور میگیرن!) و بعدش ببینیم که هر شخصی چقدر باید پرداخت کنه.
البته بهترین قسمتش هنوز مونده!
بجای اینکه دستی سهم هر شخص رو تعیین کنیم و مجبور بشیم که سهم بقیه رو هم آپدیت و تنظیم کنیم، میتونیم داخل برنامه قسمت و سهم هر نفر رو به صورت بصری و گرافیکی تغییر بدیم وبقیه اعداد خودشون به صورت خودکار برای همه محاسبه میشن!
تو اغلب سایت ها و برنامه های فروشگاهی، برای اینکه سبد خریدمون رو ببنیم، مجبوریم به یه بخش کاملا متفاوت پیمایش کنیم.
تو این مثال طراحی اینتراکشن، ما در لحظه میتونیم مواردی که به سبد خردیمون اضافه میشن رو در کنار هم با افکت جذاب پروازشون به سمت سبد خرید ببینیم و همه اینا به محض اینکه روی دکمه "اضافه به سبد خرید" کلیک میکنیم، اتفاق میفتن.
در این طراحی، سبد خرید ما بطور دائم و حتی وقتی درحال مرور صفحات و بخش های دیگه هم هستیم بهمون نمایش داده میشه.
اپ های سوشال مدیا بدلیل اطلاعات بیش از حد، نشون دادن همه استوری ها، ویدیوها و نوشته های ترند شده و اخبار، به صورت یکجا، بد نام هستن.
این طرح مفهومی از یک برنامه سوشال مدیا جدید، کنترل رو به دست کاربر ها بر میگردونه و امکان ساماندهی بر اساس منابع (مثل یوتیوب، ویمو، تویتر، یا ردیت و ...) رو به ما میده و در عین حال اجازه میده کانالی که برای جست و جو میخوایم رو انتخاب کنیم.
همچنین این چیدمان کارت گونه نیاز به جابجایی بین برنامه ها، برای محتوای مورد علاقه مون رو از بین میبره.
میلیون ها روش برای سفارش همربرگر مخصوص خودتون با مخلفات سفارشی وجود داره (واقعا ما انقدر راه داریم؟!)
و وقتی که یه همربرگر رو با گوشی مون سفارش میدیم، انتخاب کردن جداگانه هر کدوم از این مخلفات تو یه صفحه نمایش کوچیک، مهارت و زبردستی خاص خودش رو میخواد!
این طرح مفهمومی رابط کاربری برنامه Tasty Burger تجربه سفارش و شخصی سازی اون رو بوسیله دسته بندی و جداسازی مخلفات و مواد قابل تغییر بر اساس نوع شون راحت تر میکنه.
بجای نمایش لیستی بلند بالا از همه انواع پنیر، گوشت، سس و سایر مخلفات، اول رو یک دسته بندی مثل پنیر کلیک میکنیم و بعدش انواع مختلفی از اون مثل چدار، گودا و ... برامون به نمایش در میاد.
اگه دنبال خونه باشیم و خودمون شخصا وحضوری نتونیم بریم ملک رو ببینیم، بهترین گزینه بعدی مون اینه که یه تور و بازدید مجازی ازش داشته باشیم. (و این مورد کم کم داره جا میفته خوشبختانه)
تو این طرح مفهومی از برنامه مشاور املاک، میتونیم روی هر اتاق و بخشی از خونه مثل آشپزخانه یا سالن پذیرایی کلیک کنیم و گوشی مون رو تکون بدیم و بچرخونیم یا یک نمای 360 درجه ای از اون بخش رو ببینیم.
و طوری طراحی شده که جابجایی بین اتاق ها و قسمت های مختلف فقط با یک کلیک انجام میشه.
در این مقاله درباره طراحی تعامل یا اینتراکشن دیزاین صحبت کردم
گفتم که به طراحی تعامل بین کاربر و محصول، طراحی تعاملی گفته میشه
و همینطور شما رو با 5 بُعد از یک مدل مفید برای اینتراکشن دیزاین آشنا کردم و از اهمیت کلمات، ارائه بصری، فضای فیزیکی و محیط کاربر،زمان و رفتار و تاثیر این عوامل بر نحوه و میزان تعاملات کاربر با محصول گفتم.
در ادامه با هم مروری بر مهم ترین سوالاتی که طراحان تعامل از خودشون میپرسن داشتم و در نهایت مختصری از وظایف اینتراکشن دیزاینر ها رو براتون توضیح دادم.
امیدوارم این مقاله براتون کاربردی بوده باشه و از مطالب گفته شده در فرآیند اینتراکشن دیزاین محصول تون استفاده کنید.
و همچنین لطفا نظرات، پیشنهادات و سوالات خودتون رو درباره این مقاله یا به طور کل طراحی تعامل یا Interaction Design با من و سایر خوانندگان عزیز به اشتراک بزارید.
روز و روزگارتون بی غم
زمستان 99
