نکات طراحی رابط کاربری که هر دیزاینری باید بداند
در این مقاله از مجله خانه فتوشاپ میخواهیم درباره نکات طراحی رابط کاربری صحبت کنیم که به شما کمک میکنند تا یک UI فوق العاده کاربرپسند طراحی کنید. پس با ما همراه باشید تا ۱۰ نکته مهم از نکات طراحی رابط کاربری را مرور کنیم.
۱۰ باید و نباید: نکات طراحی رابط کاربری
یک سایت چیزی بیشتر از چند صفحه اینترنتی متصل به همدیگر است. یک رابط است. فضایی که اطلاعات مختلفی روی آن قرار می گیرد. یک نفر یا یک شرکت میتوانند در آنجا به معرفی خود و محصولاتش بپردازد. افراد میتوانند از طریق آن با یکدیگر ارتباط برقرار کنند و کیفیت این تجربه نشان میدهد که شما به عنوان طراح رابط کاربری چقدر در کار خود خوب عمل کردهاید. نکات طراحی رابط کاربری که در ادامه به آنها می پردازیم از این جهت ارزشمند هستند که مطمئن میشوند یک تجربه کاربری خوب از طراحی شما به وجود خواهد آمد.
نکته مهم و طلایی این است که به کاربر بیشترین اهمیت را بدهید. همیشه با حق با مشتری است!
با اینکه رشته طراحی رابط کاربری یک شاخه جدید از طراحی و علم کامپیوتر به حساب می آید اما بسیاری از مطالعاتی که در زمینه علوم انسانی و تعاملات بین کامپیوتر و انسان انجام شده است به ما کمک میکند تا دید خوبی درباره رابط کاربری که قصد طراحی آن را داریم، داشته باشیم. این ۹ مورد از نکات طراحی رابط کاربری بر اساس چنین تحقیقاتی به دست آمده اند.
۱. مخاطب خود را بشناسید.
از مهمترین نکات طراحی رابط کاربری این است که بدانید کاربران شما چه افرادی هستند. همه چیز را درباره آنها مطالعه کنید. نه فقط به این معنا که به داده های دموگرافیکی که اپلیکیشن های آنالیتکز به شما میدهند توجه کنید. که البته مهم هستند. اما بیشتر از آن به این معنی که بدانید به چه چیزی نیاز دارند. چه چیزی باعث میشود که نتوانند به آنچه میخواهند برسند.
رسیدن به این سطح از همدلی نیاز به چیزی بیشتر از آمار و ارقام دارد. لازم است افرادی که از سایت شما استفاده میکنند را بشناسید. با آنها به صورت رو در رو صحبت کنید. ببینید که چطور از محصولات شما یا دیگران استفاده میکنند و از آنها سوالاتی بپرسید که رابطه تان را عمیق تر میکند. مثلاً «نظر شما درباره طراحی این محصول چیست؟»، «چه هدفی را دنبال میکنند» «چه چیزی مانع رسیدن آنها به اهداف شان شده است؟» « چگونه وب سایت شما میتواند در غلبه کردن به این چالش ها کمک شان کند؟»
صرفاً هم به این بسنده نکنید که کاربران چه چیزی از شما میخواهند. عمیق تر بررسی کنید و ببینید به چیزی در کل نیاز دارند. هر چه نباشد نیاز آنهاست که باعث میشود خواسته هایشان شکل بگیرند. اگر بتوانید عمیق ترین نیازهای کاربران را متوجه شوید، میتوانید به طور اساسی به خواسته هایشان بپردازید و رضایت شان را کسب کنید.
دیدی که بعد از بررسی آمار تحلیل رفتار کاربران و همینطور صحبت کردن با آنها به دست شما میآید، میتواند برای تصمیم گیری های شما مفید باشد. خصوصاً اینکه چطور رابط کاربری سایت یا اپ موبایلی را طراحی کنید و چه نوع محتوایی را برای چه دسته کاربرانی مهمتر جلوه دهید.
۲. مشخص کنید که کاربران چگونه از رابط کاربری شما استفاده میکنند.
قبل از اینکه طراحی رابط کاربری را شروع کنید باید تعریف کرده باشید که مردم چگونه باید از آن استفاده کنند. با افزایش استفاده از دستگاه های لمسی، تجربه کاربران از این نوع رابط های کاربری تغییر کرده است. به طور مثال در اپلیکیشن تیندر، تجربه کاربری حول محور سادگی و راحتی یک حرکت می چرخد.
به طور کلی کاربران از وب سایتها و اپلیکیشن ها به دو طریق استفاده میکنند: یکی مستقیم ( با ارتباط برقرار کردن با المان های رابط یک محصول) و دیگری غیر مستقیم (با تعامل با المان های رابط کاربری خارج از محصول).
مثال های تعاملات مستقیم:
- زدن روی یک دکمه
- Swipe کردن یک کارت
- درگ و دراپ کردن یک آیتم با انگشت
مثال هایی از تعاملات غیر مستقیم
- اشاره و کلیک با استفاده از ماوس
- استفاده از کلیدهای میانبر کیبورد
- تایپ کردن داخل یک فرم
- کشیدن روی یک تبلت وکام
اینکه کاربران شما چه کسانی هستند و از چه دستگاه هایی استفاده میکنند باید اطلاعات بسیار مهمی در اختیار شما بگذارد که پایه تصمیمات شما باشد. اگر برای افراد مسن برنامه ای طراحی میکنید یا افرادی که در کار کردن با اپلیکیشن ها محدودیت جسمانی دارند، احتمالاً نباید هیچ چیز را به عهده خود آنها بگذارید. اما اگر برای برنامه نویس ها یا مهندسین کامپیوتر رابط کاربری میسازید که خودشان با چگونگی کار کردن اکثر نرم افزارها آشنا هستند، کار سختی در پیش نخواهید داشت.
۳. انتظارات را تعیین کنید.
بیشتر تعاملات با یک سایت یا اپلیکیشن تبعاتی دارند: مثلاً کلیک کردن روی یک دکمه به معنای خرج کردن پول است. وقتی چنین آینده ای در انتظار کاربر باشد، هنگام فشردن آن دکمه فشار زیادی را متحمل خواهد شد.
پس مطمئن شوید که به کاربران توضیح دادهاید که وقتی روی یک دکمه کلیک میکنند چه اتفاقی می افتد. میتوانید از سایر طراحی های رایج در این زمینه کمک بگیرید.
تعیین انتظارات با استفاده از طراحی
- هایلایت کردن دکمه ای که بایستی برای رفتن به مرحله بعد از آن استفاده کرد.
- استفاده از نمادهای کاملاً رایج (مثلاً سطل زباله همه جا به عنوان نماد پاک کردن چیزی استفاده میشود یا دکمه + برای اضافه کردن چیزی.)
- استفاده از رنگ هایی که معنای مشخصی را می رسانند مثلاً برای دکمه رفتن به مرحله بعد یا تایید از رنگ سبز استفاده کنید و برای بستن پنجره یا لغو دستور از رنگ قرمز.
تعیین انتظارات با استفاده متون
- متن روی دکمه ها را واضح بنویسید
- در شرایطی که نیاز به راهنمایی است با یک ادبیات مناسب مراحل کار را توضیح دهید
- در موقعیت های لازم، هشدار بدهید یا برای تایید از آنها سوال کنید.
برای اقداماتی که امکان بازگشت آنها وجود ندارد، مثل پاک کردن همیشگی چیزی، حتماً از کاربران سوال بپرسید تا تایید کنند.
۴. آماده اشتباهات باشید.
مردم اشتباه میکنند اما قرار نیست تمام اشتباهات آنها تبعات بدی به همراه داشته باشد. دو راه وجود دارد که از خطای انسانی در رابط کاربری خود جلوگیری کنید.
- قبل از اینکه اتفاقی رخ دهد جلوی آن را بگیرید.
- راهی برای جبران آن اشتباه بعد از رخ دادنش در نظر بگیرید.
بسیاری از تکنیک های جلوگیری از اشتباهات در بحث فروش و طراحی فرم ها میتوانند موثر باشند. دکمه هایی که تا زمانی که تمام فیلدهای فرم را پر نکرده اید فعال نمی شوند. فرم هایی که تشخیص میدهند ایمیلی که وارد شده صحیح نمی باشد. پاپ آپ هایی که از شما می پرسند آیا از بستن این صفحه مطمئن هستید یا نه؟
اینکه از قبل انتظار اشتباهات را داشته باشید خیلی ساده تر از این است که راهی برای جبران آن اشتباهات به کاربران نشان دهید. به این خاطر که طی این فرایند حس رضایت مشتری تغییر میکند. هر بار که او روی دکمه بعدی کلیک میکند تا حدی مطمئن است که همه چیز را درست انجام داده؛ اما گاهی اوقات مجبور هستید اجازه دهید بعضی از اتفاقات بیفتند تا بعد به آنها رسیدگی کنید.
این اتفاق برای شرایطی است که متن پیام های خطا را می نویسید. در طراحی این پیغام ها مطمئن شوید به این دو نکته توجه میکنید.
- مشکل را توضیح دهید. مثلاً: «شما نوشته اید که در مریخ متولد شده اید که هنوز پای بشر در آن باز نشده است!»
- توضیح دهید که چگونه میتوانند این مشکل را رفع کنند: «لطفاً محل تولید خود را روی کره زمین وارد کنید!»
۵. خیلی سریع فیدبک یا بازخورد بگیرید.
یکی دیگر از نکات طراحی رابط کاربری به فیدبک یا بازخورد مربوط میشود. در دنیای واقعی فضای اطراف به ما بازخورد نشان میدهد. ما صحبت می کنیم و دیگران پاسخ میدهند. ما گربه را ناز می کنیم و او خُر خُر میکند. معمولاً رابط های کاربری در گرفتن فیدبک ضعیف عمل میکنند. گاهی نمی دانیم باید صفحه را رفرش کنیم، لپ تاپ را ریستارت کنیم یا صرفاً بنشینیم و منتظر بمانیم.
پس در چنین شرایطی یک صفحه لودینگ به کاربر نشان دهید. وقتی روی دکمه ای کلیک میکند آن را کمی تغییر سایز یا حرکت دهید تا متوجه شود. حتی میتوانید کمی فانتزی تر برخورد کنید و وقتی کاری با موفقیت انجام میشود، کاربر را تشویق کنید.
فقط مطمئن شوید که تمام این اتفاقات به سرعت می افتند. هر تاخیری بالای یک ثانیه به عنوان وقفه به حساب میآید. بالای ۱۰ ثانیه که کلاً به معنای خرابی سایت یا اپلیکیشن است. برای اکثر کاربران، بیش ااز ۳ ثانیه منتظر ماندن تقریباً غیر ممکن است. اگر صفحه ای زیر ۵ ثانیه لود میشود نیازی نیست که یک لودینگ بار به کاربر نشان دهید. چرا که در عمل لود صفحه را طولانی تر هم میکند.
۶. درباره محل قرارگیری المان ها و اندازه آنها حساس باشید.
یکی از اصول بسیار مهم در تعاملات انسان و کامپیوتر نکته زیر است:
هرچه آبجکتی بزرگتر یا نزدیکتر باشد، سریع تر میتوانید اشاره گر ماوس یا انگشت خود را روی آن بگذارید.
مسلماً این قانون تکلیف بسیاری از ابهامات در طراحی رابط کاربری را برطرف میکند. اما ۳ نکته مهم را فراموش نکنید.
دکمه ها و اهداف کلیک شدنی دیگر مانند آیکن ها و لینکها را به اندازه ای بزرگ کنید که بتوان به سادگی آنها را دید و روی آنها کلیک کرد. این مورد خصوصاً در بحث تایپوگرافی، طراحی منوها و سایر لیست های لینک شدنی، اهمیت پیدا میکند. اگر فضاهای مناسبی برای هرکدام از اینها در نظر نگرفته باشید، ممکن است کاربر روی لینک اشتباهی کلیک کنید.
پس دکمه هایی که برای عملیات رایج و مهم استفاده میشوند را بزرگ تر و مشخص تر طراحی کنید.
ناوبری سایت یا سایر المان های تعاملی مانند نوار جستجو را در گوشه صفحه قرار دهید. به این دلیل که کاربران کمتر به آنها نیاز پیدا میکنند. پس نیازی نیست که در دسترس همیشگی او باشد.
وقتی درباره نکات طراحی رابط کاربری در زمینه سایز المان ها و چیدمان شان صحبت می کنیم، همیشه باید نیم نگاهی به مدل تعاملی خود در ذهن داشته باشید. اگر سایت شما قرار است به صورت افقی اسکرول شود – به جای عمودی – باید به نوعی این نوع تعامل متفاوت سایت خود را به کاربر نشان بدهید تا سردرگم نشود.
۷. به استانداردها توجه کنید.
بعضی از طراحان به اسم بسیار خلاق بودن همه استانداردها را کنار می زنند. توجه داشته باشید که از مهم ترین نکات طراحی رابط کاربری، تسلط به استانداردها است. چرا؟ چون کاربران معمولاً با طراحی های استاندارد سریعتر ارتباط برقرار میکنند. نیازی نیست در هر مرحله ای چرخ را از ابتدا طراحی کنید. به همین خاطر است که بسیاری از نرم افزارها در نسخه های جدید وقتی رابط کاربری خود را طراحی میکنند، معمولاً کلیت آن را حفظ میکنند.
۸. کار کردن با رابط کاربری شما بایستی آسان باشد.
وقتی صحبت از سادگی باشد مردم معمولاً به سراغ یکی از تحقیقات هاروارد با نام «عدد ۷ جادویی، به علاوه یا منهای ۲» می روند. این مقاله میگوید که مردم تنها میتوانند بین ۵ تا ۹ چیز را در حافظه کوتاه مدت خود نگه دارند. پس هرچه موارد ساده تر باشند، شانس به خاطر سپاری آنها در حافظه کوتاه مدت بیشتر است.
هر زمان که فرصتش پیش آمد، تعداد چیزهایی که یک شخص باید در آن واحد به خاطر بسپارد را محدود کنید تا رابط کاربری شما بهینه و موثر واقع شود. این کار را میتوانید با تکه تکه کردن اطلاعات انجام دهید. نیازی نیست در هر مرحله چندین و چند سوال از کاربر بپرسید. مراحل را بیشتر کنید.
این وظیفه طراح رابط کاربری است که پیچیدگی یک سایت یا اپلیکیشن را پشت سادگی رابط کاربری خود پنهان کند. در همین راستا بهتر است از قرار دادن دکمه های « مطالعه بیشتر» یا «توضیحات بیشتر» خودداری کنید. چرا که به کاربر نشان نمی دهد که با کلیک روی آن دکمه قرار است چه نوع اطلاعات بیشتری به دست بیاورند. معمولاً کاربران در صفحات سایت به دنبال دکمه ای می گردند که آنها را به جایی که میخواهند ببرند. پس دیدن ده دکمه که همگی یک نوشته یکسان دارد، کمکی به آنها نخواهد کرد.
۹. تصمیم گیری را ساده کنید.
وقتی کسی صفحه سایتی را باز میکند و از همان ابتدا یک پاپ آپ کل صفحه را می پوشاند، یا یک بنر روی کل صفحه نمایش داده میشود، یک کادر باز میشود که از ما میخواهد ایمیل خود را وارد کنیم تا برای ما مطالب روزانه بفرستد، در حالی که حتی هنوز ندیدیم سایت چه چیزی برای ارائه دارد، چندان اتفاق جالبی نیست. پس کاربر را با حجم درخواست ها و تصمیم گیری های زیاد بمباران نکنید.
هرچه گزینه هایی که به کاربر می دهید بیشتر باشد، تصمیم گیری برای او سخت تر خواهد بود. پس طراحی خود را ساده تر انجام دهید تا همه چیز سریعتر پیش رود.
۱۰. به داده ها توجه کنید.
آخرین مورد از نکات طراحی رابط کاربری را هم جدی بگیرید. با آنکه شاید دلتان بخواهد یک طراحی جذاب و منحصر به فرد داشته باشید، واقعیت این است که بهینه بودن و سادگی از نظر کاربران بیشتر ارزشمند است. پس پیشنهاد می کنیم که بعد از تغییر رابط کاربری، سیستم آنالیز سایت خود را راه بیندازید تا ببینید که چه داده هایی به دست می آورید. در چه صفحاتی کاربران سایت را رها میکنند. چه مشکلاتی در تعامل با سایت دارند. گوگل آنالیتیکز در این حوزه میتواند بسیار مفید باشد.
طراحی رابط کاربری را یاد بگیرید
اگر به این رشته علاقه دارید اما هنوز هیچ ابزاری برای پیاده سازی طراحی رابط کاربری یاد نگرفته اید، ما پیشنهاد می کنیم در دوره طراحی UI با ادوبی ایکس دی شرکت کنید. در این دوره استانداردهای طراحی گوگل و سایر پلتفرم های معروف را یاد می گیرید. ابزارهای ایکس دی را مسلط میشود و چند پروژه UI واقعی را تکمیل میکنید. همین حالا روی تصویر زیر کلیک کنید و سرفصل های دوره را ببینید.
درباره سپیده خسروآبادی
از بچگی به هنر و گرافیک علاقه داشتم. تو دانشگاه رشته تکنولوژی نرم افزار رو انتخاب کردم و کم کم به سمت گرافیک کامپیوتری کشیده شدم. حالا سالهاست که نرم افزارهای محبوب این حوزه رو تدریس میکنم و درباره گرافیک مینویسم. با کلیک روی دکمه زیر میتونید نوشته های من رو دنبال کنید.
نوشته های بیشتر از سپیده خسروآبادی
دیدگاهتان را بنویسید