Sistem Multimedia Pertemuan 10

Multimedia Design Principles

Navigasi

• Pertanyaan Kunci

– Where am I? (Di mana aku ?)

– Where have I been? (Dari mana aku?)

– Where can I go to? (Ke mana aku bisa pergi?)

• Teknik Navigasi

– Browsing

– Searching

– Site Maps

– Indexes

Navigasi

• Menyediakan indikator - ‘you are here’

– Cascading menus

– Thumbnail maps

– Color coding

• Menyediakan ‘Search facilities’

– Sitemaps

Atribut Usability

• Kecocokan antara sistem dan dunia nyata

• Kendali dan kebebasan 􀃆 menyediakan undo dan redo

• Konsistensi dan standarisasi 􀃆 “exit” atau “quit” ?

• Pencegahan kesalahan

• Fleksibilitas dan efisiensi penggunaan ->expert/basic mode

• Estetika dan perancangan minimalis

• Bantu user untuk mengenali, mendiagnosa, dan memperbaiki kesalahan -> understandable error Message

Isu Perancangan Antarmuka

• Hyperlinks, icons dan buttons

• Penempatan (Alignment)

• Text

• Warna

• Ukuran dan resolusi layar

Hyperlinks, Icons, dan Buttons

• Gunakan warna umum untuk mengindikasikan status hyperlinks (selected, rollover, atau clicked)

• Sediakanicons/buttons yang masuk akal

• Jangan paksa user untuk mengenali icon baru/spesial

• Bagaimana buttons diaktifkan/dipilih -> highlight atau perubahan bentuk

Penempatan (Alignment)

• Baik untuk elemen ‘horizontal’ maupun ‘vertical’

• Alignment yang baik membantu komunikasi yang lebih baik / bersih

• Centered text terlihat tidak indah dan menambah waktu membaca

• Keseragaman alignment untuk semua elemen dikeseluruhan halaman website

Text

• Membutuhkan waktu yang lebih lama untuk membacadari layar daripada dari buku

• Perhatikan hirarki informasi

• Tampilkan informasi kunci lebih dulu

• Dalam menulis : langsung, padat, paragraf pendek dan gunakan point-point (bulleted lists)

• Batasi penggunaan typefaces : max 2 typeface

• Sans-serif faces lebih mudah dibaca

Warna

• Gunakan kombinasi yang sederhana 􀃆 teori warna

• Warna hangat (warm colors) terlihat lebih besar dari warna dingin (cool colors)

• Warna cerah (bright colors) lebih besar dari warna gelap (dark colors)

• Warna kuat (intense), warna primer (saturated) dapat menyebabkan mata lelah jika digunakan dalam jumlah besar, jadi jangan gunakan warna-warna tersebut sebagai latar belakang (background)

Poin-Poin Perancangan Interface

• Tentukan di mana area kendali (control area) dan area

utama (stage area)

• Pilih gambar background yang tidak ramai dan gambar

button yang tepat

• Perlihatkan ke-penting-an suatu informasi secara visual

• KISS

Metafora

• Aplikasi yang kompleks dapat dimengerti dengan lebih mudah jika user interfacenya digambarkan dengan sesuatu yang sudah umum

• Metafor yang tepat memudahkan user untukbbelajar/mengingat aturan/prosedur aplikasi sesedikit mungkin

Isu-Isu Metafora

• Digunakan untuk menggambarkan aplikasi, bukan suatu button

• Memungkinkan beberapa metafora dalam satu aplikasi

• Metafora tidak harus selalu ada

• Gunakan metafora yang akan dimengerti oleh lebih banyak user

• Beberapa metafora belum tentu dikenal pada kebudayaan yang berbeda

http://