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ü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.
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.
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.
Ö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.
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.
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.
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.
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:
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.
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
-min.jpg)
