تعاریف فرآیند طراحی تجربه کاربری

توسط پرهام

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

چند مفهومی که در فرآیند طراحی تجربه کاربری و رابط کاربری خیلی کاربرد دارد:

  • اسکچ
  • وایرفریم
  • پروتوتایپ
  • رابط کاربری
  • UI Kit
  • Mockup
  • User Flow

اسکچ

یکی از اولین کارهایی که در مرحله ایده پردازی غالبا انجام می‌شود تا درباره بک طرح صحبت کرد و منظور طراح را بیان کرد اسکچ است.
اسکچ می‌تونه به صورت کلی باشه و یا اینکه کمی جزئیات را شامل بشه و حتی برای جذابیت بیشتر به صورت طراحی شود، من گاهی رنگی طراحی می‌کنم و از ماژیک‌های PITT Artist Pen فابر کاستل استفاده می‌کنم.
من خودم از مداد و کاغذ نقطه‌ای (معمولا دفتر نقطه‌ای مثلث) استفاده می‌کنم و گاهی از اپ Paper روی آی‌پد استفاده می‌کنم تا بتونم طراحی‌ها را در قالب یک دفترچه به صورت دیجیتال داشته باشم.

وایرفریم

در مرحله بعد معمولا وایرفریم طراحی می‌شه، وایرفریم نتیجه یکی از اسکچ‌هایی است که نهایی شده است و جزئیات دقیق‌تری از طرح را بیان می‌کند که برای طراحان بصری قابل فهم است.
وایرفریم را می‌توان به صورت دستی روی کاغذ شطرنجی یا نقطه‌ای طراحی کرد ولی ابزار مناسب نرم‌افزارهایی نظیر Axure یا Justinmind یا ابزار آن‌لاین wireframe.cc هست

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

نمونه وایرفریم

پروتوتایپ

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

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

بحث پروتوتایپ فوق‌العاده مفصل است و توی چندین پست در موردش توضیح خواهم داد.

رابط کاربری

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

 

نمونه UI Kit

 

Mockup

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

User Flow

در نهایت چیزی که تحویل سایر تیم‌ها خواهد شد یک پروسه
توی مطالب بعدی درباره مواردی نظیر User Flow و غیره خواهم نوشت که چگونه باید باشد.

 

البته این مفاهیم ممکن است در هر تیم یا محصولی متفاوت باشد ولی تعاریف متداول موارد بالا است.