Life in Motion: Panduan untuk Menganimasikan Visualisasi Data Seluler

Diterbitkan: 2022-07-22

Saat ini, dengan teknologi yang mendorong pengumpulan dan produksi data dalam jumlah besar, relatif mudah untuk mendapatkan informasi yang dapat memandu keputusan harian Anda. Aplikasi seluler memanfaatkan detak jantung dan data biometrik lainnya untuk melacak tujuan kesehatan dan olahraga. Mereka menyediakan data real-time tentang investasi, pengeluaran pribadi, dan penganggaran. Mereka bahkan dapat membantu orang tua menilai pola makan dan tidur bayi mereka.

Untuk memahami volume data yang tersedia, lihat saja laporan tahunan desainer Nicholas Felton yang dibuat dari data pribadinya sendiri. Dengan begitu banyak informasi di ujung jari Anda, bagian yang sulit adalah memahaminya.

Di sinilah animasi dapat membantu. Menganimasikan data membuatnya lebih mudah dipahami, menarik, dan berguna, terutama di layar kecil perangkat seluler. Dengan animasi, angka menjadi lebih mudah dicerna dan tren, pola, dan narasi yang diabaikan menjadi jelas. Interaktivitas waktu nyata dengan visual ini mendorong keterlibatan dan memungkinkan pengguna menjelajahi data lebih dalam.

Pada saat yang sama, animasi yang berlebihan atau salah arah dapat mengalahkan tujuannya, mengaburkan alih-alih mencerahkan wawasan. Saat menganimasikan visualisasi data seluler, desainer harus menggunakan prinsip desain gerak—dan menghindari jebakan umum.

Manfaat Menganimasikan Visualisasi Data Seluler

Animasi bukan hanya hiasan visualisasi data. Gerakan menawarkan segudang manfaat, dan itu harus diterapkan dengan tujuan mencapai hasil tertentu.

Membantu pengguna memahami tren dan perubahan adalah keuntungan utama menggunakan gerakan dalam visualisasi data. Mendiang akademisi Hans Rosling dikenal karena animasinya di mana ia memplot data umur dan pendapatan untuk menunjukkan perubahan kesehatan dan kekayaan selama puluhan negara selama beberapa dekade. Ini adalah animasi menawan yang menjelaskan tren dari waktu ke waktu dan melawan persepsi umum tentang perkembangan global.

Sebuah klip dari "200 Negara Hans Rosling, 200 Tahun, 4 Menit - Kegembiraan Statistik" melalui BBC Four.

Penelitian menunjukkan bahwa animasi grafik statis dapat meningkatkan persepsi grafis dan meningkatkan minat pemirsa. Alih-alih menampilkan bagan sekaligus, misalnya, elemen dapat masuk dengan kecepatan yang berbeda-beda agar tidak membanjiri pemirsa dengan terlalu banyak informasi. Gerakan "membantu untuk menunjukkan atau meningkatkan hierarki visual elemen, atau orientasi sumbu dan bagaimana data ditampilkan," kata Tetiana Donska, desainer UI/UX yang berbasis di London di jaringan Toptal.

Animasi juga membantu desainer memanfaatkan layar perangkat seluler secara efisien. “Gerakan dalam visualisasi data membantu menciptakan kesadaran akan transisi antara keadaan yang berbeda dan memberikan lebih banyak informasi tanpa mengacaukan pengalaman pengguna,” kata Donska. Interaktivitas real-time dapat lebih menjaga antarmuka yang bersih karena pengguna dapat menjelajahi data melalui gerakan seperti mengetuk, menyeret, menggulir, dan memperbesar. Misalnya, pengguna dapat menggeser jari di sepanjang sumbu untuk mengungkapkan nilai yang berbeda atau mengetuk untuk mengungkap angka.

Menggabungkan pembaruan waktu nyata ke dalam visualisasi data animasi dapat membuatnya semakin menarik bagi pengguna. Olajide Akinpelu, seorang desainer Toptal UI/UX yang berbasis di Nigeria, mengatakan bahwa melihat pembaruan data di depan mata kita membantu kognisi manusia. Pengguna yang menyegarkan data statis akan lebih sulit mendeteksi perubahan; gerakan real-time membantu mereka mengidentifikasi wawasan yang mungkin mereka lewatkan.

Tentu saja, membuat transisi dan gerakan tampak alami tanpa mengganggu pengguna lebih mudah diucapkan daripada dilakukan.

Teknik Animasi dan Visualisasi Data untuk Seluler

Visualisasi data tidak terbatas pada kumpulan data kompleks yang diwakili oleh bagan dan grafik tradisional. Bahkan tombol "suka" yang menghitung sentimen pengguna pada aplikasi sosial adalah cara untuk memvisualisasikan data.

Terlepas dari kerumitannya, seperangkat prinsip dan teknik umum ikut berperan saat menganimasikan visualisasi data. Empat teknik yang kami fokuskan dalam artikel ini—perubahan nilai; easing, offset, dan delay; mengasuh anak; dan zooming—bertujuan untuk mengilhami gerakan di lingkungan UX dengan kealamian gerakan di dunia nyata, sesuai dengan harapan bawaan pengguna dan rasa kontinuitas dan narasi. Tujuannya, bagaimanapun, adalah untuk membantu pengguna memahami data abstrak, bukan hanya untuk melibatkan atau menyenangkan mereka.

Perubahan Nilai

Saat menampilkan perubahan nilai dengan animasi, alih-alih menampilkan angka statis, penghitung numerik akan berdetak atau bilah naik sebelum mendarat di angka akhir. Ini bisa menjadi cara yang ampuh untuk menyampaikan kemajuan atau pertumbuhan—atau kekurangannya. Ini juga menandakan bahwa data dapat berubah, dan dalam beberapa kasus, nilai animasi menunjukkan interaktivitas.

Dasbor skor kredit yang bertuliskan "Top of the Charts." Meteran melingkar dianimasikan untuk naik dari 300 menjadi 850, yang merupakan nilai kredit pengguna saat ini. Saat jumlahnya meningkat, mereka berubah dari merah menjadi hijau. — Perubahan nilai memungkinkan pengguna untuk melihat dampak dari perilaku mereka. Asiwal yang keras

Visualisasi perubahan nilai lazim di seluruh lanskap seluler, termasuk di aplikasi kebugaran, pendidikan, dan keuangan. Dalam aplikasi pembelajaran bahasa, misalnya, bilah mungkin naik secara bertahap hingga mencapai skor akhir dalam ujian. Perubahan nilai menunjukkan kemajuan dan dapat memberi pengguna rasa pencapaian, mendorong mereka untuk melanjutkan jalur pembelajaran.

Menerapkan perubahan nilai ke garis dalam bagan adalah cara lain untuk menunjukkan perubahan dari waktu ke waktu. Dalam diagram batang yang menunjukkan produk domestik bruto (PDB) berbagai negara, misalnya, gerakan dapat mengungkapkan lintasan ekonomi nasional relatif satu sama lain. Visual seperti itu disebut balapan diagram batang.

Easing, Offset, dan Delay

Di dunia fisik, sebuah objek tidak dapat secara instan bergerak dari nol hingga 20 mph. Namun, di dunia digital, Anda dapat membuat gerakan tanpa akselerasi atau deselerasi. Tapi itu tidak berarti Anda harus. Bagi mata manusia, gerakan seperti itu tampak tidak wajar, oleh karena itu memberi elemen grafis kecepatan masuk dan keluar yang alami—dikenal sebagai easing adalah hal yang bermanfaat.

Menyeimbangkan pengenalan elemen UI yang berbeda dan menunda kecepatannya dapat memberi sinyal lebih lanjut kepada pengguna bahwa variabel berbeda sedang ditampilkan, dan ini dapat membantu membangun hierarki di antara mereka. Dalam aplikasi perdagangan saham, misalnya, nilai saham pengguna mungkin muncul pertama kali diikuti oleh indeks umum. Offset dan delay memudahkan pengguna untuk memahami angka dan grafik daripada jika disajikan sekaligus.

Animasi yang menampilkan dasbor berbeda di aplikasi keuangan pribadi. Dasbor pertama menunjukkan saldo total pengguna, jumlah yang dibelanjakan per hari, dan diagram lingkaran yang menyoroti satu kategori ("Hiburan") sehubungan dengan total pengeluaran. Layar berikutnya menunjukkan penawaran yang sedang tren dan pembelian saham yang direkomendasikan. Dasbor ketiga menunjukkan total pengeluaran dan pengeluaran bulanan pengguna dalam tiga kategori utama: sewa rumah, pakaian, dan bahan makanan. Grafik batang menunjukkan persentase total pengeluaran untuk setiap kategori, dengan persentase yang terungkap pada kecepatan yang berbeda. — Dalam animasi keuangan pribadi ini, elemen seperti kategori dan persentase anggaran bulanan diperkenalkan dengan kecepatan berbeda untuk memberi pengguna pemahaman yang lebih jelas tentang pengeluaran mereka. thrc.eth

Mengasuh anak

Pengasuhan menciptakan hubungan antar komponen UI. Saat properti (seperti posisi, skala, atau warna) di elemen induk berubah, properti di elemen turunan berubah. Misalnya, pada bagan garis, jika titik pada garis adalah induknya, saat pengguna menyeret titik tersebut, mereka dapat melihat nilai (objek turunan) berubah.

Mengasuh anak adalah cara yang efektif untuk meningkatkan interaktivitas dan menciptakan hierarki.

Layar ponsel animasi yang bertuliskan "Bagaimana perjalanan Anda?" di atas. Di tengah layar adalah wajah karakter. Di bawah ini adalah penggeser yang, ketika dipindahkan, mengubah ekspresi karakter dan jawaban atas pertanyaan ("Senang", "Luar Biasa", "Oke", "Sedih", atau "Marah"). — Saat pengguna menilai perjalanan mereka dengan penggeser (objek induk), ekspresi karakter (objek anak) berubah. Sachin Daso

Memperbesar

Zooming memungkinkan pengguna untuk dengan mudah beralih dari pandangan mata burung ke data yang lebih terperinci. Ini bisa menjadi teknik yang berguna saat menyajikan kumpulan data besar, jenis yang biasanya dapat dilihat di desktop. Aplikasi pelacakan stok, misalnya, dapat memuat tampilan mingguan harga untuk stok tertentu dan memungkinkan pengguna memperbesar atau memperkecil untuk menampilkan data harian atau tahunan.

Salah satu bentuk visualisasi data yang paling umum adalah peta, yang digunakan secara luas di seluruh aplikasi kebugaran, berbagi sepeda, dan aplikasi ride-hailing. Zooming adalah alat penting dalam konteks ini karena batas-batas layar ponsel sangat membatasi apa yang dapat disajikan dalam satu visual.

Aplikasi kebugaran animasi yang menampilkan dasbor pengguna. Saat "bersepeda" diketuk, layar beralih ke peta dan memperbesar titik yang mewakili pengguna, yang bergerak di sepanjang rute. Di bawah peta adalah informasi detak jantung, pengatur waktu latihan, dan pelacak untuk bersepeda jarak jauh. — Pengguna dapat memperbesar untuk melihat rute latihan terperinci mereka di aplikasi kebugaran ini. Rizal Ramadhan

Jebakan Desain Gerak yang Harus Dihindari

Edward Tufte, pria yang secara harfiah menulis buku tentang visualisasi data modern, memiliki pepatah sederhana: "Di atas segalanya, tunjukkan data."

Fokus menyampaikan informasi. Atribut seperti warna, bentuk, dan gerakan hanya boleh digunakan untuk meningkatkan pemahaman data. Elemen visual yang asing—atau “sampah grafik” seperti yang disebut Tufte—mengurangi tujuan ini.

Di perangkat seluler, di mana pengguna layar mungkin rentan terhadap gangguan, terlalu banyak bagian yang bergerak dalam visualisasi data dapat membuat Anda kewalahan.

“Dengan seluler, Anda sudah memiliki faktor bentuk kecil yang menuntut fokus,” kata desainer veteran Darrell Estabrook, yang bergabung dengan jaringan Toptal pada 2019. Untuk alur kerja seluler apa pun, tanpa langkah-langkah terpisah yang dirancang dengan baik, “jenis pengguna menjadi serba salah.”

Estabrook menambahkan: “Untuk semua visualisasi data, Anda harus bertanya, informasi apa yang Anda berikan kepada pengguna sehingga mereka dapat membuat keputusan selanjutnya … untuk menekan tombol atau menulis email atau menggali lebih dalam. Apa yang perlu Anda lakukan untuk memberikan [informasi] itu kepada mereka?”

Anda dapat merancang visualisasi data seluler yang terfokus dan efektif dengan menghindari jebakan berikut:

Visual intensif sumber daya yang tidak menambah banyak nilai

Perenderan gerakan dalam visual dapat menghabiskan banyak sumber daya di bagian belakang dan dapat berdampak negatif pada kinerja dan pengalaman pengguna di bagian depan. Kumpulan data besar atau data yang memerlukan pengkodean ekstensif meningkatkan risiko ini. Sebelum menempatkan sumber daya untuk membangun visual seperti itu, tim desain dan klien harus jelas tentang hasil yang diinginkan—dan itu akan sepadan dengan usaha.

Animasi Mencolok atau Berlebihan

Visualisasi data animasi harus mendukung tujuan aplikasi. Aplikasi pembelajaran bahasa mungkin menggunakan gerakan untuk menekankan kemajuan pengguna, sementara aplikasi investasi mungkin secara halus menyoroti data yang dapat ditindaklanjuti. Terlepas dari sifat aplikasinya, bagaimanapun, dalam banyak kasus desainer harus menghindari animasi yang mencolok, seperti confetti yang jatuh atau kembang api. Mereka tidak hanya berisiko mempermainkan visual, yang dapat menyebabkan keterlibatan yang tidak sehat dengan suatu aplikasi, tetapi juga dapat mengaburkan atau membesar-besarkan apa yang sebenarnya disampaikan oleh data.

Visual yang Terlalu Interaktif

Bekerja dengan data memerlukan tingkat presisi, dan pengguna akan membutuhkan porsi yang layak dari layar ponsel cerdas mereka—7 hingga 10 mm umumnya dianggap sebagai praktik terbaik—untuk berhasil menjalankan gerakan. Terlalu banyak interaktivitas dapat terbukti tidak praktis dan membuat frustrasi. Ini bermanfaat untuk memprioritaskan satu tindakan pada satu waktu.

Gaya Tidak Konsisten

Visualisasi data harus menyatu dengan keseluruhan gaya dan fungsionalitas aplikasi, sesuatu yang dirujuk Apple dalam Pedoman Antarmuka Manusia sebagai integritas estetika.

Menurut Akinpelu, desainer UX/UI yang berbasis di Nigeria, mempertahankan konsistensi gaya "dalam jenis transisi yang Anda gunakan, jenis animasi, perpaduan warna" membantu pengguna menavigasi kumpulan data.

Daftar periksa berjudul "Visualisasi Data Efektif Harus" dengan empat item dicentang: "Memiliki tujuan yang jelas," "Sesuai dengan tujuan aplikasi," "Prioritaskan satu tindakan utama pada satu waktu," dan "Pertahankan transisi, animasi, dan warna yang konsisten ." — Hindari jebakan umum dalam menganimasikan data dengan praktik terbaik ini.

Menjaga Kecepatan Dengan Data yang Melonjak

Data telah menjadi perlengkapan dalam kehidupan kita, mulai dari pekerjaan dan sekolah hingga kesehatan dan keuangan. Dengan smartphone yang semakin canggih dan penyebaran konektivitas 5G, volume data—dan potensi penerapannya—pasti akan tumbuh juga.

Animasi dapat menjadi alat penting dalam membantu orang memahami semua informasi ini. Motion memudahkan pengguna untuk memahami metrik, tren, dan hubungan utama. Namun, seperti fitur UX lainnya, animasi dapat digunakan secara berlebihan atau disalahgunakan, yang pada akhirnya dapat membuat data menjadi kurang dapat dipahami. Dengan menggunakan prinsip dan teknik desain gerak, desainer dapat membuat visualisasi data seluler animasi yang menarik dan berwawasan luas.

Bacaan Lebih Lanjut di Blog Desain Toptal

Menarik dan Bergerak: Panduan untuk Prinsip Desain Gerak
Dampak Meluasnya Industri Desain Gerak
Puaskan Pengguna Dengan Praktik Terbaik Desain Aplikasi Seluler Ini