PEMROGRAMAN

VISUALPERTEMUAN KE-2

D-3 Teknik Informatika

Universitas Sebelas Maret Oleh : Firma

Sahirul Bahtiar

SOFTWARE USABILITY

MASPEB.COM

6 standar ISO tentang kualitas software

• Fungsionalitas (functionality)

• Kehandalan (reliability)

• Efisiensi (efficiency)

• Pemeliharaan (maintainability)

• Portabilitas (portability)

• Kegunaan (usability)

3Pemrograman Visual

Perlu diingat....

• Pengguna sebaiknya terlibat dalam pengembangan proyek software

• Kegunaan (usability) spesifik dan tujuan bagi pengguna perlu diidentifikasi, terdokumentasi dan disetujui dari awal proyek.

• Iterasi dalam perbaikan diperlukan selama aktivitas inti

4Pemrograman Visual

UsabilityUsability digunakan untuk mengukur tingkat pengalaman pengguna ketika berinteraksi dengan produk sistem – baik itu website, software, mobile phone maupun peralatan yang digunakan pengguna lainnya.

Secara umum, usability mengacu kepada bagaimana pengguna bisa memperlajari dan menggunakan produk untuk memperoleh tujuannya dan seberapa puaskah mereka terhadap penggunaannya.

Joseph Dumas dan Janice Redish (1999)

5Pemrograman Visual

Tujuan Usability

• Effective to use

• Efficient to use

• Safe to use

• Have good utility

• Easy to learn

• Easy to remember how to use

6Pemrograman Visual

Tujuan Usability

• Effective to use (effectiveness)• Tujuan secara umum: seberapa baik sistem melakukan apa

yang seharusnya dilakukan?

• Efficient to use (efficiency)• Mengerjakan sesuatu dengan cepat dan mudah.

• Safe to use (safety)• Membantu mencegah pengguna dalam menemui error dan

bagaimana mengatasi error• Memberikan kepercayaan diri terhadap pengguna

7Pemrograman Visual

Tujuan Usability

• Have good utility• Memiliki fungsionalitas yang tepat• Membantu pengguna menyelesaikan tugas

• Easy to learn (learnability)• Seberapa mudah untuk mempelajari fitur-fitur (Jika sulit tidak akan

diperdulikan)

• Easy to remember how to use (memorability)• Mudah diingat penggunaannya setelah digunakan beberapa kali

8Pemrograman Visual

Pengalaman pengguna

• Memuaskan• Menyenangkan• Menikmati• Menghibur• Helpful• Termotivasi• Terpenuhi secara emosional• Mendukung kreativitas• ....dan lain-lain

9Pemrograman Visual

The Gap between users and the software

10Pemrograman Visual

Kemungkinan reaksi pengguna

11

• Kebingungan. Software terlalu kompleks. Strukturnya

tidak yang diharapkan pengguna.

• Frustasi. Software tidak fleksibel. Pengguna tidak

dapat melakukan undo.

• Panik. Waktu respon software terlalu lambat tepat

ketika pengguna sedang berada di bawah tekanan.

• Bosan/jemu. Waktu respon software lama dan

beberapa kegiatan terlalu sederhana.

• Penggunaan tidak lengkap. Hanya beberapa fungsi

atau tugas yang digunakan. Biasanya yang paling

mudah untuk dijalankan.

Pemrograman Visual

Kemungkinan reaksi pengguna

• Penggunaan tidak langsung. Manajer yang merasa

software susah digunakan akan mencari orang lain

untuk melakukannya.

• Modifikasi. Seseorang yang mengenal software secara

baik akan mengubahnya untuk memenuhi kebutuhan

secara personal.

• Pengabaian. Software akan ditolak baik oleh manajer

atau pengguna lainnya.

12Pemrograman Visual

Norman’s Seven Stages of Action

13Pemrograman Visual

Norman’s Seven Stages of Action

14Pemrograman Visual

Prinsip desain

• Visibility (visibilitas)• Feedback (umpan balik)• Constraints (batasan)• Mapping (pemetaan)• Consistency (konsistensi)• Affordances (memberi petunjuk)

15Pemrograman Visual

Visibility

• This is a control panel for an elevator. • How does it work?• Push a button for the floor you want?

• Nothing happens. Push any other button? Still nothing. What do you need to do?

It is not visible as to what to do!

16

From:

www.baddesigns.com

Pemrograman Visual

Visibility

How would you make this action more visible?

• make the card reader more obvious

• provide an auditory message, that says what to do (which language?)

• provide a big label next to the card reader that flashes when someone enters

• make relevant parts visible

• make what has to be done obvious

17

…you need to insert your room card in the slot by the buttons to get the elevator to work!

Pemrograman Visual

Feedback

• Mengirim kembali informasi kepada pengguna tentang apa yang telah pengguna lakukan.

• Suara, highlight, animasi atau kombinasinya.• Misal ketika sebuah tombol ditekan akan memberi umpan

balik berupa highlight merah

18Pemrograman Visual

Constraints

• Membatasi kemungkinan kejadian yang bisa dilakukan• Membantu mencegah pengguna memilih pilihan yang

tidak sesuai• Ada tiga tipe (Norman, 1999):

• physical• cultural • logical

19Pemrograman Visual

Physical constraints

• Mengacu pada cara objek secara fisik membatasi pergerakan sesuatu• Misal hanya satu cara kita bisa memasukkan kunci pada

lubang kunci

• Berapa banyak cara kita bisa memasukkan CD atau DVD ke dalam komputer?

20Pemrograman Visual

Logical constraints

• Mengeksploitasi kebiasaan manusia sehari-hari tentang bagaimana dunia nyata terlihat.• Apakah tombol OK lebih baik berwarna merah dan

tombol Cancel berwarna hijau?

21Pemrograman Visual

Logical or ambiguous design?

• Where do you plug the mouse?

• Where do you plug the keyboard?

• top or bottom connector?

• Do the color coded icons help?

22

From: www.baddesigns.com

Pemrograman Visual

More Logically Constrained

Provides direct adjacent mapping between icon and connector

Provides color coding to associate the connectors with the labels

23

From: www.baddesigns.com

Pemrograman Visual

Cultural constraints

• Simbol segitiga merah menandakan peringatan

• Dapat berupa universal atau spesifik• Dalam software kita mengetahui apa maksud dari sebuah

ikon

• Berhati-hati dengan perbedaan kultur dan keambiguan• Apakah tanda “x” pada checkbox berarti “dipilih” atau

“tidak dipilih”

• Apakah tanda “✔” lebih baik?

24Pemrograman Visual

Mapping

• Hubungan antara kontrol dengan pergerakan dan hasilnya pada dunia nyata

• Kenapa tombol kontrol dibawah ini merupakan pemetaan yang buruk?

25Pemrograman Visual

Mapping

• Kenapa tombol kontrol ini lebih baik??

• Tombol kontrol dipetakan lebih baik berdasarkan urutan dari aksi fast rewind, rewind, play and fast forward• Apakah ini merupakan mapping (pada kebanyakan

pemikiran manusia)?

• Apakah ada pemetaan lainnya yang lebih baik?

26Pemrograman Visual

Mappings di dapur

• Kontrol mana yang tepat untuk tiap burner?

27

A B C D

Pemrograman Visual

Kenapa ini merupakan desain yang lebih

baik?

28Pemrograman Visual

Consistency

• Design interfaces untuk operasi yang sama dan elemen yang sama untuk fungsi yang sama

• Contoh:• Selalu gunakan tombol Control pada setiap shortcut – ctrl+C,

ctrl+S, ctrl+O

• Gunakan tema dan warna yang sama untuk sebuah sistem

• Keuntungan utama dari interface yang konsisten adalah lebih mudah untuk dipelajari dan digunakan.

29Pemrograman Visual

Internal and external consistency

• Internal consistency mengacu pada desain operasi untuk berlaku sama dalam sebuah aplikasi• Sulit untuk dicapai untuk interface yang kompleks

• External consistency mengacu pada desain operasi, interface, dll yang sama untuk semua aplikasi dan peralatan.• iOS, MS Office, dll

30Pemrograman Visual

Affordances

• Mengacu pada atribut dari objek yang memungkinkan pengguna mengetahui cara menggunakannya• Tombol mouse ditekan, handel pintu didorong, link di-

klik.• scrollbars dinaikkan atau diturunkan, ikon diklik

31Pemrograman Visual

Adjusting Tabs in MS Word

• What’s the idea here? Problems?

• What principle(s)?

• Affordance

32Pemrograman Visual

“Usability principles” (Nielsen 2001)

• Visibility of system status

• Match between system and the real world

• User control and freedom

• Consistency and standards

• Help users recognize, diagnose and recover from errors

• Error prevention

• Recognition rather than recall

• Flexibility and efficiency of use

• Aesthetic and minimalist design

• Help and documentation

33Pemrograman Visual

Shneiderman’s Eight Golden Rules

1. Strive for consistency

2. Cater to universal usability

3. Offer informative feedback

4. Design dialogs to yield closure

5. Prevent errors

6. Permit easy reversal of actions

7. Support internal locus of control

8. Reduce short-term memory load.

34Pemrograman Visual

Pertanyaan...???

Komentar...???

35Pemrograman Visual