Sparkles İkonu Arayüzde Ne Anlatıyor, Ne Anlatmıyor

Sparkles ikonu birkaç yıl içinde her yere yayıldı: yapay zekâ butonları, yeni özellik rozetleri, otomatik düzeltme menüleri, kimi zaman sadece süs. Aynı simge bunca işi taşıyınca hiçbirini anlatmaz hale geliyor. Aşağıdakiler ikonu tamamen çöpe atmadan sorunu kapatan kararlar.

Tek başına bırakmayın

Yıldız favoriye, kalp beğeniye, çöp kutusu silmeye oturdu. Bu ikonlar yıllar boyunca tek bir işleve bağlı kaldıkları için etiketsiz çalışıyor. Sparkles'ın böyle bir geçmişi yok. Bugün aynı simge üretmeyi, özetlemeyi, yeniden yazmayı, "yeni" rozetini ve bazen hiçbir işlevi olmayan bir vurguyu gösteriyor. Bir simge beş işe birden bağlıysa kullanıcı her karşılaşmada bağlamdan tahmin etmek zorunda kalır. Tahmin gerekiyorsa ikon bilgi taşımıyor demektir.

Yanına eylemi söyleyen bir etiket koyun: "Özetle", "Yeniden yaz", "Alternatif üret". Etikete yer yoksa ikonu atın, etiketi bırakın. İkon süs, etiket iş.

Ekran okuyucuya ne gidiyor

Arayüz tartışmalarının çoğu, iddianın kodda bir karşılığı var mı diye bakılmadan yürüyor. Etiketsiz ikon butonunda karşılık net: başlıksız bir SVG, erişilebilirlik ağacına isimsiz bir düğme olarak düşer, ekran okuyucu kullanıcısı "düğme" duyar ve geçer gider.

<button aria-label="Metni yapay zekâ ile yeniden yaz"> <svg aria-hidden="true" focusable="false">…</svg> </button>

Bunu üç satırla çözersiniz: düğmeye işi anlatan bir ad verin, SVG'yi aria-hidden yapın, tooltip'i tek başına erişilebilirlik çözümü saymayı bırakın. Erişilebilir ad ikonun adı değil işin adı olmalı, çünkü "parıltı" yazan bir aria-label hiç yazmamakla neredeyse aynı kapıya çıkar. Tooltip meselesine gelince: dokunmatik ekranda hover diye bir şey yok, klavye odağında da çoğu tooltip hiç açılmıyor.

Yapay zekâ göstergesi olarak kullanacaksanız kuralı sabitleyin

Sparkles'ın yapay zekâyla ilişkisi kullanıcıların bildiği bir şey değil, ürünlerin son birkaç yılda tekrarlayarak oturtmaya çalıştığı bir alışkanlık. Alışkanlık ancak tutarlılıkla yerleşir. Ürün içinde tek bir anlam seçin ve her yerde onu kullanın: ya "bu metni model üretti" işareti olsun, ya "buraya basınca model çalışır" düğmesi. İkisini aynı arayüzde karıştırırsanız kullanıcı simgeyi gördüğünde ne olacağını kestiremez, sonuçta basmayı bırakır.

İkisi arasında seçim gerekiyorsa kaynak işareti daha sağlam duruyor. Orada ikonun tek bir işi var, tıklanabilir olmadığı için de yanlış beklenti üretmiyor. Düğme olarak kullandığınız anda etiket zorunlu hale geliyor.

Hiç kullanmamanın doğru olduğu yerler

• Geri alınamayan işlemler. Toplu düzenleme, otomatik temizleme, dosyanın üstüne yazma. Parıltı bu işlemlerin ağırlığını gizler.
• Ödeme, sözleşme onayı, veri paylaşımı gibi kullanıcının ne olacağını tam bilmesi gereken adımlar.
• Zaten yerleşik bir ikonu olan işlevler. Arama büyüteçtir, filtre huniyle anlaşılır. Bunları parıltıyla değiştirmek yenilik değil kayıptır.

Anlaşılıyor mu, on beş dakikada ölçün

Bu soruyu cevaplamak için araştırma planı kurmanız gerekmiyor. Beş kişiye arayüzün ekran görüntüsünü gösterin, "bu düğmeye basınca ne olur" diye sorun, cevapları olduğu gibi yazın. Üçten fazla farklı cevap çıkıyorsa ikon çalışmıyor, etiketi ekleyin. Ölçüm ucuz, tartışmayı da bitiriyor.