GİT304U-DİJİTAL MEDYA VE ARAYÜZ TASARIMI
Ünite 5: Hareket Tasarımı
Giriş
Hareket tasarımı, dijital medya, arayüz ve kullanıcı deneyimi çalışmalarında video, animasyon ve görsel efekt kullanımına yönelik eğilimleri belirliyor. Hareket tasarımı, özellikle ilgi çekici ve sezgisel kullanıcı arayüzleri oluşturmada çok önemli bir rol oynar. UI/UX tasarımı alanında hareket, statik (durağan) görsel ögeler ile kullanıcıların modern dijital ürünlerden beklediği dinamik, etkileşimli deneyimler arasında bir köprü görevi görür.
Hareket Tasarımı Nedir?
Modern dijital tasarımın kalbinde, kullanıcı deneyimini zenginleştiren ve mesajları etkileyici bir şekilde ileten bir sanat dalı yer alır: Hareket tasarımı. Etkili kullanılması durumunda;
• Kullanıcıların ilgisini çekmek ve odaklanmalarını sağlamak için güçlü bir araçtır. • Bir hikâyeyi anlatımını güçlendirir; daha etkili, kalıcı ve kolay anlaşılabilir kılar. • Kullanıcı deneyimi iyileştirir; akıcı geçişler ve hareket temelli anlık geri bildirimler sağlayarak daha sezgisel ve memnun edici hâle getirir. • Deneyime konu olan öznenin (arayüz, marka, hikâye, video, film, vb.) kişiliğini ve değerlerini ifade etmeye yardımcı olur.
Hareket tasarımının öne çıktığı uygulamalar ise şunlardır:
• Kullanıcı Arayüzleri (UI) • Dijital Reklamlar • Sosyal Medya • Video ve Film Prodüksiyonu • Sunular
Animasyon
Latince anima kökünden türetilmiş olan animasyon kelimesi özünde can, ruh veya hayat anlamına gelir. 16. yüzyılda “canlandırmak” veya “hareketlendirmek” anlamlarıyla kullanılmaya başlanmıştır. Modern animasyonun tarihsel gelişimi ise aşağıdaki gibi sıralanabilir:
• 19. Yüzyıl: Zoetrope ve Praksinoskop gibi cihazlarla hareket illüzyonunun yaratılması. • 1900’lerin başları: Animasyonun ticari ve sanatsal gelişiminin başlangıcı. • 1920’ler: Walt Disney gibi öncülerle animasyon ve hikaye anlatımının başlaması. • 1930’lar-1950’ler: Renkli ve uzun metraj animasyon filmlerin gelişimi. • 1960’lar-1980’ler: Televizyonda animasyon programlarının yaygınlaşması ve animasyon dizilerin üretilmesi. • 1980’ler-1990’lar: Bilgisayar teknolojilerinin gelişimiyle üç boyutlu animasyonların ortaya çıkışı.
• 2000’ler: Dijital animasyon ve ileri teknolojilerle dinamik bir alan olarak animasyonun eğitim, sağlık, televizyon, sosyal medya gibi çok geniş alanlarda kullanımı.
Animasyon, birbiri ardına gösterilen resimler veya çizimler aracılığıyla hareket illüzyonu yaratmaya dayalı bir sanattır. Animasyonun temelinde, hareketin nasıl gerçekleştiği ve izleyicinin hareketi nasıl algıladığı yatar. 12 temel prensip, iki boyutlu animasyona kılavuzluk yapar:
• Sıkıştırma ve Germe (Squash and Stretch) • Öncülük (Anticipation) • Sahneleme (Staging) • Doğrudan Hareket ve Pozdan Poza (Straight Ahead Action and Post to Pose) • Takip ve Üst Üste Binme Hareketi (Follow Through and Overlapping Action) • Yavaş Başla ve Yavaş Bitir (Slow In and Slow Out) • Yaylar (Arcs) • İkincil Hareket (Secondary Action) • Zamanlama (Timing) • Abartma (Exaggeration) • Sağlam Çizim (Solid Drawing) • Çekicilik (Appeal).
İki boyutlu animasyonlarda sıklıkla kullanılan teknikler ise kare kare (frame by frame), tweening (in-betweening) ve rigging olarak gösterilebilir.
2B ve 3B animasyon arasındaki en belirgin fark, derinlik algısıdır. 2B animasyon, genellikle düzlem üzerindeki çizimler ve illüstrasyonlar kullanılarak oluşturulur ve bu da ona daha çizgi film benzeri bir his verir. Buna karşın 3B animasyon, izleyicilere daha derinlikli ve gerçekçi bir görünüm sunar. 3B animasyon karmaşık gölgeleme, aydınlatma ve kamera açıları gibi tekniklerle desteklenerek izleyicilere neredeyse gerçek bir dünya deneyimi sunabilir. Bu süreçte Autodesk Maya, Autodesk 3ds Max, Cinema 4D, Blender, Unity ve Unreal Engine gibi gelişmiş 3B modelleme ve animasyon yazılımlarından faydalanılır. Stop motion ve motion capture 3B animasyon dünyasında farklı estetik ve teknik ihtiyaçları karşılamak amacıyla yaygın olarak kullanılan yöntemlerdir. Stop motion, animasyona el yapımı ve organik bir dokunuş sunarken motion capture gerçekçilik ve doğallıkta mükemmelliği hedefler. Her iki teknik de hikâye anlatımı ve karakter geliştirme açısından benzersiz avantajlar sunar.
Genel animasyon pratiklerinden farklı olarak arayüz (UI) ve kullanıcı deneyimi (UX) tasarımlarında animasyonlar, Figma ve Adobe XD gibi grafik editörlerinin yetenekleri doğrultusunda interaktif prototipler geliştirilirken işe koşulur. Karmaşık hareketlerden ziyade arayüz kullanımına yönelik kaydırma, boyut değiştirme, gölge verme, gösterme/gizleme gibi nesne tabanlı hareketler sıklıkla kullanılır.
Geçişler
Arayüz ve kullanıcı deneyimi geliştirme geçişler (transitions), hareket tasarımının önemli bir unsurudur. Sayfalar, sahneler veya ögeler arasında akıcı ve etkileyici geçişler yaratmak; kullanıcı deneyimini ve görsel estetiği zenginleştirir. Etkili geçişler tasarlamak için şu ilkeler göz önünde bulundurulmalıdır:
• Amaç Belirleme • Sadelik • Tutarlılık • Performans • Test
Arayüz ve kullanıcı deneyimi ihtiyaçları kapsamında geçişler pek çok farklı biçimde yapılandırılabilir. Hangi geçiş türünün nerede, nasıl kullanılması gerektiği mobil uygulama, web sitesi ya da video gibi tasarım yapılan arayüz formatının özelliklerine göre farklılık gösterir. Mobil uygulamalar ve web siteleri bağlamında yaygın kullanılan geçiş türleri şunlardır:
• Yükleme Ekranları • Menü Geçişleri • İçerik Geçişleri • Sayfa Geçişleri
Mikro Etkileşimler
Mikro etkileşimler, kullanıcıların dijital platformlarla etkileşimini daha keyifli hâle getiren animasyon temelli unsurlardır. Kullanıcıya geri bildirim sağlamak, aksiyonun sonucunu göstermek ve bir işlemin durumu hakkında bilgi vermek amacıyla işe koşulur; daha sezgisel ve tatmin edici bir kullanıcı deneyimine aracılık eder. Örneğin animasyonlarla desteklenmiş mikro etkileşimler; kullanıcı bir butona bastığında, bir işlemi tamamladığında veya bir hata meydana geldiğinde geri bildirim sağlamak için kullanılabilir. Ayrıca metin kutuları, listeler ve düğmeler gibi form ögelerini, kullanıcı etkileşimlerine uygun olarak anlık durum değişimlerini vurgulayacak animasyonlarla görselleştirmek de sık kullanılan bir tekniktir.
Hareketli Grafikler
Hareketli grafik; grafik tasarım unsurlarını (metin, logo, ikonlar, şekiller vb.) hareket, ses ve video ile birleştirerek dinamik ve görsel olarak etkileyici içerikler oluşturma sanatıdır. Hareketli grafikler genellikle bilgiyi aktarmak, marka kimliğini güçlendirmek veya reklam ve tanıtım amaçlı kullanılır. Animasyon ve hareketli grafik terimleri, sıkça birbirinin yerine kullanılsa da aralarında belirgin farklar vardır. Her iki alan da görsel içeriğe hareket katma pratiğini içerir ancak kullanım amaçları, uygulama yöntemleri ve hedef kitleleri açısından farklılık gösterirler. Animasyon genellikle bir hikâye anlatımını veya karakterleri canlandırmak için kullanılırken hareketli grafikler daha çok bilgilendirme, reklam ve marka kimliğini güçlendirme amacıyla kullanılır.
Video
Video; hareketli görüntülerin kaydedilmesini, düzenlenmesini, yayınlanmasını ve görüntülenmesini sağlayan bir medya formatıdır. Video, analog ve dijital olmak üzere iki ana formatta üretilir ve dağıtılır. Analog video, geleneksel yöntemlerle manyetik bantlar ve optik diskler gibi fiziksel ortamlarda saklanırken dijital video dosyaları bilgisayarlarda, ağ akışları üzerinde veya dijital depolama aygıtlarında saklanabilir. Video kaydı yaparken arka planda işletilen süreç genel olarak şu şekilde özetlenebilir:
• Işık Algılama ve Dijital Sinyale Dönüştürme • Sinyal İşleme • Sıkıştırma ve Kodlama • Ses Kaydı • Veri Depolama • Kullanıcı Arabirimi ve Kontrol
Animasyonda olduğu gibi videoda da FPS saniyede oynatılan kare sayısını ifade eder. Videolar ile çalışırken bilmemiz gereken bir diğer önemli kavram da çözünürlüktür. Çözünürlük, videoyu oluşturan bitmap görüntülerin sahip olduğu piksel (pixel ya da px) sayısını belirtmek amacıyla kullanılan bir ifadedir. En-boy oranı (aspect ratio) ise videonun genişliği ve yüksekliği arasındaki orantısal ilişkiyi tanımlamak için kullanılır. İnternet, sosyal medya, televizyon ve sinema gibi farklı mecralarda yaygın olarak kullanılan video en-boy oranları 16:9, 9:16, 4:3, 1:1, 3:2 ve 21:9 olarak sıralanabilir. Doğrudan belli bir platformu hedef almayan genel amaçlı bir video oluşturmak istiyorsanız 16:9 en-boy oranı ve 1920x1080 px (HD) çözünürlük pek çok koşulda işinizi görecektir.
Video içeriği hazırlama süreci genel olarak üç aşamadan oluşur: (1) Tasarım (2) Prodüksiyon ve (3) Post- Prodüksiyon. Tasarım aşaması; ön hazırlıkların yapıldığı, video akışının tasarlandığı ve gerekli metinlerin yazıldığı süreçtir. Prodüksiyon aşaması, video içerik üretiminde donanımların en yoğun kullanıldığı aşamadır. Post- prodüksiyon aşamasında kurgu, görsel efekt ve renk düzeltme işlemleri için yüksek işlemci gücüne, hafızaya ve gelişmiş grafik kartına sahip güçlü bilgisayarlar gerekir.
Video özelinde hareket tasarımı; nesnelerin, karakterlerin ya da arka planların kurgusal kompozisyonunun önemli bir parçasıdır. İzleyicinin dikkatini çekme, anlatıyı güçlendirme ve duygusal tepkiler uyandırma amacıyla kullanılır. Hareket tasarımının başka bir önemli yönü ise ritimdir. Video içerisindeki hareketlerin ritmi, izleyicinin videoyu algılama şeklini büyük ölçüde etkiler. Özetle hareket tasarımı; video içerisindeki anlatıyı güçlendiren, duygusal bir yanıt uyandıran ve izleyicinin dikkatini çeken bir araç olarak ön plana çıkar.
Arayüz Tasarımında Animasyon Kullanımı
Arayüz tasarımına konu olan tüm ürünlerde animasyon; durağan arayüz bileşenlerini canlandırarak daha etkileşimli,
sürükleyici ve keyifli bir kullanıcı deneyimini mümkün kılar.
Arayüz Tasarımında Animasyon Kullanmak Neden Önemlidir?
Kullanıcı Arayüzü (UI) animasyonlarının temel amacı, kullanıcıların ilgisini belli bir hedef doğrultusunda yönlendirmek veya ne yapmaları gerektiğini harekete dayalı bir dille ifade etmektedir. Animasyon olmadan, sadece metin ile dolu bir kullanıcı arayüzü karmaşık ve anlaşılması zor olabilir. Animasyonlar, tasarımcıların metne başvurmadan kullanıcılarla iletişim kurabilmesine imkân tanır. Animasyonlar, sadece bilgi aktarımı değil aynı zamanda estetik bir değer de sunar. Arayüz animasyonları, farklı kültürlerden ve dillerden kullanıcılara ulaşmada da etkilidir. Animasyonlar, tasarım psikolojisi ve bilişsel yükü azaltma konusunda kritik bir role sahiptir.
Geri Bildirim Animasyonları
Hareketi bir geri bildirim aracı olarak kullanmak, arayüz tasarımında kullanıcı deneyimini geliştiren önemli bir yöntemdir. Görsel algılama yetilerini ve harekete karşı olan doğal hassasiyeti işe koşarak kullanıcılarla arayüz arasındaki etkileşimi, animasyonlar aracılığıyla belli noktalara odaklamayı mümkün kılar. Animasyonlar kullanılarak oluşturulan başarılı geri bildirimler, estetik açıdan ilgi çekici olduklarından kullanıcı deneyimini kesintiye uğratmaz, tersine daha akıcı bir geçiş sunarak deneyimi iyileştirir. Değişiklik körlüğü, kullanıcıların yeni bir bilgi veya güncelleme olduğunda bunu gözden kaçırmasına neden olabilir. Değişim körlüğünün önüne geçmek için basit bir animasyon, kullanıcı deneyimine zarif bir şekilde entegre edilebilir ve görsel olarak zengin geri bildirim sağlarken kullanıcı deneyimini kesintiye uğratmaz.
Durum Değişikliği Animasyonları
Hareket, kullanıcı arayüzünün farklı bir duruma geçişini belirtmede etkili bir araçtır. Bu tarz bir kullanımda animasyon, iki temel işlevi yerine getirir: Birincisi, mod değişikliğini görsel olarak öne çıkartarak kullanıcının durum değişikliğini fark etmesini sağlar. İkincisi ise mod geçişini kavramsal bir metafor aracılığıyla görselleştirerek kullanıcının yeni durumu algılamasına yardımcı olur. Durum değişikliği animasyonlarının kullanımı; basit bir görsel değişimden daha fazlasını sunar, kullanıcıya eylemlerinin sonuçlarını anlamlandıran bir hikâye anlatır. Animasyonlar, modlar veya veri görünümleri arasındaki geçişleri göstermenin ötesinde, kullanıcıların eylemleri tarafından tetiklenmeyen durum değişikliklerini iletmek için de faydalıdır. Sistem henüz girdi kabul etmeye hazır değilken iskelet ekran (skeleton screen) gibi yükleme göstergeleri, kullanıcılara süreç hakkında bilgi sağlar.
Bağlam Oluşturma ve Gezinti Animasyonları
Arayüz tasarımında bilgi hiyerarşisinin karmaşık yapısını kullanıcılara basit bir şekilde aktarabilmek önemlidir. Bunu yaparken özellikle kullanıcıların bilişsel yükünü iyi hesaplamak ve olası bir bilgi kirliliğine yer fırsat vermemek gerekir. Bir arayüzde menüler, ağaç diyagramları ve ekmek
kırıntıları (breadcrumbs) gibi gezinme bileşenleri takip etmek; bazı kullanıcılar yorucu ve algılanması zor bir görev olabilir. Böyle durumlarda animasyon, kullanıcıların bir süreç ya da hiyerarşi içerisinde hangi yönde ilerlemeleri gerektiğini belirtmek için işe koşulabilecek güçlü bir araçtır, karmaşık arayüz yapıları içinde gezinmeyi daha kolay ve anlaşılır hâle getirir. Animasyonlar, özellikle mobil cihazlarda ekran boyutlarının küçük olması nedeniyle bağlamın kaybolabileceği durumlarda, kullanıcıların aynı sayfada olup olmadıklarını veya ilerleyip ilerlemediklerini anlamalarına yardımcı olabilir.
Animasyonun İşaret Edici Rolü
Animasyonlar, arayüzle etkileşimlerinde kullanıcıya rehberlik eden güçlü işaret yönlendiriciler olarak hizmet eder. Hareketin yönü, hızı ve biçimi gibi özellikleri; kullanıcıya hangi eylemlerin mümkün olduğunu anlatır ve kabul edilebilir davranışları görsel olarak ön plana çıkarır. Kullanıcı, animasyonun sunduğu yön ve hareket biçimini izleyerek ilgili arayüz bileşeninin nasıl bir etkileşime olanak sağladığını hemen anlar.
Yaygın Kullanılan Animasyon Biçimleri
Farklı amaçlarla yaygın olarak kullanılan animasyon biçimleri şu şekilde sıralanabilir: Slide In/Out; Fade In/Out; Zoom In/Out; Dissolve; Bounce; Elastic; Parallax; Path.
İnteraktif Arayüz Prototiplerine Animasyon Eklemek
Figma ve Adobe XD, UI/UX tasarımında öncü araçlar olarak kabul edilir ve her biri interaktif arayüz prototipleri oluştururken animasyonları entegre etme konusunda benzersiz özellikler ve yetenekler sunar. Figma kullanılarak oluşturulmuş bir interaktif arayüz prototipine animasyon eklemek için genel olarak şu işlem adımları takip etmeniz gerekir: Tasarım hazırlığı, çerçeveler oluşturma, prototipleme, animasyon ayarları, test etme.
Arayüz Tasarımında Video Kullanımı
Son dönemlerde, video içeriklerinin web siteleriyle ve mobil uygulamalarla bütünleştirilmesi, arayüz (UI) ve kullanıcı deneyimi (UX) tasarımında öne çıkan bir eğilim olarak kendini göstermektedir.
Video İçerik Türleri
Hedef kitleyi doğru bir şekilde anlamak üzerine kurgulanmış etkileyici bir video, izleyicilerin dikkatini çekmekle kalmaz aynı zamanda onlara önemli bilgileri hızlı ve akılda kalıcı bir şekilde sunar. Video içeriğinin stratejik kullanımı, bilgi yükü altında ezilen günümüz dünyasında hedef kitlelerle etkili bir iletişim kurma ve onların ilgisini çekme konusunda kritik bir öneme sahiptir. Bu çerçevede amaçlarına göre video içerik türleri ayır ayrı incelenebilir.
Giriş Videoları
Giriş videoları, web/mobil arayüzlerinde kullanıcılara sıcak bir karşılama sunmak ya da gündemdeki bir konuya yönlendirmek için etkilidir. Markanın vizyonunu, misyonunu ve başarılarını ön plana çıkarmak üzere yaygın olarak kullanılır. Temel amaç; ziyaretçilerin ilgisini
çekmek, markayla ilgili önemli bilgileri kısa ve öz bir şekilde sunmak ve onları web sitesinde daha fazla vakit geçirmeye teşvik etmektir.
Arka Plan Videoları
Web sitesi tasarımının dinamik bir unsuru olarak sıklıkla kullanılan arka plan videoları, kullanıcılara durağan bir görüntüden çok daha etkileyici ve duygusal bir deneyim sunar. Kullanıcıların dikkatini çekmek, istenilen atmosferi oluşturmak ve sunulan ürün veya hizmete hızlı bir bakış sağlamak amacıyla tam ekran arka plan videolar tasarımcılar tarafından yaygın olarak kullanılmaktadır.
Manşet Videoları
Hero, banner gibi isimlerle de bilinen manşet bölümü, bir web sayfasının özellikle de ana sayfanın en üst kısmında yer alan ve siteyi ziyaret edenlere ilk izlenimi veren alandır. Genellikle dikkat çekici görseller, metinler, kaydırıcılar veya diğer interaktif ögelerle donatılan manşet bölümü; kullanıcıların ilgisini çekmek, markanın mesajını iletmek ve kullanıcıları web sitesiyle daha fazla etkileşime geçmeye teşvik etmek için güçlü bir araçtır. Manşet bölümlerinde video kullanımı, web uygulamalarını daha hayat dolu, dinamik ve duygusal açıdan çekici hale getirmenin en yaygın yöntemlerinden biridir.
Vitrin (Showreel) Videoları
Vitrin veya showreel videosu, bir bireyin veya şirketin daha önce gerçekleştirdiği çalışmaların özetini içeren ve genellikle yaratıcı endüstrilerde daha sık kullanılan bir video türüdür. Tasarım, animasyon, film yapımı, oyunculuk, modelleme ve pazarlama gibi alanlarda faaliyet gösteren profesyonellerin yeteneklerini ve başarılarını sergilemek için idealdir. Kullanıcılara, hızlı ve etkileyici bir şekilde portföyün genişliğini ve derinliğini gösterir.
Referans Videoları
Testimonial olarak da bilinen referans videoları, müşteri memnuniyetinin ve gerçek kullanıcı deneyimlerinin görsel bir kanıtı olarak hizmet eder. Mevcut veya potansiyel müşterilere markanın, ürünün veya şirketin değerini ve etkinliğini doğrulayan gerçek insan hikâyeleri sunar.
Ürün Videoları
Ürün videoları genellikle ana sayfada ya da ürün detay ekranında yer alır ve potansiyel müşterilere ürünün özellikleri, faydaları ve kullanım şekilleri hakkında detaylı bilgi sağlar. Amaç, ürünün ne işe yaradığını ve hangi sorunları çözebileceğini göstererek müşterilerin satın alma kararlarını bilinçli bir şekilde vermelerine yardımcı olmaktır.
Video Kullanımında Dikkat Edilmesi Gereken Noktalar
İster eğitici bir amaçla ister marka bilinirliğini artırmak için isterse de kullanıcı katılımını teşvik etmek amacıyla olsun web ve mobil uygulama arayüzlerinde video içeriğinin başarılı bir şekilde kullanılması, bazı önemli noktalara dikkat edilmesini gerektirir.
Yükleme Süresi
Yükleme süresi, video içeriklerin web sitesi veya uygulamalara entegre edilmesi sürecinde kritik öneme sahip bir faktördür. Aşağıda verilen stratejiler, video entegrasyonunun yükleme süresi üzerindeki etkisini azaltmaya yardımcı olabilir: Video sıkıştırma, tembel yükleme (lazy loading), uyarlanabilir akış (adaptive streaming), video barındırma (hosting) servisleri, ön yükleme testleri.
Karşıtlık (Kontrast) Sorunları
Kontrast ve ögelerin hiyerarşisi, kullanıcıların arayüzü rahatça gezinmelerini ve içeriği kolayca anlamalarını sağlamak için dikkatle yönetilmesi gereken temel unsurlardır. Yüksek kontrast kullanarak okunabilirlik sağlanabilir, büyük ve net fontlar kullanılmalıdır, video üzerinde konumlandırılacak navigasyon öğeleri belirgin olmalıdır ve testler yapılmalıdır.
Deneyimsel Çeşitliliğin Sağlanması
Etkili bir arayüz ve kullanıcı deneyimi tasarımı, farklı kullanıcı ihtiyaçlarını ve tercihlerini dikkate almalıdır. Video içeriğini, metin ve görseller gibi diğer iletişim yöntemleriyle desteklemek; web sitelerinin veya mobil uygulamaların daha geniş bir kitlelere ulaşmasını sağlar. Video içeriğini diğer iletişim yöntemleriyle dengeli bir şekilde birleştirmek, farklı kullanıcı gruplarının ihtiyaç ve tercihlerine uyum sağlar; erişilebilirliği ve kullanıcı deneyimini iyileştirir.
Kontroller
Video içeriği sunarken kullanıcı kontrollerine izin vermek de kritik öneme sahiptir. Deneyimin kişiselleştirilebilmesine ve içeriğin kullanıcı ihtiyaçlarına göre yönetilebilmesine olanak tanır. Bu ihtiyaç özellikle video içeriğin uzun ve detaylı olduğu durumlarda daha baskındır. Arayüz ve kullanıcı deneyiminde otomatik oynatma konusunda seçenek sunmak, ses seviyesinin kontrolünü sunmak, videonun ileri/geri alınması veya durdurulması gibi kontrol edilebilmesine ve gerektiğinde videoya ek olarak metin açıklamaları veya altyazılar sunarak erişebilirliğin arttırılması yararlı olacaktır.