MODEL USER DALAM DESAIN PENDAHULUAN Salah satu kriteria
![MODEL USER DALAM DESAIN MODEL USER DALAM DESAIN](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-1.jpg)
![PENDAHULUAN • Salah satu kriteria penting dari sebuah antarmuka adalah tampilan yang menarik. • PENDAHULUAN • Salah satu kriteria penting dari sebuah antarmuka adalah tampilan yang menarik. •](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-2.jpg)
![KOMPONEN ANTARMUKA Antarmuka pengguna memiliki 4 komponen yaitu : • Model Pengguna, model konseptual KOMPONEN ANTARMUKA Antarmuka pengguna memiliki 4 komponen yaitu : • Model Pengguna, model konseptual](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-3.jpg)
![KOMPONEN ANTARMUKA • Umpan Balik, untuk memberi keyakinan bahwa program telah menerima perintah pengguna KOMPONEN ANTARMUKA • Umpan Balik, untuk memberi keyakinan bahwa program telah menerima perintah pengguna](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-4.jpg)
![SYSTEM- CENTERED DESIGN • Fokus pada Teknologi • Apakah bisa dibangun dengan mudah menggunakan SYSTEM- CENTERED DESIGN • Fokus pada Teknologi • Apakah bisa dibangun dengan mudah menggunakan](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-5.jpg)
![USER-CENTERED DESIGN • Design berdasarkan pada user: • • • Tugas Kemampuan Kebutuhan • USER-CENTERED DESIGN • Design berdasarkan pada user: • • • Tugas Kemampuan Kebutuhan •](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-6.jpg)
![Mengapa desain menjadi sulit ? Mengapa desain menjadi sulit ?](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-7.jpg)
![PROSES DESAIN 1. Meningkatnya kompleksitas § § § Sejumlah control mempunyai penambahan aksi yang PROSES DESAIN 1. Meningkatnya kompleksitas § § § Sejumlah control mempunyai penambahan aksi yang](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-8.jpg)
![PROSES DESAIN 3. Banyak orang sering mempertimbangkan biaya dan tampilan desain pada faktor manusia PROSES DESAIN 3. Banyak orang sering mempertimbangkan biaya dan tampilan desain pada faktor manusia](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-9.jpg)
![IDE DALAM MEMBUAT DESAIN Bagaimana kita bisa mempunyai ide untuk membuat dan mengembangkan desain IDE DALAM MEMBUAT DESAIN Bagaimana kita bisa mempunyai ide untuk membuat dan mengembangkan desain](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-10.jpg)
![IDE DALAM MEMBUAT DESAIN • Ide berasal dari • Mengutip dari bidang lain Imajinasi IDE DALAM MEMBUAT DESAIN • Ide berasal dari • Mengutip dari bidang lain Imajinasi](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-11.jpg)
![PRINSIP DESAIN 1. Gunakan dialog yang sederhana dan natural. § Cocokkan tugas pengguna pada PRINSIP DESAIN 1. Gunakan dialog yang sederhana dan natural. § Cocokkan tugas pengguna pada](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-12.jpg)
![Contoh : Contoh :](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-13.jpg)
![PRINSIP DESAIN (cont…) 2. Berusaha untuk konsisten § urutan, aksi, perintah, layout, daftar kata-kata PRINSIP DESAIN (cont…) 2. Berusaha untuk konsisten § urutan, aksi, perintah, layout, daftar kata-kata](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-14.jpg)
![PRINSIP DESAIN (cont…) 3. Sediakan umpan balik yang informatif § Secara terus-menerus memberitahukan pengguna PRINSIP DESAIN (cont…) 3. Sediakan umpan balik yang informatif § Secara terus-menerus memberitahukan pengguna](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-15.jpg)
![PRINSIP DESAIN (cont…) 5. Mengijinkan perubahan aksi yang mudah § Undo! § Kurangi kebimbangan, PRINSIP DESAIN (cont…) 5. Mengijinkan perubahan aksi yang mudah § Undo! § Kurangi kebimbangan,](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-16.jpg)
![PRINSIP DESAIN (cont…) 7. Sediakan shortcuts Memungkinkan user untuk menjalankan operasi yg sering dipakai PRINSIP DESAIN (cont…) 7. Sediakan shortcuts Memungkinkan user untuk menjalankan operasi yg sering dipakai](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-17.jpg)
![PRINSIP DESAIN (cont…) 9. Menangani kesalahan dengan lancar dan secara positif dgn memberi petunjuk PRINSIP DESAIN (cont…) 9. Menangani kesalahan dengan lancar dan secara positif dgn memberi petunjuk](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-18.jpg)
![DESAIN GRAFIK • Look (Visualisasi) • Simbolisasi /Icon • Enable / Disable • Active DESAIN GRAFIK • Look (Visualisasi) • Simbolisasi /Icon • Enable / Disable • Active](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-19.jpg)
![PRINSIP DESAIN GRAFIK • Metaphor • Kejelasan • Konsistensi • Alignment • Pendekatan(Proximity) • PRINSIP DESAIN GRAFIK • Metaphor • Kejelasan • Konsistensi • Alignment • Pendekatan(Proximity) •](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-20.jpg)
![METAPHOR • Presentasi dan unsur visual untuk beberapa item yang relevan. contoh; Desktop metaphor METAPHOR • Presentasi dan unsur visual untuk beberapa item yang relevan. contoh; Desktop metaphor](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-21.jpg)
![KEJELASAN • Tiap-tiap elemen pada suatu interface harus mempunyai satu tujuan. • White Space KEJELASAN • Tiap-tiap elemen pada suatu interface harus mempunyai satu tujuan. • White Space](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-22.jpg)
![Contoh : www. schwab. com Contoh : www. schwab. com](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-23.jpg)
![Contoh: www. schwab. com Contoh: www. schwab. com](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-24.jpg)
![KONSISTENSI • Pada layout, warna, gambar, ikon, teks, … • Di dalam screen, antar KONSISTENSI • Pada layout, warna, gambar, ikon, teks, … • Di dalam screen, antar](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-25.jpg)
![Contoh : www. bappeda. jawatengah. go. id Contoh : www. bappeda. jawatengah. go. id](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-26.jpg)
![ALIGNMENT • Western world • Start from top left • Grids • Garis horizontal ALIGNMENT • Western world • Start from top left • Grids • Garis horizontal](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-27.jpg)
![Contoh : -Left, center, atau right -Pilih salah satu, gunakan untuk setiap tempat. Here Contoh : -Left, center, atau right -Pilih salah satu, gunakan untuk setiap tempat. Here](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-28.jpg)
![PROXIMITY • Item tampak tertutup untuk hal-hal yg berkaitan • Jarak tidak menyiratkan suatu PROXIMITY • Item tampak tertutup untuk hal-hal yg berkaitan • Jarak tidak menyiratkan suatu](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-29.jpg)
![Contoh : Name Addr 1 Addr 2 City State Phone Fax Contoh : Name Addr 1 Addr 2 City State Phone Fax](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-30.jpg)
![KONTRAS • Dapat digunakan untuk membedakan kontrol yg aktif atau tidak • Dapat digunakan KONTRAS • Dapat digunakan untuk membedakan kontrol yg aktif atau tidak • Dapat digunakan](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-31.jpg)
![Contoh : Important element Contoh : Important element](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-32.jpg)
![DESAIN GRAFIK • Tipografi • Warna • Ikon DESAIN GRAFIK • Tipografi • Warna • Ikon](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-33.jpg)
![TIPOGRAFI • Karakter dan simbol harus nyata dan dapat dibedakan - Hindari penggunaan semua TIPOGRAFI • Karakter dan simbol harus nyata dan dapat dibedakan - Hindari penggunaan semua](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-34.jpg)
![TIPOGRAFI (cont. . ) • Readability (keadaaan yg dapat dibaca) Bagaimana agar mudah membaca TIPOGRAFI (cont. . ) • Readability (keadaaan yg dapat dibaca) Bagaimana agar mudah membaca](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-35.jpg)
![TIPOGRAFI (cont. . ) • Petunjuk • Gunakan serif utk teks yg panjang; sans TIPOGRAFI (cont. . ) • Petunjuk • Gunakan serif utk teks yg panjang; sans](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-36.jpg)
![Contoh : Contoh :](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-37.jpg)
![Contoh : Mana yang lebih kamu sukai? CRAFTS AND GAMES ARTS FESTIVAL OF ATLANTA Contoh : Mana yang lebih kamu sukai? CRAFTS AND GAMES ARTS FESTIVAL OF ATLANTA](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-38.jpg)
![WARNA • Kita melihat dunia melalui refleksi model warna § cahaya menerangi suatu permukaan WARNA • Kita melihat dunia melalui refleksi model warna § cahaya menerangi suatu permukaan](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-39.jpg)
![WARNA (cont…) • Gunakan utk satu tujuan, bukan hanya menambah beberapa warna pada tampilan. WARNA (cont…) • Gunakan utk satu tujuan, bukan hanya menambah beberapa warna pada tampilan.](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-40.jpg)
![WARNA (cont…) • Tampilkan image berwarna pada background hitam • Pilih foreground dgn warna WARNA (cont…) • Tampilkan image berwarna pada background hitam • Pilih foreground dgn warna](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-41.jpg)
![Latihan Visual • Berapa banyak objek yg kecil? • Berapa banyak persegi? • Berapa Latihan Visual • Berapa banyak objek yg kecil? • Berapa banyak persegi? • Berapa](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-42.jpg)
![Berapa banyak…. Berapa banyak….](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-43.jpg)
![Temukan … • Left: temukan tulisan warna merah • Right: Temukan ‘A’ Temukan … • Left: temukan tulisan warna merah • Right: Temukan ‘A’](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-44.jpg)
![Temukan … X EV P U B F U W S O A C Temukan … X EV P U B F U W S O A C](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-45.jpg)
![Petunjuk utk warna • Warna berguna utk mendukung pencarian • Selalu konsisten dgn asosiasi Petunjuk utk warna • Warna berguna utk mendukung pencarian • Selalu konsisten dgn asosiasi](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-46.jpg)
![Petunjuk utk warna • Designer sering memilih suatu pallete utk 4 atau 5 warna Petunjuk utk warna • Designer sering memilih suatu pallete utk 4 atau 5 warna](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-47.jpg)
![Desain Ikon • Mewakili objek atau aksi yg lazim dan dapat dikenali • Membuat Desain Ikon • Mewakili objek atau aksi yg lazim dan dapat dikenali • Membuat](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-48.jpg)
![Desain Ikon Desain Ikon](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-49.jpg)
- Slides: 49
![MODEL USER DALAM DESAIN MODEL USER DALAM DESAIN](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-1.jpg)
MODEL USER DALAM DESAIN
![PENDAHULUAN Salah satu kriteria penting dari sebuah antarmuka adalah tampilan yang menarik PENDAHULUAN • Salah satu kriteria penting dari sebuah antarmuka adalah tampilan yang menarik. •](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-2.jpg)
PENDAHULUAN • Salah satu kriteria penting dari sebuah antarmuka adalah tampilan yang menarik. • User biasanya tertarik untuk mencoba sebuah program aplikasi dengan terlebih dahulu tertarik pada suatu tampilan yang ada di hadapannya. • Dokumentasi rancangan dpt dikerjakan dlm beberapa cara : • Membuat sketsa pada kertas • Menggunakan peranti prototipe GUI • Menuliskan tekstual yang menjelaskan tentang kaitan antara satu jendela dengan jendela yang lain • Menggunakan CASE (Computer Aided Software Engineering)
![KOMPONEN ANTARMUKA Antarmuka pengguna memiliki 4 komponen yaitu Model Pengguna model konseptual KOMPONEN ANTARMUKA Antarmuka pengguna memiliki 4 komponen yaitu : • Model Pengguna, model konseptual](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-3.jpg)
KOMPONEN ANTARMUKA Antarmuka pengguna memiliki 4 komponen yaitu : • Model Pengguna, model konseptual yg diinginkan pengguna dlm memanipulasi informasi dan proses yang diaplikasikan pada informasi tersebut. • Bahasa Perintah (command language), peranti pemanipulasian model, idealnya dgn menggunakan bahasa alami.
![KOMPONEN ANTARMUKA Umpan Balik untuk memberi keyakinan bahwa program telah menerima perintah pengguna KOMPONEN ANTARMUKA • Umpan Balik, untuk memberi keyakinan bahwa program telah menerima perintah pengguna](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-4.jpg)
KOMPONEN ANTARMUKA • Umpan Balik, untuk memberi keyakinan bahwa program telah menerima perintah pengguna dan dapat memahami maksud perintah tersebut termasuk kemampuan sebuah program yang membantu pengguna untuk mengoperasian program itu sendiri. • Tampilan Informasi, digunakan untuk menunjukkan status informasi atau program ketika pengguna melakukan suatu tindakan.
![SYSTEM CENTERED DESIGN Fokus pada Teknologi Apakah bisa dibangun dengan mudah menggunakan SYSTEM- CENTERED DESIGN • Fokus pada Teknologi • Apakah bisa dibangun dengan mudah menggunakan](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-5.jpg)
SYSTEM- CENTERED DESIGN • Fokus pada Teknologi • Apakah bisa dibangun dengan mudah menggunakan tools yg tersedia pada platform tertentu. • Apakah menarik perhatian saya, sebagai pengembang, untuk membangun. . .
![USERCENTERED DESIGN Design berdasarkan pada user Tugas Kemampuan Kebutuhan USER-CENTERED DESIGN • Design berdasarkan pada user: • • • Tugas Kemampuan Kebutuhan •](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-6.jpg)
USER-CENTERED DESIGN • Design berdasarkan pada user: • • • Tugas Kemampuan Kebutuhan • Kunci: Know the user!
![Mengapa desain menjadi sulit Mengapa desain menjadi sulit ?](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-7.jpg)
Mengapa desain menjadi sulit ?
![PROSES DESAIN 1 Meningkatnya kompleksitas Sejumlah control mempunyai penambahan aksi yang PROSES DESAIN 1. Meningkatnya kompleksitas § § § Sejumlah control mempunyai penambahan aksi yang](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-8.jpg)
PROSES DESAIN 1. Meningkatnya kompleksitas § § § Sejumlah control mempunyai penambahan aksi yang menarik Umpan balik lebih rumit dan sulit dipisahkan Errors terus meningkat serius/mahal 2. Tekanan Pemasaran § Waktu adalah uang § Menambahkan kemampuan (kompleksitas) sekarang mudah dan murah Menambahkan kontrol / umpan balik adalah mahal Desain biasanya memerlukan beberapa iterasi (perulangan) sebelum sukses § §
![PROSES DESAIN 3 Banyak orang sering mempertimbangkan biaya dan tampilan desain pada faktor manusia PROSES DESAIN 3. Banyak orang sering mempertimbangkan biaya dan tampilan desain pada faktor manusia](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-9.jpg)
PROSES DESAIN 3. Banyak orang sering mempertimbangkan biaya dan tampilan desain pada faktor manusia § Style (Corak) § Desain yang jelek kemungkinan tidak akan tampak 4. Kreatifitas penuh dengan tantangan § Tidak hanya membuat satu salinan § Inginkan kreatifitas, tapi ingin yang praktis
![IDE DALAM MEMBUAT DESAIN Bagaimana kita bisa mempunyai ide untuk membuat dan mengembangkan desain IDE DALAM MEMBUAT DESAIN Bagaimana kita bisa mempunyai ide untuk membuat dan mengembangkan desain](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-10.jpg)
IDE DALAM MEMBUAT DESAIN Bagaimana kita bisa mempunyai ide untuk membuat dan mengembangkan desain interface baru ?
![IDE DALAM MEMBUAT DESAIN Ide berasal dari Mengutip dari bidang lain Imajinasi IDE DALAM MEMBUAT DESAIN • Ide berasal dari • Mengutip dari bidang lain Imajinasi](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-11.jpg)
IDE DALAM MEMBUAT DESAIN • Ide berasal dari • Mengutip dari bidang lain Imajinasi Animasi Analogi Teater Observasi dari praktek saat ini Information displays Arsitektur . . . Observasi dari sistem saat ini
![PRINSIP DESAIN 1 Gunakan dialog yang sederhana dan natural Cocokkan tugas pengguna pada PRINSIP DESAIN 1. Gunakan dialog yang sederhana dan natural. § Cocokkan tugas pengguna pada](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-12.jpg)
PRINSIP DESAIN 1. Gunakan dialog yang sederhana dan natural. § Cocokkan tugas pengguna pada satu cara yang natural § Hindari jargon, techno-speak § Tampilkan info yg user perlukan secara tepat
![Contoh Contoh :](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-13.jpg)
Contoh :
![PRINSIP DESAIN cont 2 Berusaha untuk konsisten urutan aksi perintah layout daftar katakata PRINSIP DESAIN (cont…) 2. Berusaha untuk konsisten § urutan, aksi, perintah, layout, daftar kata-kata](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-14.jpg)
PRINSIP DESAIN (cont…) 2. Berusaha untuk konsisten § urutan, aksi, perintah, layout, daftar kata-kata penting § Buat lebih banyak prediksi OK Cancel Help Done Cancel Apply
![PRINSIP DESAIN cont 3 Sediakan umpan balik yang informatif Secara terusmenerus memberitahukan pengguna PRINSIP DESAIN (cont…) 3. Sediakan umpan balik yang informatif § Secara terus-menerus memberitahukan pengguna](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-15.jpg)
PRINSIP DESAIN (cont…) 3. Sediakan umpan balik yang informatif § Secara terus-menerus memberitahukan pengguna tentang yang terjadi § Paling penting yang sering dikunjungi, aksi yang nyata 4. Minimalkan beban ingatan user Pengenalan lebih baik dibandingkan mengingat § Deskripsikan format input yg diperlukan, meliputi contoh dan default § Date _ _ - _ _ (DD-Mmm-YY, e. g. , 02 -Aug-93)
![PRINSIP DESAIN cont 5 Mengijinkan perubahan aksi yang mudah Undo Kurangi kebimbangan PRINSIP DESAIN (cont…) 5. Mengijinkan perubahan aksi yang mudah § Undo! § Kurangi kebimbangan,](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-16.jpg)
PRINSIP DESAIN (cont…) 5. Mengijinkan perubahan aksi yang mudah § Undo! § Kurangi kebimbangan, anjurkan percobaan 6. Sediakan tanda Exit dengan jelas § jangan membuat user merasa terperangkap Contoh : tombol Cancel : • Interrupt/resume : • Quit : • Reset/defaults : • pada dialog pada operasi yg panjang (modeless) bisa keluar setiap waktu restore pada suatu sheet
![PRINSIP DESAIN cont 7 Sediakan shortcuts Memungkinkan user untuk menjalankan operasi yg sering dipakai PRINSIP DESAIN (cont…) 7. Sediakan shortcuts Memungkinkan user untuk menjalankan operasi yg sering dipakai](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-17.jpg)
PRINSIP DESAIN (cont…) 7. Sediakan shortcuts Memungkinkan user untuk menjalankan operasi yg sering dipakai dengan cepat § Keyboard & Mouse § Navigasi diantara windows/forms 8. Mendukung fokus internal dari kontrol Enter next command vs. Ready for next command
![PRINSIP DESAIN cont 9 Menangani kesalahan dengan lancar dan secara positif dgn memberi petunjuk PRINSIP DESAIN (cont…) 9. Menangani kesalahan dengan lancar dan secara positif dgn memberi petunjuk](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-18.jpg)
PRINSIP DESAIN (cont…) 9. Menangani kesalahan dengan lancar dan secara positif dgn memberi petunjuk tentang kesalahan yg dilakukan user dan langkah perbaikannya 10. Sediakan help dan dokumentasi
![DESAIN GRAFIK Look Visualisasi Simbolisasi Icon Enable Disable Active DESAIN GRAFIK • Look (Visualisasi) • Simbolisasi /Icon • Enable / Disable • Active](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-19.jpg)
DESAIN GRAFIK • Look (Visualisasi) • Simbolisasi /Icon • Enable / Disable • Active / Inactive • dll • Feel • Drag • Click / double click • Drag and Drop
![PRINSIP DESAIN GRAFIK Metaphor Kejelasan Konsistensi Alignment PendekatanProximity PRINSIP DESAIN GRAFIK • Metaphor • Kejelasan • Konsistensi • Alignment • Pendekatan(Proximity) •](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-20.jpg)
PRINSIP DESAIN GRAFIK • Metaphor • Kejelasan • Konsistensi • Alignment • Pendekatan(Proximity) • Kontras
![METAPHOR Presentasi dan unsur visual untuk beberapa item yang relevan contoh Desktop metaphor METAPHOR • Presentasi dan unsur visual untuk beberapa item yang relevan. contoh; Desktop metaphor](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-21.jpg)
METAPHOR • Presentasi dan unsur visual untuk beberapa item yang relevan. contoh; Desktop metaphor
![KEJELASAN Tiaptiap elemen pada suatu interface harus mempunyai satu tujuan White Space KEJELASAN • Tiap-tiap elemen pada suatu interface harus mempunyai satu tujuan. • White Space](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-22.jpg)
KEJELASAN • Tiap-tiap elemen pada suatu interface harus mempunyai satu tujuan. • White Space § menyediakan keseimbangan dan simetri dalam penggunaannya § Memperkuat dampak pesan yg disampaikan § Mengijinkan mata untuk istirahat dari unsur aktivitas § Digunakan untuk meningkatkan kesederhanaan, kerapian, kelas.
![Contoh www schwab com Contoh : www. schwab. com](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-23.jpg)
Contoh : www. schwab. com
![Contoh www schwab com Contoh: www. schwab. com](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-24.jpg)
Contoh: www. schwab. com
![KONSISTENSI Pada layout warna gambar ikon teks Di dalam screen antar KONSISTENSI • Pada layout, warna, gambar, ikon, teks, … • Di dalam screen, antar](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-25.jpg)
KONSISTENSI • Pada layout, warna, gambar, ikon, teks, … • Di dalam screen, antar screens • Platform mungkin mempunyai petunjuk • Follow it!
![Contoh www bappeda jawatengah go id Contoh : www. bappeda. jawatengah. go. id](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-26.jpg)
Contoh : www. bappeda. jawatengah. go. id
![ALIGNMENT Western world Start from top left Grids Garis horizontal ALIGNMENT • Western world • Start from top left • Grids • Garis horizontal](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-27.jpg)
ALIGNMENT • Western world • Start from top left • Grids • Garis horizontal dan vertical untuk membantu letak komponen window • Align hal-hal yg terkait • Group item secara logika
![Contoh Left center atau right Pilih salah satu gunakan untuk setiap tempat Here Contoh : -Left, center, atau right -Pilih salah satu, gunakan untuk setiap tempat. Here](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-28.jpg)
Contoh : -Left, center, atau right -Pilih salah satu, gunakan untuk setiap tempat. Here is some new text
![PROXIMITY Item tampak tertutup untuk halhal yg berkaitan Jarak tidak menyiratkan suatu PROXIMITY • Item tampak tertutup untuk hal-hal yg berkaitan • Jarak tidak menyiratkan suatu](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-29.jpg)
PROXIMITY • Item tampak tertutup untuk hal-hal yg berkaitan • Jarak tidak menyiratkan suatu hubungan Time:
![Contoh Name Addr 1 Addr 2 City State Phone Fax Contoh : Name Addr 1 Addr 2 City State Phone Fax](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-30.jpg)
Contoh : Name Addr 1 Addr 2 City State Phone Fax
![KONTRAS Dapat digunakan untuk membedakan kontrol yg aktif atau tidak Dapat digunakan KONTRAS • Dapat digunakan untuk membedakan kontrol yg aktif atau tidak • Dapat digunakan](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-31.jpg)
KONTRAS • Dapat digunakan untuk membedakan kontrol yg aktif atau tidak • Dapat digunakan untuk mengatur item yg paling penting dengan highlight (menyorotnya)
![Contoh Important element Contoh : Important element](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-32.jpg)
Contoh : Important element
![DESAIN GRAFIK Tipografi Warna Ikon DESAIN GRAFIK • Tipografi • Warna • Ikon](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-33.jpg)
DESAIN GRAFIK • Tipografi • Warna • Ikon
![TIPOGRAFI Karakter dan simbol harus nyata dan dapat dibedakan Hindari penggunaan semua TIPOGRAFI • Karakter dan simbol harus nyata dan dapat dibedakan - Hindari penggunaan semua](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-34.jpg)
TIPOGRAFI • Karakter dan simbol harus nyata dan dapat dibedakan - Hindari penggunaan semua huruf besar HOW MUCH FUN IS IT TO READ ALL THIS TEXT WHEN IT’S ALL IN CAPITALS AND YOU NEVER GET A REST How much fun is it to read all this text when it’s all in capitals and you never get a rest
![TIPOGRAFI cont Readability keadaaan yg dapat dibaca Bagaimana agar mudah membaca TIPOGRAFI (cont. . ) • Readability (keadaaan yg dapat dibaca) Bagaimana agar mudah membaca](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-35.jpg)
TIPOGRAFI (cont. . ) • Readability (keadaaan yg dapat dibaca) Bagaimana agar mudah membaca teks yg banyak • Legibility (Sifat mudah dibaca) Bagaimana agar mudah untuk mengenali teks pendek yg muncul secara tiba-tiba • Jenis huruf • Serif font – readability • Times, Bookman • Sans serif font - legibility • Tahoma, Arial
![TIPOGRAFI cont Petunjuk Gunakan serif utk teks yg panjang sans TIPOGRAFI (cont. . ) • Petunjuk • Gunakan serif utk teks yg panjang; sans](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-36.jpg)
TIPOGRAFI (cont. . ) • Petunjuk • Gunakan serif utk teks yg panjang; sans serif utk teks utama • Gunakan 1 - 2 jenis font (3 maks) • Jangan gunakan bold, italic, kapital utk teks yg panjang • Gunakan ukuran maks 1 -3 point • Hati-hati penggunaan teks untuk latar belakang dengan warna
![Contoh Contoh :](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-37.jpg)
Contoh :
![Contoh Mana yang lebih kamu sukai CRAFTS AND GAMES ARTS FESTIVAL OF ATLANTA Contoh : Mana yang lebih kamu sukai? CRAFTS AND GAMES ARTS FESTIVAL OF ATLANTA](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-38.jpg)
Contoh : Mana yang lebih kamu sukai? CRAFTS AND GAMES ARTS FESTIVAL OF ATLANTA AND DECATUR SEPTEMBER 19 -24 COME AND ENJOY Crafts and Games Arts Festival Of Atlanta and Decatur September 19 -24 Come and Enjoy!
![WARNA Kita melihat dunia melalui refleksi model warna cahaya menerangi suatu permukaan WARNA • Kita melihat dunia melalui refleksi model warna § cahaya menerangi suatu permukaan](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-39.jpg)
WARNA • Kita melihat dunia melalui refleksi model warna § cahaya menerangi suatu permukaan dicerminkan pada mata kita § printer • Pada monitor, susunan khas RGB - nilai 0 -255 setiap red, green, blue - R: 170 G: 43 B: 211
![WARNA cont Gunakan utk satu tujuan bukan hanya menambah beberapa warna pada tampilan WARNA (cont…) • Gunakan utk satu tujuan, bukan hanya menambah beberapa warna pada tampilan.](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-40.jpg)
WARNA (cont…) • Gunakan utk satu tujuan, bukan hanya menambah beberapa warna pada tampilan.
![WARNA cont Tampilkan image berwarna pada background hitam Pilih foreground dgn warna WARNA (cont…) • Tampilkan image berwarna pada background hitam • Pilih foreground dgn warna](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-41.jpg)
WARNA (cont…) • Tampilkan image berwarna pada background hitam • Pilih foreground dgn warna terang (white, bold green, …) • Hindari coklat dan hijau sebagai warna background. • Pastikan warna foreground kontras dgn warna background. • Gunakan warna utk menarik perhatian, komunikasi organisasi, utk menandai status, utk menentukan hubungan • Hindari penggunaan warna utk tugas yg tdk berhubungan
![Latihan Visual Berapa banyak objek yg kecil Berapa banyak persegi Berapa Latihan Visual • Berapa banyak objek yg kecil? • Berapa banyak persegi? • Berapa](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-42.jpg)
Latihan Visual • Berapa banyak objek yg kecil? • Berapa banyak persegi? • Berapa banyak objek warna biru?
![Berapa banyak Berapa banyak….](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-43.jpg)
Berapa banyak….
![Temukan Left temukan tulisan warna merah Right Temukan A Temukan … • Left: temukan tulisan warna merah • Right: Temukan ‘A’](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-44.jpg)
Temukan … • Left: temukan tulisan warna merah • Right: Temukan ‘A’
![Temukan X EV P U B F U W S O A C Temukan … X EV P U B F U W S O A C](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-45.jpg)
Temukan … X EV P U B F U W S O A C C B Z E L L K M H I J RG S RT N H T V V Q P D G QO D XF I V W W X K S N Y V Y Z W K D M S Z R J
![Petunjuk utk warna Warna berguna utk mendukung pencarian Selalu konsisten dgn asosiasi Petunjuk utk warna • Warna berguna utk mendukung pencarian • Selalu konsisten dgn asosiasi](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-46.jpg)
Petunjuk utk warna • Warna berguna utk mendukung pencarian • Selalu konsisten dgn asosiasi pekerjaan dan budaya Red hot, warning, love Pink female, menarik Orange musim, hangat, Halloween Yellow happy, hati-hati, suka cita Brown warm, fall, daratan Green subur, pastoral, iri / cemburu Purple (ungu) meriah, canggih.
![Petunjuk utk warna Designer sering memilih suatu pallete utk 4 atau 5 warna Petunjuk utk warna • Designer sering memilih suatu pallete utk 4 atau 5 warna](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-47.jpg)
Petunjuk utk warna • Designer sering memilih suatu pallete utk 4 atau 5 warna Professional Monochromatic Southwestern
![Desain Ikon Mewakili objek atau aksi yg lazim dan dapat dikenali Membuat Desain Ikon • Mewakili objek atau aksi yg lazim dan dapat dikenali • Membuat](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-48.jpg)
Desain Ikon • Mewakili objek atau aksi yg lazim dan dapat dikenali • Membuat ikon lebih menonjol dari background • Pastikan ikon yg terpilih tampak terlihat jelas dari ikon yg tidak terpilih • Buat setiap ikon yg berbeda • Hindari rincian yg berlebihan
![Desain Ikon Desain Ikon](https://slidetodoc.com/presentation_image_h2/5701de20dfa941917fafd4fc638ecf2b/image-49.jpg)
Desain Ikon
Salah satu kriteria penting dari sebuah antarmuka adalah..
Kriteria perancangan
Dalam desain pendahuluan
Apa yang terdapat dalam desain pendahuluan
Salah satu unsur yang ada dalam industri pariwisata adalah
Laju reaksi
Contoh analisis data berkala
Contoh bahasa natural
Advantages and disadvantages of emulsion
Sistem barter adalah
Instrumen wawancara
Peran pelajar dalam pembangunan ekonomi
Model perilaku konsumen menurut assael
Pendahuluan dalam presentasi
Contoh pendahuluan lpj kegiatan
Bagian pelengkap karya ilmiah
Anabar artinya
Salah satu sub rutin
Sekestran
Salah satu warisan peradaban mesopotamia
Salah satu tujuan dari perencanaan proyek software adalah
Salah satu nilai terminal rvs.
Sebutkan prinsip prinsip dalam penyusunan formasi
Peripheral input output pada mikrokontroler
Gambar yang dibuat dari unsur garis dan kurva disebut ... *
Contoh program inheritance hewan
Apa pengertian nafsu syahwat
Pada gambar berikut besar cao=2x
Lahan potensial di dataran rendah
Ruang lingkup kesenian
Kelemahan metode observasi adalah
Analisis kebutuhan non fungsional
Jenis iklan berdasarkan sifat persuasifnya
Dimana kita bisa menjumpai gambar cerita
Tuliskan etika bertelepon
Ciri pokok orde baru adalah pelaksanaan
Kolam yang keseluruhannya bagiannya terbuat dari tembok
Salah satu prinsip perancangan cipher blok adalah
Salah satu wirausaha menurut ir. ciputra adalah …
Tujuh diaken
Salah satu nilai terminal rvs.
Measure of dispersion adalah
Salah satu nilai terminal rvs.
Aplikasi pengolah angka buatan microsoft adalah
Ciri-ciri metode harga pokok pesanan
Berpidato merupakan salah satu keterampilan
Stratifikasi sosial didasari oleh… *
3 dimensional character
Security hole adalah salah satu faktor evaluasi keamanan
Chart/ grafik terdapat pada menu: