کاربرد آیکون ها در طراحی رابط کاربر و تجربه کاربری

آیکون ها در طراحی

مخاطب این مقاله، طراحان و گرافیست های وب است که در طرح های خود از آیکون استفاده میکنند. اما برخی طراحان تازه کار (یا حتی کهنه کار) نمی دانند چرا اینکار را انجام میدهند و این ندانستن موجب میشود تا در برخی طرح ها، استفاده های نادرستی از آیکونها را شاهد باشیم. به راستی چرا از آیکون ها در طراحی استفاده می کنیم؟

چرا آیکون ها ابداع شدند؟

آیکون ها اولین بار در دهه 70 میلادی توسط کمپانی زیراکس به عنوان ابزاری برای کمک به کاربران در راهبری به وجود آمدند. (ویکی)

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

آیکون هایی که معنای پیشفرض دارند:

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

  1. شمایل های استاندارد شده بر روی دستگاه های الکترونیکی (مانند آیکون روشن/خاموش)
  2. آیکون هایی که از روی وسایل روی میز کار ما طراحی شده اند و به استعاره به کار می روند.
  3. آیکون هایی که نماینده برند تجاری خاصی هستند.

icons-3

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

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

آیکون ها در طراحی تجربه کاربری  

  • آیا چرخ دنده معنای “موضوعات وبلاگ” میدهد ؟
  • آیا تلویزیون شما را یاد “انتخاب قالب” می اندازد؟
  • آیا آیکون فولدر را میشود به جای “پست ثابت” استفاده کرد؟
  • آیا آیکون لامپ معنی “پیوندهای وبلاگ” را دارد؟

حالا با هم آیکون های سرویس وبلاگ بلاگر را بررسی می کنیم:

آیکون ها در طراحی وب

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

کاربرد رنگ در طراحی آیکون :

 حالا که به اینجا رسیدیم، آیا می توانید بدون نگاه کردن به تصویر اول (تصویر آیکون برنامه های پیام رسان) بگویید که در حباب هر برنامه ی پیام رسان چه شکلی وجود دارد؟ احتمالا خیر ! زیرا شما با اینکه صدها بار آنها را دیده اید، اما چندان توجهی به آنها نمی کنید. اما اگر آنها را در کنار هم بچینید و بخواهید مثلا برنامه وایبر را باز کنید، به سرعت روی آیکون بنفش رنگ کلیک میکنید (یا انگشت میزنید). مغز انسان ، رنگ را سریعتر از شکل آیکون تشخیص میدهد. پس هنگام طراحی از رنگهای مناسب و معنادار (مانند سه رنگ چراغ راهنمایی که معنای خاص دارند) در طراحی آیکون ها استفاده کنید.

آیکون ها باید با متن لینک همراه باشند

  • اگر آیکون های شما، معانی ای دارند که چندان در محیط وب و سیستم عامل ها رایج نیست، بهتر است متن لینک را نیز نمایش دهید. بسیاری از کاربران معمولی، از گرافیک و شمایل آیکون ها سر در نمی آورند. همچنین گاهی متن لینکهای شما آنقدر پیچیده است که هیچ آیکونی نمی تواند معنی آنرا القا کند. در اینگونه موارد اصرار به استفاده از آیکون در کنار متن لینک نداشته باشید.
  • اگر از آیکون ها بصورت تنها (بدون وجود متن لینک در کنارش) استفاده می کنید، حتما خاصیت Alt تگ عکس و خاصیت titleتگ لینک را درست بنویسید تا کاربر با mouse over عنوان آیکون را نیز ببیند. این عمل به خواناتر شدن اپ یا سایت شما کمک میکند.

شاید برنامه شما نیازی به آیکون نداشته باشد!

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

در طرح بعدی خود، دقت بیشتری به المان هایی که در صفحه استفاده می کنید داشته باشید. شاید یک آیکون فقط از خوانایی سایت شما کم میکند و جا اشغال کرده است !

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *