Hızlı bakışın cevaplayacağı tek soruyu belirleyin

Özgün örnek olarak bir mobilya kataloğunda sandalye seçildiğini düşünelim. Ziyaretçi ilk aşamada ürünün ölçüsünü ve mevcut kaplama seçeneklerini görmek istiyor. Kısa bir özet bu kararı destekleyebilir. Ancak montaj belgesi, bakım bilgisi ve kullanım fotoğrafları incelenecekse içerik daha derin bir okuma gerektirir. Pencerenin kapsamını bu iki durum arasındaki sınıra göre çizin; bütün bilgiyi içine sığdırmayı başlangıç hedefi yapmayın.

Paylaşılması gereken bilgiye kalıcı adres verin

Bir mimar ürünü çalışma arkadaşına göndermek, satın alma ekibi ise aynı seçeneğe toplantıda geri dönmek isteyebilir. Ayrıntı sayfasının belirli bir adresi olması bu görevleri destekler. Hızlı bakış kullanıyorsanız aynı ürünün ayrıntısına giden açık bir bağlantı sunun. Bağlantı genel kategoriye dönmesin. Bir pencereyi URL ile açmak teknik olarak mümkün olsa da doğrudan giriş ve yenileme davranışı ayrıca tasarlanmalıdır; bunların kendiliğinden çalıştığını varsaymayın.

Açılma kadar kapanmayı da tasarlayın

W3C’nin modal pencere örüntüsü, odağın pencereye taşınmasını, içindeki klavye dolaşımını, Escape ile kapanmayı ve uygun yere geri dönmeyi tarif eder. Bu davranışları geliştirme teslim kriterine ekleyin. Görünür bir kapatma kontrolü bulunsun; yalnız dış zemine dokunarak kapanma yeterli olmasın. Bir pencere kapandığında ziyaretçinin katalogdaki yerini ve hangi üründen geldiğini yeniden bulması gerekmemeli. Gerçek klavye testi bu ayrıntıyı görünür hale getirir.

Telefonda iki kaydırma alanı yaratmamaya çalışın

Dar ekranda uzun bir pencere, arkasındaki sayfa ile birlikte kayabiliyorsa kullanıcı hangi yüzeyde olduğunu karıştırabilir. Başlık ve kapatma kontrolünün erişilebilir kaldığını, içeriğin altına ulaşılabildiğini ve sanal klavye açılınca alanların örtülmediğini kontrol edin. Uzun formu küçük bir pencereye sıkıştırmak yerine ayrı bir adım düşünün. Teklif formunda dosya yükleme rehberi, bu adımın kendi ihtiyaçlarını açıklıyor.

Bilgi kartını gerçek bir satın alma eylemi gibi göstermeyin

Öğretici örneğimizde hızlı bakış yalnız ölçü ve kaplama özeti sunuyor; altındaki bağlantı “Ürün ayrıntısını incele” diyor. İşletme çevrim içi sipariş almıyorsa “Hemen satın al” ifadesi eklemeyin. Bir butonun görünmesi, arkasındaki sürecin çalıştığı anlamına gelmez. Teknik değerleri onaylayan kişi, bağlantı hedefi ve güncelleme sorumlusu aynı içerik kaydında bulunabilir. Böylece tasarım kararının günlük bakım karşılığı da belirlenir.

Üç giriş yolunu ayrı ayrı deneyin

Ürünü listeden açın, ayrıntı adresini yeni bir oturumda açın ve tarayıcının geri düğmesiyle listeye dönün. Seçilen kategori veya filtre kayboluyor mu, kapatma kontrolü bulunabiliyor mu, sayfa başlığı ürünü anlatıyor mu? Bu sorulara gözlemle cevap verin. Galeri gezinmesi ve web tasarım kapsamı bu yapıyı proje genelinde planlamak için sonraki adımlar olabilir. Örnek bir ürünle başlayıp düzen doğrulandıktan sonra kataloğa uygulayın.

Sık sorulan sorular

Her üründe hızlı bakış gerekli mi?

Hayır. Kartın bilgisi yeterliyse doğrudan ayrıntı sayfasına geçmek daha az arayüz yükü yaratabilir.

Açılır pencere kullanmak ayrı sayfayı gereksiz kılar mı?

Paylaşım, kapsamlı bilgi ve doğrudan erişim gereken ürünlerde çoğunlukla kalıcı bir ayrıntı adresi de gerekir.

Kaynaklar ve ileri okuma

W3C WAI — Dialog (Modal) Pattern
Web tasarım & geliştirmeBu hizmeti konuşalım