Rehber

Motion (Hareket) Tasarımı Nedir, Arayüz Tasarımında Nasıl Kullanılır?

Yazar
Meriç Coşkunmeriç

Arayüz Tasarımında Motion(Hareket) ve Önemi

Bu içerikte sizlere, arayüz tasarımında artık sıkça tercih edilen ve tasarımların bir parçası haline gelen, Hareket Tasarımı (Motion Design) ilkelerinden bahsedeceğiz.

Bu içerikteki başlıklarımız:

Arayüzde Hareket (Motion) Tasarımı Nedir?
Hareket Tasarımı İlkelerinin Nasıl Ortaya Çıkar?
Hareket Tasarımının Kullanıcıyla Etkileşim Biçimleri


Arayüzde Hareket (Motion) Tasarımı Nedir?

Arayüz Tasarımı açısından baktığımızda Hareket (Motion); Bir uygulama arayüzünü, kullanıcılar için daha anlaşılabilir ve kolay kullanılabilir kılabilmek için tasarıma ve/veya tasarım bileşenlerine eklenen kurallı-tanımlı hareketler olarak tanımlayabiliriz.

Hareket(Motion) tasarımının kullanıldığı bir fotoğraf uygulaması - Vito Burhonski tarafından tasarlanıldı

Bu hareketlerin kullanım amacı ise kullanıcıların arayüzler ile daha rahat etkileşime geçebilmesi ve arayüzler üzerinde gerçekleşen veya gerçekleştirdikleri eylemler ve eylem durumlarıyla daha anlaşılabilir geri dönüşler alabilmesidir. Bu da kullanıcıların arayüzler arasında işlem yaparken, hareketlerine tepkiler almalarını ve daha iyi bir kullanıcı deneyimi yaşamalarını sağlamaktadır.

Bunu, doğamız gereği, kendinden hareketli veya hareketlerimizle etkileşimde olan şeylerle daha rahat iletişim kurma eğiliminde olan biz insanların, kullanıcılar olarakta aslında yapay (sentetik) ve bize fayda sağlama amaçlı bir yapı olan arayüzlerle daha rahat ve kolay etkileşim kurabilmemiz olarak değerlendirebilmemiz mümkündür.

Hareketin Kökeni ve Ortaya Çıkışı

Hareket Tasarımı ile kullanıcı deneyimi tasarımının ilişkisi kısmen yenidir diyebiliriz. Özellikle renkli ve dokunmaya duyarlı ekranların kişiye göre özelleştirilebilen arayüzlü mobil cihazların ortaya çıkması ve yaygınlaşması ile doğru orantılı bir şekilde önem kazandığı söylenebilir.

Disney Motion(Hareket) İlkeleri - Disney İlkeleri

Öte yandan fikrin kökeninin daha eskiye; aralarında Pinokyo, Bambi Fantasia gibi klasiklere katkıda bulunmuş Disney’in değerli animasyon sanatçıları Frank Thomas ve Ollie Johnston’ a dayandığını görüyoruz. Onların tanımladıkları, Disney İlkeleri olarak ta bilinen ve Animasyonun 12 Temel İlkesi olarak adlandırılan ilkeler bugün sektörde hala geçerliliğini koruyor.

Bu ilkeler animasyonda hareketleri, daha iyi bir hikaye anlatımı için temel fizik ilkeleri doğrultusunda ele alır. Animasyondaki karakterleri ve diğer hareketli öğeleri bu ilkelere bağlı hareketler ve ifadelerle yeniden tanımlarlar. Ancak bu ilkeler günümüz arayüzlerinin etkileşimli tasarım ihtiyacını karşılamaktan uzak kalıyor. Ancak çağdaş tasarımcıların ise oluşan bu boşluğu doldurmaya yönelik çeşitli çalışmaları mevcut.

Kullanıcı Deneyimi Tasarımında Motion Prensipleri Kullanımı

Bu kişilerden biri olan  Jorge R. Canedo Estrada’nın Disney İlkeleri uyarlaması olan Hareket Tasarımının 10 İlkesi adlı çalışmasını örnek olarak verebiliriz. Yine de bu çalışmalar içerisinde yakın tarihli ve en iddialı olan girişim; Hareket İlkelerini, etkileşimli arayüzleri (ve tabii kullanıcılarını deneyimini de kapsayan) öğeler çerçevesinde yeniden ele alan ve tanımlayan  Issara Willenskomer’in UX te Hareket (UX in Motion) manifestosudur.

Willenskommer’da manifestosunda 12 temel ilke belirler. Bu ilkeleri oluştururken:

• Hareket Tasarımını, UI Animasyonundan ayrımını tanımlar.
• Hareketin kullanılabilirliğe nasıl yardımcı etkileri olduğunu ifade eder.
• Kullanıcıyla olan etkileşim biçimlerini tanımlar.

Kullanıcı hareketi dışında gerçekleşen Animasyon örneği - Yemek Sipariş Uygulaması, Lukáš Straňák tarafından tasarlandı

Arayüz Tasarımında, hareket (UI Motion) ve Animasyon (UI Animation) öğeleri birbirlerine karıştırılabilir. Ancak aralarındaki temel fark, her ikisinde de hareket ortak iken animasyonun, Arayüz tasarımını kullanıcılar adına anlaşılabilir, algılanabilir, yönlendirebilir veya bilgilendirebilir kılmak gibi görevleri ve etkileri yoktur. UX tasarım öğelerinin bir parçası olarak değerlendirilemez. Uygulamaların kullanıcılara daha çekici göstermek amacıyla isteğe bağlı konulan ve sadece UI kısmını ilgilendiren süsleme öğeleridir. Hareket ise süsleme değil, aksine bir davranıştır. Bu davranışlar kullanıcılara çeşitli yollarla yardımcı veya engel olur, onlarla etkileşimde bulunur.

Hareketin Kullanıcıyla Olan Etkileşim Biçimleri

Bu etkileşimler temelde, Gerçek Zamanlı ve Gerçek Zamanlı Olmayan Etkileşimler olarak ikiye ayrılırlar:

Gerçek Zamanlı Etkileşim: Bu etkileşim türünde Arayüzdeki Hareket öğesi kullanıcı girdisine anında yanıt verir. Bu etkileşim sonrasında arayüzde gerçek zamanlı olmayan etkileşimler de meydana gelebilir. Kullanıcının arayüzü takip etmesi,hareket davranışını izlemesi gerekebilir.

Gerçek Zamanlı Olmayan Etkileşim: Bu etkileşim türünde ise arayüzdeki hareket öğesi kullanıcı girdisine anında yanıt vermez.Kullanıcıların  arayüzdeki hareket öğesini takip etmesi ve arayüz davranışlarını takip etmesi gerekir.

UX/UI da Hareket Tasarımının Kullanımı Destekleyen Etkileri

Willenskomer manifestosunda, hareketin kullanıcıyı kullanıcı deneyimi konusunda 4 başlık altında desteklemesi ve kullanıcının arayüzle olan etkileşiminde ona yardımcı olabilmesinin gerektiğinden bahsetmiştir. İlkelere tek tek değinmeden önce bu etkilerin neler olduğuna değinip, hareketin kullanıcı deneyimi ve arayüz tasarımına getirdiği katkılara daha yakından bakabiliriz:

Gerçek zamanlı(real-time) bir hareket tasarımı örneği - Stan Yakusevich tarafından tasarlandı

Beklenti: Kullanıcıların bir arayüz ve arayüz öğelerinin ne olduğu ,nasıl algılandığı ve nasıl davrandığına dair olan, etkileşimleri öncesi beklentileriyle, deneyimleri arasındaki farkı; hareket öğeleri ile en aza indirmeli ve kullanıcı beklentisini karşılayabilmelidir.

Süreklilik: Kullanıcı ile arayüz etkileşimleri, kullanım sürecinde tutarlılık gösteriyor olmalı. Hareket öğeleri bu etkileşime katkı sağlayabilmelidir.

Gerçek zamanlı olmayan (non-real time) hareket tasarımı örneği - Gapsy Studio tarafından tasarlandı

Hikaye/Akış: Etkileşimler ve bunlara bağlı çalışan hareket davranışları, kullanıcının amaçlarını karşılayan mantıksal bir olaylar dizisi şeklinde ilerleyebilmelidir.

İlişki: Arayüzdeki öğelerin hiyerarşik, uzamsal ,zamansal ve estetik özelliklerinin, birbirleriyle olan ilişkilerinin, kullanıcının anlama ve karar verme süreçlerine katkı sağlayabilmelidir.

Arayüz tasarımlarında kullanılmaya başlanan ve sıklıkla karşılacağımız hareket(motion) tasarımını sizlere aktarmaya çalıştık. Arayüz Tasarımlarında Kullanılabilecek 12 Temel Hareket(Motion) Tasarımı yazımız haftaya sizlerle olacak. Bu konu ve diğer deneyim tasarımı konuları hakkında merak ettikleriniz varsa, Space Club komünitemiz üzerinden fikirlerinizi paylaşabilirsiniz. Ayrıca arayüz tasarımı konusunda daha fazla bilgi sahibi olmak ve kendi arayüzlerinizi oluşturmak isteyenler için Userspots Akademi olarak verdiğimiz UI Eğitimimizi inceleyebilirsiniz.

Kaynaklar:

https://uxdesign.cc/a-guide-to-motion-design-principles-7f05f10ccd79

https://www.toptal.com/designers/ux/motion-design-principles

https://material.io/design/motion/understanding-motion.html#principles

https://bootcamp.uxdesign.cc/12-principles-of-ui-ux-animation-you-should-know-75cf41e49e62

https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

Oluşturulma Tarihi
10/2022
Güncellenme Tarihi
10/2022
Online Eğitim
UI Eğitimi

Cihazlar ve kullanıcılar arasındaki etkileşimi kolaylaştıran arayüzler nasıl tasarlanır?

31 Ocak - 7 Mart 2023

Space Konularımız

No items found.
No items found.
Userspots Bülten
Her ay tasarım ve teknoloji üzerine yeni stiller, dijital ürünler, projeleriniz için kaynaklar, tasarım ilhamları ve daha fazlasına sahip bülten.
2300’den fazla kişinin kayıtlı olduğu kulübümüze katıl !
Başvuru için teşekkürler. En kısa sürede sizinle iletişime geçeceğiz.
Lütfen eksik bilgileri tamamlayıp, tekrar deneyin.