Create Meaningful Graphics,

Icons, and Images

By WDP Team
6706174031 Radhitya Kurnia Wijaya
6706174035 Hizkia Tupa Christianto Sihombing
6706174130 Yoga Widhi Kurnia
Latar Belakang

Era grafis dalam desain antarmuka dan layar dimulai dengan komputer Xerox Star di tahun
1970-an dan sepenuhnya berkembang dengan munculnya Apple Lisa dan Macintosh di
pertengahan 1980-an. Sistem GUI dengan cepat mulai melengkapi sistem berbasis teks
sebelumnya yang telah ada selama tiga dekade.
Ketika Microsoft akhirnya memasukkan gambar dengan sistem Windows mereka, sistem
GUI dengan cepat menjadi pengguna yang dominan antarmuka. Fitur grafis yang signifikan
dari sistem GUI adalah penggunaan ikon (simbolik representasi objek, seperti aplikasi, alat
kantor, dan lokasi penyimpanan) dan representasi simbol aksi yang bisa diterapkan pada
objek.
Evolusi grafis dalam desain antarmuka diperluas lebih lanjut pada 1990-an dengan
matangnya World Wide Web. Web memungkinkan penyertaan lainnya dengan mudah
media di layar, termasuk gambar, foto, video, diagram, gambar, dan audio lisan. Mereka
dapat menarik perhatian pengguna, menambah minat ke layar, mendukung interaksi
komputer, dan membantu mengatasi hambatan bahasa. Penelitian selama bertahun-tahun
telah menunjukkan bahwa penggunaan grafik dapat memfasilitasi pembelajaran dan
mengingat. Gambar, misalnya, lebih mudah dikenali dan diingat daripada kata-kata.
Icons

Ikon adalah gambar bergambar yang paling sering digunakan untuk

mewakili objek dan tindakan yang dengannya pengguna dapat berinteraksi dengan
atau mereka dapat memanipulasi. Ikon dapat berdiri sendiri di desktop atau di
window, atau dikelompokkan bersama di toolbar. Penggunaan sekunder ikon
adalah untuk memperkuat informasi penting, seperti ikon peringatan di kotak
pesan dialog.
Kinds of Icons

Penggunaan ikon untuk mencerminkan objek, ide, dan tindakan bukanlah hal baru bagi umat
manusia. Kita sudah sudah ada sebelumnya. Manusia purba (100.000 tahun yang lalu)
menggunakan piktograf lalu ideograf untuk berkomunikasi.

Rogers (1989) memberikan definisi yang diperluas untuk jenis ikon.

 Resemblance - Gambar yang terlihat seperti apa yang dimaksud.
 Symbolic - Gambar abstrak yang mewakili sesuatu.
 Exemplar - Gambar yang menggambarkan contoh atau karakteristik dari sesuatu.
 Arbitrary - Sebuah gambar yang sepenuhnya sewenang-wenang dalam penampilan yang
artinya harus dipelajari.
 Analogy - Suatu gambar yang secara fisik atau semantik dikaitkan dengan sesuatu.
Characteristics of Icons

Ikon memiliki karakteristik kualitas teknis sintaksis, semantik, dan pragmatic (Marcus,
1984).
Sintaksis mengacu pada struktur fisik ikon. Apakah kotak, bulat, merah,hijau, besar, kecil?
Apakah persamaan dan perbedaannya jelas? Bentuk dan warna yang serupa dapat
digunakan untuk mengklasifikasikan sekelompok ikon terkait, mengkomunikasikan
hubungan bersama.
Semantik adalah makna ikon. Untuk apa yang dirujuk, file, keranjang sampah, atau
beberapa benda lain?
Apakah ini jelas? Pragmatik adalah bagaimana ikon diproduksi secara fisik dan
digambarkan.
Apakah relolusi layar cukup untuk menggambarkan ikon dengan jelas? Sintaksis, semantik,
dan pragmatik menentukan efektivitas dan kegunaan ikon.
Influences on Icon Usability

The following factors influence an icon’s

usability:
■■ Also consider the
■■ Provide icons that are :
—— Context in which the icon is used.
—— Familiar.
—— Expectancies of users.
—— Clear and Legible.
—— Complexity of task.
—— Simple.
—— Consistent.
—— Direct.
—— Efficient.
—— Discriminable.
Choosing Icons

Desain ikon adalah proses yang penting. Ikon yang bermakna dan dapat dikenali akan
mempercepat pembelajaran dan mengingat kembali dan menghasilkan sistem yang jauh
lebih efektif. Desain yang buruk akan menyebabkan kesalahan, keterlambatan, dan
kebingungan. Sementara seni desain ikon masih berkembang, disepakati bahwa
kemampuan suatu sistem dibantu dengan mematuhi pedoman desain ikon berikut.
Ikon yang benar
 Terlihat berbeda dari semua ikon lainnya.
 Jelas apa yang dilakukan atau diwakilinya.
 Dapat dikenali bila tidak lebih besar dari 16 piksel persegi.
 Terlihat bagus dalam hitam putih seperti dalam warna.
Choosing Icon Images

■ Use existing icons when available.

Gunakan ikon standar ini jika tersedia. Ini akan mempromosikan konsistensi lintas sistem,
menghasilkan semua manfaat kinerja yang disediakan oleh konsistensi.
■ Use images for nouns, not verbs.
Suatu objek, atau kata benda, jauh lebih mudah untuk diwakili secara gambar daripada
suatu tindakan atau kata kerja. Pilih kata benda untuk ikon bila memungkinkan.
■ Use traditional images.
Gambar kuno dan tradisional sering kali berfungsi lebih baik yang lebih baru. Mereka sudah
ada lebih lama, dan lebih banyak orang mengenalinya.
■ Consider user cultural and social norms.
Pertimbangkan norma budaya dan sosial pengguna. Desain ikon yang tidak tepat dapat
menimbulkan masalah secara internasional. Norma sosial berbeda-beda, sehingga ada
variasi besar dalam apa yang dapat dikenali dan diterima di seluruh dunia.
Creating Icon Images

 Create familiar and concrete shapes.

 Create visually and conceptually distinct shapes.
— Incorporate unique features of an object.
— Do not display within a border.
 Clearly reflect objects represented.
 Simply reflect objects represented, avoiding excessive detail.
 Create as a set, communicating relationships to one another through common
shapes.
 Provide consistency in icon type.
 Create shapes of the proper emotional tone.
Drawing Icon Images

Berikan konsistensi dalam bentuk di atas berbagai ukuran.

■ Jangan menggunakan panah segitiga dalam desain untuk menghindari
kebingungan dengan simbol sistem lainnya.
■ Ketika ikon digunakan untuk merefleksikan atribut yang berbeda-beda,
ungkapkan atribut-atribut ini dengan semakna mungkin.
■ Berikan skala dan orientasi yang tepat.
■ Gunakan perspektif dan dimensi jika memungkinkan.
■ Temani Ikon dengan label untuk memastikan makna yang dimaksud.
Icon Animation and Audition

■ Animasi:
- Gunakan:
• Untuk memberikan umpan balik.
• Untuk minat visual :
- Jadikan interupsi atau independen dari interaksi utama pengguna.
- Jangan menggunakannya untuk dekorasi.
- Mengizinkan untuk dimatikan oleh pengguna.
- Untuk animasi yang lancar, tampilkan gambar dengan 16 frame atau lebih per detik.

■ Audisi:
–– Pertimbangkan ikon pendengaran.
Multimedia

Fleksibilitas grafis dari Web memungkinkan dimasukkannya media lain di layar,

termasuk gambar, foto, video, diagram, gambar, dan audio lisan. Namun,
ketersediaan elemen antarmuka tambahan ini merupakan pedang bermata dua. Di
satu sisi, berbagai media bisa menjadi teknik komunikasi yang kuat dan menarik
perhatian.
Multimedia dapat menarik perhatian pengguna, menambah minat pada layar,
menghibur, dan dengan cepat menyampaikan informasi yang lebih sulit untuk
disajikan secara tekstual. Itu juga dapat membuat Web jauh lebih mudah diakses
oleh para penyandang cacat. Di sisi lain, penggunaan multimedia yang efektif
dalam desain telah terhambat oleh kurangnya pengetahuan tentang bagaimana
berbagai media dapat digunakan, dan kelangkaan pedoman desain yang
diterapkan.
 Graphics

■ Gunakan grafik untuk

- Melengkapi konten tekstual, bukan sebagai pengganti.
- Sampaikan informasi yang tidak dapat dicapai secara efektif menggunakan teks.
- Tingkatkan navigasi melalui
• Menyajikan ikhtisar situs.
• Mengidentifikasi halaman situs.
• Mengidentifikasi area konten.

■ Batasi penggunaan grafis yang membutuhkan waktu lama untuk memuat.

■ Koordinasikan gambar dengan semua elemen halaman lainnya.
■ Grafik tidak boleh terlihat seperti dekorasi gratis atau iklan spanduk.
Graphics

Grafik yang terkandung dalam halaman Web memiliki beberapa tujuan berbeda,
yang dapat diklasifikasikan sebagai berikut:
■■ Navigasi. Untuk mengidentifikasi tautan yang mungkin diikuti.
■■ Representasi. Untuk mengilustrasikan item yang disebutkan dalam teks.
■■ Organisasi. Untuk menggambarkan hubungan antara item yang disebutkan
dalam teks.
■■ Penjelasan. Untuk menunjukkan cara kerja atau proses.
■■ Dekoratif. Untuk memberikan daya tarik dan penekanan visual.
Images

Pastikan semua gambar menyampaikan pesan yang dituju.

■ Umum:
- Gunakan gambar standar.
- Meniru objek dunia nyata.
- Gunakan gambar secara konsisten.
- Menghasilkan gambar yang dapat dibaca.
- Berikan teks atau label deskriptif dengan semua gambar.
- Membedakan gambar navigasi dari gambar dekoratif.
- Minimalkan :
• Jumlah gambar yang disajikan.
• Ukuran gambar yang disajikan.
• Batasi gambar tunggal hingga 5KB.
• Batasi gambar halaman hingga 20KB.
• Menyediakan gambar ukuran thumbnail.
• Animasi gambar.
Hindari gambar yang asing atau serampangan.
Images

■ Warna:
- Minimalkan jumlah warna dalam suatu gambar.

■ Format:
- Menghasilkan gambar dalam format yang paling tepat.
• GIF.
• JPEG.

■ Internasionalisasi:
- Menyediakan internasionalisasi gambar.

■ Desain:
- Batasi gambar besar di atas lipatan halaman.
- Gunakan gambar latar belakang sederhana.
–– Menggunakan kembali gambar pada banyak halaman.
Image Maps

■ Gunakan:
- Untuk menyediakan tautan navigasi ke konten lain.
■ Keuntungan:
- Dapat disusun dalam struktur yang bermakna dan jelas.
- Lebih cepat memuat daripada gambar yang terpisah.
■ Kekurangan:
- Mengkonsumsi sejumlah besar ruang layar.
- Hot spot tidak selalu jelas.
- Lokasi seseorang dalam peta gambar tidak selalu jelas.
■ Pedoman:
- Gunakan dengan hati-hati.
- Memberikan isyarat dan penekanan visual yang efektif untuk memudahkan
mengidentifikasi batas tautan.
- Pastikan peta gambar dapat diakses oleh tunanetra.
Photographs/Pictures

■ Gunakan:
- Ketika setiap aspek gambar relevan.

■ Pedoman:
- Gunakan format JPEG.
- Di halaman awal, tampilkan versi kecil.
• Menampilkan gambar ukuran thumbnail.
• Memperbesar detail paling relevan.
• Tautan ke foto yang lebih besar yang menunjukkan detail sebanyak yang diperlukan.
- Sertakan lebih sedikit orang dan objek dalam pengaturan yang tidak terlalu rumit
daripada di foto mencetak.
–– Menekankan pemotretan jarak dekat dengan latar belakang bersih.
Video

■ Penggunaan:
- Untuk menunjukkan hal-hal yang bergerak atau berubah seiring waktu.
- Untuk menunjukkan cara yang tepat untuk melakukan tugas.

■ Untuk menampilkan acara yang tidak dapat dilihat secara langsung.

■ Untuk menyampaikan perilaku dan emosi manusia.

- Untuk memberikan pesan pribadi.
- Untuk menarik perhatian.

■ Kekurangan:
- Mahal untuk diproduksi.
- Lambat untuk mengunduh.
- Kecil dan sulit membedakan detail.

■ Pedoman:
- Jangan pernah mengunduh video secara otomatis ke halaman.
- Buat segmen pendek.
- Berikan kontrol, termasuk yang untuk bermain, berhenti, dan berhenti.
- Pertimbangkan untuk menggunakan
• Video yang ada.
• Audio saja.
• Peragaan slide dengan audio.
Diagrams

■ Penggunaan:
- Untuk menunjukkan struktur benda.
- Untuk menunjukkan hubungan objek.
- Untuk menunjukkan aliran suatu proses atau tugas.
- Untuk mengungkapkan tatanan temporal atau spasial.

■ Jenis:
— Flow charts.
— Cause and effect charts.
— Gantt charts.
— Entity relationship diagrams.
— Organization charts.
— Network diagrams.

■ Bagian:
- Bentuk.
- Garis.
- Label.

■ Pedoman:
- Berikan diagram sederhana.
–– Berikan diagram cutaway atau tampilan meledak untuk menggambarkan poin-poin utama.
Tabel 11.2: Fitur Diagram yang Diperlukan

• Pembuatan Diagram
• Biarkan pengguna mengubah ukuran bentuk dan garis.
• Biarkan pengguna menyelaraskan elemen secara otomatis dan dengan tangan.
• Biarkan pengguna mengatur elemen secara otomatis dan dengan tangan.
• Biarkan pengguna mengatur diagram menggunakan algoritme yang meminimalkan
• melintasi garis dan membuat gambar lebih kompak.
• Biarkan pengguna memilih elemen tunggal atau banyak menggunakan pilihan standar
metode.
• Berikan kisi dan metode untuk menyalakan atau mematikannya.
• Berikan opsi snap-to-grid.
• Berikan metode untuk mengubah ukuran sel grid.
• Buat tabel atau versi teks dari data diagram tersedia.
• Pastikan tipografi, ukuran, dan warna tidak dikodekan dengan keras
• opsi aksesibilitas akan berfungsi.
• Berikan metode untuk mencetak.
Palette
 Biarkan pengguna memilih bentuk dan garis dari palet.
 Tetapkan bentuk atau garis yang dipilih dalam mode ulang sehingga pengguna tidak
harus terus memilihnya.
 Berikan metode untuk memasang dan melepas palet.
 Berikan metode untuk menjaga palet di atas atau terlihat.
 Berikan palet bentuk standar untuk domain.

Shapes
 Biarkan pengguna memindahkan bentuk.
 Biarkan pengguna mendorong bentuk ke posisi menggunakan tombol panah.
 Biarkan pengguna menambahkan warna dan tekstur ke bentuk.
 Berikan titik jangkar yang diberi jarak secara teratur ke tempat garis putus
 (lampirkan diri mereka secara otomatis).
Lines
 Biarkan pengguna menambahkan garis ke bentuk di titik jangkar.
 Biarkan pengguna memindahkan garis yang tidak bergantung pada bentuk (hanya
pembuatan).
 Biarkan pengguna memindahkan titik akhir garis dari satu tempat di jendela
 bentuk ke yang lain.
 Tawarkan berbagai gaya garis yang sesuai (lurus, melengkung, dan
 sebagainya).

Label
 Berikan label untuk bentuk dan garis.
 Pastikan label tetap melekat secara visual pada elemen yang mereka gambarkan.
 Jika label dapat dimatikan, tunjukkan label secara otomatis ketika
 pengguna memegang pointer di atas elemen (seperti ToolTip).
 Pastikan label tidak tumpang tindih