UI یا UX: نگاهی به تفاوت مابین فرایند طراحی رابط کاربری و طراحی تجربهٔ کاربری

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

چگونه کاربران متوجه UX می شوند؟
UX مخفف User Experience به معنی تجربهٔ کاربری است و همیشه همراه با کلمهٔ طراحی می‌آید و عموماً کسانی که طراحی یوایکس می‌کنند به طراحان تجربه کاربری مشهورند؛ اما این طراحان به طراحی چیزی که قابل مشاهده در طراحی یک محصول یا همان رابط کاربری (UI) است نمی‌پردازند بلکه UX عبارت از طراحی نامحسوس یک استراتژی است که برای ما یک راه‌حل به ارمغان می‌آورد.

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

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

معرفی چتر یوایکس 
این‌که UX چیست و چه نقش ارزشمندی دارد، به‌زیبایی در یک چتر نشان داده شده است؛ در یک سخنرانی برای DC Startup Weekend در سال 2011، فردی به‌نام Dan Willis برای نشان دادن مفهوم UX یک تصویر به شکل چتری نشان داد که اجزای UX را به‌خوبی ترسیم کرده است:

همان‌طور که در تصویر فوق مشخص است، ۶ بخش مجزا از یکدیگر اما زیر یک چتر منجر به ایجاد یک تجربهٔ کاربری خوب می‌شوند. به‌طورکلی، منظور از Visual Design همان خروجی کار است و دولوپر فرانت‌اند با کنار هم قرار دادن اجزای بصری، سعی در پیاده‌سازی رابط کاربری دارد.

Information Architecture (معماری اطلاعات) هم به این قضیه اشاره دارد که داده‌ها را بر چه اساسی دسته‌بندی کرده و درمعرض دید کاربر قرار دهیم که وی سردرگم نشود و به‌راحتی بتواند به آنچه نیاز دارد دسترسی پیدا کند.

Interaction Design هم مرتبط با چگونگی تعامل کاربر با وب‌سایت یا اپلیکیشن است. به‌عبارت دیگر، ما به‌عنوان یک طراح تجربهٔ کاربری می‌بایست همواره به این قضیه فکر کرده باشیم که نحوهٔ تعامل کاربران با محصول نهایی ما قرار است از طریق چه رودمپی (نقشهٔ راهی) طی شود.

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

User Research (تحقیقات در مورد کاربر) هم به‌طور خلاصه متمرکز بر درک نیازهایی کاربران، رفتارهای ایشان، دغدغه‌ها و انگیزه‌های ایشان از طریق گرفتن بازخورد است.

درنهایت هم به Content Strategy (استراتژی محتوا) می‌رسیم که مشخص می‌سازد محتوا -از هر نوع آن، از محتوای متنی گرفته تا ویدیو، پادکست، اینفوگرافی و غیره- از طریق چه بستری و به چه شکلی و در چه زمانی در دسترس کاربران هدف قرار گیرد.

این ۶ مورد در کنار یکدیگر منجر به این خواهند شد که بتوانیم ادعا کنیم توانسته‌ایم باموفقیت دست به طراحی یک تجربهٔ کاربری ایده‌آل زده‌ایم که البته در عمل با چالش‌های فراوانی همراه بوده و اصلاً کار ساده‌ای نیست!

چگونه یک رابط کاربری تأثیرگذار ایجاد کنیم؟ 
پیاده‌سازی رابط گرافیکی به‌طور معمول توسط یک دولوپر Front-end انجام می‌گیرد؛ این دست دولوپرها دوست دارند تا بیشتر روی نمود بیرونی وب‌سایت یا اپ موبایل کار کنند اما هنگامی که پای کدهای Back-end و تعامل با زبان‌های سمت سرور به‌میان می‌آید، ترجیح می‌دهند که این کار را به دولوپرهای بک‌اند واگذار کنند.

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

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

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

حال نوبت به نظرات شما می‌رسد. به‌نظر شما تفاوت‌های میان طراحی رابط کاربری و طراحی تجربهٔ کاربری چیست؟ نظرات و دیدگاه‌های خود را در این رابطه با ما و سایر کاربران سکان آکادمی به اشتراک بگذارید.