طراحی تجربه کاربری و رابط کاربری چیست؟

در ابتدا بیایید کمی بیشتر با مفهوم این دو اصطلاح آشنا شویم:

UI یا رابط کاربری چیست و به چه معناست؟

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

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

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

UX یا تجربه کاربری چیست و به چه معناست؟

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

با یک مثال به تفاوت UI و UX می پردازیم، فکر کنید قرار است دکمه Close (یا همان ضربدر قرمز رنگ پنجره My Computer) را طراحی کنیم، انتخاب رنگ قرمز و نماد ضربدر مربوط به UI می باشد، در اینجا استفاده از رنگ سبز و دکمه به اضافه معنی اشتباهی را می رساند. (یعنی کاربر با دکمه ضربدر به فکر حذف و با دکمه به اضافه به فکر اضافه کردن چیزی می افتد.)
بعد از طراحی UI نوبت به انتخاب یک مکان برای دکمه Close می رسد تا کاربر با آن راحت کار کند که به آن UX گفته می شود، اگر ما دکمه را وسط صفحه قرار دهیم، کاربر به کرات اشتباهاٌ روی آن کلیک می کند و حس بدی به او منتقل می شود، پس بهتراست مکان مناسب تری برای آن انتخاب شود (بهترین مکان گوشه بالا سمت راست می باشد.) که کاربر در صورت لزوم به آن قسمت برود و خیلی کمتر اشتباهاَ روی آن کلیک کند.

اما با وجود همه ی تفاوت های موجود UX و UI کاملا مکمل همدیگر هستند .

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

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

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

طراحی تجربه کاربری را می‌توان در ۶ بخش اصلی دسته‌بندی کرد، که عبارتند از:

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

معتبر بودن محتوا: مورد بعدی که باعث اعتماد کاربر به یک محصول یا سرویس می‌شود، ارائه‌ی محتوای معتبر به وی می‌باشد، به عنوان مثال در یک متن خبری حتما منبع رسمی خبر را ذکر کنید و همچنین از نوشتن متن به صورت عامیانه جدا خودداری کنید.

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

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

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

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

در پایان UI و UX چه تفاوتی با هم دارند!

حتما تا به حال با تفاوت‌های UI و UX آشنا شده‌اید، در ادامه به طور خلاصه به بررسی این مورد می‌پردازیم:

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

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

در یک جمع‌بندی نورمن دان و جیکوب نیلسن (Jakob Nielsen) به طور کامل این تفاوت را توضیح می‌دهند:

فرق گذاشتن بین تجربه کاربری کامل از رابط کاربری (UI) مهم است، حتی با آن‌که رابط کاربری یقینا بخش بسیار مهمی از طراحی است.

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

ولی زمانی که شما در آن کادر جستجو چیزی تایپ می‌کنید، به تقریبا تمام دانش دیجیتالی شده‌ی انسانی در کسری از ثانیه دسترسی دارید.

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

(برای مشاهده بهترین و جدید ترین نمونه کارهای طراحان گرافیک در جهان به دو وبسایت زیر سر بزنید)

DRIBBBLE

BEHANCE

منابع : عرفان سراج