Diktat Imk
Diktat Imk
Fungsi
HASIL Sering kali ketika mesin pertama kali dirancang dan dibangun dengan suatu fungsi tertentu, sulit untuk dioperasikan. Hal ini tidak jadi masalah jika yang mengoperasikannya orang yang ahli dimana dia sangat mengerti tentang mesin dan bagaimana fungsi dan bisa dilatih untuk mengoperasikannya. Sebagai contoh mungkin komputer yang pertama kali diciptakan sangat kompleks dan sulit untuk berinteraksi dengan manusia. Orang yang bisa mengoperasikannya hanya sebagian kecil biasanya ahli matematika atau ilmuwan yang mengerti dan sering berurusan dengan hal seperti itu: dimana mereka bisa mengadaptasikan kebiasaan mereka dengan keperluan suatu mesin. [Mereka memiliki
kemauan untuk melakukan ini sebab mereka memiliki motivasi mesin adalah satusatunya harapan untuk mencapai tujuan pribadi mereka.] Dalam beberapa kasus, hanya sedikit orang yang mengetahui bagaimana cara mengoperasikan komputer agar mudah untuk digunakan. Teknologi tersebut tidak menyediakan cara yang mudah untuk digunakan seperti yang kita pakai sekarang VDUs, keyboard, mouse, dan lain-lain. Tetapi dimana komputer dikembangkan dalam hal kecepatan, kemampuan, memori, dan lain-lain, harganya juga menurun, lebih banyak orang mulai untuk mencari dan menggunakan komputer tersebut. Tetapi mereka masih mengeluh sebab mesin itu masih sulit untuk digunakan, teknik-teknik yang disediakan mengambil terlalu panjang prosedurnya, mesin tersebut sama sekali belum fleksibel dalam pemakaiannya. Sesuatu harus dilakukan untuk memperbaiki kegunaan dari komputer tersebut. Dimana hal itu dimulai pada tahun 1970-an. Petualangan untuk mencari ide seperti komputer bersahabat dengan penggunanya, ikut campur pemakainya dan pelajaran tentang hubungan manusia dengan mesin. Dari penemuan ini ditahun 1980-an, pengetahuan yang lebih luas yang dikenal sebagai IMK. Saya mengatakan lebih luas karena lapangan dari pelajaran ini berpedoman pada berbagai aspek dilihat dari cara manusia berinteraksi dengan komputer.
1.2 Usability
Pertimbangan pemakai dan lingkungan menggunakan suatu mesin agar mesin tersebut melakukan beberapa fungsi. Pengguna mengharapkan saat menggunakan mesin/sistem tersebut tidak harus beradaptasi dengan sistem. Hal itu seharusnya didesain sealami mungkin dan menarik untuk dipelajari oleh mereka. Orang bilang biasanya segala usaha yang kita masukkan untuk membuat interface / antarmuka komputer, harus diusahakan dengan keras supaya komputer menjadi penghubung manusia. Dalam analisis sistem modern dan rekayasa perangkat lunak istilah Usability dimaksudkan untuk membuat kriteria kualitas suatu perangkat lunak seperti fungsionalitas, kehandalan, efisiensi, kemudahan pemeliharaan, dan portabilitas. Beberapa hal yang menyangkut Usability :
1.2.1 1.2.2
LEARNABILITY THROUGHPUT
Seberapa mudah mempelajari suatu sistem? Seberapa cepat untuk menguasai sampai menjadi ?
1.2.3
Seberapa cepat suatu tugas bisa dikerjakan (atau, berapa banyak orang yang diperlukan untuk menyelesaikan suatu tugas?) Berapakah rating error / rata-rata kesalahan pemakai? Seberapa mudahkah seorang user memperbaiki kesalahannya?
FLEXIBILITY
Seberapa cocokah sistem itu dengan keahlian seorang pemakai? Bisakah sistem itu dirubah untuk memenuhi jalan kerja yang berbeda atau perbedaan level dari suatu keahlian?
1.2.4
ATTITUDE
Apakah seorang pemakai puas terhadap sistemnya?
Hasil
Ada beberapa buah contoh yang spektakuler dari bencana atau malapetaka akibat dari atribut IMK yang buruk. Sebagai contoh : 1. Three Mild Island pembangkit listrik tenaga nuklir meleleh di tahun 1979 dikarenakan pendesainan atribut sistem kontrol panel dan alarm yang buruk. 2. Penembakan jatuh pesawat penumpang Iran menyebabkan kematian 290 nyawa oleh USS Vincences dalam kontrol room pesawat, disebabkan kesalahpahaman identifikasi. 3. Sistem ambulan di London, dimana supir dan operator terus menerus menekan tombol yang salah, mengarah pada terjadinya kerusakan sistem sehingga sistem tidak berfungsi untuk beberapa hari. Contoh Produk IMK yang buruk
Umumnya, hal-hal dibawah ini adalah diakibatkan buruknya perancangan suatu interface : 1. Meningkatnya kesalahan dalam pemasukkan data dan sistem pengoperasian. 2. Tidak bisa diaksesnya suatu fungsi. 3. Kefrustasian pemakai : produktivitas yang rendah atau pemanfaat yang rendah. 4. Gagalnya suatu sistem disebabkan oleh penolakan pemakai.
1.5.1
Ilmu komputer
Pengetahuan tentang kemampuan dari suatu teknologi, dan bagaimana hal tersebut dapat diterapkan. Bahasa tingkat tinggi, Sistem Manajemen Antarmukan dan Desain, Alat-lat prototipe.
1.5.2
Melihat otak sebagai peralatan pemroses informasi. Pengetahuan tentang presepsi, perhatian, ingatan, proses pembelajaran, cara berfikir dan pemecahan masalah perlu dipahami.
Ilmu Komputer
Pengamatan Psikologis
HCI Sosiologi AI
1.5.3
Ergonomik
Suatu desain yang diperlukan untuk memaksimalkan kapasitas dan kapabilitas pemakai dengan tujuan untuk keamanan, efisiensi, kehandalan dan performasi pemakaian. Bagaimana tugas dikerjakan dengan mudah, dan menambah rasa nyaman, puas. Lihat desain keyboard, mouse, sekarang ini dibanding beberapa tahun lalu.
1.5.4
Sosiologi
Mempelajari tingkah laku manusia di dalam kontak sosial. Sebagai contoh : Bagaimana tigkah laku seseorang mempengaruhi yang lain; Pengaruh dari suatu grup kepada anggotanya sikap dan perilaku / tingkah laku; Pengaruh dari seorang anggota kepada aktivitas grupnya dan struktur; Hubungan antara struktur dan aktivitas dari grup yang berlainan.
MANUSIA
Aksi
TUJUAN
Fungsi
Diktat Kuliah Interaksi Manusia Komputer Gambar 1. Interaksi Manusia-Komputer : Aksi dan Fungsi
Bila komputer tersebut hanya menjalankan satu fungsi tentu tidak ada masalah, cukup tekan satu tombol fungsi tersebut langsung dijalankan. Namun kenyataaannya fungsi yang dijalankan oleh komputer tidak hanya satu tetapi banyak fungsi, tergantung tujuannya pengguna yang hendak dicapai melalui peralatan tersebut. Semakin banyak fungsi, semakin sulit mengatur interaksi yang terjadi. Kemudahan interaksi akan menjadi pertimbangan bagi perancang untuk mendesain program/perangkat lunak yang disimpan pada komputer tersebut. Jadi jangan sampai fungsi yang ditawarkan begitu banyak tetapi pengguna tidak dapat mengoperasikannya. Pemahaman terhadap jenis peralatan dan teknik interaksi harus diketahui oleh seorang perancang. Melalui penelitian terhadap pengguna memakai peralatan interaksi dan tekniknya dapat diketahui tingkat kemudahan interaksi yang terjadi.
Pemroses
Keluaran
Penyimpan
Peralatan masukan dipengaruhi oleh tipe aplikasi yang kita rancang menggunakan GUI. Berikut ranking peralatan tsb :
Rank Selecting 1 2 3 mouse Positioning mouse Numeric numeric key pad alphanumeric key pad tablet Text Drawing
alphanumeric key tablet pad tablet soft keyboard mouse lightpen/touch screen
function keys
cursor
soft keyboard
2.2.1
Linguistic Styles.
Penyampaian aksi melalui bahasa yang dimengerti oleh komputer. Karakteristik teknik ini antara lain : masukan aksi melalui papan ketik alpabet (alphanumeric keyboard) yang ditulis; bahasa yang dimengerti oleh komputer merupakan bagian kecil dari bahasa manusia; adanya aturan penulisan (syntax) dan semantik untuk menyatakan aksi. Contoh teknik ini adalah command-line (misal : dir, del, copy a:*.* b: pada sistem operasi DOS ) dan text-based natural language (misal : Kalikan 5 dengan 7, hasilnya dibagi 2).
2.2.2
Key-Modal Styles.
Penyampaian aksi melalui penekanan tombol-tombol yang diprogram sebelumnya untuk menjalankan fungsi-fungsi. Karakteristik teknik ini antara lain : Masukan aksi melalui tombol fungsi atau tombol alpabet Instruksi langkah demi langkah Digunakan dalam sistem berjalan (walk-up system) Contoh : question-and-answer (misal : apakah data dicetak? <Y/T>), function key interaction (misal : Tekan F1-Menu Bantuan) dan menu-based interaction (misal menu susun, menu tarik)
2.2.3
Penyampaian aksi melalui manipulasi terhadap objek tertentu. Karakteristik teknik ini antara lain : Ditampilkannya objek untuk interaksi pengguna Ditampilkannya penunjuk untuk memanipulasi objek (misal pointer) Aksi diterapkan langsung terhadap objek Respon fungsi objek segera (immediate feedback) Contoh : form fill-in (misal : pengisian formulir langganan), graphical direct manipulation (misal : memperbesar objek, memindahkan objek, memutar objek). Perangkat lunak yang berhasil memadukan teknik-teknik di atas, untuk kemudahan pemakaian perangkat lunak, sehingga tujuan yang akan dicapai oleh pengguna dapat tercapai . Orang biasa menamakan perangkat lunak tersebut dengan nama bersahabat
(user friendly). Komponen inilah yang perlu diperhatikan saat mendesain antarmuka pengguna.
10
11
Kiri Kata kata (bahasa) - Analisis - Lojikal - Proses penghitungan - Tanggapan sederhana - Sifat biasanya
Kanan Imaji dan Pola-pola - Ketertarikan terhadap keadaan - Hubungan spasial - Proses paralel - Pandangan kompleks - Tidak terlalu banyak tanggapan
Rancangan IMK dapat sukses jika memperhitungkan kedua bagian dari otak ini. Dalam rangka untuk mengerti bagaimana pikiran bekerja, banyak model psikologi telah diperkembangkan. Intinya pikiran manusia (otak) memperhitungkan 3 bagian yaitu : 1. subsistem interaksi 2. prosesor dan 3. memori / ingatan
3.1.1
Perceptual system
Ini menyimpan sinyal dari rangsangan (imaji, gambar,suara) untuk satu waktu (tipikalnya sedikit waktu, tergantung sensitifitas yang ada). Bagian dari ingatan yang mana menyimpan penjelasan tidak terproses dari apa yang dialami register sensor atau buffer.
3.1.2
Sistem Kognitif
Ini merepresentasikan hitungan dalam pikiran kita yang berfikir. Prosesor kognitif memutuskan, contoh, apa yang ada dalam bit seharusnya membuat kita memperhatikan sesuatu , yang man bits membutuhkan proses. Banyak sinyal akan dipindah untuk bagian lain dari ingatan yang merupakan Ingatan Jangka Pendek atau Ingatan Kerja. Ketika informasi dalam ingatan kerja kita dapat memikirkan tentang ini, menganalisa dan mungkin memanggil kembali informasi dari ingatan Jangka Panjang kita untuk perbandingan dan seterusnya. Sistem kognitif ini juga membuat keputusan tentang bagaimana kita seharusnya melakukan sesuatu ke depan, apa tindakan yang seharusnya kita ambil sebagai hasil dari informasi yang diterima. Jika sistem fisik memungkinkan, tindakan dari keputusan akan berlalu ke sistem ketiga sistem gerak.
3.1.3
Sistem Gerak
Ini mengubah sinyal jadi gerak contoh membawa tindakan yang telah diputuskan oleh sistem kognitif seperti gerakan tangan mengklik mouse.
12
Hubungan diantara 3 sistem proses dan 3 macam memori dapat dilihat dalam diagram berikut.
Memori jangka panjang adalah dasar semintak dan ukuran virtual yang tidak terbatas. Ini memudahkan kita mempartisi bagian informasi dalam memori/ingatan jangka panjang : tergantung pada faktor-faktor berikut yaitu : Frekuensi akses kita dengan informasi atau frekuensi dengan apa yang menyegarkan ingatan kita, waktu sejak kita memanggil terakhir informasi itu, banyak dan tipe jaringan kerjasama dan interfensi dari informasi lain di ingatan. Jadi, ketika informasi memberi arti memudahkan kita untuk mengingat dalam jangka pendek contoh memungkinkan mengirim semua chunks dalam skala kecil. Juga, ada kesempatan baik yang kita punya untuk memungkinkan pemanggilan informasi kembali
13
tiap hari atau minggu setelah kita menerimanya. Ini berarti, kita dapat memindahkan ingatan kerja ke ingatan jangka panjang, mungkin tanpa banyak dorongan dari percobaan ingatan kita. Umumnya kita dapat berkata jaringan antara 2 tipe ingatan adalah asimetrik dalam pemanggilan ulang informasi tidak umum lebih cepat dari waktu pengiriman dalam ingatan pada tempat pertama. Jadi, dari semua itu kita dapat berkata ada batasan untuk kapasitas proses di otak. Ada sebuah bahaya kepenuhan ingatan kerja dengan terlalu banyak hal-hal tidak berarti (contoh ketika kita mencoba mengingat nama detil file komputer dari yang baru saja dikerjakan). Untuk mengakomodasi batasan ini, desainer HCI harus menggunakan apa yang berarti atau familiar chunks dari informasi untuk meningkatkan ingatan kerja jadi bebas untuk membuat keputusan dan penyelesaian masalah. Menjadi penuh arti adalah kesempatan lebih besar dalam ingatan jangka panjang, untuk dibutuhkan.
3.3.1
Short-Term-Memory
Beberapa ciri dari memori ini antara lain : Mudah lupa dalam waktu 20 detik. Lebih banyak informasi untuk diingat akan menambah kecepatan untuk dilupakan pula. Gangguan terhadap informasi yang serupa sering menyebabkan salahnya informasi saat dipanggil Kecepatan informasi dilupakan tidak secara linier, tetapi seringkali disebabkan dari hasil pemahaman terhadap system yang komplek.
http://website.lineone.net/~mw25/hci.htm
14
Faktor-faktor ini yang penting saat mendefinisikan antarmuka bila kita hendak menggunakan system yang sukar hendaknya informasi tidak berupa temporer.
3.3.2
Long-Term-Memory
Bila menggunakan antarmuka kita harus mampu mengingat detil kunci dari penggunaan sebelumnya. Contoh penggunaan Long-Term memory: Files : system file dan penamaan file Procedures : passwords, logging on dan off Rules : aturan sistem
3.3.3
Apapun antarmukanya harus memperhitungkan keterbatasan memori Antarmuka harus memandu dan mendorong pengguna untuk mengingatkan informasi yang telah diterimanya. Buatlah materi yang mudah dikenal dan dipanggil kembali Nama dan icon harus mengandung arti supaya mudah diingat Rancangan antarmuka dan fungsi harus konsisten untuk mudah diingat
15
16
dalam setiap kasus mereka akan mencoba mengaplikasikan prinsip-prinsip umum yang sama (garis-garis petunjuk). Hanya pertimbangkan tugas merancang menu pull-down, garis-garis petunjuk dan beberapa aturan-aturan khusus pada PC or Macintosh, mungkin seperti berikut garis-garis petunjuk umum : Kelompokkan bersama perintah-perintah yang berhubungan Bedakan antara perintah yang tersedia dan yang tidak
Aturan-aturan (Macintosh dan PC) Beri tanda perintah yang tersedia dengan memberi warna Gambar sebuah garis horizontal antara kelompok-kelompok perintah yang berhubungan
Hanya Macintosh Menu dop down akan muncul ketika tombol mouse dipegang Seleksi perintah dengan cara mouse digerakkan Perintah terkunci pada tombol mouse yang lepas
Hanya PC menu tampak ketika ditunjuk menu tetap ada dilayar ketika nama menu diklik perintah terkunci ketika di klik
Panduan umum dalam merancang antarmuka perangkat lunak, antara lain : 1. 2. 3. 4. 5. Cocok dengan tugas Mudah digunakan Dapat disesuaikan dengan pemakaian tingkat pengguna Mampu menyediakan umpan balik Layar informasi dalam sebuah format, dan satu ruangan, cocok dengan sistem operator 6. Mengikuti prinsip-prinsip ergonomik Secara lebih detail panduan merancang IMK sebagai berikut : 1. 2. 3. 4. 5. 6. 7. Konsistensi internal, external, dan dunia nyata. Kesesuaian dengan harapan pengguna. Fleksibel dan terkontrol. Susunan yang benar. Umpan balik yang informatif dan berkesinambungan. Pencegahan dan perbaikan kesalahan. Dukungan dan dokumentasi pemakai.
17
4.1.1
Konsistensi
Internal Konsistensi. Yaitu penggunaan yang konsisten pada hal-hal seperti format perintah, simbol, posisi objek, kotak-kotak dialog, dan lain-lain, dalam sebuah aplikasi yang diberikan ; aturan-aturan yang harus diaplikasikan secara konsisten pada semua elemen dalam sistem softwarekhusus manapun.. Contoh : Semua kotak dialog harus mempunyai tombol Cancel dan Ok, pada posisi yang relatif sama pada setiap kotak, Hala-hal yang serupa harus harus di presentasikan kembali secara konsisten ( tombol-tombol dan kotak-kotak radio) External Consistency. Yaitu konsisten antara perangkat software pada jalur yang diberikan ( Mac dan Pc ) contohnya : penampilan, funsi dan posisi menu dalam semua aplikasi. Menggunakan icon yang sama untuk sebah text dalam semua aplikasi. Funsifungsi Windows (diukurkembali, menggulung,, ditutup, dll). Sama seperti standar yang sering didikte oleh mesin atau Os Vendor, maka memberikan sebuah rasa yang jelas pada semua software dalam lajur tersebut. Hal ini akan lebih mudah untuk pengguna memindahkan dan belajar aplikasi-aplikasi baru, mereka dapat menggunakan lebih banyak intuisi dari pada harus masuk secara mendalam untuk ketikan setiap bagian software. Konsistensi Dunia-Nyata . Contohnya, menggunakan icon yang tampak sama untuk membayangkan apa yang terlihat dalam Duni Nyata sebuah contoh popular yaitu penggunaan simbol-simbol seperti icon ( lihat, contoh tombol STOP pada Netscape).
4.1.2
Perencana seharusnya menganalisa terminologi dan metode dari tipe kerja, potensial user dan berusaha untuk menjadikan semuanya ini menjadi software desain. Sebagai contoh, sebagian besar program WP mencoba untuk membuat tampilan ini layaknya seperti keinginan userdalam mencetak dokumen. Dalam Aldus Pagemaker, perintah place digunakan ketika program lain menormalkan perintah insert, karena hubungan tradisional inilah yang digunakan oleh orang dalam industri percetakan dimana targetnya adlah program itu. Juga dalam Ms-Word fungsi insert merupakan daftar menu utama karena dalam WP terdapat jarak yang cukup luas yang bisa disisipkan (page breaks etc)
18
dimana program lain membuatnya hanya dalam sub-command dengan beberapa daftar lain.
4.1.3
Desain harusnya dapat memenuhi semua kebutuhan dari user, mulai dari amatir ke yang ahli. Semua ini dapat diterima sebagai contoh, penyediaan clear icons dan on-line help untuk pengguna baru, dan keyboard shortcut untuk user yang berpengalaman. Interface seharusnya didisain sehingga user yang berpengalaman tidak perlu melewati bagian pengantar setiap akan mengguanakan program. Seharusnya, user dapat mengontrol rangkaian dari tugas-tugas yang akan ditampilakan. Sebagai contoh, dalam program WP, user boleh memilih sebagai first entering dari semua text dan kembali untuk membawa tugas-tugas formatting seperti mengganti font style, tab stops, dan yang semacamnya. Kemungkinan lain, user dapat mengformat tugas-tugas seperti proses pengetikan. Kebanyakan sistem yang modern, user dapat menukar applikasi yang berbeda (contoh dari WP ke grafik pengemasan dan balik lagi tanpa ada yang punya) dengan aplikasi yang digunakan user lain. Jika memungkinkan user seharusnya dapat menyesuaikan antarmuka untuk mencocokkan gaya kerja mereka sendiri di tingkat expert.
4.1.4
Antarmuka seharusnya tetap sederhana dan tidak terlalu kelebihan dengan banyaknya features dan fungsi-fungsi di tiap saat. Sebagai contoh, the greying dari menu perintah menindikasikan bahwa fungsi-fungsi itu tersedia untuk para user setiap saat. Tanya jawab seharusnya didisain untuk memenuhi informasi yag dibutuhkan untuk menyelesaikan tugas tanpa kelebeihan memory dan melupakan secepatnya setelah diselesaikan.
Lexical feedback
Ini adalah dimana sistem menindikasikan terima pesan, tetapi tidak ada perubahan yang telah dibuat dibawah pengaruh dari sistem. Sebagai contoh, daftar nama telah diblok ketika cursor merubah bentuk dari tools yang ada. Syntactic feedback
Ini adalah feedback yang membutuhkan lebih sedikit percakapan dengan user tetapi masih tidak memberi isyarat dasar perubahan dalam sistem. Sebagai contoh, informasi mengenai sub-menutanpa menu utama, atau fakta bahwa menu tidak aktif ketika kotak dialogtidak aktif. Semantic feedback
Signal sistem pesan diterima dan dijalankan . ini membuat kita mengetahui bawa terdapat beberapa perubaahan fundamental yang terstruktur dalam dokumen. Sebagai contoh, ketika anda memindahkan icon, anda dapat melihat posisi yang baru. Kamu merubah font style, kau dapat melihat gaya yang baru.
4.1.6
Kemungkinan arahan terbaik adalah mencoba untuk mencegah kesalahan yang ada. Sebagai contoh, tidak mengfungsikan beberapa fungsi pada waktu khusus(contoh greying of menu items). Sumber kesalahan adalah kesalahan mengetik, jadi sangat baik untuk selalu menyimpan ketikan oleh user ke tempat penampungan sementara. Jika kesalahan tak dapat dielakkan, kemudian sistem lain harusnya mendeteksi dan meminta masukkan ulang data.
4.1.7
Direkomendasikan bahwa setiap paket software, seharusnya terdapat 3 level pendukung user : Pengajaran langkah-demi-langkah untuk pemula. Lembaran rujukan perintah (daftar isi, perintah, map dsb). Kartu Petunjuk Singkat & Cepat, sehingga mereka bisa dengan cepat mengoperasikan paket software tersebut. Juga diperlukan sistem desain yang on-line fasilitasnya ada, pelatihan dan juga troubleshooting.
20
21
tapi tidak masuk akal. Peraturan yang sepintas digunakan oleh banyak profesional. Ini digunakan tidak lebih dari tiga font types dan tiga font sizes di dokument interface yang berbeda.
Search Panel
22
A - query panel tab B - fields panel tab c - field window d - element window e F element selection buttons field selection window
g - search button h - results window i - print button j - status bar k clear all (new search)
Query Panel
1 2 3 4 5 6 7 8 9 operand option field option element option operation option value option add button modify button delete button clear all button search button print button status bar clear all (new search) results window query window
10 11 12 13 14 15 -
23
Contoh 4. Pintu Masuk Ice Skating Modul pintu digunakan untuk menginput pemain, murid yang akan bermain Ice Skating dan mengakhirinya. Modul ini juga dapat digunakan oleh pegawai untuk mengisi absensi kehadiran dan pulang. Ada dua modul pintu yaitu pintu masuk dan pintu keluar.
Pesan Berjalan
Message
Pengumuman
Latar Belakang
Tampilan pintu masuk terbagi menjadi beberapa bagian antara lain : Bagian Pesan Berjalan, seperti Selamat Datang di Arena Ice. Setting ini dapat diganti pada modul Administrator (Manajemen Setting) Bagian Message. Pesan akan muncul pada bagian ini. Ada dua kelompok pesan yaitu pesan Ok diselingi suara Ok dan pesan kesalahan diselingi suara Error Bagian Input ID Kartu dan Password. Semua pemain dan murid yang akan bermain diharuskan memasukkan ID Kartu (caranya dengan mendekatkan barcode ke scanner). Lama bermain atau nama murid akan dimunculkan 24
pada bagian pesan diselingi suara Ok. Jika kartu tidak dikenal maka muncul pesan Kartu tidak dikenal. Saat scan kartu murid akan ditanya password. Masukkan password ybs. Bagian Pengumuman, untuk menampilkan pengumuman yang perlu diketahui oleh pemain dan anggota Bagian Jam dan Tempat tersedia di Arena Ice Skating Bagian Latar Belakang Gambar.
25
26
Pilihan yang tidak dapat dijalankan / tidak berfungsi seharusnya dihilangkan. Hal ini bukan waktunya untuk percobaan dari sebuah menu hal ini dapat merintangi pemakai untuk menjadi kenal dengan tata letak dari menu tersebut dan itu berarti bahwa posisi dari sebuah perintah di layar menjadi tidak tetap. Posisinya akan berubah berdasarkan sejumlah item di menu yang diberikan. Hal ini dapat memperlambat kerja pemakai pada saat mereka melihat-lihat sebuah perintah.
Informasi Visual
Informasi visual seharusnya tersedia untuk menolong pemakai mengerti sebuah menu, dan apa yang terjadi pada saat itu. Contohnya :
Item yang berada dibawah pointer diberi warna highlight. Menggaris bawahi huruf untuk mempercepat. Menampilkan tombol-tombol shortcut. Menempatkan tanda pada item yang dipilih. Mempunyai tanda panah untuk menunjukkan sub menu.
Mempunyai tanda titik-titik () untuk menunjukkan bahwa seleksi dari sebuah pilihan akan menampilkan dialog lebih lanjut.
Hal ini biasanya terlihat ketika menu menghilang sesudah sebuah seleksi terjadi. Kemudian menu tersebut seharusnya di update secara cepat & tepat sesuai modul terbaru dari aplikasi.
27
5.1.1
Single Menus
Binary Menus o Mnemonic letters o Radio Buttons o Button Choice Multiple-item Menus Multiple-selection menus or check boxes Pull-down or pop-up menus Scrolling and two-dimensional menus Alphasliders Embedded links Iconic Menus, toolbars, or palettes
Menyusun secara sistematis sebuah daftar menu tunggal. Tidak ada jumlah yang pasti dari
item-item untuk dimasukan dalam daftar menu. Beberapa organisasi menetapkan jumlah maksimum (sekitar 10) , tapi tidak ada peraturan yang umum.
Menu yang mendalam atau melebar. Tidak ada patokan yang pasti apakah menu sebaiknya
mendalam atau melebar. Hanya saja jika menu terlalu mendalam memiliki kesan suatu modul sulit untuk dicari/diketemukan, untuk menghindari hal tersebut biasanya dibatasi maksimum kedalaman 10 dan sub-sub dari setiap menu tersebut tidak lebih dari tingkat 4 (menu utama tingkat 1, sub menu tingkat 2, sub-sub menu tingkat 3, sub-sub-sub menu tingkat 4). Jika menu tersebut terlalu melebar memiliki kesan program tersebut kompleks, karena banyaknya menu yang ditawarkan. Kesimpulannya seimbangkan untuk kedalaman dan melebarnya menu.
5.1.2
Menu yang memandu pengguna untuk proses yang kompleks Contoh cue cards atau "Wizards"
5.1.3
Tree-structured Menus
Contoh Daftar Keluarga : Male, female Animal, vegetable, mineral Fonts, size, style, spacing
5.1.4
Menu Maps. Efektik untuk meminimasi pengguna yang tidak terarah. Acyclic and Cyclic Networks. Berguna untuk social relationships , transportation routing, scientific-journal citations. Namun dapat membingungkan dan membuat tidak berarah.
28
Catatan : Pengurutan secara alpabet mungkin digunakan ketika tidak ada lagi metode yang jelas dari organisasi
5.6.2
Gunakan istilah yang umum/familiar dan konsisten Yakinkan bahwa setiap item berbeda dengan lainnya Gunakan frasa yang konsisten dan pasti Letakkan keyword di sebelah kiri
5.6.3
Batasan : lebar dan panjang layar display rate character set highlighting techniques Panduan untuk konsistensi menu paling tidak hal berikut yang harus diperhatikan
30
Tehnik
Indentation Upper/lower case characters Symbols such as * or - to create separators or outlines Position markers Cascading or walking menus Magic lens
5.7.1
Meaningful title Comprehensible instructions Logical grouping and sequencing of fields Visually appealing layout of the form Familiar field labels Consistent terminology and abbreviations Visible space and boundaries for data-entry fields Convenient cursor movement Error correction for individual characters and entire fields Error prevention Error messages for unacceptable values Optional fields clearly marked Explanatory messages for fields Completion signal
31
5.7.2
Gunakan Listbox atau combobox untu field-field yang dikodekan (ada referensinya) seperti :
Telephone numbers Social-security numbers Times Dates Dollar amounts (or other currency)
5.7.3
Dialog Boxes
Meaningful title, consistent style Top-left to bottom-right sequencing Clustering and emphasis Consistent layouts (margins, grid, whitespace, lines, boxes) Consistent terminology, fonts, capitalization, justification Standard buttons (OK, Cancel) Error prevention by direct manipulation
External Relationship Smooth appearance and disappearance Distinguishable but small boundary Size small enough to reduce overlap problems Display close to appropriate items Easy to make disappear Clear how to complete/cancel
32
6 ICON / TOOLBUTTON
Bahasan : 1. 2. 3. 4. 5. 6. Definisi dari icon. Kelebihan dan kekurangan dari icons. Faktor-faktor yang mempengaruhi arti dari icons. Bentuk dan fungsi. Bentuk perintah-perintah. Klasifikasi dari icons.
Secara umum, icon harus dapat merepresentasikan beberapa object dunia nyata atau sesuatu dimana pemakai akan mudah mengenali dan mengerti. Sebagai contoh dalam MS Word toolbar: Objek printer digunakan untuk merepresentasikan proses pencetakan. Objek gunting mewakili pemotongan. Objek disket merepresentasikan penyimpanan file. dst. Beberapa icon memiliki konsep abstrak yang sulit dipahami , dan yang lain cukup mudah dipahami. Sebagai contoh ABC dengan tanda checklist adalah desain yang cukup bagus untuk merepresentasikan proses spell checking.
33
Mungkin fungsi icon untuk undo dan redo tidaklah begitu sukses digunakan untuk menyampaikan arti dari konsep abstrak ini. Begitu juga icon dengan kaca pembesar (mereview dokumen) dapat membingungkan, karena fungsi yang lainnya menggunakan icon yang mirip untuk fungsi yang berbeda seperti search atau magnify.
34
digunakan atau diadaptasi oleh pemakai lainnya. Icons adalah subjek yang sudah disahkan hukum juga seperti halnya art-work lain. Jika diragukan, mintalah izin pengarang untuk komersial website. 6. Micons. Ini merupakan kepanjangan dari Moving Icon atau icons yang berbentuk animasi. Ini digunakan untuk merepresentasikan aspek dinamika dari aplikasi. Seringkali untuk memberikan umpan balik dari sebuah operasi. Sebagai contoh pergerakan yang terlihat pada icon Netscape (ujung kiri atas dari layar Netscape) ketika sebuah document sedang diload. Mereka kadang-kadang dapat menambah tampilan menarik untuk sebuah antar muka, tapi mereka juga dapat menambah intuisi pemakai, yang dapat mengagalkan tujuannya. Tetapi masih tidak ada bukti kalau ada icon yang lebih efektif dan statis dalam mengkomunikasikan pesan-pesan mereka.
Dalam kenyataannya, bila kamu memikirkan tentang ini semua icon yang ada di MS Word tergantung pada pemakai yang memiliki pengetahuan sebelumnya. Jika kamu tidak mempelajarinya, suatu waktu harus akan memotong dan menempelkan pada bagian suatu dokumen, maka kamu mungkin tidak dapat menafsirkan icon gunting itu.
35
Kemudian, beberapa icon ditafsirkan ke dalam konteks dari paket dimana icon dapat ditemukan. Icon itu unik untuk keterangan paket dan oleh karena itu membuat pengertian ke dalam konteks dari program. Icon mungkin digunakan dengan arti yang yang berbeda dalam paket-paket yang berbeda. Untuk contoh, sebuah icon bergambar penetes mata digunakan di MS Powerpoint untuk menampilkan fungsi dari perlengkapan pengambilan teks (ukuran teks dan lain-lain), tapi didalam Ms Works itu ditampilkan untuk mengambil warna yang dapat kemudian ditransfer untuk gambar obyek lain. 2. Tidak dapat selalu melengkapi pengantian kata-kata, terutama dalam situasi kompleks. Di dalam kasus Powerpoint sebelumnya, sebuah icon tidak secara nyata cukup mengartikan perlengkapan pengambilan teks dan dalam kenyataannya di versi sebelumnya icon ini diganti dari sebuah bagian menu (yaitu kata-kata). 3. Biaya. Ini sangat sulit dan biaya untuk mendesain bermacam-macam icon baru maka dapat dipastikan akan ditafsirkan dengan pantas oleh pemakai. Seperti yang pernah kamu lihat, beberapa kegiatan-kegiatan dan memproses sulit untuk menampilkan grafik. Ini selalu mudah untuk mencari keberadaan icon kemudian akan ditampilkan untuk bekerja dan mengembangkan ke dalam antarmuka yang lain (asalkan tidak mempermasalah hak cipta). Perhatikan untuk contoh dari bermacam-macam paket pengolah kata yang dapat kamu peroleh dan catat bagaimana seringkali kesamaaan (atau kemiripan) icon digunakan untuk proses yang sama antara lain membuka atau menyimpan file, memotong, menempelkan, mencetak, dan lain-lain.
36
Tugas. Jika sebuah tugas yang akan dilakukan cukup jelam maka mempermudah untuk memilih sebuah icon. Konsep. Konsep yang mungkin nyata (menampilkan obyek nyata) atau konsep yang mungkin lebih abstrak. Konsep seperti ini lebih sulit untuk merancang icon untuk saat ini daripada yang dulu.
Perbedaan. Saat merancang/memilih icon, seseorang tidak akan membuat dua icon yang sama untuk mengerjakan tugas yang berbeda. Itu akan membuat pemakai bingung .
37
38
salah dapada
Beberapa jenis huruf mungkin tampak dekoratif, tapi bukan berarti huruf itu jelas
Jenis-jenis huruf yang lucu mungkin tampak dekoratif, tapi bukan berarti huruf itu jelas tetaplah gunakan jenis-jenis huruf yang umum seperti Times, Geneva, Courier. Sudah merupakan aturan umum yakni bahwa anda sebaiknya tidak menggunakan lebih dari tiga jenis huruf, dan tiga ukuran huruf, dalam sebuah dokumen. Dalam kebanyak dokumen yang dicetak, panjang baris teks biasanya antara 6 dan 7 inchi (15-17,7 cm). Dengan ukuran-ukuran huruf 10 atau 12 poin, ini berarti satu baris umumnya akan memiliki sekitar 80 karakter. Pendeknya baris akan membantu mata si pembaca untuk mendapatkan lokasi awal baris yang berikutnya. Koran-koran dan majalah bahkan menggunakan panjang baris yang lebih pendek, dengan kolom-kolom yang biasanya panjangnya 2 inchi (5 cm). Dalam banyak interface-interface seftware si perancang biasanya dapat bekerja dengan tuntunan-tuntunan seperti ini. Namun, dengan interface-interface seperti WWW, si perancang mungkin mendapatkannya lebih sulit untuk mengatur hal-hal seperti jenis huruf, ukuran huruf, panjang baris, dll. Karena si pengguna memiliki sejumlah kendali dalam hal-hal ini. Sebagai contoh dalam Netscape browser, si pengguna dapat mengatur ukuran default untuk huruf, default jenis huruf, dan dapat menyesuaikan
39
ukuran tampilan window/jendela. Dalam hal yang terakhir ini panjang baris-baris teks secara otomatis akan menyesuaikan diri dengan ukuran jendela, kecuali jika si perancangmenggunakan teknik-teknik tertentu untuk menghilangkan efek ini. Salah satu teknik yang dapat digunakan adalah dengan membuat sebuah tabel yang terdiri dari hanya satu baris, tanpa batas dan mengatur lebarnya pada sejumlah partikelpartikel gambar tertentu ( daripada ke sekian % dari lebar layar). berapapun ukuran jendela browser. Dengan cara demikian, kolom teks akan selalu tetap lebarnya seperti yang telah ditentukan Anda dapat menggunakan teknik yang sama dengan sebuah tabel yang memiliki dua atau lebih kolom untuk membuat teks tampak seperti di koran atau majalah, atau dengan memiliki sebuah kolom teks sempit disepanjang sebuah grafik. Ini adalah teknik yang digunakan pada contoh Dircon homepage yang disebutkan di atas. Namun, anda tetap harus bergantung pada si pengguna yang mengatur ukuran default teks yang wajar untuk browser mereka. Jika anda harus membuat singkatan, pastikan si pengguna mengenali/mengertinya.
40
membaca. Ini dapat digunakan dalam tulisan tangan dimana lebih sulit menggunakan bentuk penekanan lainnya seperti cetak tebal atau miring. Video yang berkedip-kedip atau diputar balik dan ikon yang bergerak mungkin menarik mata tetapi juga dapat mengganggu setelah beberapa waktu. Akan lebih baik jika fitur-fitur itu bisa dimatikan, atau jangan digunakan sama sekali, kecuali jika tujuannya untuk memperingati agar tindakan sangat penting segera dilakukan tindakan yang akan memperbaiki kesalahan, dan katakanlah, dengan demikian membuat efek itu pergi/hilang setelah melakukan tugasnya.
Catatan mengenai Visualisasi Informasi yang ditampilkan, dapat sangat mempengaruhi daya baca dan kemudahan mendapatkan informasi-informasi tertentu, bahkan pada layar-layar yang cukup kompleks sekalipun. Rancangan layar yang dibuat dengan teliti dapat meningkatkan kegunaan suatu paket.
7.4 Warna
Mata manusia mengandung banyak syaraf-syaraf penerima yang terdiri dari sel-sel berbentuk batang tongkat yang di sebut rod dan sel-sel berbentuk corong yang di sebut cone. Sel-sel yang berbentuk corong peka terhadap warna dan ada tiga jenis, yakni yang peka terutama terhadap warna merah/jingga atau hijau/kuning atau biru. Sel-sel cone yang peka terhadap hijau/kuning adalah yang paling sensitif/peka dan sel-sel cone biru adalah yang paling kurang peka. Kebanyakan sel-sel cone yang sensitif terhadap warna ditemukan di daerah retina yang di kenal sebagai Fovea Centralis yang diamenternya hanya sekitar 2mm. Letaknya di pusat retina dan menerima cahaya dari objek/benda-benda yang berhadapan dengan sebuah sudut yang kurang dari satu derajat pada mata, dan benda-benda seperti itu akan tampak dalam fokus yang tajam. Diluar sudut ini benda-benda akan kurang tajam dan pada permukaan penglihatan, hanya gerakan yang dapat terdeteksi.
7.4.1
Cacat warna
Penelitian menunjukkan bahwa sekitar 8% dari populasi pria memiliki cacat warna. Bentuk cacat yang paling umum adalah ketidakmampuan untuk membedakan antara merah dan hijau. Ini harus diingat ketika menggunakan pengkodean warna pada sebuah tampilan, yakni jangan mengandalkan hanya pengkodean warna; gunakan beberapa bentuk simbol lain juga ( Contoh bentuk, ukuran, tekstur, simbol-simbol). [ Sebagai contoh, lampu lalu lintas, posisi lampu yang paling terang adalah petunjuk tambahan 41
sehubungan dengan keadaan lampu atau cahaya; anda tidak perlu bergantung pada kemampuan anda membedakan warna. Pikirkan akibatnya jika lampu lalu lintas dirancang sebagai satu lampu yang berubah warna !]
7.4.2
Penyimpangan kromatik
Ini adalah fenomena yang disebabkan oleh kenyataan bahwa warna-warna yang berbeda dibelokkan oleh jumlah yang berbeda-beda ketika cahaya melewati lensa mata merah warna yang paling sedikit dibelokkan , biru yang paling banyak. Ini menyulitkan mata untuk fokus kepada semua warna dalam suatu benda pada saat yang bersamaan. Sistim fokus mata berusaha untuk memperoleh fokus yang tajam selama 3 atau 4 kali setiap detik, dan ini dapat mengakibatkan ketegangan mata. Efek ini paling buruk ketika pasangan warna-warna mencolok digunakan dalam kombinasi contoh : merah/biru atau hijau/magenta, jadi anda harus berusaha menghindarkan kombinasi ini. Pengaruh ini dapat juga dikurangi jika warna-warna itu diperlembut misalnya menambahkan warna putih untuk menghasilkan warna-warna yang lebih lembut atau pastel.
7.4.3 Mengapa warna sekarang lebih banyak digunakan dalam interfaces komputer?
Sebelumnya monitor-monitor berwarna terlalu mahal untuk penggunaan umum, dan komputer tidak memiliki tenaga atau RAM untuk menghasilkan warna ini. Sekarang karena harga barang-barang ini sudah lebih murah, pemrosesan warna telah memungkinkan. Layar yang berwarna lebih menarik secara estetika (lebih cantik ?) dan semua orang tampaknya lebih menyukainya dari pada yang hitam putih. Warna menambahkan dimensi pengkodean ekstra untuk menampilkan dan dapat digunakan untuk meningkatkan efisiensi yang dengannnya sebuah interfaces dapat digunakan. Ini dapat membuat pencarian karakter, kata, grafik, dll pada sebuah layar jauh lebih efisien (lebih cepat) Warna dapat menyediakan sebuah pengkodean bermanfaat dalam beberapa kasus contoh : menggunakan warna latar belakang standar untuk layar yang berhubungan dengan jenis topik yang sama. Pada sebuah web site sebagai contoh, ini dapat menyediakan informasi berguna bagi para pengguna misalnya dimana mereka dalam struktur siklus itu.
Namun, mudah sekali untuk salah menggunakan warna ini, dengan menggunakan warna-warna tidak cocok, atau terlalu banyak warna (polusi warna : Preece 122), 42
atau menggunakan warna yang salah pada bagian-bagian tertentu pada layar misalnya menggunakan layar merah dan bukannya biru pada permukaan layar. Ingat bahwa warna mungkin hanya memiliki manfaat terbatas pada tampilantampilan monocrom. Idealnya, sebuah interfaces harus dirancang seolah-olah tampilannya akan monocrom; kemudian tambahkan warna sepantasnya untuk memperkaya interfaces. Ada indikasi-indikasi bahwa memori kita untuk elemen-elemen warna lebih baik dari pada untuk monocrom.
7.4.4
Dalam layar-layar yang kebanyakan terdiri dari teks, warna dapat membantu ketika si pengguna harus mencari atau membedakan bagian-bagian tertentu. Ini dapat digunakan untuk membagi sebuah layar menjadi segmen-segmen yang berbeda (segi-empat), dengan setiap segmen mengandung informasi yang berhubungan. Sebaliknya, ini dapat digunakan untuk menghubungkan bidangbidang informasi yang terpisah, yaitu bagian-bagian yang sejenis dapat diberi kode warna yang sama. Warna juga dapat digunakan untuk membedakan kategori-kategiri data yang berbeda. Sebagai contoh, gunakan warna untuk membedakan antara: data lama dan data baru figur/gambar asli dengan figur-figur yang direncanakan judul/heading dan badan teks data yang disediakan oleh user/pengguna dan data yang disediakan oleh komputer data yang benar dan data yang salah.
43
Sebuah kode warna harus mendukung tugas si pengguna bukan memperlambat. Gunakan seperti yang digambarkan di atas untuk mengidentifikasikan hal-hal yang sama; untuk membedakan hal-hal yang berbeda; untuk menunjukkan keadaan-keadaan tertentu misalnya : peringatan; warna-warna terang untuk menekankan data dan sebaliknya.
Ingat tidak ada terjemahan yang umum, jadi anda harus menggunakan skema warna yang dikenali oleh si pengguna sebagai contoh, merah sering diterjemahkan sebagai bahaya, tapi dalam beberapa konteks mungkin hanya berarti panas.
Tetaplah konsisten dengan penggunaan warna didalam dan antara interfacesinterfaces software. Jika memungkinkan pengguna harus diberi kendali atas pengkodean warna sehingga mereka dapat merancang warna yang memiliki arti bagi mereka. Hindarkan kombinasi-kombinasi warna -Merah pada Biru bergetar -Kuning pada Biru bayangan -Merah pada Hijau bayangan -Hijau pada Biru Afterimage
Teks merah pada latar belakang biru membuat teks tampak bergetar. Kuning pada biru memberi kesan pinggiran-pinggiran pucat disekitar teks. Merah pada hijau atau kuning pada biru memberi efek bayangan. Beberapa kombinasi seperti hijau pada biru, dapat menghasilkan Afterimage pada retina yang dapat mengganggu penglihatan untuk sementara.
44
Cahaya Melalui Kombinasi Warna Dasar/Primer Sistem Warna Rgb Warna Abu-Abu (Gray) Warna Dasar / Warna Primer Warna Sekunder Warna-Warna Lainnya Warna Murni Hue (Roda Warna) Dan Luminosity (Kilauan) Saturation / Kejenuhan Penyajian Warna Dengan Bilangan Bulat (Desimal & Heksa) Menampilkan Warna Dalam Aplikasi Windows
Dengan mengetahui format tersebut, kita bisa menebak warna merah yang mempunyai format RGB(X,0,0), hijau yang mempunyai format RGB(0,X,0) dan biru yang mempunyai format RGB(0,0,X).
Ini adalah warna sekunder yang gelap : RGB(0,128,128)= Cyan gelap= hijau gelap+ biru tua RGB(128,0,128) = Magenta gelap = red tua + blue tua RGB(128,128,0)= Kuning gelap= merah gelap+ hijau gelap
46
Hal yang sama dengan mengetahui format tersebut, kita bisa menebak intensitas cyan yang berbeda dari format RGB(0,X,X), magenta dari format RGB(X,0,X) dan kuning dari format RGB(X,X,0).
mempunyai hue sama. Sebagai contoh RGB(255,128,0) dan RGB(192,96,0) mempunyai format yang sama ( RGB(X,Y,0)) dan keduanya mempunyai hubungan yang sama dengan x/y ( 255/128= 192/96), sehingga dikatakan mempunyai hue sama. Hue sering mengarah pada format warna yang sama. Contoh warna oranye terang dan oranye gelap, keduanya mempunyai hue yang sama tetapi kilauan (luminosity) yang berbeda. Kilauan mengukur bagaimana suatu warna dekat dengan putih, dan pada umumnya diwakili dengan persentase. Sebagai contoh, RGB(192,96,0) adalah oranye dengan kilauan 75% dan RGB(128,64,0) adalah oranye dengan kilauan 50%.
RGB(255,128,0) = Orange 100% luminosity RGB(192,96,0) = Orange 75% luminosity RGB(128,64,0) = Orange 50% luminosity
Hue dari RGB(0,0,128) dan RGB(0,0,64) adalah biru, tetapi warna yang kedua mempunyai kilauan 50% dan 25%.
Jika kita mencampur hasil kelabu sedang lagi, kita akan membuat oranye dengan 25% kejenuhan RGB(160,128,96), bahkan semakin dekat ke kelabu sedang. Jika kita mencampurnya dengan kelabu lagi, kita mendapatkan suatu orange dengan 12,5% kejenuhan RGB(144,128,112).
RGB(255,128,0) = Light Orange 100% saturation RGB(192,128,64) = Light Orange 50% saturation RGB(160,128,96) = Light Orange 25% saturation RGB(144,128,112) = Light Orange 12,5% saturation RGB(128,128,128) = Kelabu sedang / Medium Gray
Kejenuhan (Saturation) dapat dihitung dengan rumusan berikut : Kejenuhan= (( maximum-medium)+ ( medium-minimum)) / 255* 100% Sebagai contoh: Saturation(160,128,96) = ((160-128) + (128-96)) / 255 * 100% = (32 + 32) / 255 * 100% = 64 / 255 * 100% Saturation(160,128,96) = 25%
48
Sebagai catatan kontanta warna mempunyai format BBGGRR (bukan RRGGBB), dimana BB adalah byte (dua digit heksa) untuk biru, GG adalah byte untuk hijau dan RR adalah byte untuk merah. Alasan penyimpanan dalam bilangan bulat dikarenakan pemakaian memori internal lebih kecil. Kontanta BBGGRR akan disimpan dalam memori internal sebagai RRGGBB (urutan terbalik), contoh 6080A0 secara internal disimpan sebagai A08060. Dalam Visual Basic, RGB(160,128,96) diwakili dengan &H6080A0&, dalam C/C+ + adalah 0x6080A0 dan dalam Delphi adalah $6080A0.
1. Tempatkan Panel1, GroupBox1, GroupBox2. 2. Setiap GroupBox terdiri dari 3 Scrollbar, 3 label untuk warna, 3 label untuk konstanta warna dalam desimal, 3 label untuk konstanta warna
49
Diktat Kuliah Interaksi Manusia Komputer dalam heksa dan 2 edit untuk konstanta kombinasi ketiga warna dasar (desimal dan heksa). 3. Buat event Onchange untuk ketiga Scrollbar yang ada di Groupbox1, sbb :
procedure TForm1.ScrollBar1Change(Sender: TObject); begin //warna latar belakang PANEL1.COLOR := RGB(ScrollBar1.Position,ScrollBar2.Position,ScrollBar3.Position); //komposisi warna dalam desimal Label7.Caption := IntToStr(ScrollBar1.Position); Label8.Caption := IntToStr(ScrollBar2.Position); Label9.Caption := IntToStr(ScrollBar3.Position); Edit1.Text := IntToStr(Panel1.Color); //komposisi warna dalam heksa Label17.Caption := IntToHex(ScrollBar1.Position,2); Label18.Caption := IntToHex(ScrollBar2.Position,2); Label19.Caption := IntToHex(ScrollBar3.Position,2); Edit3.Text := IntToHex(Panel1.Color,6); end;
4. Buat event Onchange untuk ketiga Scrollbar yang ada di Groupbox2, sbb :
procedure TForm1.ScrollBar4Change(Sender: TObject); begin //warna tulisan PANEL1.FONT.COLOR := RGB(ScrollBar4.Position,ScrollBar5.Position,ScrollBar6.Position); //komposisi warna dalam desimal Label10.Caption := IntToStr(ScrollBar4.Position); Label11.Caption := IntToStr(ScrollBar5.Position); Label12.Caption := IntToStr(ScrollBar6.Position); Edit2.Text := IntToStr(Panel1.Font.Color); //komposisi warna dalam heksa Label20.Caption := IntToHex(ScrollBar4.Position,2); Label21.Caption := IntToHex(ScrollBar5.Position,2); Label22.Caption := IntToHex(ScrollBar6.Position,2); Edit4.Text := IntToHex(Panel1.Font.Color,6); end;
5. Jalankan program Berikut contoh hasil program : Latarbelakang : Putih Latarbelakang : Magenta Tulisan : Merah Tulisan : Putih
50
8.12
Daftar Pustaka 1. Calvert. Delphi Unleashed : Using the RGB Function, SAMS Publishing, 1995. 2. Design Specifications and Guidelines - Visual Design, http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch14b.asp 3. DSpirito, Ernesto, Understanding color and the RGB system, http://www.latiumsoftware.com/en/articles/00015.php#1
51
52
Efektivitas, efisiensi, dan kepuasan dengan apa pengguna yang telah ditetapkan dapat mencapai tujuan yang telah ditetapkan dalam sebuah lingkungan yang khusus.
53
produk pesaing. Pengevaluasian penggunaan ini memberikan pengembang beberapa cara untuk berkata cukup adalah cukup sebagai contohnya bahwa suatu antarmuka adalah cukup baik untuk memuaskan pasar sehingga selanjutnya tidak perlu untuk menghabiskan waktu dan uang untuk mengganti atau membersihkannya. Seperti sudah ditetapkan pada awalnya, kesulitannya adalah pengetesan untuk penggunaan pada saat dibutuhkan harus mencakup pendekatan informal yang seimbang untuk pengevaluasian. Tidak ada jalan lain yang seseorang dapat buktikan bahwa sebuah antarmuka adalah lebih dapat dipakai daripada yang lain dalam pengertian matematika.
9.3.1
Kecepatan operasi.
Adalah sebuah pengukuran dari penundaan antara memulai suatu kegiatan dan mencapai tujuan pengguna. Sebagai contohnya, seseorang mungkin dapat membuat jawaban yang mudah dari sebuah database, seperti untuk menemukan sebuah nama yang khusus. Jika file databasenya sangat besar, atau jika algoritma pencarian
54
adalah tidak efisien sebagiannya, maka mungkin untuk menggunakan waktu panjang yang tidak diharapkan untuk mencari nama khusus tersebut. Ini adalah masalah dasar jika pencarian dilakukan di jaringan seperti WWW (Jaringan luas dunia) dimana transmisi data dapat sangat lambat di waktu tertentu dalam suatu hari. Dalam beberapa situasi, kecepatan operasi mungkin juga menjadi kritis untuk alasan keamanan, sebagai contohnya jika sesuatu berjalan tidak benar dalam sebuah stasiun pembangkit tenaga nuklir, pengguna harus dapat mengindentifikasikan dan memperbaiki masalah secepat mungkin. Cara lain untuk menilai kecepatan operasi adalah dengan mengharapkan jika tugas dapat dilakukan lebih cepat dengan cara lainnya. Sebagai contoh, dengan sistem surat elektronik internal akan menyurati secara elektronik sebuah catatan lebih efisien dibandingkan dengan mengirimkan sebuah kertas fotokopi atau menyampaikan informasi dari mulut ke mulut.
9.3.2
Tingkat penyelesaian.
Dengan diberikan sekumpulan tugas kunci, berapa banyak dari mereka yang
sebenarnya dapat dilakukan atau diselesaikan oleh pengguna rata-rata, mungkin dalam waktu yang telah ditentukan. Sebuah metode umum dapat mengumpulkan selusin atau tugas yang cukup mudah atau standar, dan kemudian menanyakan sejumlah pengguna untuk menyelesaikannya. Seseorang dapat mengamati berapa banyak dari tugas yang masing-masing pengguna dapat menyelesaikannya, dan berapa lama yang masingmasing orang ambil untuk menyelesaikan setiap tugas.
9.3.3
dalam beberapa kegiatan yang mereka buat. Dengan mengamati pengguna dan menghitung jumlah total kegiatan yang mereka buat dalam melaksanakan tugas, dan dengan mengurutkan berapa banyak dari tindakan ini yang tidak menghasilkan beberapa kesalahan, lalu seseorang dapat menghitung persentase dari tindakan yang bebas dari kesalahan. Sebuah pengukuran yang berbeda dapat diperoleh dengan
55
memperhatikan berapa banyak waktu lebih yang pengguna habiskan untuk berhubungan dengan kesalahan.
9.3.4
Tingkat kepuasan.
Dengan jelas akan ada penilaian yang lebih subjektif yang disertakan disini
daripada yang di faktor lain karena tidak ada hal lain yang dapat anda ukur secara objektif. Namun, ini adalah faktor yang sangat penting dan kemungkinan akan menentukan apakah perlu atau tidak seorang pengguna untuk membeli produk anda lagi dibanding dari yang lainnya. Cara yang khusus untuk mengumpulkan informasi dari kepuasan pengguna adalah melalui sebuah survey.
9.3.5
mempelajarinya. Karenanya mungkin ini memerlukan waktu berhari-hari, atau mungkin berminggu-minggu untuk mencoba menilai apakah mudah atau tidak sebuah aplikasi dipelajari. Untuk membuatnya lebih objektif, seseorang mungkin mencoba untuk mengukur beberapa objek seperti: berapa banyak kelebihan yang dapat pengguna pelajari hanya dari antarmuka itu sendiri. berapa banyak kelebihan kemiripan dengan antarmuka yang oleh pengguna khasnya mungkin sudah dikenal. berapa banyak kegunaan dari buku panduan atau bantuan secara langsung harus diajukannya. seberapa sering dalam periode mempelajari, pengguna harus meminta bantuan kepada orang lain.
9.3.6
melakukan fungsi tertentu beberapa waktu setelah mereka menggunakan antarmuka terakhir kalinya. Seperti dengan kemampuan untuk belajar, faktor ini membutuhkan waktu berminggu-minggu untuk menilai secara tepat. Itu mungkin dinilai dengan membuat sejumlah test standar dimana pengguna bisa diuji dalam kelompok interval.
56
9.3.7
dengan secara bertahap menambah kegunaan baru. Diperkirakan bahwa masih sekitar 80% dari pengguna dari banyak paket menggunakan tidak lebih dari sekitar 20% dari kegunaan dalam paket tersebut. Ujilah sendiri oleh anda, lihat melalui buku panduan dari paket pemroses kata yang disukai anda dan hitung jumlah kelebihan penggunaan yang bahkan tidak kamu ketahui atau anda tidak pernah menemukan kegunaannya dalam hal apapun. Kadang-kadang ditemukan bahwa suatu kelebihan yang digunakan, tetapi tidak dijalan yang pengembang peruntukkan. Dalam artikel Microsoft yang disebutkan sejak permulaan, mereka menemukan bahwa orang-orang telah menggunakan kelebihan lembaran kerja berbentuk tiga dimensi dari Lotus 123 bukan untuk lembaran kerja berbentuk tiga dimensi, tetapi sebagai alat pengunci untuk memegang bersama-sama sebuah lembaran dua dimensi. Jadi, mereka menggunakan kelebihan penggunaan yang lebih modern ini atau tidak?
pengurutan atas hal yang dinilai setelah paket yang selesai itu telah diterbitkan (mungkin sebagai versi kedua) dan kemudian, pada periode waktu tertentu, pertanyaan, permintaan untuk bantuan, keluhan mulai berdatangan dari pengguna paket tersebut. Kesan pertama. Ini benar-benar memerlukan penilaian yang sangat subjektif dari pengguna, yaitu urutan pertanyaan apakah anda menyukainya? Anda mungkin perlu untuk meyakinkan bahwa anda mengetahui sesuatu dari pengalaman perhitungan dari orang-orang yang anda berikan pertanyaan. Sebagai contoh. Windows 95 mungkin juga menjadi antarmuka yang baik, tetapi coba tanyakan seorang pengguna Mac yang berpengalaman untuk dinilai kepuasannya. Pengukuran Kegunaan Perancang akan membutuhkan untuk merencanakan beberapa bentuk dari instrumen pengukur seperti survey, tabel spesifikasi sehingga setiap pengguna didalam test ditanyakan hal-hal yang sama, sebaliknya perbandingan yang pantas tidak dapat dibuat. Idealnya sebuah metode seharusnya memulai untuk menghasilkan data yang kuantitif untuk setiap faktor penggunaan dimana saja hal ini mungkin terjadi. Kita telah melihat beberapa faktor dimana pengukuran numerik adalah mungkin penugasan waktu, penugasan perhitungan dilakukan dalam waktu yang telah ditetapkan, pembuatan perhitungan kesalahan, dan selanjutnya. Bagaimana juga, pengukuran subjektif sama-sama pentingnya. Pengukuran subjektif tersebut dapat dihitung ke beberapa tingkat dengan menanyakan pengguna, dimana mereka mencoba untuk menyatakan penilaian mereka dalam kata-kata mereka sendiri, data jenis ini adalah sangat sulit untuk dianalisa dan untuk dibuat perbandingan antara komentar dari berbagai pengguna. Proses spesifikasi penggunaan. Ada sebuah rangkaian tingkat yang kelompok evaluasi HCI perlukan untuk diuji ketika melaksanakan sebuah penelitian penggunaan: 1. Menerangkan sistem pengukuran yang akan digunakan untuk menerangkan penggunaan antarmuka dalam sebuah test. Pada umumnya ada empat macam performansi metric yang salah satunya mungkin dipakai dalam proses evaluasi: i. Jangka waktu metrik, yaitu pengukuran waktu yang dibutuhkan untuk melaksanakan tugas yang telah ditentukan.
58
2.
ii. Perhitungan pengukuran, yaitu menghitung berapa kali sesuatu terjadi, atau berapa banyak kegiatan yang dibutuhkan untuk menyelesaikan tugas tersebut. iii. Proporsi yang telah selesai. Ini mungkin dinyatakan dalam persentase. Contohnya: berapa persen dari sejumlah dokumen yang dapat pengguna selesaikan dalam waktu yang telah ditetapkan. iv. Kualitas. Tidak semudah kuantitas; mungkin anda harus mengandalkan teknik seperti skala ukur seperti menanyakan apakah antarmuka itu baik, biasa, atau buruk. Menetapkan dan menyetujui perencanaan tingkat metrik. Yaitu kelompok seharusnya mencoba untuk memutuskan penerimaan sebagai tingkat kepuasan dari performansi dalam setiap pengukuran penggunaan.
3.
Pengaruh analisis dari solusi perancangan alternatif. Perancang mungkin memproduksi bentuk alternatif dari antarmuka dan mencoba untuk menyadari gaya mana yang lebih disukai atau yang dapat digunakan paling efektif oleh pengguna. Jika mungkin, perancangan antarmuka alternatif dapat ditampilkan dengan menggunakan sebuah alat prototipe cepat sehingga pengujiannya dapat menjadi serealistis mungkin.
4.
Menambahkan umpan balik pengguna ke dalam sebuah perancangan antarmuka yang telah diperbaiki. Rancangan yang telah diperbaiki akan diuji lebih jauh sampai seseorang mendapat tingkat persetujuan dari penggunaannya. Proses ini tentu saja dapat berlanjut untuk selamanya. Ketika versi akhir atau lengkap dari paket telah dipasarkan, pengembang akan terus menerima umpan balik dari pengguna, dan banyak saran mereka akan ditambahkan ke dalam versi perangkat lunak yang akan datang.
Contoh dari sebuah spesifikasi kegunaan. Target terencana ditentukan oleh apa yang mungkin disebut "informed questwork" berdasarkanpada pengetahuan perancang dari sistem yang telah ada dan tujuan tertentu dari pemakai. Paling buruk, level yang baik dan terencana adalah performansi yang harus diraih dengan pandangan pengguna tingkat mudah, rata-rata dan mahir Spesifikasi ini sekarang dapat digunakan untuk merancang prosedur pengujian, meneliti waktu pengguna melaksanakan tugas mereka dan melihat bagaimana hasil tersebut mendukung target yang telah direncanakan. Jika mereka gagal untuk meraih tujuan dalam tugas tertentu, lalu ini menandakan bahwa sistem memerlukan beberapa perbaikan dalam sarana tertentu.
59
Contoh dari tugas benchmark untuk menguji sistem email. Daftar di bawah ini adalah jenis bahasan tugas yang harus dilaksanakan dengan program email. Ingat bahwa anda mungkin dapat melihat perintah yang sama dalam sistem spesifikasi fungsi, tapi daftar ini ditulis dari pandangan yang pengguna akan lakukan. Sebagai contoh, spesifikasi fungsi untuk paket email dapat dikatakan: "Sistem harus dapat menerima dan menampilkan file" Spesifikasi pemakai lalu mungkin mengatakan: Pemakai harus dapat untuk mengambil dan membaca file yang diterima dalam detik " Contoh benchmark:
Mempersiapkan parameter untuk 2 terminal Mempersiapkan auto dial dan auto login Menentukan dial up dan login Memulai penggunaan jaringan Mengirim dan menerima file Mempersiapkan printer cadangan on/off Mempersiapkan pengiriman file/login/dial-up yang tidak terpakai Membaca file yang diterima Meninggalkan system Masing-masing dari bahasan diatas harus lebih jauh digambarkan dengan sangat
detail untuk menyakinkan bahwa semua percobaan pengujian subjek benar-benar menghasilkan tugas yang sama.
60
Tingkat sekarang untuk sistem dibawah perkembangan secara nyata tidak dapat dikenal diluar proses perancangan. Bagaimanapun juga sebuah perkiraan mungkin dapat dibuat dengan melihat pada tingkat yang dicapai oleh pengguna pada beberapa persaingan sistem atau versi terawal dari sistem sekarang. Ide yang lebih baik dari bagaimana kemampuan pengguna mungkin dapat dicapai sekali pada contoh sistem yang telah dikembangkan. Tingkatan yang paling buruk diterima tidaklah sama dengan tingkat yang buruk. Hal tersebut memungkinkan, seperti pada contoh menampilkan pandangan yang pesimis pada team perancang, yang mungkin berpikir bahwa sulit untuk mencapai sesuatu yang lebih baik pada level ini. Disisi lain, itu mungkin penaksiran yang cukup realistis dari orang baru di tingkat akhir dengan mencapai sistem macam ini. Bagaimanapun juga dalam kasus tertentu, jika pengujian faktor pengguna dibawah tingkat ini, sistem secara formal ditolak. Tingkat target terencana akan secara normal, ditentukan dimanapun di atas level sekarang (jika diketahui) dan akan dirancang di tingkat yang setidaknya sama, tetapi lebih disukai melebihi tingkat yang dicapai oleh pesaing produk tersebut. Setelah pengujian, faktor-faktor yang belum mencapai tingkat ini menjadi faktor utama untuk perkembangan kerja secara lebih jauh pada paket tersebut. Tingkat yang lebih baik harus secara nyata diatas rata-rata, mungkin dicapai oleh hal yang paling baik, perangkat lunak state-of-the-art dan perangkat keras dan/atau oleh pengguna yang paling berpengalaman. Ini adalah target yang dimaksudkan oleh perancang, dengan demikian mereka akan puas dengan sesuatu yang minimun (untuk sekarang). Hal tersebut mungkin menandakan ada ruang lebih lanjut untuk perkembangan sesuatu untuk diraih untuk versi yang akan datang.
61
Ketika
menggunakan
siklus
prototipe
dari
perancangan,
hal
tersebut
memperbolehkan pengukuran yang jelas dari penggunaan sistem pada tingkat pada beberapa tingkat dari perkembangan proses. Hal tersebut menjelaskan secara tepat dan jelas data mana yang harus dikumpulkan dan diukur, jadi waktu tidak terbuang dalam mengumpulkan data yang tidak relevan. Pengukuran kuantitatif juga memperbolehkan identifikasi objek pada kelemahan antarmuka sehingga dikenal dimana upaya perancangan dan perbaikan harus dikonsentrasikan.
62
Pendahuluan
Forms of paper user manuals:
Brief getting-started notes Introductory tutorial Thorough tutorial Quick reference card Conversation manual Detailed reference manual
10.1.2
Online materials
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
10.3
Traditionally, training and reference material often written by junior member of development team manuals were often poorly written were not suited to the background of the users were delayed or incomplete were not tested adequately Foss, Rosson, Smith experiments on manuals: Standard Manual Modified Manual all command details presented at once spiral approach presenting subsets of concepts abstract formal notation to present syntax showed numerous examples of syntax used terse technical prose used readable explanations with little jargon
Sullivan and Chapanis used iterative process for refining a manual:
rewrote original manual conducted walk-through test with colleagues performed tests with secretaries
Allwood and Kalen realized improvements by keeping sentences short avoiding jargon using a new paragraph for each command emphasizing tasks, not syntax
10.3.1
Introductory tutorial task training first learn the hierarchy of objects, from high level down to the atomic recognize the range of high-level intentions down to specific action steps learn about the interface representations o start with familiar objects and actions 64
o o
link these concepts to high-level interface objects and actions show syntax needed to accomplish each task
Conversion manual users knowledgeable about task domain, but unfamiliar with specific software need presentation showing relationship between metaphors and already known plans and the new ones required by the new software Quick reference user knowledgeable about task and interface objects and actions needs details to convert their plans into detailed actions Sample sessions extremely helpful in giving portrait of system features and interaction styles.
Flow diagram provides visual overview that orients users to transitions from one activity to another.
10.3.2
Precise statement of educational objectives Present concepts in a logical sequence with increasing order of difficulty Ensure that each concept is used in subsequent sections Avoid forward references Construct sections with approximately equal amounts of new material Need sufficient examples and complete sample sessions Choice of words and phrases important Writing style should match users' reading ability Learners prefer trying out commands online rather than just reading manual Minimal manuals encourage active involvement with hands-on experiences Carroll's guided exploration o choose an action-oriented approach o anchor the tool in the task domain o support error recognition and recovery o support reading to do, study, and locate Show numerous well-chosen screen prints that demonstrate typical uses (predictive model) Table of contents and index required Glossaries for clarifying technical terms Appendices for error messages
10.3.3
Nonanthropomorphic descriptions
Metaphors used in describing computer systems can influence users' reactions. Emphasize user's role, especially in introductory sections Choice of verbs when referring to computer important o Avoid verbs such as know, think, understand, and have memory o Use verbs such as process, print, compute, sort, store, search, retrieve When describing what a user does with a computer
65
Avoid ask, tell, speak to, communicate with Use terms such as use, direct, operate, program, control Better to eliminate reference to the computer and concentrate on what user is doing Focus on user's initiative, process, goals, and accomplishments
o o
10.3.4
Development process
Start early! allows adequate time for review, testing, and refinement manual can act as a more complete and comprehensible alternative to formal specifications Manual writer becomes effective critic, reviewer, or question asker Enables pilot testing of software's learnability Allows for reviews and suggestions by designers, etc. Informal walkthroughs with users possible Field trials with moderate numbers of users facilitated Brockman's process for writing user documentation: 1. Develop the document specifications: o Use task orientation o Use minimalist design o Handle diverse audiences o State the purpose o Organize information and develop visualizations o Consider layout and color 2. Prototype 3. Draft 4. Edit 5. Review 6. Field test 7. Publish 8. Perform postproject review 9. Maintain
10.4
Positive reasons for making manuals available online: Information is available whenever the computer is available Users do not need to allocate work space to opening up manuals Information can be electronically updated rapidly and at low cost Specific information necessary for a task can be located rapidly if the online manual offers electronic indexing or text searching Authors can use graphics, sound, color, and animations that may be helpful in explaining complex actions and creating an engaging experience Potentially negative aspects of online manuals: Displays may not be as readable as printed materials. Displays may contain substantially less information than a sheet of paper. The rate of paging is slow compared to the rate of paging through a manual. 66
The display resolution is lower than that of paper, which is especially important when pictures or graphics are used. The command language of help systems may be novel and confusing to novices. The extra mental effort required for navigating through many screens may interfere with concentration and learning. Splitting the display between work and help or tutorial windows, reduces the space for work displays. If users must switch to a separate application then the burden on the user's shortterm memory can be large. Users lose their context of work and have difficulty remembering what they read in the online manual.
Advantages of online help facilities (Relles and Price): Successively more detailed explanations of a displayed error message Successively more detailed explanations of a displayed question or prompt Successive examples of correct input or valid commands Explanation or definition of a specified term A description of the format of a specified command A list of allowable commands A display of specified sections of documentation A description of the current value of various system parameters Instruction on the use of the system News of interest to users of the system A list of available user aids Kearsley's guidelines for online help systems: Make the help system easy to access and easy to return from. Make help as specific as possible. Collect data to determine what help is needed. Give users as much control as possible over the help system. Make help messages accurate and complete. Do not use help to compensate for poor interface design.
10.4.1
Online Manuals
Reproduction of printed manuals 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 Enhanced by special online features 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 67
Most effective if manuals redesigned to fit electronic medium to take advantage of o multiple windows o text highlighting o color o sound o animation o string search with relevance feedback Properly designed table of contents that can remain visible to side of text page vital Novices need tutorials Intermittent knowledgeable users can handle concise descriptions of interface syntax and semantics Keyword lists improved by clustering into meaningful categories
Types of help systems: User can set level of detail and kind of information they obtain from system Lists of help keystrokes or menu items Context-sensitive help Balloon help
10.4.3
Helpful Guides
May be well-known personalities or cartoon figures to lead user through information Help networks using email 68
sent to designated help desk or staff person sent to general list within organization users must publicly expose their lack of knowledge risk of getting incorrect advice Frequently asked questions (FAQ) lists for newcomers
o o o o
69
11 STRATEGI MULTIPLEWINDOW
11.1
Introduction
Users need to consult multiple sources rapidly must minimally disrupt user's task With large displays, eye-head movement and visibility are problems With small displays, windows too small to be effective Need to offer users sufficient information and flexibility to accomplish task, while reducing window housekeeping actions, distracting clutter, eye-head movement o opening, closing, moving, changing size o time spent manipulating windows instead of on task Can apply direct-manipulation strategy to windows Rooms - a form of window macro that enables users to specify actions on several windows at once
11.2
Individual-Window Design
Titles Borders or frames Scroll bars Window interface actions include: o Open action o Open place and size o Close action o Resize action o Move action o Bring forward or activation
11.3
Multiple-Window Design
Multiple monitors Rapid display flipping split displays Fixed number, size, and place, and space-filling tiling Variable size, place, and number, and space-filling tiling Non-space-filling tiling piles-of-tiles Window zooming Arbitrary overlaps Cascades 70
Synchronized scrolling Hierarchical browsing Direct selection Two-dimensional browsing Dependent-windows opening Dependent-windows closing Save or open window state
Vision statement Set of people Task hierarchy Schedule The requirements for personal role management include: o Support a unified framework for information organization according to users' roles o Provide a visual, spatial layout that matches tasks o Support multi-window actions for fast arrangement of information o Support information access with partial knowledge of its nominal, spatial, temporal, and visual attributes and relationships to other pieces of information. o Allow fast switching and resumption among roles o Free user's cognitive resources to work on task domain actions rather than interface domain actions. o Use screen space efficiently and productively for tasks.
71
12 LAMPIRAN
ERGONOMIC GUIDELINES FOR USER-INTERFACE DESIGN
The following points are guidelines to good software interface design, not an absolute set of rules to be blindly followed. These guidelines apply to the content of screens. In addition to following these guidelines, effective software also necessitates using techniques, such as 'storyboarding', to ensure that the flow of information from screen to screen is logical, follows user expectations, and follows task requirements.
1. Consistency ("Principle of least astonishment") o certain aspects of an interface should behave in consistent ways at all times for all screens o terminology should be consistent between screens o icons should be consistent between screens o colors should be consistent between screens of similar function 2. Simplicity o break complex tasks into simpler tasks o break long sequences into separate steps o keep tasks easy by using icons, words etc. o use icons/objects that are familiar to the user 3. Human Memory Limitations o organize information into a small number of "chunks" o try to create short linear sequences of tasks o don't flash important information onto the screen for brief time periods o organize data fields to match user expectations, or to organize user input (e.g. autoformatting phone numbers) o provide cues/navigation aids for the user to know where they are in the software or at what stage they are in an operation o provide reminders, or warnings as appropriate o provide ongoing feedback on what is and/or just has happened o let users recognize rather than recall information o minimize working memory loads by limiting the length of sequences and quantity of information - avoid icon mania! 4. Cognitive Directness o minimize mental transformations of information (e.g. using 'control+shift+esc+8' to indent a paragraph) o use meaningful icons/letters o use appropriate visual cues, such as direction arrows o use 'real-world' metaphors whenever possible (e.g. desktop metaphor, folder metaphor, trash can metaphor etc.) 5. Feedback o provide informative feedback at the appropriate points o provide appropriate articulatory feedback - feedback that confirms the physical operation you just did (e.g. typed 'help' and 'help' appear on the
72
6.
7. 8.
9.
screen). This includes all forms of feedback, such as auditory feedback (e.g. system beeps, mouse click, key clicks etc.) o provide appropriate semantic feedback - feedback that confirms the intention of an action (e.g. highlighting an item being chosen from a list) o provide appropriate status indicators to show the user the progress with a lengthy operation (e.g. the copy bar when copying files, an hour glass icon when a process is being executed etc.) System messages o provide user-centered wording in messages (e.g. "there was a problem in copying the file to your disk" rather than "execution error 159") o avoid ambiguous messages (e.g. hit 'any' key to continue - there is no 'any' key and there's no need to hit a key, reword to say 'press the return key to continue) o avoid using threatening or alarming messages (e.g. fatal error, run aborted, kill job, catastrophic error) o use specific, constructive words in error messages (e.g. avoid general messages such as 'invalid entry' and use specifics such as 'please enter your name') o make the system 'take the blame' for errors (e.g. "illegal command" versus "unrecognized command") Anthropomorphization o don't anthropomorphize (i.e. don't attribute human characteristics to objects) - avoid the "Have a nice day" messages from your computer Modality o use modes cautiously - a mode is an interface state where what the user does has different actions than in other states (e.g. changing the shape of the cursor can indicate whether the user is in an editing mode or a browsing mode) o minimize preemptive modes, especially irreversible preemptive modes - a preemptive mode is one where the user must complete one task before proceeding to the next. In a preemptive mode other software functions are inaccessible (e.g. file save dialog boxes) o make user actions easily reversible - use 'undo' commands, but use these sparingly o allow escape routes from operations Attention o use attention grabbing techniques cautiously (e.g. avoid overusing 'blinks' on web pages, flashing messages, 'you have mail', bold colors etc.) o don't use more than 4 different font sizes per screen o use serif or sans serif fonts appropriately as the visual task situation demands o don't use all uppercase letters - use and uppercase/lowercase mix o don't overuse audio or video o use colors appropriately and make use of expectations (e.g. don't have an OK button colored red! use green for OK, yellow for 'caution, and red for 'danger' or 'stop') o don't use more than 4 different colors on a screen o don't use blue for text (hard to read), blue is a good background color o don't put red text on a blue background o use high contrast color combinations 73
use colors consistently use only 2 levels of intensity on a single screen Use underlining, bold, inverse video or other markers sparingly on text screens don't use more than 3 fonts on a single screen 10. Display issues o maintain display inertia - make sure the screen changes little from one screen to the next within a functional task situation o organize screen complexity o eliminate unnecessary information o use concise, unambiguous wording for instructions and messages o use easy to recognize icons o use a balanced screen layout - don't put too much information at the top of the screen - try to balance information in each screen quadrant o use plenty of 'white space' around text blocks - use at least 50% white space for text screens o group information logically o structure the information rather than just presenting a narrative format (comprehension can be 40% faster for a structured format) 11. Individual differences o accommodate individual differences in user experience (from the novice to the computer literate) o accommodate user preferences by allowing some degree of customization of screen layout, appearance, icons etc. o allow alternative forms for commands (e.g. key combinations through menu selections)
o o o o
74
User Interface Components http://www.devdirect.com/ALL/UserInterfaceComponents_SGROUP_0004. aspx These products enable developers to enhance the user interface of their applications with features such as grids, toolbars and trees. These are typically user interface elements that have been added to popular applications such as MS Outlook or Visual Studio or elements from the latest operating system versions such as Windows XP. Button Controls & Components - (23 products)
These products allow you to create buttons for your applications with a variety of different styles, shapes and capabilities. They can be used to replace the standard button supplied with Windows. The button page lists all button controls and components for .Net, ASP.NET, ActiveX, Java, Delphi.
75
control page contains all Instrumentation libraries, components and controls for .Net, ASP.NET, ActiveX, Java, Delphi.
76
This is page contains links to HCI and User Interface Design related web sites that may help you with User Interface Links include corporate sites, industry GUI and WEB style guides, Universities that have HCI or User Interface Desig activities. The links have been put in the following categories: Publications - Books, Publications and Papers User Interface Design Style Guides - Industry Style Guides Web Design Style Guides Useful User Interface Design and HCI References - Other References Associations and Organizations IBM User Interface Links Microsoft User Interface Links Apple User Interface Links UNIX User Interface Links Miscellaneous Sites of Interest Universities - Universities that specialize in UI design or have active HCI labs If you find any additional sites, that you feel should be added, please send us an email.
77
Ameritech Web Page User Interface Standards and Design Guidelines Apple Web Design Guide Sun Microsystems: Guide to Web Style Yale Web Style Manual IEEE Web Style Guide IBM Web Design Guidelines
HCI Resources: Guidelines, Styleguides, and Standards - Collection of links to various resources HCI resources on the Net (Yahoo listing) HCI Index - A collection different resources on Human-Computer-Interaction User Interaction Design Web comp.human-factors - A newsgroup for questions and information related to HCI in general HCI Related Material on the Web - A collection of pages that point to many different resources on Human Interaction. Human - Computer Interaction Virtual Library - a meta-index of information on human-computer interactio Graphics Visualization & Usability Center - A searchable database of research related to User Interface a and other cool topics like Animation, Multimedia, and Hypertext.
Microsoft Research User Interfaces Group - A page about a group at Microsoft that is researching future u interface technologies. Discusses a project called Persona which is exploring conversational assistants (li animated characters) to interact with users. The Windows Interface Guidelines for Software Design
The Open Group Interface Design for Sun's WWW Site - Part of Sun Microsystems site that shows their numerous iteration page and icon designs, as well as a description of the usability engineering methods used in their design
78
13.10 Universities
Binghamton University Brigham Young University Brunel University Glasgow University Helsinki University of Technology Heriot-Watt University Hull University Staffordshire University University of Lisbon University of Toronto University of Trondheim
Stanford University University of London University of British Columbia University of Canberra University of Manchester University of Manchester University of Maryland University of Nebraska University of New Brunswick Universoty of Oldenburg
Brunel University Carnegie Mellon University Chalmers University of Technology City University of London Delft University of Technology Free University of Berlin Georgia Tech.
University of York
Uppsala University
University of Ulster
The Open University Oregon Graduate Institute Queen Mary and Westfield College
Virginia Tech.
University of Leeds
79
DAFTAR ISI
1 INTERAKSI MANUSIA KOMPUTER..........................................................................1 1.1 DEFINISI DAN FUNGSI INTERAKSI MANUSIA KOMPUTER............................................1 1.2 USABILITY.......................................................................................................................2 1.2.1 LEARNABILITY.........................................................................................................2 1.2.2 THROUGHPUT...........................................................................................................2 1.2.3 FLEXIBILITY..............................................................................................................2 1.2.4 ATTITUDE..................................................................................................................3 1.3 PROSES MENGHASILKAN INTERFACE YANG BAIK.......................................................3 1.4 KONSEKUENSI INTERFACE YANG BURUK......................................................................3 1.5 BIDANG ILMU YANG TERKAIT DENGAN IMK...............................................................4 1.5.1 ILMU KOMPUTER...........................................................................................................4 1.5.2 COGNITIVE PSIKOLOGI / PEMAHAMAN PSIKOLOGI.......................................................4 1.5.3 ERGONOMIK..................................................................................................................5 1.5.4 SOSIOLOGI.....................................................................................................................5 1.6 KONTEKS IMK...............................................................................................................5 2 PERALATAN & MODEL INTERAKSI........................................................................ 7 2.1 PERALATAN INTERAKSI.........................................................................................8 2.2 TEKNIK INTERAKSI..................................................................................................9 2.2.1 LINGUISTIC STYLES. ...................................................................................................9 2.2.2 KEY-MODAL STYLES. .................................................................................................9 2.2.3 DIRECT MANIPULATION STYLES. ..............................................................................9 3 SISTEM PENGOLAHAN INFORMASI PADA MANUSIA......................................11 3.1 SUBSISTEM INTERAKSI.........................................................................................12 3.1.1 PERCEPTUAL SYSTEM..................................................................................................12 3.1.2 SISTEM KOGNITIF.......................................................................................................12 3.1.3 SISTEM GERAK............................................................................................................12 3.2 MODEL PROSESOR DAN MEMORI MANUSIA.................................................13 3.3 KETERBATASAN MEMORI............................................................................................14 3.3.1 SHORT-TERM-MEMORY...............................................................................................14 3.3.2 LONG-TERM-MEMORY................................................................................................15 3.3.3 KESIMPULAN DARI KETERBATASAN MEMORI ............................................................15 4 PANDUAN MERANCANG IMK..................................................................................16 4.1.1 4.1.2 4.1.3 4.1.4 4.1.5 KONSISTENSI...............................................................................................................18 KESESUAIAN DENGAN HARAPAN PENGGUNA.............................................................18 KONTROL DAN FLEKSIBILITAS....................................................................................19 SUSUNAN EKSPLISIT DARI ANTARMUKA. ..................................................................19 UMPAN BALIK YANG INFORMATIF DAN BERKESINAMBUNGAN...................................19
80
4.1.6 PENCEGAHAN DAN PERBAIKAN KESALAHAN ............................................................20 4.1.7 PENDUKUNG DAN DOKUMENTASI PENGGUNA............................................................20 4.1.8 KEJELASAN VISUAL SECARA LOJIK DAN RELEVAN./ VISUAL CLARITY......................21 4.2 PERTIMBANGAN LAIN..................................................................................................21 4.3 CONTOH ANTARMUKA..................................................................................................22 5 PANDUAN MEMBUAT MENU....................................................................................27 5.1 PENGATURAN TUGAS YANG BERHUBUNGAN (TASK-RELATED ORGANIZATION).....27 5.1.1 SINGLE MENUS............................................................................................................28 5.1.2 LINEAR SEQUENCES AND MULTIPLE MENUS.............................................................28 5.1.3 TREE-STRUCTURED MENUS........................................................................................28 5.1.4 BEBERAPA BENTUK MENU YANG LAINNYA................................................................28 5.2 STRATEGI UNTUK MENGELOMPOKKAN MENU............................................................29 5.3 URUTUAN PENAMPILAN ITEM MENU..........................................................................29 5.4 WAKTU RESPON DAN KECEPATAN TAMPIL...............................................................29 5.5 PEMILIHAN MENU YANG CEPAT.................................................................................30 5.6 TATA LETAK MENU.....................................................................................................30 5.6.1 JUDUL .........................................................................................................................30 5.6.2 FRASA DARI ITEM MENU.............................................................................................30 5.6.3 TATA LETAK DAN DESAIN MONITOR (GRAPHIC).........................................................30 5.7 FORM FILLIN................................................................................................................31 5.7.1 FORM-FILLIN DESIGN GUIDELINES.............................................................................31 5.7.2 LIST DAN COMBO BOXES.............................................................................................32 5.7.3 DIALOG BOXES...........................................................................................................32 5.8 SARAN UMUM................................................................................................................32 6 ICON / TOOLBUTTON.................................................................................................33 6.1 6.2 6.3 6.4 DEFINISI ICON..............................................................................................................33 KEUNTUNGAN PENGGUNAAN ICON.............................................................................34 KEKURANGAN PENGGUNAAN ICON.............................................................................35 PERTIMBANGAN PERANCANGAN/PEMILIHAN ICON...................................................36
7 PENGATURAN TAMPILAN DAN WARNA..............................................................38 7.1 KERAPATAN VISUAL DAN KESEIMBANGAN.................................................................38 7.2 KEJELASAN TEKS..........................................................................................................39 7.3 PENGKODEAN VISUAL..................................................................................................40 7.4 WARNA..........................................................................................................................41 7.4.1 CACAT WARNA..........................................................................................................41 7.4.2 PENYIMPANGAN KROMATIK........................................................................................42 7.4.3 MENGAPA WARNA SEKARANG LEBIH BANYAK DIGUNAKAN DALAM INTERFACES KOMPUTER?...........................................................................................................................42 7.4.4 TUNTUNAN UNTUK MENGGUNAKAN WARNA .............................................................43 7.5 TUNTUNAN UMUM.........................................................................................................43 8 PENGGUNAAN SISTEM WARNA RGB....................................................................45 81
8.1 CAHAYA MELALUI KOMBINASI WARNA DASAR/PRIMER ..........................................45 8.2 SISTEM WARNA RGB .................................................................................................45 8.3 WARNA ABU-ABU (GRAY)............................................................................................46 8.4 WARNA DASAR / WARNA PRIMER...............................................................................46 8.5 WARNA SEKUNDER.......................................................................................................46 8.6 WARNA-WARNA LAINNYA............................................................................................47 8.7 WARNA MURNI .............................................................................................................47 8.8 HUE (RODA WARNA) DAN LUMINOSITY (KILAUAN)....................................................47 8.9 SATURATION / KEJENUHAN.........................................................................................48 8.10 PENYAJIAN WARNA DENGAN BILANGAN BULAT (DESIMAL & HEKSA)....................49 8.11 MENAMPILKAN WARNA DALAM APLIKASI WINDOWS...............................................49 8.12 WARNA WARNA PASTEL.............................................................................................51 9 SPESIFIKASI KEGUNAAN (USABILITY)................................................................52 9.1 SPESIFIKASI KEGUNAAN..............................................................................................52 9.2 PENGUKURAN SPESIFIKASI KEGUNAAN......................................................................53 9.3 FAKTOR PENGGUNAAN UMUM.....................................................................................54 9.3.1 KECEPATAN OPERASI...................................................................................................54 9.3.2 TINGKAT PENYELESAIAN............................................................................................55 9.3.3 TINGKAT BEBAS KESALAHAN.....................................................................................55 9.3.4 TINGKAT KEPUASAN...................................................................................................56 9.3.5 KEMAMPUAN UNTUK BELAJAR....................................................................................56 9.3.6 KEMAMPUAN UNTUK MEMELIHARA.............................................................................56 9.3.7 PEMAKAIAN KEGUNAAN YANG LEBIH MODERN..........................................................57 9.4 KAPAN ANDA MELAKUKAN PENELITIAN KEGUNAAN INI?..........................................57 9.5 MENENTUKAN TINGKAT UNTUK PENGGUNAAN..........................................................60 9.6 KEUNTUNGAN DARI SPESIFIKASI PENGGUNA..............................................................61 9.7 KERUGIAN SPESIFIKASI KEGUNAAN...........................................................................62 10 BUKU PANDUAN, ONLINE HELP, DAN TUTORIALS.......................................63 10.1 PENDAHULUAN.............................................................................................................63 10.1.1 FORMS OF PAPER USER MANUALS:............................................................................63 10.1.2 ONLINE MATERIALS...................................................................................................63 10.1.3 ONE WAY TO CLASSIFY PAPER AND ONLINE MATERIALS (DUFFY):...........................63 10.2 READING FROM PAPER VERSUS FROM DISPLAYS......................................................63 10.3 PREPARATION OF PRINTED MANUALS.......................................................................64 10.3.1 USE OF OAI MODEL TO DESIGN MANUALS...............................................................64 10.3.2 ORGANIZATION AND WRITING STYLE........................................................................65 10.3.3 NONANTHROPOMORPHIC DESCRIPTIONS....................................................................65 10.3.4 DEVELOPMENT PROCESS............................................................................................66 10.4 PREPARATION OF ONLINE FACILITIES......................................................................66 10.4.1 ONLINE MANUALS.....................................................................................................67 10.4.2 ONLINE TUTORIALS, DEMONSTRATIONS, AND ANIMATIONS......................................68 10.4.3 HELPFUL GUIDES.......................................................................................................68 11 STRATEGI MULTIPLE-WINDOW.......................................................................... 70
82
11.1 INTRODUCTION............................................................................................................70 11.2 INDIVIDUAL-WINDOW DESIGN...................................................................................70 11.3 MULTIPLE-WINDOW DESIGN.....................................................................................70 11.4 COORDINATION BY TIGHTLY COUPLED WINDOWS..................................................71 11.5 IMAGE BROWSING AND TIGHTLY-COUPLED WINDOWS...........................................71 11.6 PERSONAL ROLE MANAGEMENT AND ELASTIC WINDOWS......................................71 12 LAMPIRAN...................................................................................................................72 13 USER INTERFACE DESIGN AND USABILITY.....................................................77 13.1 USER INTERFACE DESIGN STYLE GUIDES.................................................................77 13.2 WEB DESIGN STYLE GUIDES......................................................................................77 13.3 USEFUL USER INTERFACE DESIGN AND HCI REFERENCES.....................................78 13.4 ASSOCIATIONS AND ORGANIZATIONS........................................................................78 13.5 IBM USER INTERFACE LINKS....................................................................................78 13.6 MICROSOFT USER INTERFACE LINKS........................................................................78 13.7 APPLE USER INTERFACE LINKS.................................................................................78 13.8 UNIX USER INTERFACE LINKS..................................................................................78 13.9 MISCELLANEOUS SITES OF INTEREST .......................................................................79 13.10 UNIVERSITIES ...........................................................................................................79
83