09 desain-antar-muka

Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP

Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi

Desain Antar Muka Desain Antar Muka Aplikasi Web ModernAplikasi Web Modern

Pertemuan ke-9Pertemuan ke-9



Apa itu Desain Antar Muka?Apa itu Desain Antar Muka?

Jef RaskinJef RaskinThe way that you accomplish The way that you accomplish

tasks with a product – what tasks with a product – what you do and you do and how it responds – how it responds – that's the interfacethat's the interface

http://en.wikipedia.org/wiki/Jef_http://en.wikipedia.org/wiki/Jef_RaskinRaskin

ahli antar muka manusia-ahli antar muka manusia-komputer yang memulai komputer yang memulai proyek macintosh bagi proyek macintosh bagi komputer Applekomputer Apple



Desain Antar MukaDesain Antar Muka

Antar muka bukan sekedar tombol dan menu; Antar muka bukan sekedar tombol dan menu; tetapi bagaimana interaksi antara pengguna tetapi bagaimana interaksi antara pengguna terhadap suatu aplikasi atau alatterhadap suatu aplikasi atau alat

Jadi antar muka bukan sekedar bagaimana Jadi antar muka bukan sekedar bagaimana bentuk dan tampilan suatu produk tetapi bentuk dan tampilan suatu produk tetapi bagaimana dia bekerjabagaimana dia bekerja

Bukan sekedar mengatur tombol dan memilih Bukan sekedar mengatur tombol dan memilih warna tetapi memilih alat yang tepat guna warna tetapi memilih alat yang tepat guna untuk suatu pekerjaanuntuk suatu pekerjaan



Desain Antar MukaDesain Antar Mukayang Baik?yang Baik?

KejelasanKejelasan Ringkas, padatRingkas, padat AkrabAkrab ResponsifResponsif

KonsistenKonsisten EstetisEstetis EfisienEfisien ForgivenessForgiveness



KejelasanKejelasan

Hindari antar muka yang membingungkan Hindari antar muka yang membingungkan melalui:melalui:

BahasaBahasa AliranAliran HirarkiHirarki Metafora untuk elemen visualMetafora untuk elemen visual Antar muka yang baik tidak membutuhkan Antar muka yang baik tidak membutuhkan

manualmanual Memastikan pengguna jadi jarang membuat Memastikan pengguna jadi jarang membuat

kesalahankesalahan



Ringkas PadatRingkas Padat

Terlalu banyak elemen dan informasi akan Terlalu banyak elemen dan informasi akan sulit mencari apa yang diinginkan sulit mencari apa yang diinginkan sehingga desain cepat membosankansehingga desain cepat membosankan

Tantangannya adalah membuat desain Tantangannya adalah membuat desain yang ringkas namun padatyang ringkas namun padat



AkrabAkrab

Gunakan elemen-elemen standar yang Gunakan elemen-elemen standar yang sudah biasa digunakan sehingga sudah biasa digunakan sehingga pengguna yang menjelajahi halaman web pengguna yang menjelajahi halaman web yang baru tidak susahyang baru tidak susah

Orang mudah menggunakan karena sudah Orang mudah menggunakan karena sudah terbiasa dengan elemen yang tersediaterbiasa dengan elemen yang tersedia



ResponsifResponsif

Pertama: cepat dalam arti pengguna tidak Pertama: cepat dalam arti pengguna tidak merasakan lambat dalam mengakses merasakan lambat dalam mengakses halaman webhalaman web

Kedua: antar muka menyediakan umpan Kedua: antar muka menyediakan umpan balik yang cepat bagi pengguna tentang balik yang cepat bagi pengguna tentang apa yang sedang terjadi dan apakah apa yang sedang terjadi dan apakah input dari pengguna sudah sukses input dari pengguna sudah sukses diprosesdiproses



KonsistenKonsisten

Antar muka yang konsisten membuat Antar muka yang konsisten membuat pengguna cepat mengenali pola pengguna cepat mengenali pola penggunaan webpenggunaan web



EstetisEstetis

Membuat antar muka yang menyenangkan Membuat antar muka yang menyenangkan membuat pengguna menikmati dan membuat pengguna menikmati dan senang menggunakan aplikasisenang menggunakan aplikasi



EfisienEfisien

Antar muka yang baik membuat pengguna Antar muka yang baik membuat pengguna semakin produktifsemakin produktif

Waktu dalam waktu yang semakin pendek Waktu dalam waktu yang semakin pendek dan pekerjaan yang diselesaikan semakin dan pekerjaan yang diselesaikan semakin banyakbanyak



ForgivenessForgiveness

Semua orang pernah melakukan kesalahanSemua orang pernah melakukan kesalahan Bagaimana aplikasi dapat mengatasi Bagaimana aplikasi dapat mengatasi

kesalahan yang dilakukan oleh penggunakesalahan yang dilakukan oleh pengguna Apakah ada Apakah ada undoundo?? Bagaimana memulihkan berkas yang tidak Bagaimana memulihkan berkas yang tidak

sengaja terhapus?sengaja terhapus?



Desain Tampilan Antar MukaDesain Tampilan Antar Muka

Layout dan PosisiLayout dan Posisi Bentuk dan UkuranBentuk dan Ukuran WarnaWarna KontrasKontras



Layout dan PosisiLayout dan Posisi

Layout menampilkan struktur elemen Layout menampilkan struktur elemen visualvisual

Mendefinisikan hirarki dan hubungan Mendefinisikan hirarki dan hubungan antar elemenantar elemen

Menyatukan elemen bersama Menyatukan elemen bersama mengindikasikan adanya hubungan di mengindikasikan adanya hubungan di antara mereka, sebagai contoh label di antara mereka, sebagai contoh label di bawah iconbawah icon



Layout dan PosisiLayout dan Posisi

Posisi yang benar dapat meningkatkan Posisi yang benar dapat meningkatkan flowflow



Bentuk dan UkuranBentuk dan Ukuran

Bentuk elemen dapat digunakan untuk Bentuk elemen dapat digunakan untuk membedakan elemen-elemenmembedakan elemen-elemen

Ukuran dapat digunakan untuk Ukuran dapat digunakan untuk menunjukkan seberapa penting suatu menunjukkan seberapa penting suatu elemen, elemen yang semakin besar elemen, elemen yang semakin besar maka semakin penting elemen tersebutmaka semakin penting elemen tersebut



WarnaWarna

Berguna untuk banyak halBerguna untuk banyak hal Dapat menarik perhatian (kotak Dapat menarik perhatian (kotak

pemberitahuan warna kuning dengan pemberitahuan warna kuning dengan latar warna putih)latar warna putih)

Dapat mengungkapkan makna (merah Dapat mengungkapkan makna (merah menandakan berbahaya)menandakan berbahaya)



KontrasKontras

Warna terang dan gelap pada elemen Warna terang dan gelap pada elemen dapat meningkatkan usabilitas antar dapat meningkatkan usabilitas antar mukamuka

Tulisan hitam di atas latar putih lebih Tulisan hitam di atas latar putih lebih mudah dibaca dibandingkan tulisan mudah dibaca dibandingkan tulisan kuning di atas latar putihkuning di atas latar putih



Contoh KasusContoh Kasus



ReferensiReferensi

The Smashing Book #1The Smashing Book #1 Raskin, J., 2000, The Human Interface Raskin, J., 2000, The Human Interface

Addison WesleyAddison Wesley http://www.usabilitypost.com/2009/01/2http://www.usabilitypost.com/2009/01/2

3/making-wait-feel-shorter3/making-wait-feel-shorter

09 desain-antar-muka

Education

desain antar muka yang

apa itu desain antar

sebagai contoh

kejelasan konsisten

antara mereka

responsif pertama

jef raskin

product whatyou