دوره‌ طراحی

اصول طراحی تعاملی خوب چیست؟

اصول طراحی تعاملی خوب

اصول اینتراکشن دیزاین خوب

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

۱- همه چیز را به همان روشی که بقیه با آن آشنا هستند ارائه دهید.

ما می‌توانیم با ساختن اشیاء اصلی در سیستم (به عنوان مثال مکالمات ، کاربران ، پیام ها و غیره) فرآیند درک مشتریان از سیستم را آسان‌تر کنیم تا آنها در همه‌جا به همان شیوه رفتار کنند. شناخت آسانتر از یادآوری است.

نمایش آبجکت به روش آشنا

بایدها:

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

نبایدها:

بهینه‌سازی‌های محلی‌ای که متناقض با سایر زمینه هاست را انجام ندهید. همچنین چندین تغییر مشابه اما متفاوت از یک شیء را ایجاد نکنید.

سوالات زیر را از خود بپرسید:

اگر این شی را در جای دیگری از محصول قرار دهم چگونه به‌نظر می‌رسد؟

آیا می‌توانیم از همان کامپوننت در چندجا استفاده کرد؟

اگر اینطور نیست، چگونه می توانیم آن را قابل درک کنیم به شکلی که با آن احساس آشنایی داشته باشیم؟

 آیا باید جای دیگری محصول را به روز کنیم؟

۲- سلسله مراتب را در رابط خود ایجاد کنید.

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

سلسله مراتب در رابط کاربری

بایدها:

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

نبایدها:

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

سوالات زیر را از خود بپرسید:

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

۳- ایجاد ریتم و تعادل بینایی

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

ایجاد تعادل و ریتم بصری

بایدها:

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

نبایدها:

فقط همه چیز را در یک لیست فلت قرار ندهید. از لاین‌های طولانی استفاده نکنید.

سوالات زیر را از خود بپرسید:

     آیا اسکن طرح آسان است و مهمترین قسمت آن قابل تشخیص است؟
آیا از لحاظ بینایی احساس تعادل دارد؟
آیا رابط با سیستم گریدبندی تراز شده است؟

۴- از الگوهای و تعاملات رایج استفاده کنید.

با محدود کردن میزان الگوهای تعاملی مورد نیاز برای یادگیری می‌توانیم به مشتریان کمک کنیم تا از Intercom، استفاده موثرتری بکنند.

ایجاد الگوهای رایج

بایدها:

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

سوالات زیر را در طراحی تعاملی از خود بپرسید:

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

۵- از افشای تصاعدی استفاده کنید.

با بی‌پرده گویی از پیشرفت‌ها‌، می‌توانیم درک عملکرد Intercom را برای اکثر مشتریان ساده کنیم و برای مشتریان پیشرفته‌تر، قابلیت انعطاف‌پذیری بیشتری داشته باشیم.

progressive disclosure

بایدها:

با پیش‌فرض‌های ساده شروع کنید و به تدریج انعطاف پذیری را آشکار کنید. برای رایج ترین use-case بهینه‌سازی را انجام دهید.

نبایدها:

بلافاصله انعطاف‌پذیری کامل از خود نشان ندهید. use-caseهای رایج را برای use-caseهای حاشیه قربانی نکنید.

سوالات زیر را از خود بپرسید:

     رایج ترین use-case چیست؟
چه پیش‌فرض‌هایی باید وجود داشته باشد که بیشتر افراد مجبور به تغییر آنها نباشند؟
چگونه می‌
توانیم به تدریج اطلاعات را فاش کنیم؟
آیا ما رایج‌ترین use-case را با یک use-case حاشیه‌ای سازگار می‌کنیم؟

۶- واضح و مختصر باشید.

زبان در کمک به مشتریان ما نقش کلیدی دارد زیرا نحوه کار Intercom را شرح می‌دهد تا درکشان بالا رود. با این حال، محتوای بیش از حد می‌تواند اثر متضادی داشته باشد خصوصا در جایی‌که کاربران فقط صفحه را اسکن می‌کنند بدون اینکه آن را بخوانند.

مختصر و مفید بودن

بایدها:

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

نبایدها:

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

سوالات زیر را از خود بپرسید:

آیا اسکن کردن و فهمیدن متن بدون خواندن آن از ابتدا تا انتها آسان است؟

اگر مجبور شوید نیمی از مطالب را نخوانید میتوانید از روی نصف دیگر متن به کل معنی دست پیدا کنید؟

     آیا ارزش پیشنهاد مشخص است؟
آیا مشخص است که کاربر باید چه کاری انجام دهد؟
آیا این برای کسی که دانش قبلی ندارد، روشن خواهد بود؟

     آیا می‌توان به‌جای محتوا از علایم بصری استفاده کرد؟

۷- سرعت پاسخ‌گویی را در نظر بگیرید.

عملکرد ویژگی‌ای است که باید با دقت بررسی شود. نادیده‌گرفتن عملکرد باعث ایجاد تجربه کاربری بد و عدم اطمینان در کاربر می‌شود.

مفید و مختصر بودن

بایدها:

هنگام تعامل با محصول، به کاربران بازخورد فوری بدهید و انتظارات را در زمانی که منتظر هستند برطرف کنید.

نبایدها:

حالت‌های بارگیری را فراموش نکنید.

سوالات زیر را از خود بپرسید:

     درست بعد از تعامل با رابط چه اتفاقی می‌افتد؟
آیا مشخص است که این اقدام دریافت شد و در حال حاضر در حال پردازش است؟
آیا مشخص است چه زمانی پردازش کامل می‌شود؟

۸-کاربران را راهنمایی کنید که در آینده چه کاری باید انجام دهند؟


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

راهنمایی کاربران برای هر مرحله

بایدها:

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

سوالات زیر را از خود بپرسید:

    اگر داده‌ای برای نمایش نداشته باشید چه اتفاقی می‌افتد؟
وقتی خطایی رخ می‌دهد چه اتفاقی می‌افتد؟
آیا مشخص است که کاربر بعدی چه کاری باید انجام دهد؟

۹- مراقب دسترسی باشید.


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

دسترسی

بایدها:

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

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

سوالات زیر را از خود بپرسید:

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

۱۰- در اصول طراحی تعاملی روی مهارت های اصلی ما تمرکز کنید.


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

آکادمی آژانس طراحی دایره

آموزش طراحی در آژانس طراحی دایره شامل بوت‌کمپ طراحی ۰ تا ۱۰۰، طراحی تجربه کاربری، طراحی تعاملی، طراحی دیزاین سیستم، رنگ و تایپوگرافی و…

به اشتراک‌گذاری در

لوگو سایت

آژانس طراحی دایره

Search