Interaksi manusia dan computer

1. Pesan Sistem, Perancangan Layar, dan Warna

2. Strategi Multiple Window

3. Computer Supported Cooperative Work

4. Alat Bantu Eksplorasi Informasi

5. Manual tercetak, petunjuk online dan tutorial

6. Perancangan iteratif, pengujian dan evaluasi

7. Lingkungan Pengembangan Antarmuka Pemakai

Pesan Sistem, Perancangan Layar dan Warna

1. Pesan Kesalahan

Lima dasar untuk mempersiapkan pesan sistem yang baik :

1. Ketertentuan (Specify)

Pesan yang terlalu umum mempersulit pemula untuk mengetahui apa yang salah

Pesan yang tampak memarahi membuat frustasi karena tidak menyediakan informasi

tentang apa yang keliru atau bagaimana cara memperbaikinya.

Buruk :

SYNTAX ERROR

ILLEGAL ENTRY

INVALID DATA

BAD FILE NAME

2. Panduan konstruktif dan nada positif

Daripada memarahi pemakai, jika mungkin pesan harus menunjukkan apa yang harus

dilakukan pemakai untuk memperbaiki keadaan – Pesan yang bermusuhan

menggunakan istilah yang kejam dapat mengganggu pemakai nonteknis, misal FATAL

ERROR – Hindari kata-kata negatif seperti : ILLEGAL, ERROR, INVALID, BAD

Buruk : DISASTROUS STRING OVERFLOW, JOB ABONDONED

Baik : String space consummed. Revise program to use shorter stringsor

expand string space

Buruk : UNDEFINED LABELS

Baik : Define statement labels before use

Buruk : ILLEGAL STA. WRN.

Baik : RETURN statement cannot be used in a FUNCTION subprogram

3. Pemilihan kata berpusat pemakai

Menunjukkan bahwa pemakai mengendalikan sistem

Hindari bentuk perintah ENTER DATA, fokuskan pada kendali pemakai (READY)

Pemakai harus mempunyai kendali atas sejumlah informasi yang ditampilkan

Buruk :

“Illegal telephone number. Call aborted. Error number 8892. Consult your user

manual for further information.”

Baik :

“we’re sorry, but we were unable to complete your call as dialed. Please hang up,

check your number, or consult the operator for assistance “

4. Format fisik yg sesuai

Gunakan kombinasi huruf besar dan kecil. Pesan dengan huruf besar semua hanya

digunakan untuk peringatan gawat

Hindari pesan hanya dengan nomor kode. Jika perlu tampilkan kode di akhir pesan

Penempatan pesan : dekat sumber masalah, dibaris pada bagian bawah layar, sebagai

pop-up window di tengah layar.

Peringatan dengan suara berguna tetapi dapat memalukan pemakai, pemakai harus

dapat mengendalikannya.

5. Pengembangan pesan yg efektif

Sespesifik dan sepresisi mungkin

Konstruktif : tunjukkan apa yang harus dilakukan

Gunakan nada positif, jangan memarahi

Gunakan kata yang berpusat ke pemakai

Gunakan tatabahasa, istilah dan singkatan yang konsisten

Pertimbangkan pesan yang bertingkat

Gunakan format visual dan penempatan yang konsisten

2. Instruksi Nonantropomorfik

Sifat suatu barang yang memiliki sifat atau pribadi manusia Antropomorfik :

“Hi there, John! It’s nice to meet you, I see you’re ready now.”

Nonantropomorfik :

Press the Enter key to begin the session

Masalah-masalah dengan instruksi Antropomorfik :

a. Pemberian sifat cerdas, bebas, berkehendak bebas dan berpengetahuan kepada

komputer dapat menipu, membingungkan, dan menyesatkan pemakai

b. Penting untuk membedakan manusia dengan komputer

c. Meskipun antarmuka antropomorfik bisa menarik beberapa orang, namun dapat

mengganggu orang lain

d. Penelitian menunjukkan bahwa instruksi nonantropomorfik lebih baik

Penggunaan instruksi nonantropomorfik :

Alternatif bagi perancang software adalah memfokuskan pemakai dan menggunakan kata

ganti orang ketiga tunggal atau tidak menggunakan kata ganti sama sekali, contoh :

Buruk : I will begin the lesson when you press RETURN

Lebih baik : You can begin the lesson by pressing RETURN atau To begin the lesson, press

RETURN

Pedoman perancangan Nonantropomorfik :

1. Hindari menampilkan komputer sebagai orang pribadi (manusia)

2. Gunakan tokoh yang sesuai (manusia ataukarakter animasi) dalam pengenalan atau

sebagai pemandu

3. Hati – hati dalam merancang wajah manusia atau tokoh kartun dengan komputer

4. Gunakan karakter kartun di games atau software anak-anak jika diperlukan

5. Rancang antarmuka yang dapat dimengerti, dapat diramalkan, dan dapat dikendalikan

6. Gunakan sudut pandang pemakai dalam orientasi dan keadaan selesai

7. Jangan gunakan ”I” ketika komputer menanggap aksi pemakai

8. Gunakan ”You” hanya untuk memandu pemakai dan menyebutkan fakta-fakta

3. Pedoman Tampilan Data (display)

1. Pada setiap tahap dalam sekuen transaksi, pastikan bahwa data apapun yang

dibutuhkan pemakai tersedia pada tampilan

2. Tayangkan data kepada pemakai dalam bentuk yang langsung dapat digunakan, jangan

mengharuskan pemakai mengkonversikan data yang ditampilkan

3. Untuk setiap jenis tampilan data, pertahankan format yang konsisten dari satu tampilan

ke tampilan lainnya.

4. Gunakan kalimat yang pendek dan sederhana

5. Gunakan pernyataan yang positif, bukan negatif

6. Gunakan prinsip logis dalam pengurutan list, jika tidak ada aturan khusus, urutkan

secara alfabetis

7. Pastikan label cukup dekat dengan data field yang berhubungan tetapi harus dipisahkan

dengan paling sedikit satu spasi

8. Buat kolom data alfabetis rata kiri agar mudah ditelusuri

9. Pada tampilan banyak halaman,berikan label pada setiap halaman untuk menunjukkan

hubungan dengan halaman lainnya.

10. Awali setiap tampilan dengan judul atau header yang menggambarkan secara singkat

isi atau tujuan tampilan, sisakan paling sedikit satu baris kosong antara judul dan isi

tampilan.

11. Untuk kode ukuran, simbol yang lebih besar tingginya paling banyak 1,5 kali tinggi

simbol berikut yang lebih kecil

12. Gunakan kode warna untuk aplikasi sehingga pemakai dapat membedakan dengan

cepat berbagai kategori data, khususnya ketika item data terpencar pada tampilan

13. Jika menggunakan blink, kecepatan kedip harus antara 2 – 5 herts dengan minimum

duty cycle 50 persen

14. Untuk tabel dasar yang melebihi kapasitas display pastikan pemakai dapat melihat

kepala kolom dan label baris di semua bagian

15. Jika kebutuhan tampilan data berubah, sediakan cara bagi pemakai (administrator

sistem) untuk melakukan perubahan yang diinginkan.

4. Warna

Warna dapat menarik bagi pemakai dan dapat meningkatkan kinerja tetapi dapat

disalahgunakan

Keuntungan warna :

a. Menyejukkan atau menyakiti mata

b. Menambah aksen pada tampilan yang tidak menarik

c. Memungkinkan pembedaan yang halus pada tampilan yang kompleks

d. Menekankan organisasi logis informasi

e. Menarik perhatian kepada peringatan

f. Menimbulkan reaksi emosional yang kuat berupa sukacita, kegembiraan, ketakutan

atau kemarahan

- Untuk tampilan komputer digunakan adaptasi prinsip-prinsip pemberian warna dalam

buku, majalah, rambu-rambu dan TV

Pedoman penggunaan warna :

a. Gunakan warna secara konservatif

b. Batasi jumlah warna

c. Kenali kekuatan warna sbg teknik coding

d. Pastikan color coding mendukung tugas

e. Tampilkan color coding dgn usaha pemakai yg minimal

f. Tempatkan color coding dibawah kendali pemakai

g. Rancang untuk monokrom dulu

h. Gunakan warna untuk membantu pemformatan

i. Gunakan color coding yang konsisten

j. Perhatikan ekspektasi umum tentang kode warna

k. Perhatikan masalah pemasangan warna

l. Gunakan perubahan warna untuk menunjukkan perubahan status

m. Gunakan warna pada tampilan grafis untuk kerapatan informasi yang lebih tinggi

n. Waspada atas kehilangan resolusi pada tampilan warna

Kombinasi warna

Latar Belakang Garis dan Teks Tipis Garis & Teks Tebal

Putih Biru, Hitam, Merah Hitam, Biru, Merah

Hitam Putih, Kuning Kuning, Putih,

Hijau

Merah Kuning, Putih, Hitam Hitam, Kuning,

Putih, Sian

Hijau Hitam, Biru, Merah Hitam, Merah, Biru

Biru Putih,Kuning, Sian Kuning,Magenta,

Hitam, Sian, Putih

Sian Biru, Hitam, Merah Merah,Biru,Hitam,

Magenta

Magenta Hitam, Putih, Biru Biru,Hitam, Kuning

Kuning Merah, Biru, Hitam Merah, Biru, Hitam

Latar Belakang Garis & Teks Tipis Garis & Teks Tebal

Putih Kuning, Sian Kuning, Sian

Hitam Biru, Merah,Magenta Biru, Magenta

Merah Magenta, Biru, Magenta, Biru,

Hijau, Sian Hijau, Sian

Hijau Sian, Magenta,

Kuning

Sian, Magenta,

Kuning

Biru Hijau, Merah, Hitam Hijau, Merah,Hitam

Sian Hitam, Kuning,Putih Kuning,Hijau,Putih

Magenta Hijau, Merah, Sian Sian, Hijau, Merah

Kuning Putih, Sian Putih, Sian, Hijau

Strategi Multiple-Window

Persoalan yang banyak dihadapai para pemakai komputer :

— Perlu melihat lebih dari satu sumber dengan cepat dengan cara yang tidak banyak

mengganggu tugas

— Pada tampilan besar, timbul masalah pergerakan mata dan kepala serta visibility

— Pada tampilan kecil, window terlalu kecil untuk dapat efektif

— Perlu memberikan informasi yang cukup dan keluwesan untuk menyelesaikan tugas,

sementara mengurangi aksi window house keeping, clutter yang mengalihkan perhatian,

pergerakan mata dan kepala.

Window housekeeping adalah aktivitas mengurusi window yang berhubungan dengan dunia

komputer dan tidak langsung berhubungan dengan tugas pemakai

PERANCANGAN WINDOW TUNGGAL

Komponen-komponen window :

Komponen-komponen window

— Judul

— Untuk identifikasi window

— Beberapa window tidak mempunyai judul

— Tempat judul dapat berubah warna untuk menunjukkan window yang sedang aktif

— Bingkai (border atau frame)

— Untuk menandai batas window

— Scroll bars

— Untuk menggulung (memindahkan tampilan ke isi window)

Aksi-aksi window meliputi :

1. Aksi membuka (open action)

— Window dibuka dari icon atau menu dengan suatu perintah yang diketik, pilihan menu,

perintah suara, klik atau klik ganda

— Umpan balik sangat bermanfaat

2. Aksi membuka, menempatkan, dan menentukan ukuran (open place and size action)

1. Window tampil ditempat yang dirancang dengan ukuran yang sama, sehingga dapat

diramalkan tetapi sering harus dipindahkan dan diubah ukurannya

2. Window ditampilkan pada tempat dan ukuran terakhir

3. Window ditampilkan menggunakan pendekatan perhitungan yang menentukan

tempat dan ukuran berdasarkan window-window yang sudah ada di tampilan

4. Window dibuka dekat fokus

5. Window pesan ditampilkan secara automatis

6. Aksi menutup (close action)

7. Window mempunyai ikon kecil untuk menutup dirinya

8. Window dapat juga ditutup dengan tombol close, cancel, atau ok

9. Umpan balik sangat bermanfaat

10. Aksi mengubah ukuran (resize action)

11. Mac OS : hanya dari pojok kanan bawah

12. NeXT : pojok kanan bawah dan kiri bawah

13. NeWS, SmallTalk : pilihan menu “size”

14. Microsoft Windows, OSF/Motif, OS/2, dll, memungkinkan resize dari seluruh pojok dan

keempat sisi

15. Beberapa sistem memungkinkan window diminimasi dan dimaksimasi

16. Aksi memindahkan (move action)

17. Xerox STAR, Windows 1.0 : pilih menu item “move” lalu klik tujuan

18. Mac OS, Microsoft Windows: Title bar dapat diseret untuk memindahkan window

19. Beberapa sistem mengharuskan seluruh window terlihat di layar, sementara yang lain

membolehkan hanya sebagian saja

3. Aksi membawa ke depan atau mengaktifkan (bring forward or activation action)

1. Ketika digunakan window bertumpuk, perlu dibuat mekanisme untuk membawa

window ke depan dan mengaktifkannya.

Cara-cara :

A. Mengetikkan perintah dengan keyboard

B. Mengklik pada menu daftar window yang terbuka

C. Mengklik bagian apapun dari window

D. Memindahkan kursor ke atas window

Perancangan Multiple Window

Multiple monitors

— Beberapa monitor digunakan untuk menampilkan informasi Rapid display flipping

— Perpindahan diantara tampilan pada satu monitor secara automatis atau dikendalikan

pemakai

Split displays

— Tampilan dibelah untuk menampilkan dua bagian dokumen atau lebih

Fixed number, size & place, & space filling tilling

— Pembelahan tampilan sederhana dengan jumlah, ukuran dan posisi tile selalu sama

Variable size,place & number, & space filling tiling

— Window yang dibuka memotong window lain secara horizontal atau vertikal untuk

menyediakan ruang baginya

Non-space filling tiling

— Memperbolehkan celah diantara tile tetapi penumpukan tidak

Piles of tiles

— Memperbolehkan window ditumpuk penuh seperti menumpuk ubin Automatic panning

— Pergeseran window dimana window yang baru dibuka muncul di bagian bawah dan

mendorong window yang sebelumnya terbawah dan window teratas keluar dari tampilan

Window zooming

— Pemakai dapat memperluas ukuran window hingga selayar penuh dan kemudian

memperkecilnya kembali ke ukuran semula

Arbitrary overlaps

— Window dapat digerakkan ke titik manapun dari tampilan dan sebagian dapat berada diluar

tampilan terpotong oleh batas layar.

Cascades

— Aplikasi metafora “tumpukan kartu” dengan mengurutkan window secara berundak – undak

dari kiri atas ke kanan bawah atau dari kiri bawah ke kanan atas

Koordinasi multiple windows dengan task

Kelas koordinasi yang dapat dikembangkan oleh developer:

Synchronized scrolling

— Scroll bar dari window yang satu dapat dikaitkan dengan scroll bar lainnya untuk pergerakan

— Berguna untuk membandingkan dua versi dokumen

Koordinasi multiple windows dengan task

Kelas koordinasi yang dapat dikembangkan oleh developer:

1. Synchronized scrolling, Scrool bar dari windows yg satu dengan scroll bar lainnya. Gerakkan

dari SB yg satu menyebabkan yg lainnya ikut menggulung isi windows. Berguna untuk

membandingkan 2 versi dokumen.

2. Hierarchical browsing, Windows yg satu berisi daftar pilihan yg jika dipilih akan menampilkan

isinya di window yg lainnya. Contoh : Window Explorer, “online view” pd Ms. Word

3. Direct Selection: Mengklik icon, kata pada tulisan, atau nama variabel pd program

memunculkan window yg memperinci penjelasannya. Contoh : windows Help.

4. Two-dimensional browsing : Menunjukkan pandangan high level dari peta, grafik, foto atau

gambar lainnya di sudut yg satu, dan rinciannya di window yg lebih besar

5. Dependent-windows opening

6. Dependent-windows closing

7. Save or open window state, Keadaan terakhir sistem meliputi window dan isinya dapat

disimpan.

Computer Supported Cooperative Work CSCW

Computer supported cooperative work (CSCW) adalah bidang studi yang mempelajari

perancangan, pengembangan, dan penggunaangroupware

Groupware atau group productivity software adalah jenis software yang membantu

kelompok kerja (workgroup) yang terhubung ke jaringan untuk mengelola aktivitas mereka

Tujuan kerja sama

Berbagai system kerjasama (cooperative systems) :

complementary partners (mitra komplementer)

— Seseorang mempunyai pertanyaan dan seseorang lainnya mempunyai jawaban

— Seseorang menjadi pengirim dan lainnya menjadi penerima

— Tidak perlu history

— Contoh : mailing list, forum di internet

lecture or demo (kuliah atau demo)

— Sesorang membagikan informasi kepada banyak pemakai di tempat yang berbeda

— Waktu dijadwalkan untuk semua peserta

— Tidak perlu history tapi boleh direkam

— Contoh : tatap muka kuliah

necessary partners (mitra saling membutuhkan)

— Kerja sama diantara dua orang yang saling membutuhkan untuk menyelesaikan tugas

— Contoh : programmer & analyst system, gelandang dan penyerang

conference (konferensi)

— partisipasi kelompok pada waktu yang sama atau tidak dan tempat yang berbeda

— menggunakan pesan many-to-many

— perlu history percakapan sebelumnya

directed conference (konferensi terarah)

— seorang pemimpin mengawasi diskusi online

— contoh : diskusi pada virtual classroom dengan dosen atau guru sebagai pemimpin

structured work process (proses kerja terstruktur)

— sekumpulan orang dengan peran yang berbeda bekerja sama untuk tugas tertentu yang

berhubungan

— contoh: panitia penerimaan mahasiswa baru

electronic classroom or meeting room (kelas elektronik atau ruang rapat elektronik)

— pertemuan tatap muka dengan menggunakan computer

— setiap pemakai dapat memberikan kontribusi

— Anonimitas (kerahasiaan identitas) sangat berperan

Matriks Waktu-Ruang untuk System Kooperasi :

Waktu sama Waktu berbeda

Tempat sama Face to face

(classroom,

meeting rooms)

Asynchronous interaction

(project scheduling)

Tempat beda Synchronous distributed

(chatting, game online)

Asynchronous distributed

(e-mail)

Asinkron Tersebar : Waktu Berbeda, Tempat Berbeda

Electronic mail (e-mail)

Sifat :

— Struktur terlalu bebas

— Terlalu membuat kewalahan

— Hanya sesaat (transien)

Tools :

— Filtering (Inbox Assistant atau Message Rules pada Outlook Express)

— Archiving (menyimpan pesan-pesan lalu)

— Forwarding (meneruskan kepada orang lain)

— Mailing lists (kelompok diskusi menggunakan e-mail, atau mengirimkan e-mail kepada

alamat-alamat yang terdaftar)

Pada awalnya hanya mengandung teks, tetapi sekarang dapat juga mengandung gambar, suara,

animasi, web links, dll.

Dapat mempunyai attachments (lampiran) berupa file

bulletin boards & conferences

diskusi elektronik

contoh :

— USENET newsgroups

Terbagi menjadi grup-grup yang membicarakan topik tertentu

Posting ditampilkan secara kronologis

Pemakai bebas membaca pesan mana saja

Bersifat terbuka

Mailing list

— Pemakai harus berlangganan untuk menerima e-mail secara automatis

— Mendukung adanya moderator

— Mandukung history

— Contoh : listserv, listproc, majordomo, ezmlm

Web-based bulletin boards

— Seperti USENET tetapi dapat dibuat terbatas

— Menggunakan interface Web

Konferensi online

— Seperti mailing list tetapi dilengkapi dengan fasilitas voting dan direktori

File-transfer programs

Menggunakan FTP (File Transfer Protocol)

Memungkinkan file-file di-download (salin ke computer local) dan di-upload (salin ke server

agar tersedia secara online)

Structured Processes

Mekanisme pertukaran asinkron yang lebih spesifik

Contoh : gIBIS (graphical Issue Based Information System) yang memungkinkan peserta

menambahkan issues, positions, atau arguments dalam diskusi berstruktur pohon yang dapat

diakses dalam bentuk hypertext

Sinkron Tersebar : Tempat Berbeda, Waktu Sama

Group editing

— Beberapa pemakai dapat melihat dan mengedit dokumen secara bersamaan

— Contoh : GROVE system (GRoup Outline Viewing Editor), rIBIS

Shared screen

— Beberapa orang dapat melihat layar yang sama dan mengoperasikan system yang sama

— Contoh : layar billboard iklan

Interactive game networks

— pemakai dapat bermain melawan pemakai lain pada game yang sama melalui jaringan

— Contoh : dota game, ragnarok, nexia

Chat

— pemakai dapat mengobrol dan berdiskusi dengan banyak pemakai lain melalui antarmuka

teks

— contoh : Internet Relay Chat (IRC), Web Chat.

Video conferencing

— konferensi real time yang memungkinkan pemakai melihat citra video satu sama lain dan

dapat saling berbicara.

masalah-masalah yang sering muncul :

— waktu respon lambat sewaktu memasuki atau meninggalkan system

— suara latar belakang mengganggu sehingga sulit memastikan siapa yang sedang bicara

— kurangnya pencahayaan

— sulit melakukan kontak mata karena pemakai cenderung menatap monitor, bukan kamera

— perubahan status sosial

— ukuran citra kecil

— potensi pelanggaran privasi.

Teleconferencing

— konferensi real-time dengan audio dan/atau video melalui jaringan yang memungkinkan

juga :

pemakaian aplikasi bersama

menulis atau menggambar pada whiteboard

— contoh : Microsoft NetMeeting

Tatap Muka : Tempat Sama, Waktu Sama

Shared display from lecturer workstation

— Dosen menggunakan computer dengan proyektor untuk memberikan presentasi kuliah

— Semua orang melihat gambar yang sama, dan hanya dosen yang mengendalikan computer

— Berhubungan dengan lectureware, computer-aided instruction, atau computer-based

training

Audience response units

— Pemakai dapat menjawab soal dengan menggunakan piranti khusus pada meja mereka

— Soal, jawaban, dan ikhtisar hasilnya ditampilkan pada shared display

Text-submission workstations

— Peserta menggunakan keyboard dan software sederhana

— Digunakan untuk percakapan atau diskusi pada electronic classroom atau meeting room

Brainstorming, voting, and ranking

— Digunakan pada electronic classroom atau meeting room untuk hal-hal yang lebih dari

sekedar berbicara

— Keuntungan system rapat eletronik :

— Komunikasi pararel mendukung masukan yang lebih luas dan mencegah dominasi rapat

hanya oleh sekelompok orang

Anonimitas mengurangi tekanan

Adanya history memungkinkan pemakai mempertimbangkan informasi dan pendapat orang lain

dan sekaligus menjadi catatan permanent apa yang terjadi

Struktur proses membantu memfokuskan kelompok, memfokuskan hal-hal kunci dan mencegah

penyimpangan yang irelevan

Dukungan tugas dan struktur menyediakan informasi dan pendekatan analisisnya

File sharing

— Penggunaan computer dalam jaringan untuk memakai file secara bersama

Shared workspace

— Menyediakan sudut pandang mengenai ruang kerja yang sama yang dapat diakses oleh

semua pemakai

— WYSIWIS (What You See Is What I See)

Group activities

— Dengan jaringan yang baik di antara workstation, para pemakai dapat mengerjakan soal, dan

yang butuh bantuan dapat “mengangkat tangan” untuk menampilkan tampilannya pada shared

display atau pada tampilan pemimpin

— Pemakai dapat mempertunjukkan sesuatu kepada kelompok baik padashared display atau

pada tampilan workstation orang lain.

Alat Bantu Eksplorasi Informasi

Pendahuluan

Dokuman adalah organisasi informasi yang dapat berisi teks, gambar, dan sebagainya

Alat-alat bantu pencarian informasi dalam dokumen antara lain :

◦ Indeks : daftar penulis, daftar judul, daftar tabel, daftar gambar, daftar kata-kata

terkendali, dll

◦ Konkordansi : daftar kata-kata tak terkendali dari semua kata dengan penunjuk ke baris

tertentu yang memunculkannya

◦ Thesaurus : daftar sinonim dan istilah-istilah yang lebih luas maupun lebih sempit

◦ Daftar isi : isi dokumen secara garis besar

Pencarian String, Database Query, dan Indeks

Filter adalah pola yang dipakai untuk menyaring data sedemikian sehingga hanya data yang

cocok dengan pola diperbolehkan lewat.

Alat bantu pada pencarian berbasis komputer :

Full-text string search

Formatted field search

Controlled-vocabulary index search

Back-of-the-book index and table-of-contents search

Concordance and key-word-in-context (KWIC)

Pencarian Fleksibel

Rainbow search

Search expansion

Sound search

Picture search

Photograph libraries

Hypertext dan Hypermedia

Pertama kali diperkenalkan oleh Vannevar Bush, Juli 1945, pada artikel berjudul “As We May

Think” (The Atlantic Monthly, Vol.176, No. 1, halaman 101-108)

Beberapa hal yang dikemukakan Bush :

◦ Akan adanya masalah luapan informasi

◦ Perlu dibuat piranti yang memungkinkan acuan silang dalam dokumen dan antardokumen

dengan mudah

◦ Usulan piranti eksplorasi informasi yang berbasis teknologi mikrofilm

Hypertext dan hypermedia adalah :

◦ Dokumen nonsekuensial dan nonliniear

◦ Jaringan simpul (artikel, dokumen, file, kartu, halaman, frame, layar) yang dihubungkan

dengan link (acuan silang atau citation)

Hypertext biasanya digunakan untuk menyebut aplikasi berisi hanya teks

Hypermedia digunakan untuk menyampaikan keterlibatan media lain, khususnya gambar,

animasi, suara, dan video

Aturan emas Hypertext

Ada badan informasi besar yang diorganisasikan menjadi beberapa fragmen

Fragmen-fragmen tersebut saling berhubungan

Pemakai hanya memerlukan sebagian kecil dari fragmen pada suatu waktu

Aplikasi hypertext dan hypermedia

Bisnis

◦ Katalog produk dan iklan

◦ Bagan organisasi, panduan kebijakan

◦ Laporan tahunan dan pedoman orientasi

◦ Resume dan biografi

◦ Perjanjian, kontrak, dan surat perintah

◦ Newsletters dan majalah berita

◦ Dokumentasi software dan kode

Sumber daya informasi

◦ Ensiklopedia, penjelasan istilah, dan kamus

◦ Buku referensi medis, hukum, dll

◦ Tafsiran religius dan sastra

◦ Katalog buku ilmiah dan pedoman departemen

◦ Petunjuk wisata dan restoran

◦ Jurnal ilmiah, abstrak, indeks.

Pelajaran pribadi

◦ Pengajaran dan eksplorasi

◦ Petunjuk perbaikan dan pemeliharaan

◦ Jadwal dan peta geografis

◦ Online help dan dokumentasi teknis

◦ Buku masak dan petunjuk perbaikan rumah

◦ Cerita misteri, fantasi, dan lelucon

◦ Hypernovels dan hyperpoems

Kelengkapan Antarmuka Pemakai Hypertext

Isi

◦ Simpul atau Node (teks, gambar, video, suara)

� Satuan dasar hypertext

◦ Link (typed, single type)

◦ Format, margin, font, spacing

◦ Resolusi layar, ukuran, warna

◦ Ukuran dan manajemen window

Interaksi

◦ Mekanisme pemilihan (sentuh, mouse, keyboard)

◦ Waktu respons dan kecepatan tampil

◦ Control panel untuk video dan animasi

◦ Pemanggilan program dan database eksternal

Navigasi

◦ Struktur berbentuk graph

◦ Daftar isi ganda

◦ Ringkasan grafik atau tabular

◦ Penggunaan indeks atau pencarian kata kunci

◦ Posisi dan indikator ukuran

Pencatatan

◦ History jalur dan bookmark

◦ Anotasi

◦ Kemampuan ekspor

◦ Penyimpanan status dan hasil pencarian

Menyusun atau menyunting hypertext

Pertimbangan-pertimbangan yang perlu diperhatikan:

1. Kenali pemakai dan tugas-tugasnya

2. Pastikan struktur yang berarti terpenting

3. Terapkan ketrampilan yang beraneka ragam

4. Hargai pemilahan

5. Tunjukkan hubungan yang ada

6. Konsisten dalam penamaan dokumen

7. Bekerja dari daftar referensi utama

8. Pastikan penejelajahan sederhana

9. Rancang setiap layar dengan hati-hati

10. Gunakan beban kognitif yang rendah

Multimedia

Multimedia : penggunaan lebih dari sekedar teks pada aplikasi. Meliputi citra, suara, video,

animasi

Macam-macam media penyimpan pada multimedia :

◦ Videodisc (12 inci)

� 54.000 gambar diam per sisi

◦ CD (Compact Disc)

� 600 MB data, 74 menit musik

◦ DVD (Digital Video/Versatile Disc)

� 4.7 GB data, cukup untuk satu film

Algoritma Kompresi Video

◦ DVI (Digital Video Interactive)

� 1 detik full-motion video dikompresi menjadi 150KB (5 KB per frame)

◦ MPEG(Motion Picture Expert Group)

� Standar kompresi format video dan suara

� MPEG-1 (untuk VCD): 352×240 pixel, 30 fps

� MPEG-2 (untuk DVD): 720×480 atau 1280×720 pixel, 60 fps

� MPEG-3 (untuk HDTV), sudah tercakup MPEG-2 sehingga tidak jadi dipakai

� MPEG-4 (sedang dikembangkan berbasis Quick Time)

Algoritma Kompresi Video

◦ DVI (Digital Video Interactive)

� 1 detik full-motion video dikompresi menjadi 150KB (5 KB per frame)

◦ MPEG(Motion Picture Expert Group)

� Standar kompresi format video dan suara

� MPEG-1 (untuk VCD): 352×240 pixel, 30 fps

� MPEG-2 (untuk DVD): 720×480 atau 1280×720 pixel, 60 fps

� MPEG-3 (untuk HDTV), sudah tercakup MPEG-2 sehingga tidak jadi dipakai

� MPEG-4 (sedang dikembangkan berbasis Quick Time)

Manual Tercetak, Petunjuk Online dan Tutorial

Bentuk-bentuk manual pemakai tercetak (printed user manual) :

◦ Daftar alfabetis (alphabetic listing) dan deskripsi perintah

◦ Kartu referensi kilat (quick reference card) dengan gambaran singkat sintaktis

◦ Brief getting started notes untuk memungkinkan pemakai mencoba menggunakan system

◦ Pengenalan bagi pemakai pemula (novice user introduction) atau tutorial

◦ Manual konversi (conversion manual) yang mengajarkan keistimewaan system baru

kepada pemakai yang berpengetahuan tentang system lain

◦ Manual referensi rinci (detailed reference manual) dengan liputan semua features Jenis-

jenis materi online :

◦ Online user manual : versi elektronis dari manual pengguna tradisional.

Dikonversi langsung dari manual tercetak sehingga langsung tersedia tetapi lebih sulit

dibaca dan diserap

◦ Online help facility : petunjuk berupa presentasi hierarkis kata kunci dalam bahasa

perintah, seperi indeks pada manual tradisional

◦ Online tutorial : pendekatan yang menggunakan media elektronik untuk mengajar pemula

dengan memperlihatkan simulasi system yang bekerja, dengan menampilkan animasi yang

menarik, dan melibatkan pemakai dalam sesi interaktif

◦ Online demonstration : membawa pemakai menelusuri penggunaan software agar

pemakai dapat memperoleh gambaran menyeluruh atas software

Klasifikasi Materi Kertas dan Online

Klasifikasi menurut Duffy et al. (1992):

Tujuan Pemakai Medium Penyampaian

Kertas Online

Saya ingin

membelinya

Sales brochure

Fact sheet

Demonstration

program

Saya ingin

mempelajarinya

Tutorial manual

Guided tour

Saya ingin

menggunakannya

User’s manual

Online help

Online document

Membaca dari Kertas Vs Tampilan

Kelemahan potensial untuk membaca dari tampilan layar

meliputi :

— Font yang jelek, terutama pada tampilan dengan resolusi rendah

— Kontras yang rendah antara karakter dan latar belakang, dan batas-batas karakter yang

buram dan tidak jelas

— Cahaya yang dipancarkan dari tampilan akan lebih sulit dibaca daripada cahaya yang

dipantulkan oleh kertas, layar lebih menyilaukan, flicker dapat mengganggu, dan permukaan

layar yang melengkung dapat membingungkan

— Tampilan yang kecil membutuhkan perpindahan halaman yang banyak

— Jarak membaca dapat lebih besar daripada kertas, karena posisi layar tetap, dan

penempatannya mungkin terlalu tinggi agar bisa dibaca dengan nyaman

— Masalah tata letak dan pemformatan, seperti margin yang tidak sebagaimana mestinya,

lebar baris yang tidak memadai, atau justifikasi (perataan) yang janggal

— Gerakan tangan dan tubuh yang dikurangi pada tampilan dibandingkan dengan kertas, dan

postur tubuh yang kaku yang keduanya dapat melelahkan

— Ketidakakraban terhadap tampilan dan kegelisahan bahwa citra bisa hilang dapat

meningkatkan stress

Mempersiapkan manual tercetak

— Pengaturan dan gaya tulisan

— Deskripsi nonantropomorfik

— Proses pengembangan

Pengaturan dan gaya tulisan

Proses sembilan langkah untuk menulis

dokumentasi pemakai (Brockman, 1990):

Kembangkan spesifikasi dokumen :

1. Gunakan orientasi tugas

2. Gunakan rancangan minimalis

3. Tangani pembaca yang beraneka ragam

4. Tentukan tujuan

5. Organisasikan informasi dan kembangkan visualisasi

6. Perhatikan tata letak dan warna

7. Buat prototipe

8. Buat draft (bentuk kasar)

9. Perbaiki

10. Kaji ulang

11. Uji di lapangan

12. Terbitkan

13. Lakukan ulasan pascaproyek

14. Pelihara

Mempersiapkan fasilitas online

Alasan-alasan positif untuk membuat manual tersedia online adalah :

Informasi tersedia kapan saja komputer tersedia

Pemakai tidak perlu menyediakan ruang kerja untuk membuka manual

Informasi dapat diperbaharui secara elektronis dengan cepat dan tidak mahal

Informasi spesifik yang diperlukan bagi tugas tertentu dapat ditemukan dengan cepat jika

manual online menyediakan indeks elektronik atau pencarian teks

Penyusun dapat menggunakan grafik, suara, warna, dan animasi yang dapat berguna

dalam menjelaskan aksi-aksi kompleks dan menciptakan pengalaman keterlibatan

Dampak negatif potensial dari manual online :

Tampilan lebih sulit dibaca daripada cetakan

Layar dapat berisi informasi lebih sedikit daripada kertas, dan perpindahan halamannya lebih

lambat daripada manual kertas

Bahasa perintah tampilan mungkin belum dikenal dan membingungkan pemula

Jika tampilan digunakan untuk pekerjaan lain, beban ingatan jangka pendek pemakai akan

menjadi parah jika pekerjaan dan manual harus dipertukarkan

Daftar fasilitas online yang berguna menurut

Relles dan Price (1981) :

— Penjelasan yang sinambung dan lebih rinci atas pesan kesalahan yang ditayangkan

— Penjelasan yang sinambung dan lebih rinci atas pertanyaan atau permintaan

— Contoh yang sinambung dari masukan yang tepat atau perintah yang sah

— Penjelasan atau definisi dari istilah tertentu

— Deskripsi format perintah tertentu

— Daftar perintah yang diperbolehkan

— Penayangan bab-bab tertentu dari dokumentasi

— Deskripsi nilai sesaat dari berbagai parameter sistem

— Petunjuk penggunaan sistem

— Berita yang menarik bagi pemakai sistem

— Daftar pertolongan yang tersedia bagi pemakai

Pedoman untuk sistem petunjuk online (online help) :

— Buat sistem petunjuk mudah diakses dan mudah dituju kembali

— Buat petunjuk sespesifik mungkin

— Kumpulkan data untuk menentukan petunjuk apa saja yang diperlukan

— Berikan pemakai sebanyak mungkin kendali atas sistem petunjuk

— Buat pesan-pesan petunjuk akurat dan lengkap

— Jangan gunakan petunjuk sebagai kompensasi perancangan antarmuka yang buruk

Online tutorials, Online demonstrations, animations

Online tutorial akan berguna karena pemakai

— Tidak perlu terus-menerus bertukar perhatian antara terminal dan materi petunjuk

— Berlatih ketrampilan yang dibutuhkan untuk menggunakan sistem

— Dapat bekerja sendiri pada kecepatan langkahnya sendiri dan tidak perlu malu atas

kesalahan yang dibuat di depan istruktur atau sesama pelajar yang adalah manusia

Karakteristik sistem demo :

— Disebarkan dalam bentuk disket, CD-ROM, atau melalui internet

— Dirancang untuk menarik pemakai potensial

— Umumnya memamerkan keistimewaan sistem menggunakan animasi, gambar berwarna,

suara, dll

— Persyaratan antarmuka pemakai untuk memikat dan mempertahankan ketertarikan

pemakai, menyampaikan informasi dan membangun citra produk yang positif

— Kendali umum : maju secara automatis atau manual, pengaturan panjang demo, berhenti,

mengulang, atau melompati bagian tertentu

Perancangan Iteratif, Pengujian, dan Evaluasi

Participatory Design & Task Analysis

— Partcipatory design : perancangan yang melibatkan pemakai

— Keterlibatan pemakai dalam perancangan akan :

— Menghasilkan lebih banyak informasi yang akurat tentang tugas

— Memberi kesempatan untuk berargumen atas keputusan rancangan

— Memberi rasa keikutsertaan yang membentuk investasi ego dalam implementasi yang

sukses

— Potensi untuk meningkatkan penerimaan pemakai atas sitem final

Karakteristik perancangan menurut Carrol dan Rosson (1985) :

— Perancangan adalah suatu proses ;bukan merupakan keadaan dan tidak dapat

direpresentasikan dengan memadai oleh statistik

— Proses perancangan adalah nonhierarkis; tidak ketat bottom-up maupun top-down

— Proses perancangan adalah transformasional secara radikal; melibatkan pengembangan

solusi sebagian dan sementara yang akhirnya mungkin tidak berperan dalam rancangan akhir

— Perancangan secara intrinsik melibatkan penemuan tujuan-tujuan baru

Tiga pilar perancangan

1. Guidelines document

Tata letak layar

Piranti masukan dan keluaran

Urutan aksi

Pelatihan

2. User interface Software Tools (UIMS) and rapid prototyping tools

3. Usability laboratories and iterative testing

Uji Penerimaan

— Untuk proyek implementasi besar, pelanggan atau manager biasanya menentukan tujuan

dan sasaran terukur untuk kinerja hardware dan software

— Jika produk gagal memenuhi kriteria, sistem harus dikerjakan ulang hingga menunjukkan

keberhasilan

Kriteria terukur untuk antarmuka pemakai :

— Waktu mempelajari fungsi tertentu

— Kecepatan kinerja tugas

— Tingkat kesalahan

— Kepuasan subjektif pemakai

— Retensi (daya ingat) terhadap perintah

Evaluasi dalam Pemakaian Aktif

— Survey

— Wawancara dan diskusi kelompok

— Konsultasi online atau melalui telepon

— Kotak saran online atau pelaporan kesulitan

— Online bulletin board atau newsgroup

— User newsletter dan konferensi

Evaluasi Kuantitatif

— Eksperimen berorientasi psikologis terkendali

— Berhubungan dengan masalah praktis dan memperhatikan kerangka kerja teoritis

— Menyatakan hipotesis yang baik dan teruji

— Mengenali sejumlah kecil variabel bebas yang perlu diubah

— Dengan hati-hati memilih variabel tak bebas yang akan diukur

— Memilih subjek secara adil dan mengelompokkan subjek secara acak dan hati-hati

— Mengandalikan faktor-faktor pembias

— Menerapkan metode statistik pada analisis data

— Menyelesaikan masalah praktis, memperbaiki teori, dan memberikan nasihat kepada

peneliti selanjutnya

— Pengumpulan data kinerja pemakai berkesinambungan

— Mengumpulkan data pola penggunaan sistem, kecepatan kinerja pemakai, tingkat

kesalahan, seringnya diperlukan petunjuk online

— Data tertentu menjadi petunjuk pembelian hardware baru, perubahan prosedur operasi, dll.

Daur Hidup Pengembangan Sistem

Langkah-langkah :

— Kumpulkan informasi

— Definisikan kebutuhan dan semantik

— Rancang sintaksis dan fasilitas pendukung

— Sebutkan piranti-piranti fisik

— Kembangkan software

— Integrasikan sistem dan sebarkan kepada pemakai

— Pelihara masyarakat pemakai

— Persiapkan rencana evolusi

Lingkungan Pengembangan Antarmuka Pemakai

Metode Spesifikasi

Natural-language specification : spesifikasi dalam bahasa alami perancang, seperti bahasa

inggris

Formal and semiformal language : bahasa yang digunakan dalam berbagai bidang seperti

matematika, fisika, musik, dsb

Formal languages mempunyai tatabahasa (grammar) yang tertentu, dan ada prosedur

efektif untuk menentukan apakah string tertentu mengikutigrammar

Menu-tree structure : spesifikasi menu tree dengan menggambar tree dan menunjukkan tata

letak menu

Statecharts : peningkatan diagram transisi yang dikhususkan bagi kebutuhan sistem

interaktif

User Action Notation : notasi pendekatan untuk pengembangan sistem manipulasi langsung

Multiparty Grammar

Penggambaran interaksi dengan notasi seperti BNF (Backus-Naur Form)

Pada multiparty grammar ada nonterminal yang diberi label untuk menyatakan pihak yang

menghasilkan string (U: user; C: computer)

Contoh : Proses log-in

<Session> ::= <U : Opening> <C: Responding>

<U: Opening> ::= LOGIN <U: Name>

<U: Name> ::= <U: string>

<C: Responding> ::= HELLO [<U: Name>]

Multiparty Grammar efektif untuk rentetan perintah berorientasi teks yang berulang-ulang

dipertukarkan, seperti pada terminal bank

User Action Notation (UAN)

UAN digunakan untuk mengatasi keanekaragaman dunia manipulasi langsung

Simbol-simbol UAN :

~[icon] : bergerak menuju icon

Mv : tombol mouse ditekan

M^ : tombol mouse dilepas

Icon! : icon di-highlight

Icon-! : icon kembali normal

Icon > ~ : icon diseret mouse

Contoh :

TASK : select an icon

User Actions

Interface Feedback Interface State

~[file] Mv file!,forall(file!):

file-!

Selected file

~[x,y]* outline (file) > ~

~[trash] outline(file)> ~, trash!

M^ erase(file),trash!! Selected = null

Alat Bantu Dukungan Pemrograman

Screen mockup and prototyping tools

Membuat sketsa cepat dan model tampilan pada tahap-tahap awal perancangan dengan

tujuan :

Menjajaki berbagai alternatif

Memungkinkan komunikasi dalam tim perancangan

Menjelaskan kepada klien seperti apa bentuk produk nantinya

Dibuat dengan :

Kertas dan pensil

Pengolah kata

Bussiness slide-show presentation software : Adobe persuasion, Microsoft PowerPoint

Alat bantu khusus pembuatan prototipe

Software CAI: Macromedia Authorware, Authology, Courseware, Pilot

Multimedia construction tools : Macromedia Director, Asymetrix Toolbook, Video Works

Interactive, Autodesk Animator

Programming toolkits :

Programmer berpengalaman membuat atarmuka pemakai dengan bahasa rakitan atau

bahasa pemrograman tingkat tinggi (C, Pascal, BASIC, COBOL, Ada,dsb)

Untuk bahasa-bahasa pemrograman tersebut dibuat advanced programming toolkit

Berupa rutin-rutin khusus yang menangani widget seperti window, scroll bar, menu pull-

down dan pop-up, data-entry fields, tombol, dan kotak dialog

Pemrograman visual memungkinkan perancangan antarmuka pemakai secara WYSIWYG.

Contoh: Microsoft Visual Basic, Borland Delphi