DESAIN INFORMASI DAN NAVIGASI

Presentasi berjudul: "DESAIN INFORMASI DAN NAVIGASI"— Transcript presentasi:

1 DESAIN INFORMASI DAN NAVIGASI
A. Ridwan Siregar

2 DESAIN NAVIGASI DAN INFORMASI
Elemen navigasi Penempatan blok navigasi Desain Informasi: Desain konten Penempatan blok konten Kata-kata dan presentasi informasi untuk memfasilitasi pemahaman ARS AI Modul-9: Desain Informasi dan Navigasi

3 AI Modul-9: Desain Informasi dan Navigasi
DESAIN NAVIGASI Pengguna membentuk suatu model mental dari struktur suatu situs Ikuti struktur situs dengan jelas dan konsisten Refleksikan struktur dalam pilihan URL Letakkan logo atau banner pada setiap halaman untuk memperkuat kesadaran tempat Gunakan kode warna atau pembeda lain untuk mengindikasikan sub area dalam suatu situs ARS AI Modul-9: Desain Informasi dan Navigasi

4 AI Modul-9: Desain Informasi dan Navigasi
URL Buat URL pendek Gunakan suatu nama domain yang mudah diingat dan mudah dieja Gunakan nama yang bermakna sebagai bagian dari URL Gunakan URL yang mudah diketik, hindari tanda baca dan karakter khusus URL sebaiknya merefleksikan struktur logis suatu situs URL sebaiknya dapat dipotong, memungkinkan pengguna berpindah pada struktur situs dengan memotong ujungnya ARS AI Modul-9: Desain Informasi dan Navigasi

5 AI Modul-9: Desain Informasi dan Navigasi
DESAIN TEKS Pengguna cenderung memindai (scan) dari pada membaca Perhatian biasanya tertuju pada teks (78%) Pengguna memindai istilah yang penting (dengan cetak tebal atau warna biru), link, dan tulisan di bawah gambar Pengguna memindai paragraf, sering hanya membaca kalimat pertama (hanya 16% membaca kata demi kata) Pengguna berharap satu topik per paragraf. Pengguna akan melompat ke lainnya jika mereka tidak menangkap beberapa kata pertama pada paragraf Pengguna tidak suka membaca pada layar. Gunakan kurang dari 50% jumlah kata ekuvalen pada versi cetak. Membaca pada layar lebih lambat 25% dibanding pada kertas. ARS AI Modul-9: Desain Informasi dan Navigasi

6 HALAMAN PENDEK ATAU PANJANG (SCROLLING)
Hanya sekitar 10% pengguna menggulung layar secara penuh setiap halaman. Pengguna mengatakan mereka tidak suka menggulung tetapi kenyataannya ingin menggulung Halaman panjang berfungsi lebih baik. Tempatkan elemen navigasi dan halaman paling penting pada layar pertama(di atas lipatan dalam istilah surat kabar tradisional) Hindari penggunaan garis horizontal. Pengguna mengira teks sudah habis dan tidak menggulung lagi ke bawah ARS AI Modul-9: Desain Informasi dan Navigasi

7 GUNAKAN GAYA PENULISAN PIRAMIDA TERBALIK
Tulisan ilmiah tradisional dimulai dengan bangunan fondasi umum ke kesimpulan dalam gaya piramida: Pernyataan masalah Karya terkait Metodologi Hasil Kesimpulan Jurnalis menggunakan gaya piramida terbalik, mulai dengan kesimpulan utama, dan kemudian secara progresif lebih rinci Informasi pendukung Latar belakang ARS AI Modul-9: Desain Informasi dan Navigasi

8 AI Modul-9: Desain Informasi dan Navigasi
BANGUN KOMUNITAS Agar orang-orang datang kembali ke situs anda: Perubahan adalah baik Buat fitur mingguan atau bulanan Berikan sebelum anda terima, berikan dulu sesuatu kemudian baru tanya sesuatu ketika akan keluar Buat buzz, jalankan game, tantang situs lain dalam suatu kontes, buat pemberian suara (vote) pada sesuatu ARS AI Modul-9: Desain Informasi dan Navigasi

9 AI Modul-9: Desain Informasi dan Navigasi
DESAIN CITRA (IMAGE) Gunakan format yang tepat: Online, gunakan GIF atau PNG untuk citra kecil, gambar baris, ikon, diagram, atau apa saja kecuali foto Online, use JPEG untuk ukuran penuh dan foto Untuk arsip dan editing, gunakan PNG karena memiliki kompresi yang bagus ARS AI Modul-9: Desain Informasi dan Navigasi

10 AI Modul-9: Desain Informasi dan Navigasi
GIF GIF terlihat baris demi baris Maksimum 256 warna Satu indeks warna dapat dispesifikasi sebagai warna transparan Urutan citra dalam satu file untuk animasi ARS AI Modul-9: Desain Informasi dan Navigasi

11 AI Modul-9: Desain Informasi dan Navigasi
JPEG JPEG mentransformasikan citra ke dalam suatu ruang frekuensi Sangat bagus untuk foto Tidak tersedia untuk transparansi Satu citra per file ARS AI Modul-9: Desain Informasi dan Navigasi

12 AI Modul-9: Desain Informasi dan Navigasi
PNG Indeks warna hingga 256 warna Warna sebenarnya mencapai 48 bits per pixel Warna cita greyscale hingga 16 bits per pixel Progressive display Transparensi Satu citra per file Dukungan untuk PNG pada browser dan aplikasi ARS AI Modul-9: Desain Informasi dan Navigasi

13 AI Modul-9: Desain Informasi dan Navigasi
Terima kasih ARS AI Modul-9: Desain Informasi dan Navigasi