Scribd
Unggah
390 tayangan40 halaman

06 Gaya Dialog Menu

Dokumen tersebut membahas tentang desain antarmuka pengguna berbasis menu. Secara umum dibahas mengenai definisi menu, contoh struktur menu, kelebihan dan kekurangan menu, kriteria user yang sesuai dengan antarmuka menu, serta prinsip-prinsip perancangan antarmuka menu seperti struktur, urutan pilihan, pilihan item, pemanggilan, dan navigasi menu.

Diunggah oleh

smartza77
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
390 tayangan40 halaman

06 Gaya Dialog Menu

Dokumen tersebut membahas tentang desain antarmuka pengguna berbasis menu. Secara umum dibahas mengenai definisi menu, contoh struktur menu, kelebihan dan kekurangan menu, kriteria user yang sesuai dengan antarmuka menu, serta prinsip-prinsip perancangan antarmuka menu seperti struktur, urutan pilihan, pilihan item, pemanggilan, dan navigasi menu.

Diunggah oleh

smartza77
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 40

Gaya Dialog

MENU

Deskripsi

1/16/2010

Menu merupakan sekumpulan


pilihan yang dapat dipilih user
sesuai dengan
g keinginannya.
g
y
Banyak variasi dari gaya dialog
Menus, diantaranya :

Contoh 1
OFFICE AUTOMATION
Move cursor to selection :
__ Word processing
__ Electronic mail
__ Spreadsheet
__ Graphics
Press RETURN to accept
1/16/2010

Contoh 2
WORD PROCESSING
1. Create
2. Edit
3. Print
4. File
Enter selection : __
Press RETURN to accept
1/16/2010

Contoh 3
File
Edit
Open
Save
Print

1/16/2010

Search

Format

Struktur Menu (1)


Hierarki
contoh :
Office Automation

Word
Electronic
Processing mail

Spreadsheet

Graphics

Create
Edit
Print
File
1/16/2010

Struktur Menu (2)


Linear
Linear
Contoh :
Print Request Page Size ?
Printer ? Paper Feeder ?
Orientation ? Draft Quality ?

1/16/2010

Struktur Menu (3)


Network
Office Automation
Word
Electronic
Processing
mail

H l
Help

1/16/2010

Spreadsheet

Print
Pi t

Graphics

Q it
Quit

Kelebihan (1)

1/16/2010

Self explanatory
p
y
Sistem dengan Menu mudah dipelajari,
karena Menu menjelaskan semantik (what
can be
b d
done)) d
dan sintak
i t k (how
(h
t do
to
d it) d
darii
sistem secara jelas.
Requires little human memory
Mudah diingat, karena yang perlu diingat
hanyalah pilihan menu yang tampil dilayar.
Few keystrokes
Sedikit menggunakan tomboltombol-tombol pada
papan keyboard
9

Kelebihan (2)

1/16/2010

Easy
y error handling
g
Karena sedikit input yang digunakan, lebih
mudah dalam pembuatan error handlinghandlingnya
Enhancements are visible
Penambahan fungsi baru atau perubahan
pada menu akan terlihat secara langsung
di layar

10

Kekurangan

1/16/2010

Ineficient
Tidak efisien dalam pilihan menu yang banyak
dalam 1 layar dan level menu yang banyak
Inflexible
Yang mengontrol adalah sistem, memaksa user
untuk menelusuri seluruh pilihan menu.
Impractical for numerous choices
Tidak praktis untuk pilihan yang jumlahnya
banyak
Take up screen real
real estate
estate
Membutuhkan ukuran layar yang relatif lebih
besar (bandingkan dengan command language).
language).
11

Antarmuka Menu tepat untuk


user dengan
d
kriteria
k it i : (1)
User Psychology
y
gy
Negative attitude
Low motivation
z Knowledge and Experince
Low typing skill
Little system experience
Low task experience
Low application experience
Frequent of use of other systems
Low computer literacy
z

1/16/2010

12

Antarmuka Menu tepat untuk


user dengan
d
kriteria
k it i : (2)
Job and Task Characteristic
Low frequency of use
Little or no training
Discretionary use
High turnover rate
Low task importance
Low task structure
z

1/16/2010

13

Merancang Antarmuka Menu :


Prinsip--prinsip dan pedoman
Prinsip
pedoman-pedoman (1)
A Struktur Menu
A.
1. Sesuaikan struktur menu dengan struktur
tugas
2. Sediakan cara yang lebih cepat / singkat
untuk struktur tugas (shortcut
(shortcut))
3. Pada layar monitor, texttext-menu ditampilkan
secara vertikal.
4. Gunakan piepie-menu untuk menu dengan
level hierarki 1 atau 2
2, dengan masingmasingmasing pilihan di tiap level tidak terlalu
banyak.
1/16/2010

14

Merancang Antarmuka Menu :


Prinsip--prinsip dan pedoman
Prinsip
pedoman-pedoman (2)
5
5.

6.

7.

8.

1/16/2010

Gunakan graying
graying--out atau deletion untuk
item--item menu yang tidak aktif,
item
tergantung pada pengalaman user dan
alat inputnya.
p y
Susun secara logika, berbeda, dan
eksklusif dari sisi semantic, dengan
makna yang jelas.
Label untuk pilihan menu harus jelas,
konsisten secara gramatikal dan
penempatan, serta sesuai dengan
k t k it jjudul
keterkaitan
d l menunya.
Gunakan deskriptor pilihan menu jika
label untuk pilihan menu tidak begitu
j l d
jelas
dan ambigu.
bi
15

Contoh Struktur Menu


Contoh 4 struktur menu :
2 pilihan tiap layar, 6 level (kondisi 1)
4 pilihan tiap layar, 3 level (kondisi 2)
8 pilihan
ilih titiap llayar, 2 llevell (k
(kondisi
di i 3)
64 pilihan tiap layar, 1 level (kondisi 4)
Kesimpulan dari 4 kondisi tersebut :
- Urutan error dari banyak ke sedikit :
kondisi 1 kondisi 2 kondisi 4 kondisi 3
- Urutan respon time dari cepat ke lambat :
kondisi 3 kondisi 4 kondisi 2 kondisi 1
1/16/2010

16

Contoh Struktur Menu & Struktur


Tugas
Tugas

1/16/2010

17

Contoh Menu Breadth VS Depth (1)

1/16/2010

18

Contoh Menu Breadth VS Depth (2)

1/16/2010

19

Contoh Menu Vertical VS Menu


H i
Horizontal
t l

1/16/2010

20

Contoh Menu Vertical VS PiePie-Menu

1/16/2010

21

Contoh Grayed Out VS Deleted


I
Inactive
ti Menu
M
Items
It

1/16/2010

22

Bersifat logis, berbeda, dan eksklusif


secara semantic dengan
g makna yyang
g
jelas

1/16/2010

23

Label pilihan menu yang jelas dan


konsisten

1/16/2010

24

1/16/2010

25

Merancang Antarmuka Menu :


Prinsip--prinsip dan pedoman
Prinsip
pedoman-pedoman (3)
B. Urutan pilihan menu
Urutan label pilihan menu bisa
berdasarkan aturan konvensional,
frekuensi penggunaan, urutan
penggunaannya kelompok kategori
penggunaannya,
atau fungsional, urutan alphabet,
keinginan user dan tugas user.

1/16/2010

26

Contoh Urutan Pilihan Menu

1/16/2010

27

1/16/2010

28

Merancang Antarmuka Menu :


Prinsip--prinsip dan pedoman
Prinsip
pedoman-pedoman (4)
C. Pilihan Item Menu
1. Jika menggunakan keyboard, cursorcursor-selection
tepat digunakan untuk menu yang sedikit /
singkat. Untuk menu yang banyak / panjang
atau menu yang sering digunakan, gunakan
lettered--selection. Pada antarmuka yang
lettered
pointer driven gunakan mekanisme pilihan
dengan pointer
pointer--cursor.
2. Gunakan pilihan menu kondisi defaults
3. Bedakan
B d k antara
t
menu choose
choose
h
one d
one
dan
choose many
many
4. Sediakan feedback p
pilihan menu
1/16/2010

29

Contoh Pilihan Menu


Compatible letters
A.
A
Assembler
bl
B.
Buffer
C. Compile
D. Debug
D b
E.
Exit
I
Incompatible
tibl lletters
tt
A.
Buffer
B.
Debug
C. Assembler
A
bl
D. Compile
E.
Exit
1/16/2010

30

Contoh Pilihan Menu


Compatible Numbers
1.
A
Assembler
bl
2.
Buffer
3.
Compile
4.
D b
Debug
5.
Exit
I C
InCompatible
tibl N
Numbers
b
1.
Buffer
2.
Debug
3.
A
Assembler
bl
4.
Compile
5.
Exit
1/16/2010

31

Contoh Pilihan Menu


Kesimpulan :
Response time
1
1.
Compatible letters lebih baik
daripada compatible numbers
2
2.
Incompatible letters lebih buruk
daripada incompatible numbers

1/16/2010

32

Contoh Keyboard Menu Choice


S l ti
Selection

1/16/2010

33

Contoh Pilihan Menu

1/16/2010

34

Contoh Menu Choose One & Menu


Choose Many

1/16/2010

35

Merancang Antarmuka
Menu : Prinsip
Prinsip--prinsip dan
pedoman--pedoman (5)
pedoman
D. Pemanggilan Menu
Sediakan menu pop
pop--up atau menu
user--invoked untuk user yang sering
user
menggunakannya dan situasi dimana
tampilan yang penuh (permanent
(permanent
menu)) membuat user tidak nyaman.
menu

1/16/2010

36

Contoh Pemanggilan Menu

1/16/2010

37

Merancang Antarmuka Menu :


Prinsip--prinsip dan pedoman
Prinsip
pedoman-pedoman (6)
E Navigasi Menu
E.
1. Bangun kaidahkaidah-kaidah untuk perancangan
menu dan terapkan secara konsisten di
seluruh tampilan menu
menu.
2. Gunakan label sesuai intinya, peta menu,
dan tempatkan alat bantu navigasi pada
sistem menu yang komplek.
3. Gunakan akses langsung melalui type
type-ahead,, namaahead
nama-nama tampilan
p
menu dan
macro untuk user, sebagai navigasi bagi
user expert.
4
4.
Facilitasi backward navigation
1/16/2010

38

Contoh Navigasi Menu

1/16/2010

39

Contoh Menu ByPass

1/16/2010

40

Anda mungkin juga menyukai