elearning of exercise

1

Antarmuka Berbasis Menu

BAB VI

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

5

Menu Biner Menu biner digunakan untuk memilih

salah satu dari dua pilihan yangtersedia

Contoh:

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.

11

Menu Tarik (2)

Minggu 4/PIS/TKI 12

Menu Berbasis Ikondan Toolbar Pada menu berbasis ikon dan toolbar,

pilihan dinyatakan sebagai suatu ikonatau toolbar tertentu.

Contoh:

13

Variasi LainMenu gulung Kotak kombo

Menu mata ikan

Penggeser Menu dua dimensi

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.

15

Menu Tertanam & Hotlink (2)

Contoh:

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.

Minggu 4/PIS/TKI 18


Contoh menu serempak:

19


Menu berstruktur pohon dan jaring:






are needed to see this picture.Pohon

Jaring takberputar

Jaringberputar

Minggu 4/PIS/TKI 20


Peta situs: digunakan untuk membantupengguna mengetahui secara keseluruhanruang informasi yang tersedia

www.ebay.com

CARA MENGORGANISIRPILIHAN

Pengelompokan berbasis tugas padastruktur pohon

21

Thanks

22

1

Antarmuka Berbasis Menu

BAB VI Lanjutan …

2


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



Minggu 4/PIS/TKI 3


Contoh menu serempak:

4


Menu berstruktur pohon dan jaring:






are needed to see this picture.Pohon

Jaring takberputar

Jaringberputar

Minggu 4/PIS/TKI 5


Peta situs: digunakan untuk membantupengguna mengetahui secara keseluruhanruang informasi yang tersedia

www.ebay.com

CARA MENGORGANISIRPILIHAN

Pengelompokan berbasis tugas padastruktur pohon

6

Thanks

7

DIALOG BERBASIS TEKS

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.

5

2 3 4 5 6 7 8 9 0Q W E R T Y U I1

O PS D F H J LA G K

Z X C V B N M , .SPACE

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.

9

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.

12

• Sering operator mengeluh karena sakitpada sejumlah anggota badan, makasecara ergonomik muncullah Model TataLetak Klockenbert

• Sering digunakan di kalkulator

• 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

16

17

18

19

20

21

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.

Mendeteksi ada atau tidaknya sentuhantangan atau stylus langsung ke layarkomputer.

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

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

Kesalahan dalam penulisan program Kesalahan logika program

Lembar Kerja Tampilan dibagi menjadi empatbagian 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 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

elearning of exercise

Education