Interaksi Manusia dan Komputer Bab 4

Menu, Formulir, dan

Kotak Dialog

Organisasi Semantik Menu

Single Menu

Binary menus

Multiple selection menus

Single Menu (Lanj.)

Pull-down and pop-up menus

Single Menu (Lanj.)

Scrolling and two-dimensional menus

Single Menu (Lanj.)

Alphasliders

Embedded links

Iconic menus, toolbars, or palettes

Linear Sequences & Multiple Menus

Tree-Structured Menus

Ketika kumpulan item berkembang dan menjadi sulit dipelihara dalam kendali intelektual, perancang dapat membentuk kategori item-item yang serupa, membentuk struktur tree.

Contoh pengelompokan:

Laki-laki, perempuan

Hewan, sayuran, mineral

Fonts, size, style, spacing

Tree-Structured Menus (Lanj.)

Depth versus Breadth:

Depth: jumlah level.

Breadth: jumlah item per level.

Pengelompokan semantik:

Kelompokkan item-item yang serupa secara logis.

Bentuk kelompok yang melingkupi semua kemungkinan.

Pastikan item tidak overlap.

Gunakan peristilahan yang dikenal.

Acyclic & Cyclic Menu Networks

Kadang-kadang lebih cocok daripada struktur tree.

Memungkinkan jalur dari bagian tree yang berbeda, tidak mengharuskan pemakai memulai dari menu utama.

Secara alami terdapat pada:

Hubungan sosial.

Jalur transportasi.

Kutipan dalam jurnal ilmiah.

Membutuhkan penelusuran balik.

Urut-urutan Presentasi Item

Ketika item-item menu telah dipilih, urutan presentasinya perlu diperhatikan.

Beberapa dasar pengurutan:

Waktu (kronologis).

Numeris (menaik atau menurun).

Sifat fisik (panjang, luas, volume dsb. Secara menaik atau menurun).

Urut-urutan Presentasi Item (Lanj.)

Banyak kasus pengurutan tidak mempunyai aturan pengurutan yang berhubungan dengan tugas, sehingga perlu dipertimbangkan:

Pengurutan alfabetis istilah-istilah.

Pengelompokan item-item serupa (dibatasi dengan pemisah antarkelompok).

Yang sering digunakan ditempatkan di awal.

Yang paling penting ditempatkan di awal.

Pergerakan Cepat pada Menu

Menu dengan typeahead

Nama menu atau bookmarks

Menu macros

Menu dengan Typeahead

Penting jika menu sudah sering digunakan sementara waktu respons atau kecepatan tampil lambat.

Pendekatan BLT (Bacon, Lettuce, Tomato Sandwich): pembentukan mnemonik dari penggabungan huruf-huruf pilihan menu.

Nama Menu atau Bookmarks

Penamaan sederhana memudahkan pemakai mengakses menu secara langsung.

Web browser menyediakan bookmarks atau favorites sebagai jalan pintas bagi pemakai untuk menuju situs yang pernah dikunjungi.

Menu Macros

Perintah yang sering digunakan dapat direkam dan disimpan sebagai makro.

Pada beberapa software, makro dapat ditempatkan di toolbar sebagai ikon.

Tata Letak Menu

Judul

Penamaan pilihan menu

Tata letak dan desain grafis

Tata Letak Menu: Judul

Menu tunggal: Judul yang deskriptif.

Menu tree: Nama pilihan harus sama dengan judul halaman yang dipanggil.

Tata Letak Menu: Penamaan Pilihan Menu

Gunakan peristilahan yang dikenal dan konsisten.

Pastikan item dapat dibedakan dari pilihan lain.

Gunakan pemilihan kata yang konsisten dan singkat.

Tempatkan kata kunci di kiri.

Tata Letak Menu: Tata Letak dan Desain Grafis

Perhatikan kendala seperti lebar dan tinggi layar, kecepatan tampil, character set, dan highlighting.

Buat pedoman/panduan untuk komponen-komponen: judul, penempatan item, petunjuk, pesan kesalahan, dan laporan status.

Formulir Isian

Formulir isian cocok dipakai jika banyak field data dibutuhkan.

Pendekatan formulir isian menarik karena:

Kelengkapan penuh informasi terlihat.

Seperti formulir kertas.

Sedikit petunjuk diperlukan.

Pedoman Perancangan Formulir Isian

Judul yang berarti.

Instruksi yang dapat dipahami.

Pengelompokan dan pengurutan field yang logis.

Tata letak yang menarik secara fisual.

Label field yang dikenal.

Pedoman Perancangan Formulir Isian (Lanj.)

Ruang kosong dan batas field yang perlu diisi harus jelas terlihat.

Pergerakan kursor yang leluasa.

Koreksi kesalahan untuk karakter dan field.

Pencegahan kesalahan.

Pesan kesalahan untuk nilai yang tak dapat diterima.

Pedoman Perancangan Formulir Isian (Lanj.)

Field optional jelas ditandai, atau sebaliknya field yang wajib diisi ditandai.

Pesan penjelasan bagi field jika perlu.

Tanda selesai. Hindari penyelesaian automatis.

Beberapa Variasi Isian Field

Combo box: kombinasi list box dan text box.

Coded fields: mempunyai mask untuk format isian khusus. Mis.:

Telepon – (___)___-_____

Social Security Number – ___-__-____

Waktu – __:__ __

Tanggal – __/__/____

Nilai uang – $_____.00

Contoh

Kotak Dialog

Kotak dialog adalah kombinasi teknik menu dan formulir isian yang banyak digunakan di GUI modern.

Perlu diperhatikan:

Tata letak internal kotak dialog

Hubungan eksternal kotak dialog

Pedoman Tata Letak Internal Kotak Dialog

Judul berarti, gaya konsisten.

Pengurutan dari atas kiri ke bawah kanan.

Pengelompokan dan penegasan.

Tata letak yang konsisten.

Peristilahan, font, penggunaan huruf besar, justifikasi yang konsisten.

Tombol standar (OK, Cancel).

Pencegahan kesalahan.

Pedoman Hubungan Eksternal Kotak Dialog

Penampilan dan penutupan halus.

Dapat dibedakan tapi batasnya kecil.

Ukuran cukup kecil (minimalkan overlap).

Dekat dengan item yang sesuai.

Tidak menghalangi item yang harus dilihat.

Mudah ditutup (dibuat menghilang).

Jelas penyelesaian/pembatalannya.

Contoh Kotak Dialog

Contoh Kotak Dialog

PARADIGMA DAN PRINSIP PENGGUNAAN KOMPUTER

Pendahuluan

•Hal-hal yang harus diperhatikan:

–Bgm pengembangan suatu sistem interaktif untuk memastikan tingkat kegunaannya

–Bagaimana tingkat kegunaan dari sistem interaktif diukur

•Pendekatan:

–Paradigma untuk tingkat kegunaan

•Contoh-contoh teknik interaksi yang sukses

–Prinsip untuk tingkat kegunaan

•Teori pendorong dari aspek pengetahuan psikologi,komputasi dan sosiologi

–

Paradigma untuk tingkat kegunaan

•Time-sharing (pembagian waktu)

–Tahun 1940-50an – pertumbuhan teknologi meledak

–Komputer tunggal melayani banyak pengguna

•Video display unit

–Lebih banyak media yang lebih layak dibandingkan dengan kertas

–Komputer untuk visualisasi dan manipulasi data

•

•Perkakas pemrograman (programming toolkits)

–Perkakas pemrograman yang baik menyediakan blok pembangun untuk menghasilkan sistem interaktif yang kompleks

•Komputasi personal

–Suatu sistem lebih berdaya guna disebabkan ia lebih mudah untuk penggunanya

–Masa depan komputasi pada mesin yang kecil,berdayaguna yang didedikasikan untuk individu

•Sistem Windows dan antarmuka WIMP

–Manusia dapat mengerjakan lebih dari satu tugas dalam waktu bersamaan

–Windows digunakan untuk pemartisian dialog

–Windows,Icon,Menus dan Pointer(WIMP) sekarang merupakan mekanisme interaksi yang familiar dengan pengguna

•Metafora

–Menghubungkan komputer ke aktifitas dunia-nyata adalahteknik pembelajaran yang efektif

•Manajemen file pada aplikasi office di komputer

•Proses penulisan pada perangkat lunak pengolah kata

•Analisis keuangan pada lembar kerja

–Permasalahan

•Beberapa tugas tidak dapat memenuhi metafora yang ada karena terpengaruh oleh bias pada budaya

Prinsip untuk mendukung tingkat kegunaan

•Tingkat pembelajaran (learnability)

–Pengurangan dengan mana pengguna baru dapat memulai interaksi efektif dan mencapai kinerja maksimal

•Kelenturan (fleksibilitas)

–Pelbagai jalan yang ada dimana pengguna dan sistem bertukar informasi

•Kehandalan (robustness)

–Tingkat dukungan yang disediakan kepada pengguna dalam menentukan pecapaian sukses dan taksiran perilaku yang mengarah pada tujuan

•

• Prinsip Pembelajaran

•Pemrediksian (preditability)

–Menentukan efek dari tindakan di masa mendatang berdasarkan sejarah interaksi masa lalu

–Visibilitas operasi

•Pemaduan

–Taksiran efek dari aksi-aksi masa lalu

•Keterbiasaan (familiarity)

–Bagaiman pengetahuan sebelumnya diaplikasikan pada sistem baru

–Keterkiraan,kemampuan

•Keumuman (generalizability)

–Memperluas pengetahuan interaksi spesifik pada situasi baru

•Konsistensi

–Kesamaan dalam perilaku input/output yang timbul dari situasi atau tujuan tugas yang serupa

Prinsip Kelenturan

•Inisiatif dialog

•Multithreading (Galur Jamak)

•Customizability (kemudahan penggantian)

•

Prinsip Kehandalan

•Observabilitas

–Kemampuan pengguna untuk mengevaluasi status internal sistem dari representasi yang dirasakan

–Kemampuan melihat-lihat; default;ketergapaian;visibilitas operasi

•Recoverability

–Kemampuan pengguna untuk mengambil tindakan pembenaran sekali suatu kesalahan dikenali

•Tanggpan

–Bagaimana pengguna mempersepsikan rating komunikasi dengan sistem

–Stabilitas

•Kesesuaian tugas

–Derajat dimana pelayanan sistem mendukung semua tugas-tugas pengguna

–Kelengkapan tugas;kecukupan tugas

Komputer dalam kuliah IMK

Sistem Komputer Secara Umum

•Sistem Komputer memiliki bbrp peralatan spt ini:

–Layar atau monitor, dimana terdpt bbrp

•Windows – area-area berbeda yg berjln scr mandiri satu dgn lainnya.

–Keyboard

–Mouse

•Peralatan2 ini menentukan gaya interaksi yg didukung oleh sistem.

•Jika kita menggunakan peralatan yg berbeda,maka antarmuka akan mendukung gaya interaksi yg berbeda

Peralatan Masukan Teks

•Keyboard

–Peralatan masukan umum

–Memiliki layout yg terstandarisasi (QWERTY)

–Penyusunan tombol2 karakter QWERTY tdklah optimal utk layout pengetikan bg para penggunanya.

–Desain Keyboard yg lain mjdkan pengetikan lbh cepat tp masy sdh terlanjur berbasiskan pengetikan QWERTY shg menyebabkan keengganan untuk berubah.

•Keyboard yang lain

Alfabetik

•Tombol2 diatur berdsrkn urutan abjad

–Tdk lebih cpt buat pengetik yg telah dilatih

–Juga tdk lebih cepat buat para pengetik pemula.

–Dvorak

•Huruf yg sering dipakai ditempatkan pd jari2 yg dominan

•Condong/bias pada pemakai tangan kanan(bukan kidal)

•Kombinasi umum dr karakter berganti-ganti diantara 2 tangan

•Peningkatan kecepatan sampai 10-15% dan mengurangi kelelahan

•Chord Keyboard

–Hanya sedikit tombol yg digunakan- empat atau lima

–Huruf diketikkan sebagai kombinasi dr penekanan tombol

–Berukuran kompak – ideal utk aplikasi yg portable

–Waktu belajar yg singkat – penekanan tombol merefleksikan bentuk dr huruf yg dinginkan.

–Cepat pengetikannya

–Penolakan dr masy (terbiasa QWERTY), ditambah lg dgn kelelahan yg terjadi stlh pemakaian dlm waktu lama

•Pengenal tulisan tangan

–Teks yg ditulis dgn tangan dpt dimasukan kedlm komputer, menggunakan sebuah pena komputer dan tablet digital.

•Bentuk umum dr interaksi

–Memiliki permasalahan2 dlm

•Mendptkn semua informasi yg berguna – alur goresan, tekanan, dll, dlm perilaku yg alamiah

•Memilah penulisan gabungan k dalam huruf2 yg terpisah

•Interpretasi huruf-huruf sec individu

•Penguasaan atas gaya penulisan tangan yg berbeda

–Alat Organizer sdh ada di pasaran, yg dpt menangani teknologi pengenalan tulisan tangan dan menyingkirkan penggunaan keyboard besar yg memakan tempat.

•Pengenal Suara

–Alat yg menjanjikan,namun hanya sukses dalam situasi terbatas – pengguna tunggal, sistem kosa kata terbatas.

–Terdapat masalah dgn

•Adanya gangguan eksternal

•Ketidaktepatan pada pelafalan/cara pengucapan

•Aksen dll

•

•Mouse

–Peralatan utk memindah dan menunjuk posisi di layar. Sgt umum dan gampang digunakan

–2 karakteristik

•Pergerakan mendatar

•Adanya tombol-tombol

–Pergerakan relatif hanya jika terdeteksi

–Pergerakan mouse menggerakkan cursor di layar

–Merupakan peralatan manipulasi sec tdk langsung

•Peralatannya sendiri tdk mengaburkan/mengganggu layar,juga ia akurat dan cepat

•Dapat mengarah pd masalah koordinasi tangan-mata berkaitan dengan ketidaklangsungan manipulasi.

–

•Bgm cara kerjanya?

–2 metode utk mendeteksi pergerakan

•Mekanik – bola didalam mouse bergerak saat mouse digerakkan

•Optik – LED didalam mouse

•

Peralatan Penempatan Posisi yg Lain

•Joystick

•Trackball

•TouchScreen (Layar Sentuh)

•Light Pen (Pena Cahaya)

•Tablet Digital

•Tombol-tombol kursor

Peralatan Output

•Layar Komputer (CRT)

–Keuntungan CRT

•Murah

•Cukup cepat untuk animasi yg butuh kecepatan

•Kemampuan warna yg tinggi

•Penambahan resolusi menambahi jg harganya

–Kerugian

•Bentuknya besar sekali

•Mslh dgn ‘jaggies’, garis diagonal yg harus terpotong dlm rangka proses pemindaian horizontal raster.

•Mslh ‘jaggies’ dpt dikurangi dengan menggunakan layar beresolusi tinggi.

•Flicker

•LCD

–Lebih kecil, lebih ringan, tanpa mslh radiasi

–Pengalamatan matriks

–Tingkat kelelahan yg ditimbulkan lebih sedikit dibandingkan CRT.

–Warna dimungkinkan untuk diwujudkan

Pencetakan

•Printer Dot-Matrix

•Printer Ink-Jet

•Printer Suhu

•Printer Laser

Font

•Mengacu pada gaya teks tertentu

•Jenis-jenis Font

•Ukuran font ditentukan dalam point

Scanner dan Pengenal Karakter Optik

•Scanner

–Memindai kertas dan mengubahnya kedalam bentuk bitmap

–2 jenis scanner

•Flat-Bed

•Hand-held

•Optical Recognition Character (OCR)

–Mengkonversikan bitmap kembali kedalam bentuk teks

–

Manusia dalam kuliah IMK

Saluran Input-Output

•Pandangan(Vision)

–Penerimaan fisik dari suatu stimulus

–Pengolahan dan interpretasi dari stimulus

•Alat Fisik : Mata

•

Interpretasi Sinyal

•Ukuran kedalaman

–Sudut pandangan

–Ketajaman pandangan

•Kecemerlangan Cahaya (Brightness)

•Warna (hue,intensity,saturation)

–

Membaca

•Beberapa langkah:

–Pola visual yang terpersepsikan

–Di-decodekan menggunakan representasi internal bahasa

–Diinterpretasikan menggunakan pengetahuan dari sintaks, semantik, dan pragmatik

•Membaca melibatkan saccades dan fixations

Mendengarkan

•Menyediakan informasi mengenai lingkungan: jarak, arah,objek dll.

•Alat fisik: telinga (bagian luar, tengah, dalam)

•Sound (Suara): pitch (frek.suara), loudness (amplitudo), timbre (kualitas suara)

•Range suara : 20 Hz – 15 KHz

Sentuhan

•Indra kunci untuk orang yang memiliki kekurangan pada pandangannya

•Stimulus diterima melalui kulit:

–Thermoreceptors – panas dan dingin

–Nociceptor – sakit

–Mechanoreceptors - tekanan

Gerakan

•Waktu yang diperlukan untuk menanggapi stimulus:waktu reaksi+waktu gerak

•Waktu gerak: tergantung pada usia,kebugaran dll

•Waktu reaksi: tergantung pada jenis stimulus:

–Visual – 200 ms

–Auditory – 150 ms

–Pain – 700 ms

–

Memory

•Memori jangka pendek

•Memori jangka panjang

Teori dan Interaksi Manusia dan Komputer

•Tidak ada teori umum dan terpadu mengenainya

•Tiga kata yang digunakan untuk mendapatkan keberhasilan:

– -Useful (berguna), dapat menyelesaikan apa yang dibutuhkan: memainkan musik, memasaka makanan, memformat makanan

– -Usable (dapat digunakan), dapat dikerjakan dengan muda dan alamiah, tanpa adanya bahaya kesalahan, dll

– -Used (digunakan), membuat orang yang menggunakannya, menarik, perlu untuk digunakan, menyenangkan, dll

•IMK membutuhkan baik ketrampilan dan juga ilmu pengetahuan untuk mencapai keberhasilannya.

Fokus Desain

•Tak ada yang namanya proses sekali jadi!

– -Berpikirlah seperti “pengguna”

– -Cobalah itu lebih dulu

– -Libatkanlah pengguna

– -Iterasilah proses-proses ini