6/7/2011
Pendahuluan Pertemuan 9
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
Strategi Multiple-Windows
Windows Housekeeping ◦ Pada tampilan kecil, window terlalu kecil untuk dapat efektif ◦ Perlu memberikan informasi yang cukup dan keluwesan untuk menyelesaikan tugas, sementara mengurangi aksi window housekeeping, clutter yang mengalihkan perhatian, pergerakan mata dan kepala
adalah aktivitas mengurusi window yang berhubungan dengan dunia komputer, tetapi tidak langsung berhubungan dengan tugas pemakai
1
6/7/2011
Perancangan Window Tunggal
Title
Contoh single window
Komponen-komponen window : Judul (titles) Untuk identifikasi window Beberapa window tidak mempunyai judul Title bar dapat berubah warna untuk menunjukkan window yang sedang aktif
Scroll Bar
Bingkai (border or frames) o Untuk menandai batas-batas window
Scroll Bars
Frame
o Untuk menggulung (memindahkan tampilan isi window)
Windows action • Open action
Windows action • Open action
•
Open, place, & size action
• Open, place, & size action
•
Close action
• Close action
•
Resize action
• Resize action
•
Move action
• Move action
•
Bring forward action
• Bring forward action
2
6/7/2011
Aksi--aksi window meliputi : Aksi 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
Lanjutan…
Window ditampilkan menggunakan pendekatan perhitungan yang menentukan tempat dan ukuran berdasarkan windowwindow yang sudah ada di tampilan Window dibuka dekat fokus Window pesan ditampilkan secara automatis
Aksi
membuka, menempatkan, dan menentukan ukuran (open place and size action) ◦ Window tampil ditempat yang dirancang dengan ukuran yang sama, sehingga dapat diramalkan tetapi sering harus dipindahkan dan diubah ukurannya ◦ Window ditampilkan pada tempat dan ukuran terakhir
Aksi
menutup (close action)
◦ Window mempunyai ikon kecil untuk menutup dirinya ◦ Window dapat juga ditutup dengan tombol close, cancel, atau ok ◦ Umpan balik sangat bermanfaat
3
6/7/2011
Aksi mengubah ukuran (resize action) ◦ ◦ ◦ ◦
Mac OS : hanya dari pojok kanan bawah NeXT : pojok kanan bawah dan kiri bawah NeWS, SmallTalk : pilihan menu “size” Microsoft Windows, OSF/Motif, OS/2, dll, memungkinkan resize dari seluruh pojok dan keempat sisi ◦ Beberapa sistem memungkinkan window diminimasi dan dimaksimasi
Aksi memindahkan (move (move action) action) Xerox STAR, Windows 1.0 : pilih menu item “move” lalu klik tujuan Mac OS, Microsoft Windows: Title bar dapat diseret untuk memindahkan window Beberapa sistem mengharuskan seluruh window terlihat di layar, sementara yang lain membolehkan hanya sebagian saja
minimize maximize
close
Aksi membawa ke depan atau mengaktifkan (bring forward or activation action) action)
Ketika digunakan window bertumpuk, perlu dibuat mekanisme untuk membawa window ke depan dan mengaktifkannya Cara-cara : ◦ ◦ ◦ ◦
Mengetikkan perintah dengan keyboard Mengklik pada menu daftar window yang terbuka Mengklik bagian apapun dari window Memindahkan kursor ke atas window
4
6/7/2011
Perancangan Multiple Window
Tantangan untuk memberi akses kepada banyak sumber informasi telah membangkitkan banyak solusi : 1. 2. 3. 4.
Multiple monitors Rapid display flipping Split displays Fixed number, size, and place, and spacefilling tiling 5. Variable size, place, and number, and spacefilling tiling
Perancangan Multiple Window
Multiple monitors
6. Non-space-filling tiling 7. Piles-of-tiles 8. Automatic panning 9. Window zooming 10. Arbitrary overlaps 11. Cascades
Multiple Monitor
◦ Beberapa monitor digunakan untuk menampilkan informasi
Rapid display flipping ◦ Perpindahan diantara tampilan pada satu monitor secara automatis atau dikendalikan pemakai
5
6/7/2011
Multiple Monitor
Split displays ◦ Tampilan dibelah untuk menampilkan dua bagian tampilan atau lebih
Fixed number, size & place, & space filling tilling ◦ Pembelahan tampilan sederhana secara vertikal atau horizontal dengan jumlah, ukuran dan posisi tile selalu sama
Split display pada game
Split display pada cctv
6
6/7/2011
Variable size,place & number, & space filling tiling
◦ Memperbolehkan window ditumpuk penuh seperti menumpuk ubin
◦ Window yang dibuka memotong window lain secara horizontal atau vertikal untuk menyediakan ruang baginya
◦ Memperbolehkan celah diantara tile tetapi penumpukan tidak
Window zooming ◦ Pemakai dapat memperluas ukuran window hingga selayar penuh dan kemudian memperkecilnya kembali ke ukuran semula Contoh : Zoom In & Zoom Out
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
Non-space filling tiling
Piles of tiles
Cascades ◦ Aplikasi metafora “tumpukan kartu” dengan mengurutkan window secara berundak – undak dari kiri atas ke kanan bawah atau dari kiri bawah ke kanan atas
Arbitrary overlaps ◦ Window dapat digerakkan ke titik manapun dari tampilan dan sebagian dapat berada diluar tampilan terpotong oleh batas layar. ◦ Contoh : MDI form & MDI Child pada VB Dari kiri atas ke kanan bawah Dari kiri bawah ke kanan atas
7
6/7/2011
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 ◦ Gerakan dari scroll bar yang satu menyebabkan yang lainnya ikut menggulung isi window Scroll B ◦ Berguna untuk membandingkan dua versi dokumen A.doc B.doc ◦ Contoh :
Hierarchical browsing ◦ Window yang satu berisi daftar isi atau daftar pilihan yang jika dipilih akan menampilkan isinya di window lainnya ◦ Contoh : windows explorer, “Online View” pada Microsoft Word
Scroll A
Direct
Selection
◦ Mengklik icon, kata pada tulisan, atau nama variabel pada program memunculkan window yang memperinci penjelasannya ◦ Contoh : windows Help, e-book
Chapter 3.1
◦ Menunjukkan pandangan high level dari peta, grafik, foto, atau gambar lainnya di sudut pandang tertentu dan rinciannya di window yang lebih besar
Chapter 3.2
Chapter 3
Table of content
Two-dimensional browsing
klik
Chapter 3.2.1
Chapter 1 Chapter 2
klik
Chapter 3.2
Chapter 3.2.2
Chapter 3.3 Chapter 3
8
6/7/2011
Dependent-windows opening Dengan membuka satu window, window-window lainnya yang tergantung equalizer dengannya (dependent windows) terbuka juga pada lokasi yang dekat dan memudahkan playlist Contoh : window player, equalizer, dan playlist pada winamp
player
Dependent-windows
closing
◦ Menutup window dapat menutup semua dependent windows Save
or open window state
◦ Keadaan terakhir sistem meliputi window dan isinya dapat disimpan
Pertemuan 10
Computer Supported Cooperative Work
9
6/7/2011
CSCW
Computer supported cooperative work (CSCW) adalah bidang studi yang mempelajari perancangan, pengembangan, dan penggunaan groupware
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 ◦ Menggunakan e-mail, voice mail, telepon, video mail ◦ Contoh: mailing list, forum
Lanjutan… Groupware atau group productivity software adalah jenis software yang membantu kelompok kerja (workgroup) yang terhubung ke jaringan untuk mengelola aktivitas mereka Bacaan tambahan : http://www.usabilityfirst.com/groupware/
Lanjutan… lecture
or demo (kuliah atau
demo) ◦ Sesorang membagikan informasi kepada banyak pemakai di tempat yang berbeda ◦ Waktu dijadualkan untuk semua peserta ◦ Tidak perlu history tapi boleh direkam ◦ Contoh : tatap muka kuliah
10
6/7/2011
Lanjutan…
necessary
partners (mitra saling membutuhkan) ◦ Kerja sama diantara dua orang yang saling membutuhkan untuk menyelesaikan tugas ◦ Contoh : programmer & system analyst ,astronot dan kendali bumi
Lanjutan…
Lanjutan…
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
Lanjutan…
structured
work process (proses kerja terstruktur) ◦ sekumpulan orang dengan peran yang berbeda bekerja sama untuk tugas tertentu yang berhubungan ◦ contoh: panitia penerimaan mahasiswa baru, wedding organizer
electronic classroom or meeting room (kelas elektronik atau ruang rapat elektronik) ◦ pertemuan tatap muka dengan menggunakan computer ◦ setiap pemakai dapat memberikan kontribusi ◦ anonimitas (kerahasiaan) sangat berperan
11
6/7/2011
Matriks WaktuWaktu-Ruang untuk System Kooperasi :
Cooperative system sama
synchronous
waktu berbeda
sama
Asynchronous
Waktu sama Tempat sama
Synchronous Asynchronous interaction Interaction / (project scheduling) Face to face (classroom, meeting rooms)
Tempat beda
Synchronous Asynchronous distributed distributed (chatting, game (e-mail) online)
interaction
tempat berbeda
distributed
Asinkron Tersebar : Waktu Berbeda, Tempat Berbeda
Lanjutan…
Electronic Sifat
mail (e-mail)
:
◦ Struktur terlalu bebas ◦ Terlalu membuat kewalahan ◦ Hanya sesaat (transien)
Waktu berbeda
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 email, atau mengirimkan e-mail kepada alamatalamat yang terdaftar)
12
6/7/2011
Lanjutan… Pada
awalnya hanya mengandung teks, tetapi sekarang dapat juga mengandung gambar, suara, animasi, web links, dll. Dapat mempunyai attachments (lampiran) berupa file
Lanjutan…
Mailing
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
Lanjutan…
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
13
6/7/2011
File-transfer programs Menggunakan FTP (File Transfer Protocol) Memungkinkan file-file di-download (salin ke computer local) dan diupload (salin ke server agar tersedia secara online)
Sinkron Tersebar : Tempat Berbeda, Waktu Sama
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
Lanjutan… Shared
Group
editing
◦ Beberapa pemakai dapat melihat dan mengedit dokumen secara bersamaan ◦ Contoh : GROVE system (GRoup Outline Viewing Editor), rIBIS
screen
◦ Beberapa orang dapat melihat layar yang sama dan mengoperasikan system yang sama ◦ Contoh : layar billboard iklan
14
6/7/2011
Lanjutan… Interactive
Lanjutan…
game networks
Chat
◦ pemakai dapat mengobrol dan berdiskusi dengan banyak pemakai lain melalui antarmuka teks ◦ contoh : Internet Relay Chat (IRC), Web Chat
◦ pemakai dapat bermain melawan pemakai lain pada game yang sama melalui jaringan ◦ Contoh : dota game, ragnarok, nexia
Lanjutan…
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
15
6/7/2011
Tatap Muka :Tempat Sama, Waktu Sama
Lanjutan…
Teleconferencing
◦ konferensi real-time dengan audio dan/atau video melalui jaringan yang memungkinkan juga : pemakaian aplikasi bersama menulis atau menggambar pada whiteboard
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
◦ contoh : Microsoft NetMeeting
Lanjutan…
Audience
Lanjutan…
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
16
6/7/2011
Lanjutan…
Lanjutan…
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
Lanjutan…
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)
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
Lanjutan…
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 pada shared display atau pada tampilan workstation orang lain
17
6/7/2011
Pertemuan 11
Pendahuluan
Alat Bantu Eksplorasi Informasi
Pencarian String, Database Query, dan Indeks Filter
adalah pola yang dipakai untuk menyaring data sedemikian sehingga hanya data yang cocok dengan pola diperbolehkan lewat
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
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)
18
6/7/2011
Hypertext dan Hypermedia Pencarian
Fleksibel
◦ Rainbow search ◦ Search expansion ◦ Sound search ◦ Picture search ◦ Photograph libraries
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)
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
biasanya digunakan untuk menyebut aplikasi berisi hanya teks Hypermedia digunakan untuk menyampaikan keterlibatan media lain, khususnya gambar, animasi, suara, dan video
19
6/7/2011
Aturan emas Hypertext (Three Golden Rule of Hypertext)
Three Golden Rule 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
politic
education
entertainment
healthy
Social & culture sport
technology
user
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
20
6/7/2011
Kelengkapan Antarmuka Pemakai Hypertext
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
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
21
6/7/2011
Menyusun atau menyunting hypertext Pertimbangan-pertimbangan yang perlu diperhatikan: Kenali pemakai dan tugas-tugasnya Pastikan struktur yang berarti terpenting Terapkan ketrampilan yang beraneka ragam Hargai pemilahan Tunjukkan hubungan yang ada
Pencatatan
◦ History jalur dan bookmark ◦ Anotasi ◦ Kemampuan ekspor ◦ Penyimpanan status dan hasil pencarian
Multimedia Multimedia : penggunaan lebih dari sekedar teks pada aplikasi. Meliputi citra, suara, video, animasi Macam-macam media penyimpan pada multimedia :
Konsisten dalam penamaan dokumen Bekerja dari daftar referensi utama Pastikan penejelajahan sederhana Rancang setiap layar dengan hati-hati Gunakan beban kognitif yang rendah
◦ 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
22
6/7/2011
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): 352x240 pixel, 30 fps MPEG-2 (untuk DVD): 720x480 atau 1280x720 pixel, 60 fps MPEG-3 (untuk HDTV), sudah tercakup MPEG-2 sehingga tidak jadi dipakai MPEG-4 (sedang dikembangkan berbasis Quick Time)
23
