Hip Blue Template - Universitas Negeri...
Transcript of Hip Blue Template - Universitas Negeri...
![Page 1: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/1.jpg)
USABILITY
DINA UTAMI , M. SC
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 2: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/2.jpg)
Interface Hall of Shame
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 3: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/3.jpg)
Desain yang Lebih Baik
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 4: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/4.jpg)
Interface Hall of Shame
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 5: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/5.jpg)
Interface Hall of Shame
Apa yang salah?
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 6: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/6.jpg)
Interface Hall of Shame
Tidak MENCEGAH TERJADINYA EROR.
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 7: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/7.jpg)
Interface Hall of Shame.
Apa yang salah?
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 8: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/8.jpg)
Interface Hall of Shame.
Tidak SESUAI DENGAN STANDAR.
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 9: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/9.jpg)
Interface Hall of Shame.
Apa yang salah?
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 10: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/10.jpg)
Interface Hall of Shame.
Tidak MEMBERIKAN FASILITAS
UNTUK MEMBETULKAN KESALAHAN
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 11: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/11.jpg)
Mengapa Antarmuka Software Penting
• Antarmuka (user interface) sangat mempengaruhi persepsi atas sebuah software
– Software yang ‘usable’ penjualannya lebih baik
– Website yang ‘unusable’ ditinggalkan pengunjung
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 12: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/12.jpg)
Konsekuensi Desain yang Buruk
• Software yang susah dipakai membuang-buang waktu user.
• Jika tidak dirancang dengan baik sekarang, maka harus dirancang ulang di kemudian hari.
– Perancangan ulang membutuhkan biaya besar
• Dalam beberapa kasus memakan korban
– Therac-25 radiation therapy machine
– Aegis radar system in USS Vincennes
![Page 13: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/13.jpg)
Sulitnya Mendesain Antarmuka
• Kamu bukan user-mu – UI membutuhkan banyak komunikasi dengan user.
• User selalu benar – Jika ada masalah dengan sistem yang terus menerus terjadi,
berarti ada kesalahan dalam sistem.
• …tapi ya tidak juga – User bukanlah desainer sistem
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 14: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/14.jpg)
Sulitnya Mendesain Antarmuka
• UI membutuhkan usaha paling besar dalam pengembangan sebuah aplikasi.
• UI menghabiskan 50%:
– Waktu untuk desain.
– Waktu untuk implementasi
– Waktu untuk ‘maintenance’
– Ukuran code program (survey of 74 software projects)
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 15: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/15.jpg)
Pengertian Usability • Usability -> Seberapa baik user bisa
menggunakan fungsionalitas sistem.
• Dimensi usability (harus bisa diukur)
– Learnability: Mudahkah dipelari?
– Efficiency: kalau sudah dipelajari, seberapa efisien bisa digunakan?
– Memorability: Mudahkah mengingat yang sudah dipelajari?
– Errors: Apakah banyak error dan apakah jika ada bisa diperbaiki?
– Satisfaction: Menyenangkankah untuk digunakan?
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 16: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/16.jpg)
Tingkat Prioritas Dimensi Usability
• Berbeda-beda
• Tergantung user – ‘Novice user’ membutuhkan learnability.
– User yang jarang menggunakan sistem membutuhkan memorability.
– ‘Expert user’ membutuhkan efficiency.
• Tidak semua user selalu ‘novice’ atau ‘expert’ – Pengalaman atas ‘domain knowledge’
– Pengalaman menggunakan aplikasi
– Pengalaman menggunakan fitur » Contoh aplikasi stock market
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 17: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/17.jpg)
Usability Bukan Satu-satunya
• Perancangan perangkat lunak harus memperhatikan hal-hal berikut: – Functionality – Usability
– Performance – Size
– Cost – Reliability
– Security – Standards
• Banyak keputusan yang diambil saat desain yang mengharuskan tradeoffs beberapa atribut lain.
– Contoh mode dalam besmart.
• Di kelas ini Usability nomor satu.
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 18: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/18.jpg)
Usability Engineering: Sebuah Proses
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 19: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/19.jpg)
Design • Task analysis / Analisis Tugas
– “Kenali User-mu” • Siapa mereka? Apa yang sudah mereka tahu? Bagaimana lingkungan mereka?
Apa tujuan mereka? Informasi apa yang mereka perlukan? Bagaimana mencapai tujuan?
• Design guideline / Acuan desain – Menghindari kesalahan umum
– Sifatnya tidak saklek
– Terkadang kontradiktif dan ‘vague’ • User harus selalu memegang kendali, namun, diwaktu yang sama kita harus dapat
mencegah error.
• User harus selalu diberi tahu apa yang sedang terjadi, namun juga jangan lupa batasan mental workload mereka.
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 20: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/20.jpg)
Implement • Prototyping / Membuat Prototipe
– Murah, Implementasi sekali pakai
– Mudah dibuat: kertas, Wizard of Oz
– Agak mudah dibuat: HTML, Visual Basic
• Teknik implementasi GUI
– Model Input/output
– Toolkits / alat bantu
– UI builders
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 21: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/21.jpg)
Evaluate • Evaluasi bertujuan mengetes prototipe
– Expert evaluation / Evaluasi oleh pakar
• Heuristics and walkthroughs – Coba-coba
• Predictive evaluation – Di-tes berdasarkan sebuah model (simulasi
pengguna)
• Empirical evaluation – Melihat pengguna memakai
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 22: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/22.jpg)
Software Lifecycle
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 23: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/23.jpg)
UI Lifecycle
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 24: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/24.jpg)
Iterative Design • Tidak bisa langsung benar
• Akan ada banyak siklus design-implement-
evaluate.
Di adaptasi dari “6.831 User Interface Design and Implementation” oleh Prof. Rob Miller
![Page 25: Hip Blue Template - Universitas Negeri Yogyakartastaff.uny.ac.id/sites/default/files/usability.pdf · 2012-04-10 · •Kamu bukan user-mu –UI membutuhkan banyak komunikasi dengan](https://reader033.fdocuments.in/reader033/viewer/2022041601/5e3146317b44725757335b07/html5/thumbnails/25.jpg)
Tujuan kuliah ini: • In this course, you’ll learn:
– how to discover users’ tasks
– how human capabilities influence usability
– guidelines for good UI design
– the importance of iterative design
– how to build cheap prototypes
– techniques for UI implementation
– how to evaluate UIs
– Expert (heuristic) evaluation
– User testing
– current research in user interfaces