تفاوت UI و UX چیست؟

شغل:طراحی وب

درآمد:۱۳۰ هزار دلار سالانه

مکان:هر کشوری دوست داری

مسیر: ۷ دوره آموزشی

منتور ۲ :جلسه آنلاین با استاد

منتور ۱ : کافه گپ و گفت

بزن بریم

اصطلاحات مختلفی در طراحی سایت وجود دارد که بسیار کاربردی و مهم می باشند. اگر تازه شروع به طراحی سایت کرده اید و به این اصطلاحات آشنایی ندارید، نگران نباشید. در بین اصطلاحات طراحی سایت 2 اصطلاح مهم وجود دارد که به آن ها UI و UX گفته می شود. قبل از طراحی، علاوه بر شناخت کامل مفاهیم UI و UX، باید از نکات مهم آنها (تفاوت UI و UX، طراحی UIو UX) آگاهی داشته باشید. شما با مطالعه این مقاله می توانید شناخت نسبی درباره 2 اصطلاح UI و UX، مخصوصا تفاوت UI و UX کسب نمایید.

UI‌ چیست؟

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

مثال ‌هایی از UI

• مشخص کردن ظاهر منو
• مشخص کردن هماهنگی رنگ دکمه جستجو با رنگ اصلی سایت 
• چگونگی طراحی باکس مربوط به بنر‌های تبلیغاتی

سه بخش تشکیل شده محصول به وسیله طراحی رابط کاربری

Sense

Sense به کنش و واکنش محصول در رابطه با ورود کاربر و محیط های نمایش گفته می شود که این کنش و واکنش ها متفاوت هستند.

Skin 

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

Makeup

Makeup به دستورالعمل ها، نکات و راهنمایی هایی گفته می شود، که به کاربر برای بدست آوردن تجربه بهتر کمک بسیاری می کند.

مراحل طراحی UI

ساختار

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

سادگی

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

دسترسی

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

دقت در طراحی

در زمان طراحی سایت خود به 2 موضوع زیر توجه نمایید تا علاوه بر کاهش درصد خطا در طراحی سایت، بتوانید یک UI و UX مناسب طراحی نمایید.

• توجه به خصوصیات ظاهری سایت در طراحی (طراحی برند و گرافیک، راهنمای کاربر، آنالیز مشتری)
• توجه به ویژگی پاسخگویی و تعاملی بودن ( تنظیمات خاص برای تمام ابعاد مانیتور ها، توجه به تعاملی بودن و انیمیشن، پیاده‌ سازی طراحی همراه با برنامه نویس پروژه و ایجاد نمونه ‌های اولیه UI)

انواع طراحی UI

• رابط کاربری زبان طبیعی (LUI یا NLUI)
• رابط کاربری مبتنی بر فرم 
• رابط کاربری صوتی (VUI)
• رابط کاربری لمسی
• رابط کاربری مبتنی بر منو
• رابط خط فرمان (CLI)
• رابط کاربری گرافیکی (GUI)

UX چیست؟‌

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

مثال ‌هایی از UX

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

4 نکته مهم در طراحی تجربه کاربری

در طراحی تجربه کاربری به 4 نکته زیر توجه کنید.

• باید طراحی کرد، نه دکور سازی
• محصول شما در کدام مرحله می باشد؟
• حل مشکل با UX
• معماری کلی چگونه باشد؟

طراح تجربه کاربری در پروژه چه کاری انجام می دهد؟

استراتژی و محتوا

استراتژی و محتوا دارای موارد زیر هستند.

• تحلیل و پایش رقبا
• تحلیل رفتار کاربران
• ساختار و استراتژی محصول
• تولید، توسعه و بهبود محتوا

وایرفریمینگ (Wireframing) و نمونه سازی (Prototyping) 

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

هماهنگی و تجزیه و تحلیل

• هماهنگی با طراح رابط کاربری
• هماهنگی با توسعه دهنده رابط کاربری
• پیگیری و کنترل اهداف پروژه
• تحلیل و تفسیر داده های آماری

اصول طراحی تجربه کاربری (UX)

• ارائه محتوای کاربردی
• ارائه محتوای معتبر
• سادگی استفاده
• ارائه سرویس کاربردی
• طراحی ظاهری
• دسترسی مناسب

UI Design و UX چیست؟

UX Design

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

UI Design 

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

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

قبل از شناخت تفاوت UI و UX، باید با وظایف طراح UX آشنا شوید.

• تمام قسمت های سایت به راحتی در دسترس کاربران قرار گیرد.
• برقراری ارتباطی آسان و راحت بین کاربر و قسمت های سایت
• مدیریت و هدایت کاربر از لحظه‌ ی ورود به سایت تا لحظه‌ ی خروج از سایت
• مدیریت و بررسی رفتار کاربر
• بررسی و انتخاب محتوا و متن ‌های استفاده شده در سایت یا محصول و …
• تمرکز روی اطلاعاتی که به کاربر داده می‌ شود یا از او گرفته می‌ شود.
• بررسی بخش مارکتینگ
• جستجوی محصول
• ساخت پرسونا ها و سناریو ها
• معماری اطلاعات (Information Architecture – IA)
• ساخت قاب
• پروتو تایپ یا الگو
• آزمایش محصول

وظایف طراح رابط کاربری

وظایف طراح رابط کاربری به صورت زیر می باشد.

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

چگونه UI و UX کار شوید؟

برای اینکه بتوانید ui و ux کار شوید، باید ۶ گام زیر را در زمان طراحی خود به خاطر داشته باشید و آن ها را انجام دهید.

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

تفاوت UI و UX چیست؟

همانطور که در قسمت معرفی UI و UX گفته شد، UI و UX معانی متفاوتی دارند اما در بیشتر مواقع با هم اشتباه گرفته می شوند. یک تفاوت UI و UX که بسیار چشم گیر می باشد، این است که در طراحی سایت، UI مربوط به ظاهر سایت می شود و به زیبایی سایت می پردازد. UX بر عکس UI عمل می کند و در طراحی سایت، بین طراحی سایت و نیازهای کاربر هماهنگی ایجاد می کند. بزرگترین تفاوت UI و UX در افزایش وفاداری کاربران و بالا بردن رتبه سایت می باشد که اینکار را UX انجام می دهد. دیگر تفاوت UI و UX را می توانید در جدول زیر مشاهده کنید.

برای درک بهتر تفاوت UI و UX به مثال زیر توجه نمایید تا بهتر بتوانید تفاوت این دو را از هم تشخیص دهید.

مثال: بخش فیلتر محصولات 

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

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

ارتباط UI و UX

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

نکته‌

UI و UX دو مفهوم جدا نشدنی در طراحی سایت هستند. فراموش نکنید که برای داشتن یک تجربه ‌ی کاربری عالی باید یک رابط کاربری یا ظاهر عالی داشته باشید. با هر تغییری که در UI به وجود می آورید، بر روی تجربه کاربری تاثیر می گذارید. فراموش نکنید که تنها با داشتن UX و UI مناسب و شناخت تفاوت UI و UX می توانید کاربر را جذب سایت خود نمایید.

شغل:طراحی وب

درآمد:۱۳۰ هزار دلار سالانه

مکان:هر کشوری دوست داری

مسیر: ۷ دوره آموزشی

منتور ۲ :جلسه آنلاین با استاد

منتور ۱ : کافه گپ و گفت

بزن بریم