41 ton mavi: Google'ın renk testi ve bir tasarımcının vedası

Kısaca

• "41 ton mavi" lafı, Douglas Bowman'ın 20 Mart 2009 tarihli "Goodbye, Google" yazısından geliyor.
• Bowman, Google'ın ilk görsel tasarımcısıydı. Yaklaşık üç yıl çalıştıktan sonra şirketten ayrıldı.
• Ayrılma sebebini, her tasarım kararı için veri istenmesine bağladı.
• Testin parasal sonucunu 2014'te Google UK genel müdürü Dan Cobley açıkladı: yılda 200 milyon dolar ek reklam geliri.
• İki anlatımdaki sayılar birbirini tutmuyor. Gerçek renk kodları da hiç yayımlanmadı.

Hikâye: Bowman neden ayrıldı

Douglas Bowman, Google'a şirketin ilk görsel tasarımcısı olarak girdi. Kendi yazısına göre Google o sırada yedi yaşındaydı. Sıfırdan bir ekip kurdu ve görsel tasarımı şirkete ayrı bir disiplin olarak getirdi.

Yaklaşık üç yıl sonra, 20 Mart 2009'da kişisel blogu stopdesign'da "Goodbye, Google" başlıklı bir yazı yayımladı. İlk cümlesi şuydu: "Bugün Google'daki son günüm." (Bu sayfadaki çeviriler benim.)

Yazı iki bölümlüydü. İkinci bölüm "Hello, Twitter" başlığıyla 31 Mart 2009'da çıktı.

Mühendisler, veri ve koltuk değneği

Bowman'a göre sorun, yönetimin üst kademesinde klasik eğitimli bir tasarımcının olmamasıydı. Böyle biri olmayınca şirketin elinde tasarım kararları için zamanla gerekçe kalmıyordu. Her yeni karara itiraz geliyor, şüphe büyüyordu.

Mühendislerle dolu bir şirket, sorunları mühendislikle çözmeye yöneliyordu. Her karar basit bir mantık sorusuna indirgeniyordu: veri olumluysa yayına al, olumsuzsa geri dön.

Bowman bunun nereye vardığını da yazdı. Ona göre o veri, sonunda her kararın koltuk değneğine dönüşüyordu.

41 ton ve 3 piksellik kenarlık

Yazının en çok alıntılanan paragrafında iki örnek var. Birincisinde Google'daki bir ekip iki mavi arasında karar veremiyor. Bu yüzden ikisinin arasındaki 41 tonu test edip hangisinin daha iyi sonuç verdiğine bakıyor.

İkinci örneği Bowman kendisi yaşamış. Bir kenarlığın 3, 4 ya da 5 piksel olması tartışılmış ve ondan görüşünü kanıtlaması istenmiş. Paragrafın devamı kısa: "Böyle bir ortamda çalışamam."

Google'ı suçlamıyordu

Bowman yazıda Google'ı başarısızlıkla suçlamıyor. Veriye bu kadar yaslandığı için şirketi kusurlu bulamayacağını yazıyor. Ortada milyarlarca dolarlık hissedar parası ve dünyanın dört bir yanında milyonlarca kullanıcı vardı.

Kendini bir benzetmeyle anlatıyor. Google dev bir uçak gemisiydi, o ise gemiyi birkaç derece kuzeye itmeye çalışan küçük bir sandal.

Son cümlede, yalnızca verinin kılıcıyla yaşayan ya da ölen bir tasarım anlayışını özlemeyeceğini söylüyor.

Kaynak kontrolü: ne biliyoruz, ne bilmiyoruz

Hikâyeyi iki kişi anlatıyor ve ikisi de taraf. Bowman testi eleştiren tasarımcı. Cobley ise testi bir başarı örneği olarak anlatan yönetici.

Hangi bilginin kimden geldiğini aşağıdaki tabloda topladım.

Konu	Durum	Not
41 ton	Bowman'ın aktarımı	20 Mart 2009 tarihli yazı. Bowman bunu başka bir ekibin işi olarak anlatıyor.
3, 4 ya da 5 piksel kenarlık	Bowman'ın aktarımı	Kendi yaşadığı tartışma. Hangi ürün olduğunu yazmıyor.
200 milyon dolar	Cobley'nin aktarımı	The Guardian, 5 Şubat 2014. Cobley o sırada Google UK'nin genel müdürüydü.
Test edilen bağlantılar	Cobley'nin aktarımı	Gmail ve Google aramadaki reklam bağlantıları.
Kazanan ton	Kısmen biliniyor	Cobley yalnızca "biraz daha mor" tonun kazandığını söylüyor. Renk kodu yok.
Ölçüm yöntemi	Bilinmiyor	Test süresi, örneklem büyüklüğü ve hesap yöntemi yayımlanmadı.

Cobley ne dedi

Alex Hern'in Guardian haberine göre Cobley, hukuk firması DLA Piper'ın düzenlediği bir etkinlikte konuştu. Anlattığına göre Google, Gmail'e reklam koyduğunda bir ayrıntı göze çarptı. Gmail'deki reklam bağlantılarının mavisi, aramadakinden biraz farklıydı.

Ekip iki tonu %1'lik deneylerle karşılaştırdı. Kullanıcıların %1'i bir maviyi, başka bir %1'i öbür maviyi gördü. Cobley'nin sözleriyle, işi sağlama almak için "kırk deney daha" yaptılar.

Ona göre sonuç şuydu: biraz daha mora çalan mavi, biraz daha yeşile çalan maviden çok tıklanıyordu. Cobley, işin ölçeği düşünüldüğünde bunun yılda 200 milyon dolar ek reklam geliri getirdiğini söyledi.

Sayılar tutmuyor

Bowman 41 ton diyor. Cobley ise iki tonluk bir deneyden ve kırk ek deneyden söz ediyor. Guardian iki anlatımı aynı olayın parçası olarak sunuyor, ama sayılar birbirini tutmuyor.

Guardian haberinin altında bir düzeltme notu da var. Rakam ilk yayında yanlışlıkla sterlin olarak yazılmış, 7 Şubat'ta dolara çevrilmiş. Ben rakamı düzeltilmiş haliyle veriyorum.

Bence en sağlam bilgi, testin yapılmış olması. Bunu iki taraf da söylüyor. 200 milyon dolar ise bir yöneticinin etkinlikte söylediği rakam ve hesabı yayımlanmadığı için onu denetleyemiyorum.

İki tonu ayırt edebilir misiniz?

Bowman'ın itirazını anlamak için tonların birbirine ne kadar yakın olduğunu görmek gerekiyor. Aşağıdaki paleti ben çizdim: yeşile çalan bir maviden mora çalan bir maviye, 41 eşit adım.

Gerçek renk kodları hiçbir kaynakta yok. Bu palet yalnızca bir canlandırma. İki komşu ton arasındaki fark, renk çemberinde tek bir derece.

Deneyin: 41 ton mavi

Benim çizdiğim 41 ton: yeşile çalan maviden mora çalan maviye

1. 1. ton, #1b78a7
2. 2. ton, #1b76a7
3. 3. ton, #1b74a7
4. 4. ton, #1b71a7
5. 5. ton, #1b6fa7
6. 6. ton, #1b6da7
7. 7. ton, #1b6aa7
8. 8. ton, #1b68a7
9. 9. ton, #1b66a7
10. 10. ton, #1b63a7
11. 11. ton, #1b61a7
12. 12. ton, #1b5fa7
13. 13. ton, #1b5ca7
14. 14. ton, #1b5aa7
15. 15. ton, #1b58a7
16. 16. ton, #1b55a7
17. 17. ton, #1b53a7
18. 18. ton, #1b51a7
19. 19. ton, #1b4ea7
20. 20. ton, #1b4ca7
21. 21. ton, #1b4aa7
22. 22. ton, #1b47a7
23. 23. ton, #1b45a7
24. 24. ton, #1b43a7
25. 25. ton, #1b40a7
26. 26. ton, #1b3ea7
27. 27. ton, #1b3ca7
28. 28. ton, #1b39a7
29. 29. ton, #1b37a7
30. 30. ton, #1b35a7
31. 31. ton, #1b32a7
32. 32. ton, #1b30a7
33. 33. ton, #1b2ea7
34. 34. ton, #1b2ba7
35. 35. ton, #1b29a7
36. 36. ton, #1b27a7
37. 37. ton, #1b24a7
38. 38. ton, #1b22a7
39. 39. ton, #1b20a7
40. 40. ton, #1b1da7
41. 41. ton, #1b1ba7

1. ton21. ton41. ton

A

B

Bu iki kutu aynı ton mu, farklı ton mu?

Yukarıdaki A kutusu 20. ton, B kutusu 21. ton. Aralarında tek adım var. JavaScript açıksa burada on turluk bir oyun çalışır.

Renkleri ben seçtim, Google'ın gerçek kodları değil. Kaynaklarda kod yok. İki kutuyu karşılaştırın, cevabı seçin. Cevaptan sonra iki tonun paletteki yeri turuncu çerçeveyle işaretlenir.

On tur boyunca iki kutu arasındaki fark sıfır ile yirmi adım arasında değişiyor. Ben kendi ekranımda bir ya da iki adımlık farkı zor ayırıyorum.

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

Gözümün ayıramadığı bir farkı milyonlarca tıklama ayırabiliyor. O ölçekte veri haklı çıkabilir. Bowman'ın itirazı ise her küçük kararın aynı yoldan geçmek zorunda olmasınaydı.

Veri mi, tasarım kararı mı: bugün için ders

Bence iki taraf da kısmen haklı. Asıl iş, hangi kararı veriyle, hangisini tasarım ilkesiyle vereceğinizi ayırmak.

Veriyle karar verilecek işler

Seçenekler belliyse ve trafiğiniz büyükse test edin. Google'da bağlantı tonu tam böyle bir işti. Ölçü tıklamaydı, trafik de devasaydı.

Bence küçük bir sitede aynı test çok uzun sürebilir ve net bir sonuç vermeyebilir. Trafiğiniz azsa küçük farkları ölçmeye çalışmayın. Daha büyük bir değişikliği, örneğin bir akışın tamamını test edin.

İlkeyle karar verilecek işler

Bazı kararların cevabı zaten belli. Bağlantı rengi, zeminle yeterli kontrast oluşturmalı. WCAG 2.2'nin 1.4.3 başarı ölçütü, AA düzeyinde normal metin için en az 4,5:1 kontrast ister.

Benim paletimdeki 41 tonun hepsi beyaz zeminde bu sınırın üstünde kalıyor. Kendi renklerinizi kontrast hesaplayıcıyla kontrol edebilirsiniz. Bu bir ölçüm işi, A/B testi gerektirmez.

Kenarlığın 3 ya da 4 piksel olması da çoğu zaman bir sistem kararıdır. Tasarım sisteminiz bir kalınlık tanımlıyorsa cevap odur. Her bileşen için ayrı test yaparsanız tutarlılık bozulur.

Testten önce soruyu düzeltin

41 ton testinde sonuç tek bir sayıya bağlandı: tıklama. Bu sayı, kullanıcının reklama bilerek mi yanlışlıkla mı tıkladığını söylemez. Bir metrik seçmeden önce, o metriğin neyi kaçırdığını yazın.

Benzer bir dersi 300 milyon dolarlık buton hikâyesinde de anlattım. Orada çözüm, kullanıcıları izleyen bir kullanılabilirlik testinden çıktı.

Kısa bir karar listesi

• Cevabı bir standart ya da tasarım sistemi veriyorsa test etmeyin, uygulayın.
• İki seçenek arasında görüş ayrılığı varsa ve trafik yeterliyse test edin.
• Trafik yetersizse birkaç kullanıcıyla yapacağınız bir oturum, yarım kalmış bir A/B testinden fazlasını söyler.
• Tartışma birkaç piksellik bir ayrıntıdaysa kararı bir kişiye bırakın ve işe devam edin.

Türkiye'den bir benzer

Bu tartışmanın Türkiye'deki karşılığını bir toplantıyla anlatayım. Ürün ekibi "Sepete ekle" butonunun rengini tartışıyor. Biri turuncu diyor, biri yeşil, sonunda biri "test edelim" diyor.

Test kurulur, iki hafta beklenir ve sonuç çoğu zaman anlamlı çıkmaz. Bu arada ödeme adımındaki asıl sorun sırada bekler, örneğin kimsenin anlamadığı bir hata mesajı. Renk testi ekibi meşgul eder ama satışı kurtarmaz.

Google'da test işe yaradıysa sebebi ölçekti. Cobley de rakamı büyütenin işin büyüklüğü olduğunu söylüyor. Orta ölçekli bir Türk e-ticaret sitesi ya da bir belediye uygulaması o ölçekte değil.

Benim önerim

Renk tartışmasını bir kurala bağlayın: kontrast yeterli mi, renk tasarım sisteminizden mi geliyor? İki cevap da evetse tartışmayı kapatın.

Test bütçenizi kullanıcının takıldığı yere harcayın. O yeri bulmanın hızlı yolu, akışı uçtan uca incelemek.

Bunu nasıl yaptığımı UX audit rehberinde anlattım. İncelemeyi benim yapmamı isterseniz UX Audit tam bu iş için var.