2
Antarmuka Berbasis Menu Menu adalah sekumpulan pilihan yang
ditampilkan pada layar, setiap menumewakili sebuah perintah Pengguna memilih sebuah perintah dari
sejumlah perintah yang disusun ke dalamsejumlah menu dan melihat pengaruhnya.
Eksekusi dari menu yang dipilih akanmenghasilkan perubahan status darisuatu 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
6
Menu TunggalBanyak Pilihan Menu tunggal banyak pilihan
merupakan variasi dari menu biner -->lebih dari dua pilihan
Contoh:
7
Menu Datar (1)
Menu datar merupakan menu berbasis tekskonvensional dengan semua menu yang tersediaditampilkan pada layar.
Contoh:PENGELOLAAN DATA AKADEMIS MAHASISWA
“STMIK SANTOSA”
DAFTAR MENU<A><B><C><D><E><F><G><H><I>
Inisialisasi Berkas MahasiswaInisialisasi Berkas Mata KuliahInisialisasi Berkas Nilai UjianMembuka Semua BerkasMengisi Data MahasiswaMengisi Data Mata KuliahMengisi Data Nilai UjianMengisi Data KRSMenghitung IP Semester
<J><K><L><M><N><O><P>
<Q>
Mencetak Presensi KuliahMencetak Presensi UjianMencetak KRSMencetak Nilai UjianMencetak KHSMencetak Data MahasiswaMencetak Data Mata Kuliah
Selesai
Pilih salah satu: _
8
Menu Datar (2)
Pilihan pada menu datar dioperasikan denganmemilih 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 DENGANSELEKTOR HURUF
KOMPATIBEL
B. Baca DataC. Cetak LaporanD. Data BaruE. Edit RekamanG. Gabung BerkasH. Hapus RekamanI. Isi Rekaman
Pilih salah satu:_
MENU DATAR DENGANSELEKTOR HURUFTAK KOMPATIBEL
A. Baca DataB. Cetak LaporanC. Data BaruD. Edit RekamanE. Gabung BerkasF. Hapus RekamanG. Isi Rekaman
Pilih salah satu:_a. b.
MENU DATAR DENGANSELEKTOR ANGKA
KOMPATIBEL
2. Baca Data3. Cetak Laporan4. Data Baru5. Edit Rekaman7. Gabung Berkas8. Hapus Rekaman9. Isi Rekaman
Pilih salah satu:_
MENU DATAR DENGANSELEKTOR ANGKATAK KOMPATIBEL
1. Baca Data2. Cetak Laporan3. Data Baru4. Edit Rekaman5. Gabung Berkas6. Hapus Rekaman7. Isi Rekaman
Pilih salah satu:_
Minggu 4/PIS/TKI 10
Menu Tarik (1)
Menu datar tidak lagi disukai karenaterlalu memakan kapling pada layarmonitor
Untuk menampilkan daftar pilihan yangbanyak sekarang banyak digunakanmenu tarik (pulldown menu), danhampir semua program aplikasimenggunakannya.
Minggu 4/PIS/TKI 12
Menu Berbasis Ikondan Toolbar Pada menu berbasis ikon dan toolbar,
pilihan dinyatakan sebagai suatu ikonatau toolbar tertentu.
Contoh:
14
Menu Tertanam & Hotlink (1)
Menu tertanam adalah menu yangdapat ditambahkan sendiri olehpengguna suatu aplikasi, misalnyaGoogle Earth.
Menu hotlink banyak dijumpai di situsWebsite yang tujuannya untukmembawa pengguna ke informasitertentu.
16
Menu Breadcrumb Untuk membantu pengguna menavigasi
dirinya ke ruang informasi yangtersedia, seringkali digunakan menubreadcrumb
Contoh:QuickTime™ and a
TIFF (LZW) decompressorare needed to see this picture.
17
Kombinasi Banyak Menu(1)
Pada sejumlah aplikasi, khususnya yang berbasisWeb, biasanya dijumpai sejumlah ragam menu yangberbeda
Menu yang ada ditampilkan satu persatu atau secaraserempak (bersamaan):
Contoh kombinasi banyak menu yang ditampilkansatu per satu misalnya pada pemesanan tiketpesawat terbang atau kamar hotel: www.airasia.com
QuickTime™ and aTIFF (LZW) decompressor
are needed to see this picture.
19
Kombinasi Banyak Menu(3)
Menu berstruktur pohon dan jaring:
QuickTime™ and aTIFF (LZW) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (LZW) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (LZW) decompressor
are needed to see this picture.Pohon
Jaring takberputar
Jaringberputar
Minggu 4/PIS/TKI 20
Kombinasi Banyak Menu(4)
Peta situs: digunakan untuk membantupengguna mengetahui secara keseluruhanruang informasi yang tersedia
www.ebay.com
2
Kombinasi Banyak Menu(1)
Pada sejumlah aplikasi, khususnya yang berbasisWeb, biasanya dijumpai sejumlah ragam menu yangberbeda
Menu yang ada ditampilkan satu persatu atau secaraserempak (bersamaan):
Contoh kombinasi banyak menu yang ditampilkansatu per satu misalnya pada pemesanan tiketpesawat terbang atau kamar hotel: www.airasia.com
QuickTime™ and aTIFF (LZW) decompressor
are needed to see this picture.
4
Kombinasi Banyak Menu(3)
Menu berstruktur pohon dan jaring:
QuickTime™ and aTIFF (LZW) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (LZW) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (LZW) decompressor
are needed to see this picture.Pohon
Jaring takberputar
Jaringberputar
Minggu 4/PIS/TKI 5
Kombinasi Banyak Menu(4)
Peta situs: digunakan untuk membantupengguna mengetahui secara keseluruhanruang informasi yang tersedia
www.ebay.com
Ragam dialog yang palingkonvesionalBerupa suatu perintah tunggalContoh : Perintah-perintah yangdi miliki Oleh DOS dan Unix
Perintah DOS dibagi 2 :1. Internal Command (tidak memerlukan berkas.EXE dan .COM)CONTOH :C : \>DIR menampilkan nama berkas yangterdapat pada hardiskC : \>COPY *.DOC A: \NASKAH perintah membuatsalinan semua berkas berpengenal .DOC dari hardiskC ke disket pada pemutar A dan ditempatkan dalamdirektori NASKAH.
DOS
2. External Command (memerlukan berkas .EXEdan .COM)CONTOH :C : \DOS>FORMAT A: /S perintah untukmemformat disket pada pemutar A sekaligusmenyalin sistem ke dalam disket tsb.Perintah ini memerlukan berkas FORMAT.COMC : \DOS>DELTREE C : \NASKAH\SOAL perintahyang digunakan untuk menghapus direktori SOALyang berada di dalam direktori NASKAH di dalamhardisk CPerintah ini memerlukan berkas DELTREE.EXE
Keuntungan Kerugian cepat akurat efisien ringkas luwes inisiatif oleh pengguna
memerlukan pelatihanyang lama membutuhkanpenggunaan yangteratur beban ingatan yangtinggi Jelek dalammenangani kesalahan
Pilihlah kata kunci yang mudah diingatGunakan format perintah yang konsistenGunakan untaian kata yang pendekTambahkan fasilitas (help)Gunakan nilai-nilai default untuk
mengurangi kesalahan ketikSediakan pesan-pesan yang jelas, dan jika
masih banyak kesalahan yang munculGunakan ragam inisiatif oleh komputer
Merupakan ragam dialog yang memungkinkanpengguna untuk mengemas sejumlah perintahkedalam suatu berkas yang sering disebut batchfile.
Perintah yang dituliskan tidak harus menggunakansalah satu bhs pemrograman baik aras rendahmaupun aras tinggi seperti assembler, Pascal, C,FORTRAN atau BASIC, tetapi tetap harus mengikutiaturan-aturan tertentu.
Pada dialog berbasis bahasa alami penggunamenggunakan instruksi-instruksi dalam bahasa alamiyang lebih umum sifatnya, pengguna dapat secarabebas memberikan instruksinya dengan kalimat-kalimat yang lebih “manusiawi”.
Contoh instruksi bahasa alami :
Cetak daftar semua mahasiswa yangmempunyai IP semester lebih besar dari3,0
Bahasa diatas kemudian diterjemahkan kedalam instruksi yang ekuivalen dengan dbaseatau foxpro, sebagai :
DISPLAY ALL FOR IPSEM > 3.0Atau dalam dialek Turbo Pascal
while not eof (T) dobegin
readln(T,S) ;if S.IpSem > 3.0 then
writeln(S.NamaMahasiswa);end;
Teknik dialog berbasis pengisian borang (formfilling dialogue) merupakan suatu penerapanlangsung dari aktifitas pengisian borang dalamkehidupan sehari-hari dimana pengguna akandihadapkan suatu bentuk borang yang ada dilayar komputer yang mereka gunakan.
Kualitas antarmuka berbasis pengisian borangtergantung 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 adadi dalam borang tersebut.
1. Proteksi tampilan, pembatasan tampilan ygtidak dapat diakses pengguna.
2. Batasan medan tampilan, penentuan panjangyang tetap atau berubah, menggunakanformat bebas atau tertentu.
3. Isi medan, petunjuk pengisian tampilan.4. Medan opsional, dinyatakan secara tekstual
atau menggunakan aturan tertentu, sepertipenggunaan warna berintensitas rendah,warna tampilan yang berbeda, dan lain-lain.
Default. tentukan tempatnya, apakah padabagian yang tidak dapat diakses penggunaataukah pada bagian pemasukan data.
Bantuan, bantuan (help) cara pengisian borang.Medan penghentian. Masukan data dapat diakhiri
dengan menekan tombol Enter atau Return ataumengisi karakter terakhir dengan karaktertertentu atau dengan cara berpindah ke medanlain.
Navigasi. menggunakan tombol Tab untuk urutanyang tetap, atau dapat pula digerakkan secarabebas menggunakan mouse.
Pembetulan kesalahan. menggunakan tombolBackSpace dengan menindihi (overwrite) isianlama, dengan jalan membersihkan dan mengisikembali medan tersebut, dan lain-lain.
Penyelesaian. memberitahu pengguna bahwaseluruh proses pengisian telah selesai.
Keuntungan Kerugian pengguna sudah terbiasadengan pengisian borang isian data yangdisederhanakan diperlukan sedikit pelatihan beban memori rendah strukturnya jelas perancangan mudah tersedia berbagai pirantibantu perancangan tampilan
seringkali lambat memakan ruang layar(khususnya untuk menudatar) tidak cocok untukpemilihan perintah/instruksi memerlukan pengontrolkursor mekanisme navigasinyatidak terlihat secara eksplisit memerlukan suatu bentukpelatihan
Adalah ragam dialog yang banyak menggunakansimbol-simbol dan tanda-tanda untukmenunjukkan suatu aktifitas tertentu.
Keuntungannya gambar bersifat umum, mudahdiingat,mudah dipelajari shg mempertinggikinerja pengguna, tidak bergantung pada suatubahasa.
Kerugian : cenderung membingungkan, borostempat, dan sangat tidak efektif, tidak adanyastandarisasi bentuk-bentuk ikon seringkalimenimbulkan persoalan tersendiri.
Jendela (window) adalah bagian dari layar yangdigunakan untuk menampilkan informasi.
Sistem penjendelaan adalah sistem antarmukayang memungkinkan pengguna untukmenampilkan berbagai informasi baik sendiri-sendiri maupun secara bersama-sama ke dalambagian-bagian layar yang tidak salingmempengaruhi.
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 dotprompt.
Time-Multiplexed Windows : jendela yang dapatdigeser (scrollable windows), dan frame-at-a-time windows. Contoh : text editor atau menutarik
Space-Multiplexed Windows : lebar layar dibagimenjadi beberapa jendela dengan ukuran yangbervariasi. Contoh : Microsoft Windows XP
Jendela non Homogen : jenis jendela yang tidakdapat dikelompokkan dalam jendela-jendeladiatas. Contoh : ikon dan zooming window
Penampilan lebih banyak informasi Pengaksesan lebih banyak sumber informasi Pengkombinasian berbagai sumber informasi Pengontrolan bebas atas sejumlah program PengingatanCommand context/active form Penyajian jamak
Ragam dialog yang menyajikan langsung suatu aktifitasoleh sistem kepada pengguna sehingga aktifitas itu akandikerjakan oleh sistem komputer ketika penggunamemberikan langsung instruksi lewat manipulasilangsung dari semacam kenyataan maya (virtual reality)yang terpampang lewat tampilan yang muncul di layar.
Penerapan manipulasi langsung :- kontrol proses
contoh : sistem pembangkitan dan penyaluranlistrik yang terhubung dengan sistem secara online- SimulatorAdalah sistem miniatur yang mencoba menirukan kerja
suatu sistem yang berskala sangat besar atau sangatkecil jika dilihat dari kacamata orang awam.
contoh : Simulator penerbangan
- Kontrol lalu lintas penerbanganDunia 3 dimensi tempat sebuah pesawat sedangmenjelajahi dunia akan diterjemahkan ke dalamlayar 2 dimensi yang ada di hadapan seorangoperator.Lewat tampilan 2 dimensi yang merefleksikandunia 3 dimensi itulah seorang operator dapatmengontrol lalu lintas penerbangan
- Perancangan berbantuan komputerAtau (Computer Aided Design)contoh : penggunaan program AutoCAD,
Keuntungan Kerugian mempunyai analogi yang jelasdengan suatu pekerjaan nyata mengurangi waktupembelajaran memberikan tantangan untukeksplorasi pekerjaan yang nyata penampilan visual yang bagus mudah dioperasikan tersedianya berbagaiperangkat bantu u/ merancangragam dialog manipulasilangsung
memerlukan program yangrumit dan berukuran besar memerlukan tampilan grafisberkinerja tinggi memerlukan piranti masukanseperti mouse, trackball memerlukan perancangantampilan dengan kualifikasitertentu
Agak susah dibedakan dengan antarmukaberbasis manipulasi langsung.
Secara umum, keuntungan dan kerugian teknikantarmuka berbasis interaksi grafis sama dengankeuntungan dan kerugian menggunakanmanipulasi langsung
Contoh : Pada Microsoft Word ketika kursormendekati suatu ikon akan muncul pesan yangmenunjukkan arti ikon tsb.
Merupakan peranti masukanTata letak papan ketik
Tombol papan ketikdikelompokkan menjadi 4 bagian :Tombol AritmatikTombol kontrolTombol numerikTombol fungsi
3
Salah satu piranti input yang paling utamauntuk berinteraksi dengan sistemkomputer adalah keyboard.
Keyboard adalah kumpulan tombol tekanon-off yang dapat digunakan secarakombinasi maupun terpisah.
Keyboard termasuk piranti masukandiskret
Piranti lain dikenal dengan pirantimasukan kontinyu seperti penlight,joystick.
4
Umumnya orang sudah familiar dengan layoutkeyboard yang disebut dengan “QWERTY”, yaitususunan huruf tombol kiri atas.
Rancangan keyboard ini pertama kali digunakanpada mesin ketik di USA tahun 1874.
Susunan tombol dipilih untuk mengurangi loncatanpenekanan tombol yang tidak sengaja pada mesinketik manual.
Misal huruf ‘s’, ‘t’, dan ‘h’ diletakkan berjauhanmeskipun sering digunakan bersama dalam kalimatbahasa Inggris.
Tombol keyboard disusun sama dengan tataletak QWERTY maupun DVORAK, tetapisusunan hurufnya berurutan seperti padaurutan alfabetik.
Di Jumpai pada mainan anak-anak
7
Tipe keyboard yang lain adalah alphabeticdan Dvorak.
Keyboard alphabetic tombol-tombol disusundalam urutan alphabet.
Tidak dapat digunakan secara lebih cepatbaik untuk pengguna awal maupun penggunayang sudah mahir.
8
Pertama dipatenkan tahun 1932.Susunan tombol huruf berdasarkan
frekuensi penggunaannya.Huruf-huruf yang umum berada dibawah
jari-jari yang dominanKombinasi huruf yang umum berganti di
antara kedua tangan.Mampu meningkatkan kecepatan
pengetikan 10 – 15 % dan mengurangikelelahan tangan.
TATA LETAK DVORAK
Menggunakan susunan papan ketik yangsama, tetapi hurufnya disusun sedemikianrupa sehingga tangan kanan dibebani lebihbanyak pekerjaan di banding tangan kiri.
11
Hanya mempunyai beberapa tombol antara 4sampai 5.
Untuk memasukkan suatu huruf harus menekanbeberapa tombol secara bersamaan.
Ukurannya kompak, sangat cocok untuk aplikasiyang portabel.
Waktu pelatihan singkat, penekanan tombo-tombol mencerminkan bentuk huruf yangdiinginkan
Kecepatannya tinggiKurang populer, karena pada pemakaian yang
lama akan menyebabkan kelelahan pada tangan.
• Sering operator mengeluh karena sakitpada sejumlah anggota badan, makasecara ergonomik muncullah Model TataLetak Klockenbert
• Keuntungan ada tombol fungsi• Mengurangi beban ingatan• Mudah dipelajari• Kecepatan yang lebih tinggi• Mengurangi kesalahan
• Peranti interaktif yang digunakan untukmenuding/menunjuk atau menempatkan kursor disuatuposisi pada layar tampilan dan untuk mengambil suatuitem informasi untuk dipindah ketempat lain.
RumusPerbandingan Kontrol Tampilan : Gerakan tangan atau responder lain
Gerakan Kursor
Digunakan sebagai peranti gambar atau pointshoot device.
Perinsip kerja dengam memantau selisihantara waktu saat elektron mulai melakukanpengaran, dan waktu pada saat lokasi tempatpena berada dinyalakan.
Merupakan peranti yang dipastikan selalu adapada sebuah sistem komputer, karena lewatlayar tampilan inilah pengguna dapat melihatapa yang ia kerjakan, dan informasi yangdiberikan oleh komputer sebagai hasil darisuatu proses komputasi.
Kreteria merancang sistem yang baik adalahtampilan yang menarik
Harus mempunyai jiwa seni
Membuat SketsaMenggunakan peranti purwarupa GUIMenulis keteranganMenggunakan peranti bantu yang disebuat
CASE
Perancangan antar muka yang melibatkanpenguna
Pengguna di ajak untuk interaktifMengerti tentang tingkat kepandaian
menggunakan aplikasi oleh penggunaAplikasi yang dibuat harus disesuaikan
dengan karakteristik pengguna
Pemilihan ragam dialog Perancangan struktur dialog Perancangan format pesan Perancangan penanganan kesalahan Perancangan struktur data
Ilusi pada objek-objek yang dapatdimanipulasi
Urutan visual dan fokus pengguna Struktur internal Kosa kata grafis yang konsisten dan sesuai Kesesuaian dengan media
Aplikasi memberikan waktu tanggapkepengguna
Waktu tanggap diangap lama jika waktutanggap mencapai 14 detik
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 mempelajarikenyamanan kerja
Aspek ergonomik dari satuan kerja Pencahayaan Kualitas udaraGangguna suara Kesehatan dan keamanan kerja Kebiasaan bekerja
Yang perlu diperhatikan dalam merancanglingkungan fisik : Keamanan Efisiensi Ruangan pengguna Ruang kerja Pencahayaan Kegaduhan Polusi
Antropomtrik adalah suatu ilmu yangberhubungan dengan pengukuran untukmemahami variasi fisik tubuh manusia
Sistem yang digunakan oleh seorangpengguna komputer, termasuk mebeler yangia gunakan. Contoh Ah.. Mengapa leher sayasakit, pegal dll
Menurut Sauter melaporkan bahwa ada duafaktor yang sangat mempengaruhi unjukkerja operator stasiun kerja adalah sudutmelihat dan papan ketik
Dari penelitian Dainoff mengatakan bahwarancangan stasiun kerja yang sesuai harusdapat menempatkan papan ketik dan tempatduduk ada ketinggian yang tepat.
Berhubungan dengan lingkungan kerja Berhubungan dengan durasi kerja Berhubungan dengan tipe pekerjaan Beban psikologi yang dihadapi pekerja