UI.patterns.com
v Explaining
the process(inline help box)
·
Ringkasan masalah
Kebutuhan pengguna
informasi bantu terletak dekat dengan interaksi mereka akan melakukan.
·
Contoh:
·
Penggunaan
o
Gunakan ketika berinteraksi dengan situs
web ini tidak selalu intuitif dan jelas dalam dirinya sendiri.
o
Gunakan inline tips untuk dokumen Anda
antarmuka
o
Digunakan ketika Anda ingin memotivasi
pengguna untuk mulai menggunakan sistem.
o
Digunakan ketika Anda ingin membantu
pengguna memulai dengan aplikasi web Anda.
o
Digunakan ketika Anda ingin panduan
pengguna untuk mendapatkan awal yang baik dengan aplikasi web Anda.
o
Gunakan untuk lembut memperkenalkan
fungsionalitas untuk pengguna baru dan terlatih.
o
Gunakan fungsi 'Sembunyikan' untuk
menghindari frustrasi pengguna berpengalaman dan terlatih.
·
Contoh yang lain:
·
Solusi
Dokumen Anda antarmuka
in-line dengan bantuan deskriptif blok. Jika informasi penting perlu
dikomunikasikan kepada pengguna, dapat dengan mudah dijelaskan dengan inline
kotak bantuan yang terletak di atas atau bawah konten utama dari layar.
Kotak bantuan inline
perlu dibedakan dari konten normal. Seperti kotak bantuan itu sendiri
bukanlah bagian dari fungsi utama, itu adalah ide yang baik untuk menambah gaya
untuk itu yang secara visual memisahkan kotak bantuan dari bahwa
fungsi. Cara mudah untuk melakukan ini adalah dengan menerapkan warna
latar belakang dan font yang lain ke kotak bantuan.
Selain itu, untuk
menghindari ketidakpuasan pengguna dengan kotak bantuan, sebuah fitur yang
besar dari kotak sisip bantuan adalah untuk memiliki fungsi "Sembunyikan
kotak ini". Setelah pengguna telah mengklik link ini, kotak bantuan
akan pernah ditampilkan ke pengguna lagi.
Namun, Anda mungkin
ingin memberikan pilihan bagi pengguna untuk mengaktifkan kembali semua bantuan
kotak untuk memungkinkan pengguna untuk mendapatkan yang membantu tangan
pertama yang ia mulai mendapatkan.
·
Manfaat
Menyediakan pengguna
dengan informasi bantu, terletak dekat dengan interaksi, membuat mengakses dan
mengkonsumsi instruksional info sederhana dan mudah. Dalam bantuan baris
kotak yang jauh lebih menarik daripada membaca FAQ terputus atau bagian
bantuan.
Dengan memungkinkan pengguna untuk
dengan mudah menutup/menyembunyikan setiap kotak bantuan, pengguna tidak
terganggu dengan informasi yang tidak perlu sekali telah dipahami.
v Menus(AccordionMenu)
·
Ringkasan masalah
Kebutuhan pengguna
untuk menavigasi antara bagian-bagian utama situs sementara masih mampu untuk
secara cepat menelusuri ke sub-bagian lain.
·
Contoh:
·
Penggunaan
o
Digunakan ketika Anda ingin manfaat menu
normal sidebar, tapi tidak memiliki ruang untuk daftar semua pilihan.
o
Gunakan ketika ada lebih dari 2 bagian
utama pada website masing-masing dengan 2 atau lebih subbagian.
o
Gunakan ketika Anda memiliki kurang dari
10 bagian utama
o
Gunakan ketika Anda hanya memiliki dua
tingkat untuk menunjukkan dalam navigasi utama.
·
Contoh yang lain:
·
Solusi
o
Setiap utama / bagian memiliki panel,
yang setelah mengklik dapat diperluas secara vertikal maupun horizontal dalam
subbagian nya. Vertikal Accordion Menu yang paling sering digunakan.
o
Transisi dari menampilkan tidak ada
pilihan judul untuk menampilkan daftar judul pilihan dapat dilakukan baik
dengan refresh halaman atau dengan javascript DHTMLanimasi.
o
Ketika satu panel diklik itu diperluas,
sementara panel lainnya runtuh.
·
Manfaat
Accordion Menu sering
digunakan sebagai navigasi utama situs web. Dengan cara ini, itu bertindak
seperti tab navigasi, sebagai item menu yang runtuh ketika sebuah panel baru
diklik. Mana tab navigasi yang paling sering digunakan secara horizontal,
menu akordeon yang paling sering digunakan secara vertikal.
Accordion Menu namun juga dapat
berfungsi dengan baik sebagai sub navigasi untuk bagian tertentu dari situs
web.
v Search(search
filters)
·
Ringkasan masalah
Pengguna perlu
melakukan pencarian menggunakan filter kontekstual yang mempersempit hasil
pencarian.
·
Contoh:
·
Penggunaan
o
Gunakan ketika hasil pencarian untuk
permintaan sangat banyak dan mengkaji mereka akan sangat memakan waktu.
o
Gunakan ketika hasil pencarian
dapat dikategorikan ke dalam filter: pencarian
harus kontekstual.
o
Jangan gunakan ketika pencarian Anda
tidak mudah dikategorikan ke dalam filter.
·
Contoh yang lain:
·
Solusi
Perhalus hasil
pencarian secara real time menggunakan satu atau lebih filter.
Menyajikan segala
sesuatu yang tersedia, dan kemudian mendorong pengguna untuk semakin menghapus
apa yang mereka tidak perlu dengan menerapkan satu atau lebih
filter. Dengan segera umpan balik, pengalaman digunakan dari sebuah
monolog ke percakapan. Hanya menggunakan pola ini ketika membantu menyederhanakan
pengalaman pencarian.
Sekarang pengguna
dengan daftar filter kategori, dan biarkan pengguna filter ini dengan
memasukkan masukan di kotak teks, memilih pilihan dalam kotak dropdown atau
bahkan melalui kotak centang atau radiobuttons. Setiap kali pengguna
membuat perubahan ke salah satu Field input, hasil secara otomatis diperbarui.
·
Manfaat
Dengan pencarian, Anda
mulai dengan apa-apa dan berpotensi berakhir dengan apa-apa.Counter untuk
pendekatan ini adalah penyaringan, dimana kami menyajikan segala sesuatu yang
tersedia, dan kemudian mendorong pengguna untuk semakin menghapus apa yang
mereka tidak perlu.
Menggunakan pola hidup
filter bergerak pencarian dari sebuah monolog ke percakapan.Pengguna
dapat semakin menghapus apa yang mereka tidak membutuhkan langkah
demi langkah dan menerima umpan balik segera.
Ketika Anda mempertimbangkan
keputusan Anda menggunakan filter ini, mempertimbangkan apakah pola merumitkan
atau menyederhanakan pencarian. Jika tidak apa-apa lagi daripada
menyederhanakan mencari hasil penelusuran yang benar, memilih solusi lain.
