Interaksi Manusia dan Komputer – 10

Create Meaningful Graphics, Icons, and Images & Choose the Proper Colors
Icon (Ikon)


Ikon adalah visualisasi gambar bergambar yang paling sering digunakan untuk mewakili objek dan tindakan yang dapat berinteraksi dengan pengguna atau yang dapat mereka manipulasi. Ikon berdiri sendiri di desktop atau di window atau bisa juga dikelompokkan bersama di toolbar.
Penggunaanya untuk memperkuat informasi penting. Gunakan ikon yang familiar, jelas, mudah, terbaca, sederhana, konsisten, langsung, efisien, dan diskriminatif.

Ikon menurut Marcus (1984)

Ikon, sesuatu yang terlihat seperti artinya.
Indeks, suatu tanda yang disebabkan oleh hal yang dirujuknya.
Simbol, sebuah tanda yang mungkin terlihat sangat sewenang – wenang dalam penampilannya.

Ikon yang berhasil

  • Tampak berbeda dari semua ikon lainnya.
  • Jelas apa yang dilakukannya atau diwakilinya.
  • Dapat dikenali jika tidak lebih dari 16 piksel persegi.
  • Terlihat bagus dalam warna hitam dan putih.

Memilih Ikon

  • Gunakan ikon yang ada (jika tersedia).
  • Gunakan gambar untuk kata benda, bukan kata kerja.
  • Gunakan gambar tradisional.
  • Pertimbangkan norma budaya dan sosial pengguna.

Multimedia

Fleksibilitas grafis dari Web memungkinkan dimasukannya media lain dilayar, termasuk gambar, foto, video, diagram, dan audio lisan.
Tujuan menambah multimedia adalah agar desain interaksinya bagus, bukan agar “berkilau”.

Graphics

  • Melengkapi konten tekstual, bukan sebagai penggantinya.
  • Sampaikan informasi yang tidak dapat diselesaikan secara efektif menggunakan teks.
  • Menyajikan gambaran situs.
  • Mengindentifikasi halaman situs.
  • Mengidentifikasi area konten.
  • Batasi penggunaan grafik yang membutuhkan waktu lama untuk dimuat (file terlalu besar).
  • Koordinasi grafik dengan semua elemen halaman lainnya.

Jenis Grafik

  • Navigasi, untuk mengidentifikasi tautan yang mungkin diikuti.
  • Representasional, untuk mengilustrasikan item yang disebutkan dalam teks.
  • Organisasi, untuk menghubungkan item yang disebutkan dalam teks.
  • Penjelasan, untuk menunjukkan bagaimana sesuatu atau proses bekerja.
  • Dekoratif, untuk memberikan daya tarik dan penekanan visual.

Warna

Warna menambahkan dimensi, atau realisme terhadap kegunaan layar. Warna juga dapat menarik perhatian pengguna, sehingga jika digunakan dengan benar, ini dapat menekankan pengaturan logis dari informasi, memfasilitasi diskriminasi komponen layar, menonjolkan perbedaan antar elemen, dan membuat tampilan lebih menarik dan atraktif.

Penggunaan Warna

Gunakan warna untuk membantu menginformasikan

  • Mengaitkan atau mengikat elemen ke dalam pengelompokkan
  • Memecah pengelompokkan informasi yang terpisah.
  • Informasi terkait yang dipisahkan secara luas dilayar.
  • Menyoroti atau menarik perhatian ke informasi penting dengan mematikannya dari informasi lain.

Gunakan warna sebagai kode visual:

  • Komponen layar
  • Struktur logis dari ide, proses, atau urutan.
  • Sumber informasi
  • Status informasi.

Gunakan warna untuk:

  • Menggambarkan benda – benda alam secara realistis.
  • Tingkatkan daya tarik layar.

Masalah yang berkaitan dengan warna

  • Kapasitas mendapatkan perhatian tinggi.
  • Gangguan dengan penggunaan layar tinggi.
  • Memvariasikan sensitivitas mata terhadap warna yang berbeda.
  • Kekurangan tampilan warna.

Memilih warna untuk halaman web

  • Warna harus selalu memiliki tujuan yang jelas.
  • Gunakan browser palet warna 216.
  • Gunakan warna default untuk link.
  • Jangan tampilkan teks non-tautan dalam warna tautan.
  • Uji semua warna.

Penggunaan warna yang harus dihindari

  • Mengandalkan warna secara ekslusif.
  • Terlalu banyak warna dalam satu waktu atau halaman.
  • Warna – warna yang sangat jenuh dan ekstrem secara spektral (merah dan biru, kuning dan ungu).
  • Warna kecerahan rendah untuk penggunaan aplikasi yang lama atau user yang lebih tua.
  • Warna di area kecil, atau untuk detail halus.
  • Warna kurang kontras (kuning dan putih; hitam dan coklat; merah, biru, coklat).
  • Warna jenuh penuh teks atau komponen layar lain yang sering dibaca.
  • Biru murni untuk teks, garis tipis, dan bentuk kecil.
  • Warna non-lawan (merah dan hijau dipinggiran layar berskala besar).
  • Menggunakan warna dengan cara tidak terduga.
  • Perbedaan satu warna untuk pengguna dengan kekurangan warna.
  • Menggunakan warna untuk meningkatkan keterbacaan teks yang padat.
  • Warna – warna yang berdekatan itu hanya berbeda pada besaran warna biru.
Print Friendly, PDF & Email