Pertemuan 8 (Piranti Interaksi)
· Keyboard: piranti masukan data tekstual utama
Tata letak keyboard:
- QWERTY layout
ü Diciptakan oleh Christopher Latham Sholes, 1870-an.
ü Dirancang untuk memperlambat gerakan pemakai sehingga tombol mesin tik tidak menyangkut.
ü Pasangan huruf yang sering digunakan ditempatkan berjauhan untuk meningkatkan jarak pergerakan jari.
ü Standar keyboard bahasa Inggris.
ü Kecepatan rata-rata: 150 kata per menit.
- Dvorak layout
ü Diciptakan oleh August Dvorak dan Willian L. Dealey, 1936.
ü Dirancang untuk mengurangi jarak pergerakan jari.
ü Mempercepat ketikan hingga 200 ketikan per menit.
ü Penerimaannya lambat karena pemakai tidak bersedia berusaha berpindah dari QWERTY.
- ABCDE layout
ü Tombol-tombol disusun menurut abjad.
ü Tidak punya kelebihan dibanding tata letak lainnya, karena itu tidak banyak dipakai.
Beberapa tombol pad selain huruf:
- Numeric keypad: Telepon, Kalkulator
- Tombol-tobol keyboard yang baik:
ü Ukuran: 12 mm; jarak antartombol 6 mm.
ü Agak cekung.
ü Dibuat dengan bahan yang bersifat dof.
ü Diaktifkan dengan gaya 40-125 gf.
ü Jika ditekan masuk 3-5 mm.
ü Tombol-tombol khusus lebih besar.
ü Tanda bagi Caps Lock, Num Lock.
ü Warna yang informatif.
ü Label harus cukup besar untuk dibaca.
ü Tombol F dan J pada tata letak QWERTY ditandai.
- Function keys: Untuk fungsi-fungsi khusus.
ü Biasa diberi label F1 … F12 atau PF1 … PF24.
ü Positif: mengurangi ketukan dan kesalahan.
ü Negatif: letaknya jauh dari home position, fungsinya harus dihafal, beberapa sistem tidak konsisten.
- Tombol-tombol pergerakan kursor
ü Tata letak yang terbaik adalah yang alami.
ü Populer: T-terbalik (a).
ü Biasa mempunyai typematic (auto-repeat).
ü Pergerakan lainnya dengan tombol TAB, HOME, END, dsb.
· Piranti Penunjuk(pointing devices)digunakan untuk menunjuk dan memilih dilayar pada sistem manipulasi langsung
- Kelebihan:
ü Mengurangi kesalahan ketik pada keyboard.
ü Dapat memusatkan perhatian pada tampilan.
- Ada dua kelompok piranti penunjuk:
ü Direct pointing devices: kendali langsung di permukaan layar.
ü Indirect pointing devices: kendali tak langsung, terpisah dari permukaan layar.
Tugas Interaksi Piranti Penunjuk:
- Select: memilih dari seperangkat item.
- Position: memindahkan titik pada ruang berdimensi satu, dua, tiga, atau lebih.
- Orient: memilih arah pada ruang berdimensi satu, dua, tiga, atau lebih.
- Path: serangkaian operasi position dan orient yang cepat untuk membentuk jalur atau kurva.
- Quantify: menentukan nilai numerik.
- Text: menandai lokasi penyisipan, penghapusan, perubahan teks.
Macam-macam Direct Pointing Devices:
- Light pen: Menunjuk langsung ke layar dengan pena yang mempunyai sel sensitif cahaya.
ü Kelemahan:
o Tangan menutupi layar;
o Tangan jauh dari keyboard;
o Light pen harus diangkat.
- Touch screen: Langsung menyentuh layar dengan jari.
ü Kelemahan:
o Melelahkan;
o Tangan menutupi layar;
o Tangan jauh dari keyboard;
o Penunjukan tidak presisi;
o Layar bisa kotor.
- Stylus: Alat yang digunakan untuk menyentuh touch screen pada palmtop.
Macam-macam Indirect Pointing Devices:
- Mouse
ü Kelebihan:
o Posisi tangan nyaman;
o Tombolnya mudah ditekan;
o Pergerakan panjang cepat;
o Penempatan presisi.
ü Kelemahan:
o Tangan harus pindah dari keyboard;
o Memakan tempat di meja;
o Kabelnya mengganggu;
o Harus diangkat dan diletakkan kembali untuk pergerakan panjang;
o Harus berlatih untuk bisa menguasainya.
- Trackball
ü “Mouse terbalik”.
ü Tidak memakan banyak tempat.
ü Banyak digunakan pada laptop.
- Joystick:
ü Baik untuk tracking.
ü Pergerakan sedikit, perpindahan arah mudah.
- Trackpoint (pointing stick): Joystick mini isometrik dari bahan karet yang diletakkan di antara tombol-tombol keyboard dan digerakkan jari tangan.
- Graphics tablet: Permukaan peka sentuh yang terpisah dari layar. Mendeteksi gerakan stylus atau puck.
ü Keuntungan:
o Posisi tangan nyaman.
o Tidak perlu menunjuk layar.
o Permukaan luas.
- Touchpad: Permukaan peka sentuh yang biasa digunakan pada laptop. Nyaman seperti touch screen namun tidak perlu langsung menyentuh layar.
Hukum Fitts untuk Piranti Penunjuk:
- Model pergerakan tangan dalam menggerakkan kursor di tampilan.
- Ditemukan oleh Paul Fitts (1954).
- Digunakan untuk memperkirakan waktu untuk memindahkan kursor dalam menunjuk target tertentu.
- Bila D = jarak dan W = lebar target:
Index of difficulty = 2log (2D/W)
Time to point = C1 + C2 (IOD) detik
C1 dan C2: konstanta tergantung piranti.
Untuk presisi tinggi: Time for precision pointing = C1 + C2 (IOD) + C3 2log (C4/W)
- Contoh:
Target berukuran 1 cm, Jarak 8 cm
IOD = 2log (2 × 8 / 1) = 4
Time to point = 0.2 + 0.1 (4) = 0.6 detik.
- Fitts Law Example: Pop-up Linear Menu, Pop-up Pie Menu.
Which will be faster on average? pie menu (bigger targets & less distance)
- Fitts law in Microsoft Office 2007:
ü Larger, labeled controls can be clicked more quickly
ü Magic Corner: Office Button in the upper-left corner
ü Mini Toolbar: Close to the cursor
· Pengenalan, Digitisasi, dan Penghasilan Ucapan
- Pengenalan ucapan masih belum seperti yang digambarkan pada fiksi ilmiah:
ü Lebih menuntut ingatan kerja pemakai.
ü Derau latar belakang bermasalah.
ü Variasi kinerja ucapan pemakai mempengaruhi keefektifan.
- Macam-macamnya:
ü Discrete-word recognition
o Mengenali kata yang diucapkan orang satu per satu.
o Kehandalan 90-98% untuk kosakata 20-200 kata.
o Berguna jika:
Ø Tangan pembicara sibuk.
Ø Mobilitas diperlukan.
Ø Mata pembicara sibuk.
Ø Kondisi yang keras (di bawah air, perang) atau terkungkung (dalam kokpit) yang tidak memungkinkan pemakaian keyboard.
ü Speech recognition
o Mengenali kata-kata yang diucapkan secara normal.
o Harapan: pendiktean dokumen, transkripsi rekaman suara.
o Contoh: Dragon NaturallySpeaking, IBM ViaVoice.
ü Speech store and forward
o Penyimpanan dan pengiriman kembali pesan yang diucapkan.
o Voice mail bekerja handal, berbiaya rendah, dan disukai pemakai.
ü Speech generation
o Komputer menghasilkan ucapan.
o Disukai untuk keadaan tertentu.
ü Audio tones, audiolization, music
o Umpan balik berupa suara (bukan ucapan).
o Audio tone: nada sebagai output komputer.
o Audiolization: presentasi informasi yang lebih kompleks dengan kombinasi suara.
· Tayangan Gambar dan Video
- Visual Display Unit (VDU) adalah sumber umpan balik utama bagi pemakai dari komputer.
- Bentuknya:
ü Monitor
ü Fotografi digital: Download ke komputer mudah.
ü Video digital: Videodisk, CD-ROM, DVD-ROM.
ü Proyektor
ü Heads-up displays: pada kaca mobil/pesawat.
ü Helmet-mounted displays
Teknologi Display:
- Raster-scan cathode ray tube (CRT)
ü Senapan elektron menyapukan pixel.
ü Refresh rate yang lebih tinggi disukai.
- Liquid-crystal displays (LCD): Perubahan tegangan mempengaruhi polarisasi kapsul kristal cair.
- Plasma panel: Gas neon dipendarkan oleh arus listrik.
- Light-emitting diodes (LED): Diode dinyalakan oleh arus listrik.
· Printer:
- Dot-matrix printer: Menggunakan pita bertinta.
- Inkjet printer: Tidak berisik, kualitas cetakan baik.
- Thermal printer
ü Tidak berisik, murah.
ü Menggunakan kertas khusus (berlilin) atau kertas biasa.
- Laser printer: Hasil berkualitas tinggi.
- Plotter: Menggunakan pena untuk menggambar di atas gulungan kertas.
- Photographic printer: Menghasilkan slide dan cetakan foto.
- Newspaper/magazine-layout systems: Hasil berkualitas produksi.
Pertemuan 9 (Menyeimbangkan fungsi dan estetika)
· Pesan Kesalahan
Dasar-dasar untuk mempersiapkan pesan sistem yang baik:
- Ketertentuan (specificity)
- Panduan konstruktif dan nada positif
- Pemilihan kata berpusat pemakai
- Format fisik yang sesuai
Ketertentuan (Specificity):
| Buruk | Baik |
| SYNTAX ERROR | Unmatched left parenthesis |
| ILLEGAL ENTRY | Type first letter: Send, Read, or Drop |
| INVALID DATA | Days range from 1 to 31 |
| BAD FILE NAME | File names must begin with a letter |
Panduan Konstruktif dan Nada Positif:
- Buruk: DISASTROUS STRING OVERFLOW. JOB ABANDONED.
Baik: String space consumed. Revise program to use shorter strings or 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.
Pemilihan kata berpusat pemakai:
- Minta maaf atas kesalahan.
- Jangan menyalahkan pemakai.
- Contoh:
ü Buruk: Illegal telephone number. Call aborted. Error number 583-2R6.9. Consult your 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 assitance.
Format fisik yang sesuai:
- Gunakan kombinasi huruf besar dan kecil.
- Hindari tampilan hanya nomor kode kesalahan.
- Peringatan dengan suara berguna tapi dapat memalukan; pemakai harus dapat mengendalikannya.
Pengembangan pesan yang efektif:
- Tingkatkan perhatian pada perancangan pesan. Kejelasan dan konsistensi harus diperhatikan.
- Lakukan quality control. Pesan harus disetujui programmer, pemakai, dan spesialis IMK.
- Buat pedoman (guidelines):
ü Nada positif
o Hindari: ILLEGAL, INVALID, ERROR, WRONG PASSWORD.
o Sebaiknya: Your password did not match the stored password. Please try again.
ü Spesifik dan jelaskan masalah dalam istilah pemakai.
o Hindari: SYNTAX ERROR, INVALID DATA.
o Sebaiknya: Dress sizes range from 5 to 16.
ü Tempatkan pemakai pada kendali terhadap situasi.
o Hindari: INCORRECT COMMAND.
o Sebaiknya: Permissible commands are: SAVE, LOAD, or EXPLAIN.
ü Format yang rapi, konsisten, dan dapat dipahami.
- Lakukan uji penerimaan. Uji pesan kepada komunitas pemakai untuk mengetahui apakah dapat dipahami.
- Kumpulkan data kinerja pemakai. Bilamana mungkin, aksi pemakai perlu direkam untuk studi lebih lanjut.
· Rancangan Nonantropomorfik:
- Antropomorfik: mempunyai sifat atau pribadi manusia.
- Contoh instruksi:
ü Antropomorfik: Hi there, John! It’s nice to meet you, I see you’re ready now.
ü Nonantropomorfik: Press the Enter key to begin session.
- Hal-hal yang perlu dipertimbangkan:
ü Pemberian sifat cerdas, bebas, berkehen-dak bebas, dan berpengetahuan kepada komputer dapat menipu, membingungkan, dan menyesatkan pemakai.
ü Penting untuk membedakan orang dengan komputer.
ü Antarmuka antropomorfik dapat membuat ketegangan bagi beberapa orang.
ü Sebaiknya perancang memfokuskan pada pemakai dan menghindari kata ganti.
o Buruk: I will begin the lesson when you press RETURN.
o Lebih baik: You can begin the lesson by pressing RETURN.
o Paling baik: To begin the lesson, press RETURN.
Pedoman Perancangan Nonantropomorfik:
- Hindari menampilkan komputer sebagai manusia.
- Pilih tokoh yang sesuai dalam pengenalan atau sebagai pemandu.
- Hati-hati dalam merancang wajah manusia atau tokoh kartun dengan komputer.
- Tokoh kartun cocok digunakan di game atau software anak-anak.
- Rancang antarmuka yang dapat dimengerti, dapat diramalkan, dan dapat dikendalikan.
- Gunakan orientasi dan keadaan selesai dari sudut pandang pemakai.
- Jangan gunakan “I” ketika komputer menanggapi aksi pemakai.
- Gunakan “you” hanya untuk memandu pemakai dan menyebutkan fakta-fakta.
· Perancangan Layar
- Enam kategori prinsip yang menyingkapkan kompleksitas tugas perancang (Mullet dan Sano, 1995):
ü Elegan dan sederhana: kesatuan, dipikirkan dengan baik, dan cocok.
ü Skala, kontras dan proporsi: kejelasan, harmoni, aktivitas, dan pembatasan.
ü Organisasi dan struktur visual: pengelompokan, hierarki, hubungan, dan keseimbangan.
ü Modul dan program: aplikasi yang fokus, fleksibilitas, dan konsisten.
ü Gambar dan representasi: kesegeraan, keumuman, kohesi, dan karakterisasi.
ü Gaya: keunikan, keterpaduan, kelengkapan, dan kesesuaian.
- Beberapa butir dari pedoman tampilan layar dari Smith dan Mosier (1984):
ü Pada setiap tahap dalam sekuens transaksi, pastikan bahwa data apapun yang dibutuhkan pemakai tersedia pada tampilan.
ü Tayangkan data kepada pemakai dalam bentuk yang langsung dapat digunakan; jangan mengharuskan pemakai mengonversikan data yang ditampilkan.
ü Untuk setiap jenis tampilan data, pertahankan format yang konsisten dari satu tampilan ke tampilan lainnya.
ü Gunakan kalimat yang pendek dan sederhana.
ü Gunakan pernyataan positif, bukan negatif.
ü Gunakan prinsip logis dalam pengurutan senarai (list); jika tidak ada aturan khusus, urutkan secara alfabetis.
ü Buat kolom data alfabetis rata kiri agar mudah ditelusuri.
ü Pada tampilan banyak halaman, berikan label pada setiap halaman untuk menunjukkan hubungan dengan halaman lainnya.
ü 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.
ü Untuk kode ukuran, simbol yang lebih besar tingginya paling sedikit 1.5 kali tinggi simbol berikut yang lebih kecil.
ü Gunakan kode warna untuk aplikasi sehingga pemakai dapat membedakan dengan cepat berbagai kategori data, khususnya ketika data item terpencar pada tampilan.
ü Jika digunakan kedipan (blink), kecepatan kedip harus antara 2-5 hertz, dengan minimum duty cycle (ON interval) 50 persen.
ü Untuk tabel besar yang melebihi kapasitas display, pastikan pemakai dapat melihat kepala kolom dan label baris di semua bagian.
ü Jika kebutuhan tampilan data berubah, sediakan cara bagi pemakai (atau administrator sistem) untuk melakukan perubahan yang diinginkan.
· Warna
- Warna menarik bagi pemakai dan dapat meningkatkan kinerja, namun dapat disalahgunakan.
- Manfaat warna:
ü Menyejukkan atau merangsang mata.
ü Memberi aksen pada tampilan yang tidak menarik.
ü Memungkinkan pembedaan yang halus pada tampilan yang kompleks.
ü Menekankan organisasi logis informasi.
ü Menarik perhatian kepada peringatan.
ü Menimbulkan reaksi emosional yang kuat berupa sukacita, kegembiraan, ketakutan, atau kemarahan.
- Bahaya dalam penggunaan warna:
ü Pemasangan warna dapat membuat masalah.
ü Fidelitas warna dapat menurun pada hardware yang berbeda.
ü Pencetakan atau konversi ke media lain dapat bermasalah.
- Pedoman penggunaan warna:
ü Gunakan warna secara konservatif.
ü Batasi jumlah warna.
ü Kenali kekuatan warna sebagai teknik pengkodean untuk mempercepat atau memperlambat tugas.
ü Pastikan bahwa color coding mendukung tugas.
ü Tampilkan color coding dengan usaha pemakai yang minimal.
ü Tempatkan color coding di bawah kendali pemakai.
ü Rancang untuk monokrom dulu.
ü Gunakan warna untuk membantu pemformatan.
ü Gunakan color coding yang konsisten.
ü Perhatikan ekspektasi umum tentang kode warna.
ü Gunakan perubahan warna untuk menunjukkan perubahan status.
ü Gunakan warna pada tampilan grafis untuk kerapatan informasi yang lebih tinggi.
· Interface Design Issue
- Hyperlinks, Icons, and Buttons
ü Gunakan warna yg umum dipakai untuk menunjukkan state dari hyperlinks (selected, rollover, atau clicked)
ü Sediakan icons/buttons yang mudah dimengerti
ü Jangan paksa pengguna belajar banyak ikon-ikon baru
ü Bagaimana jika tombol(button) itu sedang aktif/dipilih à highlight atau berubah bentuknya
- Text
ü Membaca dari layar perlu waktu lebih lama dari pada dari kertas/buku
ü Pertimbangkan organisasi informasi secara hirarkis
ü Ungkapkan informasi penting lebih dulu
ü Penulisan – langsung, singkat, paragraf singkat, dan bulleted lists
ü Batasi pemakaian typefaces/font - maximum 2
ü Font Sans-serif seperti Arial, Verdana, dsb lebih mudah dibaca di layar dari pada font serif seperti Times New Roman.
- Screen Resolutions
| 2006 Statistic | 2001 Statistic |
| 640x480 : 5.3 % 800x600 : 13.2 % 1024x768 : 44.4 % 1152x864 : 5.2 % 1280x1024 : 31.9 % From Screen-Resolution.com | 640x480 : 5.7 % 800x600 : 52.5 % 1024x768 : 32.7 % 1152x864 : 2.3 % 1280x1024 : 2.9 % From statmarket.com |
ü Resolusi layar komputer terus meningkat
ü Rancanglah menggunakan resolusi yang paling banyak dipakai pengguna.
- Metafora
ü Aplikasi yang kompleks lebih mudah dipahami pengguna jika antarmuka pemakai dirancang menyerupai sebuah sistem yang sudah umum dipakai.
ü Metafora yang sesuai memungkinkan pengguna belajar/mengingat aturan atau prosedur penggunaan aplikasi yang minimal.
ü Contoh Metafora– ReadPlease 2000, Contoh Metafora– PowerDVD = Tape Deck
ü Hal-hal yang perlu diperhatikan tentang metafora:
o Dipakai untuk keseluruhan aplikasi dan bukan hanya utk satu tombol/ikon
o Penggunaan bebrapa metafora dalam satu aplikasi.
o Penggunaan metafora tidak selalu diperlukan
o Gunakan metafora yang mudah dimengerti banyak orang
o Perhatikan perbedaan budaya
Pertemuan 10 (Pencarian dan Visualisasi Informasi)
· Pendahuluan
- Komputer adalah alat bantu pencarian yang baik, tetapi antarmuka pemakai tradisional menghalangi pemakai pemula:
ü Perintah yang kompleks.
ü Operator Boolean.
ü Konsep yang menyulitkan.
- Model antarmuka objek-aksi membantu perancangan alat bantu eksplorasi informasi:
ü Memisahkan konsep tugas dari konsep antarmuka.
ü Memisahkan isu antarmuka tingkat tinggi dengan tingkat rendah.
· Query database dan pencarian kata dalam dokumen tekstual
- Query database relasional dengan SQL
ü Pemakai menulis query yang mencocokkan nilai atribut.
o SELECT NAMA, IPK FROM MAHASISWA
WHERE KOTA = ‘JAKARTA BARAT’
AND IPK > 3.9
ORDER BY NAMA
ü Powerful tetapi membutuhkan pelatihan.
ü Alternatif:
o Query-by-example
o Form-fillin queries
o Textual searches
o Natural-language queries
- Desain yang lebih baik dan konsistensi antara sistem yang berbeda dapat menghasilkan:
ü Kinerja yang lebih cepat.
ü Pengurangan asumsi keliru.
ü Peningkatan keberhasilan dalam menemukan informasi yang relevan.
- Cara pencarian tekstual yang biasa digunakan:
ü Pencarian string eksak.
ü Pencarian probabilistik.
ü Pencarian probabilistik dengan bobot kedekatan kata.
ü Pencarian boolean (and, or, not).
- Kerangka kerja untuk mengoordinasikan perancangan antarmuka pencarian tekstual:
ü Formulasi: Mengekspresikan pencarian.
o Sumber yang tepat.
o Field untuk membatasi sumber.
o Mengenali frase.
o Membolekan varian: case sensitivity, stemming, partial matches, phonetic variations, abbreviations, sinonim dari thesaurus.
ü Inisiasi aksi: Melaksanakan pencarian
o Aksi eksplisit: Tombol yang konsisten.
o Aksi implisit: Perubahan parameter.
ü Memeriksa hasil: Membaca pesan dan keluaran
o Membaca pesan penjelasan.
o Melihat daftar tekstual.
o Memanipulasi visualisasi.
o Mengendalikan ukuran himpunan hasil dan apa yang ditampilkan.
o Mengubah urutan.
o Menjelajah pengelompokan (clustering).
ü Memperbaiki: Formulasi langkah berikutnya
o Menggunakan pesan yang berarti untuk memandu dalam perbaikan pencarian.
o Memudahkan perubahan parameter pencarian.
o Memungkinkan hasil pencarian disimpan.
· Pencarian dokumen multimedia
- Photo search
ü Query by Image Content: mencari berdasarkan profil.
ü Koleksi terbatas lebih berhasil.
- Map search
ü Koordinat lintang dan bujur.
ü Kota, jadual penerbangan, cuaca.
- Design or diagram search
ü Pencarian elemen desain.
- Sound search
ü Mengenali senandung pemakai.
ü Mengedit not pada paranada.
ü Mencari kata pada percakapan.
- Video search
ü Mencari frame tertentu.
ü Zooming dan panning.
ü Dapat didukung dengan database teks.
- Animation search
ü Mencari jenis animasi.
ü Mencari transisi pada presentasi.
· Visualisasi informasi
- Visualisasi adalah (McCormick et al., 1987):
ü Metode penggunaan komputer untuk mentransformasi simbol menjadi geometrik.
ü Memungkinkan peneliti mengamati simulasi dan komputasi.
ü Memberikan cara untuk melihat yang tidak terlihat.
ü Memperkaya proses penemuan ilmiah dan mengembangkan pemahaman yang lebih dalam dan tak diduga.
ü Dalam berbagai bidang telah merevolusikan cara ilmuwan meneliti sains.
- Pepatah mengatakan “Sebuah gambar bernilai seribu kata”.
- Untuk beberapa tugas, presentasi visual — seperti peta atau foto — secara dramatis lebih mudah digunakan atau dipahami daripada deskripsi tekstual atau laporan yang diucapkan.
- Mantra pencarian informasi visual:
ü Overview dulu,
ü Zoom dan filter,
ü Lalu details on demand.
- Tipe data berdasarkan taksonomi tugas:
ü Tipe data:
o 1-D: Linear data
Ø Data linear seperti dokumen teks, program source code, daftar nama yang sekuensial.
Ø Mis.: TileBars, Document Lens, SeeSoft, Information Mural.
o 2-D: Map data
Ø Data bidang atau peta mencakup peta geografis, denah, tata letak suratkabar.
Ø Mis.: GIS, Tampilan spasial koleksi dokumen.
o 3-D: World
Ø Objek dunia nyata seperti molekul, tubuh manusia, bangunan.
Ø Pemakai harus mengatasi pemahaman posisi dan orientasi.
Ø Mis.: WebBook, VRML CAD, Visible Human Explorer.
o Temporal data
Ø Time line.
Ø Ada waktu awal dan akhir, boleh overlap.
Ø Tugas tambahan: menjadi kejadian sebelum, sesudah, dan pada periode tertentu.
Ø Mis.: Perspective Wall, Microsoft Project, Macromedia Flash, Lifeline.
o Multi-dimensional data
Ø Kebanyakan database relasional dan statistik.
Ø Mis.: DataSplash, Starfield.
o Tree data
Ø Koleksi item dengan setiap item terhubung dengan parent.
Ø Mis.: Windows Explorer, Treemaps
o Network data
Ø Data terhubung dengan sembarang jumlah item lain.
Ø Mis.: NetMap, WebMap, SeeNet, Butterfly, Visualisasi WWW lainnya.
Jenis link:
- Internal, tree
- Internal, non-tree
- Eksternal, tree
- Eksternal, non-tree
· Pemfilteran lanjut
- Tugas-tugas visualisasi informasi:
ü Overview: Memperoleh ringkasan seluruh koleksi.
ü Zoom: Melihat lebih dekat item-item yang menarik.
ü Filter: Menyaring item-item yang tidak menarik.
ü Details-on-demand: Pilih item atau kelompok dan mengambil rinciannya.
ü Relate: Melihat hubungan antaritem.
ü History: Memungkinkan undo, replay, perbaikan progresif.
ü Extract: Ekstraksi subkoleksi dan parameter query.
Pertemuan 11 (Computer-Supported Cooperative Work)
· Definisi
- Computer-Supported Cooperative Work (CSCW) adalah bidang studi yang berfokus pada perancangan dan evaluasi teknologi baru untuk mendukung proses sosial kerja, sering di antara mitra yang berjauhan.
- Hasil CSCW biasanya disebut Groupware.
- Groupware adalah jenis software yang membantu kelompok kerja (workgroup) yang terhubung ke jaringan untuk mengelola aktivitas mereka.
· Tujuan Kerja Sama
- Kemitraan terfokus: kerja sama antara dua pemakai yang saling membutuhkan untuk menyelesaikan tugas.
- Kuliah atau demo. Seseorang membagikan informasi kepada banyak pemakai di tempat lain. Waktunya dijadualkan.
- Konferensi. Komunikasi kelompok dengan tempat dan waktu yang berbeda.
- Proses kerja terstruktur. Orang yang peranannya berbeda bekerja sama dalam tugas yang berhubungan.
- Electronic commerce. Kerja sama jangka pendek untuk mencari informasi dan memesan produk, dan jangka panjang untuk perjanjian atau kontrak bisnis.
- Rapat dan dukungan keputusan. Rapat tatap muka menggunakan komputer dengan membuat kontribusi simultan.
- Teledemokrasi. Pemerintah melakukan rapat jarak jauh, menampilkan komentar dewan, mencari konsensus melalui konferensi, debat, dan pemungutan suara online.
Pengelompokan Sistem Kerja Sama:
- Matriks waktu-ruang untuk mengelom-pokkan sistem kerja sama (Ellis et al. 1991):
· Asinkron Tersebar: Tempat dan Waktu Berbeda
ü Sifat: struktur terlalu bebas, terlalu membuat kewalahan, dan transien.
ü Tools:
o Filtering (Message rules pada Microsoft Outlook Express).
o Archiving (menyimpan pesan lalu).
o Forwarding (meneruskan pesan).
o Mailing lists.
ü Dapat mengandung gambar, suara, animasi, attachments berupa file dsb.
o Dampak negatif: virus.
ü Membuat email menjadi universal membutuhkan (Anderson et al., 1995):
o Peningkatan penyederhanaan.
o Peningkatan pelatihan.
o Pemfilteran yang lebih mudah.
o Hardware berbiaya murah.
o Jasa jaringan
- Newsgroups dan komunitas jaringan
ü Diskusi elektronik terfokus oleh kelompok.
ü USENET newsgroups
o Pemakai membaca catatan sebelumnya dan menanggapi.
o Terbuka bagi umum.
o Dapat di-search melalui web.
ü Mailing list services
o Pemakai harus berlangganan.
o Menggunakan email.
o Bisa ditengahi moderator.
ü Online conferences
o Mempunyai alat bantu untuk voting, direktori online pemakai dan dokumen.
ü Web discussion board
ü Online newsletters
ü Komunitas jaringan bisa kontroversial: hacker, teroris, kegiatan rasis.
- Collaborative Authoring
ü Wiki
o Situs web yang memungkinkan pengunjung dengan mudah menambah, menghapus, atau mengedit isi, sering kali tanpa registrasi terlebih dahulu.
o Wikipedia : ensiklopedia
o Wiktionary : kamus dan thesaurus
o Wikibooks : textbook dan manual
o Wikinews : berita
ü Karakteristik wiki
o Artikel bisa di edit kapanpun oleh siapapun (dengan pembatasan tertentu utk protected articles)
o Artikel bisa diedit menggunakan web browser.
o Artikel dilengkapi akses ke history/versioning
o Artikel dilengkapi akses ke halaman diskusi tentang artikel tersebut
o Penambahan atau modifikasi terbaru bisa dimonitor
- Wiki
- Blogs
· Sinkron Tersebar: Tempat Berbeda, Waktu Sama
- Group editor: mengedit dokumen bersama. Contoh: GROVE.
- Shared workspace: menulis atau menggambar bersama (whiteboard), desain bersama, membuat dokumen bersama, mendukung kerja sama tim yang fleksibel. Contoh: TeamRooms, SEPIA.
- Shared screen: Melihat layar dan mengoperasikan sistem yang sama. Contoh: Timbuktu, PC Anywhere, Windows XP Remote Assistance.
- Interactive game networks: Bermain game yang sama melalui jaringan. Contoh: StarCraft, WarCraft, Counter Strike.
- Chat: Diskusi melalui antarmuka teks. Contoh: IRC, ICQ.
- Video conferencing & teleconferencing: Konferensi real-time dengan kemampuan audio dan video. Contoh: NetMeeting, CU-SeeMe, Polycom DTVC products (dulu PictureTel).
· Tatap Muka: Tempat dan Waktu Sama
- Tampilan bersama dari komputer dosen: penggunaan proyektor untuk menayangkan presentasi.
- Audience response units. Menjawab pertanyaan pilihan ganda dengan piranti khusus pada meja peserta.
- Text-submission workstations. Bercakap-cakap menggunakan keyboard dan software sederhana.
- Brainstorming, voting, and ranking. Digunakan pada electronic classroom atau meeting room. Mis. GroupSystems.
- File sharing. Penggunaan komputer dalam jaringan untuk memakai file secara bersama.
- Shared workspace. Ruang kerja yang sama yang dapat diakses oleh semua pemakai.
- Group activities. Para pemakai dapat mengerjakan soal, dan yang butuh bantuan dapat “mengangkat tangan” untuk menampilkan tampilannya pada shared display atau pada tampilan pemimpin.
· Penerapan CSCW pada Pendidikan
- Koordinasi siswa dalam kelas virtual adalah proses yang rumit namun dapat memungkinkan pengalaman pendidikan yang mendorong bagi orang-orang yang tak dapat bepergian ke kelas biasa.
- Pengalaman belajar oleh individu yang lebih aktif termasuk menggunakan software di jam pelajaran, misalnya untuk:
ü Menulis esai atau puisi.
ü Mencari peristiwa-peristiwa penting dalam kelas sejarah.
ü Menjalankan simulasi bisnis untuk meningkatkan kualitas produk.
ü Melakukan analisis statistik.
ü Melakukan landscaping dengan CAD dan paket grafik.
ü Menulis program komputer.
ü Mencari di Internet.
Pertemuan 12 (Hypermedia dan World Wide Web)
· Pengantar
- Hypertext pertama kali diperkenalkan oleh Vannevar Bush, Juli 1945, pada artikel berjudul “As We May Think”.
- Bush mengemukakan:
ü Akan adanya masalah luapan informasi.
ü Perlu dibuat piranti yang memungkinkan acuan silang dalam dokumen dan antardokumen dengan mudah.
ü Usulan piranti eksplorasi informasi yang diberi nama Memex.
- Hypertext dan hypermedia adalah:
ü Dokumen nonsekuensial dan nonlinear.
ü Jaringan simpul (artikel, dokumen, file, kartu, halaman, frame, layar) yang dihubungkan dengan link (acuan silang atau citation).
- Hypertext: digunakan untuk menyebut aplikasi berisi hanya teks.
- Hypermedia: untuk menyampaikan keterlibatan media lain: suara dan video.
· Sejarah sistem hypertext
- Memex (1945) oleh Bush, berbasis mikrofilm dan eye-tracking, hanya konsep.
- Augment/NLS (1962-1976) oleh Doug Engelbart.
- Xanadu (1965) oleh Ted Nelson. Pertama kali istilah “hypertext” diperkenalkan.
- Aspen Movie Map (1978) oleh Andrew Lippman dan MIT Architecture Machine Group: sistem hypermedia pertama.
- Hyperties (1983) oleh Ben Shneiderman, kemudian dipasarkan dan diperluas oleh Cognetics Corp.
- HyperCard (1987) oleh Bill Atkinson, diberikan gratis dari komputer Apple.
- World Wide Web (1993) oleh Tim Berners Lee et al. di CERN, Geneva, Switzerland menandai awal perkembangan pesat hypertext di Internet.
· Hypertext dan Hypermedia
- Hypertext memperluas teks linear tradisional dengan:
ü Kesempatan melompat ke berbagai artikel yang berhubungan.
ü Backtracking yang memudahkan.
ü Indeks dan daftar isi yang bisa diklik.
ü Pencarian string.
ü Bookmarks (favorites).
ü Alat bantu navigasi lainnya.
- Langkah pertama dalam membentuk hypertext yang efektif adalah memilih proyek yang memenuhi Aturan Emas Hypertext (The Golden Rules of 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.
- Perancangan buruk hypertext yang sering ditemui (Rivlin et al.):
ü Terlalu banyak link.
ü Rantai link yang panjang untuk mencapai materi yang relevan.
ü Terlalu banyak artikel panjang yang membosankan.
- Fitur-fitur yang perlu didukung oleh alat bantu pembuatan hypertext:
| Aksi | Objek |
| Import | An article or node |
| Edit | A link |
| Export | Collections ofarticles or nodes |
| | Webs of links |
| Search | Entire hypertext |
- Fitur-fitur yang perlu dipertimbangkan dalam alat bantu pembuatan situs Web:
ü Macam fungsi edit yang tersedia.
ü Ketersediaan daftar link.
ü Verifikasi link.
ü Macam perintah pemformatan tampilan.
ü Ketersediaan fungsi search and replace.
ü Kendali atas warna.
ü Kemampuan untuk berpindah dengan mudah dari mode author ke browser.
ü Ketersediaan fasilitas grafik dan video.
ü Kemungkinan kolaborasi.
ü Kompresi data.
ü Kontrol keamanan.
ü Enkripsi.
ü Kehandalan.
ü Kemungkinan untuk integrasi dengan software dan hardware lain.
ü Impor dan ekspor format pertukaran standar.
- Dalam membuat dokumen untuk hypertext perlu diperhatikan:
ü Kenali pemakai dan tugasnya.
ü Pastikan struktur yang berarti terpenting. Dasari pada presentasi informasi dan bukan teknologi.
ü Terapkan keterampilan yang beraneka ragam: spesialis informasi, spesialis isi, dan teknologis.
ü Hargai pemilahan. Atur informasi menjadi bongkah-bongkah yang membahas satu topik, tema, atau ide.
ü Tunjukkan hubungan yang ada. Terlalu sedikit link membosankan; terlalu banyak membuat kewalahan.
ü Pastikan penjelajahan sederhana.
ü Rancang setiap layar dengan hati-hati. Fokus perhatian jelas, judul memandu, link menjadi panduan yang berguna.
ü Gunakan beban kognitif yang rendah. Minimalkan beban ingatan jangka pendek.
· World Wide Web
- Banyaknya halaman Web menghasilkan:
• Komentar distopian tentang banjir informasi.
• Visi utopian tentang memanfaatkan banjir informasi itu untuk hal-hal yang membangun.
- Desain untuk situs Web yang baik
- 10 kesalahan utama desain Web
- 10 pedoman terpenting usability homepage
· Perancangan situs web yang baik
- Desain untuk web yang baik menurut Patrick Lynch, 1995
ü Menyeimbangkan struktur dan hubungan dari menu atau home page dengan halaman isi atau grafik dan dokumen yang di-link.
ü Tujuannya membangun hierarki menu dan halaman yang berasa alami dan terstuktur dengan baik bagi pemakai, dan tidak mengganggu pemakaian situs Web atau menyesatkan mereka.
- 10 kesalahan utama desain web(Jakob Nielsen, 2007):
ü Bad Search.
ü PDF Files for Online Reading.
ü Not Changing the Color of Visited Links.
ü Non-Scannable Text.
ü Fixed Font Size.
ü Page Titles With Low Search Engine Visibility.
ü Anything That Looks Like an Advertisement..
ü Violating Design Conventions.
ü Opening New Browser Windows.
ü Not Answering Users' Questions.
- 10 Pedoman Terpenting Usability Homepage (Jakob Nielsen, 2002)
ü Buat maksud homepage jelas: Siapa Anda dan apa yang Anda lakukan.
o Sertakan tagline satu kalimat.
o Tulis judul window dengan ketertampakan yang baik pada search engine dan bookmark.
o Kelompokkan informasi perusahaan dalam tempat yang dapat dibedakan.
ü Bantu pemakai menemukan yang dibutuhkan.
o Tegaskan tugas prioritas tertinggi situs.
o Sertakan kotak input pencarian.
ü Singkapkan isi situs.
o Tampilkan contoh isi situs.
o Awali nama link dengan kata kunci terpenting.
o Tawarkan akses yang mudah untuk fitur homepage terbaru.
ü Gunakan desain visual untuk meningkatkan desain interaksi, bukan mendefinisikan.
o Jangan memformat isi kritis secara berlebihan, misalnya area navigasi.
o Gunakan gambar yang berarti.
· Genre dan tujuan bagi perancang
- Cara mengategorikan situs Web:
ü Berdasarkan pendiri: individu, kelompok, universitas, perusahaan, organisasi nirlaba, badan pemerintah.
ü Berdasarkan tujuan pendiri: menjual produk, mengiklankan produk, memberi informasi dan pengumuman, menyediakan akses, menawarkan jasa, membuat diskusi, mendidik masyarakat.
ü Berdasarkan jumlah halaman atau informasi yang tersedia. Mis.:
o 1-10: biografi, ringkasan proyek.
o 5-50: makalah ilmiah, konferensi.
o 50-500: buku, laporan tahunan.
ü Berdasarkan ukuran keberhasilan.
o Bagi individu: mencari pekerjaan, mencari teman.
o Bagi perusahaan: jumlah pengunjung per hari.
o Bagi penyedia akses: jumlah waktu pemakaian.
o Bagi lainnya: promosi.
· Model antarmuka objek aksi untuk perancangan situs web
- Model OAI mendorong perancang situs web memfokuskan empat komponen dalam dua bidang:
ü Tugas
o Objek informasi terstruktur (hierarki, jaringan).
o Aksi informasi (pencarian, linking).
ü Antarmuka
o Metafora untuk objek informasi (rak buku, ensiklopedia).
o Penanganan aksi (query, zoom).
- Strategi agregasi informasi
ü Daftar pendek tak terstruktur: fitur pedoman kota, divisi organisasi, proyek terbaru.
ü Struktur linear: kalender peristiwa.
ü Larik atau tabel: jadual penerbangan.
ü Hierarki, tree: benua-negara-kota.
ü Multitree, faceted retrieval: foto diurutkan berdasarkan tanggal, jurufoto, lokasi, topik.
ü Jaringan: World Wide Web, kutipan jurnal.
- Hal-hal yang mempengaruhi kepuasan subjektif awal pemakai
ü Kepuasan subjektif awal pemakai sangat kuat ditentukan oleh hal-hal berikut (Horton et al., 1996):
o Kekompakan dan faktor percabangan. Panjang halaman dan jumlah link.
o Pengurutan, pengelompokan, dan penegasan.
o Dukungan akses universal.
o Desain grafis yang baik.
o Dukungan navigasi.
- Pengujian dan pemeliharaan situs web
ü Disarankan uji usability.
ü Uji pada lingkungan yang realistik.
ü Uji in-house dini dengan jumlah pemakai terbatas.
ü Uji medan yang intensif.
ü Proses peluncuran bertahap.
ü Log pemakaian berguna.
ü Umpan balik pemakai.
ü Ekspektasi pemakai dan kebijakan organisasi memandu tingkat perubahan.
Pertemuan 13 (User Manual, Online Help dan Tutorial)
· Bentuk-bentuk manual pengguna tercetak
- Brief getting-started notes
- Introductory tutorial
- Thorough tutorial
- Quick reference card
- Conversation manual
- Detailed reference manual
· Cara Pengelompokkan materi tercetak dan online
|
| Paper | Online |
| I want to buy it | sales brochure, fact sheet | demonstration program |
| I want to learn it | tutorial | Manual, tutorial, guide, animated demonstration |
| I want to use it | User’s Manual | Manual, Help, Context- Sensitive Help |
| I want to solve a problem | FAQ | Help, FAQ, online community |
· User-manual guideline
- Pilih pendekatan berorientasi aksi (action oriented)
ü Sediakan kesempatan untuk langsung praktek
ü Dorong dan dukung eksplorasi dan inovasi
ü Hargai integritas kegiatan pengguna
ü Beri contoh secukupnya
- Biarkan pekerjaan pengguna menentukan organisasi
ü Rancanglah aktifitas instruksi yang sesuai dengan pekerjaan pengguna yang sesungguhnya
ü Paparkan konsep tugas sebelum memaparkan konsep dan aksi antarmuka
ü Ciptakan komponen instruksi yang mencerminkan struktur pekerjaan
- Dukung pencegahan dan penanganan kesalahan
- Dukung kemudahan pembacaan
· Materi Online: user manual, online help, context sensitive help, online tutorial, demonstrations, guides
- Keuntungan Manual Online:
ü Keuntungan fisik
o Informasi tersedia dimana komputer tersedia
o Tidak membutuhkan tempat khusus
o Bisa di-update dengan cepat dan biaya murah
ü Navigasi
o Informasi spesifik bisa dicari dengan cepat jika online manual dilengkapi indeks, daftar isi, daftar gambar, glosari, daftar keyboard shortcut
o Pencarian bisa dilakukan dengan lebih cepat
o Tersedia link baik internal maupun eksternal
ü Layanan interaktif
o Tersedia layanan bookmark dan annotate
o Penulis bisa memanfaatkan multimedia leih banyak
o Tersedia online community
o Pengguna cacat atau pengguna uang mobile bisa memanfaatkan screen reader dan mendengarkan instruksi
ü Keuntungan ekonomis
o Lebih murah untuk digandakan dan didistribusikan
- Kekurangan Manual Online:
ü Lebih sulit membaca dari layar dibandingkan membaca dokumen tercetak
ü Display sering memuat lebih sedikit informasi, juga resolusi layar lebih rendah dibandingkan kertas
ü Antar muka pemakai mungkin baru dan membingungkan bagi pemula
ü Navigasi melalui banyak layar bisa mengganggu konsentrasi dan pembelajaran
ü Membagi ruang layar untuk dua window, satu untuk ekerja dan satu untuk online material, mengurangi ruang untuk bekerja.
ü Peralatan dengan layar kecil seperti HP dan PDA tidak cukup punya ruang untuk menampilkan online help/tutorial.
- Membaca teks kertas dari layar:
ü Poor fonts, especially on low resolution displays
ü Low contrast between characters and the background
ü Fuzzy character boundaries
ü Emitted light from displays may be more difficult to read by than reflected light from paper
ü Glare may be greater on displays
ü Screen flicker can be a problem
ü Curved display surface may be problem
ü Small displays require more frequent page turning
ü Reading distance can be greater than for paper
ü Displays are fixed in place
ü Display placement may be too high for comfortable reading
ü Layout and formatting problems
ü Reduced hand and body motions with displays as compared to paper may be fatiguing
ü Rigid posture for displays may also be fatiguing
ü Unfamiliarity of displays and the anxiety that the image may disappear can increase stress
· Pembuatan Bantuan Online
- Kearsley's guidelines for online help systems:
ü Buat help system mudah di akses dan mudah ditutup
ü Buat help system se spesifik mungkin
ü Kumpulkan data untuk menentukan halp/bantuan online apa yang diperlukan pengguna
ü Berikan kendali sebanyak mungkin pada pengguna
ü Buat pesan-pesan bantuan akurat dan lengkap
ü Jangan menggunakan bantuan online sebagai kompensasi bagi rancangan antarmuka yang buruk
- Manual Online
ü Reproduksi manual tercetak dalam bentuk online
o paper page layouts may not convert well
o dealing with figures problematic
o attractive if users have large enough display (full page)
o close match between printed and online versions useful
ü Ditambah dengan fitur-fitur online khusus
o string search
o multiple indices
o multiple tables of contents
o tables of figures
o electronic bookmarks
o electronic annotations
o hypertext traversal
o automatic history keeping
ü Paling efektif jika dilakukan perancangan ulang agar sesuai dengan media elektronik untuk memanfaatkan:
o multiple windows
o text highlighting
o color
o sound
o animation
o string search with relevance feedback
ü Daftar isi yang di desain utk selalu tampak di samping halaman text sangat penting
ü Pengguna pemula membutuhkan tutorial
ü Intermittent knowledgeable users bisa memahami deskripsi ringkas dari sintaks dan semantik antarmuka
ü Daftar kata kunci (Keyword lists) akan lebih baik dengan pengelompokan berdasarkan kategori-kategori mudah dimengerti
- Tutorial Online bisa sangat efektif karena pengguna ...(Al-Awar et al)
ü Tidak harus berpindah-pindah antara layar dan materi toturial
ü Berlatih ketrampilan-ketrampilan yang dibutuhkan utk menggunakan sistem
ü Bisa bekerja sendiri tanpa harus malu karena membuat kesalahan di depan instruktur atau siswa lain
- Demonstration systems:
ü Didistribusikan dalam bentuk disk, CD-ROM, atau melalui Internet
ü Dirancang untuk menarik pengguna potensial
ü Biasanya memamerkan fitur-fitur sistem menggunakan animasi, gambar berwarna, dan suara.
ü Persyaratan-persyaratan yg harus dipenuhi antarmuka :
o Mampu menarik dan menjaga ketertarikan pengguna
o Mampu menyampaikan informasi
o Membangun image produk yang positif
ü Kendali atas informasi yang disediakan
o automatic or manual pacing
o length of demonstration (short versus in-depth)
o stop
o replay
o skip
- Pemandu :
ü Bisa berupa seorang yang terkenal atau figur kartun yang membimbing pengguna menjelajahi informasi
ü Jaringan bantuan melalui email
o Dikirim ke help desk atau personil yang sudah ditentukan
o Dikirim ke daftar umum dalam organisasi
o Pengguna harus mengungkapkan kekurang pengetahuan mereka secara publik
o Ada resiko mendapat nasihat yang tidak tepat
ü Frequently asked questions (FAQ) lists for newcomers
sumber : himti.org
