�ݺ�ߣ

1
Antarmuka Berbasis Menu
BAB VI

2
 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.

3
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

4
Jenis Menu(2)
 Kombinasi Banyak Menu:
 Menu linear
 Menu serempak
 Menu berstruktur pohon
 Peta situs
 Jaring menu tak berputar dan berputar

5
Menu Biner
 Menu biner digunakan untuk memilih
salah satu dari dua pilihan yang
tersedia
 Contoh:

6
Menu Tunggal
Banyak Pilihan
 Menu tunggal banyak pilihan
merupakan variasi dari menu biner -->
lebih dari dua pilihan
 Contoh:

7
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 MENU
<A>
<B>
<C>
<D>
<E>
<F>
<G>
<H>
<I>
Inisialisasi Berkas Mahasiswa
Inisialisasi Berkas Mata 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>
<Q>
Mencetak Presensi Kuliah
Mencetak Presensi Ujian
Mencetak KRS
Mencetak Nilai Ujian
Mencetak KHS
Mencetak Data Mahasiswa
Mencetak Data Mata Kuliah
Selesai
Pilih salah satu: _

8
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

9
Menu Datar (3)
MENU DATAR DENGAN
SELEKTOR HURUF
KOMPATIBEL
B. Baca Data
C. Cetak Laporan
D. Data Baru
E. Edit Rekaman
G. Gabung Berkas
H. Hapus Rekaman
I. Isi Rekaman
Pilih salah satu:_
MENU DATAR DENGAN
SELEKTOR HURUF
TAK KOMPATIBEL
A. Baca Data
B. Cetak Laporan
C. Data Baru
D. Edit Rekaman
E. Gabung Berkas
F. Hapus Rekaman
G. Isi Rekaman
Pilih salah satu:_
a. b.
MENU DATAR DENGAN
SELEKTOR ANGKA
KOMPATIBEL
2. Baca Data
3. Cetak Laporan
4. Data Baru
5. Edit Rekaman
7. Gabung Berkas
8. Hapus Rekaman
9. Isi Rekaman
Pilih salah satu:_
MENU DATAR DENGAN
SELEKTOR ANGKA
TAK KOMPATIBEL
1. Baca Data
2. Cetak Laporan
3. Data Baru
4. Edit Rekaman
5. Gabung Berkas
6. Hapus Rekaman
7. Isi Rekaman
Pilih salah satu:_

Minggu 4/PIS/TKI 10
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.

Minggu 4/PIS/TKI 12
Menu Berbasis Ikon
dan Toolbar
 Pada menu berbasis ikon dan toolbar,
pilihan dinyatakan sebagai suatu ikon
atau toolbar tertentu.
 Contoh:

13
Variasi Lain
Menu gulung Kotak kombo
Menu mata ikan
Penggeser Menu dua dimensi

14
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.

15
Menu Tertanam & Hotlink (2)
 Contoh:

16
Menu Breadcrumb
 Untuk membantu pengguna menavigasi
dirinya ke ruang informasi yang
tersedia, seringkali digunakan menu
breadcrumb
 Contoh:
QuickTime™ and a
TIFF (LZW) decompressor
are needed to see this picture.

17
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

Minggu 4/PIS/TKI 18
 Contoh menu serempak:

19
 Menu berstruktur pohon dan jaring:
QuickTime™ and a
QuickTime™ and a
QuickTime™ and a
are needed to see this picture.Pohon
Jaring tak
berputar
Jaring
berputar

Minggu 4/PIS/TKI 20
 Peta situs: digunakan untuk membantu
pengguna mengetahui secara keseluruhan
ruang informasi yang tersedia
www.ebay.com

CARA MENGORGANISIR
PILIHAN
 Pengelompokan berbasis tugas pada
struktur pohon
21

1
BAB VI Lanjutan …

2
 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

Minggu 4/PIS/TKI 3
 Contoh menu serempak:

4
 Menu berstruktur pohon dan jaring:
QuickTime™ and a
QuickTime™ and a
QuickTime™ and a
are needed to see this picture.Pohon
Jaring tak
berputar
Jaring
berputar

Minggu 4/PIS/TKI 5
 Peta situs: digunakan untuk membantu
pengguna mengetahui secara keseluruhan
ruang informasi yang tersedia
www.ebay.com

CARA MENGORGANISIR
PILIHAN
 Pengelompokan berbasis tugas pada
struktur pohon
6

Ragam dialog yang paling
konvesional
Berupa suatu perintah tunggal
Contoh : Perintah-perintah yang
di miliki Oleh DOS dan Unix

 Perintah DOS dibagi 2 :
1. Internal Command (tidak memerlukan berkas
.EXE dan .COM)
CONTOH :
C : >DIR  menampilkan nama berkas yang
terdapat pada hardisk
C : >COPY *.DOC A: NASKAH  perintah membuat
salinan semua berkas berpengenal .DOC dari hardisk
C ke disket pada pemutar A dan ditempatkan dalam
direktori NASKAH.
DOS

2. External Command (memerlukan berkas .EXE
dan .COM)
CONTOH :
C : DOS>FORMAT A: /S  perintah untuk
memformat disket pada pemutar A sekaligus
menyalin sistem ke dalam disket tsb.
Perintah ini memerlukan berkas FORMAT.COM
C : DOS>DELTREE C : NASKAHSOAL  perintah
yang digunakan untuk menghapus direktori SOAL
yang berada di dalam direktori NASKAH di dalam
hardisk C
Perintah ini memerlukan berkas DELTREE.EXE

Keuntungan Kerugian
 cepat
 akurat
 efisien
 ringkas
 luwes
 inisiatif oleh pengguna
 memerlukan pelatihan
yang lama
 membutuhkan
penggunaan yang
teratur
 beban ingatan yang
tinggi
 Jelek dalam
menangani kesalahan

 Pilihlah kata kunci yang mudah diingat
 Gunakan format perintah yang konsisten
 Gunakan untaian kata yang pendek
 Tambahkan fasilitas (help)
 Gunakan nilai-nilai default untuk
mengurangi kesalahan ketik
 Sediakan pesan-pesan yang jelas, dan jika
masih banyak kesalahan yang muncul
 Gunakan ragam inisiatif oleh komputer

 Merupakan ragam dialog yang memungkinkan
pengguna untuk mengemas sejumlah perintah
kedalam suatu berkas yang sering disebut batch
file.
 Perintah yang dituliskan tidak harus menggunakan
salah satu bhs pemrograman baik aras rendah
maupun aras tinggi seperti assembler, Pascal, C,
FORTRAN atau BASIC, tetapi tetap harus mengikuti
aturan-aturan tertentu.

 Pada dialog berbasis bahasa alami pengguna
menggunakan instruksi-instruksi dalam bahasa alami
yang lebih umum sifatnya, pengguna dapat secara
bebas memberikan instruksinya dengan kalimat-
kalimat yang lebih “manusiawi”.
 Contoh instruksi bahasa alami :
Cetak daftar semua mahasiswa yang
mempunyai IP semester lebih besar dari
3,0

 Bahasa diatas kemudian diterjemahkan ke
dalam instruksi yang ekuivalen dengan dbase
atau foxpro, sebagai :
 DISPLAY ALL FOR IPSEM > 3.0
 Atau dalam dialek Turbo Pascal
while not eof (T) do
begin
readln(T,S) ;
if S.IpSem > 3.0 then
writeln(S.NamaMahasiswa);
end;

 Teknik dialog berbasis pengisian borang (form
filling dialogue) merupakan suatu penerapan
langsung dari aktifitas pengisian borang dalam
kehidupan sehari-hari dimana pengguna akan
dihadapkan suatu bentuk borang yang ada di
layar komputer yang mereka gunakan.
 Kualitas antarmuka berbasis pengisian borang
tergantung pada tiga aspek:
 Tampilan pada layar monitor yang mencerminkan struktur data
masukan yang diperlukan oleh sistem.
 Kejelasan perancangan dan penyajiannya secara visual pada layar
monitor.
 Derajat kebenaran dan kehandalan penerimaan data masukan
oleh program lewat berbagai fasilitas pemasukan data yang ada
di dalam borang tersebut.

1. Proteksi tampilan, pembatasan tampilan yg
tidak dapat diakses pengguna.
2. Batasan medan tampilan, penentuan panjang
yang tetap atau berubah, menggunakan
format bebas atau tertentu.
3. Isi medan, petunjuk pengisian tampilan.
4. Medan opsional, dinyatakan secara tekstual
atau menggunakan aturan tertentu, seperti
penggunaan warna berintensitas rendah,
warna tampilan yang berbeda, dan lain-lain.

 Default. tentukan tempatnya, apakah pada
bagian yang tidak dapat diakses pengguna
ataukah pada bagian pemasukan data.
 Bantuan, bantuan (help) cara pengisian borang.
 Medan penghentian. Masukan data dapat diakhiri
dengan menekan tombol Enter atau Return atau
mengisi karakter terakhir dengan karakter
tertentu atau dengan cara berpindah ke medan
lain.
 Navigasi. menggunakan tombol Tab untuk urutan
yang tetap, atau dapat pula digerakkan secara
bebas menggunakan mouse.

 Pembetulan kesalahan. menggunakan tombol
BackSpace dengan menindihi (overwrite) isian
lama, dengan jalan membersihkan dan mengisi
kembali medan tersebut, dan lain-lain.
 Penyelesaian. memberitahu pengguna bahwa
seluruh proses pengisian telah selesai.

Keuntungan Kerugian
 pengguna sudah terbiasa
dengan pengisian borang
 isian data yang
disederhanakan
 diperlukan sedikit pelatihan
 beban memori rendah
 strukturnya jelas
 perancangan mudah
 tersedia berbagai piranti
bantu perancangan tampilan
 seringkali lambat
 memakan ruang layar
(khususnya untuk menu
datar)
 tidak cocok untuk
pemilihan perintah/instruksi
 memerlukan pengontrol
kursor
 mekanisme navigasinya
tidak terlihat secara eksplisit
 memerlukan suatu bentuk
pelatihan

 Adalah ragam dialog yang banyak menggunakan
simbol-simbol dan tanda-tanda untuk
menunjukkan suatu aktifitas tertentu.
 Keuntungannya gambar bersifat umum, mudah
diingat,mudah dipelajari shg mempertinggi
kinerja pengguna, tidak bergantung pada suatu
bahasa.
 Kerugian : cenderung membingungkan, boros
tempat, dan sangat tidak efektif, tidak adanya
standarisasi bentuk-bentuk ikon seringkali
menimbulkan persoalan tersendiri.

 Jendela (window) adalah bagian dari layar yang
digunakan untuk menampilkan informasi.
 Sistem penjendelaan adalah sistem antarmuka
yang memungkinkan pengguna untuk
menampilkan berbagai informasi baik sendiri-
sendiri maupun secara bersama-sama ke dalam
bagian-bagian layar yang tidak saling
mempengaruhi.
 Jenis-jenis jendela
 Jendela TTY
 Time-Multiplexed Windows
 Space-Multiplexed Windows
 Jendela non Homogen

 Jendela TTY : jendela paling sederhana,
contohnya adalah ketika anda berada pada dot
prompt.
 Time-Multiplexed Windows : jendela yang dapat
digeser (scrollable windows), dan frame-at-a-
time windows. Contoh : text editor atau menu
tarik
 Space-Multiplexed Windows : lebar layar dibagi
menjadi beberapa jendela dengan ukuran yang
bervariasi. Contoh : Microsoft Windows XP
 Jendela non Homogen : jenis jendela yang tidak
dapat dikelompokkan dalam jendela-jendela
diatas. Contoh : ikon dan zooming window

 Penampilan lebih banyak informasi
 Pengaksesan lebih banyak sumber informasi
 Pengkombinasian berbagai sumber informasi
 Pengontrolan bebas atas sejumlah program
 Pengingatan
 Command context/active form
 Penyajian jamak

 Ragam dialog yang menyajikan langsung suatu aktifitas
oleh sistem kepada pengguna sehingga aktifitas itu akan
dikerjakan oleh sistem komputer ketika pengguna
memberikan langsung instruksi lewat manipulasi
langsung dari semacam kenyataan maya (virtual reality)
yang terpampang lewat tampilan yang muncul di layar.
 Penerapan manipulasi langsung :
- kontrol proses
contoh : sistem pembangkitan dan penyaluran
listrik yang terhubung dengan sistem secara online
- Simulator
Adalah sistem miniatur yang mencoba menirukan kerja
suatu sistem yang berskala sangat besar atau sangat
kecil jika dilihat dari kacamata orang awam.
contoh : Simulator penerbangan

- Kontrol lalu lintas penerbangan
Dunia 3 dimensi tempat sebuah pesawat sedang
menjelajahi dunia akan diterjemahkan ke dalam
layar 2 dimensi yang ada di hadapan seorang
operator.
Lewat tampilan 2 dimensi yang merefleksikan
dunia 3 dimensi itulah seorang operator dapat
mengontrol lalu lintas penerbangan
- Perancangan berbantuan komputer
Atau (Computer Aided Design)
contoh : penggunaan program AutoCAD,

Keuntungan Kerugian
 mempunyai analogi yang jelas
dengan suatu pekerjaan nyata
 mengurangi waktu
pembelajaran
 memberikan tantangan untuk
eksplorasi pekerjaan yang nyata
 penampilan visual yang bagus
 mudah dioperasikan
 tersedianya berbagai
perangkat bantu u/ merancang
ragam dialog manipulasi
langsung
 memerlukan program yang
rumit dan berukuran besar
 memerlukan tampilan grafis
berkinerja tinggi
 memerlukan piranti masukan
seperti mouse, trackball
 memerlukan perancangan
tampilan dengan kualifikasi
tertentu

 Agak susah dibedakan dengan antarmuka
berbasis manipulasi langsung.
 Secara umum, keuntungan dan kerugian teknik
antarmuka berbasis interaksi grafis sama dengan
keuntungan dan kerugian menggunakan
manipulasi langsung
 Contoh : Pada Microsoft Word ketika kursor
mendekati suatu ikon akan muncul pesan yang
menunjukkan arti ikon tsb.

Merupakan peranti masukan
Tata letak papan ketik
Tombol papan ketik
dikelompokkan menjadi 4 bagian :
Tombol Aritmatik
Tombol kontrol
Tombol numerik
Tombol fungsi

3
 Salah satu piranti input yang paling utama
untuk berinteraksi dengan sistem
komputer adalah keyboard.
 Keyboard adalah kumpulan tombol tekan
on-off yang dapat digunakan secara
kombinasi maupun terpisah.
 Keyboard termasuk piranti masukan
diskret
 Piranti lain dikenal dengan piranti
masukan kontinyu seperti penlight,
joystick.

4
 Umumnya orang sudah familiar dengan layout
keyboard yang disebut dengan “QWERTY”, yaitu
susunan huruf tombol kiri atas.
 Rancangan keyboard ini pertama kali digunakan
pada mesin ketik di USA tahun 1874.
 Susunan tombol dipilih untuk mengurangi loncatan
penekanan tombol yang tidak sengaja pada mesin
ketik manual.
 Misal huruf ‘s’, ‘t’, dan ‘h’ diletakkan berjauhan
meskipun sering digunakan bersama dalam kalimat
bahasa Inggris.

5
2 3 4 5 6 7 8 9 0
Q W E R T Y U I
1
O P
S D F H J LA G K
Z X C V B N M , .
SPACE

 Tombol keyboard disusun sama dengan tata
letak QWERTY maupun DVORAK, tetapi
susunan hurufnya berurutan seperti pada
urutan alfabetik.
 Di Jumpai pada mainan anak-anak

7
 Tipe keyboard yang lain adalah alphabetic
dan Dvorak.
 Keyboard alphabetic tombol-tombol disusun
dalam urutan alphabet.
 Tidak dapat digunakan secara lebih cepat
baik untuk pengguna awal maupun pengguna
yang sudah mahir.

8
 Pertama dipatenkan tahun 1932.
 Susunan tombol huruf berdasarkan
frekuensi penggunaannya.
 Huruf-huruf yang umum berada dibawah
jari-jari yang dominan
 Kombinasi huruf yang umum berganti di
antara kedua tangan.
 Mampu meningkatkan kecepatan
pengetikan 10 – 15 % dan mengurangi
kelelahan tangan.

TATA LETAK DVORAK
 Menggunakan susunan papan ketik yang
sama, tetapi hurufnya disusun sedemikian
rupa sehingga tangan kanan dibebani lebih
banyak pekerjaan di banding tangan kiri.

11
 Hanya mempunyai beberapa tombol antara 4
sampai 5.
 Untuk memasukkan suatu huruf harus menekan
beberapa tombol secara bersamaan.
 Ukurannya kompak, sangat cocok untuk aplikasi
yang portabel.
 Waktu pelatihan singkat, penekanan tombo-
tombol mencerminkan bentuk huruf yang
diinginkan
 Kecepatannya tinggi
 Kurang populer, karena pada pemakaian yang
lama akan menyebabkan kelelahan pada tangan.

• Sering operator mengeluh karena sakit
pada sejumlah anggota badan, maka
secara ergonomik muncullah Model Tata
Letak Klockenbert

• Sering digunakan di kalkulator

• Keuntungan ada tombol fungsi
• Mengurangi beban ingatan
• Mudah dipelajari
• Kecepatan yang lebih tinggi
• Mengurangi kesalahan
• Peranti interaktif yang digunakan untuk
menuding/menunjuk atau menempatkan kursor disuatu
posisi pada layar tampilan dan untuk mengambil suatu
item informasi untuk dipindah ketempat lain.
Rumus
Perbandingan Kontrol Tampilan : Gerakan tangan atau responder lain
Gerakan Kursor

 Digunakan sebagai peranti gambar atau point
shoot device.
 Perinsip kerja dengam memantau selisih
antara waktu saat elektron mulai melakukan
pengaran, dan waktu pada saat lokasi tempat
pena berada dinyalakan.

 Mendeteksi ada atau tidaknya sentuhan
tangan atau stylus langsung ke layar
komputer.

 Merupakan peranti yang dipastikan selalu ada
pada sebuah sistem komputer, karena lewat
layar tampilan inilah pengguna dapat melihat
apa yang ia kerjakan, dan informasi yang
diberikan oleh komputer sebagai hasil dari
suatu proses komputasi.

 Kreteria merancang sistem yang baik adalah
tampilan yang menarik
 Harus mempunyai jiwa seni
 Membuat Sketsa
 Menggunakan peranti purwarupa GUI
 Menulis keterangan
 Menggunakan peranti bantu yang disebuat
CASE

 Perancangan antar muka yang melibatkan
penguna
 Pengguna di ajak untuk interaktif
 Mengerti tentang tingkat kepandaian
menggunakan aplikasi oleh pengguna
 Aplikasi yang dibuat harus disesuaikan
dengan karakteristik pengguna

 Dibagi menjadi empat komponen :
 Model pengguna
 Bahasa perintah
 Umpan balik
 Dan penampilan informasi

 Pemilihan ragam dialog
 Perancangan struktur dialog
 Perancangan format pesan
 Perancangan penanganan kesalahan
 Perancangan struktur data

 Urutan penyajian
 Kelonggaran
 Pengelompokan
 Relevansi
 Konsistensi
 Kesederhanaan

 Ilusi pada objek-objek yang dapat
dimanipulasi
 Urutan visual dan fokus pengguna
 Struktur internal
 Kosa kata grafis yang konsisten dan sesuai
 Kesesuaian dengan media

 Aplikasi memberikan waktu tanggap
kepengguna
 Waktu tanggap diangap lama jika waktu
tanggap mencapai 14 detik

 Kesalahan dalam penulisan program
 Kesalahan logika program

 Lembar Kerja Tampilan dibagi menjadi empat
bagian yaitu
 Nomor lembar
 Tampilan
 Navigasi
 Keterangan

 Ada 2 komponen
 Nomor tampilan
 Transaksi yang menyebabkan perpindahan ke
tampilan lain (Alt F ke T, ALF E ke D dll)

 Ergonomi adalah faktor yang mempelajari
kenyamanan kerja
 Aspek ergonomik dari satuan kerja
 Pencahayaan
 Kualitas udara
 Gangguna suara
 Kesehatan dan keamanan kerja
 Kebiasaan bekerja

 Yang perlu diperhatikan dalam merancang
lingkungan fisik :
 Keamanan
 Efisiensi
 Ruangan pengguna
 Ruang kerja
 Pencahayaan
 Kegaduhan
 Polusi

 Antropomtrik adalah suatu ilmu yang
berhubungan dengan pengukuran untuk
memahami variasi fisik tubuh manusia

 Sistem yang digunakan oleh seorang
pengguna komputer, termasuk mebeler yang
ia gunakan. Contoh Ah.. Mengapa leher saya
sakit, pegal dll
 Menurut Sauter melaporkan bahwa ada dua
faktor yang sangat mempengaruhi unjuk
kerja operator stasiun kerja adalah sudut
melihat dan papan ketik
 Dari penelitian Dainoff mengatakan bahwa
rancangan stasiun kerja yang sesuai harus
dapat menempatkan papan ketik dan tempat
duduk ada ketinggian yang tepat.

 Berhubungan dengan lingkungan kerja
 Berhubungan dengan durasi kerja
 Berhubungan dengan tipe pekerjaan
 Beban psikologi yang dihadapi pekerja

�ݺ�ߣ

elearning of exercise

More Related Content

elearning of exercise