کارآمدی آیکون ها: بهترین نکات درباره آیکون ها در تجربه کاربری و طراحی
آیکونها در اطراف ما در همه جا حضور دارند. در وبسایتها، گوشیهای هوشمند و نرمافزارها. حتی آیکونها را میتوان به صورت آفلاین نیز مشاهده کرد. به عنوان مثال در نشانهگذاریها و علائمی که در خیابانها و فضاهای عمومی میبینیم. بعضی آیکونها مانند آیکن خانه، پرینت، پخش موزیک یا ویدئو و آیکن جستجو چنان رایج هستند که نیاز به هیچ توضیحی ندارند. ما میدانیم که دقیقا این آیکونها چه معنا و کاربردی دارند.
فوایدی که آیکون ها برای تجربه کاربری دارند
وقتی که از آیکنها به درستی استفاده میشود، میتوانند فواید زیادی برای بهبود تجربه کاربری (UX) و کارآمدی داشته باشند. در ادامه به ۵ دلیل اشاره میکنیم برای اینکه چرا باید از آیکونها در بهبود تجربه کاربری خود استفاده کنید:
- آیکونها به راحتی قابل تشخیص هستند: اگر از آیکونهای رایج در طراحی خود استفاده کنید، مخاطبین شما فورا آنها را شناسایی خواهند کرد و این آیکونها باعث میشوند کاربران به راحتی اقدامات مورد نظر خود را در سایت انجام دهند.
- ذخیره کردن فضا: آیکونها جای کمتری نسبت به متن میگیرند و این مزیت میتواند به خصوص در موبایل بسیار مهم باشد. یعنی جایی که فضا کمتر است و استفاده از آیکونها میتواند فضای بیشتری را برای دیگر المانها در اختیار شما قرار دهد.
- آیکونها میتوانند برای لمس در موبایل عالی باشند: سایز توصیه شده برای آیکونهایی که در موبایل استفاده میشوند یک سانتیمتر در یک سانتیمتر است. با این اوصاف کاربران میتوانند به راحتی بر روی آن با انگشت ضربه بزنند و آن را انتخاب کنند.
- آیکونها جهانی هستند: معنای آیکونها میتواند به راحتی فهمیده شود حتی اگر مخاطبین شما به زبان شما آشنا نیستند میتوانند منظور شما را از آیکونها بفهمند.
- آیکونها از لحاظ زیباییشناسی جذاب هستند: اگر آیکونها به خوبی طراحی شوند میتوانند وبسایت یا اپلیکیشن شما را از لحاظ بصری جذابتر کنند.
اشتباهات رایج در تجربه کاربری
متاسفانه اشتباهات فراوانی وجود دارد که طراحان تجربه کاربری در استفاده از آیکونها دچار آنها میشوند و این باعث میشود که یک تجربه کاربری ضعیف ایجاد شود. یکی از بزرگترین این اشتباهات این است که طراحان فکر میکنند که کاربران حتما معنای آیکونها را میدانند.
وقتی که Microsoft Outlook یک نوار ابزار شامل فقط آیکون طراحی کرد، کاربران نمیدانستند که این آیکونها چه کاری را انجام میدهند. بدین ترتیب یک تجربه کاربری ضعیف ایجاد شد که کاربران را آزار میداد. اما وقتی که به این آیکونها یک برچسب توضیح اضافه شد افراد از این نوار ابزار استقبال کردند.
دیگر اشتباهات رایج که در استفاده از آیکونها صورت میگیرد و در کارآیی سایت یا اپلیکیشن مشکلاتی را ایجاد میکند:
- نداشتن یک برچسب متنی متناظر با آیکون. (مانند مثال قبل)
- استفاده از آیکونهایی که هیچ معنایی را منتقل نمیکنند.
- اختصاص دادن فضای بسیار کمی برای آیکونها در موبایل.
- استفاده از خلاقیت زیاد در طراحی آیکونها که میتواند باعث شود کاربران در تشخیص معنا به دشواری بیافتند.
- سعی در طراحی آیکونهای جدید که مانند سعی در اختراع دوباره چرخ است! به جای این کار سعی کنید از همان آیکونهای رایج قابل تشخیص استفاده کنید.
- طراحی آیکونها با استفاده از تعداد بسیار زیادی از المانهای گرافیکی
بهترین روش و توصیه ها برای استفاده از آیکون ها
میتوانید از چک لیست زیر استفاده کنید تا علاوه بر استفاده بهینه و مناسب از آیکونها از اشتباهات رایج در این حوزه جلوگیری کنید. با استفاده از این نکات میتوانید تجربه کاربری خود را بهبود بخشید:
۱. چرخ را دوباره اختراع نکنید! آیکونهای شناخته شده نتایج بهتری را به بار میآورند. آیکونهایی مانند: خانه، ضربدر که برای بستن به کار میرود، پرینت، پخش فایل و جستجو همگی آیکونهای شناخته شده هستند.
۲. از آیکونها استفاده کنید تا فضای کمتری را اشغال کنید و همچنین کیفیت شناسایی توسط کاربران، عملکرد و هدایت کاربران را بهبود بخشید.
۳. آیکونها باید به سرعت قابل تشخیص باشند. پس سعی کنید که از آیکونهایی استفاده کنید که مردم قبلا دیدهاند و قبلا از آن استفاده کردهاند.
۴. برای قسمت دانلود فایلها آیکون آنها را تغییر ندهید. به عنوان مثال اگر میخواهید به نرمافزار ورد اشاره کنید، از حرف W در یک کادر آبی استفاده کنید.
۵. آیکونها به منظور انتقال معنا استفاده میشوند. سعی نکنید از آنها صرفا برای زیبایی استفاده کنید.
۶. از قانون ۵ ثانیه استفاده کنید. این قانون میگوید اگر بیش از ۵ ثانیه طول میکشد تا متوجه کارآیی یک آیکون شوید، آن آیکون احتمالا غیرموثر است.
۷. آیکونها باید به صورت بصری عملکرد و هدف را توضیح دهند. آنها را ساده، معنادار و قابل شناسایی برای کاربران طراحی کنید.
۸. همیشه سعی کنید در اطراف یک آیکون به اندازه یک سانتیمتر فضای خالی قرار دهید. به این ترتیب خوانایی آن راحتتر خواهد شد و به راحتی میتوان با انگشتان دست آن را انتخاب کرد.
۹. در موبایل که فضای شما محدودتر است استفاده از آیکون میتواند بسیار به شما کمک کند.
۱۰. از یک مجموعه آیکون استفاده کنید تا مطمئن شوید که یکدست و منسجم هستند.
۱۱. در کنار آیکونها همیشه از یک برچسب متنی استفاده کنید و آن را در زیر یا سمت چپ آیکون قرار دهید.
۱۲. یک آزمون خوب برای موثر بودن یک آیکون این است که کاربران بتوانند بدون اینکه برچسب متنی وجود داشته باشد، بگویند که آن آیکون چه معنایی دارد.
۱۳. از آیکونهایی که چند معنا را منتقل میکنند استفاده نکنید. این کار باعث سردرگمی مخاطبین میشود.
۱۴. در استفاده از آیکون قلب و ستاره هوشیار باشید. این آیکونها میتوانند معناهای مختلفی داشته باشند و باعث گیجی مخاطبین شوند. به عنوان مثال آیکون قلب میتواند علامت لایک کردن و پسندیدن، اضافه کردن به لیست موارد محبوب و… باشد. علامت ستاره نیز میتواند اشاره به امتیازدهی، بوکمارک کردن و یا اضافه کردن به لیست موارد محبوب را داشته باشد.
۱۵. از آیکونهایی با طراحی ساده و نمادین استفاده کنید. از به کاربردن اشکال پیچیده و المانهای گرافیکی زیاد در آیکون خود خودداری کنید.
۱۶. آیکونها را از لحاظ شکلی و رنگی متمایز نگاهدارید. این کار به کاربران اجازه میدهد که آنها را راحتتر تشخیص دهند و از آنها استفاده کنند.
۱۷. از به کار بردن یک آیکون برای مقاصد مختلف و یا استفاده از چند آیکون برای یک منظور خودداری کنید.
۱۸. اگر در استفاده از آیکونها برای هدفی خاص تردید دارید، به خاطر داشته باشید که بهترین آیکون یک برچسب دارای متن است. یعنی میتوانید یک کادر ایجاد کنید و در آن متن مورد نظر خود را بنویسید.