بخش اول: معرفی و کلیات طراحی UX/UI

مطالبی که شما در این بخش از مقاله یاد خواهید گرفت:

 

• UI و UX چیست و به زبان ساده چه تفاوت هایی با هم دارند؟
• چرا UI و UX مهم هستند؟
• یک طراح UX چه کاری انجام می‌دهد؟
• یک طراح UI چه کاری انجام می‌دهد؟
• تفاوت بین طراحی UI و طراحی گرافیک به زبان ساده

 

UI و UX چیست و به زبان ساده چه تفاوت‌هایی با هم دارند؟

 (User Interface) UIبه معنای رابط کاربری و (User Experience) UXبه معنای تجربه کاربری، دو مفهوم بسیار مهم در طراحی محصولات دیجیتال هستند که اغلب به دلیل وجود یک سری مطالب مشترک و نقش‌های مرتبط و مکمل، با هم به اشتباه گرفته می شوند اما تفاوت های کلیدی زیادی در این دو مفهوم وجود دارد که دانستنشان برای تقویت مهارت های کاربردی و وارد شدن به حوزه طراحی ui/ux بسیار ضروری است.

برای درک بهتر این دو مفهوم، اجازه دهید ابتدا با یک مثال ساده شروع کنیم و سپس به‌طور مجزا و دقیق به مفهوم آن‌ها بپردازیم:

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

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

پس به صورت دقیق تر:

طراحی رابط کاربری (UI)

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

طراحان رابط کاربری باید مطمئن باشند که هر عنصری در محصول باید به کاربر یک حس مثبت القا کند.

 

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

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

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

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

هدف اصلی یک طراح UX این است که هر کاربر تعامل کارامد و مثبتی با یک محصول داشته باشد. این تعامل یک مشکل را حل کند، سرگرمی ایجاد کند یا به کاربر در یافتن اطلاعات مهم کمک کند.

 

چرا UI و UX مهم هستند؟

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

 

یک طراح UX چه کاری انجام می‌دهد؟

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

در ادامه به تمام این موارد خواهیم برداخت:

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

استراتژی محتوا بر روی برنامه‌ریزی محتوا، ایجاد محتوا و اجرای محتوا تمرکز دارد که می‌تواند شامل multimedia elements یا همان متن، تصاویر، ویدئو و... در یک صفحه یا اپلیکیشن باشد. استراتژی محتوا همیشه بر عهده طراح UX نیست، اما بسیاری از شرکت‌ها بر طراحی Content-driven تأکید می‌کنند تا تجربه کاربری مؤثرتری را ارائه دهند.

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

کارهایی که در استراتژی محتوای UX انجام می‌شود، عبارتند از:

• تحلیل رفتارها و نیازهای مخاطب
• بررسی، سازماندهی و نقشه برداری محتوا
• تحلیل رقبا

 

2. تست و نمونه‌سازی

تست و نمونه‌سازی بخش مهمی از فرآیند طراحی UX است. اکثر طرح‌ها قبل از نهایی شدن، چندین بار تغییر می‌کنند و نسخه‌های کپی این تغییرات در طول مسیر در جایی نگهداری می‌شوند. دانش روش‌های تحقیقاتی رایج (مانند A/B testing) هم یک مزیت برای طراحی UX به حساب می‌آید.

آزمایش A/B یک روش برای مقایسه دو نسخه از چیزیست تا مشخص شود کدام بهتر عمل می‌کند.

کارهایی که در تست و نمونه‌سازی انجام می‌شود، عبارتند از:

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

3. هماهنگی و تحلیل

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

کارهای رایجی که در هماهنگی و تحلیل انجام می‌شود، عبارتند از:

• برنامه‌ریزی برای طراحی محصولات یا خدمات
• تحلیل طرح‌ها و به‌روزرسانی آن‌ها در صورت نیاز
• پیگیری پیشرفت طراحی‌ها نسبت به اهداف  در طول زمان

 

4. تحقیق درباره مصرف‌کننده

بهترین طراحی‌های UX، ریشه در تحقیقات دقیق دارند. این تحقیقات به طراحان کمک می‌کنند تا راه‌حل‌های طراحی مؤثری برای مشکلات کاربران ارائه دهند. تحقیقات UX می‌تواند شامل پرسشنامه‌ها، نظرسنجی‌ها، تست محصول، روش تحقیقی گروه‌های متمرکز (Focus groups) و یا سایر روش‌های تحقیقاتی باشد.

* Focus groups جلساتی هستند که در آن‌ها گروهی از افراد با هم صحبت می‌کنند تا به ما کمک کنند محصول یا سرویسی را بهتر بشناسیم و بهبود دهیم.

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

 کارهای رایجی که در تحقیق درباره مصرف‌کننده انجام می‌شود، عبارتند از:

• طراحی ابزارهای تحقیقاتی
• برگزاری گروه‌های تمرکزی (Focus groups)
• تحلیل داده‌های پرسشنامه‌ها و نظرسنجی‌ها

 

یک طراح UI چه کاری انجام می‌دهد؟

طراحان UI بر جزئیات یک محصول نظارت دارند. آن‌ها مسئول انتخاب فونت‌ها، ایجاد عناصر بصری و اطمینان از جذابیت بصری و تناسب هر جزء یا صفحه با اهداف محصول هستند. طراحان UI تعیین‌کننده سبک  برند و عملکرد نهایی یک محصول هستند.

 

1. ایجاد و حفظ سبک برند

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

کارهایی که در ایجاد و حفظ سبک برند انجام می‌شود، عبارتند از:

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

 

2. طراحی بصری

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

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

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

3. طراحی تعاملی یا رابط کاربری پویا

بسیاری از طراحان UI عناصر پویا یک وبسایت را هم توسعه و پیاده‌سازی می‌کنند. این فرآیند می‌تواند شامل انیمیشن‌ها یا سایر عناصر تعاملی باشد که به دنبال ایجاد تعاملات معنی‌دار و جذاب بین کاربرو محصول هستند. برای مثال، یک طراح UI ممکن است یک انیمیشن برای وبسایت ایجاد کند که پس از کلیک کاربر روی یک دکمه فعال می‌شود.

مثال‌هایی از کارهای طراحی تعاملی یا رابط کاربری پویا در طراحی UI عبارتند از:

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

 

4. طراحی ریسپانسیو