Tampilan Pohon

Dengan tampilan pohon, pengguna dapat melihat dan berinteraksi dengan kumpulan objek yang disusun secara hierarkis, menggunakan pilihan tunggal atau beberapa pilihan.

Di pohon, objek yang berisi data disebut simpul daun dan objek yang berisi objek lain disebut simpul kontainer. Satu simpul kontainer paling atas disebut simpul akar. Pengguna dapat memperluas dan menciutkan simpul kontainer dengan mengklik tombol plus dan minus expander.

Tampilan pohon biasa.

Apakah ini kontrol yang tepat?

Memiliki data hierarkis tidak berarti Anda harus menggunakan tampilan pohon. Sangat sering tampilan daftar adalah pilihan yang lebih sederhana, namun lebih kuat. Tampilan daftar:

• Mendukung beberapa tampilan yang berbeda.
• Mendukung pengurutan data menurut salah satu kolom dalam tampilan Detail.
• Mendukung pengorganisasian data ke dalam grup, membentuk hierarki dua tingkat.

Untuk menggunakan tampilan daftar, Anda dapat meratakan informasi hierarkis menggunakan teknik berikut:

• Hapus simpul akar jika ada, karena sering kali tidak diperlukan.

• Gunakan grup tampilan daftar, tab, daftar drop-down , atau judul yang dapat diperluas untuk menggantikan kontainer tingkat atas.

  

  Dalam contoh ini, grup tampilan daftar digunakan untuk kontainer tingkat atas.

  

  Dalam contoh ini, tab digunakan untuk kontainer tingkat atas

  

  Dalam contoh ini, daftar drop-down digunakan untuk kontainer tingkat atas.

• Jika kontrol terkait menampilkan konten kontainer yang dipilih, kontrol tersebut dapat menampilkan tingkat hierarki yang lebih rendah.

  

  Dalam contoh ini, kontainer tingkat rendah ditampilkan di jendela dokumen.

Anda harus menggunakan tampilan pohon jika Anda perlu menampilkan hierarki lebih dari dua tingkat (tidak termasuk simpul akar).

Untuk memutuskan apakah tampilan pohon adalah kontrol yang tepat, pertimbangkan pertanyaan-pertanyaan ini:

• Apakah hierarkis data? Jika tidak, gunakan kontrol lain.
• Apakah hierarki memiliki setidaknya tiga tingkat (tidak termasuk akar)? Jika tidak, pertimbangkan alternatif seperti grup tampilan daftar, tab, daftar drop-down, atau judul yang dapat diperluas.
• Apakah item memiliki data tambahan? Jika demikian, pertimbangkan untuk menggunakan tampilan daftar dalam mode tampilan Detail untuk memanfaatkan data tambahan sepenuhnya.
• Apakah data tingkat bawah terkait dengan subtugas independen? Jika demikian, pertimbangkan untuk menampilkan informasi dalam kontrol terkait atau di jendela terpisah (ditampilkan menggunakan tombol perintah atau tautan ).
• Apakah pengguna target lanjutan? Pengguna tingkat lanjut lebih mahir menggunakan pohon. Jika aplikasi Anda ditujukan untuk pengguna pemula, hindari menggunakan tampilan pohon.
• Apakah item memiliki kategorisasi hierarkis tunggal, alami, yang akrab bagi sebagian besar pengguna? Jika demikian, data sangat ideal untuk tampilan pohon. Jika ada kebutuhan untuk beberapa tampilan atau pengurutan, gunakan tampilan daftar sebagai gantinya.
• Apakah pengguna perlu melihat data tingkat bawah dalam beberapa tetapi tidak semua skenario, atau beberapa tetapi tidak semua waktu? Jika demikian, data sangat ideal untuk tampilan pohon.

Konsep desain

Pohon dimaksudkan untuk mengatur data dan memudahkan untuk ditemukan, namun sulit untuk membuat data di dalam pohon mudah ditemukan. Ingatlah prinsip-prinsip berikut saat memutuskan tentang tampilan pohon dan organisasi mereka.

Prediktabilitas dan ketertemuan

Tampilan pohon didasarkan pada hubungan antar objek. Pohon bekerja paling baik ketika objek membentuk hubungan yang jelas, terkenal, saling eksklusif di mana setiap objek memetakan ke satu kontainer yang mudah ditentukan.

Masalah yang signifikan adalah bahwa objek dapat muncul di simpul yang berbeda. Misalnya, di mana pengguna akan berharap menemukan perangkat keras yang memutar musik, memiliki hard disk besar, dan menggunakan port USB? Mungkin di salah satu dari beberapa simpul kontainer yang berbeda, seperti Multimedia, Penyimpanan, USB, dan mungkin di Sumber Daya Perangkat Keras. Salah satu solusinya adalah menempatkan setiap objek di bawah satu kontainer yang paling tepat terlepas dari keadaannya; pendekatan lain adalah menempatkan setiap objek di bawah semua kontainer yang berlaku. Yang pertama mempromosikan hierarki yang sederhana dan bersih dan yang terakhir mempromosikan penemuan masing-masing memiliki keuntungan dan potensi masalah.

Pengguna mungkin tidak sepenuhnya memahami tata letak pohon, tetapi mereka akan membentuk model mental hubungan setelah berinteraksi dengan pohon untuk sementara waktu. Jika model mental itu salah, itu menyebabkan kebingungan. Misalnya, pemutar musik dapat ditemukan di kontainer Multimedia, Penyimpanan, dan USB. Pengaturan ini meningkatkan kemampuan penemuan. Jika pengguna pertama kali menemukan perangkat di Multimedia, pengguna dapat menyimpulkan bahwa semua perangkat seperti pemutar musik muncul di kontainer Multimedia. Pengguna kemudian akan mengharapkan perangkat serupa, seperti kamera digital, muncul di kontainer Multimedia dan akan menjadi bingung jika itu tidak terjadi.

Tantangan saat merancang pohon adalah menyeimbangkan penemuan dengan model pengguna yang dapat diprediksi yang meminimalkan kebingungan.

Luas vs. kedalaman

Studi kegunaan telah menunjukkan bahwa pengguna lebih berhasil menemukan objek di pohon yang luas daripada di pohon yang dalam, jadi ketika merancang pohon, Anda harus lebih memilih luas di atas kedalaman. Idealnya, pohon harus memiliki tidak lebih dari empat tingkat (tidak menghitung simpul akar) dan objek yang paling umum diakses akan muncul di dua tingkat pertama.

Prinsip lain

• Ketika pengguna menemukan apa yang mereka cari, mereka berhenti mencari. Mereka tidak terlihat melihat di mana objek lain mungkin ditemukan karena tidak perlu. Pengguna tersebut dapat berasumsi bahwa jalur pertama yang mereka temukan adalah satu-satunya jalur.
• Pengguna mengalami kesulitan menemukan objek di pohon besar yang kompleks. Pengguna tidak akan melakukan pencarian manual yang lengkap untuk menemukan objek di pohon tersebut; mereka berhenti setelah mereka berpikir mereka telah mengeluarkan upaya yang wajar. Akibatnya, pohon besar dan kompleks perlu dilengkapi dengan metode akses lain, seperti pencarian kata, indeks, atau pemfilteran.
• Beberapa program memungkinkan pengguna untuk membuat pohon mereka sendiri. Meskipun pohon yang dirancang sendiri seperti itu mungkin selaras dengan model mental pengguna, pohon tersebut sering dibuat dengan serampangan dan tidak dirawat dengan baik. Misalnya, sementara sistem file, program email, dan daftar Favorit biasanya menyimpan jenis informasi yang sama, pengguna jarang repot untuk mengaturnya dengan cara yang sama.

Jika Anda hanya melakukan satu hal ...

Mempertimbangkan manfaat dan kelemahan penggunaan tampilan pohon dengan hati-hati. Memiliki data yang disusun secara hierarkis tidak berarti Anda perlu menggunakan tampilan pohon.

Pola penggunaan

Tampilan pohon memiliki beberapa pola penggunaan:

Penggunaan	Contoh
Tampilan pohon hanya dengan simpul kontainer pengguna dapat melihat dan berinteraksi dengan satu kontainer sekaligus.	Biasanya, tampilan pohon ini memiliki kontrol terkait yang menampilkan konten kontainer yang dipilih, sehingga pengguna hanya dapat berinteraksi dengan satu kontainer pada satu waktu. Dalam contoh ini, tampilan pohon hanya memiliki simpul kontainer. Isi simpul terpilih ditampilkan dalam kontrol tampilan daftar terkait.
Tampilan pohon dengan kontainer dan simpul daun pengguna dapat melihat dan berinteraksi dengan kontainer dan daun.	Biasanya, tampilan pohon ini memiliki kontrol terkait yang menampilkan konten kontainer atau daun yang dipilih. memungkinkan pengguna berinteraksi dengan daun sering kali membuatnya perlu untuk mendukung beberapa pilihan. dalam contoh ini, tampilan pohon memiliki node kontainer dan daun. karena beberapa pilihan didukung, konten item yang dibuka ditampilkan menggunakan tab dalam kontrol terkait. atau, tampilan pohon dapat memiliki daftar terorganisir, di mana kontainer adalah judul dan daun adalah opsi. Dalam contoh ini, daun pohon adalah opsi dan kontainer adalah kategori opsi.
tampilan pohon kotak centang pengguna dapat memilih sejumlah item, termasuk tidak ada.	Kotak centang dengan jelas menunjukkan bahwa beberapa pilihan dimungkinkan. gunakan pola pohon ini ketika beberapa pilihan sangat penting atau umum digunakan. Dalam contoh ini, tampilan pohon kotak centang memungkinkan pemilihan fitur untuk diaktifkan atau dinonaktifkan.
penyusun tampilan pohon pengguna dapat membuat pohon dengan menambahkan satu kontainer atau daun pada satu waktu dan secara opsional mengatur urutan.	Banyak pohon dapat dibuat atau dimodifikasi oleh pengguna. beberapa pohon dibangun di tempat menggunakan menu konteks dan seret dan letakkan (seperti folder di windows explorer), sedangkan pohon lain dibangun menggunakan kotak dialog khusus (seperti daftar favorit di windows internet explorer). Dalam contoh ini dari Internet Explorer, pengguna dapat membuat daftar favorit mereka sendiri dengan menggunakan kotak dialog.
Tampilan pohon dengan metode akses alternatif pengguna dapat menemukan objek dengan cara selain menggunakan pohon hierarkis.	Seperti disebutkan sebelumnya, pengguna mengalami kesulitan menemukan objek di pohon besar yang kompleks, sehingga pohon tersebut harus dilengkapi dengan metode akses lain, seperti pencarian kata, indeks, atau pemfilteran. dalam contoh ini, pengguna juga dapat mengakses informasi menggunakan daftar isi, indeks, dan favorit. untuk beberapa pengguna, tab indeks dan pencarian bisa lebih berguna daripada tab konten. Dalam contoh ini, menu Mulai Windows juga memungkinkan pengguna mengakses program, file, dan halaman Web dengan mengetikkan bagian nama ke dalam kotak Pencarian.

Pedoman

Presentasi

• Dalam kontainer, urutkan item dalam urutan logis. Urutkan nama dalam urutan alfabet, angka dalam urutan numerik, dan tanggal dalam urutan kronologis.

• Gunakan atribut Always Show Selection sehingga pengguna dapat dengan mudah menentukan item yang dipilih, bahkan ketika kontrol tidak memiliki fokus input.

• Jika pohon bertindak sebagai daftar isi, gunakan atribut Perluas Tunggal untuk menyederhanakan manajemen pohon. Dengan cara ini, hanya bagian pohon yang relevan yang diperluas.

• Hindari menyajikan pohon kosong. Jika pengguna membuat pohon, inisialisasi pohon dengan instruksi atau contoh item yang mungkin diperlukan pengguna.

  

  Dalam contoh ini, daftar awalnya disajikan dengan contoh.

• Jangan membuat simpul kontainer dapat diciutkan jika pengguna tidak memiliki alasan untuk menciutkannya. Melakukannya menambah kompleksitas yang tidak perlu.

• Jika performa beban bermasalah, hanya tampilkan kontainer tingkat pertama dan kedua pohon secara default. Anda kemudian dapat memuat data tambahan sesuai permintaan saat pengguna memperluas cabang di pohon.

• Jika pengguna memperluas atau menciutkan kontainer, buat status tersebut bertahan sehingga berlaku saat tampilan pohon ditampilkan di lain waktu, kecuali pengguna cenderung lebih suka memulai dalam status default. Persistensi harus berdasarkan tampilan per pohon, per pengguna.

• Jika kontainer tingkat tinggi memiliki konten serupa, pertimbangkan untuk menggunakan petunjuk visual untuk membedakannya.

  Salah:

  

  Dalam contoh ini, Kotak Surat dan Folder Arsip memiliki konten serupa. Setelah pohon diperluas lebih lanjut, sangat sulit bagi pengguna untuk mengetahui di mana mereka berada di pohon, yang menyebabkan kebingungan. Menggunakan ikon yang sedikit berbeda di bagian yang berbeda akan mengatasi masalah ini.

• Pertimbangkan kembali garis penghubung. Meskipun garis-garis ini dengan jelas menunjukkan hubungan antara kontainer dan simpul daun, garis-garis ini menambahkan kekacauan visual tanpa membantu pemahaman secara signifikan. Secara khusus, mereka tidak membantu ketika simpul berdekatan, juga tidak membantu ketika simpul sejauh ini terpisah sehingga pengguliran diperlukan.

  Benar:

  

  Lebih Baik:

  

  Garis penghubung melakukan sedikit untuk membantu pemahaman.

Interaksi

• Pertimbangkan untuk memberikan perilaku klik ganda. Mengklik dua kali harus memiliki efek yang sama dengan memilih item dan melakukan perintah defaultnya.

• Buat perilaku klik ganda berlebihan. Harus selalu ada tombol perintah atau perintah menu konteks yang memiliki efek yang sama.

• Jika item memerlukan penjelasan lebih lanjut, memberikan penjelasan dalam infotip.

  

  Dalam contoh ini, infotip memberikan informasi lebih lanjut.

• Berikan menu konteks perintah yang relevan. Perintah tersebut termasuk Potong, Salin, Tempel, Hapus atau Hapus, Ganti Nama, dan Properti.

• Saat menonaktifkan tampilan pohon, nonaktifkan juga label dan tombol perintah terkait.

Organisasi pohon

• Gunakan struktur hierarkis alami yang akrab bagi sebagian besar pengguna.
• Jika Anda tidak dapat menggunakan struktur seperti itu, cobalah untuk menyeimbangkan penemuan dengan model pengguna yang dapat diprediksi yang meminimalkan kebingungan.
• Untuk meningkatkan kemudahan penemuan dengan aman, tempatkan item dalam beberapa kontainer saat:
  • Item tidak terkait dengan item serupa lainnya (sehingga pengguna tidak menjadi bingung oleh asosiasi yang salah).
  • Hanya ada beberapa item yang terletak berlebihan seperti itu (sehingga pohon tidak menjadi kembung).
• Gunakan struktur hierarkis paling sederhana yang berfungsi dengan baik. Untuk melakukannya:
  • Tempatkan objek yang paling umum diakses di dua tingkat pertama pohon (tidak menghitung simpul akar), dan menempatkan objek yang kurang umum diakses lebih jauh ke hierarki.
  • Hilangkan kontainer tingkat menengah yang tidak perlu atau gabungkan kontainer tingkat menengah yang berlebihan.
• Lebih suka luas daripada kedalaman. Idealnya, pohon harus memiliki tidak lebih dari empat tingkat dan objek yang paling umum diakses akan muncul di dua tingkat pertama.
• Tentukan apakah Anda benar-benar membutuhkan simpul akar. Berikan simpul akar jika pengguna membutuhkan kemampuan untuk melakukan perintah di seluruh pohon (mungkin menggunakan menu konteks pada simpul akar). Jika tidak, pohon lebih sederhana dan lebih mudah digunakan tanpanya.
• Jika pohon memiliki metode akses alternatif seperti pencarian kata atau indeks, optimalkan pohon untuk penjelajahan dengan berfokus pada konten yang paling berguna. Dengan metode akses alternatif, konten pohon tidak harus komprehensif. Menyederhanakan pohon memudahkan pengguna untuk menemukan konten yang paling berguna.

Tampilan pohon kotak centang

• Tampilkan jumlah item yang dipilih di bawah daftar, terutama jika pengguna cenderung memilih beberapa item. Umpan balik ini membantu pengguna mengonfirmasi bahwa pilihan mereka sudah benar.

  

  Dalam contoh ini, jumlah item yang dipilih ditampilkan di bawah pohon. Jelas bahwa dua item tidak dipilih.

• Jika kemungkinan ada banyak item dan memilih atau menghapus semuanya, tambahkan tombol Pilih semua dan Hapus semua perintah.

• Gunakan kotak centang status campuran untuk menunjukkan pemilihan sebagian item dalam kontainer.

  Benar:

  

  Dalam contoh ini, kotak centang status campuran digunakan untuk menunjukkan pilihan parsial.

Ukuran dan penspasian yang direkomendasikan

ukuran dan penspasian tampilan pohon

Ukuran dan penspasian yang direkomendasikan untuk kontrol tampilan pohon.

• Pilih lebar tampilan pohon yang menghindari kebutuhan akan pengguliran horizontal untuk sebagian besar item saat pohon diperluas sepenuhnya.

• Sertakan tambahan 30 persen untuk mengakomodasi pelokalan.

• Pilih tinggi tampilan pohon yang menghilangkan pengguliran vertikal yang tidak perlu. Pertimbangkan untuk membuat tampilan pohon sedikit lebih panjang (atau bahkan lebih jika ada ruang yang tersedia) jika melakukannya mengurangi kebutuhan akan bilah gulir vertikal.

  Salah:

  

  Dalam contoh ini, membuat tampilan pohon sedikit lebih lebar dan lebih lama akan menghilangkan bilah gulir dalam banyak kasus. Dalam pohon khusus ini, hanya satu kontainer yang dapat dibuka pada satu waktu.

• Jika pengguna mendapat manfaat dari membuat tampilan pohon lebih besar, buat tampilan pohon dan jendela induknya dapat diubah ukurannya. Melakukannya memungkinkan pengguna untuk menyesuaikan ukuran tampilan pohon sesuai kebutuhan.

Label

Label kontrol

• Semua tampilan pohon memerlukan label. Tulis label sebagai kata atau frasa, bukan sebagai kalimat, berakhir dengan titik dua, dan menggunakan teks statis .

• Tetapkan kunci akses unik. Untuk panduan penugasan, lihat Keyboard.

• Gunakan kapitalisasi gaya kalimat.

• Posisikan label di atas kontrol, dan ratakan label dengan tepi kiri kontrol.

• Untuk tampilan pohon beberapa pilihan, tulis label sehingga jelas bahwa beberapa pilihan dimungkinkan. Label tampilan pohon kotak centang bisa kurang eksplisit.

  Salah:

  

  Dalam contoh ini, label tidak menyediakan informasi tentang beberapa pilihan.

  Lebih Baik:

  

  Dalam contoh ini, label dengan jelas menunjukkan bahwa beberapa pilihan dimungkinkan.

  Terbaik:

  

  Dalam contoh ini, kotak centang dengan jelas menunjukkan bahwa beberapa pilihan dimungkinkan, sehingga label tidak harus eksplisit.

Teks data

• Gunakan kapitalisasi gaya kalimat.

Teks instruksi

• Jika Anda perlu menambahkan teks instruksional tentang tampilan pohon, tambahkan di atas label. Gunakan kalimat lengkap dengan tanda baca akhir.

• Gunakan kapitalisasi gaya kalimat.

• Penjelasan tambahan yang membantu tetapi tidak perlu dijaga. Tempatkan informasi ini baik dalam tanda kurung antara label dan titik dua, setelah instruksi utama jika digunakan alih-alih label, atau di bawah kontrol.

  

  Dalam contoh ini, penjelasan tambahan berada di bawah kontrol.

Dokumentasi

Saat merujuk ke tampilan pohon:

• Gunakan teks label yang tepat, termasuk kapitalisasinya, tetapi jangan sertakan kunci akses garis bawah atau titik dua. Sertakan daftar kata atau daftar hierarkis jika konteks mengharuskan membuat perbedaan dari daftar reguler.
• Untuk item pohon, gunakan teks item yang tepat, termasuk kapitalisasinya.
• Lihat tampilan pohon sebagai tampilan pohon hanya dalam pemrograman dan dokumentasi teknis lainnya. Di tempat lain, gunakan daftar atau daftar hierarkis karena pohon istilah membingungkan bagi sebagian besar pengguna.
• Untuk menjelaskan interaksi pengguna, gunakan pilih untuk data, dan perluas dan ciutkan untuk tombol plus dan minus.
• Jika memungkinkan, format label dan item pohon menggunakan teks tebal. Jika tidak, letakkan label dan item dalam tanda kutip hanya jika diperlukan untuk mencegah kebingungan.

Contoh: Dalam daftar Konten, pilih Desain Antarmuka Pengguna.

Saat merujuk ke kotak centang dalam tampilan pohon:

• Gunakan teks label yang tepat termasuk kapitalisasinya, dan sertakan kotak centang kata. Jangan sertakan garis bawah kunci akses.
• Untuk menjelaskan interaksi pengguna, gunakan pilih dan hapus.
• Jika memungkinkan, format label menggunakan teks tebal. Jika tidak, letakkan label dalam tanda kutip hanya jika diperlukan untuk mencegah kebingungan.

Contoh: Di daftar Item untuk dicadangkan, pilih kotak centang Dokumen Saya.