مخاطب این مقاله، طراحان وب است که در طرح های خود از آیکون استفاده میکنند. اما برخی طراحان تازه کار (یا حتی کهنه کار) نمی دانند چرا اینکار را انجام میدهند و این ندانستن موجب میشود تا در برخی طرح ها، استفاده های نادرستی از آیکونها را شاهد باشیم. به راستی چرا از آیکون ها در طراحی استفاده می کنیم؟
آیکون ها اولین بار در دهه 70 میلادی توسط کمپانی زیراکس به عنوان ابزاری برای کمک به کاربران در راهبری به وجود آمدند. (ویکی)
همانگونه که از تاریخچه ایجاد آیکون ها در ویکی پدیا قابل درک است، آیکون ها ایجاد شدند تا به کاربر کمک کنند راحت تر در داخل محیط نرم افزار، گزینه ها را بیابد. بنابراین آیکونی که کمکی به راهبری نکند، همان بهتر که حذف شود.
اما چرا آیکون ها گویاتر از متن لینکها هستند ؟ زیرا چشم ما راحت تر از متن آنها را تشخیص میدهد. (یک تصویر گویاتر از هزار کلمه است).
برخی از شکلک ها، معنی پیشفرضی دارند . این معنی هم یا از چیزی در دنیای واقعی کپی شده است یا آنقدر در وب و سیستم عاملها استفاده شده که دیگر به یک استاندارد تبدیل شده. طبق مستندات ویکیپدیا طرح آیکونها از سه منبع الهام گرفته می شوند:
در تصویر فوق می بینید که آیکون اکثر برنامه های پیام‌رسان، از شکل حبابی که در کتاب های کمیک استریپ بود استعاره گرفته شده و به نوعی استاندارد برای واژه ی messenger تبدیل شده است. هیچ یک از شرکت های بزرگ مانند گوگل و فیسبوک هم سعی نکرده اند مفهوم جدیدی در این حوزه خلق کنند. زیرا ذهن کاربران به شکل حبابی این آیکون عادت دارد. وقتی آیکون ها استاندارد میشوند و به وفور استفاده میشوند، چشم ما هنگام دیدن آنها، به سرعت معنایی را در ذهن القا میکند. مثلا برای همهء ما آیکون چرخ دنده به معنای “تنظیمات” است و آیکون ذره بین به معنای “جستجو”. پس شما نباید آیکون هایی را که دارای معنی پیشفرض هستند در معنی دیگری استفاده کنید.
به تصویر زیر دقت کنید . این آیکون ها متعلق به پنل کاربری سرویس وبلاگنویسی بلاگفا است. هر آیکون، چه معنایی در ذهن شما ایجاد میکند؟
حالا با هم آیکون های سرویس وبلاگ بلاگر را بررسی می کنیم:
همانطور که مشاهده می کنید، آیکون ها بسیار هم معنی با موجودیت هر موضوع ایجاد شده اند یا حداقل از نشانه هایی در طراحی شان استفاده شده که در محیط وب یا سیستم عامل ها استاندارد شده اند. پس لطفا در طرح بعدی خود قبل از استفاده کردن از آیکون های قشنگی که دانلود کرده اید، به معنی هر آیکون نیز توجه داشته باشید.
حالا که به اینجا رسیدیم، آیا می توانید بدون نگاه کردن به تصویر اول (تصویر آیکون برنامه های پیام رسان) بگویید که در حباب هر برنامه ی پیام رسان چه شکلی وجود دارد؟ احتمالا خیر ! زیرا شما با اینکه صدها بار آنها را دیده اید، اما چندان توجهی به آنها نمی کنید. اما اگر آنها را در کنار هم بچینید و بخواهید مثلا برنامه وایبر را باز کنید، به سرعت روی آیکون بنفش رنگ کلیک میکنید (یا انگشت میزنید).
مغز انسان ، رنگ را سریعتر از شکل آیکون تشخیص میدهد. پس هنگام طراحی از رنگهای مناسب و معنادار (مانند سه رنگ چراغ راهنمایی که معنای خاص دارند) در طراحی آیکون ها استفاده کنید.
آیکون ها باید با متن لینک همراه باشند
شاید برنامه شما نیازی به آیکون نداشته باشد!
توجه کنید که استفاده از آیکون باید به راهبری سایت یا اپلیکیشن شما کمک کند و اگر کمکی نمی کنند، آنها را حذف کنید. بطور مثال در برنامه فتوشاپ، جعبه ابزار کنارش، پر از آیکون است.اماگزینه های داخل منوی برنامه آیکون ندارد. بخش هایی از برنامه که بصورت مکرر استفاده میشوند بهتر است آیکون داشته باشند تا راحت تر پیدا شوند. اما گزینه هایی که کمتر به کار می آیند و معنی آنها در یک آیکون نمی گنجد را بصورت متن بگذارید.
در طرح بعدی خود، دقت بیشتری به المان هایی که در صفحه استفاده می کنید داشته باشید. شاید یک آیکون فقط از خوانایی سایت شما کم میکند و جا اشغال کرده است !
این مقاله اولین بار در آبان ۹۳ منتشر شد
