اهمیت استفاده از آیکون در طراحی وب
آیکونها عضوی جدانشدنی از تعامل ما با رایانهها، گوشیهای هوشمند، تبلتها و همۀ ابزارهای دیجیتالی هستند. آیکون در طراحی وب هم از مهمترین اجزای یک وبسایت است و روز به روز اهمیت بیشتری پیدا میکند. طوری که اگر آیکونها طراحی خوبی داشته باشند، میتوانند به تنهایی یک وبسایت را کاربرپسند کنند.
اما چه آیکونهایی میتوانند به اندازۀ کافی مفید باشند و راه را برای کاربر هموار کنند؟ اگر چند نکتۀ اساسی در طراحی آیکونها را بدانید و به آنها توجه کنید، میتوانید آیکونهای مفید و کاربردی طراحی کنید که به ارتقای تجربۀ کاربری وبسایت شما کمک زیادی میکنند. در این مطلب میخواهیم به مهمترین نکات برای طراحی آیکون در وب اشاره کنیم. اما بد نیست اول با تاریخچۀ خود آیکون آشنا شویم. با ما همراه باشید.
در این صفحه میخوانید:
آیکونها از کجا آمدهاند؟
کلمۀ آیکون در ابتدا و قبل از ظهور رایانهها، برای مجسمهها، نقاشیها و نمادهای مذهبی استفاده میشد. اما بیش از حد ۴۰ سال پیش و با اختراع اولین رایانهها، آیکونها هم وارد دنیای دیجیتالی شدند. جالب است بدانید اولین رابط کاربری گرافیکی در دهۀ ۱۹۷۰ میلادی توسط کمپانی “”Xerox استفاده شد و بعد در اوایل دهۀ ۸۰، همین کمپانی اولین کامپیوتر را که شامل این نمادهای گرافیکی بود، توسعه داد.
اولین طراحیهای آیکون
در سال ۱۹۸۳ “سوزان کار” آیکونهایی را برای کامپیوترهای کمپانی Apple (که نامشان Lisa بود) طراحی کرد. این آیکونها (که در تصویر زیر آنها را میبینید) در واقع به عنوان یک الگو شناخته شدند. به طوری که بعضی از آنها هنوز هم عیناً استفاده میشوند.
تحول بزرگ در طراحی آیکون
در طول دهههای ۸۰ و ۹۰ طراحی آیکونها تا حد زیادی پیشرفت کرد. اما از سال ۲۰۰۰ به بعد، سبکهای جدیدی در طراحی آیکون متولد شدند. این سبکهای جدید با تکسچرهای متنوع و رنگهای زیاد و شفاف، آیکونهایی را پدید آوردند که ظاهر طبیعیتری داشتند.
اهمیت امروزۀ آیکونها
در دنیای امروز، کاربرد آیکونها به اندازهای است که شاید بعضی مواقع حتی متوجه آنها نمیشویم! مثلاً در چت کردن میتوانیم فقط با ایموجیها (که نوعی آیکون هستند) منظورمان را برسانیم. در تمام وبسایتهایی که در طول روز به آنها سر میزنیم، با آیکونها سر و کار داریم. نقش آیکون در طراحی وب به اندازهای است که دیگر با یک وبسایت بدون آیکون راحت نیستیم. طوری که انگار آیکونها را مثل متنها سریع میخوانیم و متوجه میشویم. بنابراین با توجه به اهمیتی که امروزه آیکونها دارند، بیشتر باید به باید و نبایدهای طراحی آیکون فکر کنیم.
مهمترین ویژگیهای آیکون در طراحی وب
نکتۀ مهم و کلی در طراحی آیکون این است که یک آیکون باید مختصر و مفید باشد. اما نکات کاملتری هست که در ادامه با هم میبینیم.
دوره آموزش طراحی رابط کاربری با xd – کلیک کنید
۱/ ساده بودن
هدف اصلی یک آیکون این است که یک عملکرد را به طور واضح و شفاف نشان دهد. اگر یک آیکون خیلی پیچیده و شلوغ باشد، ممکن است منظور را درست به کاربر نرساند. پس هیچوقت از جزئیات اضافه و زیاد در آیکونها استفاده نکنید.
به علاوه فرامش نکنید که فضای رابط کاربری بسیار ارزشمند است. پس آیکون باید تا حد امکان جمع و جور و ساده باشد تا فضای اضافی اشغال نکند.
۲/ واحد بودن معنی آیکون
یک طراحی بسته به شخصی که آن را میبیند، ممکن است معانی مختلفی داشته باشد. پس قبل از استفاده از یک آیکون، به معانی مختلفی که میتواند منتقل کند فکر کنید و اگر احساس کردید یک طراحی باعث سردرگمی کاربر میشود، آن را تغییر دهید. چرا که یک آیکون باید عملکرد مد نظر را به وضوح بیان کند.
۳/ مبهم نبودن
کاربر باید با نگاه به یک آیکون در طراحی وب کاربرد آن را متوجه شود. پس آیکون باید مرتبط با کاربردش باشد و آن را به روشنی نشان دهد. مثلاً آیکونهای زیر برای سیستم عامل اندروید هستند. اما وقتی کسی برای اولین بار این آیکونها را میبیند، احتمالاً نمیتواند تشخیص دهد که کاربرد هر کدام دقیقاً چیست؟
پس به خصوص وقتی میخواهید از آیکونهای جدید و خلاقانه استفاده کنید که برای کاربر شناخته شده نیستند، به این نکته دقت کنید.
۴/ استفاده از آیکونهای شناخته شده
همیشه میتوانید به سراغ آیکونهای شناخته شدهای که در همۀ جای دنیا یک مفهوم را دارند بروید. مثل پاکت نامۀ معروف ایمیل و یا آیکونهای زیر:
بعضی از این آیکونها در قرن گذشته متولد شدهاند; اما هنوز هم نمونههایی عالی و کاربردی هستند.
۵/ سریع و راحت بودن استفاده از آیکونها
از مهمترین مواردی که بر تجربۀ کاربر تأثیر زیادی دارد، سریع و روان بودن کار با یک وبسایت است. آیکون در طراحی وب قرار است پیمایش سایت را راحتتر و سریعتر کند. پس باید خود را جای کاربر بگذاریم و بعد در مورد آیکونها تصمیم بگیریم. علاوه بر شکل آیکون و مفهومی که به کاربر منتقل میکند، باید به جایی که قرار است آیکون قرار گیرد هم فکر کنیم. اگر محل آیکون در رابط کاربری مناسب نباشد، تجربۀ کاربر را خراب میکند.
۶/ استفاده از متن در کنار آیکون
همانطور که گفتیم گاهی ممکن است کاربران تفسیرهای مختلفی از یک آیکون داشته باشند. اگر فکر میکنید آیکون شما ممکن است به اندازۀ کافی واضح نباشد، میتوانید یک متن کوتاه کنار آن بگذارید و به عملکرد آیکون اشاره کنید.
میتوانید این نوشتهها رو طوری تنظیم کنید که وقتی نشانگر موس روی آیکون میرود، نوشته ظاهر شود. اما چون در موبایلها چنین امکانی وجود ندارد، بهتر است نوشته را ثابت کنار آیکون قرار دهید.
۷/ محل قرارگیری مشخص برای آیکون در طراحی وب
اگر هر آیکونی جای مشخصی در صفحه داشته باشد، قطعاً کاربر راحتتر با آنها کار میکند. پس سعی کنید هر آیکون را در جایی که کاربر انتظارش را دارد قرار دهید. مثلاً معمولاً قسمت سرچ سایت، سمت چپ و بالا قرار دارد.
آموزش راه اندازی وب سایت تا کسب درآمد
۸/ یکپارچه و هماهنگ بودن با تم سایت
علاوه بر کاربردی و مفید بودن آیکون، به زیبایی بصری آن هم توجه کنید. اگر میخواهید از طرحهای خلاقانهتر استفاده کنید، دقت کنید که رنگ و طرح همۀ آیکونها حتماً باید یکپارچه و با تم سایت هم هماهنگ باشد.
۹/ فراگیر بودن
سعی کنید از طرحهای همهگیرتر استفاده کنید و صرفاً از کلیشهها پیروی نکنید. مثلاً لازم نیست همیشه از آیکون یک مرد سفید پوست استفاده کنید. با این نوع از طراحی، ارتباط مردم با وبسایت شما بهتر خواهد بود و احساس بهتری در تجربۀ کاربریشان خواهند داشت.
آیکون در طراحی وب بر خلاف اندازۀ کوچکی که دارد، نقش بسیار مهمی ایفا میکند. پس قدرت آیکونها را دست کم نگیرید و از آنها برای ارتقای تعامل کاربر با وبسایت کمک بگیرید. میتوانید سری به وبسایت Flaticon که پر از آیکونهای متنوع است بزنید و از آیکونهای آن ایده بگیرید. همچنین میتوانید مطالب مرتبط با طراحی رابط کاربری را نیز در خانه فتوشاپ مطالعه کنید.
درباره ریحانه نصیری
توی دانشگاه آیتی خوندم و به فضای وب و گرافیک خیلی علاقه دارم. به نظرم دنیای وب و گرافیک بیانتهاست و من تلاش میکنم سهمی توی نشون دادن بخشی از اون به شما داشتهباشم.
نوشته های بیشتر از ریحانه نصیری
دیدگاهتان را بنویسید