Amacı Olan Animasyon

 (emilkowal.ski)
4 puan yazan GN⁺ 2025-09-06 | 1 yorum | WhatsApp'ta paylaş
  • Animasyon, doğru kullanıldığında arayüzün öngörülebilirliğini, hız algısını ve keyfini artırır
  • Ancak gelişigüzel kullanılan animasyonlar öngörülemezliğe, gecikmeye ve hatta kullanıcı güveninin azalmasına yol açabilir
  • İlk önemli adım, animasyonun net bir amacını belirlemektir
  • Animasyon kullanım sıklığı arttıkça, bazen animasyonsuz bir deneyim daha tercih edilir olabilir
  • Animasyonun hızı da bilişsel performans ve kullanıcı memnuniyeti açısından belirleyicidir

Animasyonda amaç bilinci

  • Doğru animasyon kullanımı, arayüzün öngörülebilirliğini, algılanan hızını ve kullanım deneyiminin keyfini artırır
  • Yanlış animasyonlar arayüzü yavaş, kafa karıştırıcı ve rahatsız edici hale getirir; ayrıca kullanıcıların ürüne duyduğu güveni olumsuz etkiler

Niyetin önemi

  • Animasyon uygulamadan önce, "Bu animasyonun amacı nedir?" diye sormak gerekir
  • Örneğin, Linear'ın Product Intelligence pazarlama animasyonu, statik bir görsel yerine özelliğin nasıl çalıştığını doğrudan göstererek kullanıcının anlamasını kolaylaştırır
  • Bir düğmeye basıldığında görülen hafif scale down efekti, arayüzün daha canlı ve tepkisel hissedilmesini sağlar
  • Sonner'ın toast giriş animasyonu aşağıdaki iki amaca hizmet eder
    • Ani bir şekilde belirmek yerine doğal biçimde görünerek yabancılık hissini azaltmak
    • Aynı yönden giriş/çıkış yaparak mekânsal tutarlılığı korumak ve swipe-down hareketinin sezgiselliğini artırmak
  • Bazen animasyonun amacı doğrudan "keyif" olabilir; seyrek gerçekleşen etkileşimlerde farklılık ve akılda kalan bir deneyim sunar
  • Ancak kullanım sıklığı arttığında, ilk baştaki keyif kısa sürede rahatsızlığa ve gecikmeye dönüşebilir

Kullanım sıklığı ve animasyon

  • Animasyon ne kadar sık görülürse, kullanıcının yorgunluğu ve iş gecikmesi o kadar artabilir
  • Örneğin, Raycast'in tekrar tekrar kullanıldığı durumlarda gereksiz animasyonlar büyük bir engel haline gelir
  • Sık kullanılan menülerde, listelerde ve klavyeyle kontrol edilen durumlarda animasyonu tamamen kaldırmak daha uygundur
  • Nitekim, klavye kullanımında animasyonun tepki hızını düşürdüğü örnekler de verilmektedir
  • Animasyonsuz bir deneyim, belirli senaryolarda (tekrar eden işler, toplu işlemler vb.) en iyi seçenek olabilir

Hız algısı ve tepkisellik

  • Pazarlama siteleri dışında, tüm UI animasyonları hızlı çalışmalıdır; ancak bu şekilde kullanıcının algıladığı performans ve tepkisellik artar
  • Hızlı dönen bir yükleme spinner'ı, yükleme süresi aynı olsa bile daha hızlı hissettirir
  • 180 ms'lik bir dropdown animasyonu, 400 ms'lik olana kıyasla çok daha tepkisel hissettirir
  • UI animasyonlarında genel olarak 300 ms'nin altı uygundur
  • Tooltip için ilk görünümde kısa bir gecikme iyi olabilir; ancak bir kez açıldıktan sonra ek animasyon olmadan anında tepki vermesi en iyi deneyimi sunar (Radix UI, Base UI'ya bakılabilir)
  • Tooltip'ler arasında gecikmesiz geçiş yapmak, amacı zedelemeden kullanıcı deneyimini iyileştirir

Harika bir arayüz inşa etmek

  • Asıl hedef animasyonun kendisi değil, üst düzey bir kullanıcı arayüzü oluşturmaktır
  • Önemli olan, kullanıcıların günlük hayatta isteyerek kullanmak isteyeceği bir deneyim yaratmaktır
  • Bazen animasyon gerekir; ancak duruma göre "animasyon yok" en iyi seçenek olabilir
  • Animasyonun ne zaman ve nasıl uygulanacağını bilmek, UI/UX tasarımında önemli bir yetkinliktir

Sonuç

  • Üstün bir arayüz oluşturmak için animasyon kullanımına dair derin bir anlayış gerekir
  • Ek teori ve uygulama materyallerine "Animations on the Web" üzerinden ulaşılabilir

İlgili okumalar

1 yorum

 
GN⁺ 2025-09-06
Hacker News görüşü

  • Tasarımcılar animasyonu ne zaman tartışsa, bu unsurları algısal gecikmeyle tartarken "cilalama" ya da "keyif" gibi kelimeler kullanma eğiliminde oluyor; bu tamamen yanlış değil ama birkaç eksik nokta var

    1. delight kısmının abartıldığını düşünüyorum; gösterişli animasyonlara gerçekten hayran kalanların çoğu başka tasarımcılar
    2. Her şeyden önce, animasyonu ne zaman kullanacağına karar verirken state üzerine odaklanmak faydalı; kullanıcı durum değişikliğini fark etmeme riski taşıyorsa, o zaman animasyonla bunu görsel olarak desteklemelisin; bence animasyon kullanmanın asıl amacı bu, geri kalanı gösteriş

    • "Keyif abartılıyor" görüşüne karşılık olarak, doğru kullanıldığında ve dikkat dağıtmadığında yazılımdaki anlamlı animasyonların kullanıcılar üzerinde kesin bir olumlu etkisi var; sadece bu etki, birçok kişinin beklediğinden biraz farklı olabilir
      İyi tasarlanmış animasyon, “iyi” ile “harika” arasındaki son %20'lik farktır; zorunlu değildir ama rakiplerle kıyaslandığında farklılaşma sağlar
      Animasyonun değer taşımasının gerçekçi bir nedeni, fiziksel ürünlerde insanların ağırlık hissi ya da dayanıklılığı premium ürün ölçütü saymasına benzer
      Ancak son 10 yılda UI tasarımı “hava”, “çarpıcı sunum”, “markalaşma” tarafına fazla kaydı ve gerçekten etkili animasyon kullanımıyla ilgili sağlam araştırma ile pratiklik ihmal edildi
      Artık UI tasarımının yeniden pratik kullanılabilirliğe dönmesi gerektiğini düşünüyorum

    • Butona tıklanınca oluşan hafif küçülme efektinin bir animasyon türü sayılmasına şaşırdım; bu, tıklanabilirliği ve tıklamanın algılandığını gösteren çok temel bir görsel geri bildirim

    • Yazılım tasarımında delight kavramının kendisini önemseme tavrı, daha çok (eski) Apple hayranlarında görülüyor; örneğin Jobs sonrası Apple'ın eğlenceli yönünün azalmasına üzülmeleri gibi
      Bu konuyu topluca ele alan temsilî bir yazı bilmiyorum ama şu kısa yazıda değiniliyor
      Bu tür detayları sevme eğilimi, belli tasarımcıların zevki ya da dar bir olgu değil; Apple fandomunun temel özelliklerinden biri

    • B2B ortamında çalışan tasarımcıların B2C hissiyle tasarım yaptığını sık sık görüyorum
      B2B'de (özellikle enterprise tarafında) bu sadece kullanıcının günlük iş aracı oluyor; bu yüzden gösterişli animasyonlar, rengârenk gradyanlar (bugünlerde bu bazen yapay zekayı da ima ediyor) gibi şeyler gerçek işe yardımcı olmuyor, aksine dikkat dağıtıyor
      Bu tür süslemeler, kullanıcının metin ağırlıklı bir dashboard'u verimli biçimde taramasını sadece zorlaştırıyor
      “Güzel ve iyi hissettiren” bir deneyim üretmek istiyorsan, zaten CRM/ERP gibi workflow şirketleri doğru yer değil; kullanıcının duygusal memnuniyetinin iş değerine doğrudan bağlandığı şirketlerde çalışmak daha anlamlı

    • delightın abartıldığını söyleyen görüşe katılmıyorum
      Örneğin, Apple/iPhone kullanan biri bir hafta Android kullansa, “bir şeyler doğal gelmiyor ve rahatsız ediyor” der
      Bunun nedeni, iOS'un etkileşimlerin geneline yayılmış özenli animasyonlarıdır
      Sıradan tüketici bu deneyimi delight terimiyle ifade etmese bile, eskisinden daha kötü bir deneyim yaşadığında bunu net biçimde fark eder

  • Apple'ın bu konuda öğrenmesi gereken şeyler olduğunu düşünüyorum; çoğu zaman gereksiz animasyonları bekleyerek vakit kaybediyorsun
    Örneğin en alta kadar scroll edip bir butona dokunuyorsun ama bouncing animasyonu bitmeden tepki alabilmek için birkaç kez basman gerekiyor
    Uygulamalar arasında swipe yapmak, bildirimi kapatmak, dock ya da drawer açmak gibi çoğu jest tabanlı işlem gereğinden yavaş ilerliyor
    Animasyonlar peş peşe çalışıyor; biri bitiyor, sonra öteki başlıyor, ancak ondan sonra işlem yapabiliyorsun
    Bunları biraz rahat kullanabilmek için Accessibility ayarlarından kapatmak zorunda olmak ironik

    • Apple Wallet telefona bağlanırken tüm ekranda hiçbir işe yaramayan bir animasyon oynuyor ve o sırada hiçbir şey yapamıyorsun; bu sinir bozucu
      Sadece bağlansın ve küçük bir haptik sinyal versin, bu yeterli

    • iOS navigasyon animasyonlarının tamamı ortasında kesilip başka bir eyleme geçilebilecek şekilde tasarlandı; sonuna kadar beklemek zorunda değilsin

    • macOS'te desktop/space geçişinde animasyon tamamen bitene kadar tüm girişlerin önceki space'e gitmesi inanılmaz sinir bozucu
      Apple artık UI/UX'e gerçekten özen göstermiyor; böyle büyük organizasyonlarda Steve Jobs gibi güçlü bir karar verici olmadan iyi bir kullanıcı deneyimi üretmek zor
      Ayrıca tasarımcılar bazen “ortalama kullanıcının” kendileri ya da ürünlerinin hayranı olmadığını, sadece temel işlev ve tutarlılık istediğini fark etmiyor
      Bir şeyi her değiştirdiğinde, büyükannene gösterip “vay, bu gerçekten çok daha iyi olmuş” dedirtmiyorsa hiç değiştirmeme yaklaşımı gerek

  • Ben animasyon hızlarını aslında daha da artırmak isterim
    300ms bana fazla yavaş geliyor
    Neredeyse algılanmayacak kadar kısa animasyonları tercih ediyorum
    Hatta animasyonu kaldırınca ancak o zaman varlığını fark edebilirsin
    Bundan daha uzunsa bana çok yavaş geliyor

    • Ben de eskiden yaklaşık 250ms kullanıyordum ama son dönemde 200ms'ye indirdim
      200ms, neyin nasıl ve neden değiştiğini kavramak için ideal UI geçiş süresi
      Bu ölçütü karşılamıyorsa, geçişi tamamen kaldırmak daha doğru
      200ms'yi CSS'te kolayca .2s diye yazabilmek de pratik
      150ms'nin altı render glitch'i gibi hissedebilir; çok kısaldığında animasyonun avantajı da kaybolur

    • Android telefon kullanmaya başladığımda ilk yaptığım şey, geliştirici modunda animasyon hızını 2 kat hızlıya ayarlamak oluyor
      Varsayılan hızda çalışmasını izlemek fazla bunaltıcı

  • Web tasarımındaki animasyonlar, pratikte PowerPoint efektlerinden çok da farklı değil
    Çoğu durumda hızlı bir cross-fade efekti ya da iki tanesi temiz ve düzenli bir UI için yeterlidir; daha fazlası nadiren gerekir

  • Bence animasyon yalnızca kullanıcının zaten bildiği şeyi doğruluyorsa anlamlıdır; animasyonun kendisi bilgi ileten araç olmamalı
    Yani animasyon kapalıyken de aynı hızda iş yapılabilmeli ve akış aynı şekilde anlaşılabilmeli
    Animasyonun amacı UX yolculuğunu yumuşatmak ve durumun beklendiği gibi olduğuna dair küçük bir sinyal vermektir
    Örneğin mouse hover olduğunda hızlıca vurgulanıyorsa, imlecin bir kontrolün üzerinde olup olmadığını ayrıca düşünmek zorunda kalmam
    Tooltip örneğinde olduğu gibi, bir kez göründükten sonra 0ms ile anında açılması kullanıcının UX akışının gerçekten iyi anlaşıldığını hissettirir
    Bu, UX yolculuğunu iyi anlayan animasyonun tipik bir örneği

  • Benim ilkem şu: kullanıcı animasyonun bitmesini beklemeden etkileşime devam edemiyorsa, o animasyon silinmeli
    Ayrıca tüm animasyonları kapatmaya yarayan bir erişilebilirlik seçeneği mutlaka sunulmalı diye düşünüyorum

    • Bu amaç için CSS'in prefers-reduced-motion media query'si gerçekten çok kullanışlı
      İlgili belgeye bakılabilir

  • Linear'ın Product Intelligence özelliğini tanıtan animasyon için, tasarımcının niyetini anlıyorum ama izlerken gerçekten anlamayı kolaylaştırmıyor
    Garip 3D açılı animasyonlar gerçek UI ile ilişkili görünmüyor
    Bu 3D efekt, ekrandaki belli bir kutunun (yani ürünün) okuduğum sayfa olmadığını ima ediyor ama yine de özelliğin kendisini anlamaya büyük katkı sağlamıyor
    Fade-in efekti o bölgenin fark edilmesini sağlıyor ama içeriği aktarmaya ciddi bir katkısı yok

  • “Keyif veren” animasyonlar benim ekranımda (ör. M1 MacBook Pro) iyi görünüyor ama başka ekranlarda (ör. düşük çözünürlüklü IBM ThinkVision monitör) çok tuhaf ve yavaş görünüyor
    MacBook demo videosu
    Düşük kaliteli monitör demo videosu
    Hangi monitörde izlediğine göre tamamen farklı hissedilebilir

    • O IBM monitörü native resolution'da mı kullandığını merak ediyorum

  • “Hızlı dönen spinner, yüklemenin daha hızlı olduğu hissini verir” görüşüne karşılık, ben tam tersine gerçekten hiçbir şey olmuyorken hızlı spinner'ı kötü tasarım olarak çok gördüğüm için yavaş spinner'ı daha güven verici buluyorum

    • Ben yalnızca doğrusal olmayan şekilde ilerleme gösteren loading bar'lara güveniyorum; bu durumda adım adım gerçekten bir şeylerin ilerlediğini açıkça görebiliyorsun

    • Yavaş spinner bana daha çok “ağır bir iş yapıyor, o yüzden kasıyor” hissi verdiği için daha güvenilir geliyor

  • Günümü mahveden anlık örneklerden biri, animasyon sırasında durumun tutarsız olması
    Örneğin Windows'ta bir uygulamanın bildirim penceresi çıkarken, animasyon tamamlanmadan X'e basıp kapatmaya çalışırsan o bildirimi açıyor
    Mac'te desktop değiştirirken bir uygulama kısa süreliğine görünüp sonra başka bir uygulamaya sıçrıyor; animasyon yavaş olduğu için bitti sanıp bir şey yapınca afallıyorsun
    Hatta bu bazen rastgele de oluyor
    Tasarımcılara söyleyeceğim şu: animasyon eklemek istiyorsanız onu tamamen sağlam hale getirin; yoksa o uygulamaya güvenimi anında kaybederim