تفاوت UI (واسط کاربری) و UX (تجربه ی کاربری)

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

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

UX زمانی به وسیله ی دانشمند شناخته شده "دونالد نورمن" در اوایل دهه ی 1990 ابداع شد که معاون گروه تکنولوژی پیشرفته ی شرکت اپل بود. او اینگونه UX را معنی می کند: "تجربه ی کاربری" همه ی تقابل های کاربر با شرکت، خدمات، و محصولات آن را در بر میگیرد.
طراحی تجربه ی کاربری (UX) پروسه ای است از افزایش رضایت کاربر به وسیله ی بهبود قابلیت استفاده، دسترسی و تقابل بین محصول و کاربر. UX طراحی مواجه سنتی انسان با کامپیوتر را گرد آوری کرده و آن را با نشان دادن محصول یا سرویس به همان شکلی که کاربر می شناسد توسعه می دهد.
UX محدود به رابط تصویری محصول شما نیست. بلکه یک مفهوم است که ابعاد وسیعی دارد و همه ی تجاربی که یک شخص می گذراند را در بر می گیرد؛ از جمله:

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

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

UI (واسط کاربری) چیست؟

در دهه ی 1970 اگر می خواستید با یک کامپیوتر کار کنید باید از خط فرمان رابط استفاده می کردید. نمی توانستید یک کامپیوتر با موس، آیکون، دگمه ویا گرافیک بخرید زیرا آن ها هنوز وجود نداشتند. برای آن که بتوانید به وسیله ی کامپیوتر کاری را که می خواهید انجام دهید، باید با زبان برنامه نویسی کامپیوتر صحبت می کردید.
در سال 1981 یک گروه از دانشمندان کامپیوتر در زروکس پی ای آر سی " ستاره ی زروکس" (یک کامپیوتر شخصی با اولین رابط کاربری گرافیکی) را توسعه دادند و روانه ی بازار کردند. که این دستگاه از پنجره، آیکون، کلید رادیو، منوی دراپ داون و چک باکس استفاده میکرد. و به کاربران اجازه می داد فایل ها را باز کنند، حرکت دهند، یا حذف کنند.
ممکن است خیلی قابل مقایسه با آن چه امروز در دسترس است نباشد، اما در اولین عصر های کامپیوتر شخصی UI (واسط کاربری) یک انقلاب به شمار می آمد. و به این معنا بود که دیگر نیازی نبود شما برای استفاده از کامپیوتر به کد نویسی ملزم باشید. این موضوع دسترسی به داده ها را بسیار زیادتر می کرد.
تیم کامپیوتری اپل توسعه و گسترش ایده ی UI (واسط کاربری) را ادامه داد. و در سال 1984 اولین مکینتاش را روانه ی بازار نمودند، که اولین کامپیوتر رومیزی بود که از رابط با چند پنجره و یک موس استفاده می کرد.
پیدایش UI (رابط کاربری) نیازمند نسل جدیدی از طراحان بود. طراحانی که روی رابط گرافیکی کامپیوتر های شخصی متمرکز بودند. و این هنگامی بود که طراحان UI وارد صحنه شدند. امروزه طراحان UI (رابط کاربری) در حال کار بر روی وب سایت ها، اپلیکیشن ها و برنامه های دیگر هستند. آن ها احتمالا مسئول کار هایی مثل طراحی طرح رابط محصولات دیجیتالی و عناصر دیداری در همه ی صفحات سیستم هستند.

تفاوت UI (واسط کاربری) و UX (تجربه ی کاربری):

دون نورمن و جیکوب نیلسن این تفاوت را به طور خلاصه بیان کرده اند: "تشخیص دادن UX (تجربه ی کاربری) از UI (واسط کاربری) بسیار مهم است. البته به طور اشکار UI (واسط کاربری) بخش بخش مهم تری در طراحی است."
گوگل هم می تواند مثال خوبی باشد. رابط ساده ای دارد. چیز زیادی پیدا نمی شود که با UI (واسط کاربری) در ارتباط باشد. فقط یک لوگو، محل جستجو، چند کلید و صفحه ی نتایج جستجو. اما هنگامی که شما چیزی در جایگاه جستجو می نویسید در کم تر از یک ثانیه به تقریبا تمام دانسته های شماره گذاری شده ی بشری دست پیدا می کنید. اکنون تصور کنید هر بار که می خواستید چیزی در گوگل جستجو کنید 15 ثانیه طول می کشید تا به نتایج برسید. در آن صورت شما دیگر قادر نبودید فورا به پاسخ سوال خود برسید. حتی اگر رابط کاربری هم تغییری نمی کرد، تجربه ی کاربری شما با گوگل کاملا متفاوت می شد.
نظرات برخی از پیش کسوتان طراحی پیرامون تفاوت های UX (تجربه ی کاربری) و UI (واسط کاربری):

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

10ابزار طراحی UI و UX یا طراحی رابط کاربری و تجربه کاربری​

1.اسکچ

اسکچ (sketch) به عنوان یک ابزار طراحی تجربه کاربری و رابط کاربری برای اکثر طراحان وب جایگزین فتوشاپ شده است. ما با آنچه که کاملا مبرهن است بحث را شروع می کنیم. بله ما در جریانیم که همه از ابزار طراحی UI وکتور کدینگ بوهمین اسکچ چیزهایی شنیده اید اما به نظر می رسد که طراحان وب زیادی هنوز برای طراحی UX و UI از فتوشاپ استفاده می کنند و به آن اعتماد دارند ( و این علی رغم انتشار نسخه Adobe XD است که یک ابزار نمونه سازی و قاب مانند می باشد، یکی از افزونه های جدیدتری از Creative Cloud )

2. ادوب XD

adobe XD یک ابزار طراحی وب سایت است که رقیب اسکچ است دارای رابطی روشن می باشد که به شما این امکان را می دهد که به سادگی بتوانید مفهوم و یا نمونه ای را پیاده سازی کنید. ابزار طراحی برداری (وکتور) و قاب گونه ادوب، ادوب XD، مدام در حال بهتر شدن است. در سال پیش Adobe MAX را معرفی کردند که شامل نمونه اولیه صوتی می باشد. XD شامل ابزارهای نقاشی است که این ابزارها به شما امکان تعریف تعاملات غیر استاتیک و پیش نمایش های موبایلی و دسکتاپی را می دهد و ابزارهای به اشتراک گذاری نیز به منظور بازخورد درمورد طراحی مورد استفاده قرار می گیرند. این ابزار به شما امکان انتخاب یک سایز هنری برای یک دستگاه خاص برای شروع پروژه را می دهد و شما می توانید یک ابزار UI مشهور مانند google material design را ایمپورت کنید.

3. فیگم

فیگما (Figma) به شما امکان طراحی، نمونه سازی و جمع آوری بازخورد از دیگر طراحان را می دهد.

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

4. وانت
وانت ( vaunt ) یک ابزار جذاب برای استخراج رنگ های غالب در یک تصویر است.

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

5. لینک اسپلیت

لینک اسپلیت ( linkspllit ) انجام تست A/B را سریع و ساده می سازد.

موثرترین راه برای بهتر کردن وب سایتتان استفاده از تست A/B می باشد، تقسیم ترافیک بین دو یا چند نسخه بیشتر و دیدن اینکه کدام عملکرد بهتری دارد. این ابزار انجام این کار را خیلی ساده تر می کند. این ابزار برای ده هزار کلیک اول رایگان است و حتی برای شروع نیز نیاز به ثبت نام ندارد.

​6. طراح افینیتی

طراح افینیتی (Affinity tools) در آیپاد و دسکتاپ عملکردی قوی دارد.

به گفته دن وادواردز طراح محصول، “طراح افینیتی سریف از نظر بعضی ها در واقع قاتل فتوشاپ است، دلیل آن نیز واضح و مبرهن است. اولین تاثیراتی که گرفتم برای این بود که این اپ به شدت طراحی خوبی دارد و به نظر برای این ساخته شده که یک ابزار طراحی گرافیکی و وب باشد. این ابزار چندین ویژگی دارد که من خیلی از آ ن ها لذت بردم، از جمله اینکه قابل تنظیم است و لایه های آن نیز غیرمخرب است. بدین معنی که شما می توانید تصاویر با بردارهایی را بدون اینکه به آن ها آسیبی برسانید تنظیم کنید. زوم یک میلیون برابری آن نیز یک ویژگی فوق العاده است؛ این ویژگی زمانی به کار می آید که با یک وکتور آرت (Vector art) در حال کار باشید چراکه می توانید کاملا به آن نزدیک شوید. ویژگی های آندو و تاریخچه نیز بسیار به درد بخورند: افینیتی به شما این امکان را می دهد که 8000 قدم به عقب برگردید!”

7. فلیر

فلیر ( Flare ) یک ابزار جدید برای طراحی و انیمه سازی وکتور آرت است.

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

8. ویوالدی

ویوالدی ( Vivaldi ) قابل تنظیم ترین بروزری است که تا بحال دیده اید.

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

9. زپلین

زپلین ( zeplin ) فایل های اسکچ یا فتوشاپ را تبدیل به یک اپ مک، ویندوز و یا مبتنی بر وب می سازد.

آیا تا بحال منابعی از طراحی را دیده اید که برای برنامه نویسان زحمت درست کنند؟ جیمز استیف در پاسخ می گوید: بله حتما دیده اند. “آن ها همیشه نرم افزار مشابهی را به اشتراک نمی گذارند، لذا آن مدل های حاشیه ای فتوشاپ در نهایت تبدیل به فایل هایی مسطح می شوند و ناگریز در این بین چیزهایی از بین می روند”

10. فایرفاکس ریلیتی

فایرفاکس ریلیتی ( FireFox Reality ) یک بروز جدید به خصوص برای دستگاه های VR است.

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