Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

Gaya Interaksi Interaksi Manusia dan Komputer. Topik Bahasan  Pesan kesalahan  Rancangan nonantropomorfik  Perancangan layar  Warna.

Presentasi serupa


Presentasi berjudul: "Gaya Interaksi Interaksi Manusia dan Komputer. Topik Bahasan  Pesan kesalahan  Rancangan nonantropomorfik  Perancangan layar  Warna."— Transcript presentasi:

1 Gaya Interaksi Interaksi Manusia dan Komputer

2 Topik Bahasan  Pesan kesalahan  Rancangan nonantropomorfik  Perancangan layar  Warna

3 Strategi dalam merancang layout  Ujung kiri atas dari layar sebagai titik fokus utama  Unsur yang dominan dari program dapat ditempatkan pada ujung kiri atas  Unsur yang dominan ditempatkan pada bagian yang terbesar dari layar  Unsur yang dominan diberi warna yang lebih gelap

4 JUDUL Tombol navigasi/button Ilustrasi Animasi Video Ilustrasi Animasi Video Contoh: Pola S-Layout

5 Contoh: Pola Z-Layout JUDUL Tombol navigasi/button Ilustrasi Animasi Video

6 JUDUL Tombol navigasi Ilustrasi Animasi Video Contoh: Pola V-Layout

7 Contoh: Pola L-Layout Tombol navigasi/button Ilustrasi Animasi Video Ilustrasi Animasi Video

8 Contoh: Pola A-Layout Ilustrasi Animasi Video Ilustrasi Animasi Video Ilustrasi Animasi Video

9 Arah atau alur perhatian  Arah atau alur perhatian menentukan efektivitas disain grafis  Bagian-bagian dari layar harus seimbang sedemikian rupa sehingga mata pertama tertuju pada bagian yang paling penting, kemudian ke bagian-bagian lainnya

10 JUDUL Tombol navigasi/button Ilustrasi Animasi Video Contoh: Alur perhatian 1 2 3

11 JUDUL Tombol navigasi/button Ilustrasi Animasi Video Contoh: Alur perhatian 2 1 3

12

13

14

15

16 IMK Sesi 916/30

17 Pesan Kesalahan  Dasar-dasar untuk mempersiapkan pesan sistem yang baik:  Ketertentuan ( specificity )  Panduan konstruktif dan nada positif  Pemilihan kata berpusat pemakai  Format fisik yang sesuai

18 Pesan Kesalahan

19 Tahap 8 Menulis Teks dan Pesan

20 Pendahuluan  Penggunaan kata pada antarmuka dan layar merupakan bentuk komunikasi dasar dengan pengguna  Kata, pesan dan teks yang jelas dan bermakna dapat meningkatkan usabilitas sistem dan meminimalkan kebingungan yang dapat menyebabkan error dan penolakan sistem  Pada tahap ini akan dipelajari panduan pemilihan kata serta menuliskan pesan dan teks

21 Outline 1.Konsep readabilitas 2.Pemilihan kata 3.Penulisan kalimat dan pesan 4.Jenis-jenis pesan 5.Menampilkan dan menulis teks Panduan web: 6.Menampilkan dan menulis teks 7.Menulis links dan headings 8.Menulis instruksi dan pesan error

22 1. Readabilitas  Tingkat kemudahan kalimat untuk dipahami, berdasarkan kompleksitas kata dan kalimat  Faktor-faktor readabilitas:  Panjang kata  Kebiasaan kata  Panjang kalimat  Jumlah suku kata dalam kalimat  Pengaturan informasi, layout dan format

23 Panduan Readabilitas Tuliskan di bawah level readabilitas pengguna Terapkan prinsip penulisan teks

24 2. Pemilihan Kata Jargon, istilah teknis Singkatan dan akronim Bentuk singkat dari kata Jangan gunakan Kata yang singkat dan familiar Karakter alfabet standar Kata lengkap Istilah positif Kata aksi sederhana Kata yang konsisten Gunakan Menumpuk kata Menyambung kata Jangan

25 Contoh Pemilihan Kata

26 3. Menulis Kalimat dan Pesan  Kalimat dan pesan harus  Jelas dan sederhana  Tidak lebih dari dua puluh kata per kalimat  Tidak lebih dari enam kalimat per paragraf.  Ditulis di bawah level membaca pengguna  Langsung dapat dipahami  Berbentuk kalimat afirmatif  Berbentuk kalimat aktif  Sesuai urutan kejadian  Topik utama disampaikan di awal

27 Menulis Kalimat dan Pesan  Kalimat dan pesan harus dalam proper tone :  Nonauthoritarian: pengguna yang mengontrol  Nonthreatening: bersahabat  Nonanthropomorphic  Nonpatronizing: tidak mengulang pesan  Nonpunishing  Hati-hati dalam penggunaan humor

28 4. Jenis-jenis System Messages Status Messages Informational messages Warning messages Critical messages Question messages

29 Contoh Information MessagesWarning Messages Critical Messages

30 Menulis Teks pada Message Box  Title bar:  Identifikasi sumber pesan (objek dan aplikasi yang ditunjuk)  Gunakan mixed case pada headline  Message box:  Berikan deskripsi yang jelas dari kondisi yang menyebabkan message box muncul  Gunakan kalimat lengkap  Sebutkan masalah dan penyebabnya (jika diketahui), dan apa yang dapat dilakukan pengguna  Hindari singkatan dan istilah teknis  Jangan melebihi dua atau tiga baris  Berikan ikon yang relevan dengan tipe pesan di kiri teks  Tampilkan pesan rata tengah

31 Lokasi Pesan  Message line untuk pesan yang tidak boleh mengganggu informasi di layar  Pop-up windows bisa untuk pesan jenis apapun  Pop-up windows cocok untuk pesan kritis

32 5. Menampilkan Teks  Tampilkan dalam huruf mixed upper- and lower-case  Fonts: sederhana dan polos  Justification: Left-justify, Do not hyphenate words  Line Length:  Jika harus membaca cepat, gunakan karakter  Jika pengguna harus memilih, gunakan karakter  Hindari kolom yang terlalu sempit  Line spacing:  Tambahkan line spacing untuk meningkatkan legibility and readability  Desain secara konsisten dengan bagian lain dari sistem

33 Menulis Teks Fakultas Informatika IT Telkom33 Kalimat dan paragraf Gunakan kalimat singkat Gunakan sedikit kalimat Kalimat berbeda untuk ide berbeda Gunakan paragraf singkat Satu paragraf untuk satu ide Gaya Gunakan kalimat aktif Gunakan gaya tulis personal Tulis seperti berbicara Gunakan opini subjektif Gunakan contoh spesifik Baca keras-keras

34 PANDUAN WEB

35 6. Menampilkan Kata & Teks  Kata  Minimalkan jumlah kata yang digunakan  Tampilan  High contrast dengan background

36 7. Menulis Links  Label:  Kata yang deskriptif, jelas, prediktif, and aktif  Kata kunci muncul di awal  Menunjukkan tujuan/ aksi yang dihasilkan  Judul links:  Nama situs yang dituju  Nama subbagian yang dituju  Jenis informasi yang dituju  Ukuran informasi yang dituju  Peringatan tentang masalah yang mungkin muncul

37 Judul Halaman  Setiap halaman web harus memiliki judul  Yang bermakna  Kata penting diletakkan di awal  Dapat dipahami bahkan tanpa konteks  Unik untuk setiap halaman  Ditulis dalam mixed case dengan headline style  Do not highlight keywords

38 Headings dan Headlines  Buat headings dan headlines yang bermakna  Buat subheading untuk membagi blok-blok teks

39 8. Instruksi Jangan menunjuk dengan urutan tertentu Jelaskan maksud yang dituju “Up” Buat instruksi yang bebas browser Hindari instruksi “Click here” Gunakan “Select this link”

40 9. Pesan Kesalahan  Berikan pesan kesalahan yang tepat dan membantu untuk  Input yang tidak lengkap  Permintaan dokumen yang tidak tersedia/ tidak ditemukan  Tampilkan ulang pesan di tempat yang terkait  Tampilan visual harus disadari dan mudah dikenali

41 Ketertentuan (Specificity) BurukBaik SYNTAX ERRORUnmatched left parenthesis ILLEGAL ENTRYType first letter: Send, Read, or Drop INVALID DATADays range from 1 to 31 BAD FILE NAMEFile names must begin with a letter

42 Panduan Konstruktif dan Nada Positif  Buruk : DISASTROUS STRING OVERFLOW. JOB ABANDONED.  Buruk : UNDEFINED LABELS.  Buruk : ILLEGAL STA. WRN.  Baik : String space consumed. Revise program to use shorter strings or expand string space.  Baik : Define statement labels before use.  Baik : RETURN statement cannot be used in a FUNCTION subprogram.

43 Pemilihan Kata Berpusat Pemakai  Minta maaf atas kesalahan.  Jangan menyalahkan pemakai.  Contoh:  Buruk : Illegal telephone number. Call aborted. Error number 583-2R6.9. Consult your manual for further information.  Baik : We’re sorry, but we were unable to complete your call as dialed. Please hang up, check your number, or consult the operator for assitance.

44 Format Fisik yang Sesuai  Gunakan kombinasi huruf besar dan kecil.  Hindari tampilan hanya nomor kode kesalahan.  Peringatan dengan suara berguna tapi dapat memalukan; pemakai harus dapat mengendalikannya.

45 Pengembangan Pesan yang Efektif  Tingkatkan perhatian pada perancangan pesan. Kejelasan dan konsistensi harus diperhatikan.  Lakukan quality control. Pesan harus disetujui programmer, pemakai, dan spesialis IMK.

46 Pengembangan Pesan yang Efektif ( Lanj. )  Buat pedoman ( guidelines ):  Nada positif  Hindari : ILLEGAL, INVALID, ERROR, WRONG PASSWORD.  Sebaiknya : Your password did not match the stored password. Please try again.  Spesifik dan jelaskan masalah dalam istilah pemakai.  Hindari : SYNTAX ERROR, INVALID DATA.  Sebaiknya : Dress sizes range from 5 to 16.  Tempatkan pemakai pada kendali terhadap situasi.  Hindari : INCORRECT COMMAND.  Sebaiknya : Permissible commands are: SAVE, LOAD, or EXPLAIN.  Format yang rapi, konsisten, dan dapat dipahami.

47 Pengembangan Pesan yang Efektif ( Lanj. )  Lakukan uji penerimaan. Uji pesan kepada komunitas pemakai untuk mengetahui apakah dapat dipahami.  Kumpulkan data kinerja pemakai. Bilamana mungkin, aksi pemakai perlu direkam untuk studi lebih lanjut.

48 Rancangan Nonantropomorfik  Antropomorfik : mempunyai sifat atau pribadi manusia.  Contoh instruksi:  Antropomorfik : Hi there, John! It’s nice to meet you, I see you’re ready now.  Nonantropomorfik : Press the Enter key to begin session.

49 Rancangan Nonantropomorfik ( Lanj. )  Hal-hal yang perlu dipertimbangkan:  Pemberian sifat cerdas, bebas, berkehen-dak bebas, dan berpengetahuan kepada komputer dapat menipu, membingungkan, dan menyesatkan pemakai.  Penting untuk membedakan orang dengan komputer.  Antarmuka antropomorfik dapat membuat ketegangan bagi beberapa orang.

50 Rancangan Nonantropomorfik ( Lanj. )  Sebaiknya perancang memfokuskan pada pemakai dan menghindari kata ganti.  Buruk : I will begin the lesson when you press RETURN.  Lebih baik : You can begin the lesson by pressing RETURN.  Paling baik : To begin the lesson, press RETURN.

51 Pedoman Perancangan Nonantropomorfik  Hindari menampilkan komputer sebagai manusia.  Pilih tokoh yang sesuai dalam pengenalan atau sebagai pemandu.  Hati-hati dalam merancang wajah manusia atau tokoh kartun dengan komputer.  Tokoh kartun cocok digunakan di game atau software anak-anak.

52 Pedoman Perancangan Nonantropomorfik ( Lanj. )  Rancang antarmuka yang dapat dimengerti, dapat diramalkan, dan dapat dikendalikan.  Gunakan orientasi dan keadaan selesai dari sudut pandang pemakai.  Jangan gunakan “I” ketika komputer menanggapi aksi pemakai.  Gunakan “you” hanya untuk memandu pemakai dan menyebutkan fakta-fakta.

53 Perancangan Layar  Enam kategori prinsip yang menyingkapkan kompleksitas tugas perancang (Mullet dan Sano, 1995):  Elegan dan sederhana: kesatuan, dipikirkan dengan baik, dan cocok.  Skala, kontras dan proporsi: kejelasan, harmoni, aktivitas, dan pembatasan.  Organisasi dan struktur visual: pengelompokan, hierarki, hubungan, dan keseimbangan.  Modul dan program: aplikasi yang fokus, fleksibilitas, dan konsisten.  Gambar dan representasi: kesegeraan, keumuman, kohesi, dan karakterisasi.  Gaya: keunikan, keterpaduan, kelengkapan, dan kesesuaian.

54 Perancangan Layar ( Lanj. )  Beberapa butir dari pedoman tampilan layar dari Smith dan Mosier (1984):  Pada setiap tahap dalam sekuens transaksi, pastikan bahwa data apapun yang dibutuhkan pemakai tersedia pada tampilan.  Tayangkan data kepada pemakai dalam bentuk yang langsung dapat digunakan ; jangan mengharuskan pemakai mengonversikan data yang ditampilkan.  Untuk setiap jenis tampilan data, pertahankan format yang konsisten dari satu tampilan ke tampilan lainnya.  Gunakan kalimat yang pendek dan sederhana.

55 Perancangan Layar ( Lanj. )  Pedoman Smith dan Mosier — Lanj.  Gunakan pernyataan positif, bukan negatif.  Gunakan prinsip logis dalam pengurutan senarai (list); jika tidak ada aturan khusus, urutkan secara alfabetis.  Buat kolom data alfabetis rata kiri agar mudah ditelusuri.  Pada tampilan banyak halaman, berikan label pada setiap halaman untuk menunjukkan hubungan dengan halaman lainnya.

56 Perancangan Layar ( Lanj. )  Pedoman Smith dan Mosier — Lanj.  Awali setiap tampilan dengan judul atau header yang menggambarkan secara singkat isi atau tujuan tampilan; sisakan paling sedikit satu baris kosong antara judul dan isi tampilan.  Untuk kode ukuran, simbol yang lebih besar tingginya paling sedikit 1.5 kali tinggi simbol berikut yang lebih kecil.  Gunakan kode warna untuk aplikasi sehingga pemakai dapat membedakan dengan cepat berbagai kategori data, khususnya ketika data item terpencar pada tampilan.

57 Perancangan Layar ( Lanj. )  Pedoman Smith dan Mosier — Lanj.  Jika digunakan kedipan (blink), kecepatan kedip harus antara 2-5 hertz, dengan minimum duty cycle (ON interval) 50 persen.  Untuk tabel besar yang melebihi kapasitas display, pastikan pemakai dapat melihat kepala kolom dan label baris di semua bagian.  Jika kebutuhan tampilan data berubah, sediakan cara bagi pemakai (atau administrator sistem) untuk melakukan perubahan yang diinginkan.

58 Warna  Warna menarik bagi pemakai dan dapat meningkatkan kinerja, namun dapat disalahgunakan.  Topik:  Manfaat warna  Bahaya dalam penggunaan warna  Pedoman penggunaan warna

59 Manfaat Warna  Menyejukkan atau merangsang mata.  Memberi aksen pada tampilan yang tidak menarik.  Memungkinkan pembedaan yang halus pada tampilan yang kompleks.  Menekankan organisasi logis informasi.  Menarik perhatian kepada peringatan.  Menimbulkan reaksi emosional yang kuat berupa sukacita, kegembiraan, ketakutan, atau kemarahan.

60 Bahaya dalam Penggunaan Warna  Pemasangan warna dapat membuat masalah.  Fidelitas warna dapat menurun pada hardware yang berbeda.  Pencetakan atau konversi ke media lain dapat bermasalah.

61 Pedoman Penggunaan Warna  Gunakan warna secara konservatif.  Batasi jumlah warna.  Kenali kekuatan warna sebagai teknik pengkodean untuk mempercepat atau memperlambat tugas.  Pastikan bahwa color coding mendukung tugas.  Tampilkan color coding dengan usaha pemakai yang minimal.  Tempatkan color coding di bawah kendali pemakai.

62 Pedoman Penggunaan Warna ( Lanj. )  Rancang untuk monokrom dulu.  Gunakan warna untuk membantu pemformatan.  Gunakan color coding yang konsisten.  Perhatikan ekspektasi umum tentang kode warna.  Gunakan perubahan warna untuk menunjukkan perubahan status.  Gunakan warna pada tampilan grafis untuk kerapatan informasi yang lebih tinggi.

63 Kombinasi warna Latar BelakangGaris dan Teks TipisGaris & Teks Tebal PutihBiru, Hitam, MerahHitam, Biru, Merah HitamPutih, KuningKuning, Putih, Hijau MerahKuning, Putih, HitamHitam, Kuning, Putih, Sian HijauHitam, Biru, MerahHitam, Merah, Biru BiruPutih,Kuning, SianKuning,Magenta, Hitam, Sian, Putih SianBiru, Hitam, MerahMerah,Biru,Hitam, Magenta Hitam, Putih, BiruBiru,Hitam, Kuning KuningMerah, Biru, Hitam

64 Latar BelakangGaris & Teks TipisGaris & Teks Tebal PutihKuning, Sian HitamBiru, Merah,Magenta Biru, Magenta MerahMagenta, Biru, Hijau, Sian Magenta, Biru, Hijau, Sian HijauSian, Magenta, Kuning Sian, Magenta, Kuning BiruHijau, Merah, Hitam SianHitam, Kuning,Putih Kuning, Hijau,Putih MagentaHijau, Merah, Sian Sian, Hijau, Merah KuningPutih, SianPutih, Sian, Hijau


Download ppt "Gaya Interaksi Interaksi Manusia dan Komputer. Topik Bahasan  Pesan kesalahan  Rancangan nonantropomorfik  Perancangan layar  Warna."

Presentasi serupa


Iklan oleh Google