تفاوت طراحی ui و ux
1399-07-23

طراحی ui و ux چه تفاوتی دارند؟

شناخت طراحی رابط کاربری و طراحی تجربه کاربری

مطلب امروز ما درباره تفاوت ui و ux می‌باشد. تا چه‌حد با این مفاهیم آشنا هستید؟

برای آشنایی بیشتر با این دو مفهموم کافیست با ما همراه شوید.

حال میخواهیم مطلب را با این جمله از راهول ورشنی که یکی از مؤسسین شرکت foster.fm است، شروع کنیم. راهول ورشنی میگوید:

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

اگر کمی با دنیای طراحی، مخصوصا طراحی وب آشنا باشید در صحبت‌های عامیانه متخصصین این حوزه دو واژه ui وux را بسیار شنیده‌اید؛ دو سر واژه‌ای که همیشه کنار هم می‌آیند. اما معنی این‌ها چیست؟ آیا باهم تفاوتی دارند؟

بد نیست قبل از شروع و در همین ابتدا بدانید که واژه ui مخفف عبارت User Interface به معنای رابط کاربری و واژه ux، مخفف عبارت User Experience به معنای تجربه کاربری می‌باشد.

آموزش html css

طراحی UX چیست؟

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

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

طراحی UI چیست؟

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

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

مثالی برای درک بهتر:

پس متوجه شدیم منظور از طراحی ui و ux چیست. در ادامه برای درک بهتر موضوع، مثال‌هایی آورده‌ایم که کاملا این دو واژه را بشناسید.

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

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

مثالی برای درک بهتر ux و ui

 

تفاوت بین UI و UX:

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

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

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

  • برای داشتن طراحی UX باید به مفاهیم روانشناسی دقت کرد. به همین دلیل این نوع طراحی انتزاعی است درحالی که در طراحی ui از ابزارهای عینی و قابل مشاهده استفاده می‌شود.

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

تفاوت بین ui و ux

کلام آخر:

خب دوستان با مفهوم و تفاوت ux و ui آشنا شدید. اکنون می‌توانید منظور را از جمله راهول ورشنی متوجه شد. به طور کلی بنا برگفته‌ی طراح معروف Nick Babich:
"در طراحی دو نکته مهم وجود دارد: امکانات و جزئیات!"

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

مقالات مرتبط

تفاوت dp و px در برنامه نویسی اندروید

واحد های اندازه گیری اندروید
زهرا چگینی
10

به نظر شما تفاوت dp و px در برنامه نویسی اندروید، این دو واحد اندازه گیری چیست؟ پس ما را همراهی کنید.

delegate چیست؟

Delegate ها چرا به زبان سی شارپ اضافه شدند؟
مرضیه فتاحی
15

delegate چیست؟ چه کاربردی دارد؟ چگونه و در چه موقعیت هایی باید ازآنها استفاده کرد؟ با ما همراه شوید تا تمامی این سوال ها دریابید.

اکشن (Action) در سی شارپ، راهی برای خواناتر شدن کدها

موارد استفاده ی Action در سی شارپ
زهرا چگینی
10

Action در سی شارپ از پایه و اساس Delegate ها استفاده میکند، درحقیقت همان Delegate های هستند که کار را برای ما راحت تر میکنند.

Extension method درسی شارپ، راهی برای کارایی بالا در کدها

اکستنشن (extension) درسی شارپ
مرضیه فتاحی
10

هدف ما دانستن نکات مهمextension method در سی شارپ، نحوه استفاده و همچنین کاربرد آن در کدنویسی است. پس با ما همراه شوید.

لیست کامل تگ های html که هیچ کس به شما نخواهد گفت

آشنایی با تگ های html
زهرا چگینی
15

تگ ها در html نقش مهمی دارند زیرا تمامی کارهای html با تگ انجام می‌شود. به همین دلیل ما یک لیست کامل از تگ‌های html برای شما آماده کرده‌ایم تا از آن استفاده کنید.

ویژگی های جدید asp.net core که حیرت برنامه نویسان را برانگیخت

معرفی ویژگی های جدید asp.net core از مایکروسافت
مرضیه فتاحی
10

ویژگی های جدید asp.net core چیست؟ مایکروسافت در این نسخه چه امکاناتی را برای برنامه نویسانش قرار داده است. اگر شما هم خواهان دانستن این مطالب هستید، ما را همراهی کنید.