Geliştirici-Tasarımcı İşbirlikleri İle Mikro Etkileşim ve Kullanıcı Arabirimi Animasyonunu Hayata Getirmek

Mikro etkileşim ve kullanıcı arabirimi animasyonu ile kullanıcılar için keyifli bir deneyim yaratabiliriz!

Merhaba, benim adım Kyo Kim ve Capital One'da ürün tasarımcısı olarak yaklaşık iki yıldır çalışıyorum. Buradaki çalışmalarım boyunca kendiniz kullanmış olabileceğiniz bazı mobil projeler de dahil olmak üzere mikro etkileşimler ve animasyonlar kullanıyorum. Teknik alanda çalışmaya başlamadan önce, geçmişim filmdeydi. Filmde odak, izleyicinin ilgisini çeken bir hikaye oluşturmak için hikaye anlatımı ve kurgu ile ilgilidir; ve bunların çoğu geçişlerin kullanılmasıyla gerçekleştirilir. Dijital araçlar için deneyimler ve hikayeler yaratırken bugün bu becerileri faydalı buluyorum.

Tasarım yaparken, kullanıcılara geçişler ve hikaye anlatımı ile ilgili harika, keyifli bir deneyim sağlayacak faktörleri düşünüyorum.

Bir ürünün kullanıcılarına keyifli bir deneyim sunması için estetik açıdan hoş tasarımdan ve etkileyici animasyon efektlerinden fazlasını sunması gerekir.

Ürünün uygulama tabanlı, web tabanlı veya başka bir dijital ürün türü olup olmadığına bakılmaksızın, kullanıcıları çekmesi, kullanması için zevkli olması ve onlara doğrudan ve anlamlı bir şekilde katılmalarını sağlamak için fırsat vermesi gerekir. yol.

Mikro etkileşimler, kullanıcı deneyimini pek çok tasarım öğesinin yapamayacağı şekilde keyifli ve tatmin edici kılma gücüne sahiptir. Ürün tasarımı bağlamında mikro etkileşimlere girmeden önce, esaslara başlayalım.

Onlar neler? Neden kullanıcı deneyimi için iyidir? Tasarımcılar ve geliştiriciler neden onları çalışmalarına dahil etmeli? Ürün tasarım ekipleri bunları geliştirmek için nasıl birlikte çalışabilir?

Mikro Etkileşim Nedir ve Neden Onları Önemsemeliyiz?

Mikro etkileşimler veya kullanıcı arabirimi animasyonları nedir? İnsanlar genellikle bunlara güzel animasyonlar, hareketli grafikler veya hareketli görüntü tasarımı olarak atıfta bulunur. Ancak, bundan çok daha fazlası.

Yalnızca hareket yanılsaması yaratmak için var olan diğer animasyon türlerinin aksine, mikro etkileşimler kullanıcının doğrudan ilgilenmesini sağlayarak çeşitli görevleri yerine getirmesini ve ürünle sezgisel ve etkili bir şekilde etkileşmesini sağlar.

Bunu iyi sistem tasarım ilkelerine geri bağlarsak, kullanıcı için sistem geri bildirimini geliştirir ve sağlar. Doğru yapılırsa, kullanıcılar mikro-etkileşimleri, kullanıcının (sistem) kullanıcının ihtiyaç duyduğu şeylere yanıt olarak yapması gerekeni yaptığını belirten bir mesaj olarak alırlar.

Hangi mikro etkileşimlerin olduğunu bilmiyor olsanız bile, onlarla düzenli olarak bağlantı kurarsınız. Bir uygulamayı veya web tabanlı bir ürünü belirli bir görevi gerçekleştirmek için her kullanışınızda (ister haberleri okuyor, ister bir satın alma yapıyor, bir oyun oynuyor, bir profil oluşturuyor veya ayarlarınızı ve bildirim tercihlerinizi düzenliyor olun) yapın, yaptığınız her işlem bir mikro etkileşim. Mikro etkileşimler, bir ürünün platformuna kusursuz bir şekilde dokunup işlevlerini şeffaf ve erişilebilir hale getirir ve kullanıcının genel deneyimini etkin bir şekilde iyileştirir.

Her ne kadar bu “eylemler” birkaç farklı biçimde olsa da, bazı yaygın örnekler şunlardır:

  • Bir öğeyi sanal bir alışveriş sepetine “taşıdığımızda”.
  • CTA benzeri bir geçiş düğmesindeki iki seçenek arasında seçim yaptığımızda.
  • Bir haber beslemesini tazelemek ve en son güncellemeleri görmek için “aşağı çekerken”.
  • Uzun besleme veya sayfada “yukarı ve aşağı” hareket ettiğimizde.

Bir mikro-etkileşim tasarlarken, kullanıcının deneyimi için gerçekten gerekli ve hayati olup olmadığını incelememiz gerekir. Aksi takdirde, ürününüzü kullanarak kullanıcı formunu dağıtabilme veya görsel parazitlenme potansiyeli vardır.

Mikro Etkileşim İlkeleri

Mikro etkileşimleri tasarlarken her zaman göz önünde bulundurduğum üç ilke var.

  1. Süreklilik (ve incelik)

Mikro etkileşim unsurları, kullanıcı bir eylemde bulunduğunda, deneyiminde sürekli bir akış olması için, ince olmalıdır. Örneğin, uzun bir feed'de kayan bir animasyon oluşturuyorsak, kullanıcının kayan animasyonun kendisinden ziyade sayfanın içeriğine odaklanabilmesi gerekir.

2. Tahmin edilebilirlik

Kaliteli mikro etkileşimler, kullanıcının bir ürünü etkin ve verimli bir şekilde yönlendirmesini sağlayan bir öngörülebilirlik unsuruna sahiptir. Kullanıcı, işlemlerinin etkilerini doğru bir şekilde tahmin edebilir, tersine çevirmekte rahat hissedebilir ve beklendiği gibi gerçekleştirme yeteneklerine güvenebilir.

3. Dönüştürülebilirlik

Çoklu ekranlar arasındaki akışkan geçişleri ve bunların içindeki çeşitli nesnelerin iyi tanımlanmış dönüşümleri, kaliteli mikro etkileşimlerin kilit unsurlarıdır. Kullanıcının, ekranlar ve içindeki öğeler arasındaki ilişkilerin sezgisel bir şekilde anlaşılmasını sağlar.

Bu ilkeleri izleyerek tasarlandığında, mikro etkileşimler, kullanıcıların kendisiyle nasıl etkileşime gireceklerini bilmelerine yardımcı olarak bir tasarım bağlamı sağlar. Mikro etkileşim, tek bir görevi tamamlayan anlık bir olaydır. Bir web sitesinin veya uygulama tasarımının en küçük etkileşimli öğeleri olan tartışmalı, mikro etkileşimler, çok çeşitli çekirdek işlevler sunduğundan en hayati olanlardan bazılarıdır.

Tetikleyiciler (dokunma, kaydırma, sürükleme vb.) Yukarıdaki bölümde listelenen işlemlerin her birini başlatır (süreklilik, öngörülebilirlik ve dönüştürülebilirlik). Kullanıcı işlemi başlatmak için bir web sitesinde veya uygulamada bir eylem gerçekleştirir (ilk adımdan sonra devam etse bile). Bu, bir kullanıcıdan gelen bir harekete geçirme ifadesi şablonunu, arabirim tarafından belirlenen katılım kurallarını (ne olacağını ve nasıl olacağını), kullanıcıdan gelen geri bildirimi (işe yaradı veya yapmaz) ve kalıpları veya döngüler (eylemi yapar) izler bir kez olur veya bir program üzerinde tekrarlayın).

-Genel Geliştiriciler ve Tasarımcılar Mikro Etkileşimleri Hayata Getirmek İçin Birlikte Nasıl Çalışabilirler?

Gördüğünüz gibi, mikro etkileşimlerin kullanıcı deneyimini şekillendirmede kritik bir rolü var. Bu yüzden ürün tasarımcısı olarak işimin giderek daha önemli bir parçası oldular. Çeşitli platformlarda ve kullanımlarda çeşitli projeler üzerinde çalıştım, herkesin bu öğelerin değerini veya nasıl etkili bir şekilde oluşturulacağını tanımadığını fark ettim. Daha da önemlisi, çoğu zaman ekip üyeleri geçişleri ve mikro etkileşimleri tasarlama konusundaki fikirlerini birbirlerine nasıl ifade edeceklerini bilemezler.

Her şeyi iletişime indirgedim - tasarım fikirleri geliştiricilerime açıkladığımda çeviri sırasında bir şeyler kayboldu. Bu alıntıyı daha önce Konfüçyüs'ten duymuş olabilirsiniz, “Söyleyin bana, unutacağım. Göster bana, hatırlayabilirim. Beni dahil edin ve anlayacağım. ”Ve tasarımcıların ve geliştiricilerin bir ekibi olarak harika deneyimler yarattığımız sürece dahil olmaktan geçer.

Öncelikle, tasarım sürecinin kısa bir tanımını gözden geçirelim…

İdeal bir durumda, bir tasarımcı mikro etkileşim için bir fikir ortaya çıktığında, geleneksel iş akışı aşağıdaki sırayla ilerler:

  1. Tasarımcı fikrini gerçekleştirmek için gerekli görsel unsurları ve animasyon efektlerini geliştirir.
  2. Tasarımcı, nihai modeli ve altında yatan konseptleri diğer ekip üyelerine sunar.

Fakat ya tasarım süreci teoride olduğu gibi pratikte gerçekleşmezse? Bir storyboard veya eksik bir model sunuyorsak ne olur? Ya da takımdaki başka birisi modeli tasarlıyor mu?

Bu olduğunda, sunum veya geliştirmede sorunların ortaya çıkması muhtemeldir. Bu sorunlar genellikle üç kategoriden birine girer:

  1. Animasyon fikri yeterince açık bir şekilde iletilmedi.

Kelimelerle veya hareketsiz görüntülerle bir animasyon kavramını tanımlamaya çalışıyorsanız, izleyicilerinizin yüzlerinde yüz ifadeleri görebilirsiniz. Bu, fikrinizi anlamak için ellerinden geleni yapmaya çalıştıkları, ancak gerçekten anlamadıklarını gösterir. Temel kavramı anlasalar bile, akıllarında oluşturdukları resim muhtemelen sizin düşündüğünüzle tutarsızdır. Çünkü insanlar hareketli görüntüleri, hareketsiz görüntüleri ve sözlü açıklamaları farklı şekillerde algılamaya meyillidirler. Animasyon fikrini iletmek için kelimelere veya resimlere dayanmak, iletişimsizlik için yer açar ve çoğunlukla ekibinizin üyeleri arasında gereksiz gerginlik yaratır.

2. Tasarımcı, geliştiricinin prototipini kontrol edip test edene kadar animasyonun iyi çalışıp çalışmadığını bilmiyor.

Tasarımcılar prototip oluşturma becerilerine sahip olmadıklarında, fikirlerini bir storyboard aracılığıyla geliştiricilere sunmakla sınırlıdırlar. Bir tasarımcı mikro etkileşim modeline şiddetle inansa bile, geliştirici prototipi tamamlayana kadar tam potansiyeline sahip olup olmadığını söyleyemez. Bu, bir çok nedenden dolayı sorunludur; ilki, böyle bir yaklaşımın sürece dahil ettiği yüksek iletişimsizlik olasılığıdır. Ek olarak, ekip üyelerinden şüphe duyma kapısını açar ve fikrin uygulanabilirliği hakkında sorulara yol açar. Bu gelişme açısından zaman açısından maliyetli olabilir.

3. Tasarımcı ve geliştirici aynı sayfada değil

Tasarımcılar kullanıcı arayüzü animasyonları veya mikro etkileşimler yaparken, özel kolaylıklar, komut dosyaları, ifadeler ve diğer efektler gibi karmaşık tasarım ayrıntılarını eklemeye çalışırlar. Bu fikirleri geliştiricilere sunarken, “Bunu zaman çizelgemizde yapmamız mümkün değil” veya “Tamamen aynı yapamayız ancak deneyeceğiz” diye duyabilirler. Bu noktada, hash yapmaya çalışabilirler. geliştiricilere çeşitli detaylar ve teknik konular hakkında bilgi verir. Ancak, tasarımcı, geliştiricilerin kullandığı araçlar veya diller hakkında çalışma bilgisine sahip değilse, bu tartışmalar sonuçsuz kalabilir. Fikirler formüle edilirken ve tartışılırken bu faktörler göz önünde bulundurulmalıdır, böylelikle mikro etkileşimler geliştiricilerin varsayılan ayarlarıyla uyumludur ve nihai ürünün tasarımcının (ve diğer herkesin) standartlarını karşılama olasılığını arttırır.

Bu Sorunlara Bazı Çözümler Nelerdir?

Tüm tasarımcılar ve geliştiriciler, animasyon konseptleri hakkında kendilerine özgü bir iletişim kurarken, ekibimin kullandığı yöntemlerden birini paylaşmak istiyorum. Bu yöntem oldukça başarılı oldu ve daha az toplantıyla sonuçlandı ve ekibimizin iletişimini büyük ölçüde geliştirdi.

Şimdi, artık mikro etkileşimleri dahil edip etmeyeceğimizi tartışmıyoruz, daha iyi hale getirmenin yollarını araştırıyoruz!

İskelet Etkileşim Kavramı ve Etkileşim Kılavuzu

“İskelet etkileşimi kavramı ve etkileşim kılavuzu, yorumlamaya yer bırakmayacak, hemen çalışmaya başlamamı ve tasarımcının vizyonunu benimsememe emin olmamı sağlıyor.” –Jesse M Majcher / Lead IOS mühendis

UX tasarımları hakkında iletişim kurmak için kullandığımız standart işlem, UI animasyonları için iyi sonuç vermez. Öncelikle, UX tasarımları ve akışları hala ekrandan ekrana göre tasarlanmıştır ve statiktir. UI animasyonları kendi içinde akar, akıcıdır ve zamanlamaya dayanır. Statik bir tasarım yarattığımızda, kaba bir tel kafes oluştururuz, böylece fikri anlayabilir ve akışı tartışabiliriz. Bu, son sürümü oluşturmadan önce tasarımı kolayca gözden geçirip ince ayar yapmamızı sağlar. Her ekip üyesi, tasarımın geliştiricilere vermeye hazır olduğunu kabul ettiğinde, tasarımcı, geliştiriciye bir stil rehberi ve tasarım hakkında detaylar, özellikler ve diğer önemli bilgileri içeren kırmızı bir çizgi sunar.

Animasyonlar için benzer bir işlem kullanırsak, işlemimiz çok daha hızlı ve daha iyi olabilir.

  1. İskelet Etkileşim Kavramı (Hareket Etüdü)

Bir iskelet etkileşimi konsepti, akış tasarlanırken yaratacağınız tel çerçeveye benzer, temel fark bu oynanabilir / tıklanabilir bir prototip demosu olmasıdır. Bunu bir toplantıya getirirsek, ekip üyelerimiz kavramı anlamak için hayal güçlerini kullanmak zorunda kalmayacaklar. Tasarımcı, tasarımın görsel ve animasyon öğelerine doğrudan referans vermek için oynanabilir / tıklanabilir demo veya statik hikaye panosunu kullanabilir. Bu, herkese fikrinin açık ve net bir anlamını verecektir. Buna karşılık ortaklar, son derece spesifik ve bu nedenle tasarımcı için çok değerli olan geribildirimler sunabilir. Aynı zamanda, ürün yönetimi ve geliştirme ekipleri, iç iletişimlerini ve proje için zaman tahminlerini geliştirmelerini sağlayacak bilgileri edineceklerdir.

2. Etkileşim Kılavuzu

Ekip kavramı kabul ettiğinde, tasarımcı etkileşim rehberini oluşturur. Bu, elemanların konumunu, dönüşünü, ölçeğini ve zamanlamasını özetleyen bir stil kılavuzuna benzer. Animasyonlarla ilgili her ayrıntıyı ekleyebiliriz; bu, ortaklarımızın net bir şekilde anlamalarına yardımcı olur. Tasarımcı, etkileşim rehberini ortaklarına gösterdiğinde, animasyon konseptinin hareketi ve ölçümü konusunda daha net bir şekilde anlaşabilir. Bu, işbirliğini yaparak çalışmayı sonuçlandırmak için çok yararlıdır. Ayrıca tasarımcıların animasyon / mikro-etkileşim tasarımlarında daha düşünceli olmalarına yardımcı olur.

3. Tasarımcılar İçin Prototip Becerileri

Tecrübelerime göre, kendinizi başarılı bir tasarım işbirliğine hazırlamak için, ürün tasarımcısı animasyonun sürücüsü olmalı ve geliştirici destek sağlamalıdır. Bu, ürün tasarımcısının ortaklıktaki sorumluluğun büyük bir kısmını taşıdığı anlamına gelir. Fikirlerini açık bir şekilde açıklamaktan sadece sorumlu değiller, kavram kanıtı sağlayarak mümkün olduklarını göstermeleri gerekir. Bu aynı zamanda, ürün tasarımcılarının kendi animasyon prototiplerini yapabilecek kapasitede olmaları gerektiği anlamına gelir. Bir ürün tasarımcısı bir prototip oluşturabilir ve bir toplantı sırasında sunabilirse, aşağıdaki tartışma daha net ve daha az zaman alır ve bu da genel olarak daha etkili bir iletişim sürecine yol açar.

Peki, tasarımcılar kendilerini ne tür prototipleme araçlarıyla tanıştırmalı? Dışarıda birçok araç var ama herkes belirli mikro-etkileşim görevleri için neyin en iyi olduğunu bilmiyor. İşte bu unsurları tasarlarken kişisel deneyimime dayanarak önerilerim.

Kodlamaya aşina iseniz:

  • Mobil: Xcode, Android stüdyosu
  • Mobil veya Web: Framer
  • Web: CSS animasyonu

Ekran benzeri bir itme ile bir modül arasında bir etkileşim tasarlamak istiyorsanız:

  • Invision ve Marbel

Daha ayrıntılı etkileşimler oluşturmak istiyorsanız:

  • İlke, Adobe CC, origami Studio ve Pixate

Detaylı etkileşimler + animasyon oluşturmak istiyorsanız:

  • After Effects

Şu anda prototipim için After Effect'i kullanmaya hayranım. Etkileşimli olmasa bile (yani tıklanabilir), bir animasyon konsepti sunmanın mükemmel bir yoludur. Ayrıca, etki sınırlaması yoktur ve detay hareketlerini kontrol edebilirsiniz. AR ve VR'de olduğu gibi, 3B alanda etkileşimi sağlamak için kullanmak bile mümkün.

Keyifli Takım Etkileşimleri Keyifli Ürünler Yapın

Mikro etkileşimler web, mobil tasarım ve daha pek çok unsur için kritik öneme sahipse giderek önem kazanıyor. Hem tasarımcılar hem de geliştiriciler UI animasyonlarının değerini kabul etseler ve bunları oluşturmaya motive olsalar da, genellikle verimli ve etkili bir şekilde işbirliği yapmak için mücadele ederler. Zamanında büyük mikro etkileşimler göndermek için güçlü bir ekip gerekir; Bu tür takımlar, rollerin açık bir şekilde tanımlanmasını, etkili iletişim becerilerini ve eldeki işler için doğru prototipleme araçlarını gerektirir.

Mikro etkileşimlerinizi başarı için ayarlamak üzere, ekibinizin bu özelliklere sahip olduğundan ve bu işlemlerle ilgilendiğinden emin olun. Ve kendi mikro etkileşim yolculuğunuzda iyi şanslar!

AÇIKLAMA AÇIKLAMASI: Bu görüşler yazara aittir. Bu yazıda aksi belirtilmediği sürece, Capital One, adı geçen şirketlerin hiçbirine bağlı değildir. Kullanılan veya görüntülenen tüm ticari markalar ve diğer fikri mülkiyet, ilgili sahiplerinin mülkiyetindedir. Bu makale © 2017 Başkent Bir.

API'ler, açık kaynak, topluluk etkinlikleri ve Capital One'daki geliştirici kültürü hakkında daha fazla bilgi için, one-stop geliştirici portalımız DevExchange'i ziyaret edin: developer.capitalone.com.