Karşılama ekranında görsel hiyerarşiyi güçlendir
Karşılama ekranında ana görseli, başlığı ve birincil eylemi birlikte düşün. Görsel üzerindeki metnin okunabilirliğini koru; keşfetme ve giriş seçeneklerini açık, dengeli bir hiyerarşiyle sun.
Tüyo
Sepet kontrollerini ilgili ürünle grupla
Adet seçimini ve kaldırma işlemini ilgili ürünün bilgileriyle aynı alan içinde tut. Ürünler arasına yeterli boşluk veya ayırıcı ekleyerek hangi kontrolün hangi ürüne ait olduğunu netleştir.
Arama önerilerini anlamlı seçeneklere dönüştür
Benzer arama sözcüklerini tekrarlamak yerine kullanıcının amacına uygun kategori ve ürün grupları sun. Kısa açıklamalar ve görsellerle seçeneklerin farkını anlaşılır kıl.
Formda yalnızca gerekli bilgileri iste
Gereksiz alanları azalt ve uygun durumlarda ad ile soyadı tek alanda topla. Alanları sadeleştirirken görünür etiketleri koru; örnek metinler tek başına etiketin yerini tutmasın.
Ürün seçeneklerinde seçili durumu belirginleştir
Beden ve renk seçeneklerini satın alma düğmesinin yakınında göster. Seçili bedeni dolgu rengiyle, seçili rengi çerçeve ve onay işaretiyle belirginleştir; seçimi yalnızca renkle anlatma.
Adres seçiminde seçili seçeneği belirginleştir
Adres seçeneklerini açık adlarla sun ve seçili adresi hem arka plan vurgusu hem onay işaretiyle göster. Yeni adres ekleme işlemini mevcut seçeneklerden ayır; simgeleri açıklayıcı metinlerle birlikte kullan.
Ürün menüsünü anlaşılır kategorilerle düzenle
Uzun ürün listelerini anlamlı kategoriler altında grupla. Açık etiketler ve destekleyici simgelerle taramayı kolaylaştır; geniş menülerde ilgili bir görsel ve net bir bağlantıyla kullanıcıya yön göster.
Güçlü renkleri dengeli kullan
Birincil eylemi vurgula; ikincil düğmelerin onunla yarışmasını önle.
İç gölgeyi doğru yerde kullan
İç gölge, yazı alanının girilebilir bir yüzey olduğunu anlatabilir.
Kaydırıcıya doğrudan giriş ekle
Kesin bir değer seçmek isteyen kullanıcıya sayı girebileceği bir alan sun.
Seçilen değeri göster
Kaydırıcının o anki değerini kontrolün yanında göster.
Sıralamayı açıkça anlat
Artan ve azalan yerine, önce en düşük ve önce en yüksek gibi somut ifadeler kullan.
Sık seçilenleri öne çıkar
Uzun listelerde en sık kullanılan seçeneği ayrı bir grupta sun.
Gerekli bilgiyi ipucuna saklama
Şifre kuralları gibi gerekli bilgileri alanın yanında görünür tut.
Gereksiz ipuçlarını azalt
Anlaşılır etiketleri tekrar eden ipuçlarıyla arayüzü kalabalıklaştırma.
Adımlara anlamlı isimler ver
İçeriği anlatan adımlar, kullanıcının konumunu anlamasını kolaylaştırır.
Hatalı alanı doğrudan göster
Hangi alanın neden düzeltilmesi gerektiğini açıkça göster.
Grafik değerlerini okunaklı göster
Veri noktasındaki değeri belirgin bir etiketle sun.
Grafik ölçeğini veriye uyarla
Veriye uygun ölçek seçerek değişimi daha anlaşılır göster.
Grafik çizgisini belirginleştir
Çizgi kalınlığı ve eksen etiketlerinin okunabilirliği verinin anlaşılmasını etkiler.
Açılır pencereyi kolayca kapat
Kapatma hedefini büyüt ve pencerenin çevresinde yeterli boşluk bırak.
Kapatma simgesine alan bırak
Kolay fark edilen ve rahat tıklanabilen bir kapatma alanı sun.
Boş ekrandan bir sonraki adıma
Boş durumlarda doğrudan başlanabilecek seçenekler sun.
Boş durumları açıklayıcı yap
Neden içerik görünmediğini ve kullanıcının ne yapabileceğini açıkla.
Veri alanlarını sola hizala
Etiket ve değerleri ortak bir başlangıç çizgisine hizala.
Değerleri etiketlerden ayır
Asıl veriyi öne çıkar; etiketlerin daha fazla dikkat çekmesini önle.
Tablo sütunlarını hizala
Metin ve sayıları türlerine uygun hizalayarak karşılaştırmayı kolaylaştır.
Tablolarda karşılaştırmayı kolaylaştır
Çok sayıda kaydı karşılaştırırken düzenli bir tablo kullan.
Dar ekranda tabloları sadeleştir
Dar alanlarda kayıtları okunaklı kartlara dönüştür.
Onay kutularını tek sütunda tut
Seçeneklerin okunma sırasını dikey bir listeyle netleştir.
Yüklenirken içerik iskeletini göster
İskelet görünümü, içerik gelmeden önce sayfanın yapısını anlatır.
Uzun listelere arama ekle
Çok sayıdaki seçenek arasında arayarak daraltma olanağı sun.
Ok simgelerini anlamıyla kullan
Bir yön oku herkes için aynı şeyi anlatmayabilir; anlaşılabilirliği kontrol et.
Eylemin yönünü destekle
Simgenin konumu, eylemin okunma ve ilerleme yönüyle uyumlu olsun.
Düğme boyutunu dengede tut
Düğme boyutu, metin ve görsel hiyerarşi birlikte çalışır.
Şifre kurallarını baştan göster
Kuralları kullanıcı yazmaya başlamadan önce göster.
Şifreyi görme seçeneği sun
Kullanıcının yazdığı şifreyi gerektiğinde kontrol edebilmesini sağla.
Görsel ağırlıkla hiyerarşi kur
Etiket, ipucu ve girilen değerin ağırlıklarını rollerine göre farklılaştır.
Onay kutularını metinle hizala
Çok satırlı seçeneklerde kutuyu metnin başlangıcıyla hizala.
Çatışan renklerden kaçın
Aşırı doygun ve çatışan renkler mesajın anlaşılmasını zorlaştırır.
Onay için doğru kontrolü seç
Formda kabul veya seçim bildirmek için onay kutularını kullan.
Anahtarı anlık ayarlarda kullan
Açma kapama anahtarları etkisi hemen görülen ayar değişikliklerine uygundur.
Beklenen biçimi alan içinde anlat
Biçimi belirli alanlarda ne yazılacağını anlatan ipuçları sun.
Az seçeneği doğrudan göster
Birkaç seçenek varsa açılır menü yerine seçenekleri görünür tut.
Seçenekleri karşılaştırılabilir yap
Seçeneklerin görünümünü ve anlamını seçimden önce göster.
Tıklama alanlarını ayır
Yan yana eylemler arasında yeterli boşluk bırakarak yanlış tıklamaları azalt.
Düğme etiketlerini rahat okut
Uzun etiketlerde normal yazım daha rahat taranabilir.
Bağlantıyı bağlantı gibi göster
Tıklanabilir metni renk ve alt çizgiyle ayırt et.
Düğmenin görevini görünür kıl
Belirsiz şekiller yerine eylemi anlatan bir etiket kullan.
Birincil eylemi doğru konumlandır
Eylemlerin sırası ve görsel ağırlığı karar akışını desteklesin.
Mobil alanlarda yazıyı küçültme
Mobil yazı alanlarında yeterli yazı boyutu kullan.
Yazı boyutları arasında denge kur
Etiket, alan ve düğme metinlerinin boyutları uyumlu olsun.
Form alanlarını kolay hizala
Metnin başlangıcını net gösteren alan sınırları kullan.
Küçük tıklama hedeflerinden kaçın
Seçeneklere yeterli tıklama alanı ver.
Hata mesajını çözümle birlikte ver
Hatanın nedenini ve nasıl ilerlenebileceğini açıkla.
Alt çizgili veya çerçeveli: iki geçerli form stili
Alt çizgili ve çerçeveli yazı alanlarının ikisi de kullanılabilir. Seçtiğin stilde alanların fark edilmesini, etiketlerin okunmasını ve odak durumunun belirgin olmasını sağla; form boyunca tutarlı kal.
Formları tek sütunda düzenle
Tek sütunlu akış, doldurma sırasını daha açık gösterir.
İsteğe bağlı alanları belirt
Çoğu alan zorunluysa yalnızca isteğe bağlı alanları işaretle.
Düğme yazısına nefes aldır
Etiketle düğme kenarları arasında yeterli boşluk bırak.
Simge stilini tutarlı kullan
Aynı grupta dolu ve çizgisel simgeleri gelişigüzel karıştırma.
İnce ve açık renkli yazılar
Önemli bilgilerin fark edilmesi için okunaklı ağırlıklar ve yeterli kontrast kullan.
Kritik eylemleri ayırt et
Geri alınamayan eylemleri vazgeçme seçeneğinden etiket ve renkle ayır.
Düğmeye açık bir eylem yaz
Tıklayınca gerçekleşecek eylemi anlat.
Slayt noktalarına anlam kat
Açıklayıcı sekmeler kullanıcının nereye gideceğini gösterir.
Aradığın içerik burada görünmüyor.
Daha kısa bir arama yapabilir veya filtrelerini temizleyebilirsin.