Slaytlardan Animasyonlu Açılış Sayfalarının Kullanılabilirliğini Geliştirmek İçin Pratik Öneriler

(Bu sponsorlu bir gönderidir.) UI animasyonu uzun süredir tasarımcılar için sonradan düşünülen bir şeydi. Bugün bile birçok tasarımcı, animasyonu zevk veren, ancak kullanılabilirliği iyileştirmeyen bir şey olarak düşünüyor. Bu bakış açısını paylaşıyorsanız, o zaman bu makale tam size göre. Animasyonun, açılış sayfalarının kullanıcı deneyimini nasıl iyileştirebileceğini tartışacağım ve Slaytlar çerçevesi kullanılarak oluşturulan en iyi animasyon örneklerini sağlayacağım.

Slaytlar çerçevesi, web siteleri oluşturmak için kullanımı kolay bir araçtır. Herkesin birkaç dakika içinde şık bir açılış sayfası oluşturmasına olanak tanır. Tek yapmanız gereken, önceden tanımlanmış slaytlar listesinden uygun bir tasarım seçmek.

Dört Yol Animasyonu, Açılış Sayfalarının Kullanılabilirliğini Destekliyor

Açılış sayfası tasarımı, görsel sunumdan daha fazlasıdır; bu etkileşimle ilgili. Etkileşim tasarımının ayrıntıları, modern web sitelerinde temel bir fark yaratır. Ve animasyonlu efektler etkileşimleri güçlendirebilir. Bir açılış sayfasının kullanılabilirliğini geliştirmek için bir animasyon, yalnızca dekorasyon değil, işlevsel bir öğe olmalıdır. Açık bir işlevsel amaca hizmet etmelidir. Aşağıda, animasyonun kullanılabilirliği iyileştirebileceği birkaç yaygın yol bulunmaktadır.

1. Bir Anlatı Yaratın

Her tasarımcı bir hikaye anlatıcısıdır. Bir web sitesi oluşturduğumuzda, ziyaretçilerimize bir hikaye anlatıyoruz. Ve animasyon kullanarak çok daha ilgi çekici bir hikaye anlatmak mümkün.

Animasyon, içeriğin hayata geçirilmesine yardımcı olabilir. Bu tür animasyonların iyi bir örneği Ikonet'te bulunabilir. Buradaki animasyon, sayfayı kaydırırken ve şirket hakkında bilgi edinirken kullanıcıları meşgul ediyor.

Animasyon, ziyaretçinin dikkatini, fark etmesi ve harekete geçmesi gereken bir şeye çekmek için de kullanılabilir. Örneğin, önemli bir metin bölümünüz veya harekete geçirici mesajınız varsa, onları içeri kaydırmak (sadece görünmelerini sağlamak yerine) ziyaretçilerin nereye odaklanmaları gerektiğini anlamalarına yardımcı olabilir. Aşağıdaki Preston Zeller örneğine bir göz atın. Öğelerin sayfalarda görünme şekli, kullanıcının bu alanlara odaklanmasını sağlar. Bu animasyonun en güzel yanı, rahatsız edici olmadan önemli bilgilere dikkat çekmesidir.

2. Geribildirim Sağlayın

İnsan-bilgisayar etkileşimi iki temele dayanır: kullanıcı girişi ve sistem geri bildirimi. Tüm etkileşimli nesneler, uygun görsel veya sesli geri bildirimle kullanıcı girdisine tepki vermelidir.

Aşağıda, Slides çerçevesi kullanılarak oluşturulan Özel Onay Kutusu efektini görebilirsiniz. Kullanıcının geçiş durumunu değiştirdiğinde gördüğü ince zıplama animasyonu, etkileşim hissini güçlendirir.

Slaytlar ile güzel vurgulu animasyonlar oluşturabilir ve kullanıcıları nesnelerle etkileşime girmeye teşvik edebilirsiniz. Berry Visual'a bir göz atın. Fareyi “Mesaj Gönder” üzerine veya sağ üst köşedeki hamburger menüsüne getirdiğinizde güzel bir animasyon efekti ortaya çıkıyor. Bu öğelerin etkileşimli olduğu duygusu yaratır.

Buf Antwerp, fareyle üzerine gelindiğinde animasyonlu geri bildirimin kullanıcı deneyimini nasıl iyileştirebileceğinin bir başka mükemmel örneğidir. Ziyaretçiler bir döşemenin üzerine geldiğinde yarı şeffaf bir kaplama görünür ve metin, öğe hakkında ek bilgi sağlar.

3. İlişkiler Oluşturun

Bir açılış sayfasına animasyon eklemek için harika bir yer, değişim anlarıdır. Çoğu zaman, değişim anları ani olur &mdahs; örneğin, kullanıcılar bir bağlantıya tıkladığında aniden yeni bir ekran belirir. Kullanıcıların ani değişiklikleri işlemesi zor olduğundan, bu tür değişiklikler genellikle bağlam kaybına neden olur - yeni bağlamın öncekiyle nasıl bağlantılı olduğunu anlamak için beynin yeni sayfayı taraması gerekir.

Ani bir değişiklik örneğini düşünün:

Bunu, yumuşak bir animasyonlu geçişin kullanıcıyı ekranın farklı bölümlerine yönlendirdiği aşağıdaki örnekle karşılaştırın:

İkinci örnekte, animasyonun ani değişimi önlediği açıktır - boşluğu doldurur ve iki aşamayı birbirine bağlar. Sonuç olarak, ziyaretçiler iki aşamanın birbirine ait olduğunu anlarlar. Bu ilke, iki nesne arasında ebeveyn-çocuk ilişkiniz olduğunda eşit olarak geçerlidir:

Aşamalar arasında bir geçiş oluşturduğunuzda da geçerlidir. Aşağıdaki örnekte slaytlar arasındaki yumuşak geçişler, sayfanın ilgisiz kısımlarını ayırmak yerine bir sıra hissi yaratır.

4. Sıkıcı Görevleri Eğlenceli Hale Getirmek

Günlük deneyimlere eğlenceli unsurların nasıl dahil edileceğini hayal etmek zor olabilir. Ancak en beklenmedik yere biraz sürpriz ekleyerek tanıdık bir etkileşimi beklenmedik ve böylece unutulmaz bir şeye dönüştürebiliriz.

Tympanus'un 3D Oda Sergisini ziyaret ettiğinizde, daha önce ziyaret ettiğiniz diğer galeri web sitelerine benziyor. Ancak, bir sayfayla etkileşime geçtiğinizde web sitesi hakkındaki izleniminiz hemen değişir. İmleci hareket ettirdikçe sayfa hareket eder ve bu efekt bir 3B boşluk hissi yaratır. Bir sayfadan diğerine geçtiğinizde bu his daha da güçleniyor; 3B bir alanda bir odadan diğerine seyahat ediyormuşsunuz gibi görünüyor.

Şimdi 3B efektlerden çok daha tanıdık bir şeyden bahsedelim: web formları. Form doldurmayı kim sever? Muhtemelen kimse. Yine de formları doldurmak, web'deki en yaygın görevlerden biridir. Ve bu sıkıcı aktiviteyi eğlenceli bir egzersize dönüştürmek mümkün. Bir formda kullanılan Darin Senneff'in Yeti karakterine bir göz atın. Kullanıcı şifresini yazmaya başladığında maskot gözlerini kapatır. Böyle bir animasyon efekti, ilk kez gördüğünüzde çok zevk verir.

Son olarak, kaydırma deneyimini yalnızca görsel olarak daha ilginç kılmakla kalmayıp aynı zamanda okuyucular için de yararlı hale getirmek mümkündür. Aşağıda, sayfada kaydırılan içeriğe göre bir harita boyunca bir yolun canlandırıldığı etkileşimli bir yolculuk olan Storytelling Map bulunmaktadır. Fikir, metni, görselleri ve yerleri birbirine bağlar; ziyaretçiler bilgileri okur ve harita bağlamında görür).

Açılış Sayfası Animasyonu İçin En İyi Altı Uygulama

Animasyonun faydalı olduğu yerleri belirlemek hikayenin sadece yarısıdır. Tasarımcıların da animasyonu düzgün bir şekilde uygulaması gerekir. Bu bölümde, bir profesyonel gibi animasyon yapmayı öğreneceğiz.

1. Birkaç Öğeyi Aynı Anda Canlandırmayın

Birkaç nesne aynı anda canlandırıldığında, kullanıcılar için dikkat dağıtıcı hale gelir. İnsan beyni ve gözü, hareket eden nesnelere dikkat etmek için kablolu olduğundan, kullanıcının odağı bir öğeden diğerine atlayacak ve beynin az önce ne olduğunu anlamak için ekstra zamana ihtiyacı olacaktır (özellikle hareket çok hızlı gerçekleşirse). Bu nedenle, animasyonları doğru şekilde planlamak önemlidir.

Geçiş koreografisi kavramını anlamak çok önemlidir: arayüz değiştikçe ziyaretçinin odağını koruyan koordineli hareketler dizisi. Bağımsız hareket eden öğelerin sayısını en aza indirin; aynı anda sadece birkaç şey olmalıdır (genellikle iki veya üçten fazla değil). Bu nedenle, üçten fazla nesneyi taşımak istiyorsanız, bazı nesneleri bağımsız olarak canlandırmak yerine birlikte gruplayın ve tek bir birim olarak dönüştürün.

Slaytlar, web tasarımcılarına mükemmel bir fayda sağlar: Tasarımda hareketi aşırı kullanmalarını engeller. Slaytlar'da bulunan her animasyon efekti, içeriği mümkün olan en iyi şekilde sunmak için özenle tasarlanmıştır.

2. Animasyon, Açılış Sayfasının Kişiliğiyle Çatışmamalıdır

Bir tasarıma her animasyon eklediğinizde, kişiliği tanıtıyorsunuz. Bu kişilik, büyük ölçüde kullanmayı seçtiğiniz animasyon efektine bağlı olacaktır.

İnsanlar bir ürünle etkileşime girdiklerinde belirli beklentileri vardır. Bir bankacılık hizmeti için bir açılış sayfası tasarladığınızı ve kullanıcının kişisel bilgilerini toplayan bir formu tanıtmak için zıplayan bir animasyon kullanmaya karar verdiğinizi hayal edin. Çoğu kullanıcı, form beklentileriyle çeliştiği için ayrıntılarını vermekten çekinecektir.

Slaytlar çerçevesi, Yığın, Zen, Film, Kartlar ve Yakınlaştırma gibi 10 animasyon stili arasından seçim yapmanızı sağlar. Farklı efektlerle denemeler yapın ve durumunuza en uygun olanı seçin.

3. Zamanı İzle

Animasyon tasarlamaya gelince, zamanlama her şeydir. Animasyonunuzun zamanlaması, iyi bir etkileşim ile kötü bir etkileşim arasındaki fark anlamına gelebilir. Animasyon üzerinde çalışırken, genellikle zamanınızın üçte birini doğru animasyon efektlerini bulmakla ve diğer üçte ikisini de animasyonu pürüzsüz hissettirmek için doğru zamanlamayı bulmakla geçirirsiniz.

Genellikle animasyonu kısa tutun. Animasyon, kullanıcının bir görevi tamamlamasının önüne asla geçmemelidir, çünkü en güzel şekilde yürütülen animasyon bile, kullanıcıları yavaşlatırsa gerçekten sinir bozucu olur. Bir UI animasyonu için en uygun hız 200 ile 500 milisaniye arasındadır. 1 saniyeden az süren bir animasyon anlık olarak kabul edilirken, 5 saniyeden uzun bir animasyon gecikme hissi verebilir.

Animasyon efekti oluşturmaya gelince, bir parametrenin animasyonun nasıl algılandığı üzerinde doğrudan etkisi vardır: CSS terimlerinde hareket hızı veya zamanlama işlevi. Kolaylaştırma, tasarımcıların hareketi daha doğal hale getirmelerine yardımcı olur.

Slaytlar çerçevesi, web tasarımcılarının hareket hızını özelleştirmesini sağlar. “Efekt Ayarları” bölümünde diğer efektlerle birlikte yumuşatma bulacaksınız.

4. Erişilebilirliği Düşünün

Animasyon iki ucu keskin bir kılıçtır. Bir grup kullanıcı için kullanılabilirliği artırırken başka bir grup için sorunlara neden olabilir. Apple'ın iOS 7'yi piyasaya sürmesi, ikincisinin yakın tarihli bir örneğiydi. iOS 7, animasyonlu efektlerle doluydu ve piyasaya sürülmesinden kısa bir süre sonra iPhone kullanıcıları, animasyonlu geçişlerin başlarını döndürdüğünü bildirdi.

Bir tasarımcı olarak sizin sorumluluğunuz, görme bozukluğu olan kişilerin tasarımınızla nasıl etkileşime gireceğini düşünmektir. WCAG'nin animasyon yönergelerini kontrol edin ve tasarımınızın bunlarla uyumlu olduğundan emin olun. Bir kullanıcının animasyon veya hareket miktarını en aza indirmek isteyip istemediğini izleyin. Özel bir CSS medya özelliği olan "düşük hareketi tercih eder", kullanıcının sistemin kullanılan animasyon veya hareket miktarını en aza indirmesini isteyip istemediğini algılar. "Azalt" olarak ayarlandığında, hareket ve animasyon miktarını en aza indirmek daha iyidir (örneğin, gerekli olmayan tüm hareketleri kaldırarak).

Ayrıca, görsel bozukluğu olan kişiler de dahil olmak üzere kullanıcıların tüm yeteneklerinin tasarımınızla etkileşimde sorun yaşamayacaklarını kontrol etmek için kullanılabilirlik testi yapın.

5. Tasarım Kararlarınızı Prototipleyin ve Test Edin

Animasyonla oynamak eğlencelidir. Aşırıya kaçmak ve kullanıcıları çok fazla hareketle bunaltan bir tasarımla sonuçlanmak kolaydır. Ne yazık ki, harika bir animasyon için gümüş bir kurşun yok; Neyin “yeterli” olduğuna dair net kriterler belirlemek zor. Animasyon efektlerini prototip oluşturmaya, test etmeye ve optimize etmeye zaman ayırmaya hazır olun.

Test sırasında dikkate alınması gereken birkaç ipucu:

• Farklı donanım üzerinde test edin.
  Birçok donanım faktörü, animasyon performansını büyük ölçüde etkileyebilir: ekran boyutu, ekran yoğunluğu, GPU performansı, bunlardan sadece birkaçı. Sonuç olarak, yüksek çözünürlüklü ekrandaki bir kullanıcı, eski ekrandaki bir kullanıcıdan tamamen farklı bir deneyime sahip olabilir. Performans darboğazlarını önlemek için animasyon tasarlarken bu tür faktörleri göz önünde bulundurun. Yavaş donanımı suçlamayın; animasyonunuzu her tür cihazda harika çalışacak şekilde optimize edin.
• Mobilde test edin.
  Çoğu web sitesi bir masaüstünde oluşturulur ve test edilir; mobil deneyim ve animasyon performansı genellikle sonradan düşünülmüş olarak değerlendirilir. Mobil cihazlarda test yapılmaması, mobil kullanıcılar için birçok soruna neden olabilir, çünkü bazı animasyon teknikleri masaüstünde harika çalışır, ancak mobilde iyi çalışmaz. Olumsuz bir deneyim yaşamamak için tasarımınızın hem masaüstü hem de mobil cihazlarda sorunsuz çalıştığını onaylayın. Mobilde erken ve sık test yapın.
• Animasyonu yavaş hızda izleyin.
  Bir animasyon (özellikle karmaşık olan) tam hızda çalışırken sorunları fark etmek zor olabilir. Animasyonu yavaşlattığınızda (örneğin, hızın onda biri), bu tür sorunlar belirginleşir. Ayrıca animasyonlarınızın ağır çekim videosunu kaydedebilir ve başka bakış açıları elde etmek için diğer insanlara gösterebilirsiniz.

Slaytlar çerçevesiyle, dakikalar içinde aslına uygun etkileşimli bir prototip oluşturabilirsiniz. Animasyonlu efektler oluşturmak, tasarımı yayınlamak ve hem masaüstü hem de mobil cihazlarda nasıl çalıştığını görmek için bir WYSIWYG düzenleyicisi kullanabilirsiniz.

6. Animasyon Sonradan Düşünülmemeli

Pek çok tasarımcının animasyonu, kullanıcı arayüzünü aşırı yükleyen ve onu daha karmaşık hale getiren gereksiz bir özellik olarak düşünmesinin bir nedeni var. Çoğu durumda, tasarımcılar tasarım sürecinin sonunda animasyonu, tasarımın ruju olarak, başka bir deyişle, animasyon için animasyonu tanıttıklarında bu doğrudur. Herhangi bir amacı olmayan rastgele hareket, ziyaretçilere pek fayda sağlamaz ve kolayca dikkati dağıtabilir ve rahatsız edebilir.

Anlamlı bir animasyon yapmak için, animasyonun doğal olarak uygun olacağı alanları düşünmek için projenin başında zaman ayırın. Animasyon ancak bu şekilde kullanıcı akışı için doğal olacaktır.

Çözüm

İyi işlevsel animasyon, bir açılış sayfasını yalnızca daha çekici kılmakla kalmaz, aynı zamanda daha kullanışlı hale getirir. Doğru yapıldığında, animasyon bir açılış sayfasını bir dizi bölümden dikkatlice koreografisi yapılmış, unutulmaz bir deneyime dönüştürebilir. Slaytlar çerçevesi, web tasarımcılarının net bir şekilde iletişim kurmak için animasyonu kullanmasına yardımcı olur.