UI-UX

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

UI‌ چیست؟

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

طراحی رابط کاربری به کمک گرافیست‌های سایت و برنامه‌نویس Front-end پیاده سازی می‌شود. طراحی رابط کاربری مهم است زیرا کاربر مستقیماً با آن ارتباط دارد و معمولاً افراد به وب‌سایت‌هایی با UI ضعیف، کمتر اعتماد می‌کنند.

مثال‌هایی از UI

•     ظاهر منو چگونه است؟
•     رنگ دکمه‌ی جستجو با رنگ اصلی سایت هماهنگ باشد.
•     باکس مربوط به بنر‌ها تبلیغاتی چگونه طراحی شوند؟
•     برای مطالعه بیشتر در زمینه ui، به مقاله ui چیست؟ مراجعه نمایید.

UX چیست؟‌

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

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

مثال‌هایی از UX

•     در منو چه گزینه‌هایی قرار داده شوند.
•     باکس جستجوی کجای صفحه قرار بگیرد.
•     بنرهای تبلیغاتی کجای صفحه سایت باشند.

تفاوت UI و UX در چیست؟

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

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

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

متفاوت اما جدایی ‌ناپذیر!

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

نکته‌ی قابل توجه این است UI و UX دو بعد جدایی ناپذیر طراحی هستند. زمان‌های زیادی پیش می‌آید برای داشتن تجربه‌ی کاربری بهتر باید رابط کاربری و ظاهر را تغییر داد و هر تغییری در UI در تجربه‌ی کاربری تاثیر دارد.

نتیجه: با وجود تفاوت UI و UX در مفهوم اما این دو به صورت مکمل عمل می‌کنند. فقط با داشتن UX و UI مناسب می‌توانید نظر کاربر را جذب کرده و اهداف خود را در سایت به واقعیت برسانید.

فرآیند انجام طراحی UX در راه‌اندازی یک وب‌سایت

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

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

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

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

مراحل طراحی ux (تجربه کاربری) در ۵ گام

در این قسمت از مقاله، می‌خواهیم نحوه شروع یک پروژه UX را به شما نشان دهیم.

فرایند طراحی UX را می‌توان به پنج مرحله اصلی تقسیم کرد: تعریف محصول، تحقیق و تحلیل، طراحی، ارزیابی و سرانجام اجرای محصول نهایی!

۱- تعریف محصول و نیازهای کاربر

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

کاربر

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

برند

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

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

۲- تحقیق در مورد محصول

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

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

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

۳- تجزیه و تحلیل

در این مرحله از مراحل طراحی ux از تمام اطلاعاتی که در دو مرحله قبلی جمع‌آوری کرده‌اید استفاده می‌کنید تا مهم‌ترین عناصر را تجزیه و تحلیل کنید. در اینجا دو روش برای تجزیه و تحلیل تحقیقات آورده شده است:

    ایجاد پرسونای فرضی برای کاربر: ایجاد نمونه‌هایی از کاربران فرضی که از محصول فرضی استفاده می‌کنند.

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

4- طراحی

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

• اسکچ یا طراحی اولیه: یک طرح اولیه بر روی کاغذ که کلیات پروژه را نشان می‌دهد.
• ایجاد wireframe : راهنمای بصری ساختار صفحه وب‌سایت یا محصول می‌باشد.
• ایجاد طراحی مجدد با جزئیات بیشتر

۵- تست و آزمون

تست

بعد از اینکه طراحی محصول یا وب‌سایت به پایان رسید باید طرح موردنظر را مورد آزمایش و بررسی قرار دهید و ارزیابی کنید. برای اطمینان از کامل بودن محصول سه مرحله زیر را پیش ببرید:

• تست کاربر: تست اولیه برای قابلیت استفاده توسط تعدادی کاربر که با محصول واقعی در تعامل باشند.
• راه‌اندازی بتا: این یک نسخه محدود از محصول شما برای تعداد کمی از افراد با هدف پیدا کردن مسائل و تمیز کردن آنها قبل از عرضه آن به جهان است
• آزمایش داخلی: وقتی تیم شخصی شما از محصول استفاده می‌کند و جنبه‌های آن را آزمایش می‌کند.

آزمون و ارزیابی

در اینجا به محصول نهایی خود نگاهی بیندازید و سؤالاتی را از خود بپرسید:

• روند ما درست پیش رفت؟ و چرا؟
• کجا مبارزه کردیم؟ و چرا؟
• کاربران ما چگونه به محصول پاسخ می‌دهند؟
• آیا این مسائل و نکات درد آنها را حل کرده است؟
• از کجا می‌توانیم محصول را بهبود ببخشیم؟
• چه درس‌هایی می‌توانیم از این فرایند برای محصولات بعدی بگیریم؟

چگونه می‌توانیم طراح UI و UX شویم؟

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

طراحی UI و UX چیست؟

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

وظایفی که یک طراح رابط کاربری (UI) دارد؟

• بررسی پروژه و نیازسنجی
• طراحی بصری کاربر
• توسعه گرافیکی محصول
• برندینگ
• تحقیق درباره طراحی، تعاملی بودن و ریسپانسیو
• چیدمان راحت، استفاده از پالت رنگی و تایپوگرافی در محتوای سایت یا محصول، طرح‌بندی سازمانی
• نمونه‌سازی و ارائه طرح اولیه
• پیاده‌سازی و تعامل با توسعه‌دهنده محصول

وظایف یک طراح تجربه کاربری (UX) چیست؟

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

6 گام برای تبدیل شدن به یک طراح UI و UX

۱- یادگیری اصول طراحی

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

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

۲- یادگیری اصول تجربه کاربری

هر شخصی در طراحی تجربه کاربری باید مراحل پروسه و ایجاد یک پروژه را درک کرده و به‌کار گیرد.

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

مهمترین نکته‌ای که باید بدانید اینست که در این پروسه مسائل زیادی اتفاق می‌افتد که برای حل آن‌ها باید آمادگی لازم را داشته باشید و بدانید این روند تکرارشدنی و همیشه فعال است.

۳- یادگیری نرم‌افزارهای طراحی

برای طراح UI و UX شدن نیازمند ابزارهایی هستیم که بتواند این فرآیند را برایمان آسان‌تر کند. در زیر با ۳ ابزار طراحی آشنا می‌شوید:

• اسکچ: به ‌عنوان یک ابزار طراحی تجربه کاربری و رابط کاربری برای اکثر طراحان وب جایگزین فتوشاپ شده است.
• adobe XD: یک ابزار طراحی وب‌سایت است که به شما این امکان را می‌دهد که به ‌سادگی بتوانید مفهوم و یا نمونه‌ای را پیاده‌سازی کنید.
• فیگما: به شما امکان طراحی، نمونه‌سازی و جمع‌آوری بازخورد از دیگر طراحان را می‌دهد.

۴- تمرین و توسعه سلیقه طراحی

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

۵- مطالعه مقالات و کتاب‌های آموزشی

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

وب‌سایت‌ها:

• دوره‌های آموزشی دانشگاه Stanford در Lynda و Coursera و udmey
• uxpa
• uxdesign
• com
• awwwards

کتاب‌ها:

• Experience design
• Design for experience
• Ux team of one

۶- تقویت مهارت‌های ارتباطی

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