1 ikon, 1000 kelimeye bedel mi?

“Paragraflarca yazıyla anlatılmak istenen bir şeyi, sadece bir fotoğraf ile anlatmak mümkündür.” Bu cümledeki fotoğraf sözcüğünü ikon ile değiştirdiğimizde sonuç değişmeyecektir. Çünkü ikonlar kullanıcılar için çeşitli bilgileri ya da düşünmeyi gerektirmeden direkt olarak yapılacak (kaydetme, silme ve yazdırma gibi) eylemleri ifade eden birer semboldür.

Gelin biraz, ikonlardan ve ikonların kullanıcı deneyimi tasarımına sağladığı faydalardan söz edelim.

İkonlar ne zaman ve hangi durumlarda kullanılmalı?

Tasarımcılar için bunun birincil sebebi; ikonların çok daha az yer kaplaması. Bir mobil uygulamada 5 adet menü öğeniz olduğunu varsayalım; bu menü öğelerini metin etiketleriyle oluşturmak yerine kolayca anlaşılabilir ikonlarla oluşturduğunuzda, menüyü gizlemek yerine açık olarak kullanabilirsiniz. Böylece daha kullanılabilir bir deneyim sunmuş olacaksınız.

İkonların menülerde kullanımından söz ederken, kullanıcı sağlığı açısından son derece zararlı olan hamburger menü ikonunu dışarıda bırakmak zorundayım. Zira hamburger menü ikonunun ne kadar lezzetsiz olduğunu şu yazıda anlatmıştık.

Bir başka sebepse; responsive arayüz tasarımlarında devamlılığı sağlamak. Örneğin Google, material design’la birlikte tüm cihazlarda ve çözünürlüklerde sürdürülebilir bir tasarım için ikon kullanımından ciddi şekilde yararlanıyor. Developer guide’da ikonlar için kurdukları cümleler de bunu doğrular nitelikte:

“Bir aksiyon, durum ya da uygulamanın hızlıca ve sezgisel olarak öğrenilebilen görselleştirmesi.”

Mobil cihazlar ve diğer küçük ekranlar için kullanıcı arayüzleri tasarlarken, ikon boyutlarını da ekranın çözünürlüğüyle doğru orantılı olarak küçültmemiz gerekebilir. Burada önemli olan, çözünürlükle paralel olarak küçülen ikonların anlaşılabilir bir şekilde tasarlanmasıdır. Vektörel olarak ve yüksek çözünürlükte hazırlanan ikonlar, kolay anlaşılabilir bir arayüz için faydalı olacaktır. Ayrıca SVG ikon kullanımı için de şu yazıya bakmanızı öneririm.

Özetleyecek olursak ikonlar;

• Çok dilli uygulamalarda ya da web sitelerinde, farklı dil seçeneklerinden dolayı oluşabilecek sorunları önlemek için, evrensel anlamlar ifade edecek şekilde tasarlanarak evrensel bir arayüz tasarlamanızı kolaylaştırabilir.
• Listeleme alanlarındaki maddelenmiş alanları, içerik bütününden ayrıştırmanızı sağlayabilir.
• Çocuklar ya da yaşlı kullanıcılar için hazırlanan arayüzlerde kullanılabilir ve erişilebilir bir deneyim tasarlamanızı mümkün hale getirebilir.
• Son olarak da, yazının içinde genel hatlarıyla bahsettiğim şekilde, küçük çözünürlüklerde avantaj sağlamak için kullanılabilir.

Peki ikonlar, bu kadar masum mu?

İkonların az yer kaplamaları ya da basit ve anlaşılabilir olmaları sayesinde hayatımızı kolaylaştıracağı bir gerçek; fakat bunun tam tersinin gerçekleşmesi de mümkün.

İkon kullanımı şu durumlarda fayda sağlamaktan çok zarara yol açabilir;

• Gereğinden fazla komplike olduklarında ve sadece tasarlayan kişi tarafından anlaşılabilir olduklarında
• Farklı kültürlerde farklı anlamlar ifade ediyorsa
• Kullanıcı profili yaşlıysa ya da teknik yetkinlikleri düşükse
• Uygulama ya da web sitesinde konumlandıracağınız yer önemli aksiyon butonlarıysa
• Uygulama ya da web sitesinin kullanıcılar tarafından en kısa sürede öğrenilmesi hedefleniyorsa

Yukarıda listelediğim riskleri ortadan kaldırmak için, ikonları metinlerle desteklemek faydası kanıtlanmış bir çözüm. Örneğin Microsoft Outlook yazılımının eski sürümlerinde yer alan ikonlar, birbirlerine çok benzemeleri ve kolayca anlaşılabilir olmamaları nedeniyle kötü bir kullanıcı deneyimine sebep oluyordu. Sonraki sürümlerde ikonlar metinlerle desteklendiğinde, Microsoft Outlook deneyimi kullanıcılar için daha iyi hale geldi.

Sonuç olarak doğru yerde ve doğru şekilde kullanılan ikonlar, hem tasarımcıların hem de kullanıcıların hayatını kolaylaştıracaktır. Eğer henüz inceleme ya da kullanma fırsatı bulamadıysanız, şu ikon kütüphanelerinin arayüz tasarımı sürecinde hayatınızı kolaylaştıracağına inanıyorum.

Google’ın ücretsiz olarak sunduğu Material ikon seti

thenounproject.com