Desain Antar Muka      Aplikasi Web Modern                                 Pertemuan ke-9  Materi kuliah Desain Web,   Tek...
Apa itu Desain Antar Muka?           Jef Raskin             The way that you accomplish          tasks with a product – w...
Desain Antar Muka           Antar muka bukan sekedar tombol dan menu;         tetapi bagaimana interaksi antara pengguna ...
Desain Antar Muka                         yang Baik?           Kejelasan                                                ...
Kejelasan           Hindari antar muka yang membingungkan          melalui:                                    Bahasa   ...
Ringkas Padat           Terlalu banyak elemen dan informasi akan         sulit mencari apa yang diinginkan         sehing...
Akrab           Gunakan elemen-elemen standar yang         sudah biasa digunakan sehingga         pengguna yang menjelaja...
Responsif           Pertama: cepat dalam arti pengguna tidak         merasakan lambat dalam mengakses         halaman web...
Konsisten           Antar muka yang konsisten membuat         pengguna cepat mengenali pola         penggunaan web  Mater...
Estetis           Membuat antar muka yang menyenangkan         membuat pengguna menikmati dan         senang menggunakan ...
Efisien           Antar muka yang baik membuat pengguna         semakin produktif                                    Wak...
Forgiveness           Semua orang pernah melakukan kesalahan           Bagaimana aplikasi dapat mengatasi         kesala...
Desain Tampilan Antar Muka           Layout dan Posisi           Bentuk dan Ukuran           Warna           Kontras  ...
Layout dan Posisi           Layout menampilkan struktur elemen         visual           Mendefinisikan hirarki dan hubun...
Layout dan Posisi           Posisi yang benar dapat meningkatkan         flow  Materi kuliah Desain Web,   Teknik Informa...
Bentuk dan Ukuran           Bentuk elemen dapat digunakan untuk         membedakan elemen-elemen           Ukuran dapat ...
Warna           Berguna untuk banyak hal           Dapat menarik perhatian (kotak         pemberitahuan warna kuning den...
Kontras           Warna terang dan gelap pada elemen         dapat meningkatkan usabilitas antar         muka           ...
Contoh Kasus  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Contoh Kasus  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Contoh Kasus  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Contoh Kasus  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Contoh Kasus  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Referensi           The Smashing Book #1           Raskin, J., 2000, The Human Interface         Addison Wesley        ...
Upcoming SlideShare
Loading in …5
×

09 desain-antar-muka

4,565 views

Published on

Filosofi desain antar muka

Published in: Education, Technology, Business
2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
4,565
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
250
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

09 desain-antar-muka

  1. 1. Desain Antar Muka Aplikasi Web Modern Pertemuan ke-9 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  2. 2. Apa itu Desain Antar Muka?  Jef Raskin The way that you accomplish tasks with a product – what you do and how it responds – thats the interface http://en.wikipedia.org/wiki/Jef_ Raskin ahli antar muka manusia- komputer yang memulai proyek macintosh bagi komputer Apple Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  3. 3. Desain Antar Muka  Antar muka bukan sekedar tombol dan menu; tetapi bagaimana interaksi antara pengguna terhadap suatu aplikasi atau alat  Jadi antar muka bukan sekedar bagaimana bentuk dan tampilan suatu produk tetapi bagaimana dia bekerja  Bukan sekedar mengatur tombol dan memilih warna tetapi memilih alat yang tepat guna untuk suatu pekerjaan Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  4. 4. Desain Antar Muka yang Baik?  Kejelasan  Konsisten  Ringkas, padat  Estetis  Akrab  Efisien  Responsif  Forgiveness Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  5. 5. Kejelasan  Hindari antar muka yang membingungkan melalui:  Bahasa  Aliran  Hirarki  Metafora untuk elemen visual  Antar muka yang baik tidak membutuhkan manual  Memastikan pengguna jadi jarang membuat kesalahan Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  6. 6. Ringkas Padat  Terlalu banyak elemen dan informasi akan sulit mencari apa yang diinginkan sehingga desain cepat membosankan  Tantangannya adalah membuat desain yang ringkas namun padat Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  7. 7. Akrab  Gunakan elemen-elemen standar yang sudah biasa digunakan sehingga pengguna yang menjelajahi halaman web yang baru tidak susah  Orang mudah menggunakan karena sudah terbiasa dengan elemen yang tersedia Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  8. 8. Responsif  Pertama: cepat dalam arti pengguna tidak merasakan lambat dalam mengakses halaman web  Kedua: antar muka menyediakan umpan balik yang cepat bagi pengguna tentang apa yang sedang terjadi dan apakah input dari pengguna sudah sukses diproses Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  9. 9. Konsisten  Antar muka yang konsisten membuat pengguna cepat mengenali pola penggunaan web Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  10. 10. Estetis  Membuat antar muka yang menyenangkan membuat pengguna menikmati dan senang menggunakan aplikasi Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  11. 11. Efisien  Antar muka yang baik membuat pengguna semakin produktif  Waktu dalam waktu yang semakin pendek dan pekerjaan yang diselesaikan semakin banyak Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  12. 12. Forgiveness  Semua orang pernah melakukan kesalahan  Bagaimana aplikasi dapat mengatasi kesalahan yang dilakukan oleh pengguna  Apakah ada undo?  Bagaimana memulihkan berkas yang tidak sengaja terhapus? Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  13. 13. Desain Tampilan Antar Muka  Layout dan Posisi  Bentuk dan Ukuran  Warna  Kontras Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  14. 14. Layout dan Posisi  Layout menampilkan struktur elemen visual  Mendefinisikan hirarki dan hubungan antar elemen  Menyatukan elemen bersama mengindikasikan adanya hubungan di antara mereka, sebagai contoh label di bawah icon Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  15. 15. Layout dan Posisi  Posisi yang benar dapat meningkatkan flow Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  16. 16. Bentuk dan Ukuran  Bentuk elemen dapat digunakan untuk membedakan elemen-elemen  Ukuran dapat digunakan untuk menunjukkan seberapa penting suatu elemen, elemen yang semakin besar maka semakin penting elemen tersebut Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  17. 17. Warna  Berguna untuk banyak hal  Dapat menarik perhatian (kotak pemberitahuan warna kuning dengan latar warna putih)  Dapat mengungkapkan makna (merah menandakan berbahaya) Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  18. 18. Kontras  Warna terang dan gelap pada elemen dapat meningkatkan usabilitas antar muka  Tulisan hitam di atas latar putih lebih mudah dibaca dibandingkan tulisan kuning di atas latar putih Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  19. 19. Contoh Kasus Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  20. 20. Contoh Kasus Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  21. 21. Contoh Kasus Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  22. 22. Contoh Kasus Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  23. 23. Contoh Kasus Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  24. 24. Referensi  The Smashing Book #1  Raskin, J., 2000, The Human Interface Addison Wesley  http://www.usabilitypost.com/2009/01/2 3/making-wait-feel-shorter Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi

×