UI UX Design چیست — آشنایی با معانی و تفاوت های آنها در طراحی

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

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

تجربه کاربری یا UX چیست؟

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

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

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

• مجموعه آموزش طراحی رابط کاربری و تجربه کاربری UI/UX — کلیک کنید

ویژگی های طراح UX که باید بدانیم

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

برخی از سؤالاتی که توسط کاربران از جنبه‌ی طراحی تجربه‌ی کاربری از خود می‌پرسند شامل موارد زیر است:

• آیا محصول و خدمات تعریف شده دارای ارزش قابل قبولی است و می‌تواند به من در ارتقای کاربری‌ام کمک کند؟
• آیا نرم افزار یا وبسایت مورد نظر عملکرد قابل اتکا و مثبتی دارد که به من ارائه کند؟
• آیا اپلیکیشن یا برنامه‌ی مورد استفاده قابلیتی جهت استفاده‌ی آسان و راحت‌تر را برای انجام کارها به من پیشنهاد می‌کند؟
• و اینکه در نهایت آیا این محصول یا خدمات برای من به‌عنوان یک کاربر راضی کننده و قانع کننده است؟

همان‌طور که مشاهده کردید توانستیم یک بخش از سؤال UI UX Design چیست را پاسخ بدیم که در آن طراح UX باید یک محقق و پرسشگر حرفه‌ای هم باشد تا بتواند به تمامی سؤالات و پرسش‌های از پیش برنامه ریزی شده پاسخ دهد که همین سؤالات توسط کاربران هم بعداً مطرح خواهد شد و در انتها طراح UX پیشنهادات خود را در قالب راهنمایی‌های مشخصی که هدف نهایی ما هم یکی از این پیشنهادات اصلی است به کاربران ارائه می‌کند.

طراحی رابط کاربری یا UI چیست؟

عبارت UI یا User Interface Design در اصل به معنی طراحی رابط و محیط کاربری می‌باشد و می‌توانیم به جنبه‌های دیداری و ظاهری طراحی وبسایت یا اپلیکیشن اشاره کنیم که در آن طراح UI طراحی بخش‌هایی از یک نرم افزار را انجام می‌دهد که کاربران می‌توانند آن را مشاهده کنند. این تخصص بیشتر شامل جنبه‌های گرافیکی و بصری یک محیط کاربری است و می‌تواند مشخص کند که ظاهر و قالب یک وبسایت یا نرم افزار به چه صورت باشد تا کاربران با جلوه‌های ویژه سمعی و بصری آن ارتباط برقرار کنند.

یک طراح UI باید بتواند با کمک گرفتن از گرافیست‌های وبسایت و همچنین برنامه نویسان با تخصص Front-End طراحی ظاهر یک سایت را به‌صورت کامل پیاده سازی کند. در مورد اهمیت بالای طراحی رابط کاربری باید گفت که این بخش به‌صورت کاملاً مستقیم با کاربران در ارتباط است و کمتر کسی هست که به سراغ برنامه‌ها و اپلیکیشن های با ظاهر و رابط کاربری ضعیف و بدون گرافیک بالا برود و قید استفاده از آنها را خواهد زد.

آشنایی با انواع رابط کاربری UI

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

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

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

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

• آموزش مقدماتی فیگما – اصول طراحی رابط کاربری UI با Figma — کلیک کنید

رابط کاربری صوتی: همان‌طور که در بالا هم اشاره شد رابط کاربری صوتی می‌تواند به گونه ای طراحی شود تا کاربران بتوانند با فرمان‌های شنیداری و دستورات صوتی، اعمال مورد نظر خود را در یک وبسایت یا نرم افزار اجرا کنند. دستیار صوتی گوگل با نام Google Voice می‌تواند تمامی لغات و فرمان‌های ضبط شده را جستجو کند و نتیجه‌ای مطابق با صوت دریافت شده ارائه کند.

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

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

اهمیت طراحی رابط کاربری UI

صد البته رابط کاربری می‌تواند ظاهری در خور توجه و مناسب برای کاربران ایجاد کند که هویت اصلی معرفی نرم افزار و وبسایت را بیان می‌کند. یک رابط کاربری جذاب می‌تواند برخی از مهم‌ترین انتظارات کاربران را برآورده کند و حمایت خوبی را برای عملکرد بهتر سایت ایجاد کند. شکی نیست که رابط کاربری مناسب می‌تواند تعاملی مؤثر را بین نرم افزار و کاربران ایجاد کند.

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

تفاوت طراحی UI UX Design چیست؟

حال که با تعریف و جزئیات هرکدام از عبارت‌های UX و UI آشنا شدیم می‌خواهیم به سراغ تفاوت آنها در طراحی بپردازیم و بدانیم که تمایز UI UX Design چیست. از نظر مشابهت UI و UX باید بگوییم که هردو با U آغاز می‌شوند که مربوط به User یا کاربر است. ولی از نظر محتوای این دو باید بدانیم که کاملاً باهم فرق دارند و هیچ تشابه معنایی باهم ندارند. در واقع کسی که به‌عنوان طراح UX برای طراحی تجربه کاربری فعالیت می‌کند باید بتواند گام به گام نحوه‌ی تعامل و برخورد با کاربر یا مشتری را بداند تا برنامه ریزی خوبی برای ارائه خدمات و محصولات معین شده داشته باشد.

سؤال ابتدایی که هر طراح UX باید از خود بپرسد این است که چرا کاربران باید از محصولات و خدمات ما استفاده کنند؟ و با پاسخ دادن به آن خود می‌تواند راه و روش معینی را ترسیم کند تا مخاطبین را به سوی خود جذب کند و در مراحل بعدی هم مشتری یا کاربر را به کدام سمت هدایت کنیم و چه چیزهایی را به اون نشان بدهیم تا بتوانیم به اهداف از پیش تعیین شده مانند فروش محصولات بیشتر دست پیدا کنیم.

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

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

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

پس به‌طور کلی می‌خواهیم بدانیم تفاوت طراحی ui ux چیست؟ که طراحی رابط کاربری UI بخشی از رویکرد طراحی تجربه کاربری UX‌ می‌باشد و می‌توانیم UI‌ را زیر مجموعه‌ای از UX به‌حساب بیاوریم. همان‌طور که ملاحظه کردیم UI بر روی جلوه‌های بصری و ظاهری طراحی یک وبسایت یا نرم افزار تمرکز دارد و UX نیز به راه و مسیری که مشتریان و کاربران در نرم افزار و وبسایت نیاز دارند خواهد پرداخت و تفاوت مفهومی آنها باهم زیاد است.

جمع بندی در مورد UI UX Design چیست؟

در این مطلب می‌خواستیم درباره دو مفهوم مهم و کلیدی برای کار با انواع وبسایت و نرم افزار تمرکز کنیم که آن هم موضوع اینکه UI UX Design چیست برای این منظور به تعریف رابط کاربری UI و تجربه کاربری UX پرداختیم و تفاوت‌های کلیدی آنها را بیان کردیم. برای اینکه به‌طور کامل با دوره‌های یادگیری طراحی UI/UX آشنا شوید پیشنهاد می‌کنیم با استفاده از فیلم‌های آموزشی فرادرس شروع به فراگیری مطالب تخصصی و حرفه‌ای در این زمینه کنید تا به‌صورت کامل به جزئیات مورد نیاز هرکدام مسلط شوید.

• آموزش طراحی رابط کاربری سایت با فریمورک jQuery UI — کلیک کنید