UX İş Akışına Hareket Tasarımını Entegre Etme

UX profesyonelleri olarak müşteri deneyimlerinde çıtayı yükseltmede kilit rol oynuyoruz. Ayrıntılara gösterilen basit bir dikkat, genellikle müşteriye onlar hakkında düşündüğümüzün sinyalini verir. Dijital alanda, uygulama cihazları ve süreçleri içindeki kullanıcı etkileşimlerine odaklanıyoruz.

Masaüstü bilgisayarların sürekli artan bilgi işlem gücü, tarayıcının gelişmişliği ve yerel uygulamaların kullanımı ile her gün iyi hazırlanmış bir kullanıcı arayüzünün sınırlarını zorlamanın yeni yollarını öğreniyoruz. Doğru kullanıldığında, hareket, kullanıcılarınızın hedeflerine ulaşmasına yardımcı olan önemli bir yardımcı program olabilir.

SmashingMag'de Daha Fazla Okuma :

• Nihai Hareketli Grafik Eğitimleri Özeti
• After Effects'i Bir UX İş Akışına Sığdırma
• Sinema Tarihi Boyunca Film Adı Tasarım Sanatı
• Photoshop'ta Gelişmiş Animasyonlar Oluşturma
  

Animasyon Ne Zaman Düşünülmeli?

Bir UX tasarımcısı olarak, büyük olasılıkla projenizin keşif aşamasının bir parçasısınız. Bu, paydaş görüşmeleri, kişilikler, marka görüşmeleri, kullanılabilirlik testleri, yolculuk haritalama, bağlamsal sorgulamalar vb. içerebilir. Bu aşamada, kullanıcılarınız hakkında çok şey öğreneceksiniz, ancak büyük olasılıkla hiçbir zaman hemen çıkıp size şunu söylemeyecekler. animasyon veya hareket gerekir. Peki, bir UI tasarımında animasyonun dikkate değer olup olmadığını nasıl anlarsınız?

Kullanıcılarla konuşurken aşağıdaki gibi geri bildirimler duyabilirsiniz:

• "Nereye odaklanacağımı bilmiyorum."
• “Burada en önemli olan nedir?”
• "Bu aracı kullanmak gibi bir arzum yok."
• “Daha sonra ne yapacağımı nasıl bilebilirim?”
• “Görevimi tamamladığımı nasıl anlarım?”
• "Bu verilerin bana ne söylediğini anlamıyorum."

Bunun gibi ifadeler, deneyimi geliştirmek için hareketi kullanma fırsatlarını ortaya çıkarabilir.

Takımdan Katılım Almak

Bir tasarımcı olarak bu noktada, hareketin deneyimi nasıl geliştirebileceğine dair bazı başlangıç ​​fikirleri düşünebilirsiniz. Fikirleriniz için nasıl katılım sağlarsınız? Paydaşlardan, ürün yöneticilerinden, müşterilerden ve geliştiricilerden oluşan bir ekibi, animasyon geliştirmelerine fazladan zaman ve para harcamanın "yapılması gereken doğru şey gibi göründüğüne" ikna etmeye çalışmak, sizi ancak bir yere kadar götürür. Tipik projenizin zaten zorlu zaman çizelgesinde ekstra çaba için nasıl zaman ayırıyorsunuz? Ekibi, belirli bir UX senaryosu için animasyonun doğru çözüm olduğuna nasıl ikna edersiniz?

Ekibinizden katılım sağlamanın en hızlı ve en evrensel yolu, animasyon fikirlerinizi kullanıcı ihtiyaçları ve hedeflerine göre ayarlamaktır. Bu, kullanıcıya hiçbir şekilde fayda sağlamadan yalnızca kendiniz için animasyon oluşturmamanızı sağlayacaktır.

Animasyonu Kullanıcı İhtiyaçlarına Göre Hizalama

Animasyon konseptleri belirli kullanıcı ihtiyaçlarına göre ayarlandığında, değerlerini ortaya çıkarmaya başlarlar. Bu aynı zamanda anlamsız, aşırı karmaşık animasyonları düşünmenizi de engeller. Özellikle bir animasyon izleyicileriniz için hiçbir değer sağlamıyorsa, herkesin zamanını ve çabasını boşa harcamaktan kaçının.

Animasyonun Temel İşlevleri

Animasyon aşağıdaki işlevlere sahiptir:

• kullanıcıları kendi ortamlarında yönlendirmek,
• daha derin bir netlik seviyesi sağlamak,
• kullanıcıya faydalı geri bildirim sağlamak,
• ekran gayrimenkulünün daha yaratıcı kullanımına izin verir (tuval üzerinde ve dışında),
• öğelerin hiyerarşisini güçlendirmek,
• kullanıcının odağını yönlendirmek,
• sonra ne yapılacağına dair ipucu,
• kullanıcıyı navigasyon bağlamları arasında sorunsuz bir şekilde taşımak,
• Ekrandaki öğelerin dizilişindeki değişiklikleri açıklamak,
• Kullanıcı girişini anında onaylayan görsel ipuçları sağlamak,
• bir markanın mesajını daha iyi iletmek,
• ekranın doğrudan manipülasyonu gibi görünen ve hissettiren olanaklar yaratın,
• Kullanımı teşvik eden ve benimsemeyi artıran iç organ estetiği ve çekiciliği yaratın.

Bu matris, kullanıcı araştırması geri bildiriminin animasyon işlevleriyle nasıl eşleştirileceğini gösterir:

“UX animasyonu, insanların hedeflerini tamamlamalarına yardımcı olmak için birçok yaygın kullanıcı ihtiyacını karşılama gücüne sahiptir. Bu matris, örnek kullanıcı araştırması geri bildirimini (üstte) animasyon işlevlerine (yan) hizalar.

Bu şekilde öncelik verildiğinde, animasyonun öncelikle UX'i geliştirmek için bir araç olabileceğini ve çekicilik yaratmanın yeni bir yolundan daha az olabileceğini gösteriyor."

— Mark Di Sciullo

Animasyonu UX İş Akışına Nasıl Entegre Edersiniz?

Aşağıda, animasyonu UX iş akışına entegre etmek için önerilen bir strateji yer almaktadır. Projeniz çevikse, bu yaklaşım bir sprint döngüsü süresi içinde gerçekleşmelidir.

Keşfet ve Keşfet

Yalnızca bir kez kitlenizi iyi anladığınızda ve tasarımınızın bu anlayışla eşleştiğini onayladığınızda, ekibinizle işbirliğine dayalı bir çabaya girerseniz. Bu nedenle, önce temeli atın.

• Araştırma Hedef kitleniz hakkında mevcut tüm bilgileri tüketin ve bunlara aşina olun. Bu, kişiler, müşteri yolculuk haritaları, kullanıcı araştırması, marka oluşturma yönergeleri, stil kılavuzları vb. gibi eserler olabilir.
• Hizala Animasyonunuzun belirli kullanıcı ihtiyaçlarına ve hedeflerine hitap ettiğinden emin olun. Mümkün olduğunda, önerilen animasyon işlev(ler)inizi belirli kullanıcı geri bildirimlerine göre hizalayın (yukarıdaki çizelgede gösterildiği gibi) ve bunun kullanıcının hedef(ler)ini tamamlama yeteneğini nasıl geliştireceğini gösterin.
• Keşfet Animasyon sergileyen çeşitli ilham kaynaklarını keşfetmek için zaman ayırın. Dribbble, Behance ve CodePen gibi birçok örnek bulabileceğiniz çok sayıda portföy web sitesi var.
• Geliştirme ekibiniz ve müşterinizle niyetlerinizi erkenden paylaşın. Hareket gerektiren bir çözüm düşündüğünüzü bilmelerini sağlayın. Fikirlerinizi kullanıcıların ihtiyaç ve hedeflerine göre araştırma ve hizalama çabanızın sonuçlarıyla kendinizi hazırlayın. Bunu tek başına yapmak daha zordur; geliştiricinizle birlikte çalışın. Teknoloji uzmanları neyin mümkün olduğunu genişletebilirler. Erken iletişim kurmak, bir fikrin erken vurulma şansını azaltacaktır.

Tasarım ve Storyboard

• Sketch Herhangi bir tasarım sürecinde olduğu gibi, başlamak için en iyi yer kağıt, beyaz tahta ve/veya bir çizim uygulamasıdır. Bu ortam, yaratıcı meyve sularının sınırsız, yinelemeli bir şekilde akmasını sağlar. İhtiyacın olacak:
  • bir kağıt veya defter (storyboard şablonları idealdir);
  • Beyaz tahta;
  • herhangi bir çizim programı veya uygulaması (SketchBook Pro, Mischief, Photoshop);
  • Kalem (stylus) ekranı veya kalem tablet kullanıyorsanız bonus puanlar.
• Storyboard Bazı düşünceleriniz ve fikirleriniz olduğunda, animasyonlarınızın temel durumlarının bir storyboard'unu oluşturun. Akışı tasavvur etmek için basit açıklamalara güvenin. Bu, fikirlerinizi sürecin başlarında başkalarıyla iletişim kurmanın etkili bir yoludur.
• Eskizleri ve storyboard'ları paylaşın , ekibinizden erken geri bildirim almak için harika araçlardır. Eskizlerinizi ve storyboard'larınızı paylaşmaktan çekinmeyin. Ekibinizin neyi oluşturmayı planladığınızı anlamasını sağlamak ve değerli işbirliğine dayalı içgörüler toplamak için harika araçlardır.
• Mevcut zamana dayanarak, neyin prototiplenmesi gerektiğine ve animasyonunuzun nasıl gözden geçirileceğine ve/veya kullanıcı tarafından nasıl test edileceğine karar verin . Daha sonra prototipinizi oluşturmak için uygun yaklaşımı seçmeniz gerekecek.

Prototipleme Animasyonu

Prototipler, siz kodlamaya fazla zaman harcamadan fikirlerinizi hızla harekete geçirir. UX perspektifinden, bir prototipin temel amacı, iyileştirmeler ve yinelemenin daha kolay ve daha az maliyetli olduğu tasarım sürecinin başlarında fikirlerinizi kullanıcıların önüne çıkarmaktır.

Prototip oluşturma animasyonuna yaklaşmanın iki ana yolu vardır. Spektrum, piyasadaki birçok uygulamadan birini kullanan son derece keşif amaçlı prototiplerden, bir üretim ortamında mümkün olanın en doğru temsilini sağlayan kodlanmış bir prototipe doğrudan atlamaya kadar uzanır.

Bir prototip uygulaması kullanma veya kodlanmış bir prototip oluşturma arasındaki seçim aşağıdaki gibidir:

• Etkileşimleri açıklamak için ne kadar aslına uygunluk gerekir?
• Ne kadar zaman mevcut? (Zaman eşittir maliyet. Yeni bir araç öğrenmek için zamanınız var mı?)
• Şu anda en rahat olduğunuz araçlar veya yaklaşımlar nelerdir?
• Hareket ne kadar karmaşık veya karmaşık?

Doğru yaklaşımı belirlemek için kendi kararınızı kullanın. Basit bir Photoshop zaman çizelgesi animasyonu kullanarak bir hareketi kolay ve hızlı bir şekilde iletebiliyorsanız, bu tam kodlanmış bir prototip kadar etkili olacaktır.

Prototipleme Başvuruları

Prototip oluşturma uygulamaları, bir arayüzde animasyon hakkında nasıl düşündüğümüzü kolaylaştırır. Her gün, tasarımcılara daha fazla araç sunuluyor. Bu araçlar, geçişler, dönüşümler ve aralar oluşturmaya yönelik özellikleri içerecek şekilde hızla gelişmektedir.

Seçtiğiniz uygulama, hareket konseptlerinin daha açıklayıcı olup olmadığına bağlı olacaktır. Ayrıca, bir prototipin ne kadar hızlı oluşturulması gerektiğini, nasıl gözden geçirileceğini, kullanıcılarla nasıl test edileceğini ve tasarımcının uygulama ile ilgili konfor düzeyini düşünün.

Aşağıda, UX animasyonu için popüler prototipleme uygulamalarının bir listesi bulunmaktadır:

• Adobe Photoshop Bir Photoshop tuvalinde başlayan kompozisyonlar, zaman çizelgesinin kullanılmasıyla kolayca kare animasyonuna dönüştürülebilir. Photoshop, mevcut kompozisyonların üzerinde hareket keşfi için çok kullanışlıdır.
• Adobe After Effects Bu araç, sınırsız yaratıcı keşif için bir güç merkezidir. Bu aracın aşırı kullanımının tehlikesi, mevcut ön uç teknolojileriyle inşa edilmesi mümkün olmayan bir şey yaratmanın çok kolay olmasıdır. Risk bir yana, After Effects'in bir UX iş akışına nasıl uyduğunu düşünmeye değer, çünkü bu araç, özellikle yeni olasılıkları keşfetmek ve hareketin sınırlarını zorlamak için birçok yaratıcı kullanıma sahiptir.
• Keynote Evet, Keynote. "Sihirli Hareket" özelliklerinden yararlanan kendi kendine oynayan bir sunum, kullanıcı arayüzü etkileşimini ve hareketini göstermenin hızlı bir yoludur. Thoughtbot, Keynote ile animasyon prototipleme konusunda harika bir genel bakışa sahiptir.
• Adobe Edge Animate Bu ortam, tasarımcıların ana kare benzeri animasyon kullanarak hareket UI kavramlarını keşfetmelerine olanak tanır. Oluşturulan çıktısı, birçok geliştiricinin bu araçla üretilen animasyonların üretime hazır olup olmadığı konusunda temkinli olmasını sağlayacak tescilli JavaScript kitaplıklarına dayanır.
• Axure 8 (beta) Axure'un bu heyecan verici yeni sürümü, birçok ilginç hareket hızı seçeneğiyle daha fazla animasyon deseni ekler. Axure, erken tel çerçeveleme çabalarınız sırasında hareket hakkında düşünmenizi sağlar. Animasyon esas olarak olaylar ( onPageLoad , OnClick , OnHover , OnMouseOver , vb.) aracılığıyla yapılır ve herhangi bir anahtar kare oluşturma içermez. Bununla birlikte, bir tasarımcının bir geliştiriciyle iletişim kurmasını kolaylaştıracak şekilde düşünmesini sağlar.
• InVision Bu yüksek düzeyde işbirliğine dayalı tarayıcı tabanlı uygulama, bir dizi animasyonlu geçiş ve hareket içerir. Ekran akışı prototipleme aracı (etkileşimler yoluyla bağlanan bir dizi ekran etrafında prototipler oluşturduğunuz), aşırı karmaşıklaşmadan tıklanabilir etkin noktaları hızlı bir şekilde ayarlamak için idealdir. Tüm hareketler, tıklama olaylarında veya sayfa yönlendirmelerinde gerçekleşir. Tasarımınızı herhangi bir cihazda kolayca önizleyin. Hatta kullanıcı çalışmalarınızı InVision içinde yürütebilmeniz için ücretsiz mobil kullanıcı testi özellikleri içerir. Daha fazla zaman çizelgesi tabanlı animasyon özelliği ekleme planları da var. Çok havalı.
• Flinto Mac için bu mobil uygulama prototipleme aracı, ekranları hızlı bir şekilde bağlamanıza ve animasyonlu geçişler uygulamanıza olanak tanır. Hareketi tam olarak elde etmek için ince ayarlanabilen birçok animasyon geçiş özelliğine sahiptir. Yeni ekranları eski ekranların üzerine sürükleyip bırakarak bu ekran akışı prototipleme aracında yineleme yapmak kolaydır.
• İlke Mobil uygulamalara ve ayrıca Mac'e yönelik bu prototip oluşturma aracı, animasyonlu geçişleri ana kareye bir zaman çizelgesini kullanmanıza olanak tanır.
• Proto.io Bu tarayıcı tabanlı uygulama, bazı gelişmiş animasyon yetenekleri içerir. Bir tasarımcı, "etkileşimler" ve "durumlar" kullanarak karmaşık hareketi prototipleyebilir ve hatta ana kare benzeri animasyonlar oluşturabilir.

Kodlanmış Prototipler

Teknik olarak daha eğimli tasarımcılar, prototip oluşturma sürecini başlatmak için işin peşini bırakabilir ve ön uç UI çerçevelerinde bulunan kitaplıklara atlayabilir. Aksi takdirde, sürecin bu kısmı bir geliştirici ile işbirliği gerektirecektir.

Standart kullanıma hazır hareket deseni kitaplıklarına güvenmek, muhtemelen çözüm araştırmanızı sınırlayabilir ve bu da mülayim sonuçlarla sonuçlanabilir. Aynı zamanda, neyin mümkün olduğunu düşünmemek risklidir ve hayal kırıklığı ve zaman kaybı yaratması garantilidir.

Kollarını sıvayan ve kodu derinlemesine araştıran bir UX tasarımcısı, ayrıntılar üzerinde daha fazla kontrol sahibi olacaktır. Ayrıca gerçekliğe bağlı kalacaklar. Bu, HTML ve CSS ve bazen JavaScript ile bir rahatlık seviyesi gerektirir. Tasarımcıların, modern bir ön uç geliştirme ortamında nasıl çalışacaklarını iyi kavramaları gerekecek. Bir tasarımcı ve geliştirici bu şekilde işbirliği yapabildiğinde, başarı olasılığı her zaman yüksektir.

Aşağıdakiler, UX prototiplerini kodlamak için kullanılabilen birçok UI çerçevesi ve kitaplığının küçük bir örneğidir.

• CSS3 Animasyonları Bu, başlamanın en temel yoludur. Kodlanmış prototipler oluşturmak isteyen bir UX animatörünün, bir web kullanıcı arayüzünün nasıl çalıştığının temellerini anlamak için CSS3 ve HTML5'te sağlam bir temele sahip olması gerekir.
• Motion UI, ZURB Başlangıçta ZURB's Foundation for Apps için olan bu Sass kitaplığı, CSS geçişlerini ve animasyonlarını hızla oluşturmanıza yardımcı olacaktır. Basit bir sınıf veya Sass karışımı ile animasyonlu öğeleri ve hareketleri hızla prototipleyin.
• Transit Bu basit CSS geçişleri ve dönüşümleri kitaplığı, jQuery'ye aşina olanlar içindir.
• Velocity Daha sağlam ve iyi belgelenmiş bir JavaScript kitaplığı olan bu kitaplık, özellikle hareket tasarımcılarına uyarlanmıştır.
• GSAP (GreenSock Animasyon Platformu) Bu tam teşekküllü animasyon platformu, JavaScript'in dokunabileceği her şeyi (CSS özellikleri, tuval kitaplığı nesneleri, SVG, genel nesneler vb.) canlandıracaktır. JavaScript animasyonları için Google tarafından önerilir.
• Ünlü Tam teşekküllü bir uygulama çerçevesi (esas olarak mobil için), Ünlü, bir 3D fizik animasyon motoruyla tamamen entegre, açık kaynaklı bir 3D düzen motoru üzerine inşa edilmiştir. Ünlü'nün arkasındaki fikir, tarayıcıların hiçbir zaman uygulamaları oluşturmak için yapılmadığıdır - oyunlar, uygulamaları oluşturmak için oluşturulmuştur. Pürüzsüz grafikler ve animasyon (60 FPS) istiyorsanız, Ünlü'nün DOM, tuval veya WebGL'de görüntü oluşturma yoluyla mümkün kıldığı GPU hızlandırmasına ihtiyacınız olacak.
• Framer Framer, bağımsız bir prototipleme çerçevesi ve kodlama ortamıdır. Photoshop ve Sketch ile bütünleşir. Üretime hazır kod üretmese de (ve JavaScript'ten CoffeeScript'e geçiş şüpheli), tasarımcıların gerçek gibi görünen prototipleri paylaşmasına yardımcı oluyor. Hareketli etkileşimlerin ve hareketin ince taneli kontrolünü destekleyerek, tasarımcıların bu etkileşimleri geliştiricilerle doğru bir şekilde iletmesine olanak tanır.
• React Facebook tarafından geliştirilen React, büyük, dinamik, veriye dayalı, üretime hazır kullanıcı arayüzleri oluşturmak için bir JavaScript kitaplığıdır.

Kullanıcılarla Test Et

Kullanıcılarla test etmek için temel süreç şu şekildedir:

1. Program Hedef kitlenizi temsil eden küçük bir katılımcı grubunu toplayın (beş katılımcı idealdir).
2. Testleri gerçekleştirin Kullanıcı testi oturumları, animasyonunuzun etkili olup olmadığını doğrulamak için idealdir. Katılımcıları, uygulamanızda gerçekleştirilecek tipik görevlerle çalıştırın. Animasyonunuzun deneyime yardımcı mı yoksa zarar mı verdiğini gözlemleyin. İdeal olarak, UX oturumları video ile çekilir, böylece daha sonra yönlendirilebilir ve gözden geçirilebilir. Oturumlarınızı uzaktan yürütüyorsanız, GoToMeeting ve WebEx gibi web konferansı uygulamalarında bulunan ekran kaydı özelliklerinden yararlanın.
3. Geri bildirimi gözden geçirin Kullanıcı testi oturumlarından toplanan içgörüler üzerinde düşünmek için zaman ayırın. İlk keşif aşamasındaki kullanıcı ihtiyaçlarının ve endişelerinin doğru bir şekilde ele alındığından emin olun.
4. Karar Verin Kullanıcı testi tamamlandıktan ve geri bildirim gözden geçirildikten sonra, daha fazla iyileştirme gerekip gerekmediğine veya üretime geçmeye hazır olduğunuza dair bilinçli bir değerlendirme yapabilirsiniz.

Son Notlar

Tasarımlarında hareketi dikkate alan UX tasarımcıları, neden ekstra çaba gerektiğini açıklamak, iletmek ve savunmak için kendilerini baskı altında bulacaklar.

Kitlenizi tanıyın ve niyetlerinizi takıma erkenden iletin. Animasyonu iş akışınıza sorunsuz bir şekilde entegre etmek için gereken desteği almanıza yardımcı olacak, kağıttan koda kadar günümüzde mevcut olan ve giderek artan yaklaşımlardan yararlanın.

UX animasyonunda incelik anahtardır. Kullanıcıların hedeflerine ulaşmalarına yardımcı olmaya odaklanmak her şeyden önemlidir.

Kaynaklar

• "UX Tasarımında İşlevsel Animasyon", Amit Daliot, Smashing Magazine Daliot, UX tasarımında animasyonun nasıl bir deneyim içinde netlik ve mantık oluşturmak için bir araç olduğuna dair birçok faydalı örnek de dahil olmak üzere bir genel bakış sunar.
• "Kullanıcı Arayüzü Bir Disney Animasyonu Değil", Sophie Paxton, Medium Paxton, yalnızca kullanıcının önüne çıkan animasyonların oluşturulmasından nasıl kaçınılacağı konusunda harika bilgiler sunuyor.
• Animate.css, Daniel Eden Projelerinizde kullanabileceğiniz bir sürü havalı, eğlenceli ve tarayıcılar arası animasyon.
• CodePen animasyon örnekleri CodePen'in UI animasyonlarından oluşan ilham verici oyun alanı, yeni konseptler oluşturmak veya sadece deney yapmak için parçalara ayrılabilir ve çatallanabilir.
• "SVG'yi CSS ile Canlandırma", Chris Coyier, CSS-Tricks Doğrudan HTML içinde satır içi SVG kodunu kullanmaya ve öğeleri CSS aracılığıyla canlandırmaya başlayın.
• “Modern Web Tasarımcısının İş Akışı” (video), Chris Coyier, CSS-Tricks Birkaç yaşında olmasına rağmen, bu hala modern bir ön uç iş akışının ilgili bir örneğidir.
• "Animasyon Örnekleri", react.rocks Bu galeri, animasyon için React'in gücünü gösterir.