Life in Motion: Mobil Veri Görselleştirmelerini Canlandırma Kılavuzu

Bu günlerde, teknolojinin büyük miktarda verinin toplanmasını ve üretilmesini yönlendirdiği günümüzde, günlük kararlarınızı yönlendirebilecek bilgileri elde etmek nispeten kolay. Mobil uygulamalar, sağlık ve egzersiz hedeflerini izlemek için kalp atış hızı ve diğer biyometrik verilerden yararlanır. Yatırımlar, kişisel harcamalar ve bütçeleme hakkında gerçek zamanlı veriler sağlarlar. Hatta ebeveynlerin yeni doğan bebeklerinin beslenme ve uyku düzenini değerlendirmelerine yardımcı olabilirler.

Mevcut veri hacmini kavramak için tasarımcı Nicholas Felton'ın kendi kişisel verilerinden oluşturduğu yıllık raporlarından başkasına bakmayın. Parmaklarınızın ucunda çok fazla bilgi varken, zor kısım onu ​​anlamlandırmaktır.

Animasyonun yardımcı olabileceği yer burasıdır. Animasyon verileri, özellikle mobil cihazların küçük ekranlarında daha anlaşılır, ilgi çekici ve kullanışlı hale getirir. Animasyon ile sayıların sindirilmesi daha kolay hale gelir ve aksi halde gözden kaçan eğilimler, modeller ve anlatılar görünür hale gelir. Bu görsellerle gerçek zamanlı etkileşim, etkileşimi artırır ve kullanıcıların verileri daha derinlemesine keşfetmesine olanak tanır.

Aynı zamanda, aşırı veya yanlış yönlendirilmiş animasyon, içgörüleri aydınlatmak yerine karartarak amacını bozabilir. Tasarımcılar, mobil veri görselleştirmelerini canlandırırken hareket tasarımı ilkelerini kullanmalı ve yaygın tuzaklardan kaçınmalıdır.

Mobil Veri Görselleştirmelerini Canlandırmanın Faydaları

Animasyon, veri görselleştirmelerinde yalnızca bir süsleme değildir. Hareket sayısız fayda sağlar ve belirli bir sonuca ulaşmak amacıyla uygulanmalıdır.

Kullanıcıların eğilimleri ve değişiklikleri algılamasına yardımcı olmak, veri görselleştirmelerinde hareket kullanmanın önemli bir avantajıdır. Geç akademisyen Hans Rosling, onlarca ülkede sağlık ve zenginlikteki değişiklikleri göstermek için yaşam süresi ve gelir verilerini çizdiği bir animasyonla tanınır. Zaman içindeki eğilimleri netleştiren ve küresel kalkınmayla ilgili yaygın algıları ortadan kaldıran büyüleyici bir animasyon.

Araştırmalar, statik grafikleri canlandırmanın grafik algısını iyileştirebileceğini ve izleyicinin ilgisini artırabileceğini gösteriyor. Örneğin, bir grafiğin tümünü aynı anda görüntülemek yerine, öğeler izleyiciyi çok fazla bilgi ile boğmamak için değişen hızlarda girebilir. Toptal ağındaki Londra merkezli UI/UX tasarımcısı Tetiana Donska, hareketler "öğelerin görsel hiyerarşisini veya eksenlerin yönünü ve verilerin nasıl görüntülendiğini göstermeye veya geliştirmeye yardımcı oluyor" diyor.

Animasyon ayrıca tasarımcıların mobil cihaz ekranlarını verimli kullanmalarına yardımcı olur. Donska, "Veri görselleştirmelerindeki hareket, farklı durumlar arasındaki geçişler konusunda farkındalık yaratılmasına yardımcı olur ve kullanıcı deneyimini karmaşıklaştırmadan daha fazla bilgi sağlar" diyor. Kullanıcılar dokunma, sürükleme, kaydırma ve yakınlaştırma gibi hareketlerle verileri keşfedebildiğinden, gerçek zamanlı etkileşim daha temiz bir arayüz sağlayabilir. Örneğin, kullanıcılar farklı değerleri ortaya çıkarmak için bir eksen boyunca parmağını kaydırabilir veya sayıları ortaya çıkarmak için dokunabilir.

Gerçek zamanlı güncellemeleri animasyonlu veri görselleştirmelerine dahil etmek, onları kullanıcılar için daha da çekici hale getirebilir. Nijerya merkezli Toptal UI/UX tasarımcısı Olajide Akinpelu, veri güncellemesini gözlerimizin önünde görmenin insan bilişine yardımcı olduğunu söylüyor. Statik verileri yenileyen bir kullanıcının değişiklikleri algılaması daha zor olacaktır; gerçek zamanlı hareket, aksi takdirde kaçırabilecekleri bilgileri belirlemelerine yardımcı olur.

Elbette, kullanıcının dikkatini dağıtmadan geçişleri ve hareketleri doğal hale getirmek, söylemekten daha kolaydır.

Mobil için Animasyon ve Veri Görselleştirme Teknikleri

Veri görselleştirme, geleneksel çizelgeler ve grafiklerle temsil edilen karmaşık veri kümeleriyle sınırlı değildir. Bir sosyal uygulamada kullanıcı duyarlılığını belirleyen bir "beğen" düğmesi bile verileri görselleştirmenin bir yoludur.

Karmaşıklıktan bağımsız olarak, veri görselleştirmelerini canlandırırken ortak bir dizi ilke ve teknik devreye girer. Bu makalede odaklandığımız dört teknik—değer değişimi; yumuşatma, dengeleme ve gecikme; ebeveynlik; ve yakınlaştırma—kullanıcıların doğuştan gelen beklentilerine ve süreklilik ve anlatı hislerine uygun olarak UX ortamındaki hareketi gerçek dünyadaki hareketin doğallığıyla doldurmayı amaçlar. Sonuçta amaç, kullanıcıların soyut verileri anlamalarına yardımcı olmak, yalnızca onları meşgul etmek veya memnun etmek değil.

Değer Değişimi

Değer değişikliklerini animasyonla gösterirken, statik bir sayı görüntülemek yerine, nihai bir rakama inmeden önce sayısal bir sayaç tıklanır veya bir çubuk yükselir. Bu, ilerlemeyi veya büyümeyi veya bunların eksikliğini aktarmanın güçlü bir yolu olabilir. Ayrıca verilerin değişebileceğini ve bazı durumlarda değerlerin canlandırılması etkileşimi gösterir.

Fitness, eğitim ve finans uygulamaları dahil olmak üzere mobil ortamda değer değişikliği görselleştirmeleri yaygındır. Örneğin bir dil öğrenme uygulamasında, bir testte nihai puana ulaşana kadar bir çıta kademeli olarak yükselebilir. Değer değişikliği ilerlemeyi gösterir ve kullanıcıya bir başarı hissi vererek onları bir öğrenme yoluna devam etmeye teşvik edebilir.

Bir grafikteki çizgilere değer değişikliği uygulamak, zaman içindeki değişiklikleri göstermenin başka bir yoludur. Örneğin, farklı ülkelerin gayri safi yurtiçi hasılasını (GSYİH) gösteren bir çubuk grafikte, hareket, ulusal ekonomilerin birbirine göre yörüngelerini ortaya çıkarabilir. Bu tür görsellere çubuk grafik yarışları denir.

Yavaşlama, Ofset ve Gecikme

Fiziksel dünyada, bir nesne anında sıfırdan 20 mil/saat hıza çıkamaz. Ancak dijital dünyada hızlanma veya yavaşlama olmadan hareket yaratabilirsiniz. Ama bu yapman gerektiği anlamına gelmez. İnsan gözüne, bu tür hareketler doğal görünmüyor, bu nedenle grafik öğelere doğal giriş ve çıkış hızları vermek faydalıdır - bu hızlanma olarak bilinir.

Farklı UI öğelerinin girişini dengelemek ve hızlarını geciktirmek, kullanıcılara farklı değişkenlerin gösterildiğine dair daha fazla sinyal verebilir ve bunlar arasında bir hiyerarşi kurulmasına yardımcı olabilir. Örneğin bir hisse senedi alım satım uygulamasında, bir kullanıcının hisse senetlerinin değeri önce genel endekslerinkiler tarafından takip edilebilir. Ofset ve gecikme, kullanıcıların sayıları ve çizelgeleri bir kerede sunulmasından daha kolay anlamalarını sağlar.

ebeveynlik

Ebeveynlik, UI bileşenleri arasında ilişkiler oluşturur. Üst öğedeki bir özellik (konum, ölçek veya renk gibi) değiştiğinde, alt öğedeki bir özellik değişir. Örneğin, bir çizgi grafiğinde, bir çizgi üzerindeki bir nokta üst öğe ise, kullanıcı noktayı sürükledikçe değerin (alt nesne) değiştiğini görebilir.

Ebeveynlik, etkileşimi artırmanın ve hiyerarşi oluşturmanın etkili bir yoludur.

yakınlaştırma

Yakınlaştırma, kullanıcıların kuş bakışı veri görünümünden daha ayrıntılı bir görünüme kolayca geçmelerini sağlar. Genellikle masaüstünde görüntülenebilecek türden büyük veri kümelerini sunarken yararlı bir teknik olabilir. Örneğin bir hisse senedi izleme uygulaması, belirli bir hisse senedi için haftalık fiyat görünümünü yükleyebilir ve kullanıcıların günlük veya yıllık verileri ortaya çıkarmak için yakınlaştırma veya uzaklaştırma yapmasına izin verebilir.

En yaygın veri görselleştirme biçimlerinden biri, fitness, bisiklet paylaşımı ve araç çağırma uygulamalarında yaygın olarak kullanılan haritalardır. Yakınlaştırma, mobil ekranın sınırları tek bir görselde sunulabilecekleri büyük ölçüde kısıtladığı için bu bağlamda kritik bir araçtır.

Kaçınılması Gereken Hareket Tasarımı Tuzakları

Kelimenin tam anlamıyla modern veri görselleştirme kitabını yazan adam olan Edward Tufte'nin basit bir özdeyişi vardı: "Her şeyden önce, verileri gösterin."

Bilgi aktarmaya odaklanın. Renk, şekil ve hareket gibi nitelikler yalnızca verilerin daha iyi anlaşılması için kullanılmalıdır. Konu dışı görsel öğeler veya Tufte'nin deyimiyle "grafik ıvır zıvırı" bu amaçtan uzaklaşır.

Ekran kullanıcılarının dikkatlerinin dağılmaya eğilimli olabileceği mobil cihazlarda, bir veri görselleştirmesinde çok fazla hareketli parça bunaltıcı olabilir.

Toptal'ın ağına 2019'da katılan deneyimli tasarımcı Darrell Estabrook, "Mobil ile zaten odaklanma gerektiren küçük bir form faktörünüz var" diyor. İyi tasarlanmış, ayrı adımlar olmadan herhangi bir mobil iş akışı için "kullanıcı biraz ters gidiyor."

Estabrook şunları ekliyor: “Tüm veri görselleştirmeleri için, bir sonraki kararı verebilmeleri için kullanıcıya hangi bilgileri verdiğinizi sormalısınız… bir düğmeye basmak veya bir e-posta yazmak veya daha derine inmek. Bu [bilgiyi] onlara sağlamak için ne yapmanız gerekiyor?”

Bu tuzaklardan kaçınarak odaklı ve etkili mobil veri görselleştirmeleri tasarlayabilirsiniz:

Fazla Değer Katmayan Kaynak Yoğun Görseller

Görsellerde hareket oluşturma, arka uçta kaynak açısından yoğun olabilir ve ön uçta performansı ve kullanıcı deneyimini olumsuz etkileyebilir. Büyük veri kümeleri veya kapsamlı kodlama gerektiren veriler bu riski artırır. Kaynakları bu tür görseller oluşturmaya koymadan önce, tasarım ekipleri ve müşteriler istenen sonuç konusunda net olmalıdır ve bu çabaya değecektir.

Gösterişli veya Gereksiz Animasyon

Animasyonlu veri görselleştirmeleri, bir uygulamanın amacını desteklemelidir. Bir dil öğrenme uygulaması, kullanıcıların ilerlemesini vurgulamak için hareketi kullanabilirken, bir yatırım uygulaması, eyleme dönüştürülebilir verileri ustaca vurgulayabilir. Bununla birlikte, uygulamanın doğası ne olursa olsun, çoğu durumda tasarımcılar düşen konfeti veya havai fişek gibi gösterişli animasyonlardan kaçınmalıdır. Yalnızca bir uygulamayla sağlıksız etkileşime yol açabilecek oyunlaştırma görsellerini riske atmakla kalmaz, aynı zamanda verilerin gerçekte ne ilettiğini gizleyebilir veya abartabilirler.

Aşırı Etkileşimli Görseller

Verilerle çalışmak bir dereceye kadar hassasiyet gerektirir ve kullanıcıların hareketleri başarılı bir şekilde yürütmek için akıllı telefon ekranlarının uygun bir bölümüne (7 ila 10 mm genellikle en iyi uygulama olarak kabul edilir) ihtiyaçları olacaktır. Çok fazla etkileşim hantal ve sinir bozucu olabilir. Bir seferde bir eyleme öncelik vermek faydalıdır.

tutarsız stil

Veri görselleştirmeleri, bir uygulamanın genel stili ve işlevselliği ile uyumlu olmalıdır; Apple'ın İnsan Arayüzü Yönergelerinde estetik bütünlük olarak adlandırdığı bir şey.

Nijerya merkezli UX/UI tasarımcısı Akinpelu'ya göre, "kullandığınız geçiş türünde, animasyon türünde, renk karışımında" stilistik tutarlılığı korumak, kullanıcıların veri kümelerinde gezinmesine yardımcı oluyor.

Artan Verilere Ayak uydurmak

Veriler, işten ve okuldan sağlık ve finansa kadar hayatımızın demirbaşları haline geldi. Her zamankinden daha gelişmiş akıllı telefonlar ve 5G bağlantısının yaygınlaşmasıyla, veri hacmi ve bunu uygulama potansiyeli de kesinlikle büyüyecek.

Animasyon, insanların tüm bu bilgileri anlamlandırmasına yardımcı olan önemli bir araç olabilir. Hareket, kullanıcıların temel ölçümleri, eğilimleri ve ilişkileri anlamasını kolaylaştırır. Bununla birlikte, herhangi bir UX özelliğinde olduğu gibi, animasyon aşırı veya yanlış kullanılabilir ve bu da sonuçta verileri daha az anlaşılır hale getirebilir. Tasarımcılar, hareket tasarımı ilkelerini ve tekniklerini kullanarak ilgi çekici ve anlayışlı animasyonlu mobil veri görselleştirmeleri oluşturabilir.

Toptal Tasarım Blogunda Daha Fazla Okuma

• Zorlayıcı ve Hareketli: Hareket Tasarımı İlkelerine Yönelik Bir Kılavuz
• Hareket Tasarımı Endüstrisinin Genişleyen Etkisi
• Kullanıcıları Bu Mobil Uygulama Tasarımı En İyi Uygulamalarıyla Memnun Edin