Merancang UI Dasbor Mobile yang Intuitif: 4 Praktik Terbaik

Pada kuartal pertama tahun 2023, ponsel mobile menyumbang 58% dari traffic website global. Meskipun pengalaman pengguna mobile terus membaik dan pengguna menyelesaikan semakin banyak tugas di ponsel mereka, masih ada satu aktivitas di mana layar desktop memiliki keunggulan: menganalisis informasi kompleks pada dasbor.

Dasbor mobile sangat berharga bagi pengguna yang aktif yang perlu tetap terkini dengan intelijen berbasis data dan merespons informasi yang sensitif terhadap waktu dengan cepat. Sayangnya, banyak dasbor mobile adalah tiruan buruk dari aplikasi web desktop dan malah membuat frustrasi pelanggan alih-alih berfungsi sebagai alat visualisasi yang efektif yang berdiri sendiri.

Dasbor mobile mungkin tidak menawarkan fungsionalitas penuh dari rekan desktop-nya, tetapi masih bisa memberikan pengguna tampilan yang dapat dipindai dari data dan statistik utama untuk memungkinkan mereka membuat keputusan yang terinformasi. Ini juga dapat memberikan manajer dan eksekutif alat yang diperlukan untuk cepat menyetujui pesanan, kontrak, dan dokumen prosedur serta kebijakan.

Dalam artikel ini, saya menggali dari pengalaman saya merancang puluhan dasbor di berbagai industri termasuk asuransi, kesehatan, IT, dan pemulihan data untuk mengeksplorasi empat aspek fundamental dari desain dasbor responsif: navigasi, tabel dan grafik, desain tombol, dan status interaktif. Wawasan ini dapat membantu desainer menciptakan pengalaman mobile intuitif yang diharapkan pengguna.

Navigasi yang Mulus

Mari kita mulai dengan navigasi karena ini adalah cara pengguna akan mengenal dasbor Anda dan menemukan informasi yang mereka cari. Jika navigasi untuk dasbor mobile Anda canggung atau tidak teratur, atau bilah pencarian atau menu navigasi Anda tidak cocok untuk interaksi berbasis sentuhan, Anda kemungkinan besar akan membuat pengguna kecewa.

Prioritas visual adalah kunci. Dasbor responsif mobile harus mengkomunikasikan informasi dengan cepat dan memprioritaskannya dalam hierarki visual yang jelas. Praktik terbaik dalam desain dasbor adalah menggunakan prinsip pengungkapan bertahap untuk mengungkapkan informasi hanya ketika pengguna membutuhkannya.

Coinbase menawarkan contoh dasbor mobile yang efektif. Perbandingan antara versi desktop dan mobile mengungkapkan wawasan tambahan.

Perbandingan berdampingan antara desain dasbor desktop dan mobile menyoroti komponen efektif seperti menu hamburger dan jarak tombol.

Pertimbangkan ruang, gaya tombol, dan kesan pertama pengguna saat mengubah desain desktop menjadi rekan mobile-nya. (Coinbase) Dasbor mobile ini secara efektif menggunakan ruang untuk memprioritaskan opsi yang paling penting. Tombol-tombol penting dari panel kiri pada desktop menjadi bilah navigasi bawah pada mobile, standar untuk menu mobile karena posisinya jatuh ke dalam pola pemindaian halaman “Z” di mana perhatian pengguna cenderung mendarat.

Bilah navigasi atas mempertahankan fungsi kunci seperti pencarian dan pemberitahuan, serta menu hamburger yang dapat diketuk pengguna untuk lebih banyak opsi. Perlu dicatat bahwa Coinbase tidak hanya melipat semua elemen ke dalam menu hamburger. Sebaliknya, dasbor mobile memprioritaskan hal-hal penting pada tampilan pertama dan memungkinkan pengguna membuat pilihan awal sebelum layar baru dibuka untuk menawarkan pilihan yang lebih luas.

Strategi navigasi mobile ini memungkinkan pengguna untuk mengambil tindakan penting tetapi tidak membebani layar kecil dengan informasi dan opsi.

Tabel dan Grafik Responsif

Merancang tabel dan grafik mobile yang responsif bisa menjadi tantangan, tetapi dalam pengalaman saya, kepuasan pelanggan yang diberikan sangat berharga.

Secara umum, saya mendukung desain web responsif yang mengirimkan satu set kode ke semua perangkat tetapi menggunakan grid cair dan media queries untuk mengubah penampilan elemen berdasarkan ukuran dan orientasi perangkat. Metode umum dan efektif ini digunakan dalam dasbor mobile untuk mengubah header baris tabel menjadi header kolom dalam satu set kartu yang dapat digulir secara vertikal. Pendekatan ini menawarkan presentasi mobile yang elegan yang menghindari penyempitan sel, sambil memungkinkan pengguna untuk menelusuri data dalam jumlah besar dengan cepat.

Tampilan berdampingan dari tabel pada desktop dan mobile menunjukkan bagaimana kartu bertumpuk memungkinkan pengguna mengakses data saat bepergian dengan menggulir secara vertikal. Kartu bertumpuk adalah salah satu strategi untuk menampilkan tabel di mobile tanpa memberantakkan layar kecil.

Namun, kartu bertumpuk juga memiliki kekurangan. Misalnya, jika Anda ingin membandingkan daftar panjang perusahaan SaaS berdasarkan indikator kinerja utama seperti pendapatan tahunan yang berulang, nilai kontrak rata-rata, dan biaya akuisisi pelanggan. Menetapkan setiap perusahaan dengan kartunya sendiri berarti pengguna mungkin hanya dapat melihat satu atau dua indikator kinerja perusahaan pada satu waktu, yang dapat menyulitkan perbandingan (kecuali pengguna memiliki memori jangka pendek yang sangat baik). Namun, untuk kasus di mana pengguna tidak perlu membandingkan kolom, seperti ringkasan pesanan peralatan IT, tata letak vertikal bekerja dengan baik.

Tidak ada solusi satu ukuran yang cocok untuk semua: Konteks tabel data Anda dan bagaimana pengguna akan berinteraksi dengannya harus menentukan strategi mana yang Anda pilih.

Micha? Jarosz, seorang desainer UX yang berbasis di Warsawa, menguraikan beberapa pendekatan cerdas untuk merancang tabel data responsif, masing-masing dengan kelebihan dan kekurangan. Salah satu metode adalah apa yang dia sebut sebagai solusi “bergerak”, di mana hanya sebagian dari tabel atau grafik yang terlihat, dan pengguna harus menggeser secara horizontal untuk melihat apa yang tersembunyi. Hemat biaya dan mudah dikembangkan, pendekatan ini bisa bekerja dengan baik untuk tabel pendek dan lebar dan untuk menjaga konten tetap di atas lipatan, tetapi ini memecah apa yang bisa dilihat pengguna pada satu waktu, membuat perbandingan baris sulit dilakukan. (Lebih buruk lagi, dapat memiliki efek yang membingungkan.)

Steven Hoober, seorang konsultan desain UX mobile yang kritis terhadap tabel responsif, menulis dalam artikel untuk UXmatters bahwa menyederhanakan tabel dengan meninggalkan kolom yang tidak perlu, menggunakan singkatan dan ikon sebagai ganti teks, mengurangi ukuran font, dan menerapkan aturan penyelarasan untuk membedakan hierarki teks dalam kolom adalah semua strategi yang dapat menghemat ruang dan meningkatkan presentasi tabel. Bergantung pada kasus penggunaan, mengganti tabel dengan visualisasi data mungkin bahkan merupakan pendekatan terbaik.

Menemukan strategi terbaik memerlukan penilaian kebutuhan pengguna Anda, kolaborasi dengan pengembang yang berpengetahuan, dan kemungkinan percobaan dan kesalahan: Uji breakpoint di berbagai perangkat, lihat bagaimana tampilannya, dan iterasi hingga Anda menemukan titik manis.

Desain Tombol

Dapat dikatakan, salah satu tantangan terbesar dalam menciptakan dasbor mobile yang responsif adalah ukuran dan penataan tombol. Mengapa? Karena, berbeda dengan desktop, Anda menyentuhnya, bukan memilihnya dengan kursor atau perintah keyboard. Mereka perlu cukup besar dan berjauhan agar bisa diketuk dengan nyaman, dan, karena ruang layar yang terbatas, beberapa harus dilipat menjadi sub-menu atau bahkan disembunyikan.

Prinsip desain tombol standar harus diterapkan pada desain mobile Anda. Saya cenderung membagi desain tombol menjadi dua prinsip utama: Anda harus menyajikan tombol dalam berbagai gaya (ukuran, warna, dan bentuk) yang menunjukkan pentingnya relatif mereka melalui petunjuk visual; dan label teks pada tombol harus informatif dan sesuai dengan konteks penggunaannya.

Sebuah contoh dari desain tombol yang efektif dapat ditemukan pada aplikasi mobile seperti Coinbase. Perbandingan antara desktop dan aplikasi mobile menyoroti pendekatan efektif untuk ukuran dan jarak tombol, yang memfasilitasi interaksi yang mudah dan nyaman untuk pengguna mobile.

Dengan memahami dan menerapkan prinsip-prinsip ini, Anda dapat merancang dasbor mobile yang tidak hanya menarik secara visual tetapi juga fungsional dan mudah digunakan.