Bir ikon birkaç çizgiden oluşabilir ama kullanıcının yapacağı işlemi tarif etmesi beklenir. Dosyayı silmek, kaydetmek veya başka bir ekrana geçmek gibi görevler küçük işaretlerle gösterilir. Bu işaretler anlaşılmadığında, arayüz ne kadar özenli görünürse görünsün kullanıcı tereddüt edebilir. Susan Kare’nin Macintosh için hazırladığı ikonlar, biçim ile işlev arasındaki ilişkiyi düşünmek için önemli örneklerdir.
Bu yazıda Kare’nin erken eskizlerinden hareketle piksel, metafor ve arayüz dili ilişkisini inceliyorum. Ardından aynı soruları bugünkü mobil uygulamalara taşıyorum. Tarihsel masaüstü arayüzünün koşullarıyla güncel telefonların koşulları farklıdır. Bu nedenle bir ikonu aynen kopyalamaktan çok, tasarımın hangi iletişim problemini çözmeye çalıştığını anlamak değerlidir.
Kare’nin eskizleri bize ne gösterir?
MoMA koleksiyonunda 1982 tarihli Apple Macintosh OS icon sketchbook bulunur. Müzenin açıklaması, Kare’nin kareli kâğıt üzerinde her kareyi bir piksel olarak düşünerek ikonlar hazırladığını belirtir. Aynı koleksiyondaki 1982–1983 grafik ikon eskizleri de bu çalışma biçimini görünür kılar. Küçük alanın içinde seçilen her parça, biçimin okunmasını etkiler.
Bu yöntem, arayüz tasarımını yalnız ekranda yapılan bir iş olarak görmemeyi sağlar. Bir işaretin fikri, kâğıt üzerinde de denenebilir. Küçük ölçekte hangi çizgilerin gerekli olduğu ve hangilerinin anlamı bozduğu incelenebilir. Güncel uygulamalarda daha geniş teknik olanaklar bulunsa da küçük simgenin hızla ayırt edilmesi hâlâ önemli bir sorudur.
Piksel sınırlaması nasıl düşünce ürettirir?
Sınırlı alan, tasarımcıyı ayrıntıları seçmeye zorlar. Bir nesnenin bütün özelliklerini göstermek mümkün olmayabilir. O nesnenin ayırt edici biçimi veya işleve en yakın özelliği öne çıkarılır. Bu, yalnız eski bilgisayarlara özgü bir karar değildir. Mobil ekranda küçük bir ikon da ayrıntılar azaltılmadan anlaşılır olmayabilir.
Örneğin bir alışveriş uygulamasındaki sepet simgesine çok sayıda ürün detayı eklemek, küçük boyutta şekli kalabalıklaştırabilir. Daha belirgin bir silüet ve uygun etiket işlevi daha açık taşıyabilir. Ancak sadeleştirme, bütün ikonları birbirine benzetmemelidir. Aralarında ayrım kurulması gerekir. Küçük ölçekte karşılaştırma yapmak, bu ayrımı görmeye yardımcı olur.
Görsel metafor ne işe yarar?
Kare’nin çalışmalarında günlük nesneler bilgisayar işlemlerine karşılık gelebilir. MoMA, makasın metin kesme, çöp kutusunun dosya silme işleviyle ilişkisini açıklar. Tanıdık nesne, soyut işlemi düşünmek için bir başlangıç sağlar. Fakat bu ilişkinin bütün kullanıcılarda kendiliğinden ve aynı biçimde anlaşılacağını varsaymak doğru değildir.
Güncel bir uygulamada fiziksel nesneye dayanan bir simge, kullanıcı grubunun deneyimine bağlı olarak farklı okunabilir. Bazı işlevlerin ise tanıdık bir fiziksel karşılığı olmayabilir. Bu durumlarda ikonun yanında açık bir etiket sunmak veya işlevi başka bir görsel düzenle anlatmak gerekebilir. Metafor, açıklamanın yerine geçen değişmez bir çözüm değildir.
Command sembolünün hikâyesi
MoMA’nın sesli kaydında Kare, Command işlevi için başka bir işaret ararken bir sembol sözlüğündeki dört yapraklı biçimle karşılaştığını anlatır. Bu kayıt, tarihsel tasarım kararını doğrudan tasarımcının anlatımıyla okumayı sağlar. İşaretin seçilmesinde yalnız teknik ölçü değil, nasıl hissettirdiği ve küçük biçimde ifade edilebilmesi de rol oynar.
Buradan çıkarılabilecek güncel soru şudur: bir işaretin görünüşü, işlevi ve tonu birlikte değerlendiriliyor mu? Kurumsal uygulamada aşırı oyuncu bir ikon, ürünün diline uymayabilir. Daha sıcak bir üründe çok sert bir simge başka bir his oluşturabilir. Bu tercihler markanın karakteriyle ilişkilidir; fakat anlamın anlaşılır kalması yine temel görevdir.
İkon tek başına yeterli olmayabilir
Bir simgeyi tasarımcı tanıyor diye kullanıcı da tanımayabilir. Özellikle yeni veya az kullanılan işlevlerde etiket, belirsizliği azaltabilir. İkonun bulunduğu yer de anlamı etkiler. Aynı kalp işareti bir uygulamada beğeni, başka bir uygulamada favori listesine ekleme anlamı taşıyabilir. Ekranın bağlamı ve işlem sonrası geri bildirim bu farkı açıklamalıdır.
Kullanıcı bir ikona dokunduğunda ne olacağını tahmin edemiyorsa, görsel güzellik tek başına sorunu çözmez. Etiketi değiştirerek, konumunu düzenleyerek veya işlevi daha açık bir butonla sunarak başka seçenekler denenebilir. Bütün işlemleri ikonlaştırmak zorunlu değildir. Önemli eylemlerde metinli düğme daha anlaşılır bir çözüm olabilir.
İkon ailesinde tutarlılık
Bir uygulamada çizgi kalınlığı, köşe davranışı, dolu veya boş biçim kullanımı ve optik ağırlık birlikte değerlendirilir. Bir ikon çok yoğun, yanındaki çok inceyse gezinme alanı dengesiz hissedilebilir. Tutarlılık, bütün ikonların aynı nesneye benzemesi değildir. Farklı işlevler ayırt edilirken ortak bir görsel aile oluşturulmalıdır.
Hazır bir ikon seti kullanılacaksa işlev ihtiyacına gerçekten uyup uymadığı kontrol edilmelidir. Sette bulunan en yakın şekli seçmek, doğru anlamı garanti etmez. Bazı uygulamalar özel bir işaret veya açıklama isteyebilir. Dosya lisansları ve geliştiriciye teslim biçimleri de bu aşamada netleştirilebilir. Görsel seçim, ürün davranışından ayrı düşünülmemelidir.
Küçük görünüm ve dokunma alanı
İkonun görsel boyutu ile etkileşim alanı aynı şey değildir. Küçük bir çizim, çevresinde uygun alanla kullanılabilir. Kullanıcı dokunduğunda hedefin nerede olduğunu anlayabilmelidir. Simgelerin çok yakın yerleştirilmesi, yanlış işlemi seçme riskini artırabilir. Tasarımın gerçek cihazdaki görünümü ve kullanım akışı bu nedenle kontrol edilmelidir.
Kontrast da simgenin seçilmesini etkiler. İkonun arka plandan ayrılması, durumunun anlaşılması ve metinle ilişkisinin korunması gerekir. Yalnız renkle durum anlatmak, bazı kullanıcılar için yeterli olmayabilir. Seçili öğede ek biçim, vurgu veya metin kullanılması düşünülebilir. Bu kararlar, uygulamanın erişilebilirlik gereksinimleriyle birlikte değerlendirilmelidir.
Durum değişimi nasıl gösterilir?
Bir işaretin normal, seçili ve devre dışı durumları farklı olabilir. Kullanıcı işlem yaptığında bir geri bildirim görmelidir. Favoriye eklenen bir ürünün ikonu değişebilir; bekleyen işlem bir yüklenme durumu gösterebilir. Ancak durum değişiminin anlamı açık olmalıdır. Her etkileşime süslü bir animasyon eklemek gerekli değildir.
Geliştirici tesliminde bu durumlar tanımlanabilir. Simgede hangi parça değişir, etiket aynı mı kalır, bir hata olursa kullanıcıya ne gösterilir? Böylece tasarım dosyası yalnız tek bir görünümden ibaret olmaz. Tarihsel ikon analizinin bugünkü uygulama için değeri, bu küçük işaretleri daha dikkatli düşünmeye yöneltmesidir.
İkonları test etmek için basit bir yöntem
Bir ekranı hedef kullanıcıya gösterip belirli bir görevi tamamlamasını isteyebilirsiniz. “Kaydetme düğmesini beğendiniz mi?” yerine “bu ürünü daha sonra bakmak için saklayın” demek, işaretin işlevini anlamayı incelemeye yardımcı olur. Katılımcının nerede durduğunu ve hangi öğeyi seçtiğini gözlemlemek, yalnız estetik yorum toplamaktan farklı bilgi sağlar.
Bu kontrolün sınırları da vardır. Az sayıda kişiden gelen yorum bütün kullanıcıları temsil etmeyebilir. Yine de belirgin belirsizlikleri fark etmek için yararlı olabilir. Elde edilen gözlemler, etiket veya yerleşim değişikliği için başlangıç oluşturabilir. Sonuçlar bir performans artışı iddiasına çevrilmeden, gerçekten gözlenen davranışla kaydedilmelidir.
İki benzer ikonu yan yana sınamak
Bir uygulamada düzenleme ve yeniden oluşturma işlemleri için birbirine yakın kalem simgeleri kullanıldığını düşünelim. İki işlev farklı sonuçlar doğurur ama şekiller benzer olabilir. Kullanıcı yalnız ikona bakarak ayrımı yapamayabilir. Etiket, konum ve işlem açıklaması bu farkı daha açık sunabilir. İkon seçimi, ürün davranışıyla birlikte değerlendirilir.
Önce iki düğmeyi gerçek ekran içinde inceleyin. Birini ayrı yerde görmek, karşılaştırma sorununu göstermeyebilir. Ardından normal ve etkin durumlarını kontrol edin. Görsel değişiklik, işlemin sonucunu anlatıyor mu? Kullanıcı geri döndüğünde hangi durumla karşılaşacak? Küçük simgeler bütün ekran akışının içinde çalışır.
Kare’nin orijinal eskizine bakıldığında biçimlerin tek tek karelerle kurulduğu görülür. Güncel araçlar daha esnek olsa da bu ayrıntı seçme düşüncesi değerlidir. Gereksiz çizgiyi azaltmak, silüeti güçlendirebilir. Ancak işlevi ayırt eden parçayı silmek ters etki yaratabilir. Sadeleştirme, anlam kontrolüyle birlikte yapılmalıdır.
İkonu büyük tasarlayıp küçültmek yeterli mi? Küçük görünümde çizgi ve ayrıntılar farklı davranabilir. Hedef ölçüde kontrol gerekir. Aynı şeklin farklı boyutlar için ayrı optik düzenlemesi düşünülebilir. Teslimde gerekli sürümler ve uygulama koşulları belirlenmelidir.
Yalnız ikonla sunulan menü anlaşılır olur mu? Kullanıcı grubu ve işlevlere bağlıdır. Sık bilinen işlemler bile bağlam değiştirdiğinde belirsizleşebilir. Etiket veya açıklama seçeneği değerlendirilmelidir. Tasarımcının bildiği bir işaretin bütün kullanıcılar için açık olduğu varsayılmamalıdır.
İkonların marka rengiyle hazırlanması şart mı? Renk, anlamı ve durum ayrımını destekleyebilir. Her simgeyi ana renk yapmak gerekmeyebilir. Zemin, kontrast ve görsel ağırlık birlikte düşünülür. Aynı işlevin farklı ekranlarda hangi davranışı taşıdığı, tek bir renk tercihinden daha geniş bir karardır.
Özel ikon setini ne zaman düşünürüz? Hazır işaretler gerçek işlevi açıklamıyorsa veya ortak görsel aileyi taşıyamıyorsa özel çalışma gerekebilir. Önce ihtiyaçlar ve görevler listelenir. Özgünlük isteği, anlaşılır işlev ve geliştirici teslimiyle birlikte değerlendirilir.
Mobil uygulamada örnek bir karar
Temsili bir hizmet uygulamasında kullanıcı randevusunu değiştirmek ister. Yalnız kalem simgesini görürse bunun adres düzenleme mi, profil düzenleme mi yoksa randevu değişikliği mi olduğunu anlamayabilir. “Randevuyu değiştir” etiketi ve ilgili kart içindeki konum daha açık bir çözüm sunabilir. İkon burada yardımcı rol üstlenir; bütün açıklamayı tek başına taşımak zorunda kalmaz.
Başka bir ekranda sık kullanılan gezinme seçenekleri ikon ve kısa etiketle birlikte sunulabilir. Kullanıcının deneyimi arttıkça işaretleri tanıması kolaylaşabilir. Fakat yeni kullanıcıyı da düşünmek gerekir. İlk kullanım, yardım ve işlem sonuçları tasarımın parçası olduğunda ikonların görsel dili daha anlaşılır bir ürün yapısına yerleşir.
Sık sorulan ikon soruları
Tarihi ikonları aynen kullanabilir miyim? Bir eseri analiz etmekle üründe kullanmak farklıdır. Güncel uygulamanız için özgün veya uygun lisanslı varlıklar seçilmeli; tarihsel örneğin hakları ayrıca değerlendirilmelidir. Buradaki görseller, kaynakları belirtilen tasarım tarihi örnekleridir. Uygulamanıza hazır ikon paketi olarak sunulmaz.
Her uygulama için özel ikon seti gerekir mi? İşlevler ve marka dili uygunsa bir set kullanılabilir. Özel ihtiyaçlar bulunduğunda seçilmiş ikonların uyarlanması veya yeni işaretlerin hazırlanması gerekebilir. Karar, yalnız özgün görünmek isteğiyle değil anlam, tutarlılık ve teslim gereksinimleriyle verilmelidir.
Küçük işaretleri ciddi tasarım kararları olarak görmek
Susan Kare’nin çalışmaları, küçük ölçekteki kararların arayüzün tonunu ve anlaşılmasını etkileyebildiğini gösterir. Bugünkü mobil ürünlerde de ikonları, etiketleri ve durumları birlikte düşünmek gerekir. Bir uygulamanın kullanıcıya ne söyleyeceği yalnız büyük başlıklarda değil bu küçük etkileşim alanlarında da belirlenir.
Mobil UI/UX hizmetimde akışların yanında ikon, etiket ve bileşen durumlarını uygulamanın görevlerine göre ele alıyorum. Mevcut ekranlarınızı ve kullanıcıların zorlandığı işlemleri benimle paylaşabilirsiniz. Böylece küçük işaretlerin büyük belirsizlikler yarattığı yerleri birlikte değerlendirebiliriz.
Kaynaklar
- MoMA: Susan Kare, Apple Macintosh OS icon sketchbook, 1982
- MoMA: Kare’nin kendi anlatımı, ikon eskizleri
- Güncel mobil arayüz senaryoları özgün tasarım analizidir.
Kapak görseli: Susan Kare, Graphic icon sketch, 1982–1983 / MoMA; © Susan Kare. Görselin orijinal kaynağı.