Navigasi dengan Tab: Kapan Menggunakannya, dan Cara Mengoptimalkannya

Salah satu kutipan UX favorit saya berasal dari Chikezie Ejiasi, Kepala Studio dan Sistem Desain di Google.

Dia menulis: “Hidup adalah percakapan. Desain web harus dengan cara yang sama. Di web, Anda berbicara dengan seseorang yang mungkin belum pernah Anda temui—jadi penting untuk berbicara dengan jelas dan tepat. Dengan demikian, navigasi yang terstruktur dengan baik dan pengaturan konten sejalan dengan percakapan yang baik.”

Bisakah navigasi tab menjadi jelas dan tepat? Tentu saja bisa, yang membuatnya menjadi bentuk navigasi dan organisasi konten yang valid.

Yang penting, seperti kebanyakan hal yang terkait dengan UX, adalah bagaimana Anda mengimplementasikannya dan bagaimana Anda mengoptimalkannya.

Apa itu navigasi tab?

Navigasi bertab adalah navigasi dan gaya UI tempat informasi diatur dalam tab, yang memisahkan konten ke dalam bagian yang berbeda.

Umumnya, saat melihat navigasi bertab, Anda akan melihat beberapa karakteristik umum:

1. Sudut tab membulat;
2. Pemisahan tab, apakah itu spasi atau satu baris;
3. Arahkan efek pada tab;
4. Gradien untuk menambah kedalaman dan dimensi pada tab.

Navigasi tab didasarkan pada metafora folder, yang harus diketahui oleh siapa pun yang bekerja di kantor atau menonton televisi. Seperti yang dijelaskan oleh Mifsud of UsabilityGeek…

Justin Mifsud, UsabilityGeek :

“Dalam terminologi UI, metafora adalah ide atau objek yang digunakan untuk memfasilitasi keakraban antara pengguna dan aplikasi.

Penggunaan tab di UI adalah metafora yang sangat baik karena terlihat seperti pembagi tab dunia nyata dalam file atau tab pada folder di laci file.

Dengan demikian, lebih intuitif bagi pengguna untuk mengetahui bahwa tab ini membagi konten menjadi beberapa bagian dan seperti dalam kehidupan nyata, meraih tab (ditiru di web dengan mengklik tab) akan menampilkan konten masing-masing.” (melalui UsabilityGeek)

Karena metafora sangat umum, penting bagi Anda untuk berhati-hati dalam penerapannya. Navigasi dengan tab memiliki prototipe yang kuat, sehingga harus terlihat dan berfungsi persis seperti yang diharapkan.

Seperti sistem navigasi yang bagus, tab memungkinkan Anda untuk:

• Pisahkan konten secara bermakna menjadi beberapa bagian yang berbeda;
• Tunjukkan kepada orang-orang konten apa yang tersedia bagi mereka dan bagaimana mereka bisa mendapatkan konten tersebut;
• Tunjukkan kepada orang-orang, secara visual, di mana mereka berada di dalam situs Anda.

Kapan sebaiknya menggunakan navigasi tab?

Secara umum, sebaiknya gunakan navigasi bertab saat…

• Anda memiliki antara dua hingga sembilan kategori konten yang berbeda.
• Nama kategori relatif pendek dan dapat diprediksi, baik dari segi posisi maupun salinan (yaitu cocok dengan prototipe).
• Jumlah kategori tidak mungkin berubah secara teratur.
• Kategorinya serupa; masuk akal jika mereka disatukan.
• Kategori cocok dalam satu baris.

Seperti yang dijelaskan oleh Jakob Nielsen dari Nielsen Norman Group, ketika navigasi dengan tab menjadi sangat rumit sehingga membutuhkan banyak baris, masalah mulai muncul…

Jakob Nielsen, Grup Nielsen Norman :

“Beberapa baris membuat elemen UI melompat, yang menghancurkan memori spasial dan dengan demikian membuat pengguna tidak mungkin mengingat tab mana yang telah mereka kunjungi.

Selain itu, banyak baris adalah gejala kerumitan yang berlebihan: Jika Anda membutuhkan lebih banyak tab daripada yang muat dalam satu baris, Anda harus menyederhanakan desain Anda.” (melalui NN/g)

Banyak baris juga membuat masalah hierarki visual. Saat ada baris kedua, ini mungkin memberi sinyal kepada pengguna bahwa tab di baris kedua adalah subkategori atau, setidaknya, kurang penting dibandingkan tab di baris pertama.

Secara umum, bukan ide yang baik untuk menggunakan navigasi bertab saat:

• Anda ingin orang membandingkan konten secara bersamaan. Ini membebani memori dan meningkatkan beban kognitif secara substansial.
• Anda mendapati diri Anda mempertimbangkan untuk menambahkan tautan gaya “Lainnya…”.

Tentu saja, ini hanyalah pedoman dasar. Anda dapat mencocokkan dengan semua aturan "Anda harus menggunakannya" dan menemukan bahwa itu tidak sesuai untuk audiens Anda. Ini pada akhirnya adalah sesuatu yang perlu Anda uji.

Ingat, Anda dapat menggunakan analitik digital untuk mencari tahu apakah navigasi tab Anda menimbulkan masalah bagi pengunjung Anda. Dari sana, Anda dapat melakukan perubahan untuk memperbaiki masalah atau bereksperimen dengan jenis navigasi baru.

Kontroversi itu

Sementara praktik desain modern memiliki banyak situs yang terlihat seperti ini…

…beberapa orang memang menggunakan navigasi tab sebagai navigasi utama mereka.

Seperti yang dicatat oleh Luke Wroblewski dari Google bertahun-tahun yang lalu, Amazon benar-benar memelopori tren ini…

Luke Wroblewski, Google :

“Pada tahun 1998, situs tersebut memiliki dua kategori tingkat atas: buku dan musik.

Saat kategori tambahan ditambahkan (seperti video dan hadiah), sistem tab horizontal diskalakan dengan cukup baik dan menciptakan peluang bagus untuk membedakan kategori produk melalui warna.” (melalui LukeW)

Berikut adalah tampilan bagaimana Amazon menggunakan navigasi tab di hari-hari sebelumnya…

Saat situs semakin populer, begitu pula jumlah tab yang dibutuhkan Amazon…

Pada tahun 1999, Jakob menyebut ini "desain yang buruk dan penyalahgunaan metafora tab":

Saya berpendapat bahwa tab akan lebih baik digunakan untuk beralih di antara tampilan alternatif (tetapi terkait) daripada untuk menavigasi ke lokasi yang tidak terkait.

Anda harus menggunakan tab untuk berpindah antar tampilan dalam konteks yang sama, bukan untuk menavigasi ke area yang berbeda. Ini adalah satu-satunya poin terpenting, karena tetap di tempat sambil mengubah tampilan adalah alasan utama kami memiliki tab

Jakob Nielsen

Namun, banyak situs mengikuti jejak Amazon dan definisi navigasi tab mulai bergeser dari "beralih di antara tampilan alternatif" Nielsen.

Saat menggunakan navigasi tab sebagai sistem navigasi utama sudah agak ketinggalan zaman, itu bisa berfungsi. Seperti kebanyakan hal, perhatian utama Anda seharusnya bukan apa yang dikatakan Nielsen tentang navigasi tab, tetapi apa yang dikatakan audiens Anda.

Apakah mereka merasa sulit untuk menggunakannya? Apakah mereka menavigasi situs Anda dengan benar? Bisakah mereka menemukan elemen terpenting dari situs Anda? Lakukan pengujian kegunaan untuk memastikan.

Bagaimana menerapkan navigasi tab

Air Canada, bersama dengan sebagian besar maskapai besar, menggunakan navigasi tab dengan baik…

Saat menerapkan sendiri navigasi bertab (di tingkat mana pun), berikut adalah beberapa hal yang perlu diingat:

• Pertama, rancang arsitektur informasi (IA) situs Anda sehingga Anda dapat membuat keputusan terkait tab yang lebih cerdas.
• Seluruh tab harus dapat diklik, bukan hanya nama kategori (teks).
• Jangan gunakan tab "beranda", meskipun Anda menggunakan navigasi bertab untuk seluruh situs Anda. Alih-alih, buat logo Anda membawa pengunjung ke beranda.
• Tab harus terhubung ke area konten yang dikontrolnya sehingga cakupan tab menjadi jelas.
• Nama kategori harus sepanjang satu atau dua kata dan ditulis dalam bahasa Inggris biasa. Hindari penggunaan huruf besar semua karena membuat tab lebih sulit dibaca.
• Jangan menumpuk beberapa baris tab. Jika Anda harus, gunakan sub-kategori (yaitu bilah horizontal kedua di bawah tab) sebagai gantinya. Jika Anda menggunakan subkategori, pastikan ada koneksi visual antara tab yang dipilih dan bilah subkategori di bawah. Pastikan jumlah sub-kategori yang Anda gunakan tidak berlebihan; memadatkan dan menyederhanakan.
• Tab yang dipilih harus ditandai dengan jelas untuk menunjukkan lokasi saat ini. Namun, tab yang tidak dipilih tidak boleh dibisukan sehingga dilupakan atau diabaikan.
• Urutan tab yang konsisten harus dipertahankan dari halaman ke halaman sehingga pengguna sepenuhnya memahami bagaimana tab berhubungan satu sama lain.

Jakob menjelaskan mengapa jenis konsistensi ini penting…

1. Dapat dikenali. Ketika sesuatu selalu terlihat sama, Anda tahu apa yang harus dicari dan Anda tahu apa itu saat Anda menemukannya.

2. Prediktabilitas. Ketika sesuatu selalu bekerja dengan cara yang sama, Anda tahu apa yang akan terjadi ketika Anda menindaklanjutinya.

3. Pemberdayaan. Saat Anda dapat mengandalkan pengetahuan masa lalu Anda tentang semua fitur yang tersedia, Anda dapat dengan mudah menyusun serangkaian tindakan untuk mencapai tujuan Anda.

4. Efisiensi. Tidak perlu menghabiskan waktu mempelajari sesuatu yang baru atau mengkhawatirkan efek dari fitur yang tidak konsisten.

Jakob Nielsen

Contoh navigasi tab dilakukan dengan benar

Cara terbaik untuk memahami navigasi tab, terutama karena dapat digunakan dengan berbagai cara, adalah dengan melihat beberapa contoh.

1. Koleksi Seni Album

Album Art Collection adalah contoh navigasi tab yang agak populer…

Ada dua hal yang menarik di sini…

1. Navigasinya vertikal, bukan horizontal.
2. Navigasi termasuk ikon.

Biasanya, Anda akan menemukan navigasi bertab disajikan secara horizontal. Ini sebagian karena prototipe desain. Karena sudah umum, orang cenderung mencari navigasi di ruang horizontal di bawah logo.

Tentu saja, itu tidak berarti Anda dibatasi untuk menggunakan ruang itu untuk navigasi. Pastikan untuk menggunakan pengujian pengguna. Anda tidak ingin memindahkan navigasi karena alasan gaya untuk memengaruhi kemudahan penggunaan situs Anda.

Perhatikan bahwa meskipun Album Art Collection menggunakan ikon navigasi, mereka tidak mengabaikan deskripsi berbasis teks. Pengujian kegunaan ikon adalah artikelnya sendiri, tetapi lebih sering daripada tidak, deskripsi berbasis teks lebih bermanfaat daripada ikon saja. Jacob Gube dari Enam Revisi menjelaskan…

Jacob Gube, Enam Revisi :

“Hindari penggunaan ikon untuk menggantikan teks kontrol tab karena simbol dapat berarti hal yang berbeda bagi orang yang berbeda – taruhan teraman adalah menggunakan teks biasa untuk mendeskripsikan informasi panel.” (melalui Majalah Smashing)

2. Mesin Faktur

Mesin Faktur adalah navigasi tab dasar Anda sebagai contoh navigasi utama…

Namun, mereka menyertakan tab "Beranda", yang berlebihan. Perhatikan bagaimana tab yang dipilih dibawa ke depan dan tab terhubung ke area konten.

3. Penyangga

Buffer adalah salah satu contoh navigasi tab favorit saya. Sebelumnya, mereka memiliki penawaran untuk individu dan penawaran untuk bisnis, sehingga mereka menggunakan tab untuk memisahkan konten mereka di paro bawah.

Inilah awal dari konten untuk individu…

Dan inilah awal dari konten untuk bisnis…

Ini memungkinkan mereka untuk berbicara dengan dua audiens yang berbeda tanpa membuat situs atau pengalaman yang sepenuhnya terpisah.

Belakangan, halaman produk Buffer mengalami perubahan besar, dengan Publikasikan, Balas, dan Analisis di antara penawaran lainnya (semuanya cukup jelas). Inilah navigasi tab yang mereka gunakan untuk halaman mereka:

Selain paket harga yang berbeda, tab berbasis produk ini menampilkan kesaksian berbeda, yang relevan dengan produk di tab:

Seperti yang dijelaskan oleh David Leggett dari UX Booth, navigasi dengan tab relevan di luar navigasi tingkat primer dan sekunder. Mereka bahkan dapat digunakan di paro bawah, seperti dalam kasus Buffer…

David Leggett, Booth UX :

“Tab tidak perlu dibatasi pada navigasi tingkat primer dan sekunder. Jika mereka memberi pengguna kemampuan untuk beralih di antara area konten yang sama, mereka terbukti sangat berguna.

Dikombinasikan dengan teknologi yang mengalihkan konten tanpa memuat ulang halaman dapat menanamkan perasaan yang nyata kepada pengguna akhir yang menavigasi halaman tersebut.” (melalui Booth UX)

3 praktik terbaik untuk diingat

Sebelum Anda bereksperimen dengan navigasi tab atau memutuskan itu tidak bekerja untuk Anda, pertimbangkan tiga faktor ini: aksesibilitas, chunking, dan kecepatan.

1. Aksesibilitas penting

Anda ingin situs Anda dapat diakses oleh penyandang disabilitas atau keterbatasan. Untuk melakukannya dengan navigasi tab, Anda harus…

• Izinkan orang untuk menavigasi tab menggunakan tombol "Tab" di keyboard mereka.
• Izinkan orang memilih tab menggunakan tombol "Enter" di keyboard mereka.
• Tunjukkan tab mana yang dipilih menggunakan metode alternatif. Misalnya, Anda dapat menyertakan atribut judul dengan kata "aktif".

Membuat situs Anda lebih mudah digunakan untuk lebih banyak orang tidak akan merugikan konversi.

2. Memotong itu penting

Dengan navigasi bertab, cara Anda memutuskan untuk mengatur dan membagi konten Anda sangatlah penting. Itu sebabnya rekomendasi penerapan pertama saya di atas terkait dengan arsitektur informasi situs Anda.

Justin menjelaskan mengapa pengorganisasian yang tepat sangat penting…

Justin Mifsud, UsabilityGeek :

“Tab membagi konten menjadi bagian-bagian bermakna yang menempati lebih sedikit ruang layar. Dalam hal ini, pengguna dapat dengan mudah mengakses konten yang mereka minati (daripada memiliki semua konten dalam paragraf). (melalui UsabilityGeek)

Pertimbangkan semua konten yang Anda inginkan di situs Anda. Kemudian, kelompokkan konten tersebut ke dalam empat hingga lima keranjang. Kemungkinan besar, Anda akan dapat mengulangi latihan ini dan mendapatkan dua atau tiga ember berbeda. Itu bagus. Lakukan pengujian pengguna untuk melihat orang mana yang merespons dan bernavigasi dengan lebih baik.

Yang terpenting, Anda ingin memastikan…

1. Konten Anda dipotong dengan cara yang logis, diharapkan, dan jelas bagi pengunjung.
2. Urutan tab Anda bermakna dan logis.
3. Tab Anda mengikuti prototipe yang ada. Misalnya, situs SaaS sering dipecah dengan cara tertentu sementara situs e-niaga sering dipecah dengan cara lain.

3. Kecepatan itu penting

Kami telah menulis tentang pentingnya kecepatan berkali-kali. Jadi, tidak mengherankan jika kecepatan juga berperan dalam efektivitas navigasi tab.

Jacob menjelaskannya dengan cukup baik…

Jacob Gube, Enam Revisi :

“Tujuan penggunaan tab modul adalah untuk memungkinkan penyajian konten yang cepat dan interaktif. Untuk ini, Anda harus mencoba agar konten panel tidak aktif ditulis sebaris dalam dokumen HTML, lalu gunakan CSS dan JavaScript untuk mengatur gaya dan menyembunyikan panel secara visual, yang lebih cepat daripada mengharuskan pemuatan ulang halaman atau meminta data sumber jarak jauh.

Hindari memuat ulang halaman saat beralih di antara panel karena hal ini secara signifikan menunda navigasi di antara panel. Konten yang dimuat dari jarak jauh menggunakan Ajax dapat menjadi opsi untuk informasi panel yang dinamis dan terletak dari jarak jauh, tetapi menghadirkan tantangan bagi pengguna pembaca layar yang mungkin tidak mengetahui node yang disisipkan DOM secara asinkron di pohon dokumen.” (melalui Majalah Smashing)

Saran ini tidak berlaku untuk mereka yang menggunakan navigasi tab sebagai navigasi utama mereka, tetapi mereka yang menggunakan navigasi tab seperti Air Canada dan Buffer harus memperhatikan.

Kesimpulan

Navigasi tab benar-benar dapat menghasilkan "percakapan yang baik" dengan pengunjung Anda. Jika diterapkan dengan benar, ini cukup jelas dan tepat untuk memberi tahu pengunjung Anda: tepatnya di mana mereka berada, persis apa yang tersedia bagi mereka, dan bagaimana tepatnya mereka dapat mengakses apa yang tersedia bagi mereka.

Dengan bantuan pengujian dan pengoptimalan kegunaan, percakapan itu semakin meningkat.

Namun, seperti apa pun, pastikan untuk melakukan penelitian Anda (dalam hal ini, penelitian arsitektur informasi Anda) dan uji, uji, uji.

Kesimpulan…

1. Navigasi dengan tab dapat digunakan sebagai sistem navigasi utama serta di luar level navigasi primer atau sekunder.
2. Coba navigasi bertab saat Anda memiliki dua hingga sembilan kategori yang solid dan mirip dengan nama pendek yang muat dalam satu baris.
3. Jangan mencoba navigasi bertab saat Anda ingin orang membandingkan konten atau mendapati diri Anda berpikir untuk menambahkan tautan "Lainnya...".
4. Anda dapat mengikuti penerapan praktik terbaik, tetapi…
5. Yang penting adalah data Anda. Apakah pengunjung Anda merasa kesulitan untuk menavigasi situs Anda dengan navigasi tab? Lakukan pengujian kegunaan untuk mencari tahu.
6. Perbaiki masalah yang muncul. Atau, jika banyak masalah mahal, pertimbangkan sistem navigasi lain.
7. Aksesibilitas, chunking, dan kecepatan semuanya penting dalam hal navigasi tab, jadi perhatikan baik-baik.

Mengerjakan sesuatu yang berhubungan dengan ini? Posting komentar di komunitas CXL !