Norman kapısı: itilecek mi, çekilecek mi?

Kısaca

Norman kapısı (Norman door), görünüşü yanlış sinyal veren kapıdır. Örneğin kolu çekmenizi söyler, kapı ise itilerek açılır. Bu yüzden üstüne "İtiniz" ya da "Çekiniz" yazısı yapıştırılır. Adını The Design of Everyday Things kitabının yazarı Don Norman'dan alır. Arayüzdeki karşılığı, düz yazı gibi görünen butondur.

Kısaca

  • Norman kapısı, görünüşü yanlış sinyal veren kapıdır. Nasıl açıldığını anlatmak için üstüne yazı yapıştırmak gerekir.
  • Adı, The Design of Everyday Things kitabının yazarı Don Norman'dan gelir.
  • Kitap ilk kez 1988'de The Psychology of Everyday Things adıyla çıktı. Gözden geçirilmiş baskısı 2013'te yayımlandı.
  • Vox, Şubat 2016'da bu kapıları anlatan bir video yayımladı. Roman Mars ve Vox'tan Joe Posner, videoda Norman'la konuştu.
  • Arayüzdeki karşılığı, buton olduğu anlaşılmayan buton ya da tıklanmayan ama tıklanır gibi duran yazıdır.

Hikâye: bir kapı neden tabela ister

Bir kapıya yaklaşıyorsunuz. Kapıda tutmaya uygun, dikey bir kol var. Kolu tutup çekiyorsunuz ve kapı kıpırdamıyor. Sonra küçük bir kâğıt gözünüze çarpıyor: "İtiniz".

Türkiye'de mağaza, banka şubesi ve hastane kapılarında bu kâğıtları sık görürüm. Çoğu bantla yapıştırılmıştır, çünkü sonradan eklenmiştir. Kapıyı yapan kişi, kapının kendini anlatacağını düşünmüştür.

Kapının adı neden Norman

Don Norman bilişsel bilimci ve kullanılabilirlik mühendisidir. 1988'de The Psychology of Everyday Things adlı bir kitap yazdı. Kitap sonra The Design of Everyday Things adını aldı. Norman 2002 baskısının önsözünde yeni adın içeriği daha iyi anlattığını söyler.

99% Invisible'ın 26 Şubat 2016 tarihli yazısına göre bu tuhaf kapı sorunu, Norman'ı kitabı yazmaya iten şeylerden biriydi. Kapıya onun adı bu yüzden verildi.

Terimi ilk kimin kullandığını açtığım kaynaklarda bulamadım. Bu yüzden bir tarih vermiyorum.

Vox videosu

Vox, 26 Şubat 2016'da "It's not you. Bad doors are everywhere." başlıklı bir video yayımladı. 99% Invisible'a göre Norman'la söyleşiyi Roman Mars ve Vox'tan Joe Posner birlikte yaptı.

Videonun ana fikri adında yazıyor: sorun sizde değil, kapıda. Norman videoda şöyle bir ölçüt veriyor. Bir kapıda sürekli yanılıyorsanız bu sizin suçunuz değil. Başkaları da sürekli yanılıyorsa, bu, kapının gerçekten kötü olduğunun iyi bir işaretidir.

Videoda düz plakalı bir kapı da var. Onda yapılabilecek tek şey itmek, bu yüzden tabelaya gerek kalmıyor.

Norman ertesi gün videoyu kendi sitesi jnd.org'da paylaştı. Çok iyi yapıldığını yazdı ve hemen ekledi: "Gerçi ben tarafım." (Çeviri benim.)

Kol, plaka ve işaretçi

Kitaptaki çözüm basit. Wikipedia'daki özete göre düz bir plaka itmeyi, uzun ve yuvarlak bir çubuk çekmeyi işaret eder. Kapı itilebilir ya da çekilebilir; hangisini yapacağınızı üstündeki parça söyler.

Norman bu parçalara işaretçi (signifier) der. Kavramı 2008'de "Signifiers, not affordances" yazısında anlattı: algılanabilen her ipucu, ister bilerek konmuş ister tesadüfen oluşmuş olsun, bir işaretçidir. Wikipedia'ya göre kitabın 2013 baskısı da bu kavramı ekledi.

Norman kapısında sorun, işaretçinin yanlış söylemesidir. Kol "çek" der, kapı itilerek açılır. Tabela ise tasarımın söyleyemediğini sonradan söylemeye çalışan bir yamadır.

İki kavramın farkını affordance ve işaretçi sayfasında örneklerle anlattım.

Kaynak kontrolü: ne biliyoruz, ne bilmiyoruz

Bu hikâyenin çekirdeği sağlam, çünkü kaynakların çoğu Norman'ın kendisine ya da onunla yapılan söyleşiye dayanıyor. Ama her ayrıntı aynı sağlamlıkta değil.

KonuDurumNot
Kitabın künyesiDoğrulandıİlk baskı 1988, Basic Books. Gözden geçirilmiş baskı 2013, MIT Press.
Adın Norman'dan gelmesiDoğrulandı99% Invisible yazısı adı açıkça Norman'a bağlıyor.
Terimi ilk kullanan kişiBilinmiyorAçtığım kaynakların hiçbiri bir isim ya da tarih vermiyor.
Norman'ın videodaki sözleriKısmen doğrulandıvox.com sayfası açılmadı. Videonun otomatik altyazı dökümünü okudum. Sözleri birebir alıntılamıyorum, anlamını aktarıyorum.
Norman'ın videoya tepkisiDoğrulandıKendi sitesindeki 27 Şubat 2016 tarihli kısa yazı.

Deneyin: bu kapıyı açın

Aşağıda üç kapı var. Her birine bakın ve itmek mi, çekmek mi gerektiğine karar verin. Tahmininizi yalnızca kapının görünüşüne göre yapın.

Deneyin: bu kapıyı açın

1. kapı

Dikey, tutmaya uygun bir kol var. Kolun altına küçük bir kâğıt yapıştırılmış: İTİNİZ.

Cevap: İt. Kol çekmeyi söylüyor, kapı itilerek açılıyor. Bunu yalnızca küçük kâğıt söylüyor. Bu bir Norman kapısı.

2. kapı

Kol yok. Kapının yan tarafında düz, metal bir plaka var.

Cevap: İt. Düz plakada tutacak yer yok, yapılabilecek tek şey itmek. Tabelaya gerek yok.

3. kapı

Dikey, tutmaya uygun bir kol var. Kâğıt ya da yazı yok.

Cevap: Çek. Kol çekmeyi söylüyor, kapı da çekilerek açılıyor. Ama 1. kapıdaki kol da aynıydı.

Arayüzdeki karşılığı: düz yazı gibi görünen buton

Aşağıdaki iki ekranda aynı ayar formu var. Soldakinde "Kaydet" butonu sıradan bir yazı gibi duruyor. 1. kapıdaki kol gibi, ne yapacağınızı görünüşü söylemiyor.

Norman butonu

Bildirim ayarları

Kampanya e-postaları gönderilsin

KaydetVazgeç

Hangisine basılır, hangisi yalnızca yazı? Tahmin etmek zorundasınız.

Düzeltilmiş hali

Bildirim ayarları

Kampanya e-postaları gönderilsin

KaydetVazgeç

Çerçeve ve dolgu, burada bir eylem olduğunu söyler. Ana eylem dolgulu olduğu için öne çıkar.

Kapıları ben çizdim, gerçek bir binadan alınmadı. Her kapı için İt ya da Çek seçin. Doğru seçimde kapı açılır ve yeşile döner, yanlış seçimde pembe kalır. Üç kapıyı da denediğinizde ekran örneği açılır.

Klavyeyle oynamak için Tab ile butonlara gelin, Enter ya da boşluk tuşuna basın. Sonuç her kapının altında yazıyla da çıkıyor.

1. ve 3. kapıdaki kol aynı. Biri doğru söylüyor, biri yanlış. Kullanıcı ikisini ayıramaz ve haklı olarak ilk sinyale güvenir.

Bugün için ders: arayüzde Norman kapıları

Ekranda kapı yok ama aynı sorun var. Bir öğe görünüşüyle bir şey söyler, davranışıyla başka bir şey yapar. Kullanıcı tahmin etmek zorunda kalır.

Arayüzdeki Norman kapıları

  • Düz yazı gibi duran buton. Çerçevesi, dolgusu ya da farklı rengi yok. Demodaki "Kaydet" böyleydi.
  • Buton gibi duran başlık. Hoa Loranger, NN/g'deki 2015 yazısında bu konuda uyarır: tıklanmayan öğeyi buton gibi göstermeyin. Arka plan rengi verilmiş bir başlık bile tıklanır gibi görünebilir.
  • Metinden ayrılmayan bağlantı. Loranger'a göre bağlantı rengi gövde metninden açıkça ayrılmalı, tıklanmayan yazı da mavi ya da altı çizili olmamalı.
  • Etiketsiz ikon. Loranger, herkesin tanıdığı standart ikonlar dışında ikonun yanına yazı koymayı önerir.

Bunun ölçülebilir bir bedeli var

Kate Moran 2017'de NN/g'de bir göz izleme çalışması yayımladı. Gerçek sitelerden alınan 9 sayfanın iki hali hazırlandı: birinde tıklanabilir öğelerin işaretçileri güçlüydü, öbüründe zayıftı. 71 katılımcının her biri, her sayfanın yalnızca bir halini gördü.

Zayıf işaretçili sayfalarda katılımcılar tıklanacak öğeyi ararken ortalama %22 daha fazla zaman harcadı. Sayfada %25 daha fazla göz sabitlemesi (fixation) yaptılar. Moran, kullanıcının bir şey bulması gereken yerde güçlü işaretçi kullanmayı önerir.

Kendi ürününüzde nasıl bulursunuz

Norman'ın videodaki ölçütü ekranda da işe yarar. Birden fazla kişi aynı yerde yanılıyorsa sorun kullanıcıda değil, tasarımdadır. Bunu görmenin en kısa yolu birkaç kişiyle bir kullanılabilirlik testi yapmaktır.

Testten önce kendiniz de bakabilirsiniz. Ekranı bulanıklaştırın ya da uzaktan bakın ve şunu sorun: tıklanan her şey tıklanır gibi duruyor mu, tıklanmayan hiçbir şey buton gibi durmuyor mu?

Bu soru, Nielsen'in 10 ilkesi içindeki "tutarlılık ve standartlar" ilkesine de dokunur. İlkeye göre kullanıcı, farklı kelimelerin, durumların ya da eylemlerin aynı anlama gelip gelmediğini merak etmek zorunda kalmamalı.

"Devam etmek için alttaki yazıya dokunun" gibi bir açıklama, arayüzdeki "İtiniz" kâğıdıdır. Bunu görüyorsanız yakında bir Norman butonu vardır. Önce butonu düzeltin, sonra açıklamayı silin.

Benim notum

Audit'lerde en sık gördüğüm Norman kapısı, ana eylemin düz yazıya dönmesidir. "Vazgeç" gibi ikincil bir eylemin düz yazı olması kabul edilebilir. Ama "Kaydet" de aynı görününce kullanıcı formu kaydetmeden çıkabiliyor.

Bu genelde sade görünme isteğinden doğar. Ekip çerçeveleri tek tek kaldırır ve ekran temizlenir, ama sinyal de onlarla birlikte gider. Bu bulgu için hep aynı şeyi öneririm: ekrandaki ana eylem dolgulu olsun, buton olduğu bir bakışta anlaşılsın.

Kapı hikâyesini ekiplere anlatmayı seviyorum. Herkes bir kez yanlış kapıyı çekmiş ve kendini suçlamıştır. Biri "kullanıcı dikkat etmiyor" dediğinde ona bu kapıyı hatırlatırım.

Sık sorulanlar

Norman kapısı ne demek?

Görünüşü yanlış sinyal veren kapıdır. Örneğin kolu çekmenizi söyler ama kapı itilerek açılır. Nasıl açıldığını anlatmak için üstüne yazı yapıştırmak gerekir.

Norman kapısı adı nereden geliyor?

The Design of Everyday Things kitabının yazarı Don Norman'dan. 99% Invisible'a göre bu kapı sorunu, Norman'ı kitabı yazmaya iten şeylerden biriydi. Terimi ilk kimin kullandığını açtığım kaynaklarda bulamadım.

Kapıya "İtiniz" yazmak sorunu çözer mi?

Kısmen. Yazıyı okuyan doğru yöne iter, ama kol hâlâ çekmenizi söyler. Norman videoda düz plakalı kapıyı örnek verir: itmekten başka seçenek yoktur, tabelaya gerek kalmaz. İtilecek kapıya düz plaka, çekilecek kapıya kol koymak daha kalıcı bir çözümdür.

Arayüzde Norman kapısı nasıl anlaşılır?

Birden fazla kullanıcı aynı öğede yanılıyorsa, Norman kapısı büyük ihtimalle oradadır. Tıklanan bir öğe düz yazı gibi duruyorsa ya da tıklanmayan bir başlık buton gibi duruyorsa, sinyal ile davranış ayrışmıştır.

Kaynaklar (8)
  1. Don Norman, The Design of Everyday Things, gözden geçirilmiş ve genişletilmiş baskı, MIT Press (ISBN 978-0-262-52567-1); künye için Wikipedia maddesi. 2013; ilk baskı 1988, Basic Books, The Psychology of Everyday Things adıyla
  2. 99% Invisible, Norman Doors: Don't Know Whether to Push or Pull? Blame Design. 26 Şubat 2016
  3. Vox (Joe Posner, Roman Mars ile), It's not you. Bad doors are everywhere., video dökümü. 26 Şubat 2016; otomatik altyazı dökümü
  4. Don Norman, jnd.org, Vox Media on Norman Doors: Bad doors are everywhere. 27 Şubat 2016
  5. Don Norman, Signifiers, not affordances, ACM Interactions 15(6), jnd.org. 17 Kasım 2008
  6. Kate Moran, Nielsen Norman Group, Flat UI Elements Attract Less Attention and Cause Uncertainty. 3 Eylül 2017
  7. Hoa Loranger, Nielsen Norman Group, Beyond Blue Links: Making Clickable Elements Recognizable. 8 Mart 2015
  8. Jakob Nielsen, Nielsen Norman Group, 10 Usability Heuristics for User Interface Design. 1994; son gözden geçirme 2024