اینتراکشن دیزاین یا طراحی تعامل گرا چیست؟ ⚡

اینتراکشن دیزاین یا طراحی تعامل گرا چیست؟ ⚡

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

منبع

Author: admin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *