مراحل طراحی ui رابط کاربری

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

آخرین باری که در یک اپلیکیشن وارد شدید و آموزش کار با اپلیکیشن را مطالعه کردید به خاطر دارید؟ به نظر می رسد که طراحان رابط کاربری ذهن ما را خوانده اند. برای اینکه بدانیم چگونه می توانند ذهن را بخوانند و مراحل طراحی ui را انجام دهند با من همراه شوید.

مراحل طراحی ui چیست یا مراحل طراحی ux چیست؟

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

مراحل طراحی رابط کاربری، قدم به قدم

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

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

بسته به نوع طراحی یک طراح و میزان حساسیت او در طراحی این مراحل ممکن است زمان بیشتر یا کمتری نسبت به هم بگیرند. با هم نگاهی به اصلی ترین مراحل طراحی ui یا رابط کاربری بیاندازیم.

مرحله تحقیق

تحقیقات کاربر

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

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

پرسونا یا شخصیت کاربران

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

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

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

مرحله طراحی

وایرفریم ها

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

وایرفریم ها اولین ابزار برای طراحی تجربه کاربری بود که به وجود آمد و بسیار ساده و کارآمد با انواع نرم افزار و حتی با یک مداد و کاغذ قابل پیاده سازی است.

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

نمونه سازی اولیه یا پروتوتایپینگ

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

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