Transcript IMK-04-Interface-Berbasis-Menu

1
Ragam Interaksi
 Ragam interaksi merujuk kepada semua
cara yang digunakan untuk pengguna
untuk dapat berinteraksi dengan sistem
komputer.
 Ragam interaksi didasarkan pada pola perilaku
seseorang
 Bersifat kontekstual dan innate
 Ragam interaksi merujuk ke ‘bagaimana’ perilaku
pengguna ketika berinteraksi dengan sistem
2
Tipe Ragam Interaksi
 Interaksi berbasis bahasa perintah (command
language)
 Sistem menu
 Antarmuka berbasis ikon
 Manipulasi langsung
 Antarmuka berbasis pengisian borang (form-filling
style)
3
Antarmuka Berbasis Menu
 Menu adalah sekumpulan pilihan yang
ditampilkan pada layar, setiap menu
mewakili sebuah perintah
 Pengguna memilih sebuah perintah dari
sejumlah perintah yang disusun ke dalam
sejumlah menu dan melihat pengaruhnya.
 Eksekusi dari menu yang dipilih akan
menghasilkan perubahan status dari suatu
antarmuka.
4
Jenis Menu(1)
 Menu tunggal:
 Menu biner
 Menu tunggal banyak pilihan






Menu datar
Menu tarik
Menu berbasis ikon dan toolbar
Menu dengan pilihan yang panjang
Menu dan hotlink tertanam
Menu breadcrumb
5
Jenis Menu(2)
 Kombinasi Banyak Menu:
 Menu linear
 Menu serempak
 Menu berstruktur pohon
 Peta situs
 Jaring menu tak berputar dan berputar
6
Menu Biner
 Menu biner digunakan untuk memilih salah satu dari
dua pilihan yang tersedia
 Contoh:
7
Menu Tunggal
Banyak Pilihan
 Menu tunggal banyak pilihan merupakan variasi dari
menu biner --> lebih dari dua pilihan
 Contoh:
8
Menu Datar (1)
 Menu datar merupakan menu berbasis teks konvensional
dengan semua menu yang tersedia ditampilkan pada layar.
 Contoh:
PENGELOLAAN DATA AKADEMIS MAHASISWA
“STMIK SANTOSA”
DAFTAR M ENU
<A>
<B>
<C>
<D>
<E>
<F>
<G>
<H>
<I>
Inisialisasi Berkas Mahasiswa
Inisialisasi Berkas Ma ta Kuliah
Inisialisasi Berkas Nilai Ujian
Membuka Semua Berkas
Mengisi Data Mahasiswa
Mengisi Data Mata Kuliah
Mengisi Data Nilai Ujian
Mengisi Data KRS
Menghitung IP Semester
<J>
<K>
<L>
<M>
<N>
<O>
<P>
Mencetak Presensi Kuliah
Mencetak Presensi Ujian
Mencetak KRS
Mencetak Nilai Ujian
Mencetak KHS
Mencetak Data Mahasiswa
Mencetak Data Mata Kuliah
<Q> Selesai
Pilih salah satu: _
9
Menu Datar (2)
 Pilihan pada menu datar dioperasikan dengan memilih
selektor
 Selektor:
 Huruf


Kompatibel: sama dengan huruf pertama pilihan
Tak Kompatibel: tidak harus sama
 Angka


Kompatibel: sama dengan nomor urut huruf pertama pilihan
Tak kompatibel: tidak harus sama
10
Menu Datar (3)
M E N U
D A T A R
D E N G A N
S E L E K T O R
H U R U F
K O M P A T I B E L
B
C
D
E
G
H
I
.
.
.
.
.
.
.
B a
C e
D a
iE td
G a
H a
I s
c a
D a t a
t a k
L a p o
t a
B a r u
R e k a m a n
b u n g
B e r
p u s
R e k a
i
R e k a m a
P i l i h
s a l a h
r a n
k a s
m a n
n
s a t u : _
A
B
C
D
E
F
G
M E N U
D A T A R
D E N G A N
S E L E K T O R
H U R U F
T A K
K O M P A T I B E L
.
.
.
.
.
.
.
.
.
.
.
.
.
.
B
C
D
E
G
H
I
a
e
a
d
a
a
s
P i l i h
c
t
t
i
b
p
i
a
D a t a
a k
L a p
a
B a r u
t
R e k a
u n g
B e
u s
R e k
R e k a m
s a l a h
o r a n
m
r
a
a
a n
k a s
m a n
n
s a t u : _
a
e
a
d
a
a
s
P i l i h
a.
M E N U
D A T A R
D E N G A N
S E L E K T O R
A N G K A
K O M P A T I B E L
2
3
4
5
7
8
9
B
C
D
E
G
H
I
1
2
3
4
5
6
7
c
t
t
i
b
p
i
a
D a t a
a k
L a p
a
B a r u
t
R e k a
u n g
B e
u s
R e k
R e k a m
s a l _
a h
o r a n
m
r
a
a
a n
k a s
m a n
n
s a t u :
b.
M E N U
D A T A R
D E N G A N
S E L E K T O R
A N G K A
T A K
K O M P A T I B E L
.
.
.
.
.
.
.
B
C
D
E
G
H
I
a c a
D a t a
e Lt aa pk o r a n
a t a
B a r u
d i t
R e k a
a b u n g
B e
a p u s
R e k
s i
R e k a m
P i l i h
s a l a h
m
r
a
a
a n
k a s
m a n
n
s a t u : _
11
Menu Tarik (1)
 Menu datar tidak lagi disukai karena terlalu memakan
kapling pada layar monitor
 Untuk menampilkan daftar pilihan yang banyak
sekarang banyak digunakan menu tarik (pulldown
menu), dan hampir semua program aplikasi
menggunakannya.
12
Menu Tarik (2)
13
Menu Berbasis Ikon
dan Toolbar
 Pada menu berbasis ikon dan toolbar, pilihan
dinyatakan sebagai suatu ikon atau toolbar tertentu.
 Contoh:
14
Variasi Lain
Menu gulung
Kotak kombo
Menu mata ikan
Penggeser
Menu dua dimensi
15
Menu Tertanam & Hotlink (1)
 Menu tertanam adalah menu yang dapat ditambahkan
sendiri oleh pengguna suatu aplikasi, misalnya Google
Earth.
 Menu hotlink banyak dijumpai di situs Website yang
tujuannya untuk membawa pengguna ke informasi
tertentu.
16
Menu Tertanam & Hotlink (2)
 Contoh:
17
Menu Breadcrumb
 Untuk membantu pengguna menavigasi dirinya ke
ruang informasi yang tersedia, seringkali digunakan
menu breadcrumb
 Contoh:
Qu i c k Ti m e ™ a n d a
TI F F (L ZW ) d e c o m p re s s o r
a re n e e d e d to s e e th i s p i c t u re .
18
Kombinasi Banyak Menu(1)
 Pada sejumlah aplikasi, khususnya yang berbasis Web,
biasanya dijumpai sejumlah ragam menu yang berbeda
 Menu yang ada ditampilkan satu persatu atau secara
serempak (bersamaan):
 Contoh kombinasi banyak menu yang ditampilkan satu per
satu misalnya pada pemesanan tiket pesawat terbang atau
kamar hotel:
 www.airasia.com
QuickTime™ and a
TIFF ( LZW) decompressor
are needed to see this picture.
19
Kombinasi Banyak Menu(2)
 Contoh menu serempak:
20
Kombinasi Banyak Menu(3)
 Menu berstruktur pohon dan jaring:
Jaring tak
berputar
QuickTime™ and a
TIFF (LZW) decompressor
are needed to see this picture.
QuickTime™ and a
TIFF (LZW) decompressor
are needed to see this picture.
Pohon
Jaring
berputar
QuickTime™ and a
TIFF (LZW) decompressor
are needed to see this picture.
21
Kombinasi Banyak Menu(4)
 Peta situs: digunakan untuk membantu pengguna
mengetahui secara keseluruhan ruang informasi
yang tersedia
www.ebay.com
22
Manipulasi langsung (1)
 Shneiderman (1983):
 Manipulasi langsung adalah ragam dialog yang
mempunyai karakteristik:



penyajian visual dari obyek yang akan dimanipulasi
tindakan fisik sebagai pengganti teks masukan
reaksi langsung yang dapat dilihat.
23
Manipulasi langsung (2)
 Preece, 1994:
 kenampakan obyek dan tindakan yang dilakukan
pengguna
 cepat, dapat dibalik/dibatalkan, tindakan meningkat
 penggantian perintah yang diketik dengan tindakan
menunjuk ke obyek yang diinginkan
24
Manipulasi langsung (3)
 Definisi lain yang lebih umum:
 Mengklik dan menggeser obyek pada layar tampilan
 Definisi di atas hanya menekankan pada tindakan fisik
oleh pengguna
 Istilah ini sering disebut dengan manipulasi visual
(Cooper dan Reimann, 2003)
25
Manipulasi langsung (4)
 Aspek kognitif:
 Directness:


gagasan tentang arah
perasaan yang timbul sebagai hasil dari interaksi dengan
antarmuka
 Aspek dari directness:


Jarak antara yang dipikirkan pengguna dengan kebutuhan
sistem
Keterlibatan secara kualitatif
26
Manipulasi langsung (5)
 Manipulasi Program vs Manipulasi Isi
 Manipulasi program:


cara pengguna menggunakan program aplikasi untuk
menyelesaikan satu tugas
Tidak perlu keahlian khusus
 Manipulasi isi:
 lebih merujuk ke data yang diolah oleh program aplikasi
tersebut
 Perlu keahlian khusus atau pelatihan dalam jangka waktu
agak lama
27
Manipulasi langsung (6)
 Dix et al. (2004):
 kenampakan obyek yang menjadi perhatian,
 penggantian bahasa perintah yang rumit dengan suatu tindakan
yang memanipulasi obyek yang nampak secara langsung (sehingga
disebut dengan manipulasi langsung)
 tindakan bertahap pada antarmuka dengan umpan balik segera
untuk semua tindakan yang diambil,
 kebenaran sintaksis untuk semua tindakan, sehingga semua
tindakan pengguna merupakan langkah yang sah
 semua tindakan dapat dibatalkan
28
Interaksi Berbasis
Pengisian Borang
(1)
 Pengisian borang hampir dilakukan oleh setiap orang
sepanjang hidup mereka
 Antarmuka berbasis pengisian borang adalah jenis
antarmuka yang menggunakan metafor borang untuk
mengisi data ke komputer
29
Interaksi Berbasis
Pengisian Borang
(2)
 Aspek-aspek IBPB (1):
 Proteksi tampilan - adanya pembatasan agar
pengguna tidak dapat mengakses semua tampilan yang
ada di layar.
 Batasan medan tampilan - medan data dapat
ditentukan untuk mempunyai panjang yang tetap atau
berubah, menggunakan format bebas atau tertentu.
 Isi medan - pengguna biasanya mempunyai sejumlah
gambar-an tentang isi medan yang diperbolehkan;
petunjuk pengisian dapat juga ditampilkan sebagai
bagian dari tampilan
30
Interaksi Berbasis
Pengisian Borang
(3)
 Aspek-aspek IBPB (2):
 Medan opsional - beberapa medan isian dapat bersifat
opsional; medan opsional dapat dinyatakan secara
tekstual atau menggunakan aturan tertentu seperti
penggunaan warna berintensitas rendah, warna
tampilan yang berbeda dan lain-lain
 Default - apakah dalam medan isian dimungkinkan
adanya nilai default. Jika ya, tentukan tempatnya,
apakah pada bagian yang tidak dapat diakses pengguna
ataukah pada bagian masukan data.
31
Interaksi Berbasis
Pengisian Borang
(4)
 Aspek-aspek IBPB (3):
 Bantuan - adanya bantuan (help) yang menunjukkan cara
pengisian borang dapat pula, atau malah sebaliknya, ditambahkan,
tetapi harus terpisah dari bentuk dasar borang. Jika terdapat
fasilitas bantuan, pengguna perlu dineritahu cara mengakses
bantuan tersebut.
 Medan penghentian - masukan data dalam medan dapat diakhiri
dengan jalan menekan tombol Enter atau Return atau mengisi
karakter terakhir dengan karakter tertentu, atau de-ngan cara
berpindah ke medan lain.
 Navigasi - kursor dapat digerakkan di sekeliling layar yang
menggunakan tombol Tab untuk urutan yang tetap, atau dapat
pula digerakkan secara bebas menggunakan piranti seperti mouse.
32
Interaksi Berbasis
Pengisian Borang
(5)
 Aspek-aspek IBPB (4):
 Pembetulan kesalahan - pengguna dapat
membetulkan kesalahan menggunakan tombol
BackSpace, dengan menumpang-tindihi isian lama,
dengan jelan membersihkan dan mengisi kembali
medan tersebut dan lain-lain.
 Penyelesaian - perlu diperhatikan cara yang digunakan
untuk memberitahu pengguna bahwa seluruh proses
pengisian telah selesai.
33