Disini saya akan mecoba menerjemahkan 3 jenis desain
pattern dari website http://ui-patterns.com/,
berikut merupakan penjelasannya :
1.
Thumbnail
·
Permasalahan
Kebutuhan
user untuk mendapatkan gambaran dari beberapa gambar tanpa harus men-download setiap
gambar dalam ukuran penuh.
·
Contoh
·
Pemakaian
ü Digunakan
apabila kita memiliki koleksi gambar yang ingin kita perlihatkan ke user.
ü Digunakan
apabila men-download versi ukuran penuh dari semua gambar yang ingin kita perlihatkan
ke user akan memakan banyak bandwidth, tetapi juga akan memakan waktu lama bagi
user untuk men-download.
ü Digunakan
apabila kita ingin mengizinkan user untuk menelusuri koleksi gambar dengan
cepat.
ü Digunakan
apabila kita ingin memberikan user kesan dari suatu gambar, film atau halaman
sebelum memutuskan untuk men-download aslinya.
·
Solusi
ü Sebuah
thumbnail adalah versi miniatur dari gambar yang lebih besar. Thumbnail
bisa mengilustrasikan grafis apapun seperti : gambar, film atau bahkan
screenshot dari sebuah halaman web.
ü Dimensi
(lebar dan tinggi) dari beberapa thumbnail muncul berdampingan satu sama lain
adalah sama persis. Untuk menjaga proporsi yang sama dalam gambar
thumbnail seperti yang ditemukan di gambar aslinya, baik mengubah ukuran dan memotong
gambar adalah bagian dari proses manipulasi gambar.
ü Ukuran
umum thumbnail :
·
Manfaat
Menggunakan
thumbnail menyediakan user untuk melihat gambaran dari beberapa gambar atau
film di dalam satu halaman web. Selanjutnya, thumbnail menghemat bandwidth
karena user tidak harus mengklik semua gambar untuk menemukan apa yang kita
cari, tetapi dapat dikendalikan oleh preview yang disediakan oleh thumbnail.
2.
Drag
and Drop
·
Permasalahan
Kebutuhan
user untuk melakukan operasi pada satu atau lebih objek dengan memindahkannya dari
satu tempat ke tempat lain.
·
Contoh
Pada
gambar diatas kita akan membuat sebuah perangko dengan cara menarik dan meletakkan
gambar yang kita inginkan ke lokasi tersebut dengan extensi PNG, JPG atau GIF.
·
Pemakaian
ü Digunakan
apabila kita ingin membiarkan user untuk melakukan tugas-tugas yang lebih kompleks
melalui manipulasi langsung dengan pendekatan (WYSIWYG ).
ü Digunakan
apabila kita ingin menghindari paksaan user untuk pergi ke halaman lain untuk
menata kembali tata letak.
·
Solusi
Membiarkan
user memilih dan mengatur ulang konten dengan cara menariknya ke layar.
·
Manfaat
Secara
naluriah, banyak user yang mencoba menarik dan meletakkan benda-benda di user
interface. Hal ini dilihat sebagai salah satu cara yang paling efektif untuk
mengatur ulang item dalam daftar, memindahkan objek dari satu tempat ke tempat
yang lain, atau bahkan meng-upload file.
·
Diskusi
Drag
dan Drop tidak sepenuhnya dapat diakses, kita mungkin ingin mempertimbangkan
cara-cara alternatif lain untuk menata ulang modul konten kita.
3.
Table
Filter
·
Permasalahan
Kebutuhan
user untuk menyaring kategori data yang ditampilkan di dalam tabel dengan kolom.
·
Contoh
·
Pemakaian
ü Digunakan
apabila kita memiliki hasil data set yang sangat besar untuk ditampilkan dalam
satu halaman.
ü Digunakan
apabila satu atau lebih kolom tabel dapat diringkas dengan mudah ke dalam
kategori untuk difilter.
·
Solusi
Memberikan
masukan dropdown yang menyajikan kategori dimana user dapat menyaring data set. Setelah
user memilih kategori dan klik "Filter" hanya baris yang termasuk ke
dalam kategori yang dipilih yang akan ditampilkan.
Secara
opsional beberapa filter dapat ditambahkan. Jika solusi ini dipilih, kita
harus memperbarui kategori setiap kotak dropdown ketika satu kategori dipilih.
·
Manfaat
Menambahkan
filter untuk tabel kita memungkinkan user mengurangi jumlah item yang
ditampilkan. Filter membantu mempersempit hasil pencarian, membiarkan user
menemukan hasil yang lebih akurat.
Sumber :
0 komentar:
Posting Komentar