Praktik Terbaik Desain UI untuk Kemampuan Pemindaian yang Lebih Baik

Desainer produk sering mengomunikasikan banyak informasi dalam waktu singkat. Mereka yang memahami istilah "scannability," pola pelacakan mata umum, dan prinsip-prinsip desain modern lebih siap untuk membuat konten yang mudah dikonsumsi dan "UI yang lengket."

Setiap hari, internet berkembang dengan aplikasi baru, situs web, artikel, dan banyak lagi. Menjadi semakin sulit untuk menarik perhatian pengguna yang kelebihan informasi yang merasa sulit untuk menyaring informasi yang relevan dari konten yang tidak relevan. Pakar pemasaran David Zheng menemukan bahwa di lebih dari 60% kasus, pengunjung menyerah dan meninggalkan situs web dalam waktu kurang dari 15 detik .

Penelitian menunjukkan bahwa pengguna tidak benar-benar membaca semua yang mereka lihat kata demi kata—mereka memindai dan kemudian menentukan apakah materi tersebut sepadan dengan waktu mereka. Dengan membuat konten yang sesuai dapat langsung dipindai, perancang produk dapat mengubah pengunjung jangka pendek menjadi pengguna jangka panjang. Di bawah ini adalah pilihan praktik terbaik desain UI untuk membantu memperkuat faktor penting desain kegunaan yang sering diabaikan: kemampuan memindai .

Apa Itu Kemampuan Pemindaian?

Pakar UX di Nielsen Norman Group melakukan penelitian untuk menjawab pertanyaan: Bagaimana orang membaca di web? Temuannya sederhana. Mereka tidak.

Kelompok tersebut menemukan bahwa hanya 16% pengunjung pertama kali ke situs web yang cenderung membacanya kata demi kata. 84% lainnya akan dengan cepat memindai elemen kait, seperti judul, kalimat, gambar, atau animasi sebelum memutuskan untuk menggali lebih dalam materi. Perilaku ini tidak terbatas pada antarmuka digital. Misalnya, orang jarang membaca setiap kata di koran. Sebaliknya, mereka memindai elemen yang sama—tajuk utama, gambar, dll.—untuk menentukan apa yang layak untuk waktu mereka.

Oleh karena itu, scannability adalah pendekatan untuk meletakkan konten sehingga mudah untuk dipindai. Seringkali hanya ada waktu singkat untuk mengesankan pengunjung dengan konten berharga di layar, sehingga sangat penting untuk mengoptimalkan antarmuka sepenuhnya untuk cara pengguna membaca di web. Baik produk digital berupa situs web, aplikasi, atau jenis antarmuka pengguna lainnya, kemampuan memindai adalah salah satu faktor terpenting dari desain yang ramah pengguna.

Manfaat Antarmuka yang Dapat Dipindai

Cara ideal untuk menentukan kemampuan memindai produk digital adalah dengan mengamatinya dari sudut pandang pengguna dan menjawab pertanyaan kunci berikut:

1. Apakah konten halaman sesuai dengan harapan audiens?
2. Apakah pesan utama halaman mudah dipahami dalam waktu singkat?

Meskipun antarmuka yang dapat dipindai membutuhkan upaya untuk diproduksi, itu terbayar dalam jangka panjang dengan membuat desain UI yang lengket. Studi Nielsen Norman Group menunjukkan bahwa halaman yang dioptimalkan untuk kemampuan pemindaian menjadi jauh lebih efektif dengan cara berikut:

• Pengguna memiliki waktu penyelesaian tugas yang lebih cepat
• Pengguna dapat dengan mudah menentukan apakah konten tersebut tepat untuk mereka
• Pengguna membuat lebih sedikit kesalahan dalam ingatan
• Pengguna mendapatkan pemahaman yang lebih baik tentang struktur halaman
• Sebuah situs menerima peringkat subjektif yang lebih menguntungkan untuk kredibilitas dan kualitas konten
• Tingkat bouncing berkurang
• Kemungkinan kunjungan kembali meningkat
• Optimisasi mesin pencari (SEO) ditingkatkan

Kekuatan Kebiasaan Pengguna dalam Memindai Pola

Setiap orang mengkonsumsi konten secara berbeda. Namun, melalui penelitian, pola pelacakan mata yang terdefinisi dengan baik telah muncul. Mengetahui bagaimana pengguna berinteraksi dengan antarmuka dalam beberapa detik pertama dapat membantu desainer memprioritaskan konten, menempatkan informasi penting di zona utama yang terlihat, dan membangun hierarki visual yang kuat.

Menurut Nielsen Norman Group, ada tujuh pola umum di mana pengguna memindai antarmuka:

• Pola F yang Terkenal: Dua belas tahun setelah penemuannya, pola ini masih menjadi pola pemindaian yang paling umum—bahkan saat memindai antarmuka seluler. Mata bergerak secara horizontal, seperti biasa saat membaca, lalu melompat ke konten di bawah ini. Ini dapat dilakukan secara perlahan dan sistematis atau cepat dengan peta panas spottier.
• Pola Z: Model zig-zag khas di halaman web dengan penyajian informasi yang seragam dan hierarki visual yang lemah.
• Pola Kue Lapis: Pengguna mengikuti pola ini saat memindai judul dan subjudul untuk menentukan dengan cepat di mana (dan jika) informasi yang mereka cari dapat ditemukan di halaman.
• Pola Berbintik: Materi iklan biasanya mengikuti model pemindaian ini, di mana mereka melewatkan potongan besar teks dan memindai komponen visual seperti warna, bentuk, dan anomali proporsi untuk menemukan bagian informasi tertentu.
• Pola Penandaan: Seperti penari yang terpaku pada suatu objek agar tetap seimbang saat berputar, pengguna menjaga mata tetap fokus pada satu tempat saat menggulir—pola yang sangat umum untuk UX seluler.
• Melewati Pola: Pengguna dengan sengaja melewatkan kata pertama dari sebuah baris ketika beberapa baris teks dalam daftar semuanya dimulai dengan kata yang sama.
• Pola Komitmen: Ini adalah pola yang langka dan hanya terjadi ketika pengguna sangat tertarik dengan konten dan termotivasi untuk mengonsumsi semuanya.

Pola yang diadopsi oleh pengguna terutama akan berhubungan dengan motivasi untuk mengunjungi halaman web: Jenis informasi apa yang mereka cari? Berapa banyak waktu yang bersedia mereka curahkan untuk menemukannya? Apakah ada situs web lain yang dapat memberikan informasi ini lebih cepat?

Memberikan Nilai Melalui Riset Pengguna dan Pola Pemindaian

Donald Norman, peneliti ilmu kognitif yang menciptakan istilah “ desain yang berpusat pada pengguna ,” menulis, “Tidak cukup kita membangun produk yang berfungsi, yang dapat dimengerti dan digunakan, kita juga perlu membangun produk yang membawa kegembiraan dan kegembiraan. , kesenangan dan kesenangan, dan ya, keindahan bagi kehidupan orang-orang.”

Riset pengguna adalah landasan desain yang berpusat pada pengguna dan praktik terbaik desain UI. Selanjutnya, untuk meningkatkan kemampuan pemindaian antarmuka digital, seorang desainer harus memahami pengguna akhir. Ketika pola UI dirancang dari perspektif pengguna akhir, pengalaman yang alami dan intuitif terjadi.

Solusi berdampak tidak terbuat dari abstraksi. Di bawah ini adalah kumpulan produk digital yang indah, dapat diterapkan, dan berkelanjutan. Setiap tim desain menentukan audiens utama, menggunakan pola pelacakan mata, dan mendesain tata letak konten untuk menghasilkan UI yang melekat.

Instacart memanfaatkan desain yang berpusat pada pengguna melalui pola desain UI mereka. Sebagian besar audiens mereka terdiri dari manula dan pengguna dengan gangguan penglihatan, sehingga item terdaftar dalam kotak kontras tinggi dengan penekanan yang jelas pada CTA utama. Desainnya memungkinkan mode pemindaian Spotted Pattern untuk mengakomodasi pengunjung yang bertahan lama.

Yelp melayani pengguna yang mencari restoran terbaik mutlak, belanja, kehidupan malam, makanan, dll. Orang cenderung menilai ulasan berdasarkan kriteria pribadi mereka sendiri dan penelitian menyeluruh, menjadikan Pola F sebagai model pemindaian yang paling berlaku. Oleh karena itu, Yelp menyajikan konten dengan cara yang mudah dipindai, dengan penekanan pada elemen tertentu seperti peringkat, gambar, dan alamat.

Airbnb bisa dibilang salah satu aplikasi yang paling dicintai di luar sana, dan sebagian besar karena penelitian pengguna mereka. Karena mereka tahu penggunanya sering menggunakan perangkat seluler, mereka merancang untuk mengakomodasi Pola Penandaan. Antarmuka yang bersih dan intuitif ditata untuk menekankan gambar apartemen yang besar dan lebar. Mereka sengaja membatasi jumlah gambar sampul per layar menjadi dua sehingga pengguna dapat mendedikasikan waktu mereka dengan baik dan melihat apakah daftar menarik perhatian mereka atau tidak.

Salah satu faktor yang perlu diingat saat meningkatkan kemampuan pemindaian produk digital adalah menentukan jenis perangkat yang akan digunakan untuk melihatnya. Platform seluler Airbnb menerima lalu lintas yang signifikan. Seperti yang terlihat di peta panas penggunaan jempol, Airbnb secara strategis menempatkan elemen UI yang paling umum digunakan, seperti "Jelajahi" dan "Penelusuran Tersimpan", dalam akses mudah saat menggulir—dan memindai.

Praktik Terbaik Desain UI untuk Kemampuan Pemindaian yang Lebih Baik

Buat Hirarki Visual yang Tepat

Hirarki visual antarmuka digital mengacu pada pengaturan dan penyajian elemen desain UI untuk mengkomunikasikan tingkat kepentingan sehingga pengguna dapat dengan cepat memindai informasi yang diinginkan. Ada beberapa faktor dalam merancang tata letak dengan hierarki visual yang tepat:

• Ukuran
• Warna
• Kontras
• Kedekatan
• Penyelarasan
• Ruang Negatif
• Pengulangan

Dengan mempertimbangkan pola desain UI ini saat membuat desain tata letak UI, seorang desainer akan memastikan bahwa produk akhir memiliki tampilan yang bagus, harmonis, dan tata letak yang dapat dipindai secara intuitif.

Laman hasil penelusuran Google menggunakan semua faktor hierarki visual untuk meningkatkan kemampuan pemindaian. Headline ditekankan oleh penggunaan warna, ukuran, dan selanjutnya, kontras. Ruang negatif di sekitar setiap judul berkontribusi pada hal pertama yang akan dipindai pengguna.

Saat pengguna menemukan judul yang relevan, mereka mungkin memeriksa tautan untuk kredibilitas—elemen yang mudah dikenali karena warna dan kedekatannya. Selanjutnya, untuk mengevaluasi hasilnya dengan lebih baik, mereka akan menggali salinan konten yang konsisten dalam warna, ukuran, dan kedekatan. Selain faktor-faktor ini, pengulangan dan penyelarasan membuat hasil pencarian Google umumnya mudah dipindai.

Manfaatkan Ruang Negatif

Claude Debussy yang brilian pernah berkata, "Musik adalah ruang di antara nada-nada." Sentimen yang sama berlaku untuk kemampuan pemindaian—ruang negatif di antara elemen-elemen inilah yang membuat tata letak berhasil. Jumlah ruang negatif (putih) yang tepat di sekitar elemen UI membawa fokus ke elemen itu sendiri. Ini menekankan konten dan menyediakan ruang bernapas yang diperlukan untuk memastikan tata letak tidak terasa berantakan. Tanpa ruang bernafas, otak manusia cenderung tidak memindai tempat menarik dan lebih cenderung bingung.

Gunakan Subjudul untuk Meringkas Konten

Orang sering menanggapi secara negatif potongan teks yang besar. Hal ini dapat memicu asumsi bahwa mereka akan kehilangan waktu jika paragraf tidak sesuai dengan minat mereka. Praktik terbaik desain UI menawarkan solusi untuk masalah ini. Dengan menambahkan subjudul singkat di awal artikel yang panjang, pengguna memiliki wawasan mendalam tentang topik tersebut.

Saat menulis subjudul, sangat penting untuk tetap pada intinya. Cukup komunikasikan pesan utama yang ditawarkan konten di bawah ini.

Buat Daftar Berpoin dan Bernomor

Otak manusia sangat sistematis—ia mengamati konten dan kemudian mengelompokkannya ke dalam unit-unit yang bermakna. Oleh karena itu, pengguna lebih mungkin untuk memahami daftar berpoin atau bernomor daripada beberapa poin yang digabungkan menjadi paragraf tekstual.

Ruang negatif yang dibuat oleh daftar memudahkan pengguna untuk memindai, sehingga bermanfaat untuk mencari peluang dengan cermat. Jika lebih dari dua titik dalam sebuah teks sejajar satu sama lain dan masing-masing membutuhkan tidak lebih dari dua kalimat untuk dijelaskan, ini adalah kandidat kuat untuk daftar. Nielsen Norman Group memberikan wawasan lebih jauh dalam membuat konten digital berpoin.

Visualisasikan Konten

Pengguna digital modern secara alami visual dan tidak selalu cenderung merespons konten tekstual dengan baik (bahkan jika itu terstruktur dengan sempurna dan mengikuti semua tip desain UI untuk kemampuan pemindaian yang ideal). Lingkungan eksternal akan selalu menjadi faktor. Oleh karena itu, untuk mengimbangi tata letak teks-berat, penggunaan gambar dan grafik menawarkan jeda visual yang informatif dan menarik secara emosional. Seperti kata pepatah, sebuah gambar bernilai seribu kata!

Visual asli (ilustrasi, foto menarik, dll.) dapat dengan mudah menarik perhatian pengguna dan mendukung konsep gaya umum. Terlebih lagi, mereka dapat meningkatkan hierarki visual dan membuat teks lebih mudah dicerna. Namun, ada bahaya bahwa grafik dapat menyebabkan efek balasan jika tidak digunakan dengan benar. Sebelum mengubah ide-ide kunci menjadi grafis, sangat penting bagi desainer untuk memahami sepenuhnya konten yang mereka desain.

Tetapkan Penekanan yang Tepat pada CTA

Mayoritas pengalaman digital ditujukan untuk memunculkan tindakan tertentu dari pengguna. Meskipun tombol ajakan bertindak (CTA) sering kali terlihat sangat sederhana, tombol tersebut dirancang secara strategis untuk membantu pengguna menyelesaikan suatu tindakan—seperti membeli, menambahkan ke keranjang, atau sekadar membuka halaman lain.

Praktik terbaik desain UI menyarankan pemosisian CTA dekat dengan konten yang menjelaskan tindakan, menjadikannya intuitif bagi pengguna. Cara efektif untuk menguji apakah CTA proporsional, diwarnai, dan diposisikan dengan baik adalah dengan mengubah sementara desain akhir menjadi skala abu-abu. Jika CTA tetap terlihat dan ditekankan dengan jelas, UI lengket dilakukan dengan baik.

Pentingnya Kemampuan Pemindaian

Ada banyak elemen yang menentukan apakah desain tata letak UI akan diterima dengan baik oleh orang-orang—seperti relevansi konten, solusi pesaing, dan logika bisnis. Menurut Forbes , kemampuan memindai mungkin menjadi faktor pemasaran konten yang paling diabaikan. Dengan membuat konten yang dapat dipindai, pengunjung jangka pendek dapat menjadi pengguna jangka panjang.

Konten yang dapat dipindai menunjukkan kepada pengguna akhir bahwa waktu mereka dihargai dan memberikan kesempatan untuk memahami pesan inti hanya dengan melirik desain tata letak. Blogger viral dan profesor jurnalisme Kim Keller menunjukkan kepada desainer bahwa “Anda memulai percakapan dengan seseorang yang Anda inginkan sebagai pelanggan. Ini adalah hubungan, dan tidak ada hubungan yang dapat bertahan jika Anda tidak menghabiskan waktu bersama. Hargai waktu mereka dan buat itu berharga.”

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• Praktik Terbaik Desain UI dan Kesalahan Umum
• Keadaan Kosong – Aspek UX yang Paling Diabaikan
• Kesederhanaan Adalah Kunci – Menjelajahi Desain Web Minimal
• Prinsip Heuristik untuk Antarmuka Seluler
• Merancang untuk Keterbacaan – Panduan Tipografi Web