34
 PENGENALAN Interaksi manusia-komputer (  Huma n-Computer In teraction-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  - lin gk un ga n ke rja (as pe k er go nom ik). Sistem: Diantara produk-produk yang digunakan oleh pengguna seperti kendaraan,  peralatan rumah dan se bagainya . 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 Sistem Interaksi

Diktat IMK

Embed Size (px)

Citation preview

Page 1: Diktat IMK

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

Page 2: Diktat IMK

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

Page 3: Diktat IMK

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

Page 4: Diktat IMK

5/17/2018 Diktat IMK - slidepdf.com

http://slidepdf.com/reader/full/diktat-imk 4/34

 

TIK Unindra Mufti

Page 5: Diktat IMK

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

Page 6: Diktat IMK

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

Page 7: Diktat IMK

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

Page 8: Diktat IMK

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

Page 9: Diktat IMK

5/17/2018 Diktat IMK - slidepdf.com

http://slidepdf.com/reader/full/diktat-imk 9/34

 

Kisi-kisi Hermann

TIK Unindra Mufti

Page 10: Diktat IMK

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

Page 11: Diktat IMK

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

Page 12: Diktat IMK

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

Page 13: Diktat IMK

5/17/2018 Diktat IMK - slidepdf.com

http://slidepdf.com/reader/full/diktat-imk 13/34

 

TIK Unindra Mufti

Page 14: Diktat IMK

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

Page 15: Diktat IMK

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

Page 16: Diktat IMK

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

Page 17: Diktat IMK

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

Page 18: Diktat IMK

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

Page 19: Diktat IMK

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

Page 20: Diktat IMK

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

Page 21: Diktat IMK

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

Page 22: Diktat IMK

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

Page 23: Diktat IMK

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

Page 24: Diktat IMK

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

Page 25: Diktat IMK

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

Page 26: Diktat IMK

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

Page 27: Diktat IMK

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

Page 28: Diktat IMK

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

Page 29: Diktat IMK

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:

Page 30: Diktat IMK

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

Page 31: Diktat IMK

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    

Page 32: Diktat IMK

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

Page 33: Diktat IMK

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

Page 34: Diktat IMK

5/17/2018 Diktat IMK - slidepdf.com

http://slidepdf.com/reader/full/diktat-imk 34/34

 

TIK Unindra Mufti