Post on 20-Jul-2015
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 1/34
PENGENALAN
• Interaksi manusia-komputer ( Human-Computer Interaction-HCI) merupakan satu
disiplin ilmu yang mengkaji tentang komunikasi atau interaksi di antara pengguna
dengan sistem.
• User friendly
• WYSIWYG (what you see is what you get)
• Aspek penting dalam IMK:
- manusia
- komputer
- lingkungan kerja (aspek ergonomik).• Sistem: Diantara produk-produk yang digunakan oleh pengguna seperti kendaraan,
peralatan rumah dan sebagainya.
• Peranan utama HCI adalah untuk menghasilkan sebuah sistem yang baik di gunakan
(usable) , mudah, berkesan dan efektif.
Model interaksi manusia-komputer
• Model interaksi di antara pengguna dengan sistem melibatkan tiga komponen:
1. Pengguna
2. Interaksi
3. Sistem.
TIK Unindra Mufti
Pengguna SistemInteraksi
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 2/34
• Kunci utama dalam HCI adalah baik untuk di gunakan (usability): sistem harus
mudah digunakan, memberi kenyamanan kepada pengguna, mudah dipelajari dan
sebagainya.
ANTARAMUKA PENGGUNA
• Antaramuka pengguna merupakan bagian sistem yang akan dikendalikan oleh
pengguna, untuk mencapai dan melaksanakan fungsi-fungsi suatu sistem.
• Ia juga dianggap sebagai jumlah keseluruhan keputusan rekabentuk.
• Antaramuka juga secara tidak langsung, menunjukkan kepada pengguna tentang
kefungsian sistem.• Antaramuka bagi sesuatu sistem menggabungkan elemen-elemen daripada sistem,
elemen-elemen daripada pengguna dan juga kaedah komunikasi atau interaksi di
antara kedua-duanya.
• Pengguna hanya boleh berinteraksi dengan produk tersebut melalui antaramuka
pengguna.
• Sebuah sistem antaramuka pengguna meliputi:
1. Peranti input (seperti keyboard, mouse dan layar sentuh)2. Peranti output (seperti monitor, speaker dan printer), input
daripada pengguna (seperti panah pada keyboard dan pergerakan mouse) dan
output yang dikeluar oleh komputer (seperti grafik, bunyi dan hasil cetak).
• Antaramuka pengguna perlu direkabentuk supaya ia lebih mudah dan jelas.
- Penggunaan komputer pada masa sekarang tidak lagi kepada golongan yang
terlibat dalam bidang komputer saja.- Komputer telah menjadi salah satu kebutuhan penting dan digunakan oleh
pengguna-pengguna pada bagian tertentu.
- Kita tidak boleh menganggap bahawa semua pengguna mahir menggunakan
komputer.
• Rekabentuk dan pembangunan antaramuka pengguna perlu dilihat sebagai salah satu
proses utama dalam keseluruhan pembangunan sistem.
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 3/34
• Rekabentuk antaramuka pengguna merupakan satu proses yang kompleks.
memerlukan daya kreativitas yang tinggi, pengalaman, analisa terrinci dan
kefahaman terhadap keperluan pengguna.
Bidang ilmu yang berhubungan dengan IMK:
Teknik Elektronika dan Ilmu Komputer
Psikologi
Desain Grafis
Ergonomik (lingkungan kerja)
Antropologi (ilmu pengetahuan tentang manusia)
Linguistik (Komunikasi)
Sosiologi (Otomatisasi System)
Perangkat Bantu Pengembangan Sistem
- Pemrograman visual
Keuntungan:
Interface yg dihasilkan lebih baik.
- Hasil rancangan sementara
- Modifikasi
- Aplikasi memiliki lebih dari satu interface
- Tampilan menarik
- Gabungan kontribusi dari ahli.
Program interface mudah di tulis dan ekonomis dalam pemeliharaan.
- Program interface terstruktur
- Dapat digunakan kembali
- Kehandalan
Strategi Pengembangan Interface
Mekanisme fungsi manusia
Kelebihan Isi program aplikasi
Prototype Interface
Otomatisasi System
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 4/34
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 5/34
Faktor Manusia
Sistem Komputer
Perangkat Keras (hardware)
Perangkat Lunak (software)
Manusia (brainware)
Manusia Panca Indra
o Mata
o Telinga
o Hidung Pengolahan Informasi
o Lidah
o Kulit
o Penglihatan
- Layar monitor: Dua Dimensi Tiga
Dimensi
- Pencahayaan
- Kontras
- Kecerahan
- Warna
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 6/34
o Penggunaan Warna (Aspek Psikologis)
- Hindari warna-warna tajam (cyan, biru & merah)
- Hindari warna biru murni untuk teks, garis tipis.
- Hindari warna mirif pada sisi berdekatan.
- Usia pengamat disesuaikan (pengamat lebih tua
menggunakan warna lebih tajam).
- Sesuaikan dengan cahaya sekitar.
- Warna berlawanan dapat digunakan bersama-
sama.
- Untuk pengamat kurang dalam penglihatan
warna hindari perubahan warna tunggal.
o Pendengaran
- Digital signal processing (DSP) Suara digital
- H/W untuk interaktif Multimedia
- Frekuensi suara 20 Hertz – 20 KHertz
o Sentuhan
Keyboard Adanya sensasi sentuhan
Mouse
Dan lainnya
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 7/34
o Pemodelan sistem pengolahan
- pada manusia
-
pada computer
- Pengolahan sadar (conscious processing )
Tindakan baru/jarang dilakukan.
- Pengolahan otomatis
Reflek (tindakan yang sering dilakukan).
TIK Unindra Mufti
Pengolahan
otomatis
Pengolahan
sadar
Antar muka
Umpan balik
Manusia
Perseptual Perseptual
Intelektual
Kontrol Motorik
Memori
Intelektual
Kontrol Motorik
Responder Sensor
Peranti keluaran Peranti masukkan
Pengontrol keluaran Pengontrol masukan
Prosesor
Memori
Komputer
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 8/34
- Register sensor
Organ sensor:
- mata, telinga & lainnya
-
-
o
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 9/34
Kisi-kisi Hermann
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 10/34
Ragam Dialog (dialoque style)
Cara yg digunakan untuk mengorganisasikan berbagai
teknik dialog.Diantaranya:- sistem menu- dialog berbasis pengisian borang- kursor yg bergerak- pelacakan simbol- ikon- jendela
- penggulung teks- dan lain-lain.
Ragam dialog interaktif
Dikelompokkan menjadi 9 kategori:∗ Dialog berbasis perintah tunggal
(command line dialogue)∗ Dialog berbasis bahasa pemrograman(command language dialogue)
∗ Antarmuka berbasis bahasa alami(natural language interface)
∗ Sistem menu∗ Dialog berbasis pengisian borang
(form filling dialogue)
∗ Antar muka berbasis ikon(icon-based user interface)∗ Sistem penjendelaan
(windowing system)∗ Manipulasi langsung∗ Antarmuka berbasis interaksi grafis
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 11/34
Sifat penting yg perlu dimiliki setiap ragam dilog:- Inisiatif - Keluwesan-
Kompleksitas- Kekuatan, dan- Beban informasi
Karakteristik ragam dialog:- Konsistensi- Umpan balik- Observabilitas
- Kontrolabilitas- Efisiensi, dan- Keseimbangan
- Inisiatif o Inisiatif oleh komputer:
Pengguna memberikan tanggapan atas prompt ygdiberikan oleh komputer untuk memasukkan perintah
atau parameter perintah.o Inisiatif oleh pengguna
Pengguna memahami sekumpulan perintah yg harusditulis menurut aturan (sintaksis)
- KeluwesanFleksibel Interface Customimizing
- KompleksitasTerstruktur Menggunakan struktur pohon perintah(tree)
- KekuatanKetersediaan perintah-perintah yg powerfull.
- Beban informasiPenyajian informasi disesuaikan dengan aras pengguna
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 12/34
- Konsistensio Perintah-perintah mempunyai sintaksis ygterstandarisasio Urutan parameter memiliki tata letak yg konsisteno Format inputan data kompatibel & konsistendenganformat tampilan data
- Umpan balikMemberikan keterangan kepada pengguna pada saat
sistem sedang melakukan suatu proses
- ObservabilitasBerfungsi secara benar dan nampak sederhana,meskipun sesungguhnya pengolahan internalnya sangatrumit.
- Kontrolabilitas
Kebalikan dari observabilitas, yaituSistem selalu berada di bawah kontrol pengguna Antarmuka harus memiliki sarana agar pengguna dapatmenentukan:o dimana sebelumnya ia beradao dimana ia sekarang beradao kemana ia dapat pergio apakah pekerjaan yg sudah dilakukan dapat
dibatalkan
- EfisiensiWaktu, biaya dan tenaga
- KeseimbanganPembagian tugas & struktur dialog antara manusia danmesin
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 13/34
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 14/34
∗Dialog berbasis perintah tunggal(command line dialogue)Contoh:
- DOS commandinternal commandC:\>DIRC:\>COPYeksternal commandC:\DOS>FORMAT A: /SC:\DOS>DELTREE C:\NASKAH\SOAL
- Unix/Linux command
ls, who, passwd, dllPerintah DOS lebih alamiah dibanding Unix/LinuxKeuntungan & kerugian dialog berbasis perintah tunggalKeuntungan Kerugian
- Cepat- Efisien- Akurat- Ringkas- Luwes- Inisiatif oleh pengguna- Appealing (menarik)
- Pelatihan lama- Membutuhkan
penggunaan yg teratur - Beban ingatan tinggi
- Jelek dalammenangani kesalahan
Saran untuk meminimalkan beban ingatan & kesalahanpengetikan:- Pilih kata kunci yg mudah diingat
- Gunakan format perintah yg konsisten- Gunakan untaian kata yg pendek- Tambahkan fasilitas bantuan (help)- Gunakan nilai-nilai default untuk mengurangi
kesalahan ketik- Sediakan pesan-pesan yg jelas- Gunakan ragam inisiatif oleh komputer
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 15/34
∗ Dialog berbasis bahasa pemrograman(command language dialogue)- Harus mengikuti aturan-aturan tertentu (syntax )
- Dapat menggabungkan perintah tunggalContoh: dengan autoexec.bat pada DOS@ECHO OFFPROMPT $P$GPATH C:\WINDOWS; C:\DOSSET TEMP=C:\DOSC:\WINDOWS\MODE 80C:\WINDOWS\MSCDEX.EXE /S /D:MSCD001
C:\WINDOWS\WIN.EXETidak perlu mengetikan satu persatu, hanyaC:\>Autoexec.bat↵
∗ Antarmuka berbasis bahasa alami(natural language interface)- Memerlukan penterjemah agar dimengerti manusia- Penterjemah berupa suatu program komputer
Contoh instruksi bahasa alami:
Keuntungan Kerugian
- Tidak memerlukansintaksis khusus
- Luwes dan powerfull- Alamiah- Merupakan inisiatif
campuran
- Mempunyai dualismedalam pemrograman
- Tidak simpel- Bertele-tele- Perancangan rumit- Tidak efisien
TIK Unindra Mufti
Cetak daftar semua mahasiswa yang mempunyai
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 16/34
∗ Sistem menuMenu daftar sejumlah pilihan dlm jumlah terbatas
berupa kalimat/kumpulan beberapa kata.
- Sistem menu datar - Sistem menu tarik ( pulldown)
- Sistem menu datar o Menampilkan semua pilihan secara lengkapo Ditampilkan secara lengkap (menggunakankalimat-kalimat yg cukup panjang)
Penentuan pilihan menggunakan:
o Selector o Tanda terang (highlight marker ) &dikonfirmasikan dengan menekan tombol Enter
o Selector Berupa angka, huruf, kombinasi huruf&angka
Angka pilihan <= 10 buahHuruf pilihan <= 26 buahHuruf&angka pilihan > 26 buahContoh:
SISTEM INFORMASI AKADEMIK
UNINDRA PGRI
DAFTAR MENU
<A><B><C><D><E><F>
Inisialisasi Berkas MahasiswaInisialisasi Berkas Mata KuliahInisialisasi Berkas Nilai UjianIsi/Ubah MahasiswaIsi/Ubah Mata KuliahIsi/Ubah Nilai Ujian
<G><H><I><J><K><L>
Hitung IP SemesterCetak KRSCetak Nilai UjianCetak KHSCetak Data MahasiswaCetak Transkrip
Pilih salah satu: _ <Q> Selesai
MENU DATAR DENGANSELEKTOR HURUF
KOMPATIBEL
B. Baca DataC. Cetak LaporanD. Data BaruE. Edit DataH. Hapus Data
Pilih salah satu: _
MENU DATAR DENGANSELEKTOR HURUF
TIDAK KOMPATIBEL
A. Baca DataB. Cetak LaporanC. Data BaruD. Edit DataE. Hapus Data
Pilih salah satu: _
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 17/34
- Selector huruf kompatibel: Huruf yg sama dghuruf pertama dari suatu pilihan- Selector angka kompatibel: Angka yg samaurutannya dg urutan alphabetis huruf pertamasuatu pilihan- Mudah diingat oleh pengguna
o Tanda terang (highlight marker )- Menggunakan bantuan tombol khususseperti:←, ↑, →, atau ↓atau- Menggunakan bantuan mouse
Untuk pemrogram berpengalaman menggunakankeduanya agar semua aras pengguna dapat memakai.
- Sistem menu tarik ( pulldown/pop-up menu)Menampilkan pilihan dalam kelompok-kelompoktertentu
Alasan menggunakan Cacah pilihan cukup banyak Masing-masing kalimat cukup panjang Menampilkan daftar pilihan cukup besar sehingga
penggunaan seluruh layer Struktur Pulldown menu
Dikelompokkan menurut kategori tertentu Hirarki tertinggi menu utama
Dalam menu utama submenu Dalam submenu sub-submenuContoh: Pada S/W Aplikasi sekarang (Windows, Office, dll)Status Keadaan menu aktif/terlihat dapat dipilih oleh
pengguna Menu tidak aktif(berwarna lain)/disembunyikan
tidak dapat dipilihShortcut
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 18/34
Cara pemilihan menu lebih cepat dibandingkan dgcara yg biasa digunakan.
Menggunakan tombol-tombol khusus Ditentukan pemrogram Kombinasi pemakaian mouse dan keyboard
Keuntungan Sistem Menu:- Memerlukan sedikit pengetikan- Beban memori rendah- Strukturnya teridentifikasikan dg baik- Perancangan yg mudah- Tersedia peranti bantu dlm perancangan
Kerugian Sistem Menu:- Seringkali lambat- Memakan ruang layar (khususnya menu datar)- Tidak cocok untuk aktifitas input data
∗ Dialog berbasis pengisian borang (formulir)(form filling dialogue)-
Penerapan langsung pada layar komputer seperti padaformat aktifitas pengisian borang sehari-hari- Terdapat isian (requirement ), sejumlah option, nilai-
nilai parameter yg telah ditentukan.Contoh:- KTP, SIM, KRS, dll
Aspek yg menentukan kualitas antarmuka:- Tampilan layar yg diperlukan sistem-
Penyajian secara visual- Kebenaran&kehandalan data masukan oleh program- Semua informasi secara serentak ditampilkanHal yg perlu diperhatikan:- Proteksi tampilan →Pembatasan pengguna- Batasan medan tampilan → panjang tetap/berubah,
bebas/tertentu- Isi medan → pengguna memiliki gambaran, petunjuk
pengisian di tampilkan pada layar - Medan opsional → isian opsional, penggunaan warna
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 19/34
- Default→nilai standar untuk isian- Bantuan (help) →petunjuk pengisian- Medan penghentian → mengakhiri isian dg Enter
(return)/berpindah ke medan lain- Navigasi→menggunakan tab/mouse untuk berpindah- Pembetulan kesalahan→ tombol Backspace,
tumpang-tindih isian lama, dll- Penyelesaian→ pemberitahuan semua isian selesai
(konfirmasi)Komponen tampilan- Text field, list box, check box, dll
Keuntungan:- Pengguna terbiasa dg pengisian borang- Isian data yg disederhanakan- Sedikit pelatihan- Beban memori rendah- Struktur jelas- Tersedia s/w bantu perancangan tampilan (s/w visual)Kerugian:
- Sering lambat- Memakan ruang layar (khususnya menu datar)- Memerlukan pengontrol kursor - Navigasi tdk terlihat secara eksplisit
∗ Antar muka berbasis ikon(icon-based user interface)- Pendapat→gambar bernilai lebih dari 1000 buah kata- Manusia lebih mudah mengingat gambar - Gambar memiliki sifat alamiah- Makna sesuai dengan gambar ikon
Contoh:- Windows, dll
∗ Sistem penjendelaan(windowing system)
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 20/34
- Kemudahan instalasi ( plug&play )- Informasi dlm bentuk teks & grafis- Bekerja dengan banyak tugas & informasi dalam
beberapa jendela sekaligus- Pengendalian secara bebasJenis-jenis jendela:- Windows hanya menampilkan Page Scrolling
Contoh: DOS, bila baris perintah lebih dari 1 halaman- Time-Multiplexed Windows
Tampilan windows secara bergantian pd waktu ygberlainanContoh:Editor teks, (Word Star, Sidekick, dll)
- Space-Multiplexed Windows Tampilan dibagi menjadi beberapa window secaravertikal/horizontal dg ukuran masing-masing sama, bilaukuran satu jendela diubah, yg lain ikut berubah.Contoh:Lotus 123, WP Versi DOS, dll
∗ Manipulasi langsung(Direct manipulation)Contoh:Games, Spreadsheet, dll
∗ Antarmuka berbasis interaksi grafisContoh:
Hmpir mirip manipulasi langsungToolstip dari toolsbar, hypertext pada online help, dll
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 21/34
Perancangan Tampilan (Screen Design)
Perancang tampilan:
- Harus memiliki jiwa seni- Mengerti selera pengguna secara umum
- Meyakinkan Pemrogram (terdapat piranti Bantu/tools) dalam
implementasi.
- Dokumentasi rancangan (dapat merubah rancangan)
Dokumentasi rancangan, diantaranya:
- Membuat sketsa pada kertas
- Menggunakan piranti prototype
- Penjelasan keterkaitan jendela satu dg yg lain
- Menggunakan peranti bantu
Program aplikasi, dua kategori:
- Keperluan khusus (special purpose software)
- Bersifat umum (general purpose software)
- Keperluan khusus (special purpose software)
Diantaranya: aplikasi inventori(gudang), akademik,
penggajian karyawan, dll.
Pendekatan dg cara:
o user-centered design
design oleh perancang antarmuka
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 22/34
perancangan antarmuka melibatkan
pengguna
penjelasan kelebihan & kekuarangan
antarmuka
o user design approach
pengguna yg merancang antarmuka
mempercepat implementasi, tapi
memberatkan pemrogram
- Bersifat umum ( public softaware)
o Digunakan oleh berbagai pengguna
o Memaksa pengguna dg antarmuka yg ada
o Luwes (costumization) sesuai selera pengguna
o Contoh: pada Windows terdapat default, setting
desktop, tampilan windows, dll
Prinsip & Petunjuk Perancangan:
Antarmuka pengguna, secara alamiah:
- Model pengguna→ model konseptual yg diinginkan
pengguna dalam manipulasi informasi & proses
- Bahasa perintah (command language)
Bahasa perintah alami→mudah dipahami pengguna
- Umpan balik
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 23/34
Kemampuan program membantu pengguna untuk
mengoprasikan program itu sendiri
Diantaranya:
∗ Pesan-pesan penjelasan
∗ Pesan penerimaan perintah
∗ Indikasi obyek terpilih
∗ Penampilan karakter yg diketikkan
- Penampilan informasi
Memberikan informasi yg seefektif mungkin ketika
pengguna melakukan tindakan
Urutan Perancangan (stepwise refinement ):
- Pemilihan ragam dialog
Disesuaikan dengan karakteristik populasi pengguna
(pemula, menengah & ahli)
- Perancangan struktur dialog
Melakukan analisis tugas & menentukan model
pengguna dari tugas tersebut
Banyak melibatkan pengguna
Pengguna mendapat umpanbalik berupa informasi,
prototype dari dialog
- Perancangan format pesan
Tata letak tampilan & keterangan tekstual secara
terinci
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 24/34
Efektif & efisien
- Perancangan penanganan kesalahan
Bentuk-bentuk penanganan kesalahan:
Validasi pemasukkan data (mekanisme inputan)
Proteksi pengguna (peringatan karena tindakan tdk di
sengaja) contoh: penghapusan berkas
Pemulihan dari kesalahan (tersedia mekanisme
pembatalan tindakan yg baru dilakukan)
Penampilan pesan salah yg tepat.
- Perancangan struktur data
Struktur data untuk dialog berbasis grafis lebih sulit
dari tekstual
Keinginan pengguna & model sistem yg telah
dirancang cocok satu sama lain
Perancangan Tampilan Berbasis Teks
6 Faktor yg harus dipertimbangkan untuk antarmuka
berbasis teks:
o Urutan penyajian
Disesuaikan dengan model pengguna
(atau kesepakatan dg pengguna bila tidak ada model
pengguna)
o Kelonggaran (Spaceciousness)
o Pengelompokkan
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 25/34
Data terkait dikelompokkan agar mudah penstrukturan
layar tampilan
o Relevansi
Tampilkan hanya pesan sesuai topik yg sedang
ditampilkan
o Konsistensi
Ruang tampilan tidak berubah-ubah
o Kesederhanaan
Penyajian aras informasi dipahami dg cepat oleh
pengguna
Perancangan Tampilan Berbasis Grafis
Contoh:
MS Windows
- Pengguna tidak harus mengingat perintah-perintah
- Penggunaan borang property
- Kemampuan WYSIWYG menjadi sangat terkenal
- Kelengkapan perintah-perintah umum (delete, move, dll)
Kendala penerapan:o Waktu tanggap
o Kecepatan penampilan
5 Faktor yg perlu diperhatikan untuk merancang antarmuka
grafis:
- Ilusi pd obyek yg dapat dimanipulasi
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 26/34
o Obyek disesuaikan dg aplikasi yg akan dibuat
o Penampilan obyek-obyek demengerti pengguna
o Mekanisme yg konsisten untuk memanipulasi
obyek yg akan muncul dilayar
- Urutan visual & fokus pengguna
Visualisasi yg menarik perhatian pengguna, dengan
warna atau animasi.
- Struktur internal
Refeal code (tanda khusus) untuk perbedaan font style
pada tampilan
- Kosa kata grafis yg konsisten & sesuai
Simbol-simbol obyek, atau icon tdk memiliki standard,
tapi disesuaikan dg kreatfitas perancang
Contoh: menyatakan aktifitas penyimpanan data
- Kesesuaian dengan media
Tampilan grafis pada Monitor CGA tidak secantik VGA
Karakteristik khusus dari tampilan memiliki pengaruh
besar terhadap wajah antarmuka yg indah
Waktu Tanggap
- Mempengaruhi konsentrasi pengguna, sehingga
- Mempengaruhi kinerja pengguna
- Waktu tanggap yg lama mengalihkan perhatian
pengguna terpecah ke aktifitas lain.
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 27/34
- Waktu tanggap cepat/dalam beberapa detik baik untuk
kinerja pengguna
Penanganan Kesalahan
- Kata bijak ”berbuat salah adalah manusiawi”
- Dalam dunia komputer kesalahan kecil berakibat fatal
- Upaya untuk menghindari kesalahan pengguna yg
mengakibatkan terhentinya eksekusi program
Kesalahan:
- Kesalahan pd saat implementasi program
Contoh: sintaksis program (compile-time error )
Untuk pembagian bilangan integer dalam Pascal
C := A / B; (type mismatch)
seharusnya C := A div B;
- Kesalahan logika oleh:
o Pengguna memasukkan data yg tidak sah
o Proses eksekusi
Contoh:
- Program membaca data dari berkas, tetapi
berkas tidak ada.
- Pembagian denga nol
- Kekurangan memori pada saat program
dijalankan
- dll
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 28/34
Penanganan kesalahan harus tepat, biasanya dengan
- Membuat modul perangkap kesalahan (error trapping )
- Memberi pesan umpan balik kepada pengguna
Contoh dlm Pascal:
writeln(’Pembagian dengan nol tidak diijinkan’)
- Robustness (Kesempurnaan struktur program)
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 29/34
Peranti Bantu Sederhana
- Dokumentasi wajah antarmuka
- Lembar kerja tampilan/LKT (screen design work sheet )berupa kertas kosong
Contoh gambar LKT:
• Nomor lembar kerja
• Tampilan: berisi sketsa tampilan yg akan muncul
di layar • Navigator menjelaskan:
-Kapan tampilan akan muncul
- Kapan tampilan berubah menjadi tampilan lain
• Keterangan: Penjelasan singkat atribut tampilan
yg akan dipakai
TIK Unindra Mufti
No.:
Tampilan Navigasi:
Keterangan:
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 30/34
Contoh Perancangan Tampilan (LKT)
TIK Unindra Mufti
No. sheet: 5
Nama :
Alamat :
Kota :
Tgl. Lahir :
Jenis kelamin: Laki-laki Perempuan
Pendidikan: SD Sarjana (S1)
SLTP Master (S2)
SLTA Doctor (S3)
Navigasi:Klik Selesai,
ganti tampilandg no. 1
Klik Simpan,aktifkanpenyimpanberkas dan
kosongkanborang
Klik Batal,kosongkanborang
Keterangan: Judul jendela pakai arial, 12 point. Teks pakai arial, 10 pint, hitam.Medan data arial, 10 point, miring Teks push button arial, 12 point
PENGISIAN DATA PRIBADI
SIMPAN BATAL SELESAI
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 31/34
Jaring Semantik Tampilan(screen semantic net )
- Bagan alur navigasi-navigasi dari tampilan
- Terdiri dari dua komponen:
o Nomor tampilan (lembar kerja)
o Transisi masing-masing perpindahan tampilan
- Notasi: Lingkaran & Tanda panah
Contoh:
TIK Unindra Mufti
Loop
T1
T5
T7
T4
T6
T3
T2
E s c
A l t - S
S e
l e s a
i
Esc
Alt-Q
Exit
Exit
Exit
Alt-X
Esc
Cetak
A l t - E
S i m
p
a n
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 32/34
Peralatan Interaksi
S/W yang lengkap canggih harus didukung
peralatan (H/W) yang dibutuhkan
oPeralatan masukkan (Input device)
oPeralatan Keluaran (Output device)
I/O device dikelompokkan menjadi:
o Text entry (peralatan masukkan tekstual)
o Pointing & picking device (peralatan
penuding & pengambil)
o Screen (layar tampilan)
o Text entry (peralatan masukkan tekstual)
Lebih dikenal dengan Keyboard
Layout dikelompokkan 4 bagian:
1. Tombol fungsi (function key)
2. Alphanumerik
3. Tombol kontrol
4. Tombol numerik
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 33/34
contoh:
- QWERTY Keyboard (Scholes, Glidden &
Soule – 1878)
Ketukkan:
52% QWERTYUIOP
32% ASDFGHJKL;’
16% ZXCVBNM,./Penggunaan tangan:
lebih banyak tangan kiri (missal: sadar, teras,
dll)
- DVORAK Keyboard
Ketukkan:
22% ‘,.PYFGCRL?
70% AOEUIDHTNS-
8% ;QJKXBMWVZ
- CHORD Keyboard
o Pointing & picking device (peralatan
penuding & pengambil)
o Screen (layar tampilan)
TIK Unindra Mufti
5/17/2018 Diktat IMK - slidepdf.com
http://slidepdf.com/reader/full/diktat-imk 34/34
TIK Unindra Mufti