Von Restorff etkisi (izolasyon etkisi)

Kısaca

Bir listede dokuz kelime siyah, biri kırmızı yazılmış olsun. Von Restorff etkisine göre listeyi kapattıktan sonra kırmızı kelimeyi hatırlama olasılığınız daha yüksektir.

Türkçede izolasyon etkisi diye de geçer, İngilizcesi isolation effect. Etki, farklı olanın kendisinden çok çevresiyle ilgili. Öğe ancak çevresindekiler birbirine benzediğinde öne çıkar.

Arayüzde bu etkiyi bilerek kullanırız, ama kolayca da bozarız. Bozmanın iki kolay yolu var: her şeyi vurgulamak ya da vurguyu yalnızca renge bırakmak.

Hedwig von Restorff'un 1933 çalışması

Etki adını Alman psikiyatr ve çocuk doktoru Hedwig von Restorff'tan alır. Çalışması 1933'te Psychologische Forschung dergisinin 18. cildinde yayımlandı. Makalenin adı "Über die Wirkung von Bereichsbildungen im Spurenfeld", yani kabaca "iz alanındaki bölge oluşumlarının etkisi üzerine".

Deneylerin özü şu: katılımcılara birbirine benzeyen öğelerden oluşan bir liste gösterildi. Listedeki öğelerden biri diğerlerinden farklıydı. Farklı olan öğe, benzerlerine göre daha iyi hatırlandı.

Farklılık birçok yoldan gelebilir. Boyut, biçim, renk, aralık ya da altı çizili yazı bunlardan birkaçı.

Psikolog R. R. Hunt bu bulgunun yaygın anlatımını eksik buluyor. Hunt, 1995'te Psychonomic Bulletin & Review dergisinde "What von Restorff really did" başlıklı bir makale yayımladı. Hunt'a göre von Restorff'un verileri, etkinin ille de göze çarpan bir farklılık gerektirmediğini gösteriyor.

Hunt'ın asıl vurgusu benzerlik. Ona göre farklılık tek başına etkiyi açıklamaz, çevredeki öğelerin birbirine ne kadar benzediğiyle birlikte düşünülmeli. Bu, Gestalt ilkelerindeki benzerlik fikrine çok yakın.

Arayüzde nerede kullanılır

Arayüzde von Restorff etkisini çoğu zaman bilerek kullanırız. Amaç, kullanıcının gözünü ekrandaki tek bir şeye çekmek.

• Öne çıkan plan. Fiyat tablosunda önerdiğiniz plan farklı bir zemin ve çerçeveyle durur, üstünde "En çok tercih edilen" gibi bir etiket taşır. Diğer planlar sade kalır. Bunun ayrıntılarını fiyatlandırma sayfası kalıbında anlattım.
• Birincil CTA. Bir ekranda tek bir dolu, koyu buton olur, gerisi çerçeveli ya da metin buton. Kullanıcı ana eylemi aramak zorunda kalmaz. CTA butonu kalıbında tek ve iki birincil butonu yan yana deneyebilirsiniz.
• Bildirim rozeti. Uygulama simgesinin köşesindeki küçük sayı da aynı etkiyi kullanır. Simgeler birbirine benzer, rozeti olan ayrılır.

Öne çıkan plan başka bir etkiyle de çalışabilir. Yanındaki pahalı plan bir kıyas noktası verir, bunu çapalama etkisi sayfasında anlattım.

Bir öğeyi neyle ayırırsınız

Akla ilk renk gelir. Oysa yukarıda saydığım farklılık türlerinin her birinin arayüzde bir karşılığı var.

• Boyut ve ağırlık. Daha büyük ya da daha kalın yazılan başlık, aynı satırdaki diğer metinden ayrılır.
• Biçim. Dolu buton çerçeveli butonların, yuvarlak rozet köşeli kartların yanında farklı durur.
• Aralık. Diğerlerinden biraz uzağa konan öğe, ayrı bir grup gibi okunur.
• Yazı. "Önerilen" ya da "Kapalı" gibi bir etiket, renk görülmese de okunur.

En sağlam vurgu bunlardan en az ikisini birlikte kullanır. Biri gözden kaçsa bile diğeri iş görür.

Canlı örnek: aynı ayar listesi, dört hal

Aşağıdaki ekran kurgusal bir bankacılık uygulamasının güvenlik ayarları. Sekiz ayardan biri kapalı ve kullanıcının onu fark etmesini istiyoruz. Halleri değiştirip gözünüzün nereye gittiğine bakın.

Aynı liste, dört hal

Güvenlik ve bildirim ayarları

• Giriş bildirimi Yeni

  Yeni bir cihazdan giriş yapılınca e-posta gönderir.

  Açık

• Harcama bildirimi Popüler

  Her kart harcamasında anlık bildirim gelir.

  Açık

• Yüz tanıma ile giriş Önerilen

  Şifre yerine yüzünüzle girersiniz.

  Açık

• İki adımlı doğrulama ÖnemliAçmanızı öneririm

  Girişte telefonunuza gelen kodu da ister.

  Kapalı

• Otomatik çıkış Yeni

  Bir süre işlem yapmazsanız oturumu kapatır.

  Açık

• Kampanya e-postaları Fırsat

  Size özel teklifleri e-postayla gönderir.

  Açık

• Ekran görüntüsü engeli Önerilen

  Hesap ekranlarında ekran görüntüsünü engeller.

  Açık

• Konum uyarısı Önemli

  Yurt dışından harcama olunca sizi uyarır.

  Açık

Göz nereye gidiyor?

Kapalı olan satır zemin rengi, kalın çerçevesi ve yazılı etiketiyle ayrılıyor. Göz önce oraya gidiyor.

JavaScript kapalı olduğu için listeyi "Tek vurgu" halinde görüyorsunuz. Canlı örnekte aynı listeyi vurgusuz, her satırı vurgulu ve yalnızca renkle vurgulu hallerde de görebilir, gri tonlu görünümü açabilirsiniz.

Kurgusal bir bankacılık uygulamasının ayar ekranı; ayarlar ve durumları uydurma. Sekiz ayardan yalnızca iki adımlı doğrulama kapalı. Renk körlüğü görünümü ekranı gri tonlara çevirir. Bu, renkleri hiç ayırt edemeyen birinin gördüğüne kabaca bir benzetmedir.

"Tek vurgu" halinde satırı üç ayrı şey ayırıyor: zemin, kalın çerçeve ve yazılı etiket. Renk körlüğü görünümünde renk gitse de diğer ikisi kalıyor.

Aşırı kullanım: her şey vurgulu olunca

Von Restorff etkisinin şartı, çevrenin sakin olması. Ekrandaki her öğe ayrı bir renk ya da etiket taşıyorsa ayrılan bir öğe kalmaz.

Bu çoğu zaman yavaş yavaş olur. Pazarlama bir kampanya etiketi ister, ürün ekibi yeni özelliğe "Yeni" rozeti koyar. Her istek tek başına mantıklıdır, toplamı gürültüdür.

Bir ekranda gerçekten öne çıkması gereken tek şeyi seçin. Gerisi aynı görsel ağırlıkta kalsın. Kalabalık ekranın neden yorduğunu bilişsel yük sayfasında anlattım.

Erişilebilirlik: vurguyu yalnızca renkle yapmayın

Vurgunun en kolay yolu renktir, en kırılgan yolu da. WCAG'nin 1.4.1 Renk Kullanımı (Use of Color) başarı ölçütü bu konuyu ele alır ve A seviyesindedir.

Ölçüte göre renk, ekrandaki tek görsel işaret olamaz. Bu kural bilgi verirken, bir eylemi belirtirken, yanıt isterken ve bir öğeyi ayırt ederken geçerli. Renk farkını göremeyen kullanıcı aynı bilgiyi başka bir görsel ipucundan da almalı.

W3C'nin açıklama sayfası renk kullanımını yasaklamıyor. Renk kodlaması, yanında başka bir görsel işaret olduğu sürece serbest. Sayfadaki örneklerden biri zorunlu alanlar: kırmızı yazının yanına bir simge de konur.

İki renk arasındaki açıklık farkı en az 3:1 ise bu fark ek bir görsel ayrım sayılabilir. Ama kullanıcının belirli bir rengi algılaması gerekiyorsa kontrast ne olursa olsun ek bir işaret şart. Oranları kontrast hesaplayıcıyla ölçebilirsiniz.

Yukarıdaki örnekte "Yalnız renkle vurgu" halini açıp renk körlüğü görünümüne geçin. Yeşil ve turuncu noktalar neredeyse aynı griye döner, kapalı ayar kaybolur. WCAG'nin diğer ölçütleri için WCAG rehberine bakın.

Kendi ekranınızda nasıl kontrol edersiniz

1. Ekranda öne çıkmasını istediğiniz öğeyi yazın. Listeye birden fazla öğe giriyorsa sorun zaten orada başlıyor.
2. Ekranı bulanıklaştırın ya da gözlerinizi kısarak bakın. İlk gördüğünüz şey yazdığınız öğe mi?
3. Ekran görüntüsünü gri tonlara çevirin. Vurgu hâlâ seçiliyor mu? Seçilmiyorsa yanına bir etiket, simge ya da çerçeve ekleyin.
4. Rozetleri ve renkli etiketleri sayın. Her biri için "bu olmasa ne kaybederiz?" diye sorun.

Vurgunun gerçekten işe yarayıp yaramadığını kullanıcıyla ölçmek isterseniz ilk tıklama testi iyi bir başlangıç. Diğer ilkeler UX yasaları listesinde.

Benim notum

Audit'lerde sık gördüğüm vurgu hatası fazlalık. Ana sayfada dört farklı renkte buton, her kartta bir rozet oluyor. Kullanıcı neye bakacağını bilemiyor.

Benim kuralım basit: bir ekranda bir birincil eylem. Önerilen bir plan varsa tabloda yalnızca o farklı durur. Renk her zaman yanında bir yazı ya da simgeyle gelir.

Ekranınızda neyin öne çıktığına dışarıdan bir göz baksın isterseniz UX Audit bu kontrolü erişilebilirlikle birlikte yapar.