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, Sian, Magenta,
Kuning 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 Asynchronous interaction
(classroom, (project scheduling)
meeting rooms)
Tempat beda Synchronous distributed Asynchronous distributed
(chatting, game online) (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  Sales brochure
membelinya  Fact sheet
 Demonstration
program
Saya ingin  Tutorial
mempelajarinya manual
 Guided tour
Saya ingin  User’s manual
menggunakannya  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
Interface Feedback Interface State
User Actions
~[file] Mv file!,forall(file!): Selected file
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