Yüz Milisaniye: hareketin ve beklemenin algısı üzerineYüz Milisaniye: hareketin ve beklemenin algısı üzerine

1982'de IBM araştırmacıları Walter Doherty ve Ahrvind Thadani, şirketin sistem dergisinde bir bulgu yayımladı ve bilgisayar dünyasının bir kabulünü yıktı. O güne kadar bir bilgisayarın komuta iki saniye içinde cevap vermesi yeterli sayılıyordu. Doherty ve Thadani, cevap süresi 400 milisaniyenin altına indiğinde kullanıcıların üretkenliğinin orantısız biçimde sıçradığını ölçtü: makine kullanıcının düşüncesine yetiştiğinde kullanıcı düşünceyi kesmiyor, bir sonraki adımı kafasında tutmak zorunda kalmıyordu. "Doherty eşiği" adını alan bu rakam, bugün bir butonun basıldığında kaç milisaniyede tepki vermesi gerektiğinin de cevabıdır. Hareket tasarımı, bu eşiğin iki yanında yaşar: çok yavaşsa bekleme, çok hızlıysa görünmezlik.

Robert Miller 1968'de, insanın bir sistemle konuşmasındaki zaman sınırlarını sıraladı; Stuart Card, George Robertson ve Jock Mackinlay 1991'de bu sınırları deneysel olarak doğruladı; Jakob Nielsen 1993'te üç sayıya indirdi. Yüz milisaniyenin altındaki tepki "anında" algılanır; beyin, neden ile sonucu tek olay olarak birleştirir. Bir saniyeye kadar gecikme fark edilir ama düşünce akışı kopmaz. On saniyeden sonra dikkat dağılır ve kullanıcı başka bir işe geçer.

Bu üç sayı, ekran teknolojisinin bütçesini de belirler. Saniyede 60 kare gösteren bir ekranda her kare için 16,7 milisaniye vardır; 120 hertzlik ekranlarda 8,3 milisaniye. Bir animasyon bu bütçeyi aşıp kare düşürdüğünde göz onu "takılma" olarak adlandırır ve ürünü ucuz sayar. Hareket tasarımcısının ilk kuralı estetik değil, aritmetiktir: kaç milisaniye var, o sürede kaç kare çizilebilir.

"Sinema, görüntünün retinada kalmasına dayanır" cümlesi hâlâ ders kitaplarında durur ve yanlıştır. Joseph ve Barbara Anderson 1993'te Journal of Film and Video'da bu "görme kalıcılığı" efsanesinin kaynağını izledi ve geçersiz olduğunu gösterdi: retinada kalan görüntü hareketi değil, bulanıklığı üretirdi. Hareket hissinin asıl açıklaması Max Wertheimer'ın 1912'de yayımladığı "phi fenomeni"dir: art arda gösterilen iki durağan uyaran arasında beyin, orada olmayan bir hareket kurar. Gestalt psikolojisi bu deneyle doğdu; sinema da onunla açıklanır.

Rakamlar da efsaneyi yalanlar. Film saniyede 24 kare çeker, ama projektör her kareyi iki ya da üç kez yanıp sönerek gösterir; perde saniyede 48 ya da 72 kez kararır. Nedeni kritik titreşim birleşme frekansıdır: parlak bir ekranda saniyede 50'nin altındaki yanıp sönmeyi göz fark eder. 24 kare harekete yeter, 24 yanıp sönme göze yetmez. Eadweard Muybridge 1878'de on iki kamerayla dörtnala koşan bir atın dört ayağının aynı anda havada olduğunu kanıtladığında, hareketin kareye bölünebildiğini göstermişti; Wertheimer otuz dört yıl sonra karelerin nasıl yeniden harekete dönüştüğünü gösterdi.

1999'da Daniel Simons ve Christopher Chabris katılımcılardan basketbol paslarını saymalarını istedi; videonun ortasından goril kostümlü biri geçip göğsünü dövdü. İzleyenlerin yaklaşık yarısı gorili görmedi. Bir yıl önce Simons ve Daniel Levin'in kapı deneyinde, yoldan geçenlerle konuşan bir araştırmacı, aradan taşınan bir kapı sayesinde başka biriyle değiştirildi; konuşanların yarısı değişikliği fark etmedi. İki deney aynı şeyi söyler: dikkat bir ışıldak gibidir, baktığı yerin dışı karanlıktır.

Hareketin gücü bu ışıldağı zorla çevirmesidir. Çevresel görüş hareket için özelleşmiştir; evrimsel olarak kenardan yaklaşan şey yırtıcıydı. Bu yüzden bir sayfanın köşesinde kıpırdayan en küçük öğe, ortadaki en önemli metni yener. Hareket tasarımında bu bir güç ve bir bedeldir: hareket, kullanıcının dikkatini nereye harcayacağını tasarımcının belirlemesidir; gereksiz her hareket, asıl mesajdan çalınmış dikkattir.

Luca Cian, Aradhna Krishna ve Ryan Elder 2014'te Journal of Marketing Research'te "dinamik imgelem" kavramını ölçtü: durağan olduğu hâlde hareket ima eden logolar (eğik, akış çizgili, bir anı donduran biçimler) izleyicide daha yüksek ilgi ve daha olumlu marka tutumu üretti; etki, logonun ürünün vaadine uygun yönde "hareket etmesine" bağlıydı. Adam Brasel ve Henrik Hagtvedt 2016'da Journal of the Academy of Marketing Science'ta gerçek animasyonlu logoları test etti: hareket, markaya yönelik heyecanı ve ilgiyi artırıyordu, ama ancak hareket markanın karakteriyle uyumluysa; uyumsuz hareket değerlendirmeyi düşürüyordu.

Çıkarım, hareketin kimliğin süslemesi değil parçası olduğudur. Bir sigorta şirketinin logosu sıçrayarak giriyorsa yanlış şeyi söyler; bir enerji içeceğinin logosu yavaşça beliriyorsa da öyle. Hareketin yönü, hızı ve ivmesi, renk ve biçim kadar vaadin taşıyıcısıdır.

1981'de Disney'in iki usta animatörü Frank Thomas ve Ollie Johnston, The Illusion of Life'ta stüdyonun elli yılda damıttığı on iki ilkeyi yazdı. "Ezil ve uza" bir topun yere çarpınca yassılmasını anlatır ama asıl kuralı hacmin korunmasıdır; "ön hazırlık" her hareketin ters yönde küçük bir başlangıcı olduğunu; "yavaş gir, yavaş çık" hiçbir nesnenin sıfırdan tam hıza anında geçmediğini söyler. Bunlar çizgi film kuralı değil, Newton'un hareket yasalarının göz için çevirisidir; göz, ivmesiz hareketi sahte bulur.

Dijital arayüzde aynı ilkeler eğri ve süre olarak yazılır. Robert Penner 2001'de Flash için yazdığı yumuşatma denklemleriyle "yavaş gir, yavaş çık"ı koda döktü; CSS bugün aynı şeyi kübik Bézier eğrisiyle yapar. Google'ın Material tasarım dili yıllarca yapılan testlerden tek bir standart eğri çıkardı, cubic-bezier(0.4, 0, 0.2, 1): hızlı başlar, yumuşak biter, çünkü kullanıcı tepkinin başladığını hemen görmek, bittiğini ise sakin algılamak ister. Süreler de ölçülüdür: küçük bir öğe için 150 ilâ 200, orta için 250 ilâ 300, tam ekran geçiş için 300 ilâ 400 milisaniye. Daha uzunu bekletir, daha kısası görünmez.

Her hareket herkese iyi gelmez. Yuri Agrawal ve arkadaşlarının 2009'da Archives of Internal Medicine'da yayımladığı ulusal tarama, Amerika'da kırk yaş üstü yetişkinlerin yaklaşık yüzde 35'inin hayatlarının bir döneminde denge sistemi bozukluğu yaşadığını gösterdi. Bu kişilerde paralaks kaydırma, büyük ölçekli yakınlaşma ve sürekli döngüler baş dönmesi ve bulantı üretir. Web standartları buna 2018'de cevap verdi: WCAG 2.1'in 2.3.3 ölçütü etkileşimle tetiklenen animasyonun kapatılabilmesini ister; tarayıcılar prefers-reduced-motion sorgusuyla kullanıcının işletim sistemi tercihini sayfaya iletir.

Bu bir erişilebilirlik ayrıntısı değil, tasarım disiplinidir: her hareketin hareketsiz bir karşılığı olmalıdır ve o karşılık anlamı kaybettirmemelidir. Anlamı yalnızca animasyonla taşınan bir arayüz, nüfusun üçte biri için eksik tasarlanmıştır.

Renk ve yazı tipi nasıl kimlik kılavuzunda sayıyla tanımlanıyorsa hareket de öyle tanımlanır: birkaç süre, bir ya da iki eğri, giriş ve çıkış kuralları. Bu değerler bir kez belirlenince web sitesi, uygulama, sosyal medya videosu ve fuar ekranı aynı tempoda konuşur; izleyici sesi kapalıyken bile markayı tanır. Tanımsız bırakılan hareket, her ajansta ve her yazılımcıda başka bir karaktere dönüşür ve Brasel ile Hagtvedt'in ölçtüğü uyumsuzluk cezası kesilir.

Protokolümüz dört sayıyla başlar: 120, 240 ve 400 milisaniyelik üç süre, tek bir standart eğri. Logo açılışı iki saniyeyi geçmez ve son karesi durağan logonun kendisidir; yüzüncü izlemede yormaması için döngü testi yapılır. Her animasyon 60 kare bütçesinde ölçülür; kare düşüren hareket basitleştirilir, "daha güçlü makine" cevabı kabul edilmez. Her hareketin azaltılmış-hareket karşılığı tasarlanır ve anlam kaybı kontrol edilir. Son soru Cian ve arkadaşlarının sorusudur: bu hareket markanın vaadiyle aynı yöne mi gidiyor?

Doherty ve Thadani'nin 400 milisaniyesi, kırk yıl sonra hâlâ aynı şeyi söylüyor: insan, kendisine yetişen sistemi sever. Hareket tasarımı, markanın kullanıcıya yetişme biçimidir.

• Doherty, W. J. & Thadani, A. J. (1982). The economic value of rapid response time. IBM Systems Journal / IBM teknik raporu GE20-0752.
• Miller, R. B. (1968). Response time in man-computer conversational transactions. AFIPS Fall Joint Computer Conference, 267–277.
• Card, S. K., Robertson, G. G. & Mackinlay, J. D. (1991). The information visualizer: An information workspace. CHI '91, 181–186; Nielsen, J. (1993). Usability Engineering. Academic Press.
• Anderson, J. & Anderson, B. (1993). The myth of persistence of vision revisited. Journal of Film and Video, 45(1), 3–12.
• Wertheimer, M. (1912). Experimentelle Studien über das Sehen von Bewegung. Zeitschrift für Psychologie, 61, 161–265.
• Simons, D. J. & Chabris, C. F. (1999). Gorillas in our midst: Sustained inattentional blindness for dynamic events. Perception, 28(9), 1059–1074.
• Simons, D. J. & Levin, D. T. (1998). Failure to detect changes to people during a real-world interaction. Psychonomic Bulletin & Review, 5(4), 644–649.
• Cian, L., Krishna, A. & Elder, R. S. (2014). This logo moves me: Dynamic imagery from static images. Journal of Marketing Research, 51(2), 184–197.
• Brasel, S. A. & Hagtvedt, H. (2016). Living brands: Consumer responses to animated brand logos. Journal of the Academy of Marketing Science, 44(5), 639–653.
• Thomas, F. & Johnston, O. (1981). The Illusion of Life: Disney Animation. Abbeville Press.
• Penner, R. (2002). Programming Macromedia Flash MX (yumuşatma denklemleri); Material Design hareket kılavuzu (standart eğri ve süreler).
• Agrawal, Y., Carey, J. P., Della Santina, C. C., Schubert, M. C. & Minor, L. B. (2009). Disorders of balance and vestibular function in US adults. Archives of Internal Medicine, 169(10), 938–944.
• W3C (2018). WCAG 2.1, ölçüt 2.3.3 Animation from Interactions; CSS prefers-reduced-motion.