Interaksi Manusia dan Komputer
Model Konseptual Model Konseptual
Pengantar
Pengantar
( lanjutan)
Pengantar
( lanjutan)
Tujuan Materi I ni
Mengetahuai berbagai tipe dari model yang relevan dengan proses desain IMK.
Memahami bagaimana: M h i b i
model mempengaruhi interaksi para pemakai (user)
dengan sistem desain konseptual mengarahkan untuk memanfaatkan hal tersebut.
Menganalisis suatu permasalahan dengan menerapkan Menganalisis suatu permasalahan dengan menerapkan pendekatan desain konseptual.
I de Model Konseptual
I de Model Konseptual
( lanjutan) I de Model Konseptual
Tujuan dari model konseptual adalah memastikan
bahwa user membangun sebuah model sesuai dengan keinginan pengguna sistem dengan saling berinteraksi keinginan pengguna sistem dengan saling berinteraksi dengan system image (user interface, manual, pelatihan dll).
Konsep user’s model sangat dipengaruhi oleh pengetahuan sebelumnya yang dimiliki pemakai dan pengalaman. pengalaman
( lanjutan) I de Model Konseptual
Gambaran sistem harus didasarkan pada suatu model desain yang ringkas dan jelas.
Model desain harus didasarkan pada keperluan M d l d i h did k d k l pemakai, pengetahuan sebelumnya serta pengalaman.
Model desain tidak merupakan suatu representasi dari struktur dasar sistem, tetapi sebuah model yang akan membantu para pemakai menggunakan sistem secara efektif. efektif
I de Model Konseptual
( lanjutan)
Model, Models & More Muddles
user’s model / mental model
design model / conceptual model
system image
user model metaphor
metaphor
analogy
Mental Model
Para pemakai mengembangkan suatu teori/konsep dari sebuah sistem melalui belajar dan menggunakannya.
Pengetahuan sering dideskripsikan sebagai sebuah P t h i did k i ik b i b h model mental:
Bagaimana cara menggunakan sistem (what to do next) g gg ( )
Harus berbuat apa dengan sistem yang tidak familiar atau situasi yang tak terduga (how the system works)
Model mental dapat dijabarkan sebagai konstruksi Model mental dapat dijabarkan sebagai konstruksi
internal dari beberapa aspek menyangkut dunia eksternal yang memungkinkan prediksi yang akan dilakukan.
Model mental melibatkan proses sadar dan tidak sadar, dimana gambaran dan analogi diaktifkan. dimana gambaran dan analogi diaktifkan
Teori Psikologi
Terminologi: Istilah asli yang digunakan dalam teori psikologi adalah mental models. Hanya saja istilah ini telah diterapkan pada hampir semua jenis model dalam telah diterapkan pada hampir semua jenis model dalam
IMK. Untuk menghindari kebingungan dalam IMK, istilah
user’s model saat ini secara luas digunakan manakala
mengacu pada representasi pengguna secara internal d i i l tentang bagaimana sistem bekerja.
Hal ini penting agar tidak dikacaukan dengan istilah user Hal ini penting agar tidak dikacaukan dengan istilah user
model, yang merupakan model persepsi atau perilaku
pemakai yang diterapkan pada sebuah program komputer. Istilah ini sering dijumpai pada sistem adaptif komp ter Istilah ini sering dij mpai pada sistem adaptif atau user interface dan paket pembelajaran dengan bantuan komputer, dan terkadang digunakan untuk evaluasi sistem.
Karakteristik Model Mental
Tidak sempurna
Secara konstan berkembang
Bukan penyajian akurat (berisi ketidakpastian dan kesalahan)
Menyediakan suatu penyajian yang sederhana dari
Menyediakan suatu penyajian yang sederhana dari suatu gejala/fenomena kompleks
Dapat diwakili oleh satu set aturan if-then-else
Bagaimana Mendapatkan Model Mental?
Selama penggunaan sistem:
Aktivitas pemakai mengarah kepada sebuah model mental
T i b if t j l k dik b k l h
Teori bersifat menjelaskan, yang dikembangkan oleh
pemakai Sering digunakan untuk meramalkan masa depan perilaku yang berhubungan dengan sistem
Pengamatan orang lain menggunakan sistem:
Pengamatan sambil lalu atas orang lain yang bekerja
Pengamatan sambil lalu atas orang lain yang bekerja
Tanyakan pada orang lain “lakukan ini untuk-ku”
Sesi pelatihan formal p
Pengamatan terhadap sistem:
Dokumentasi, halaman bantuan, buku-buku “for Dummies”
Hal ini dilakukan oleh pemakai (bukan perancang)
Contoh:
Model Mental pada Panggilan Telepon
Apa yang Digambarkan Model Mental pada Pemakai?
Norman’s seven-stage modelModel Mental vs Desain Konseptual
Model mental:
Bagaimana pemakai melihat sistem melalui model mental
Bagaimana pemakai mengandalkan pada model mental B i k i d lk d d l t l selama pemakaian
Berbagai format model mental
Bagaimana model mental dapat mendukung interaksi para pemakai
Desain konseptual: Desain konseptual:
Mendefinisikan model mental yang diharapkan Menyembunyikan teknologi sistem
Merancang system image yang cocok/sesuai Penerapan pedoman desain dengan tepat
Analisis menggunakan Cognitive Walkthrough: contoh, Analisis menggunakan Cognitive Walkthrough: contoh prototipe
Model Konseptual
Representasi / penyajian sistem yang akurat, lengkap dan konsisten.
Berpegang pada perancang sistem, para pemakai ahli B d i t k i hli dan pelatih.
Harus didasari pada kebutuhan tugas para pemakai, p g p p , pengetahuan sebelumnya dan pengalaman, persepsi dan pembatasan teori.
( lanjutan) Model Konseptual
Gagasan untuk suatu model konseptual sangat terkait dengan Norman & Draper’s (1986) User-Centred Design: perancang mengamati pemakai yang melakukan g p g g p y g suatu tugas atau mengevaluasi sebuah prototipe dan usaha untuk sampai pada konsep bagi sebuah desain.
Hal ini mungkin dinyatakan dalam istilah metaphor (a la Hal ini mungkin dinyatakan dalam istilah metaphor (a la desktop or rooms) atau lebih abstrak direpresentasikan dalam suatu gambar atau diagram. Perancang selanjutnya akan menggunakan konsep ini untuk selanjutnya akan menggunakan konsep ini untuk menggolongkan kemampuan sistem dan bagaimana hal tersebut dipilih/dieksekusi, dan komunikasi model tersebut melalui antarmuka pemakai. tersebut melalui antarmuka pemakai
Pemakai selanjutnya akan membentuk suatu model mental yang cocok dan user’s model melalui interaksi dengan sistem. d i t
( lanjutan) Model Konseptual
Jika proses ini sukses, maka pemakai akan mengembangkan suatu user’s model yang sesuai tentang bagaimana sistem bekerja dan menggunakan tentang bagaimana sistem bekerja dan menggunakan sistem tersebut dengan baik.
( lanjutan)
Model Konseptual Orang memiliki mental model tentang bagaimana sesuatu bekerja. Model konseptual dibangun dari: affordances (afford menghasilkan,memberikan) affordances (afford=menghasilkan memberikan) causality (hubungan sebab akibat) constraints (batasan) mapping (pemetaan) i ( t ) positive transfer (perpindahan hal positif) population stereotypes/cultural standards Instructions (instruksi) interactions (interaksi, termasuk dengan orang lain) familiarity with similar devices (kebiasaan dengan alat serupa, familiarity with similar devices (kebiasaan dengan alat serupa perpindahan hal positif) Model mungkin saja salah, terutama jika atribut-atributnya menyesatkan menyesatkan Model mengijinkan kita secara mental menirukan operasi peralatanMengapa Desain itu Susah?
Mengapa Desain itu Susah?
( lanjutan)
Mengapa Desain itu Susah?
( lanjutan)
Sebuah Model Konseptual yang Baik: Gunting
Menyediakan: lubang untuk sesuatu yang disisipkan Batasan: Batasan: lubang besar untuk beberapa jari, lubang kecil untuk ibu jari Pemetaan: P t hubungan antara lubang dan jari yang diusulkan/disediakan dan dibatasi oleh penampilan Perpindahan positif dan ungkapan budaya: yang diajarkan manakala muda yang diajarkan manakala muda mekanisme yang tetap Model konseptual: obyek fisik menyiratkan bagaimana komponen bekerja b k fi ik i tk b i k b k j
Sebuah Model Konseptual yang Buruk: Arloji Digital
Menyediakan: empat tombol untuk ditekan, tetapi tidak jelas apa fungsinya tidak jelas apa fungsinya Pemetaan dan batasan tidak dikenali: tidak ada relasi yang tampak antartombol, ti d k ki d tindakan yang mungkin dan mengakhiri hasil Manfaat pelatihan: sedikit hubungan dengan arloji analog Ungkapan budaya: beberapa hal distandarisasi mengendalikan inti dan fungsi-fungsi beberapa hal distandarisasi mengendalikan inti dan fungsi fungsi tetapi tetap sangat variabel. Model konseptual: perlu dipelajari perlu dipelajari
Model Konseptual: Pedoman Pokok # 1
Menyediakan suatu model konseptual yang baik
mengijinkan pemakai untuk meramalkan/memprediksi f k d i ti d k k efek dari tindakan mereka.
Masalah:
Perancang model konseptual berkomunikasi via
Perancang model konseptual berkomunikasi via ‘system image’:
penampilan, instruksi, perilaku sistem melalui perpindahan i t k i k d t t ( kli l ) interaksi, ungkapan dan stereotypes (=klise,pengulangan)
Jika system image tidak menghasilkan model yang jelas dan konsisten: j
pemakai akan mengembangkan kesalahan, model konseptual model konseptual
Model Konseptual: Pedoman Pokok # 2
Membuat segala sesuatunya menjadi tampak
Hubungan antara interaksi pemakai, tindakan yang
dibutuhkan, dan hasil yang masuk akal dan penuh arti dibutuhkan dan hasil yang masuk akal dan penuh arti
Menggunakan affordances yang tampak, memetakan dan batasan
Menggunakan ungkapan budaya yang tampak
Mengingatkan orang dari apa yang bisa dilakukannya dan bagaimana cara melakukan hal tersebut bagaimana cara melakukan hal tersebut
Perbedaan I ndividu
Perbedaan I ndividu
( lanjutan)
System I mage
Segala sesuatu yang dilihat pemakai dari sistem atau saling berinteraksi dengan:
antarmuka pemakai (termasuk bantuan) t k k i (t k b t )
dokumentasi
pelatihan pelatihan
( lanjutan) System I mage
System image hanya bermakna bahwa perancang memperoleh komunikasi model desain kepada pemakai.
Lagipula, perancang tidak bisa mempercayakan pada Lagipula perancang tidak bisa mempercayakan pada semua aspek potensial dari system image dapat tersedia.
Kebanyakan aplikasi Internet seperti browser dan aplikasi email, sebagai contoh, digunakan tanpa para pemakai memperoleh pelatihan atau membaca pemakai memperoleh pelatihan atau membaca dokumentasi pemakai mana pun. Dalam situasi itu, hanya sebagian dari system image yang para pemakai berinteraksi dengan tampilan layar yang nyata berinteraksi dengan tampilan la ar ang n ata (mencerminkan perilaku sistem) dan sistem bantuan terintegrasi.
Mempresentasikan System I mage
Penyajian eksplisit
Menyediakan suatu peta saat ini dan konsisten tentang
segalanya segalanya
Penyajian implisit
Menyediakan pedoman/isyarat tentang model sistem y p y g
Semakin membuka/menguatkan model sistem
Contoh voice mail telepon: Baik: You have three new messages. Press 2 to hear your first B ik Y h th P 2 t h fi t new message.
Buruk: Press 2 to hear new message.
Menyembunyikan Kompleksitas Sistem
( lanjutan) Menyembunyikan Kompleksitas Sistem
Banyak sistem memiliki detail low-level yang morat- marit:
Hal ini tidak mungkin relevan dengan aktivitas pemakai Hal ini tidak mungkin relevan dengan aktivitas pemakai
Kemampuan penuh dari sistem mungkin tidak dibutuhkan
Contoh: MS Word memiliki ratusan perintah p
Banyak pemakai hanya memerlukan sebagian kecil subset dari perintah tersebut
Para pemakai dapat menyembunyikan kompleksitas P k i d t b ik k l k it dengan customisasi
Administrator IT mungkin menyediakan kemampuan makro Bundel perintah low-level makro ke dalam konsep tunggal
Wizards mengijinkan seorang pemakai untuk “do what’s right , melompati detail right” melompati detail
Carroll dan Mack (1984) didukung “training wheels”
Anderson, B., Smyth, M., Knott, R., Bergan, J., Alty, J. (1994):
Minimising Conceptual Baggage: Making choices about metaphor.
In G. Cockton, S. Draper & G. Weir: People and Computers IX - Proceedings of HCI’94, Glasgow, pp 179-194. g
, g , pp Gentner, S. & Stevens, A. L. [Eds.] (1983): Mental Models. Hillsdale, NJ: Erlbaum.
Johnson-Laird, P. N. (1983): Mental Models. Cambridge: Cambridge University Press. University Press
Nielsen, J. (1990): A Meta-Model for Interacting with Computers.
Interacting with Computers, 2, 147-160.Norman, D.A. (1986). Cognitive Engineering. In Norman & Draper , ( ) g g g p [Eds.] User-Centered System Design, 1986, Hillsdale, NY: LEA. Norman, D. A. & Draper, S. W. [Eds.] (1986): User-Centered System Design. Hillsdale, NY: LEA.
Robert, D., Berry, D., Mullaly, J. Isensee, S. (1998): Designing for Robert D Berry D Mullaly J Isensee S (1998): Designing for
the User with OVID: Bridging User Interface Desing and Software Engineering. Macmillan Technical Pub.
Tognazzini, B. (1992): Tog on Interface. Reading, Mass.: Addison-
Wesley.
Gaya Dialog Gaya Dialog
Deskripsi Deskripsi Deskripsi Deskripsi
Menu merupakan sekumpulan Menu merupakan sekumpulan Menu merupakan sekumpulan Menu merupakan sekumpulan pilihan yang dapat dipilih user pilihan yang dapat dipilih user sesuai dengan keinginannya. sesuai dengan keinginannya. g g g g y y
Banyak variasi dari gaya dialog Banyak variasi dari gaya dialog Menus, diantaranya : Menus, diantaranya : Menus, diantaranya : Menus, diantaranya :
1/16/2010 1/16/2010 2 2
Contoh 1 Contoh 1 Contoh 1 Contoh 1 OFFICE AUTOMATION OFFICE AUTOMATION OFFICE AUTOMATION OFFICE AUTOMATION
Move cursor to selection : Move cursor to selection : __ Word processing __ Word processing __ __ Electronic mail __ __ Electronic mail __ Spreadsheet __ Spreadsheet __ Graphics __ Graphics 1/16/2010 1/16/2010
Press RETURN to accept Press RETURN to accept 3 3
Contoh 2 Contoh 2 Contoh 2 Contoh 2 WORD PROCESSING WORD PROCESSING WORD PROCESSING WORD PROCESSING
1. Create
1. Create
2. Edit
2. Edit
3. Print
3. Print
4. File Enter selection : __ Enter selection : __ 1/16/2010 1/16/2010 Press RETURN to accept Press RETURN to accept 4 4
4. File
Contoh 3 Contoh 3 Contoh 3 Contoh 3 File File Edit Edit Search Search Format Format
Ç
Open Ç Open Save Save Print Print 1/16/2010 1/16/2010 5 5
Struktur Menu (1) Struktur Menu (1) Struktur Menu (1) Struktur Menu (1)
‘Hierarki’ ‘Hierarki’ contoh : contoh : Office Automation Office Automation
Word Word Electronic Electronic Spreadsheet Spreadsheet Graphics Graphics Processing mail Processing mail Create Create Edit Edit Print Print 1/16/2010 1/16/2010 File File File File 6 6
Struktur Menu (2) Struktur Menu (2) Struktur Menu (2) Struktur Menu (2)
‘Linear’ ‘Linear’ Linear Linear
Contoh : Contoh : Contoh : Contoh : Print Request Æ Print Request Æ Page Size ? Page Size ? Æ Æ Printer ? Æ Printer ? Æ Paper Feeder ? Paper Feeder ? Æ Æ Orientation ? Æ Orientation ? Æ Draft Quality ? Draft Quality ? Æ Æ
1/16/2010 1/16/2010 7 7
Struktur Menu (3) Struktur Menu (3) Struktur Menu (3) Struktur Menu (3)
‘Network’ ‘Network’ Office Automation Office Automation Word Electronic Word Electronic Spreadsheet Graphics Spreadsheet Graphics
Processing Processing Processing mail Processing mail mail mail H l H l Help Help Print Print P i t P i t Quit Quit Q it Q it 1/16/2010 1/16/2010 8 8
Kelebihan (1) Kelebihan (1) Kelebihan (1) Kelebihan (1)
Self explanatory Self explanatory p p y y
Sistem dengan Menu Sistem dengan Menu mudah dipelajari, mudah dipelajari,
Menu menjelaskan
karena Menu karena menjelaskan semantik semantik (what (what can be done) dan can be done) dan sintak b d b d ) d ) d sintak (how to do it) dari i t k i t k (h (how to do it) dari (h t d it) d i t d it) d i sistem secara jelas. sistem secara jelas.
Requires little human memory Requires little human memory Requires little human memory Requires little human memory
Mudah diingat, karena yang perlu diingat Mudah diingat, karena yang perlu diingat hanyalah pilihan menu yang tampil dilayar. hanyalah pilihan menu yang tampil dilayar.
Few keystrokes Few keystrokes
Sedikit menggunakan tombol Sedikit menggunakan tombol--tombol pada tombol pada 1/16/2010 1/16/2010 papan keyboard papan keyboard papan keyboard papan keyboard 9 9
Kelebihan (2) Kelebihan (2) Kelebihan (2) Kelebihan (2)
Easy error handling Easy error handling y y g g
Karena sedikit input yang digunakan, lebih Karena sedikit input yang digunakan, lebih mudah dalam pembuatan error handling-- mudah dalam pembuatan error handling nya nya
Enhancements are visible Enhancements are visible
Penambahan fungsi baru atau perubahan Penambahan fungsi baru atau perubahan Penambahan fungsi baru atau perubahan Penambahan fungsi baru atau perubahan pada menu akan terlihat secara langsung pada menu akan terlihat secara langsung di layar di layar
1/16/2010 1/16/2010 10 10
Kekurangan Kekurangan Kekurangan Kekurangan
Ineficient Ineficient Tidak efisien dalam pilihan menu yang banyak Tidak efisien dalam pilihan menu yang banyak dalam 1 layar dan level menu yang banyak dalam 1 layar dan level menu yang banyak
Inflexible Inflexible Yang mengontrol adalah sistem, memaksa user Yang mengontrol adalah sistem, memaksa user untuk menelusuri seluruh pilihan menu. untuk menelusuri seluruh pilihan menu.
Impractical for numerous choices Impractical for numerous choices Impractical for numerous choices Impractical for numerous choices Tidak praktis untuk pilihan yang jumlahnya Tidak praktis untuk pilihan yang jumlahnya banyak banyak
Take up screen real estate Take up screen real estate Take up screen “real estate” Take up screen “real estate” Membutuhkan ukuran layar yang relatif lebih Membutuhkan ukuran layar yang relatif lebih besar (bandingkan dengan command language besar (bandingkan dengan command language). ).
1/16/2010 1/16/2010 11 11
Antarmuka Menu tepat untuk Antarmuka Menu tepat untuk d k it i (1) d k it i (1) user dengan kriteria : (1) user dengan kriteria : (1)
Low computer literacy Low computer literacy
Low computer literacy Low computer literacy 1/16/2010 1/16/2010 12 12
Frequent of use of other systems Frequent of use of other systems
Low application experience Low application experience
Low application experience Low application experience
z z
User Psychology User Psychology y gy y gy
Little system experience Little system experience
Low typing skill Low typing skill
z z Knowledge and Experince Knowledge and Experince
Low motivation Low motivation
Negative attitude Negative attitude
Low task experience Low task experience
Antarmuka Menu tepat untuk Antarmuka Menu tepat untuk user dengan kriteria : (2) user dengan kriteria : (2) d d k it i k it i (2) (2)
z z z z Job and Task Characteristic Job and Task Characteristic Job and Task Characteristic Job and Task Characteristic
Low frequency of use Low frequency of use
Little or no training Little or no training Little or no training Little or no training
Discretionary use Discretionary use
High turnover rate High turnover rate
Low task importance Low task importance
Low task structure Low task structure
1/16/2010 1/16/2010 13 13
Merancang Antarmuka Menu : Merancang Antarmuka Menu : Prinsip Prinsip--prinsip dan pedoman prinsip dan pedoman-- A Struktur Menu A Struktur Menu Prinsip Prinsip prinsip dan pedoman prinsip dan pedoman pedoman (1) pedoman (1)
A. Struktur Menu
A. Struktur Menu 1.
1. Sesuaikan struktur menu dengan struktur Sesuaikan struktur menu dengan struktur
tugas tugas 2.
2. Sediakan cara yang lebih cepat / singkat Sediakan cara yang lebih cepat / singkat
untuk struktur tugas ( untuk struktur tugas (shortcut
shortcut)
) 3.
3. Pada layar monitor, text Pada layar monitor, text--menu ditampilkan menu ditampilkan 3.
3. Pada layar monitor, text Pada layar monitor, text menu ditampilkan menu ditampilkan secara vertikal. secara vertikal.
4.
4. Gunakan pie Gunakan pie--menu untuk menu dengan menu untuk menu dengan
level hierarki 1 atau 2 dengan masing level hierarki 1 atau 2 dengan masing-- level hierarki 1 atau 2, dengan masing level hierarki 1 atau 2, dengan masing-- masing pilihan di tiap level tidak terlalu masing pilihan di tiap level tidak terlalu banyak. banyak.
1/16/2010 1/16/2010 14 14
Merancang Antarmuka Menu : Merancang Antarmuka Menu : Prinsip prinsip dan pedoman Prinsip--prinsip dan pedoman Prinsip Prinsip prinsip dan pedoman prinsip dan pedoman-- pedoman (2) pedoman (2) 5.
5 graying--out graying out out atau deletion untuk out atau deletion untuk
5
5.
Gunakan Gunakan graying Gunakan Gunakan graying atau deletion untuk atau deletion untuk item--item menu yang tidak aktif, item item menu yang tidak aktif, tergantung pada pengalaman user dan tergantung pada pengalaman user dan alat inputnya. alat inputnya. p p y y
6.
6. Susun secara logika, berbeda, dan Susun secara logika, berbeda, dan
eksklusif dari sisi semantic, dengan eksklusif dari sisi semantic, dengan makna yang jelas. makna yang jelas.
7.
7. Label untuk pilihan menu harus jelas, Label untuk pilihan menu harus jelas,
konsisten secara gramatikal dan konsisten secara gramatikal dan penempatan, serta sesuai dengan penempatan, serta sesuai dengan keterkaitan judul menunya. keterkaitan judul menunya. k t k it k t k it j d l j d l 8.
8. Gunakan deskriptor pilihan menu jika Gunakan deskriptor pilihan menu jika
label untuk pilihan menu tidak begitu label untuk pilihan menu tidak begitu 1/16/2010 1/16/2010 jelas dan ambigu. jelas dan ambigu. j l j l d d bi bi 15 15 Contoh Struktur Menu Contoh Struktur Menu Contoh Struktur Menu Contoh Struktur Menu Contoh 4 struktur menu Contoh 4 struktur menu ::
2 pilihan tiap layar, 6 level (kondisi 1) 2 pilihan tiap layar, 6 level (kondisi 1) 4 pilihan tiap layar, 3 level (kondisi 2) 4 pilihan tiap layar, 3 level (kondisi 2) 8 pilihan tiap layar, 2 level (kondisi 3) 8 ilih 8 pilihan tiap layar, 2 level (kondisi 3) 8 ilih ti ti l l 2 l 2 l l (k l (k di i 3) di i 3) 64 pilihan tiap layar, 1 level (kondisi 4) 64 pilihan tiap layar, 1 level (kondisi 4)
Kesimpulan dari 4 kondisi tersebut Kesimpulan dari 4 kondisi tersebut ::
Urutan error dari banyak ke sedikit : Urutan error dari banyak ke sedikit :
- kondisi 1 – kondisi 1 – kondisi 2 kondisi 2 – – kondisi 4 kondisi 4 – – kondisi 3 kondisi 3 Urutan respon time dari cepat ke lambat : Urutan respon time dari cepat ke lambat :
- 1/16/2010 1/16/2010
kondisi 3 – kondisi 3 – kondisi 4 kondisi 4 – – kondisi 2 kondisi 2 – – kondisi 1 kondisi 1 16 16
Contoh Struktur Menu & Struktur Contoh Struktur Menu & Struktur Tugas Tugas T T
1/16/2010 1/16/2010 17 17
Contoh Menu Breadth VS Depth (1) Contoh Menu Breadth VS Depth (1) Contoh Menu Breadth VS Depth (1) Contoh Menu Breadth VS Depth (1)
1/16/2010 1/16/2010 18 18
Contoh Menu Breadth VS Depth (2) Contoh Menu Breadth VS Depth (2) Contoh Menu Breadth VS Depth (2) Contoh Menu Breadth VS Depth (2)
1/16/2010 1/16/2010 19 19
Contoh Menu Vertical VS Menu Contoh Menu Vertical VS Menu Horizontal Horizontal H i H i t l t l
1/16/2010 1/16/2010 20 20
Contoh Menu Vertical VS Pie Menu Contoh Menu Vertical VS Pie Contoh Menu Vertical VS Pie--Menu Contoh Menu Vertical VS Pie Menu Menu
1/16/2010 1/16/2010 21 21
Contoh Grayed Out VS Deleted Contoh Grayed Out VS Deleted Inactive Menu Items Inactive Menu Items
I I ti ti M M It It
1/16/2010 1/16/2010 22 22
Bersifat logis, berbeda, dan eksklusif Bersifat logis, berbeda, dan eksklusif secara semantic dengan makna yang secara semantic dengan makna yang g g y y g g jelas jelas
1/16/2010 1/16/2010 23 23
Label pilihan menu yang jelas dan Label pilihan menu yang jelas dan konsisten konsisten
1/16/2010 1/16/2010 24 24
1/16/2010 1/16/2010 25 25
Merancang Antarmuka Menu : Merancang Antarmuka Menu : Prinsip prinsip dan pedoman Prinsip Prinsip--prinsip dan pedoman Prinsip prinsip dan pedoman prinsip dan pedoman-- pedoman (3) pedoman (3)
B. Urutan pilihan menu
B. Urutan pilihan menu
Urutan label pilihan menu bisa Urutan label pilihan menu bisa berdasarkan aturan konvensional, berdasarkan aturan konvensional, frekuensi penggunaan, urutan frekuensi penggunaan, urutan penggunaannya, kelompok kategori penggunaannya, kelompok kategori penggunaannya kelompok kategori penggunaannya kelompok kategori atau fungsional, urutan alphabet, atau fungsional, urutan alphabet, keinginan user dan tugas user. keinginan user dan tugas user.
1/16/2010 1/16/2010 26 26
Contoh Urutan Pilihan Menu Contoh Urutan Pilihan Menu Contoh Urutan Pilihan Menu Contoh Urutan Pilihan Menu
1/16/2010 1/16/2010 27 27
1/16/2010 1/16/2010 28 28
Merancang Antarmuka Menu : Merancang Antarmuka Menu : Prinsip Prinsip prinsip dan pedoman Prinsip--prinsip dan pedoman Prinsip prinsip dan pedoman prinsip dan pedoman-- pedoman (4) pedoman (4)
C. Pilihan Item Menu 1.
C. Pilihan Item Menu
1. Jika menggunakan keyboard, cursor--selection Jika menggunakan keyboard, cursor selection
tepat digunakan untuk menu yang sedikit / tepat digunakan untuk menu yang sedikit / singkat. Untuk menu yang banyak / panjang singkat. Untuk menu yang banyak / panjang singkat. Untuk menu yang banyak / panjang singkat. Untuk menu yang banyak / panjang atau menu yang sering digunakan, gunakan atau menu yang sering digunakan, gunakan lettered--selection. Pada antarmuka yang lettered selection. Pada antarmuka yang pointer driven gunakan mekanisme pilihan pointer driven gunakan mekanisme pilihan pointer driven gunakan mekanisme pilihan pointer driven gunakan mekanisme pilihan dengan pointer--cursor. dengan pointer cursor.
2.
2. Gunakan pilihan menu kondisi defaults Gunakan pilihan menu kondisi defaults 3.
3. Bedakan antara menu ‘ Bedakan antara menu ‘choose one B d k B d k t t ‘ h ‘ choose one’ dan h ’ d ’ dan ’ d
‘‘choose many choose many’ ’ 4.
4. feedback pilihan menu 1/16/2010 1/16/2010 Sediakan feedback Sediakan p p pilihan menu 29 29
Contoh Pilihan Menu Contoh Pilihan Menu Contoh Pilihan Menu Contoh Pilihan Menu Compatible letters Compatible letters
A.
1/16/2010 1/16/2010 30 30
E.
Compile Compile E.
D.
Assembler Assembler D.
C.
Debug Debug A bl A bl C.
B.
Buffer Buffer B.
Exit Exit I tibl l tt I tibl l tt Incompatible letters Incompatible letters A.
A bl A bl A.
E.
Debug Debug E.
D.
Compile Compile D b D b D.
C.
Buffer Buffer C.
B.
Assembler Assembler B.
A.
Exit Exit
Contoh Pilihan Menu Contoh Pilihan Menu Compatible Numbers Compatible Numbers
A bl A bl Contoh Pilihan Menu Contoh Pilihan Menu 1.
1. Assembler Assembler 2.
2. Buffer Buffer 3.
3. Compile Compile D b D b 4.
4. Debug Debug 5.
5. Exit Exit
I C tibl N b
I C tibl N b InCompatible Numbers InCompatible Numbers 1.
1. Buffer Buffer 2.
2. Debug Debug A bl A bl 3.
3. Assembler Assembler 4.
4. Compile Compile 5.
5. Exit Exit 1/16/2010 1/16/2010 31 31
Contoh Pilihan Menu Contoh Pilihan Menu
Kesimpulan : Kesimpulan : Contoh Pilihan Menu Contoh Pilihan Menu
Kesimpulan : Kesimpulan : Response time Response time
1
1 Compatible letters Compatible letters lebih baik lebih baik 1.
1. Compatible letters Compatible letters lebih baik lebih baik daripada compatible numbers daripada compatible numbers
2
2 Incompatible letters Incompatible letters lebih buruk lebih buruk 2.
2. Incompatible letters Incompatible letters lebih buruk lebih buruk daripada incompatible numbers daripada incompatible numbers
1/16/2010 1/16/2010 32 32
Contoh Keyboard Menu Choice Contoh Keyboard Menu Choice Selection Selection S l S l ti ti
1/16/2010 1/16/2010 33 33
Contoh Pilihan Menu Contoh Pilihan Menu Contoh Pilihan Menu Contoh Pilihan Menu
1/16/2010 1/16/2010 34 34
Contoh Menu ‘Choose One’ & Menu Contoh Menu ‘Choose One’ & Menu ‘Choose Many’ ‘Choose Many’ ‘Choose Many’ ‘Choose Many’
1/16/2010 1/16/2010 35 35
Merancang Antarmuka Merancang Antarmuka Menu : Prinsip Menu : Prinsip prinsip dan prinsip dan Menu : Prinsip Menu : Prinsip--prinsip dan prinsip dan pedoman pedoman--pedoman (5) pedoman (5)
D. Pemanggilan Menu
D. Pemanggilan Menu
Sediakan menu Sediakan menu pop pop--up up atau menu atau menu
Sediakan menu Sediakan menu pop pop up up atau menu atau menu user user--invoked invoked untuk user yang sering untuk user yang sering menggunakannya dan situasi dimana menggunakannya dan situasi dimana tampilan yang penuh ( tampilan yang penuh (permanent permanent menu menu) membuat user tidak nyaman. ) membuat user tidak nyaman.
1/16/2010 1/16/2010 36 36
Contoh Pemanggilan Menu Contoh Pemanggilan Menu Contoh Pemanggilan Menu Contoh Pemanggilan Menu
1/16/2010 1/16/2010 37 37
Merancang Antarmuka Menu : Merancang Antarmuka Menu : Prinsip Prinsip--prinsip dan pedoman prinsip dan pedoman-- E Navigasi Menu E Navigasi Menu Prinsip Prinsip prinsip dan pedoman prinsip dan pedoman pedoman (6) pedoman (6)
E. Navigasi Menu
E. Navigasi Menu 1.
1. Bangun kaidah Bangun kaidah--kaidah untuk perancangan kaidah untuk perancangan
menu dan terapkan secara konsisten di menu dan terapkan secara konsisten di seluruh tampilan menu seluruh tampilan menu seluruh tampilan menu. seluruh tampilan menu.
2.
2. Gunakan label sesuai intinya, peta menu, Gunakan label sesuai intinya, peta menu,
dan tempatkan alat bantu navigasi pada dan tempatkan alat bantu navigasi pada sistem menu yang komplek. sistem menu yang komplek.
3.
3. Gunakan akses langsung melalui Gunakan akses langsung melalui type type-- ahead ahead, nama , nama--nama tampilan menu dan nama tampilan menu dan ,, p p
macro untuk user, sebagai navigasi bagi macro untuk user, sebagai navigasi bagi user expert. user expert.
4
4 Facilitasi Facilitasi backward navigation backward navigation 1/16/2010 1/16/2010 38 38 4.
4. Facilitasi Facilitasi backward navigation backward navigation
Contoh Navigasi Menu Contoh Navigasi Menu Contoh Navigasi Menu Contoh Navigasi Menu
1/16/2010 1/16/2010 39 39
Contoh Menu ByPass Contoh Menu ByPass Contoh Menu ByPass Contoh Menu ByPass
1/16/2010 1/16/2010 40 40
GAYA DIALOG GAYA DIALOG
FILL FILL--IN FORM
IN FORM
Deskripsi Deskripsi Deskripsi Deskripsi
Antarmuka Fill Antarmuka F Antarmuka F Antarmuka Fill ill--in Form ill--in Form in Form sama in Form sama sama sama seperti tampilan fill--in form pada seperti tampilan fill in form pada kertas. kertas kertas. kertas
Pada Fill Pada Fill--in Form in Form biasanya biasanya terdapat : Label / Caption terdapat : Label / Caption terdapat : Label / Caption terdapat : Label / Caption
Field Field
1/16/2010 1/16/2010 2 2
Contoh Contoh Contoh Contoh Print Request Print Request q q
Document name : Document name : ------------------------------------------- ------------------------------------------- Pitch : Pitch : -- (1 = pica, 2 = elite) (1 = pica, 2 = elite) ( p , ) ( p , ) Print notes : Print notes : -- -- (y or n) (y or n) Number of copies : Number of copies : --- --- (000 (000 – – 999) 999) Paper size : Paper size : -- -- (1 = letter, 2 = legal) (1 = letter, 2 = legal) Paper size : Paper size : (1 letter, 2 legal) (1 letter, 2 legal) Print summary : Print summary : -- -- (y or n) (y or n) Font : Font : ------------------- ------------------- (press ?) (press ?) Print from page : Print from page : --- --- (000 (000 – – 999) 999) Print from page : Print from page : (000 (000 999) 999) Print to page : Print to page : --- --- (000 (000 – – 999) 999)
1/16/2010 1/16/2010 3 3
Kelebihan (1) Kelebihan (1) Kelebihan (1) Kelebihan (1)
Self explanatory Self explanatory p p y y
Sistem dengan Fill Sistem dengan Fill--in Form in Form mudah mudah dipelajari, karena Fill dipelajari, karena Fill--in Form in Form menjelaskan semantik menjelaskan menjelaskan semantik menjelaskan semantik ((what can semantik ((what can what can what can be done) dan be done ) dan sintak sintak ((how to do it how to do it) ) dari sistem secara jelas. dari sistem secara jelas.
Require little memory R Require little memory R i i littl littl
1/16/2010 1/16/2010 4 4
Kelebihan (2) Kelebihan (2) Kelebihan (2) Kelebihan (2)
Efficient use of screen real estate Efficient use of screen real estate
Dibandingkan dengan Sistem Menu Dibandingkan dengan Sistem Menu, , Fill F ill--in Form in Form lebih efisien dlm lebih efisien dlm penggunaan ruang di layar. penggunaan ruang di layar. di l di l (Menu dengan banyak level (Menu dengan banyak level membutuhkan lebih banyak) membutuhkan lebih banyak) membutuhkan lebih banyak) membutuhkan lebih banyak)
Accommodates parameter with Accommodates parameter with many possible input values many possible input values a y poss b e a y poss b e put a ues put a ues
Contoh field yang harus diinput : Contoh field yang harus diinput : 1/16/2010 1/16/2010 nama, alamat, nomor identitas, dll nama, alamat, nomor identitas, dll 5 5
Kelebihan (3) Kelebihan (3) Kelebihan (3) Kelebihan (3)
Provides context Provides context
P d M P d Pada Menu Pada Menu dan M dan Question & d d Q Q Question & ti ti & & Answer biasanya user tidak Answer biasanya user tidak mengetahui pertanyaan berikutnya mengetahui pertanyaan berikutnya mengetahui pertanyaan berikutnya mengetahui pertanyaan berikutnya next question). Tapi dengan Fill--in in
((next question ). Tapi dengan Fill Form, user dapat mengetahui apa Form , user dapat mengetahui apa yang harus diinputkan berikutnya yang harus diinputkan berikutnya h h dii dii tk tk b ik t b ik t sesuai dengan konteks. sesuai dengan konteks.
Enhancements are visible Enhancements are visible Enhancements are visible Enhancements are visible
Penambahan fungsi baru akan Penambahan fungsi baru akan 1/16/2010 1/16/2010 terlihat secara langsung di layar terlihat secara langsung di layar g g g g y y 6 6
Kekurangan Kekurangan Kekurangan Kekurangan
User harus mengetahui input yang valid User harus mengetahui input yang valid
Menuntut keahlian / ketrampilan Menuntut keahlian / ketrampilan mengetik dari user mengetik dari user
Kemungkinan kesalahan ketik, sangat Kemungkinan kesalahan ketik, sangat Kemungkinan kesalahan ketik sangat Kemungkinan kesalahan ketik sangat besar besar
Menuntut pengetahuan user tentang Menuntut pengetahuan user tentang tombol--tombol khusus untuk keperluan tombol b l b l tombol khusus untuk keperluan b l kh b l kh k k k k l l navigasi navigasi
Kurang fleksibel, karena sistem yang Kurang fleksibel karena sistem yang Kurang fleksibel, karena sistem yang Kurang fleksibel karena sistem yang mengontrol (bukan user yang mengontrol (bukan user yang mengontrol) mengontrol)
1/16/2010 1/16/2010 7 7
Fill Fill--in Form tepat untuk user in Form tepat untuk user dengan kriteria : (1) dengan kriteria : (1) dengan kriteria : (1) dengan kriteria : (1) User Psychology : User Psychology : y gy y gy
z z
1/16/2010 1/16/2010 8 8
Moderate to high computer literacy Moderate to high computer literacy
z z
Moderate to frequent use of other system Moderate to frequent use of other system
z z
Low to moderate application experince Low to moderate application experince
z z
Negative or neutral attitude Negative or neutral attitude
z z
Little to moderate system experience Little to moderate system experience Little to moderate system experience Little to moderate system experience
z z
Moderate to high typing skill Moderate to high typing skill
K l d d E i K l d d E i Knowledge and Experience : Knowledge and Experience : z z
Low to moderate motivation Low to moderate motivation
z z
Moderate to high task experience Moderate to high task experience
Fill Fill--in Form tepat untuk user in Form tepat untuk user d k it i (2) d k it i (2) Job and Task Characteristic : Job and Task Characteristic : dengan kriteria : (2) dengan kriteria : (2)
1/16/2010 1/16/2010 9 9
High task structure High task structure
High task importance High task importance
High task importance High task importance
Moderate task importance Moderate task importance
Moderate to high frequency of use Moderate to high frequency of use
O f f
Low to moderate turnover rate Low to moderate turnover rate O
Discretionary use Discretionary use
Little or no training Little or no training
Other system = paper forms Other system = paper forms
1/16/2010 1/16/2010 10 10
Perancangan Fill--in Form : Perancangan Fill in Form : Prinsip--prinsip dan Pedoman Prinsip prinsip dan Pedoman-- pedoman (1) pedoman (1) 1
a.
Rancang Rancang dan dan atur atur form form untuk untuk mendukung mendukung tugas tugas..
b. b b b.
Sesuaikan Sesuaikan form Sesuaikan form Sesuaikan form pada form pada pada layar pada layar layar dengan layar dengan dengan dengan form pada form pada kertas, kertas, sehingga sehingga mendukung mendukung tugas user tugas user..
c.
c.