Pertemuan 7 : Menu, Form, dan Kotak Dialog

Organisasi Semantik Menu

•       Binary menus

•       Multiple selection menus

-       Multiple-item menus / radio buttons

-       Pull-down and pop-up menus

-       Scrolling and two-dimensional menus

-       Alphasliders

-       Embedded links

-       Iconic menus, toolbars, or palettes

·         Linear Sequences & Multiple Menus

·         Tree-Structured Menus

-       Ketika kumpulan item berkembang dan menjadi sulit dipelihara dalam kendali intelektual, perancang dapat membentuk kategori item-item yang serupa, membentuk struktur tree.

-       Contoh pengelompokan:

–      Laki-laki, perempuan

–      Hewan, sayuran, mineral

–      Fonts, size, style, spacing

•       Depth versus Breadth:

–      Depth: jumlah level.

–      Breadth: jumlah item per level.

•       Pengelompokan semantik:

–      Kelompokkan item-item yang serupa secara logis.

–      Bentuk kelompok yang melingkupi semua kemungkinan.

–      Pastikan item tidak overlap.

–      Gunakan peristilahan yang dikenal.

•       Acyclic & Cyclic Menu Networks

-       Kadang-kadang lebih cocok daripada struktur tree.

-       Memungkinkan jalur dari bagian tree yang berbeda, tidak mengharuskan pemakai memulai dari menu utama.

-       Secara alami terdapat pada:

o    Hubungan sosial.

o    Jalur transportasi.

o    Kutipan dalam jurnal ilmiah.

-       Membutuhkan penelusuran balik.

Urut-urutan Presentasi Item

•       Ketika item-item menu telah dipilih, urutan presentasinya perlu diperhatikan.

•       Beberapa dasar pengurutan:

–      Waktu (kronologis).

–      Numeris (menaik atau menurun).

–      Sifat fisik (panjang, luas, volume dsb. Secara menaik atau menurun).

•       Banyak kasus pengurutan tidak mempunyai aturan pengurutan yang berhubungan dengan tugas, sehingga perlu dipertimbangkan:

–      Pengurutan alfabetis istilah-istilah.

–      Pengelompokan item-item serupa (dibatasi dengan pemisah antarkelompok).

–      Yang sering digunakan ditempatkan di awal.

–      Yang paling penting ditempatkan di awal.

Pergerakan Cepat pada Menu

•       Menu dengan typeahead

•       Nama menu atau bookmarks

•       Menu macros

Menu dengan Typeahead

•       Penting jika menu sudah sering digunakan sementara waktu respons atau kecepatan tampil lambat.

•       Pendekatan BLT (Bacon, Lettuce, Tomato Sandwich): pembentukan mnemonik dari penggabungan huruf-huruf pilihan menu.

Nama Menu atau Bookmarks

•       Penamaan sederhana memudahkan pemakai mengakses menu secara langsung.

•       Web browser menyediakan bookmarks atau favorites sebagai jalan pintas bagi pemakai untuk menuju situs yang pernah dikunjungi.

Menu Macros

•       Perintah yang sering digunakan dapat direkam dan disimpan sebagai makro.

•       Pada beberapa software, makro dapat ditempatkan di toolbar sebagai ikon.

•          Tata Letak Menu : Judul

-       Menu tunggal: Judul yang deskriptif.

-       Menu tree: Nama pilihan harus sama dengan judul halaman yang dipanggil.

•          Penamaan pilihan menu

-       Gunakan peristilahan yang dikenal dan konsisten.

-       Pastikan item dapat dibedakan dari pilihan lain.

-       Gunakan pemilihan kata yang konsisten dan singkat.

-       Tempatkan kata kunci di kiri.

•          Tata letak dan desain grafis

-       Perhatikan kendala seperti lebar dan tinggi layar, kecepatan tampil, character set, dan highlighting.

-       Buat pedoman/panduan untuk komponen-komponen: judul, penempatan item, petunjuk, pesan kesalahan, dan laporan status.

Formulir Isian

•       Formulir isian cocok dipakai jika banyak field data dibutuhkan.

•       Pendekatan formulir isian menarik karena:

–      Kelengkapan penuh informasi terlihat.

–      Seperti formulir kertas.

–      Sedikit petunjuk diperlukan.

Pedoman Perancangan Formulir Isian

•       Judul yang berarti.

•       Instruksi yang dapat dipahami.

•       Pengelompokan dan pengurutan field yang logis.

•       Tata letak yang menarik secara fisual.

•       Label field yang dikenal.

•       Ruang kosong dan batas field yang perlu diisi harus jelas terlihat.

•       Pergerakan kursor yang leluasa.

•       Koreksi kesalahan untuk karakter dan field.

•       Pencegahan kesalahan.

•       Pesan kesalahan untuk nilai yang tak dapat diterima.

•       Field optional jelas ditandai, atau sebaliknya field yang wajib diisi ditandai.

•       Pesan penjelasan bagi field jika perlu.

•       Tanda selesai. Hindari penyelesaian automatis.

Beberapa Variasi Isian Field

•       Combo box: kombinasi list box dan text box.

•       Coded fields: mempunyai mask untuk format isian khusus. Mis.:

–      Telepon – (___)___-_____

–      Social Security Number – ___-__-____

–      Waktu – __:__ __

–      Tanggal – __/__/____

–      Nilai uang – $_____.00

Kotak Dialog

•       Kotak dialog adalah kombinasi teknik menu dan formulir isian yang banyak digunakan di GUI modern.

•       Perlu diperhatikan:

–      Tata letak internal kotak dialog

–      Hubungan eksternal kotak dialog

Pedoman Tata Letak Internal Kotak Dialog

•       Judul berarti, gaya konsisten.

•       Pengurutan dari atas kiri ke bawah kanan.

•       Pengelompokan dan penegasan.

•       Tata letak yang konsisten.

•       Peristilahan, font, penggunaan huruf besar, justifikasi yang konsisten.

•       Tombol standar (OK, Cancel).

•       Pencegahan kesalahan.

Pedoman Tata Letak Eksternal Kotak Dialog

•       Penampilan dan penutupan halus.

•       Dapat dibedakan tapi batasnya kecil.

•       Ukuran cukup kecil (minimalkan overlap).

•       Dekat dengan item yang sesuai.

•       Tidak menghalangi item yang harus dilihat.

•       Mudah ditutup (dibuat menghilang).

•       Jelas penyelesaian/pembatalannya.

Pertemuan 9 - Quality Service

Response time = Waktu yang dihitung dari mulai user beraktivitas di depan computer, (memulai mengetik dll) sampai dengan computer meresponse.

User Think time = Waktu yang ada di pikiran user sebelum lanjut ke tahap selanjutnya

-          Hal hal yang harus diperhatikan perancang :

1.       Kompleksitas interaksi secara teknis

2.       Kompleksitas tugas

3.       Biaya

4.       Keinginan user

5.       Kecepatan performance

6.       Error Rates

7.       Error Handling

-          Performa yang cepat, tingkat error yang rendah & tingkat kepuasan yang tinggi datang dari :

1.       User sudah memahami objeknya dan mengerti menghandle errornya

2.       Dapat menjalankan solusi tanpa menunda nunda

3.       Tingkat kecemasan user rendah

4.       Error dapat diatasi dengan mudah

5.       Adanya timbal balik dari solusi yang diberikan

-          Sumber error :

1.       ketika user menghadapi error dalam suatu aplikasi, maka aplikasi tersebut harusnya menyimpan solusi dari error tersebut di memori / diimplementasikan langsung

2.       solusi diberikan bertahap agar mudah dimengerti oleh user

-          kondisi optimal untuk problem solving / error solving :

1.       response yang lama dapat menyebabkan kecemasan berlebih kepada user.

2.       Jika response terlalu cepat pun dapat menyebabkan masalah karena user tidak mengerti apa sumber permasalahannya.

3.       Maka dari itu solusinya harus memberikan dialog box tentang prosesnya, sisa waktu yang dibutuhkan, atau blinking grafis

·         Expectation & Attitudes

-          Waktu respon yang terhambat : system mengalami error atau melambat ketika beban tugas terlalu tinggi dan performa kerja yang meningkat.

-          3 hal yang mempengaruhi waktu respon :

1.       Pengalaman user terdahulu

2.       Toleransi tiap individu untuk delay

3.       Kompleksitas tugas

-          Produktivitas User : sebuah task yang baik adalah ketika response time suatu task tidak mempengaruhi produktivitas user, ( waktu yang lama akan menghambat produktivitas si user, waktu yang terlalu cepat pun tidak baik karena kadang hasilnya tidak optimal)

-          Variability / Perubahan : perubahan kecepatan respon dari suatu aplikasi tentu baik adanya karena user dapat mengambil keuntungan jika respon berjalan dengan cepat, user dapat mengambil keputusan selanjutnya dan dapat mengganti waktu yang hilang akibat menunggu.

·         Frustating Experience

-          Sebuah survey mengatakan 46 – 53% waktu dari user habis begitu saja, mayoritas mengatakan karena quality of service yang kurang, beberapa mengatakan karena adanya virus.

-          3 solusi untuk mengurangi Frustating Experience :

1.       Mengurangi beban ingatan jangka pendek ( reduce short – term memory)

2.       Memberikan informasi yang sejelas – jelasnya lewat interface yang ada

3.       Meningkatkan otomasitas ( increase automacity)

Pertemuan 8 - Collaboration and cooperative Social Media

Definisi

• Computer-Supported Cooperative work (CSCW) adalah bidang studi yang berfokus pada perancangan dan evaluasi teknologi untuk mendkung sosial kerja, sering diantara mitra yang berjauhan
• Hasil CSCW biasanya disebut Groupware
• Groupware  adalah jenis software yang membantu kelompok kerja(workgrup) yang terhubung ke jaringan untuk mengelola aktivitas mereka

Tujuan Kerja Sama

• Kemitraan terfokus : kerjasama antara dua pemakai yang saling membutuhkan untuk menyelesaikan tugas.
• Kuliah atau demo : Seseorang membagikan informasi kepada banyak pemakai di tempat lain. Waktunya di jadwalkan.
• Proses kerja terstruktur : Orang yang peranannya berbeda bekerja sama dalam tugas yang berhubungan.
• Electronic Commerce : kerjasama 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 melalio konferensi, debat, dan pemungutan suara online

Pengelompokan Sistem Kerja Sama

• Matrikswaktu-ruang untuk mengelompokkan sistem kerja sama (Ellis et all 1991):

	Waktu sama	Waktu berbeda
Tempat sama	Tatap muka (ruang kelas, ruang rapat)	Interaksi asinkron (penjadualan proyek, alat bantu koordinasi)
Tempat berbeda	Sinkron tersebar (shared editors, video windows)	Asinkron tersebar (email, bulletin boards, konferensi)

Asinkron tersebar : Tempat dan Waktu Berbeda

1. Email

• Sifat : Struktur terlalu bebas, terlalu sulit untuk diatur, dan transien
• Tools :
• Filtering(message rules pada Microsoft Outlook)
• Archibing (menimpan pesan lama)
• Forwarding (meneruskan pesan)
• Mailing List
• Dapat mengandung gambar, suara, animasi, attachment, berupa file dsb.
• Membuat email menjadi universal membutuhkan (Anderson et al 1995):
• Peningktan penyederhanaan
• Peningkatan pelatihan
• Pemfilteran lebih mudah
• Hardware yang murah
• Jasa jaringan

2. Newsgroups dan komunitas jaringan

• Diskusi elektronik terfokus pada kelompok
• USENET newsgroups
• Pemakai membaca catatan sebelumnya dan menanggapi
• Terbuka bagi umum
• Dapat di Search melalui web
• Mailing list services
• Pemakai harus berlangganan
• menggunakan email
• bisa ditagih moderator
• Online conferences
• mempunyai alat bantu untuk voting, direktori online pemakai dan doumen.
• Web discussion board
• Online newsletters
• Komunitas jaringan bisa kontroversial: hacker, teroris, rasis
• 
  

3. Collaborative Authoring

Wiki

•          Situs web yang memungkinkan pengunjung dengan mudah menambah, menghapus, atau mengedit isi, sering kali tanpa registrasi terlebih dahulu.

•          Wikipedia : ensiklopedia

•          Wiktionary : kamus dan thesaurus

•          Wikibooks : textbook dan manual

•          Wikinews : berita

Karakteristik wiki

•          Artikel bisa di edit kapanpun oleh siapapun (dengan pembatasan tertentu utk protected articles)

•          Artikel bisa diedit menggunakan web browser.

•          Artikel dilengkapi akses ke history/versioning

•          Artikel dilengkapi akses ke halaman diskusi tentang artikel tersebut

•          Penambahan atau modifikasi terbaru bisa dimonitor

Contoh Wiki :

Wikipedia : ensiklopedia

Wikibooks : textbook dan manual

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).

Contoh :

TeamWare Workplace (versi komersial TeamRooms dari University of Calgary)

Skype 1.0 & Skype

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.