مقدماتی از رابط و تجربه کاربری (ui/ux)

تعاریفی از طراحی رابط و تجربه کاربری

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

در این قسمت از آموزش رایگان دوره ui ux ابتدا به سوال تجربه کاربری چیست؟ پاسخ می‌دهیم. تجربه کاربری (user experience)، به کلیه عواطف، احساسات، واکنش‌ها و خاطرات ما از محصولات مختلف گفته می‌شود. این خاطرات ممکن است مثبت یا منفی باشد و در بین افراد مختلف جامعه نیز یکسان نباشد. برای مثال شاید شما از برندی مانند اسنپ رضایت زیادی داشته باشید، اما دوست یا همکار شما از این برند ناراضی باشد.

افزون بر این، تجربه کاربری شما از برند اسنپ، محدود به ظاهر و طراحی گرافیکی آن نیست. اینجا مفهوم دیگری مطرح می‌شود. بله، طراحی رابط کاربری یا همان user interface. در واقع UI واسطی بین کاربر و سیستم محسوب می‌شود. (مثل یک منشی که شما را به یک پزشک متصل می‌کند). شاید این واسط، خیلی خوب و متناسب با نیاز کاربر طراحی شده باشد یا برعکس واسطی با طرحی ضعیف و غیر اصولی محسوب شود.

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

زیر مجموعه‌های تجربه کاربری

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

• پرسونا: یک فرم که بیانگر خصوصیات گروه کاربرانی است که از خدمات یا محصولات ما استفاده می‌کنند. در ابتدا هر کسب‌وکاری برای انجام مراحل طراحی ui ux باید جواب سوال پرسونای مشتری چیست؟ را به درستی پیدا کنند.
• تحقیق کاربری: تحقیق تجربه کاربری به روش‌هایی برای جمع‌آوری اطلاعات گفته می‌شود. زیرا باید مطمئن شویم که اصلاً نیاز کاربران ما چیست؟
• کاربردپذیری: کاربرد پذیری به سنجه‌های مختلفی برای بررسی کیفی محصول اشاره می‌کند. (سخت است اما موضوع آن را در ویدیو معرفی خواهیم کرد. این بخش یک سری تست هم دارد که با آن‌ها می‌توان طراحی خود را سنجید.)
• دسترسی‌پذیری: چیزی حدود 15 درصد افراد جامعه معلول که نه، توان‌خواه هستند. محصولات دیجیتال باید برای این دسته از افراد نیز بهینه باشد.
• معماری اطلاعات: معماری اطلاعات در تجربه کاربری مثل یک کتابخانه عمومی است. به این ترتیب چگونه باید محتوای آن‌ها را بچینیم که متناسب با خواسته و نیاز کاربر باشد؟ چگونه کاربران می‌توانند سریع‌تر و راحت‌تر به محتواها دسترسی پیدا کنند؟
• طراحی رابط کاربری: طراحی رابط کاربری ui ux هم که معرف حضورتان هستند.
• تجربه نویسی: متن و محتوای داخل محصولات دیجیتال توسط چه افرادی نوشته شود؟ البته منظورمان متون طولانی بلاگ و محصول نیست. متون خطاها، دکمه‌ها، CTAها و…

چرخه تجربه کاربری دونالد نورمن

این چرخه توسط آقای دونالد نورمن، یکی از پیشگامان دانش طراحی و تجربه کاربری ui ux، ارائه شد. آقای نورمن اوایل دهه 90 میلادی در شرکت اپل (احتمالاً به عنوان یک مشاور) اعلام کردند که ما تجربه کاربری خوبی ارائه نمی‌کنیم. از آن زمان به بعد و به مرور، این تخصص به دانش IT افزوده شد. تخصص تجربه کاربری یک گرایش آکادمیک تحت عنوان HCI هست که زیرمجموعه IT بوده و در خیلی از کشورها امروز به عنوان رشته آکادمیک شناخته می‌شود.

البته آقای نورمن، طراحی را در دو مرحله ارائه کرده است. یعنی بعد از پرسونا و تحقیق تجربه کاربری، طراحی ابتدا در مقیاس‌های ساده‌تری (اسکچ و وایرفریم) با استفاده از نرم‌افزارهای طراحی ui ux اجرا می‌شود. این مرحله تحت عنوان low-fidelity نام گذاری شده است. پس از آن، طراحی وارد جزئیات بیشتر شده که به آن high-fidelity گفته می‌شود. بعد از اتمام این فرآیند، حالا با استفاده از تست‌های کاربردپذیری، باید بسنجیم محصولی که برای آن تحقیق و طراحی انجام دادیم، به‌درستی مسیرش را طی کرده است؟ پس باید تست و ارزیابی را به‌دقت انجام دهیم.

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

تفاوت Low-Fidelity و High-Fidelity

این تصویر شاید مثال خوبی برای بیان تفاوت وایرفریم و پروتوتایپ باشد. در وایرفریم که طراحی low-fi (مرحله دوم چرخه نورمن) هست، هدف ما این است که با هزینه و زمان کوتاه‌تری اسکلت پروژه را اجرا و سپس، با کارفرما و ذینفعان (stakeholders) گفتگو و پس از تایید آن‌ها، سراغ High-fi (مرحله سوم چرخه نورمن) برویم. در واقع در مرحله سوم ما رنگ‌ها، استایل‌ها، دیزاین‌سیستم، تایپوگرافی دقیق، گرید بندی، اینترکشن و… را به طرح اضافه می‌کنیم.

مستندات آموزشی دوره uiux آژانس نوآوری رسام

برای سهولت یادگیری، مستندات آموزشی پروژه به صورت یک فایل pdf درج شده است. تاریخ بروزرسانی درج شده که اگر در آینده فایل تغییر کرد، مخاطبان دوره، متوجه این تغییر بشوند. استفاده از این فایل صرفاً برای مطالعه بوده و استفاده از آن برای تدریس، جایز نیست.
تاریخ بروزرسانی: 10 تیر 1404

دانلود فایل مستندات دوره uiux

نقطه اول دوره طراحی رابط و تجربه کاربری

ما در این قسمت از دوره طراحی رابط و تجربه کاربری به تعاریف مختلفی از جمله ui و چرخه دونالد نورمن پرداخته‌ایم. شاید این مباحث در قدم اول، برای برخی عزیزان دشوار به نظر برسد. اما صبور باشید و پرانرژی ویدئوهای آموزش دوره طراحی رابط و تجربه کاربری ui/ux را دنبال کنید. اطمینان داشته باشید که با مطالعه و تمرین، هر دانشی (که به آن علاقه داشته باشیم) را می‌توانیم فتح کنیم. هر سوالی داشتید از بخش دیدگاه‌ها، از متخصصین آژانس نوآوری رسام بپرسید. همچنین خوشحال می‌شویم از پیشنهادات و تجربیات شما در این زمینه استفاده کنیم.
موفق باشید 😍

معرفی منابع و تمرین برای این جلسه

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

https://www.nngroup.com/articles/what-is-user-experience
https://www.figma.com/resource-library/difference-between-ui-and-ux
https://www.interaction-design.org/literature/topics/ux-design
https://www.nngroup.com/articles/ux-basics-study-guide