Arayüz Tasarımının Altın Kuralları (2013)
(cs.umd.edu)- Ben Shneiderman’ın 8 arayüz tasarımı ilkesi, çoğu etkileşimli sisteme uygulanabilecek pratik ölçütlerdir; ancak her tasarım alanında doğrulama ve uyarlama gerekir
- Tutarlı terimler ve davranışlar, evrensel kullanılabilirlik ve bilgilendirici geri bildirim, kullanıcıların durum değişikliklerini öngörüp anlamasını sağlayan temel koşullardır
- İş akışı, başlangıç·orta·bitişten oluşan birimler hâlinde gruplanmalı; tamamlanma anında net bir onay verilmelidir ki kullanıcı bir sonraki adıma kolayca geçebilsin
- Öncelik hataları önlemektir; hata oluştuğunda ise somut kurtarma yönlendirmesi ve kolay geri alma, kullanıcının kaygısını azaltmalıdır
- Kontrol hissi ve düşük bellek yükünü merkeze almak, mobil, masaüstü ve web arayüzlerinde üretkenliği ve ustalık hissini artırabilir
İlkelerin niteliği ve uygulama kapsamı
- Ben Shneiderman, geniş kullanıcı arayüzü tasarımı bilgisini birkaç Golden Rules altında sıkıştırarak, çoğu etkileşimli sisteme uygulanabilecek yönergeler hâlinde düzenledi
- Bu ilkeler deneyimden doğdu ve 30 yılı aşkın sürede rafine edildi; ancak belirli tasarım alanlarında ayrı doğrulama ve uyarlama gerekir
- 1985’teki ilk liste de öğrenciler ve tasarımcılar için yararlı bir kılavuz olarak benimsendi; Jakob Nielsen, Jeff Johnson ve diğerleri buna farklılaştırmalar ve genişletmeler ekledi
- Bu sürüm, Designing the User Interface: Strategies for Effective Human-Computer Interaction: Sixth Edition kitabının 3.3.4 bölümünde yer alır
Arayüz tasarımının 8 altın kuralı
-
Tutarlılığı hedefleyin
- Benzer durumlarda tutarlı eylem sıraları gerekir
- İstemler, menüler ve yardım ekranlarında aynı terimler kullanılmalıdır
- Renkler, yerleşim, büyük harf kullanımı ve yazı tipleri de genel olarak tutarlı olmalıdır
- Silme komutu onayı veya parola girerken karakter göstermeme gibi istisnalar anlaşılabilir ve sınırlı olmalıdır
-
Evrensel kullanılabilirliği hedefleyin
- Farklı kullanıcıların ihtiyaçları tanınmalı, içerik dönüşümünü kolaylaştıran esnek bir tasarım gereklidir
- Acemi ve uzman kullanıcı farkı, yaş grupları, engeller, uluslararası farklılıklar ve teknoloji çeşitliliği gereksinim kapsamını genişletir
- Yeni başlayanlar için açıklamalar, uzmanlar için kısayollar ve hızlı ilerleme işlevleri, arayüz kalitesi algısını yükseltir
-
Bilgilendirici geri bildirim sağlayın
- Her kullanıcı eylemine arayüz geri bildirimi eşlik etmelidir
- Sık görülen küçük eylemler için basit bir tepki yeterli olabilir; ancak seyrek ve önemli eylemler için daha somut bir tepki gerekir
- İlgi nesnesini görsel olarak sunmak, değişiklikleri açıkça göstermeyi kolaylaştırır
-
Tamamlanma hissi veren bir diyalog akışı tasarlayın
- Görev sıraları başlangıç, orta ve sondan oluşan gruplar hâlinde kurulmalıdır
- Bir görev grubu bittiğinde verilen bilgilendirici geri bildirim; başarı, rahatlama ve bir sonraki göreve hazırlık sinyali sağlar
- E-ticaret sitelerinde ürün seçiminden ödemeye geçiş ve işlemi net bir onay sayfasıyla tamamlama akışı buna örnektir
-
Hataları önleyin
- Mümkün olduğunca arayüz, kullanıcının ciddi hatalar yapmasına izin vermeyecek şekilde tasarlanmalıdır
- Uygun olmayan menü öğelerini devre dışı bırakmak veya sayısal giriş alanında alfabetik karakterlere izin vermemek buna örnektir
- Hata oluştuğunda basit, yapıcı ve somut kurtarma yönergeleri sunulmalıdır
- Tek bir yanlış posta kodu yüzünden tüm ad-soyad ve adres formunu yeniden doldurtmak yerine yalnızca hatalı kısmın düzeltilmesi istenmelidir
- Yanlış eylemler arayüz durumunu değiştirmemeli ya da durumu geri yüklemenin bir yolu birlikte sunulmalıdır
-
Kolay geri almayı mümkün kılın
- Mümkün olduğunca eylemler geri alınabilir olmalıdır
- Geri alma, kullanıcıya hataları iptal edebileceği güvencesini verir; böylece kaygı azalır ve alışılmadık seçenekleri keşfetmesi kolaylaşır
- Geri almanın birimi tek bir eylem, veri giriş işi ya da ad-soyad ve adres bloğu gibi bir görev grubu olabilir
-
Kullanıcının kontrolü elinde tuttuğunu hissetmesini sağlayın
- Deneyimli kullanıcılar, arayüzü kendilerinin kontrol ettiğini ve arayüzün kendi eylemlerine tepki verdiğini güçlü biçimde hissetmek ister
- Beklenmedik değişiklikler, tanıdık işlemlerin değişmesi, sıkıcı veri girişi, gerekli bilgiye erişimde zorluk ve istenen sonucu oluşturamama kullanıcıyı rahatsız eder
-
Kısa süreli bellek yükünü azaltın
- İnsanların kısa süreli bellekte bilgi işleme kapasitesi sınırlıdır; pratik kural olarak yaklaşık “7±2 chunks” hatırlanabilir
- Kullanıcının bir ekrandaki bilgiyi aklında tutup başka bir ekranda kullanmasını gerektiren arayüzlerden kaçınılmalıdır
- Cep telefonları telefon numarasını yeniden girmeyi gerektirmemeli, web sitesindeki konum bilgisi sürekli görünmeli ve uzun formlar tek ekrana sığacak şekilde sıkıştırılmalıdır
Tasarımcıların elde edeceği pratik ölçütler
- Bu ilkeler her ortama uygun şekilde yorumlanmalı·arınmalı·genişletilmelidir
- Sınırları olsa da mobil, masaüstü ve web tasarımcıları için iyi bir başlangıç noktasıdır
- Basitleştirilmiş veri girişi, anlaşılır gösterim ve hızlı, bilgilendirici geri bildirim; kullanıcı üretkenliğini artırmaya odaklanır
- İyi bir arayüz, kullanıcının sistem karşısında yeterlilik·ustalık·kontrol hissi duymasına yardımcı olmalıdır
1 yorum
Hacker News yorumları
UI “tasarımı”na mutlaka dahil sayılmasa da performans da sıkça göz ardı ediliyor
Performansı kötü bir UI, bu tasarım kurallarının hepsini ihlal etmiş sayılır. Sony Android akıllı TV’m harika görünüyor ama UI o kadar yavaş ki pratikte kullanılamaz durumda
Sürekli değişen, istikrarsız UI’lar da ilkelerin çoğunu ihlal eder. Akıllı TV’ler bu konuda da özellikle kötü; ana ekran düzeni ve uygulama simgelerinin konumu belirgin bir neden olmadan sık sık değişiyor
Buna ek olarak, giderek büyüyen kişisel şikâyetim etiketsiz simgeler. Çoğu zaman araç ipuçları bile yok; bir düğmenin adını öğrenmek için belgeleri Google’da aramak zorundaysanız, o UI tasarımı kötüdür
Kullanması zor arayüzlere gençler akın ediyor ve bu anlaşılmazlık, ebeveyn kuşağını dışarıda bırakan bir içeridenlik özelliği gibi işliyor
İyi bir tasarımcı, önerdiği UI’ın performansı nasıl etkileyeceğini geliştiricilerle tartışır ve mühendislik, kullanıcıya görünen teknik kararlar alırken ödünleşimlerde yardımcı olur
UI’da yalnızca yüzlerce küçük simge olmakla kalmıyor, belgelerde de aynı simgeler kullanılıyordu. Kılavuz “önce []’ye tıklayın, sonra []’ye basın, en son []’ye gidip [] yapın” gibi bir şeydi
V5’in çok erken bir sürümünden bahsediyorum, çok uzun zaman önceydi; umarım artık düzelmiştir
Geri kalan her şey daha çok kodlamaya yakın
Her sabah aynı iki haber podcast’ini dinliyorum ama uygulamanın önerileri her sabah hiçbir neden yokken karışıyor
Daha da sinir bozucu olan, uygulama açılırken dünün düzenini kısa süreliğine göstermesi, yükleme için yaklaşık 1 saniye donması ve sonra öğeleri yeniden sıralaması. O anda hareket eden öğeye her seferinde yanlışlıkla dokunuyorum; aşırı sinir bozucu
Birkaç yıl önce birlikte çalıştığım bir tasarımcı, tutarlılığın neden önemli olduğunu çok iyi açıklamıştı
Mesele sınırlı bir renk paleti ya da kimsenin fark etmeyeceği yazı tipi seçimi değil. Ayrıntı kurallarının peşinden gidince ortaya korkunç yazılımlar çıkıyor. Bazı insanlar, UI çeşitliliği azaldıkça tutarlılığın arttığını sanıyor
Asıl mesele, kullanıcının o yazılımın uzmanı olabilmesini sağlamak
O tasarımcı Microsoft Office’i örnek vermişti. İnsanlar Microsoft Office’i “bildikleri” için gurur duyuyor ve “Office”in ataleti hissedildiğinden farklı uygulamalar arasında doğal biçimde gidip geliyorlar. Vim’de de aynı hissi alıyorum. Bir şeyin nasıl çalışması gerektiğini öylece biliyorsunuz ve iyi yapılmış yeni bir eklenti genellikle o kalıba saygı duyuyor
Office ve (Neo)Vim mükemmel UI örnekleri değil ama olağanüstü derecede istikrarlılar
Örneğin dört seçenek göstereceğiniz zaman, marka temasına büründürülmüş [Insert UI Library]’nin arama yapılabilir onay öğeleri combobox’ını kullanabilirsiniz ya da sadece etiketli sıradan radio button’lar veya checkbox’lar gösterebilirsiniz. İkincisi her açıdan daha iyidir
Kullanıcılar yalnızca daire ve karelere bakarak tek seçim mi, çoklu seçim mi yapacaklarını anlayabilir; dört seçeneğin hepsini görebilir; mobil klavyenin “arama” yapmak için açılıp küçük ekranı daha da kapatması sorunu olmaz; erişilebilirlik de neredeyse her zaman %100’e yakındır
Ama bu seçenek “tasarım sistemimizle şirin biçimde uyumlu” maddesinde başarısız olduğundan tasarımcılar genellikle ilkini seçer; daha da kötüsü, o yöntemi standartlaştırıp sıradan widget kullanımını “bug” hâline getirirler
Sonuçta çok fazla “UX tasarımcısı” estetiğe ve markalamaya tapıp diğer her şeyi feda ediyor. UI widget’ları, markayı ya da yaratıcılığı gösterecek yer değildir. Bu, her harfi logo şekline zorlayan özel bir yazı tipi yapmamanız gerektiğiyle aynıdır. Müşteriler için markadan çok kendi işlerini bitirip bitirememeleri önemlidir
İhtiyaç duyulan özelliği bulma becerisini ciddi biçimde bozdu
Kendini teknik biri olarak görmeyen birinin Excel’de inanılmaz hızlı hareket ettiğini görmek her zaman özel bir şey
Microsoft’un UI tasarım kuralları epey etkileyici. Yıllarca süren tutarlılık sayesinde insanlar 1-2 yılda bir yükseltme yapsalar da yazılımı kullanmaya devam edebiliyor. Bunu Microsoft hayranı olduğum için söylemiyorum
Yükseltmenin özü, UX’i iyileştiren kademeli değişimdir. Ancak Win 95’in “her yerde sağ tıklayınca özellikler ve daha derin ayarlar/ayrıntılar” kavramını getirdiğinde tasarım ekibinin bunu neden reddetmediğini anlamıyorum. Çünkü bu, kullanıcıya sağ tıklanabilir olduğunu göstermeyen görünmez bir özellikti. Win 95’i ilk birkaç kez kullanan hiç kimse sağ tıklamayı anlamamış gibiydi
Yetkinliğin ilgili olduğuna katılıyorum ama tutarlılığın neden yetkinliğe yol açtığı konusunda biraz daha bağlantı kurmak gerekiyor gibi
Tutarlılık, kullanıcının sistem hakkında zaten bildiklerini sistemin diğer bölümlerine bileşik faiz gibi genişletmesidir. Sistem tutarlıysa X ve Y’yi öğrenmek için harcanan çabayla Z ve W’yi de bilirsiniz. Çünkü aynı şekilde çalışacaktır. Tutarsız bir sistemde, mevcut öğrenme yatırımından elde edilen değer çok daha azalır
Office en azından uzun vadede istikrarlı değil. Kötü şöhretli ribbon, istikrarlı ve verimli Word UI’ından üzücü bir kopuştu; Microsoft’un Windows platformu genelindeki anlaşılması zor gerilemesi de sorunu büyüttü. Örneğin uygulamalardan menü çubuğunu kaldırmaları. Bunu neden yaptıklarını hiç bilmiyorum
Eklenmesini istediğim bir “kural” daha var: kavramsal modeli kullanıcıya görünür kılmak
Ürünün kavramsal modelini anlamazsanız, ikon etiketleri ne kadar iyi konmuş olursa olsun hep kafa karıştırır. Örneğin “New Configuration” komutu olan bir ürün düşünün; daha en başta “Configuration”ın ne olduğu belirsiz. Başka nesneleri tanımlamaya yarayan bir şablon mu? Birden fazla seçenek kümesi arasında hızlı geçiş yapmanın bir yolu mu? Klasör gibi bir kapsayıcı mı?
UI, kullanıcının yalnızca arayüzde gezinerek kavramsal modeli çıkarabileceği şekilde tasarlanmalı. Bu her zaman kolay bir iş değil
“Örneğin kullanıcı yanlış bir posta kodu girdiğinde ad-adres formunun tamamını yeniden doldurtmak yerine, yalnızca hatalı kısmı düzeltmeye yönlendirmeli” kısmı en büyük şikâyet noktası; hâlâ da sık görülüyor
Birden fazla sayfadan oluşan formlarda da ileri geri giderken bu ilkeye uyulmalı
“Hatalı bir işlem arayüz durumunu değiştirmemeli; değiştirdiyse de eski duruma nasıl dönüleceğini göstermeli” de önemli
Telefon ve saat gibi küçük ekranlarda yer kazanmak isteyen tasarımcılar giderek daha çok ikonlara güveniyor. Ama birçok ikon yabancı ya da yorumlaması zor; bazen ne olduğunu ancak basınca anlayabiliyorsunuz. Böyle ikonlarda, hata yaptığınızda eski duruma dönmenin bir yolu mutlaka olmalı
E-posta adresi ve parolayla giriş yapmaya çalışırken bu zaten bir sorun, ama “Parolanızı mı unuttunuz”a bastıysam, az önce girdiğim e-posta adresini tekrar yazmamı isteyen bir forma göndermeyin
“Uygun olmayan menü öğelerini gri yapın” sözünün bir şartı var
Neden gri yapıldığı açık değilse bunu yapmamak gerekir. Komutu etkin bırakıp, tıklandığında o anda kullanılamıyorsa bir hata mesajıyla neden kullanılamadığını açıklamak gerekir. Kullanıcıya komutun neden devre dışı olduğunu buldurmak can sıkıcıdır
İstisna, kullanıcının çok zaman harcadıktan sonra ancak kullanılamayacağını öğrenme ihtimalinin yüksek olduğu durumlardır
Konuyla ilgili daha fazla okuma: https://medium.com/@vedranio/james-bond-and-the-design-of-di...
Bu, iki tarafın avantajlarını birden almak gibi görünüyor
Bir yapılacaklar uygulaması bunu yapıyor. Premium komutlar ücretsiz komutlardan görsel olarak ayırt edilmiyor; bu yüzden sık sık tıklıyorsunuz ve her seferinde tüm akışı bölen bir abonelik teşvik iletişim kutusu çıkıyor
Bana göre bu ciddi bir UI hatası
Gerekçeyi söylemeden yalnızca belirli bir eylemi devre dışı bırakan UI beni her zaman öfkelendirir
Nielsen’in 10 kullanılabilirlik sezgisel kuralı iyi bir kuzey yıldızı görevi görür
https://www.nngroup.com/articles/ten-usability-heuristics/
NN sayfasındaki bilgiyi sindirmek çok daha kolay; daha özlü ve sayfa düzeni de çok daha iyi
Her iki yazı da kulak verilmesi gereken bilgi ve yönlendirmeler içeriyor, ama özgün sayfanın NN sayfasının terk ettiği eski tarz aynı yazı boyutu ve paragraf alışkanlıklarını benimsemiş olması ironik
Hacker News’in de bu bilgilerin bir kısmını izlememesi sinir bozucu. Mevcut bir yazıyı düzenlerken “update” düğmesine bastıktan sonra geri bildirim yeterince açık değil. Muhtemelen ekranı yeniden çiziyor
Tam seçmek üzere olduğum yere başka bir şey sokup yanlış basmama neden olan UI artık bırakılmalı
Önceki kurallardan bazılarını ihlal ediyor olabilir ya da hafifletilebilecek bir sorun olabilir; ama kişisel olarak beni gerçekten çıldırtan bir unsur ve özellikle ciddi bir hata olduğunu düşünüyorum
Eksik önemli bir kural var. Bir zamanlar fazla bariz görünen bir şeydi: statik bilgi ile etkileşim öğeleri ayırt edilmeli
Ayrıca uygulanamayan etkileşim öğelerini gizlemek yerine gri yapmak gerekir. Böylece kullanıcı o özelliğin var olduğunu, nerede olduğunu ve kullanmak için hangi koşulların sağlanması gerektiğini öğrenir
Bununla bağlantılı olarak, yalnızca kullanıcı tesadüfen imleci üzerine getirdiğinde bir şeylerin belirdiği saklambaç UI’larına asla güvenilmemeli. İş bitirmeye çalışıyoruz; Advent calendar keşfetmeye değil
Öğrendiğim altın kurallardan biri, arayüz çizildikten sonra öğelerin beklenmedik şekilde hareket etmemesi gerektiği
Google, başparmağınızı kaldırıp ekrana basmanız arasındaki sürede düğmenin hareket etmesi konusunda özellikle kötü; ama bunu yapan yalnızca Google değil
Bir hedef, dokunulmadan yaklaşık 0,25 saniye önce yeni ortaya çıktıysa dokunma olayı üretilmemeli. Çünkü insan tepki hızıyla bir düğmeyi bu kadar hızlı hedefleyip basmak mümkün değil
Bunlar açıkça ütopik altın kurallar
Çoğu kişi bu tür kurallara karşı çıkmaz
Yine de çoğu geliştirici, bu kuralları sık sık ihlal eden arayüzlerle uğraşmış olmalı. Anlamadıkları ya da istemedikleri için değil, o anda maliyet çok yüksek olduğu için
Örneğin geri alınabilirlik çok zordur ve ancak uygulamanın altındaki veri yapıları en baştan bunu hesaba katacak şekilde tasarlanmışsa mümkün olur. Hataları önleme de benzer şekilde; neyin hata olduğunu tam olarak bilmek bile zor ve maliyetlidir, kullanıcı dilinde kusursuz geri bildirim sağlamak ise çok daha karmaşıktır