راهنمای طراحی سازگار: بهترین روش برای طراحان UI و UX

راهنمای طراحی سازگار: بهترین روش برای طراحان UI و UX

راهنمای طراحی سازگار: بهترین روش برای طراحان UI و UX 1200 696 حنانه روشنی

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

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

۱.تحقیق در خصوص مخاطبان

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

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

اینجا تعدادی از اهداف مخاطبان را مشاهده می‌کنیم:

–          مشاهده برنامه‌های ویژه بدون در نظر گرفتن بازه زمانی

–          مقایسه برنامه سفرها با یکدیگر

–          مشاهده پیشنهادات دیگران در خصوص سفر در تعطیلات

–          فیلتر کردن سفرها با توجه به بودجه

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

 

با طراحی‌های رایج در UI دوست باشید

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

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

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

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

  1. برای حفظ ثبات در طراحی، الگوهایی مخصوص به خود بسازید

یکی از نکات کلیدی در خصوص طراحی با ثبات UI کاهش تعداد اکشن‌های موردنیاز برای انجام یک کار است. اگر انجام یک کار در برنامه شما نیازمند ۴ اقدام از سوی مخاطب است، به راحتی می‌توانید این تعداد را به ۲ اقدام برسانید. ارتقای طراحی با این گونه اقدامات ممکن خواهد بود و چنین موضوعی در طراحی UI بسیار با اهمیت است.

 

اهمیت سلسله مراتب در طراحی

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

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

عناصر و اِلِمان های مورد استفاده در طراحی

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

عناصر و اِلِمان های مربوط به برندینگ

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

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

اطمینان حاصل کنید که دقیقا از رنگ هایی که کمپانی اعلام کرده برای طراحی بهره برده باشید.

تایپوگرافی
از عناصری با تاثیرات بصری مانند تایپوگرافی همیشه باید برای طراحی محصولی مربوط به یک نام تجاری استفاده کرد.
به طور کلی عناصر بصری اهمیت بسیاری در طراحی یک محصول دارند. شما می‌توانید با ایجاد اندکی تغییر در یک تایپوگرافی ساده (تغییر فونت، سایز و …) یک برتری و امتیاز ویژه برای خود ایجاد کنید.
اجزا طراحی
در طول تحقیقات، با الگوهای UI و اجزای آن‌ها آشنا شوید. دانستن اینکه چگونه هر مولفه رفتار می‌کند، در داخل الگو و در خارج از آن، به طراحان اجازه می‌دهد به درستی تمام عناصر روی صفحه را بدون  هیچگونه خطا و ایرادی، اولویت‌بندی کنند.
“اجزاء” می‌توانند به تعداد عناصر تشکیل دهنده یک الگو اشاره کنند، مانند:
• دکمه‌ها
• کارت‌ها
• فرم‌ها
• لیست‌ها
• پنل‌ها
• نمودار پیشرفت
همان‌طور که فریم‌ها را آزمایش می‌کنید، متوجه می‌شوید که یکی از صفحه بندی‌ها حدود ۲۰ آیتم راشامل می‌شود و یکی‌دیگر از صفحه بندی‌ها حدود ۴۰ آیتم. حال کدام‌یک از این طراحی‌ها صحیح است؟ این مثال نشان می‌دهد که چگونگی تصمیم‌گیری در مورد دستورالعمل‌های اولیه برای طراحی، پایه‌ای از یکپارچگی طراحی است.

یک سایت خلاقانه و با تمامی امکانات می‌خوام!

خوب جای درستی اومدی تخصص ما همینه

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

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

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

درنتیجه باید بدانیم که دقیقا چکار باید انجام دهیم تا با این مشکلات روبه‌رو نشویم. در تمام طول طراحی برنامه این سوالات را از خود بپرسید:

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

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

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

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

ساختار محتوا
محتوا نقش بسیار مهمی در میان عناصر UI دارد، چه یک محتوای ساده مانند نقشه راه برنامه برای مخاطب باشد چه یک محتوای پیچیده مانند اسناد (documents). این فقط کلمات نیستند که اهمیت دارند، بلکه چگونگی نمایش بصری آنها، مانند کپی صحیح بدنه متن، آیتم‌های لیست، محتوای جدول و غیره نیز بسیار مهم هستند.
به طور خاص توجه کنید که چگونه محتوای در این مناطق مورد استفاده قرار می‌گیرد:

جهت‌یابی
پایین افتادن
زمینه‌های فرم
پیام‌های اعتبار سنجی
راهنمایی ابزار
نمودار
نوشتن شرح تصاویر
پیغام خطا
بارگیری صفحه نمایش
صفحات تأیید
اسناد پشتیبانی محصول

ثبات در محتوا و برند
شما احساس زمانی را که بخشی از برنامه «حس بد بودن» به شما بدهد، درک می‌کنید. یکی از دلایل وقوع این اتفاق وجود برخی تضادها در محتواست. برای مثال وقتی در قسمتی از یک برنامه از «sign out» برای خروج استفاده می‌شود و در قسمتی دیگر از «log out» این موضوع حس بدی به مخاطب منتقل می‌کند.
حتی تناقضات ساده نیز می‌تواند این احساس بد را ایجاد کند.
برای کاربران نحوه نگارش و استفاده از علائم نگارشی نیز اهمیت دارد و باید در تمام طول برنامه روند ثابتی در خصوص این مسائل حفظ شود.
در دیگر مسائلی همچون تیترها، صداها و حتی تایپوگرافی‌ها که جنبه تصویری دارند نیز این مسائل باید رعایت شوند.
اگر اکثر محتوا از یک سبک ثابت استفاده کند که با “زبان برند” رسمی نزدیک است، این مشکلات کاهش می‌یابد.

 

یکشنبه‌ها قبل از شروع کار یک مقاله رایگان از لابراتوار رسانه برای بهبود کسب و کار خود دریافت کنید

این مقاله مفید بود ؟
چرا از این پست راضی نبودید ؟
تصویر کپچا

Subscribe for free resources and news updates.