نکاتی مهم برای استفاده درست از آیکون ها در نرم افزار
آیکون ها نقش مهمی رو در زندگی روزمره ما دارن. از علایم رانندگی در کوچه و خیابان گرفته تا نرم افزارهای تحت وب یا موبایل. تقریبا هر روزه با ده ها آیکون و نشانه متفاوت سر و کار داریم و معمولا مفهوم اونا رو از روی ظاهرشون می فهمیم. استفاده از آیکون ها زندگی ما رو راحت تر می کنه چرا که نماینده یک کلمه یا یک مفهومه و همچنین زیبایی بصری خاصی داره.
آیکون های نرم افزاری سال های سال هست که در نرم افزارها استفاده می شن و فواید زیادی هم دارن. اما اگر در طراحی یا انتخاب همین آیکون ها درست عمل نکنیم , می تونه کاملا کار رو خراب کنه و کاربرمون رو گیج کنه! 🙁
از این رو به بیان نکاتی پیرامون انتخاب درست آیکون و استفاده مناسب از اون می پردازیم تا مطمئن باشیم که بهترین استفاده رو از آیکون ها می کنید. 😉
آیکون باید مفهوم رو منتقل کنه
بعضی مواقع طراحان به عملکرد یک آیکون اهمیت نمیدن و فقط به زیبایی اون فکر میکنن! اولین و مهمترین هدف استفاده از آیکون , رسوندن یک مفهوم به کاربر هست و اگر این آیکون نتونه مفهومش رو به کاربر برسونه طرح رو دچار اختلال بصری میکنه و ارزش خودش رو از دست میده!
آیکون های زیادی هستن که به راحتی مفهوم رو به کاربر می رسونن. مثل آیکون خانه , چاپگر و یا ذره بین…
اما جدا از این نمونه ها , آیکون هایی هستن که معنی مبهمی برای کاربر دارن. برای مثال آیکون Game Center با چند دایره ی رنگی چه مفهومی داره؟ چطور این آیکون با “بازی کردن” مرتبطه؟ آیا گوگل در این رابطه بهتر مفهوم رو منتقل نکرده؟
شاید اگر بدونید که این آیکون Game Center مربوط به سرویس بازی هست , بتونید بینشون ارتباطی برقرار کنید. اما این مهم نیست! مهم اینه که یک کاربر برای اولین بار متوجه این ارتباط میشه و مفهوم اون آیکون رو درک می کنه؟
بزارید یه مثال بزنم.
وقتی گوگل تصمیم گرفت که رابط کاربری Gmail رو ساده تر کنه , تمام امکانات رو پشت یک آیکون قرار داد. نتیجه کار جالب بود. خیلی از کاربران از پشتیبانی در خواست کمک می کردن تا “تقویم گوگل” رو پیدا کنن!
دقت کنید که تمام کاربران شما مسلط و آشنا به نرم افزارهای مختلف نیستن تا با این قبیل آیکون ها آشنا باشن و شاید تنها سرویسی که استفاده می کنن , همین Gmail باشه!
برای رفع این مشکل به ۲ نکته توجه کنید.
- اگر بیشتر از ۵ ثانیه زمان میبره تا برای یک موضوع مشخص آیکون پیدا کنید , شاید اصلا استفاده از آیکون برای اون موضوع مناسب نباشه.
- از آیکون هایی استفاده کنید که حدس می زنید کاربر شما قبلا تجربه آشنایی با آن را داشته.
در استفاده از آیکون ها خلاقیت به خرج ندین
در اکثر مواقع , آیکون ها المان مناسبی برای نمایش خلاقیت شما نیست. مسلما خلاقیت در کار واقعا جذابه اما بهتره که این خلاقیت رو در جایی دیگه از طرح بروز بدید. آیکون هایی پیچیده و بیش از حد خلاقانه تاثیر منفی بر روی کاربران شما خواهد داشت. چرا که شاید خیلی از کاربران شما خلاقانه بودن اون آیکون رو درک نکنن و برداشت اشتباهی داشته باشن. آیکون ها باید به ساده ترین فرم تبدیل بشن تا در سایز های کوچک هم خوانایی مناسبی داشته باشن.
یک آیکون مناسب در اولین نگاه مفهوم رو به مخاطب منتقل میکنه.
از برچسب های متنی استفاده کنید
آیا می تونید مفهوم تمام این آیکون ها رو به درستی حدس بزنید؟
راه های متفاوتی برای بالا بردن میزان راحتی کاربر وجود داره و مهم ترین اون کم کردن بار فکری کاربر هست. یک طرح مناسب باید کاربر رو به راحتی به سمت کاری که می خواد انجام بده هدایت کنه. یک مشکل رایج در آیکون ها این هست که هر کاربر با توجه به تفکرات خاص خودش , برداشت خاصی از مفهوم یک آیکون داره.
برای رفع این مشکل میشه در کنار هر آیکون , برچسبی برای راهنمایی قرار بگیره.
- آیکون به همراه برچسب : بعد از کلیک بر روی آیکون , ۸۸% کاربران نتیجه ای رو دیدن که انتظارش رو داشتن.
- آیکون بدون برچسب : این آمار به ۶۰% کاهش پیدا کرد و همچنین برای آیکون هایی که به صورت اختصاصی برای یک نرم افزار خاص طراحی شدن این آمار به ۳۴% میرسه!
اندازه آیکون ها در موبایل باید مناسب لمس کردن باشه
تقریبا اکثر افراد در حال حاضر از رابط کاربری لمسی هم استفاده میکنن. به همین دلیل باید اندازه مناسبی برای آیکون ها در نظر بگیرید تا به راحتی کاربران بتونن اونا رو لمس کنن. تصویر زیر نشون میده که عرض انگشت اشاره یک کاربر بالغ به طور متوسط ۱۱ میلیمتر هست. در حالی که عرض انگشت اشاره یک نوزاد ۸ میلیمتر و یک بازیکن بسکتبال تا ۱۹ میلیمتر متغیره.
باور کنید یا نه , خیلی از آیکون های استفاده شده در نرم افزارها , از اندازه انگشت یک نوزاد هم کوچکتره!!! 😀
آیکون های خودتون رو تست کنید
تست کردن یکی از مهمترین کارهاست. در واقع یک طرح رو قبل از معرفی شدن به عموم , در مقیاس کوچک آزمایش میکنید تا ببینید اون نتیجه ای که میخواهید رو میده یا نه. می تونید از چند نفر از دوستانتون این سواال رو بپرسید که این آیکون براشون چه مفهومی داره. آیا همشون درست حدس زدن؟
حرف پایانی
به آیکون ها اهمیت زیادی بدید. در عین ساده و کوچک بودن , میتونن تاثیر مثبت یا منفی زیادی در کار شما داشته باشن.
برای استفاده از آیکون ها در وبسایت از فرمت SVG استفاده کنید. این باعث میشه آیکون شما در سایزهای متفاوت افت کیفیت نداشته باشه و همچنین بتونید به راحتی با کدهای CSS رنگ اون رو تغییر بدید. برای این کار حتما مقالهی «استفاده از آیکونهای SVG به عنوان فونت آیکون» رو بخونید.
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.