Upload
adi-wahyu-pribadi
View
4.302
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Filosofi desain antar muka
Citation preview
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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Desain Antar MukaDesain Antar Mukayang Baik?yang Baik?
KejelasanKejelasan Ringkas, padatRingkas, padat AkrabAkrab ResponsifResponsif
KonsistenKonsisten EstetisEstetis EfisienEfisien ForgivenessForgiveness
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
KonsistenKonsisten
Antar muka yang konsisten membuat Antar muka yang konsisten membuat pengguna cepat mengenali pola pengguna cepat mengenali pola penggunaan webpenggunaan web
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
EstetisEstetis
Membuat antar muka yang menyenangkan Membuat antar muka yang menyenangkan membuat pengguna menikmati dan membuat pengguna menikmati dan senang menggunakan aplikasisenang menggunakan aplikasi
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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?
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Desain Tampilan Antar MukaDesain Tampilan Antar Muka
Layout dan PosisiLayout dan Posisi Bentuk dan UkuranBentuk dan Ukuran WarnaWarna KontrasKontras
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Layout dan PosisiLayout dan Posisi
Posisi yang benar dapat meningkatkan Posisi yang benar dapat meningkatkan flowflow
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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)
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Contoh KasusContoh Kasus
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Contoh KasusContoh Kasus
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Contoh KasusContoh Kasus
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Contoh KasusContoh Kasus
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Contoh KasusContoh Kasus
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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