Interaksi Manusia dan Komputer

(1)

(2)

(3)

(4)

(5)

Tujuan Materi I ni

Mengetahuai berbagai tipe dari model yang relevan

dengan proses desain IMK.

M h i b i

Memahami bagaimana:

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

(6)

(7)

(8)

I de Model Konseptual

( lanjutan)

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

(9)

I de Model Konseptual

( lanjutan)

Gambaran sistem harus didasarkan pada suatu model

desain yang ringkas dan jelas.

M d l d i h did k d k l

Model desain harus didasarkan pada keperluan

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

(10)

(11)

Model, Models & More Muddles

user’s model / mental model

design model / conceptual model system image

(12)

Mental Model

Para pemakai mengembangkan suatu teori/konsep dari

sebuah sistem melalui belajar dan menggunakannya.

P t h i did k i ik b i b h

Pengetahuan sering dideskripsikan sebagai sebuah

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

internal dari beberapa aspek menyangkut dunia eksternal yang memungkinkan prediksi yang akan dilakukan.

Model mental melibatkan proses sadar dan tidak sadar,

(13)

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

d i i l

mengacu pada representasi pengguna secara internal 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

komp ter Istilah ini sering dij mpai pada sistem adaptif komputer. Istilah ini sering dijumpai pada sistem adaptif atau user interface dan paket pembelajaran dengan

(14)

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

(15)

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 formalp

Pengamatan terhadap sistem:

(16)

(17)

(18)

Model Mental vs Desain Konseptual

Model mental:

Bagaimana pemakai melihat sistem melalui model mental

B i k i d lk d d l t l

Bagaimana pemakai mengandalkan pada model mental

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

(19)

Model Konseptual

Representasi / penyajian sistem yang akurat, lengkap

dan konsisten.

B d i t k i hli

Berpegang pada perancang sistem, para pemakai ahli

dan pelatih.

Harus didasari pada kebutuhan tugas para pemakai, p g p p ,

(20)

Model Konseptual

( lanjutan)

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

d i t

(21)

Model Konseptual

( lanjutan)

Jika proses ini sukses, maka pemakai akan

mengembangkan suatu user’s model yang sesuai

(22)

Model Konseptual

( lanjutan)

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)

i ( t )

mapping (pemetaan)

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

(23)

(24)

(25)

(26)

Sebuah Model Konseptual yang Baik: Gunting

Menyediakan:

lubang untuk sesuatu yang disisipkan

Batasan: Batasan:

lubang besar untuk beberapa jari,

lubang kecil untuk ibu jari P t

Pemetaan:

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:

b k fi ik i tk b i k b k j

(27)

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:

(28)

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,

(29)

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

(30)

(31)

(32)

System I mage

Segala sesuatu yang dilihat pemakai dari sistem atau

saling berinteraksi dengan:

t k k i (t k b t )

antarmuka pemakai (termasuk bantuan) dokumentasi

(33)

System I mage

( lanjutan)

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 la ar ang n ata

berinteraksi dengan tampilan layar yang nyata

(34)

Mempresentasikan System I mage

Penyajian eksplisit

Menyediakan suatu peta saat ini dan konsisten tentang

segalanya segalanya

Penyajian implisit

Menyediakan pedoman/isyarat tentang model sistemy p y g Semakin membuka/menguatkan model sistem

Contoh voice mail telepon:

B ik Y h th P 2 t h fi t

Baik: You have three new messages. Press 2 to hear your first new message.

(35)

(36)

Menyembunyikan Kompleksitas Sistem

( lanjutan)

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 perintahp

Banyak pemakai hanya memerlukan sebagian kecil subset

dari perintah tersebut

P k i d t b ik k l k it

Para pemakai dapat menyembunyikan kompleksitas

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

(37)

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’94g , Glasgow, pp 179-194., 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.

(38)

Gaya Dialog

(39)

Deskripsi

Menu merupakan sekumpulan

pilihan yang dapat dipilih user

sesuai dengan keinginannya.

g

y

Banyak variasi dari gaya dialog

(40)

Contoh 1

OFFICE AUTOMATION

Move cursor to selection :

__ Word processing

__ Electronic mail

__

__ Spreadsheet

__ Graphics

(41)

Contoh 2

WORD PROCESSING

1. Create

2. Edit

3. Print

4. File

Enter selection : __

(42)

Contoh 3

File

File EditEdit SearchSearch FormatFormat

Open

Open ÇÇ

(43)

Struktur Menu (1)

‘Hierarki’

contoh : contoh : Office Automation Office Automation Word

Word ElectronicElectronic SpreadsheetSpreadsheet GraphicsGraphics Processing

Processing mailmail

(44)

Struktur Menu (2)

‘Linear’

Linear

Contoh : Contoh : Contoh : Contoh :

Print Request

Print Request ÆÆ Page Size ? Page Size ? ÆÆ Printer ?

Printer ? ÆÆ Paper Feeder ? Paper Feeder ? ÆÆ Orientation ?

(45)

Struktur Menu (3)

‘Network’

Office Automation Office Automation

Word Electronic

Word Electronic Spreadsheet Spreadsheet GraphicsGraphics Processing mail

Processing mail Processing mail Processing mail

H l

H l P i tP i t Q itQ it Help

(46)

Kelebihan (1)

Self explanatorySelf explanatorypp yy

Sistem dengan

Sistem dengan MenuMenu mudah dipelajari, mudah dipelajari, karena

karena MenuMenu menjelaskan menjelaskan semantiksemantik (what (what

b d ) d

b d ) d i t ki t k (h(h t d it) d it d it) d i can be done) dan

can be done) dan sintaksintak (how to do it) dari (how to do it) dari sistem secara jelas.

sistem secara jelas.

Requires little human memoryRequires little human memoryRequires little human memoryRequires 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 keystrokesFew keystrokes

Sedikit menggunakan tombol

Sedikit menggunakan tombol--tombol pada tombol pada papan keyboard

(47)

Kelebihan (2)

Easy error handlingEasy error handlingyy gg

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 visibleEnhancements 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

(48)

Kekurangan

IneficientIneficient

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

InflexibleInflexible

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 choicesImpractical 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 estateTake up screen real estate

Membutuhkan ukuran layar yang relatif lebih Membutuhkan ukuran layar yang relatif lebih besar (bandingkan dengan

(49)

Antarmuka Menu tepat untuk

d

k it i

(1)

d

k it i

(1)

user dengan kriteria : (1)

z

z User PsychologyUser Psychologyyy gygy

Negative attitudeNegative attitude

Low motivationLow motivation

z

z Knowledge and ExperinceKnowledge and Experince

Low typing skillLow typing skill

Little system experienceLittle system experience

Low task experienceLow task experience

Low application experienceLow application experience

Frequent of use of other systemsFrequent of use of other systems

Low computer literacyLow computer literacy

(50)

Antarmuka Menu tepat untuk

d

k it i

(2)

d

k it i

(2)

z

z Job and Task CharacteristicJob and Task Characteristic

user dengan kriteria : (2)

z

z Job and Task CharacteristicJob and Task Characteristic

Low frequency of useLow frequency of use

Little or no trainingLittle or no training

Discretionary useDiscretionary use

High turnover rateHigh turnover rate

Low task importanceLow task importance

(51)

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)

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 (shortcutshortcut) )

3.

3. Pada layar monitor, textPada layar monitor, text--menu ditampilkanmenu ditampilkan 3.

3. Pada layar monitor, textPada layar monitor, text menu ditampilkan menu ditampilkan

secara vertikal. secara vertikal.

4.

4. Gunakan pieGunakan 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.

(52)

Merancang Antarmuka Menu :

Prinsip

prinsip dan

pedoman--5

5 GunakanGunakan grayinggraying--outout atau deletion untukatau deletion untuk

Prinsip

prinsip dan pedoman

pedoman (2)

5.

5. Gunakan Gunakan grayinggraying out out atau deletion untuk atau deletion untuk

item

item--item menu yang tidak aktif, item menu yang tidak aktif,

tergantung pada pengalaman user dan tergantung pada pengalaman user dan alat inputnya.

alat inputnya.pp yy

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 k t k it j d l

k t k it j d l

keterkaitan judul menunya. keterkaitan judul menunya.

8.

8. Gunakan deskriptor pilihan menu jika Gunakan deskriptor pilihan menu jika

label untuk pilihan menu tidak begitu label untuk pilihan menu tidak begitu

j l d bi

(53)

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 ilih ti l 2 l l (k di i 3)

8 pilihan tiap layar, 2 level (kondisi 3) 8 pilihan tiap layar, 2 level (kondisi 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 3kondisi 3

-- Urutan respon time dari cepat ke lambat : Urutan respon time dari cepat ke lambat :

kondisi 3

(54)

Contoh Struktur Menu & Struktur

T

(55)

(56)

(57)

Contoh Menu Vertical VS Menu

H i

t l

H i

t l

(58)

Contoh Menu Vertical VS Pie

Contoh Menu Vertical VS Pie--Menu

Menu

Contoh Menu Vertical VS Pie

(59)

Contoh Grayed Out VS Deleted

I

ti

M

It

I

ti

M

It

(60)

Bersifat logis, berbeda, dan eksklusif

secara semantic dengan makna yang

g

y

g

jelas

(61)

Label pilihan menu yang jelas dan

konsisten

(62)

(63)

Merancang Antarmuka Menu :

Prinsip

prinsip dan

pedoman--Prinsip

prinsip dan pedoman

pedoman (3)

B. Urutan pilihan menu

Urutan label pilihan menu bisa

berdasarkan aturan konvensional,

frekuensi penggunaan, urutan

(64)

(65)

(66)

Prinsip

prinsip dan

pedoman--C. Pilihan Item Menu C. Pilihan Item Menu

Prinsip

prinsip dan pedoman

pedoman (4)

1.

1. Jika menggunakan keyboard, cursorJika menggunakan keyboard, cursor--selection 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

lettered--selection. Pada antarmuka yang 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

dengan pointer--cursor. cursor.

2.

2. Gunakan pilihan menu kondisi Gunakan pilihan menu kondisi defaultsdefaults

B d k t ‘

B d k t ‘ hh ’ d’ d

3.

3. Bedakan antara menu ‘Bedakan antara menu ‘choose onechoose one’ dan ’ dan

‘‘choose manychoose many’ ’

4.

(67)

Contoh Pilihan Menu

Compatible letters

A

bl

A

bl

A.

Assembler

B.

Buffer

C.

Compile

D b

D.

Debug

E.

Exit

I

tibl l tt

I

tibl l tt

Incompatible letters

A.

Buffer

B.

Debug

A

bl

A

bl

C.

Assembler

D.

Compile

E.

(68)

Contoh Pilihan Menu

Compatible Numbers

A

bl

A

bl

Contoh Pilihan Menu

1.

Assembler

2.

Buffer

3.

Compile

D b

4.

Debug

5.

Exit

I C

tibl N

b

I C

tibl N

b

InCompatible Numbers

1.

Buffer

2.

Debug

A

bl

A

bl

3.

Assembler

4.

Compile

5.

(69)

Contoh Pilihan Menu

Kesimpulan :

Contoh Pilihan Menu

Kesimpulan :

Response time

1

Compatible letters

lebih baik

1.

Compatible letters

lebih baik

daripada compatible numbers

2

lebih buruk

2.

Incompatible letters

lebih buruk

(70)

Contoh Keyboard Menu Choice

S l

ti

(71)

(72)

Contoh Menu ‘Choose One’ & Menu

‘Choose Many’

(73)

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

Sediakan menu

pop

pop--up

up

atau menu

Sediakan menu

pop

pop up

up

atau menu

user

user--invoked

invoked

untuk user yang sering

menggunakannya dan situasi dimana

tampilan yang penuh (

permanent

menu

(74)

(75)

Merancang Antarmuka Menu :

Prinsip

prinsip dan

pedoman--E Navigasi Menu E Navigasi Menu

Prinsip

prinsip dan pedoman

pedoman (6)

E. Navigasi Menu E. Navigasi Menu

1.

1. Bangun kaidahBangun 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 pp macro untuk user, sebagai navigasi bagi macro untuk user, sebagai navigasi bagi user expert.

user expert.

4

4 FacilitasiFacilitasi backward navigationbackward navigation 4.

(76)

(77)

(78)

GAYA DIALOG

FILL

(79)

Deskripsi

Antarmuka F

ill

ill--in Form

in Form

sama

Antarmuka F

ill

ill--in Form

in Form

sama

seperti tampilan fill

seperti tampilan fill--in form pada

in form pada

kertas

kertas.

Pada

Fill

Fill--in Form

in Form

biasanya

terdapat : Label / Caption

(80)

Contoh

Print Request

Print Requestqq

Document name :

Document name : --- ---Pitch :

Pitch : -- (1 = pica, 2 = elite)(1 = pica, 2 = elite)(( pp ,, )) 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 :

(81)

Kelebihan (1)

Self explanatory

p

y

Sistem dengan

Fill

Fill--in Form

in Form

mudah

dipelajari, karena

Fill

Fill--in Form

in Form

menjelaskan

menjelaskan semantik

semantik ((

what can

menjelaskan

menjelaskan semantik

semantik ((

what can

be done

) dan

) dan sintak

sintak ((

how to do it

)

dari sistem secara jelas.

R

i

littl

R

i

littl

Require little memory

(82)

Kelebihan (2)

Efficient use of screen real estate

Dibandingkan dengan Sistem

Menu

,

F

ill

ill--in Form

in Form

lebih efisien dlm

di l

penggunaan ruang di layar.

(Menu dengan banyak level

membutuhkan lebih banyak)

Accommodates parameter with

many possible input values

a y poss b e

put a ues

(83)

Kelebihan (3)

Provides context

P d

M

d

Q

ti

&

Pada

Menu

dan

Question &

Answer

biasanya user tidak

mengetahui pertanyaan berikutnya

((

next question

). Tapi dengan

Fill

Fill--in

in

Form

, user dapat mengetahui apa

h

dii

tk

b ik t

h

dii

tk

b ik t

yang harus diinputkan berikutnya

sesuai dengan konteks.

Enhancements are visible

(84)

Kekurangan

User harus mengetahui input yang valid

Menuntut keahlian / ketrampilan

mengetik dari user

Kemungkinan kesalahan ketik sangat

Kemungkinan kesalahan ketik, sangat

besar

Menuntut pengetahuan user tentang

b l

b l kh

k k

l

tombol

tombol--tombol khusus untuk keperluan

tombol khusus untuk keperluan

navigasi

Kurang fleksibel karena sistem yang

Kurang fleksibel, karena sistem yang

mengontrol (bukan user yang

mengontrol)

(85)

Fill

Fill--in Form tepat untuk user

in Form tepat untuk user

dengan kriteria : (1)

User Psychology : User Psychology :yy gygy

z

z Negative or neutral attitudeNegative or neutral attitude z

z Low to moderate motivationLow to moderate motivation

K l d d E i

Knowledge and Experience : Knowledge and Experience :

z

z Moderate to high typing skillModerate to high typing skill z

z Little to moderate system experienceLittle to moderate system experienceLittle to moderate system experienceLittle to moderate system experience z

z Moderate to high task experienceModerate to high task experience z

z Low to moderate application experinceLow to moderate application experince z

z Moderate to frequent use of other systemModerate to frequent use of other system z

(86)

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)

Moderate to high frequency of useModerate to high frequency of use

Little or no trainingLittle or no training

Discretionary useDiscretionary use

Low to moderate turnover rateLow to moderate turnover rate

O f

Other system = paper formsOther system = paper forms

Moderate task importanceModerate task importance

High task importanceHigh task importance

(87)

(88)

Perancangan Fill

Perancangan Fill--in Form :

in Form :

Prinsip

Prinsip--prinsip dan Pedoman

prinsip dan

Pedoman--pedoman (1)

pedoman (1)

1.

Pengaturan dan Lay

Pengaturan dan Lay--out Fill

out Fill--in Form

in Form

a.

Rancang

dan

atur

form

untuk

mendukung

mendukung tugas

tugas..

b

Sesuaikan

Sesuaikan form

form pada

pada layar

layar dengan

dengan

b.

Sesuaikan

Sesuaikan form

form pada

pada layar

layar dengan

dengan

form

form pada

pada kertas,

kertas, sehingga

sehingga mendukung

mendukung

tugas

tugas user

user..

O

i

ik

O

i

ik

d l

k l

k

k ii

c.

Organisasikan

Organisasikan dalam

dalam kelompok,

kelompok, item

item--item

item

yang

berhubungan

secara

semantik,

,,

urutan

penggunaan,

p

gg

,

frekuensi

frekuensi penggunaan,

penggunaan, atau

atau hal

hal penting

penting

lainnya

lainnya..

d

Jumlah

item

item item

item

dalam

setiap

d.

(89)

Perancangan Fill

in Form :

Prinsip

prinsip dan

Pedoman--e

e

Gunakan

Gunakan ruang

ruang kosong

kosong pada

pada tampilan

tampilan

Prinsip

Prinsip prinsip dan Pedoman

prinsip dan Pedoman

pedoman (2)

e.

Gunakan

Gunakan ruang

ruang kosong

kosong pada

pada tampilan,

tampilan,

agar

agar seimbang

seimbang dan

dan simetri

simetri..

f.

Pisahkan

Pisahkan kelompok

kelompok--kelompok

p

kelompok secara

p

secara

logika

logika dgn

dgn spasi,

spasi, garis,

garis, warna

warna atau

atau

bentuk

bentuk lainnya

lainnya..

g.

Hubungan

Hubungan dan

dan ketergantungan

ketergantungan antar

antar

item

item harus

harus berada

berada dalam

dalam 1

1 screen

screen

(jangan

(jangan antar

antar screen

screen yang

yang membuat

membuat

(jangan

(jangan antar

antar screen,

screen, yang

yang membuat

membuat

user

user harus

harus mengingat

mengingat informasi

informasi dari

dari 1

1

screen

(90)

(91)

(92)

(93)

(94)

Perancangan Fill

in Form :

Prinsip

prinsip dan

Pedoman--2.

2.

Desain Judul dan Field Fill

Desain Judul dan Field Fill--in Form

in Form

Prinsip

prinsip dan Pedoman

pedoman (3)

a.

Desain Caption & Field Fill

Desain Caption & Field Fill--in Form

in Form

b.

Atur letak (posisi) Caption dan

Fi ld b d

k

t

d

Fi ld b d

k

t

d

Field berdasarkan user, tugas, dan

tipe data, secara berurutan

c

Bedakan penulisan Caption dan

c.

Bedakan penulisan Caption dan

Field

d.

Berikan nama grup atau judul dari

k l

k it

k l

k it

it

kelompok item

(95)

Perancangan Fill

in Form :

Prinsip

prinsip dan

Pedoman--Prinsip

prinsip dan Pedoman

pedoman (4)

e.

Caption harus deskriptif, singkat,

dan familiar

I f

ik

j

l h /

j

I f

ik

j

l h /

j

f.

Informasikan jumlah / panjang

karakter untuk field yang diinputkan

g

Informasikan jika field bersifat

g.

Informasikan jika field bersifat

(96)

(97)

Perancangan Fill

in Form :

Prinsip

prinsip dan

Pedoman--3.

3. Format Input FillFormat Input Fill--in Formin Form

Prinsip

prinsip dan Pedoman

pedoman (5)

3.

3. Format Input FillFormat Input Fill in Form in Form

a.

a. Pertimbangkan sistem yang mampu Pertimbangkan sistem yang mampu

melengkapi masukan user melengkapi masukan user Contoh : input

Contoh : input ÆÆ ‘Jun’ dilengkapi‘Jun’ dilengkapi Contoh : input

Contoh : input ÆÆ Jun , dilengkapi Jun , dilengkapi

sistem dengan ‘June’ pada saat user sistem dengan ‘June’ pada saat user memindahkan kursor ke field berikutnya memindahkan kursor ke field berikutnya

b

b Pertimbangkan tersedianya popPertimbangkan tersedianya pop--upup b.

b. Pertimbangkan tersedianya popPertimbangkan tersedianya pop up up

menu atau pull down menu untuk field menu atau pull down menu untuk field yang memiliki banyak pilihan input. yang memiliki banyak pilihan input.

c.

c. Hindari aturan yang komplek untukHindari aturan yang komplek untuk c.

c. Hindari aturan yang komplek untuk Hindari aturan yang komplek untuk

(98)

Perancangan Fill

in Form :

Prinsip

prinsip dan

Pedoman--d.

d.

Sediakan pengelompokkan yang

Prinsip

prinsip dan Pedoman

pedoman (6)

berarti untuk menghemat panjang field

yang diinputkan.

Contoh :

386 6547 231 lebih mudah

daripada 3866547231

EMP

EMP SAL

SAL 235 lebih mudah

235 lebih mudah

EMP

EMP--SAL

SAL--235 lebih mudah

235 lebih mudah

daripada EMPSAL235

(lihat gambar 5)

e.

(99)

(100)

(101)

Perancangan Fill

in Form :

Prinsip

prinsip dan

Pedoman--4.

4. Designing Input Data :Designing Input Data :

Prinsip

prinsip dan Pedoman

pedoman (7)

a.

a. Berikan cara yang mudah untuk input Berikan cara yang mudah untuk input

data yang frekuensinya sering. data yang frekuensinya sering. Contoh :

Contoh :

‘y’ dengan ‘Y’ (‘y’ lebih mudah) ‘y’ dengan ‘Y’ (‘y’ lebih mudah)

b.

b. Jangan memberikan batasan Jangan memberikan batasan

pengukuran, sehingga user harus pengukuran, sehingga user harus pengukuran, sehingga user harus pengukuran, sehingga user harus mentranformasikan atau menghitung mentranformasikan atau menghitung ke ukuran yang diinginkan

ke ukuran yang diinginkan Contoh :

Contoh :

(102)

Perancangan Fill

in Form :

Prinsip

prinsip dan

Pedoman--Rancang data yang diinput Rancang data yang diinput

Prinsip

prinsip dan Pedoman

pedoman (8)

c.

c. Rancang data yang diinput Rancang data yang diinput

menggunakan kata yang lebih bermakna menggunakan kata yang lebih bermakna

d.

d. Sistem seharusnya ‘case blind’ terhadap Sistem seharusnya ‘case blind’ terhadap yy pp

masukan user masukan user Contoh : Contoh : YES Y YES Y

YES atau Yes atau yes YES atau Yes atau yes

e.

e. Usahakan field yang diinputkan pendek.Usahakan field yang diinputkan pendek.

ff Hindari pergantian terlalu sering antaraHindari pergantian terlalu sering antara f.

f. Hindari pergantian terlalu sering antara Hindari pergantian terlalu sering antara

(103)

(104)

Perancangan Fill

in Form :

Prinsip

prinsip dan

Pedoman--5

5 Prompts dan Instruksi FillPrompts dan Instruksi Fill--in Formin Form

Prinsip

prinsip dan Pedoman

pedoman (9)

5.

5. Prompts dan Instruksi FillPrompts dan Instruksi Fill--in Formin Form

a.

a. Prompt seharusnya jelas dan tidak Prompt seharusnya jelas dan tidak

mengandung ambigu. (lihat gambar 6) mengandung ambigu. (lihat gambar 6)

b

b Letakkan prompt di sebelah kanan fieldLetakkan prompt di sebelah kanan field b.

b. Letakkan prompt di sebelah kanan field Letakkan prompt di sebelah kanan field

atau pada Microhelp di bawah layar. (Lihat atau pada Microhelp di bawah layar. (Lihat gambar 7)

gambar 7)

Sediakan instruksi untuk navigasi atau Sediakan instruksi untuk navigasi atau

c.

c. Sediakan instruksi untuk navigasi atau Sediakan instruksi untuk navigasi atau

menggunakan help menggunakan help

d.

d. Posisikan instruksi di lokasi yang konstant Posisikan instruksi di lokasi yang konstant

dan buat terlihat berbeda (lihat gambar 6) dan buat terlihat berbeda (lihat gambar 6) dan buat terlihat berbeda (lihat gambar 6) dan buat terlihat berbeda (lihat gambar 6)

e.

e. Gunakan terminologi dan gramatikal yang Gunakan terminologi dan gramatikal yang

[image:104.792.37.209.34.587.2]

(105)

(106)

(107)

Perancangan Fill

in Form :

Prinsip

prinsip dan

Pedoman--N i i Fill

N i i Fill i Fi F

Prinsip

prinsip dan Pedoman

pedoman (10)

6.

6. Navigasi FillNavigasi Fill--in Form in Form

a.

a. Saat form dimasuki pertama kali, Saat form dimasuki pertama kali,

tempatkan kursor di posisi default tempatkan kursor di posisi default tempatkan kursor di posisi default tempatkan kursor di posisi default

b.

b. Ijinkan pergerakan maju atau mundur Ijinkan pergerakan maju atau mundur

c.

c. Tempatkan kursor di daerah yang Tempatkan kursor di daerah yang yy gg

memang dapat diedit oleh user memang dapat diedit oleh user

d.

d. Jangan menggunakan auto tab kecuali Jangan menggunakan auto tab kecuali

field memiliki panjang yang pasti dan field memiliki panjang yang pasti dan field memiliki panjang yang pasti, dan field memiliki panjang yang pasti, dan usernya berpengalaman serta sering usernya berpengalaman serta sering menggunakan sistem tersebut

(108)

(109)

Perancangan Fill

in Form :

Prinsip

prinsip dan

Pedoman--7.

7. Penanganan Error FillPenanganan Error Fill--in Formin Form

Prinsip

prinsip dan Pedoman

pedoman (11)

g

z

z Ijinkan user untuk dapat mengedit Ijinkan user untuk dapat mengedit

karakter pada field karakter pada field

z

z Posisikan kursor di lokasi field yang Posisikan kursor di lokasi field yang

salah (setelah dilakukan deteksi salah (setelah dilakukan deteksi

kesalahan). Gunakan highlight pada kesalahan). Gunakan highlight pada kesalahan). Gunakan highlight pada kesalahan). Gunakan highlight pada lokasi error jika mungkin.

lokasi error jika mungkin.

z

z Sediakan informasi semantik dan Sediakan informasi semantik dan

i t k d t t

sintak pada pesan error, tergantung sintak pada pesan error, tergantung dari pengetahuan user

(110)

(111)

Dialog Style:

(112)

Pangantar

Command language merupakan interaksi manusia dan

komputer yang tradisional dan orisinil.

P d t k j i i i h t d i t k i

Pada antarmuka jenis ini, hanya prompt dan instruksi

yang disediakan oleh sistem.

User harus mengingat nama serta sintaks untuk perintah g g p

(command) karena yang tampil hanya prompt yang ‘ready’.

CL di k d b b i t k t l d

CL digunakan pada beberapa sistem komputer awal dan

(113)

(114)

(115)

(116)

Keuntungan Command Language

Powerfull

Command yang simpel dapat lebih handal, dimana pada

menus dan fill in form mungkin membutuhkan 20 30 menus dan fill-in form mungkin membutuhkan 20-30 screen.

Kehandalan dan efisiensi dihasilkan oleh language yang

menyediakan kemampuan untuk membangun prosedur kompleks, menyimpannya sebagai file, script, atau macro, dan kemudian dapat dieksekusi dengan nama yang simpel.

Flexible, User Controlled

User dapat melakukan apa saja sesuai dengan

(117)

Keuntungan Command Language

( lanjutan) Fast, Efficient

Meskipun pada command language membutuhkan

pengetikan lebih sering dibanding beberapa dialog lain pengetikan lebih sering dibanding beberapa dialog lain, namun ternyata bisa lebih cepat dan efisien.

Command yang komplek lebih cepat daripada melalui

banyak screen scanning untuk pilihan menu atau navigasi, dan pengisian field.

Uses Minimal Screen ‘Real Estate’

Interface ini hanya membutuhkan satu baris dari layar

(118)

Kerugian Command Language

Difficult to Learn

Interface command language lebih kepada proses ‘recall

memory’ sehingga sukar untuk dipelajari Akibatnya faktor memory , sehingga sukar untuk dipelajari. Akibatnya faktor mudah digunakan (ease of use) tidak dapat tercapai

karena tidak mudah dipelajari.

Difficult to Remember Assumes Typing Skill

Error Prone

Enhancement are Visible

User tidak mengetahui kapan perubahan telah dibuat pada Use t da e geta u apa pe uba a te a d buat pada

(119)

Pengembangan Command Language

(120)

Penggunaan I nterface Command Language

Interface question and answer cocok untuk user dengan

User Psychology:

Positive attitude

High motivation

Knowledge and Experience:

Moderate to high typing skill

High system experience High task experience

High application experience Infrequent use of other systems Infrequent use of other systems High computer literacy

Job and Task Characteristic:

High frequency of use High frequency of use

Formal training

Mandatory use Low turnover rateLow turnover rate

(121)

Prinsip Desain Dialog Command Language

Command Language Semantic

Command Language Syntax

Command Language Lexicon

(122)

Command Language Semantic

Seimbangkan kehandalan dan kesederhanaan

(kesempurnaan dan minimalitas) berdasarkan kebutuhan user

kebutuhan user.

Kesempurnaan: handal dan mudah digunakan, tetapi

kompleks. Biasanya untuk sistem yang frekuensi penggunaannya tinggi.

Minimalitas: kesederhanaan dan mudah dipelajari, tetapi

(123)

Command Language Sematic

( lanjutan) Contoh KESEMPURNAAN

delete insert insert replace copy move rename select

Contoh MINIMALITAS

(124)

Command Language Syntax

Gunakan sintaks yang konsisten Gunakan sintaks action-object

Contoh BAIK

Get the file Send the file Print the file

Contoh KURANG BAIK The file get

(125)

Command Language Syntax

( lanjutan)

Hindari penggunaan simbol atau tanda yang

berubah-ubah.

Contoh: penggunaan tanda asterik (*) dan dollar ($) secara

bergantian

Hindari positional grammar Contoh: Copy / FileA / FileB

Sintaks command language sebaiknya natural dan

memudahkan untuk mengingatnya memudahkan untuk mengingatnya.

Hindari penggunaan yang terlalu sering terhadap shift

(126)

Command Language Lexicon

(127)

Command Language Lexicon

( lanjutan) Gunakan jargon user, bukan jargon komputer. Ijinkan penggunaan command names yang tidak

di i k t ki i k t d j

disingkat, meskipun singkatan command names juga diperbolehkan.

Gunakan aturan yang simple dan konsisten untuk y g p

(128)

Command Language I nteraction

Posisikan command line di baris terbawah dari screen

atau window.

S di k d k i t ktif l l i d f lt

Sediakan pendukung yang interaktif melalui default,

command editing, Intelligent interpretation, type-ahead, dan feedback.

Sediakan bantuan memori seperti referensi on-line.

Sediakan function keys untuk commands yang frekuensi

(129)

(130)

Pengantar

Function Keys merupakan gaya dialog yang

(131)

(132)

Keuntungan Function Keys

Self Explanatory

Requires Little Human Memory Easy to Use

Flexible

Requires Little or No Screen “Real Estate”

(133)

Kerugian Function Keys

Limited Number of Keys Available

(134)

Penggunaan I nterface Function Keys

Interface dengan dialog style function keys cocok untuk user dengan

User Psychology

Negative to positive attitude Low to high motivation

Low to high motivation

Knowledge and Experience

Low typing skill

Low to high system experienceg y p Moderate to high task experience Moderate application experience

Low to high frequency of use of other systems Moderate to high computer literacy

Moderate to high computer literacy

Job and Task Characteristic

Low to high frequency of use Little or no trainingg

Discretionary use

Low to high turnover rate Low to high task importance

(135)

(136)

Prinsip Desain Dialog Function Keys

Sediakan function keys untuk mendukung fungsionalitas

yang penting maupun aktivitas yang sering digunakan.

K l kk f ti k b d k ti

Kelompokkan function keys berdasarkan semantic

relationship untuk memudahkan penggunaan.

Pengelompokan berdasarkan urutan kerja lebih g p j

diutamakan daripada semantic relationship untuk penggunaan dengan frekuensi yang tinggi.

T tk f ti k i di k d l

Tempatkan function keys yang sering digunakan dalam

grup atau posisi yang mudah diakses.

Minimalisis penggunaan function keys dengan kombinasiMinimalisis penggunaan function keys dengan kombinasi

(137)

Prinsip Desain Dialog Function Keys

( lanjutan) Function keys harus konsisten selama penggunaan

lintas screen, subsystems maupun dalam sistem atau produk yang berhubungan

produk yang berhubungan.

Berikan feedback ketika function keys ditekan.

Berikan indikator yang menyatakan mode on/off dari y g y

(138)

Dialog Style:

(139)

Pengantar

Antarmuka Question and Answer menggabungkan

beberapa fitur dari Menus dan Fill-in Form.

S ti M k dib i b h t

Seperti Menus, karena user diberi sebuah pertanyaan

pada satu saat.

Seperti Fill-in Form, karena user harus mengetikkan p , g

(140)

(141)

(142)

(143)

Keuntungan Q&A

Self Explanatory

Dengan pertanyaan dan prompt yang jelas, question and

answer dapat menjelaskan dirinya sendiri ke user: apa answer dapat menjelaskan dirinya sendiri ke user: apa yang dapat dilakukan dan bagaimana melakukannya (seperti pada menus dan fill-in form).

Require Little Human Memory Require Little Human Memory

Karena mudah dipelajari, seperti menus dan fill-in form. Simple and Non-Intimidating

Dib di k d fill i f k l k d

Dibandingkan dengan fill-in form yang komplek dan

command language, question and answer lebih sederhana, mudah dipahami mudah digunakan.

Fill i f ki lf l t t i jik di l

Fill-in form meskipun self explanatory, tapi jika dialognya

(144)

Keuntungan Q&A

( lanjutan)

Accomodates Parameters with Many Possible Input

Values

Sama seperti pada fill in form

Sama seperti pada fill-in form.

Accomodates Tasks with a Hierarchical Structure

Pada contoh sederhana yang pertama di atas, jika user Pada contoh sederhana yang pertama di atas, jika user

memasukkan jawaban married, maka harus

mempersiapkan jawaban untuk status dan spouse (pasangannya)

(pasangannya).

Enhancement are Visible

(145)

Kerugian Q&A

Assumes Typing Skill

Karena untuk menjawab suatu pertanyaan, user harus

mengetik mengetik.

Error Prone

Banyak mengetik, maka semakin mungkin terjadinya y g , g j y

kesalahan ketik.

Inefficient

K l i t k l k ti d d t

Kalau sistem kompleks, question and answer dapat

membosankan.

Inflexible

(146)

Penggunaan I nterface Q&A

Interface question and answer cocok untuk user dengan

User Psychology:

Negative attitude

Low motivation

Knowledge and Experience:

Moderate to high typing skill

Little to moderate system experience Low task experience

Low application experience

Moderate to frequent use of other system Moderate to frequent use of other system Low computer literacy

Job and Task Characteristic:

Low frequency of use Low frequency of use