PAGE

LEARNABILITY I

www.infobusiness.com
 PAGE 2

The main thing is that everything become simple,

easy enough for a child to understand.

Albert Camus
 PAGE 3

Outline

• UI Hall of Fame or Shame

• Learning Approaches
• Interaction Styles
 PAGE

UI Hall of Fame or Shame

www.infobusiness.com
 PAGE 5

• IBM RealCD
• Software CD player,
memainkan audio dari
CD pada CD-ROM.
 PAGE 6

IBM RealCD: Mengapa Disebut Real?

 PAGE 7

IBM RealCD: Metafora

• [KBBI] metafora/me·ta·fo·ra/ /métafora/ n Ling pemakaian

kata atau kelompok kata bukan dengan arti yang sebenarnya,
melainkan sebagai lukisan yang berdasarkan persamaan atau
perbandingan, misalnya tulang punggung...

Desainer berlandaskan
pada obyek nyata:
METAFORA
kotak CD berbahan
plastik
 PAGE 8

IBM RealCD: Metafora, Untuk Apa?

• Metafora adalah salah satu cara untuk membuat interface lebih

mudah dipelajari, karena user dapat menerka/mereka-reka
cara kerja sebuah obyek berdasarkan pengetahuan mereka
tentang metafora interface tersebut.

METAFORA LEARNABILITY
 PAGE 9

Tampilan UI saat
aplikasi pertama
sekali dijalankan

UI didominasi
artwork, seperti
Logo statis, saat
pada sampul CD
diklik tidak
menghasilkan
apapun
 PAGE 10

Bagaimana Memulai? Di Mana Daftar Lagu?

 PAGE 11

IBM RealCD: Masalah Pada Metafora

•User bingung untuk memulai

•Satu-satunya cara START:
menekan tombol ini

•Metafora: membuka kotak CD

bagian belakang.
•Menampilkan beberapa
kontrol penting.
 PAGE 12

IBM RealCD: Masalah Pada Metafora

PEMILIHAN METAFORA YANG SALAH
Kotak CD sebenarnya bukan pemutar CD

DESAINER HARUS MENCARI TEMPAT

PELETAKAN KONTROL
Menunjukkan bahwa metafora telah
mendikte tata letak kontrol, sehingga
terpaksa disusun secara vertikal dan
mengesampingkan aspek lain

TERLALU PATUH PADA METAFORA

Mendorong desainer untuk mengabaikan
konsistensi dengan aplikasi desktop lain
 PAGE 13

IBM RealCD: Metafora

IBM RealCD:
menghasilkan beberapa
Metafora Learnability efek yang luar biasa,
TIDAK SATU PUN YANG
BAIK.
 PAGE 14

IBM RealCD: Metafora

Metafora interface dapat Kehadiran metafora tidak

disalahgunakan dengan menjamin sebuah UI uang
buruk intuitif atau mudah dipelajari

Penggunaan metafora kotak CD Metafora kotak CD malah membuat

menjadi software IBM RealCD software IBM RealCD berbeda dalam
tidak tepat karena kotak CD bukan menjalankan fungsi dengan aplikasi
pemutar audio. desktop lainnya.
 PAGE 15

IBM RealCD vs Windows Media Player

 PAGE 16

IBM RealCD vs Windows Media Player

 PAGE 17

IBM RealCD vs Apple iTunes

 PAGE 18

IBM RealCD vs Apple iTunes

 PAGE 19

IBM RealCD vs Apple iTunes

 PAGE 20

IBM RealCD vs KM Player

 PAGE 21

IBM RealCD: Belajar dari Contoh

• Metafora bukanlah satu-satunya jalan untuk mencapai

learnability. Pada kenyataannya, metafora mungkin adalah jalan
yang paling sulit, karena penuh perangkap terhadap desainer.
 PAGE

Learning Approaches

www.infobusiness.com
 PAGE 23

How We Learn a New User Interface?

Saat pertama kali komputer muncul, programmer
NOT BY READING
berasumsi user akan membaca buku petunjuk
A MANUAL
lebih dulu

Perusahaan berasumsi bahwa karyawan

NOT BY TAKING
mereka pertama sekali akan mengambil
A CLASS
kelas

Bahkan saat bantuan online dibangun pada setiap

NOT BY READING
aplikasi desktop, user tidak menuju bantuan
THE HELP FIRST
terlebih dulu
 PAGE 24

How We Learn a New User Interface?

LEARNING BY DOING
“Bagaimana cara
User mempunyai menghilangkan mata
TUJUAN untuk dicapai merah pada gambar saya di
Adobe Photoshop?”

Menemukan tool Red Eye

User
MENGEKSPLORASI Removal pada toolbar di
fitur untuk mencapai sebelah kiri aplikasi Adobe
tujuan
Photoshop
 PAGE 25

How We Learn a New User Interface?

LEARNING BY DOING

User tidak mencoba Desain interface harus

untuk belajar dahulu
Sebaliknya, user biasanya mencoba:
• melakukan apa yang ingin
mereka lakukan, dan
• mengeksplorasi interface untuk
melihat apakah mereka dapat
mengetahui bagaimana
melakukannya.
Learning by doing MENGKOMUNIKASIKAN
cara menggunakan
aplikasi dan membantu
• User memulai dengan tujuan user mencapai TUJUAN
yang sudah ada dalam
pikiran.
• Mereka lebih tertarik
mencapai tujuan tersebut
daripada belajar interface-
nya.
 PAGE 26

How We Learn a New User Interface?

SEEKING HELP
 PAGE 27

How We Learn a New User Interface?

SEEKING HELP

Jangan menggunakan penjelasan

User mencari bantuan
panjang. Jawaban langsung ke inti
ketika mereka stuck
permasalahan.

User sudah mempunyai masalah

ketika mereka mencari bantuan
dan biasanya mencari solusi yang
nyata ke permasalahannya.
 PAGE 28

How We Learn a New User Interface?

LEARNING BY WATCHING
Menggunakan pintu otomatis saat
cek barcode tiket di bandara?

Zoom-in dan zoom-out layar

Mengamati pengguna lain
smartphone dengan gerakan jari?

Menggunakan Alt + Tab untuk

berpindah aplikasi di Windows?
 PAGE 29

How We Learn a New User Interface?

LEARNING BY WATCHING
 PAGE 30

How We Learn a New User Interface?

Learning by
Learning by doing Seeking help
watching

Mencoba apa yang User mencari Mengamati pengguna

INGIN mereka lakukan jawaban spesifik lain
 PAGE 31

Pelajaran untuk Desainer

Caranya dengan mengumpulkan informasi
Ketika mendesain interface,
tentang user dan kebutuhannya
ketahui tujuan user

UI harus mengkomunikasikan UI dapat diistilahkan sebagai guru utama

bagaimana aplikasi bekerja untuk mengetahui bagaimana menggunakan
dan cara menggunakannya sebuah aplikasi

Help harus mudah ditemukan Bantuan harus langsung ke tujuan, kepada

dan berorientasi pada tujuan permasalahan yang dicari solusinya oleh user
akhir user
 PAGE

Interaction Styles

www.infobusiness.com
 PAGE 33

Recognition vs Recall

RECOGNITION Mengingat dengan bantuan isyarat visual

Mengenali Pengetahuan di luar diri

RECALL Mengingat tanpa bantuan

Mengingat Pengetahuan berada dalam kepala
 PAGE 34

Interaction Style #1: Command Language

• User mengetikkan dalam perintah
• Semua pengetahuan ada di dalam kepala

Learnability rendah
 PAGE 35

Interaction Style #1: Command Language

 PAGE 36

Interaction Style #2: Menu and Forms

• User diminta untuk memilih dari menu atau mengisi form
• Semua pengetahuan di luar diri

Lebih mudah dipelajari

 PAGE 37

Interaction Style #2: Menu and Forms

 PAGE 38

Interaction Style #3: Direct Manipulation

• User berinteraksi dengan representasi visual dari obyek data
• Representasi visual berkesinambungan
• Tindakan fisik atau menekan tombol berlabel
• Cepat (rapid), bertingkat (incremental), dapat diubah ke keadaan
sebelumnya (reversible), efek dapat langsung terlihat (immediately
visible effects)
 PAGE 39

Interaction Style #3: Direct Manipulation

 PAGE 40

Interaction Style #3: Direct Manipulation

• Tiga prinsip direct manipulation (Ben Shneiderman)
1. User berinteraksi dengan representasi visual dari obyek data
2. User berinteraksi dengan representasi visual menggunakan aksi
fisik atau menekan tombol berlabel
3. Efek dari tindakan harus cepat (rapid), incremental, reversiable
(dapat dibatalkan), (segera terlihat) immediately visible
 PAGE 41

Interaction Style #3: Direct Manipulation

• [1] User berinteraksi dengan representasi visual dari obyek data
• Representasi visual berkesinambungan
• Icon yang merepresentasikan file dan folder di dekstop
• Obyek grafis pada editor gambar
• Teks di aplikasi word precessor
• Message di inbox
• Representasi dapat berupa verbal (kata) atau ikon (gambar)
• Ditampilkan secara terus menerus, bukan hanya karena permintaan
 PAGE 42

Interaction Style #3: Direct Manipulation

• [2] User berinteraksi dengan representasi visual menggunakan aksi
fisik atau menekan tombol berlabel
• Aksi fisik, misalnya:
• Klik sebuah obyek untuk memilihnya
• Men-drag untuk memindahkan
• Men-drag sebuah selection untuk mengubah ukurannya
• Tindakan fisik adalah direct manipulation yang paling langsung; Anda
berinteraksi dengan obyek virtual seperti menekannya secara langsung
 PAGE 43

Interaction Style #3: Direct Manipulation

• Tidak semua fungsi interface dapat dengan mudah dipetakan ke sebuah
aksi fisik (misalnya, mengubah teks menjadi tebal), sehingga kita
mengizinkan “perintah” dengan menekan tombol (tetapi tombol harus
diberikan secara visual dalam interface, sehingga menekannya dapat
disamakan dengan menekan tombol fisik).
 PAGE 44

Interaction Style #3: Direct Manipulation

• [3] Efek dari tindakan harus:
• cepat/rapid (terlihat secepat mungkin)
• incremental (dapat menarik scrollbar sedikit atau banyak, dan melihat
setiap peningkatan perubahan)
• reversible (dapat membatalkan operasi - dengan tindakan fisik, misalnya
menggerakkan tangan kembali ke tempat asalnya, tetapi dengan tombol
berlabel biasanya perlu perintah Undo)
• segera terlihat/immediately visible (user tidak perlu melakukan apapun
untuk melihat efek)
 PAGE 45

Interaction Style #3: Direct Manipulation

• Mengapa direct manipulation sangat powerful?
• Karena mengeksplorasi keterampilan dan kemampuan motorik
manusia
• Sedikit sekali ketergantungan terhadap kemampuan bahasa
dibandingkan antarmuka berupa command atau menu/form
• Direct manipulation lebih “natural”, karena kita belajar
memanipulasi hal fisik lebih dahulu dibanding belajar berbicara,
membaca dan menulis
 PAGE 46

Interaction Style #4: Speech Dialog

• User berbicara dengan natural
language dan sistem merespon
dengan cara yang sama
 PAGE 47

Interaction Style #4: Speech Dialog

• Speech dialog bertitikberat pada pengetahuan di dalam kepala.
Pengetahuan bersifat “alami”, di mana manusia belajar cara berbicara
dan mengerti bahasa manusia sangat awal dalam hidupnya, dan
manusia memiliki kemampuan khusus dapat berinteraksi secara lisan.
• Tetapi diluar mekanisme berbicara, manusia masih perlu belajar apa
yang dapat diucapkan. Fungsi apa yang tersedia dalam sistem? Apa
yang dapat ditanyakan? Hal ini merupakan persoalan mendasar meski
dalam interaksi antarmanusia.
 PAGE 48

Perbandingan Interaction Style

• Knowledge in the head vs. world Kode:
• Error messages • Command Language (CL)
• Efficiency • Menu and Forms (MF)
• User Experience • Direct Manipulation (DM)
• Synchrony • Speech Dialog (SD)
• Programming difficulty
• Accessibility
 PAGE 49

Perbandingan Interaction Style: Learnability

• Knowledge in the head vs knowledge in the world
• CL membutuhkan pembelajaran yang signifikan
• User harus menaruh banyak pengetahuan di dalam kepala untuk
menggunakan bahasa command, dengan membaca, training, praktek, dll
( juga diimbangi dengan memiliki manual, online help ketika menggunakan
sistem).
• MF juga membutuhkan informasi lebih, harus memperhatikan affordance,
feedback, dan konstrain dari metafora visual.
• Karena mengenali lebih mudah dari mengingat, artinya MF dan DM lebih
LEARNABLE dan MEMORABLE dibanding CL dan SD.

Kode: Command Language (CL), Menu and Forms (MF), Direct Manipulation (DM), Speech Dialog (SD)
 PAGE 50

Perbandingan Interaction Style: Error Message

• CL, MF dan SD sering mendapat error message (misalnya, Anda

tidak memasukkan nomor telepon), tetapi DM jarang
membutuhkan error message.
• Tidak ada error message ketika Anda men-drag scrollbar terlalu
jauh; penunjuk scrollbar akan berhenti dan hambatan visual
akan membuatnya berhenti.

Kode: Command Language (CL), Menu and Forms (MF), Direct Manipulation (DM), Speech Dialog (SD)
 PAGE 51

Perbandingan Interaction Style: Efficiency

• Orang yang ahli dapat sangat efisien bekerja dengan CL

• Banyak sistem CL yang memiliki command history dan
fasilitas scripting yang mengizinkan command untuk
digunakan kembali dibandingkan harus mengetik berulang
kali.
• Hasil yang efisien dengan interface ML membutuhkan shortcut
yang baik (misalnya keyboard shortcut, tab antar field, dll).

Kode: Command Language (CL), Menu and Forms (MF), Direct Manipulation (DM), Speech Dialog (SD)
 PAGE 52

Perbandingan Interaction Style: User Type

• CL secara umum lebih baik untuk user yang ahli, yang

menggunakan pengetahuan mereka secara aktif dan yang selalu
ingin investasi melalui training dan belajar sebagai ganti dari
efisiensi yang lebih besar.
• MF, DM dan SD secara umum lebih baik untuk user yang baru
(novice) dan user yang jarang (infrequent)

Kode: Command Language (CL), Menu and Forms (MF), Direct Manipulation (DM), Speech Dialog (SD)
 PAGE 53

Perbandingan Interaction Style: Synchrony

• CL andalah sinkron (pertama sekali user mengetikkan command yang
lengkap, kemudian sistem mengerjakannya)
• Sama juga dengan MF, misalnya Anda mengisi form di web and
kemudian men-submit-nya
• SD membutuhkan turn-taking antara sistem dan user, sehingga SD
juga sinkron
• DM adalah asynchronous: user dapat mengarahkan mouse ke manapun
dan tidak melakukan apapun kapanpun. Interface DM adalah event
driven.

Kode: Command Language (CL), Menu and Forms (MF), Direct Manipulation (DM), Speech Dialog (SD)
 PAGE 54

Perbandingan Interaction Style: Synchrony

• CL andalah sinkron (pertama sekali user mengetikkan command yang
lengkap, kemudian sistem mengerjakannya)
• Sama juga dengan MF, misalnya Anda mengisi form di web and
kemudian men-submit-nya
• SD membutuhkan turn-taking antara sistem dan user, sehingga SD
juga sinkron
• DM adalah asynchronous: user dapat mengarahkan mouse ke manapun
dan tidak melakukan apapun kapanpun. Interface DM adalah event
driven.

Kode: Command Language (CL), Menu and Forms (MF), Direct Manipulation (DM), Speech Dialog (SD)
 PAGE 55

Using Multiple Interaction Styles

• Real user interfaces often combine multiple
interaction styles to make up for deficiencies
in one style.
• For example, the Siri system built into iOS
has both speech dialog (the user speaks
something like “wake me up in one hour”,
and the system replies with speech) and
menu/form (the alarm time and on/off
setting can be manipulated here).
 PAGE 56

Referensi
• Learnability, MIT Open Courseware, User Interface Design and
Implementation, https://ocw.mit.edu/courses/electrical-engineering-
and-computer-science/6-831-user-interface-design-and-
implementation-spring-2011/lecture-notes/MIT6_831S11_lec02.pdf
• Designing The User Interface: Stategies for Effective Human-
Computer Interaction (Sixth Edition), Ben Shneiderman.
 PAGE 57

Sumber Gambar
• https://ittybittyusability.files.wordpress.com/2015/11/
normandoor_703.jpg
• https://www.flickr.com/photos/cennydd/3191424928
• https://mrjoe.uk/assets/door-affordance.jpg
• http://impossibleobjects.com/catalogue/coffeepot-for-
masochists.html
• http://unsplash.com
 PAGE

www.infobusiness.com