Kullanıcı Arayüzü Desenleri: Doğru Deseni Seçmek

Arayüz deseni seçmek, hazır bir bileşen listesinden seçim yapmak gibi görünür. Oysa her desen kullanıcıya bir söz verir: bu anahtarı çevirirsen şu olur, bu alanı boş bırakırsan şunu kaybedersin. Sözün tutulup tutulmadığı tasarım dosyasında değil, uygulamada belli olur.

Tanıdık desen, iyi desen demek değil

Desen rehberlerinin ortak gerekçesi şudur: tanıdık çözümler kullanıcının öğrenme yükünü azaltır. Doğru, ama bu gerekçe tek başına bırakıldığında kendi kendini yer. Çünkü bugün en tanıdık arayüz desenlerinin bir kısmı, kullanıcıyı yanlış düğmeye yönlendirmek için tasarlanmış olanlar. Çerez kutusunda tümünü kabul etmenin renkli bir düğme, ayarları yönetmenin soluk bir bağlantı olması tam olarak tanıdıktır; kullanıcı onu yarım saniyede tanır ve aynı hızda kabul eder. Tanıdıklık, desenin kimin işine yaradığını ölçmez, yalnızca ne kadar çabuk öğrenildiğini ölçer.

Kullanışlı ölçüt daha dar: kullanıcı desenin ima ettiği şeyi yaptığında, eline geçen sonuç niyetiyle aynı mı? Bu soruya hayır cevabı veren her desen, ne kadar yaygın olursa olsun koyu desendir.

Form kontrolleri hangi sözü verir

Checkbox ve radio button, kaydet düğmesine basılana kadar hiçbir şeyin olmadığı sözünü verir. Toggle ise tersini söyler: çevirdiğin an işlem oldu. Aynı ekranda kaydet düğmesiyle birlikte duran bir toggle bu yüzden yalan söyler, kullanıcı anahtarı çevirip sayfadan çıkar ve ayarının kaydedilmediğini sonra fark eder.

Toggle koyacaksan her değişiklik için bir istek, isteğin uçtuğu süre boyunca bir ara durum ve başarısız yanıtta anahtarı eski konumuna geri alma mantığını da yazarsın. Bunu yazmayacaksan toggle yerine checkbox koy, kaydet düğmesini bırak; davranış daha ilkel görünür ama kullanıcıya verdiği sözü tutar.

Sayısal alanlarda stepper, artırma aralığı küçükken işe yarar. Miktar 1 ile 10 arasında geziniyorsa oklar hızlı; kullanıcı 240 yazacaksa oka 240 kez basmaz, o alan serbest metin girişi olmalı. İkisini birden sunmak da makul bir çözüm, yeter ki klavyeyle girilen değer de aynı doğrulamadan geçsin.

Gezinme: hamburger ve mega menü

Hamburger menü mobilde yer kazandırır, geniş ekranda ise elinizde ne olduğunu saklar. Masaüstünde yatay alan varken altı başlığı tek bir ikonun arkasına koymanın karşılığı, kullanıcının o başlıkları hiç görmemesidir.

Mega menü ise yalnızca kategori yapısı durağan olduğunda çalışır. İçerik taksonomisi ayda bir değişen bir sitede mega menü kısa sürede gerçeği yansıtmayan bir panoya dönüşür, çünkü kimse her yeni bölümü menüye eklemeyi hatırlamaz. Aynı şey breadcrumb için de geçerli: gerçek bir hiyerarşi varsa yol gösterir, düz yapılı bir sitede yalnızca süstür.

Bekleme göstergeleri

İskelet ekran, gelecek içeriğin biçimini bildiğiniz yerde iyidir: kart ızgarası, liste satırları, profil başlığı. Ne geleceğini bilmiyorsanız iskelet yanlış bir şekil çizer ve içerik oturduğunda ekran zıplar, orada dönen bir gösterge daha dürüst.

Çok kısa beklemelerde hiçbir şey göstermemek genellikle daha iyi sonuç verir; yarım saniyede açılıp kapanan bir gösterge arayüzü titrek gösterir. İlerleme çubuğunu ise gerçekten tahmin yürütebildiğiniz işlerde kullanın. Yüzde doksanda takılıp kalan bir çubuk, kullanıcının sisteme olan güvenine dönen çarktan çok daha fazla zarar verir.

Hata mesajı kullanıcıya ne borçlu

Yazdığını koru, hatalı alanı göster, kabul edilen biçimi söyle. Parola geçersiz demek kullanıcıyı tahmine zorlar; en az sekiz karakter ve bir rakam demek işini bitirir. Formu baştan temizleyen her hata ekranı, kullanıcının emeğini ceza olarak geri alıyor.

Burada en sık atlanan nokta arayüzde değil, iki taraf arasında: istemcideki doğrulama ile sunucudaki doğrulama aynı kuralı anlatmak zorunda. Biri on karakter sınırı uygularken diğeri sekiz kabul ediyorsa kullanıcı ekrandaki uyarıya göre düzeltir, gönderir ve yine reddedilir. Bu, tasarım hatası gibi görünmeyen ama kullanıcıya en pahalıya gelen uyumsuzluk türü.

Hangi durumları test etmeli

Farklı cihaz genişliklerinde bakmak gerekli ama yeterli değil. Tasarımların çoğu dolu ve düzgün veriyle çizilir, oysa kullanıcıyı şaşırtan haller kenarlardadır: hiç kaydı olmayan liste, tek satırlık tablo, altmış karakterlik ürün adı, yarıda kesilen istek. Bu dört durumu her ekranda açıp bakmak, uzun bir kullanılabilirlik denetiminden daha hızlı sonuç verir.