interaksi manusia dan komputer

Diktat Kuliah Interaksi Manusia Komputer

1 Interaksi Manusia Komputer

Bahasan :1. Mempelajari bidang ilmu Interaksi Manusia dan Komputer (IMK/ HCI = Human

Computer Interaction).2. Menjelaskan mengapa bidang ilmu ini cukup penting dalam menentukan

keberhasilan sebuah sistem komputer.3. Memperkenalkan konsep ‘Usabilty’ dan ‘Affordance’.

1.1 Definisi dan Fungsi Interaksi Manusia Komputer

Definisi IMK adalah :

Sebuah bidang ilmu yang mempelajari bagaimana mendesain, mengevaluasi dan menerapkan interaksi antara manusia dan komputer.

Fungsi dari IMK adalah:Mengoptimasikan performansi antara manusia dengan komputer sebagai suatu system

Lihat konteks berikut! Segala mesin yang dioperasikan oleh manusia untuk mencapai tujuan tertentu dengan melakukan suatu aksi. Tujuannya memaksimalkan fungsi suatu mesin. Ada interaksi antara manusia dengan mesin, seperti pada gambar berikut :

Konteks Aksi dan Fungsi

MANUSIA aksi MESIN

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

1


kemauan untuk melakukan ini sebab mereka memiliki motivasi – mesin adalah satu-satunya 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 LEARNABILITY Seberapa mudah mempelajari suatu sistem? Seberapa cepat untuk menguasai sampai menjadi ?

1.2.2 THROUGHPUT

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?

1.2.3 FLEXIBILITY

2


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?

1.3 Proses Menghasilkan Interface yang baik

Mungkinkah menghasilkan suatu interface yang baik? Mungkin. Berikut gambaran dalam menghasilkan suatu produk antarmuka yang baik.

Satu kebutuhan diharuskan ada pemetaan yang jelas antara tujuan dari seorang pemakai dengan aksi dan hasil yang ingin dicapai. Dari hasil tersebut akan diperoleh masukan / umpan balik untuk memperbaiki tujuan pemakai. Proses ini akan berulang untuk memperbaiki hasil hingga maksimal.

Tujuan aksi fungsi daripemakai kontrol pemakai suatu sistem Hasil

umpan balik

Hubungan antara tujuan akhir, aksi dan hasil yang diharapkan sebaiknya ‘visibility /dapat dicapai” dan ‘transparansii.

Suatu contoh kekurangan dari visibility ialah telepon digital modern. Telepon tersebut memiliki banyak fungsi seperti berhubungan antar operator telepon. Saat user menekan tombol yang salah untuk melakukan hubungan ke operator lain, tidak ada konfirmasi bahwa user tersebut salah mengisi nomor.

Perbedaan yang menyolok terdapat kontrol suatu mobil yang memiliki visibility yang baik. Sat anda memutar setir maka mobil itu juga akan langsung berputar atau bereaksi. Jika anda mengerem maka anda akan langsung merasakan dampaknya.

Satu kesamaan, dengan interface komputer yang baik kita tidak harus mengerti bagaimana cara kerja komputer untuk melakukan suatu proses demi mencapai hasil yang diinginkan. Mungkin ide ini adalah definisi terbaik dari konsep “transparansi”.

1.4 Konsekuensi Interface yang buruk

3

Antarmuka /


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 Bidang Ilmu yang terkait dengan IMK

Beberapa ilmu pengetahuan yang terkait dengan IMK, antara lain :

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 Cognitive Psikologi / Pemahaman Psikologi

Melihat otak sebagai peralatan pemroses informasi. Pengetahuan tentang presepsi, perhatian, ingatan, proses pembelajaran, cara berfikir dan pemecahan masalah perlu dipahami.

4


Ilmu Pengamatan Sosial danKomputer Psikologis Organisasi

Psikologis

HCI Ergonomic

Sosiologi Desain AI Grafik

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.

1.6 Konteks IMK

Contoh sukses produk yang memiliki IMK yang baik ialah GUI (Graphical User Interface) – yang sekarang sudah umum (windows, icon, mouse, pointer) interface. Dari penelitian kelihatannya GUI memiliki keuntungan dibanding interface mode teks (Command Driven).

Tugas pemakai selesai lebih cepat. Tingkat frustasi rendah. Penurunan kelebihan tenaga. Bisa belajar sendiri – menurunkan biaya pelatihan. Bisa mempelajari lebih banyak kemampuan suatu aplikasi.

Berikut model yang menggambarkan Konteks, Cara Manusia berinteraksi dengan komputer dan Proses pengembangan sebuah interaksi. (lihat gambar)

5


6


2 PERALATAN & MODEL INTERAKSI

Bahasan :1. Menjelaskan secara global peralatan interaksi2. Menjelaskan kelebihan dan kekurang model interaksi yang ada

Kandasnya sistem operasi yang berbasis teks seperti DOS, salah satu faktornya adalah teknik interaksi antara pengguna dan komputer yang menyulitkan dan memerlukan keterampilan khusus. Lain halnya dengan sistem operasi berbasis grafik seperti Windows, menawarkan sejuta kemudahan yang tidak dimiliki oleh sistem operasi sebelumnya. Walaupun pada awalnya orang enggan memakai sistem operasi ini karena keterbatasan pemroses, memori dan peralatan. Namun kendala itu sekarang sudah bisa teratasi, misalnya harga pemroses (CPU), memori dan peralatan lainnya yang turun drastis.

Beberapa alat permainan elektronik yang mendominasi pasaran dunia, seperti Game Watch, Tamagochi, Play Station menawarkan kemudahan dalam penggunaannya. Peralatan dapur elektronik juga berlomba untuk menawarkan kemudahan penggunaan untuk menjalankan suatu fungsi. Secara psikologis pengguna tidak mau dipersulit oleh suatu peralatan, karena seharusnya peralatan tersebut mempermudah kerja manusia untuk menjalankan suatu fungsi tertentu. Karena hal inilah, orang mulai mengembangkan suatu cara untuk mempermudah interaksi antara manusia dan peralatan tersebut.

Di negara-negara industri maju, para ilmuwan mengembangkan suatu bidang ilmu yang difokuskan pada desain, evaluasi dan implementasi yang berhubungan dengan interaksi manusia dan komputer. Bidang ilmu ini dikenal dengan nama Interaksi Manusia-Komputer (Human Computer Interaction / HCI). Tujuannya adalah memahami prinsip-prinsip perancangan sistem interaksi yang efektif, sehingga suatu peralatan (termasuk di dalamnya perangkat lunak) disukai oleh penggunanya.

Interaksi Manusia-Komputer dapat terjadi bila manusia sebagai pengguna peralatan komputer memberikan aksi yang dimengerti oleh komputer tersebut. Komputer akan menjalankan suatu fungsi sesuai program yang sudah dimuat didalamnya. Jadi tujuan manusia tercapai dengan bantuan komputer yang sudah diprogram untuk menjalankan fungsi tertentu. Gambar berikut menjelaskan prinsip dasar terjadinya interaksi.

7

TUJUAN

Aksi

Fungsi

KOMPUTER

MANUSIA


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.

2.1 PERALATAN INTERAKSI

Komputer merupakan suatu alat/mesin yang digunakan oleh manusia untuk mencapai tujuan tertentu. Pada dasarnya komputer terdiri dari 4 jenis peralatan (device), yaitu alat masukan (input), pemroses (CPU), penyimpan (memory) dan alat keluaran (output). Alat masukan digunakan oleh manusia untuk memasukkan ‘aksi’ kepada komputer. Komputer akan memroses ‘aksi’ tersebut di alat pemroses dan mengeluarkan suatu ‘fungsi’ melalui alat keluaran. Alat masukan (seperti keyboard, mouse, touch panel, joy stick, speech recognizers, eye tracker, scanner) dan alat keluaran (seperti visual display / sound / speech systhesizer) ini merupakan komponen fisik untuk terjadinya interaksi manusia dengan komputer atau sebaliknya komputer dengan manusia (Gambar 2). Sedangkan komponen non fisik menyangkut penyajian tampilan untuk interaksi tersebut.

Gambar 2. Peralatan Interaksi : Alat Masukan dan Keluaran

Peralatan masukan dipengaruhi oleh tipe aplikasi yang kita rancang menggunakan GUI. Berikut ranking peralatan tsb :

Rank Selecting Positioning Numeric Text Drawing

1 mouse mouse numeric key padalphanumeric key pad

tablet

2 joystick /trackball joystick /trackball alphanumeric key pad

tablet mouse

3lightpen/touch screen

lightpen/touch screen

tablet soft keyboardlightpen/touch screen

8

Masukan Pemroses Keluaran

PenyimpanAlat interaksi manusia komputer

Alat interaksi komputer-manusia

http://website.lineone.net/~mw25/touch_screen_image.htm


http://website.lineone.net/~mw25/lightpen.htm

http://website.lineone.net/~mw25/tablet.htm







http://website.lineone.net/~mw25/mouse.htm


http://website.lineone.net/~mw25/keyboard.htm


http://website.lineone.net/~mw25/trackball.htm

http://website.lineone.net/~mw25/joystick.htm

http://website.lineone.net/~mw25/trackball.htm

http://website.lineone.net/~mw25/joystick.htm




http://website.lineone.net/~mw25/numeric_keypad.htm




4 function keys cursor soft keyboard

2.2 TEKNIK INTERAKSI

Ada tiga kelompok teknik / gaya interaksi yaitu :

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 Direct Manipulation Styles.

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.

9

http://website.lineone.net/~mw25/function_keypad_image.htm


3 SISTEM PENGOLAHAN INFORMASI PADA MANUSIA

Bahasan :1. Menjelaskan bagaimana psikologi dapat memberi kontribusi untuk HCI2. Menjelaskan beberapa subsistem interaksi manusia3. Menjelaskan “Prosesor Model Manusia” dalam istilah prosesor dan memori.4. Menjelaskan implikasi model ini untuk HCI.

Tujuan dari HCI adalah mengembangkan cara manusia berinteraksi dengan sistem komputer, yang lebih berguna untuk mengetahui sesuatu tentang karakteristik ‘orang’ : secara pribadi, karakteristik yang memungkinkan cara berinteraksi dengan sistem komputer (dan dengan orang lain).

Jadi, unsur pengetahuan psikologi membantu desainer HCI untuk :a. identifikasi / “mengetahui /mengenal” sasaran pengguna mendesain untuk

kebutuhannya, kapabilitas, tujuan dan lain-lain.b. menerangkan mengapa beberapa antarmuka lebih sukses dibanding dengan yang lain.

Sayangnya ini tidak cukup sukses dalam penjelasan perspektif atau panduan perspektif (aturan jelasnya) untuk desain yang lebih baik. Kepercayaan utama dari penelitian sekarang ada dalam ladang psikologi kognitif, yang merupakan pelajaran bagaimana kita meningkatkan pengetahuan tentang sesuatu (termasuk mengerti, mengingat, alasan, perhatian, menjadi peduli, peningkatan kemampuan, membuat ide baru dan lain-lain).

Catatan, sampai kini, ini menjadi fokus utama pengguna individu, contoh – faktor dengan pengaruh interaksi satu orang dengan komputer. Ingat, orang tidak melakukan kerja dalam isolasi, mereka sering bekerja dengan sebuah sistem yang membutuhkan kerja sama dengan interaksi bersama bersama sistem teknologi. [sebuah contoh yang baik Pusat Kontrol Ruang Angkasa Houston. Sebuah contoh sederhana yang memungkinkan kerjasama kapten dan ko pilot pesawat terbang].

Tetapi, untuk saat tertentu, keita menjadi melihat beberapa aspek psikologi individu dan cara-cara mereka dalam berintraksi dengan teknologi (antarmuka). Ini membuktikan dalam skala besar perangkat lunak komputer memproduksi dengan single, atau pengguna yang berdiri sendiri dalam konsep.

Pertama-tama, yakinkan, kita dapat melihat beberapa fakta tentang otak (yang bertanggung jawab dalam semua studi psikologi). Otak memiliki dua bagian yaitu otak kiri dan otak kanan. Secara umum disetujui bahwa sebagian memiliki kekuatan atau fungsi dan yang lain tidak punya, tidak sama dalam artian tertentu. Untuk contoh, untuk tipikal orang tangan kanan, terdapat 2 kekuatan yaitu :

10


Kiri KananKata – kata (bahasa) Imaji dan Pola-pola- Analisis - Ketertarikan terhadap keadaan- Lojikal - Hubungan spasial- Proses penghitungan - Proses paralel- Tanggapan sederhana - Pandangan kompleks- Sifat biasanya - 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 interaksi2. prosesor dan3. memori / ingatan

3.1 SUBSISTEM INTERAKSI

Tiga subsistem interaksi itu adalah :

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.

11


Hubungan diantara 3 sistem proses dan 3 macam memori dapat dilihat dalam diagram berikut.

3.2 MODEL PROSESOR DAN MEMORI MANUSIA

Ayo kita lihat lebih dekat pada “penyimpanan multi” model dari ingatan yang bekerjasama dengan model ini sejak memori memainkan peranan penting dalam aktivitas yang diambil.

Register sensori – buffer sementara mengirimkan informasi yang tidak terproses atau tidak ditandai. Informasi visual akan persis dengan register visual sekira 0,2 detik, suara-suara akan dikirim ke register suara sekira 2 detik.

Tempat bekerja (gudang kerja) – memiliki batas dari 2 macam yang dapat dikirimkan dan waktu untuk memnugkinkan pengiriman. Informasi ditandai dengan simbol, sekira 20 – 30 menit.Tampaknya ingatan yang kerja dapat mengirim 7 (+-2) “chunks” informasi : jika kita dapat mencoba ‘masuk lebih dalam’ semua jalan chunks dapat dituliskan.

[catatan: sebuah chunks adalah informasi tidak pasti bits atau bytes. “Ukuran” dari chunk (bagaimana representasi informasi ) tergantung dari banyak faktor seperti kebiasaan dengan informasi yang dikirim, bagaimana mengartikan informasi. Dalam bahasan umum Anda telah melihat banyak sebelumnya, banyak kebutuhan hanya dalam 1 memori chunks.]

Ingatan jangka panjang

Ingatan kerja

Register sensor visual

Mata prosesor prosesor persepsi kognitif tangan prosesor motor

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

12


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 Keterbatasan Memori1

Bagaimana informasi disimpan dan dipanggil? Ada dua tipe memori untuk merekam informasi :

1. Short-Term-Memory / STM (atau working memory)2. Long-Term-Memory / LTM.

Perbedaan antara memori jangka pendek dan panjang dapat diukur dari informasi yang disimpan dibawah 1 menit atau lebih. Lihat model sbb :

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.

1 http://website.lineone.net/~mw25/hci.htm

13


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 Kesimpulan dari keterbatasan memori

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

14


4 Panduan Merancang IMK

Selalu lebih mudah untuk menampilkan suatu tugas jika anda punya satu aturan

yang jelas. Sebagai contoh jika anda seorang pembuat roti, anda ingin hari ini sama dengan

hari kemarin maka anda harus mengikuti prosedur atau aturan yang sama setiap harinya.

Sayangnya rancangan HU tidak seperti itu. Di sini setiap tugas desain unik ( karena

tidak akan ada point dalam perancangan sistem komputer yang sama secara berulang),

maka bukan hal yang tidak mungkin untuk menyediakan satu set aturan yang yang dapat di

terapkan secara tidak fleksibel pada setiap tugas perancangan yang terbaik yang anda

miliki adalah satu set prinsip atau petunjuk yang harus diinterpretasikan oleh perancang ke

dalam konteks tugas yang sedang dikerjakan. Catat penekanannya pada konteks. Artinya

beberapa garis petunjuk mungkin mengaplikasikan hanya pada beberapa bentuk dari tugas

perancangan ( contoh, perancangan GUis) sedangkan yang lain mungkin hanya

mengaplikasikan pada bentuk berbeda dari tugas ( contoh perancangan sebuah hubungan

pengendalian perintah ). Maka kontek itu, atau lingkugan, sangan penting ketika mencari

garis petunjuk aplikasi dan interpretasi.

Juga catatan itu, karena garis penunjuk atau prinsip-prinsip, membutuhkan

interpretasi, mungkin untuk perancangan yang berbeda atau untuk mengimplementasikan

dalam cara yang berbeda. Kenyataannya hal ini mungkin untuk seorang perancang individu

untuk mengimplementasikan merka secara berbeda pada acara-acara yang berbeda,

mungkin karena disana ada yang lain, hal-hal diluar yang mempengahuri tugas-tugas itu.

( contoh seorang perancang aplikasi mencoba untuk memproduksi versi-versi untuk PC

dan Macintos. Akan ditetapkan oleh ciri-ciri tersebut dari sistem oprasi, maka selalu di

terapkan secara jelas, berbeda dalam dua versi (lihat hal preece, pp513/514).

Didalam kenyataanya, agak biasa untuk organisasi-organisasi untuk mendikte peraturan-

peraturan gaya, didefinisikan dalam petunjuk-petunjuk gaya, yang menuanjukkan

bagaimana prancang-perancang harus menginterpretasikan beberapa garis-garis petunjuk

umum ketika mereka sedang bekerja untuk organisasi tersebut. Peraturan-peraturan ini

hanya akan menerapkan pada pekerjaan untuk organisasi itu. Perancang yang sama

bekerja untuk organisasi berbeda akan harus mengikuti aturan-aturan yang berbeda tetapi

15


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. Cocok dengan tugas2. Mudah digunakan 3. Dapat disesuaikan dengan pemakaian tingkat pengguna4. Mampu menyediakan umpan balik5. Layar informasi dalam sebuah format, dan satu ruangan, cocok dengan sistem

operator6. Mengikuti prinsip-prinsip ergonomik

Secara lebih detail panduan merancang IMK sebagai berikut :

1. Konsistensi – internal, external, dan dunia nyata.2. Kesesuaian dengan harapan pengguna.3. Fleksibel dan terkontrol.4. Susunan yang benar.5. Umpan balik yang informatif dan berkesinambungan.6. Pencegahan dan perbaikan kesalahan.7. Dukungan dan dokumentasi pemakai.8. Kejelasan visual secara lojik dan relevan.

4.1.1 Konsistensi

16


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

fungsi 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 Kesesuaian dengan Harapan Pengguna.

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 “user”dalam 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)

dimana program lain membuatnya hanya dalam sub-command dengan beberapa daftar

lain.

17


4.1.3 Kontrol dan Fleksibilitas

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 Susunan Eksplisit dari Antarmuka.

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.

4.1.5 Umpan balik yang informatif dan berkesinambungan.

User perlu untuk bisa mengakses apa yang ada didalam sistem tiap saat dan membutuhkan

indikasi-indikasi yang mereka perlukan. Kebanyakan dari interface didisain untuk

memberikan oetunjuk dalam jumlah yang lebih besar termasuk visual dan auditory

sebagaimana sistem yang dikerjakan. Sebagai contoh, antarmuka Netscape membiarkan

pengguna untuk memberikan umpan balik.

Umpan balik seringkali dikategorikan dalam :

Lexical feedback

18


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 tool’s 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 Pencegahan dan Perbaikan Kesalahan

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 Pendukung dan dokumentasi Pengguna

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 trouble-

shooting.

4.1.8 Kejelasan visual secara lojik dan relevan./ Visual Clarity.

19


Elemen-elemen layar seperti icon-icon, checkboxes, tombol-tombol dll seharusnya diset

untuk menghemat waktu para user. Dalam masalah pengurutan masalah logikal, didaerah

barat kau seharusnya mulai dari kiri atas ayar. Untuk budaya lain, mungkin lebih masuk

akal mulai dari kanan atau kiri bawah. Elemen-elemen di layar harusnya diorganisir tidak

diacak.

Perancang seharusnya selalu menanyakan “ kenapa saya termasuk dalam elemen ini

: apakah user yang asli memang sangat membutuhkan atau hanya merupakan sebuah

pengalihan?”. Banyak Web-Site desainer yang masuk dalam perangkap ini, dengan

memasukkan features and gizmos diusia mereka hanya karena dapat diselesaikan atau

karena mereka pikir mereka pemikir ulung. Sebagai contoh apakah penggunaan counter

mengindikasikan berapa banyak orang yang mengunjungi web site mereka. Kebanyakan

kasus, informasi ini relevan untuk user dan hanya melayani secara lambat loading halaman

web. [Bagaimanapun juga ini dapat menjadi fungsi yang berguna untuk web-site mereka.

Dimana pengharang berusaha ntuk menjual ide-ide mereka bagaimana menjadi “popular:

di site mereka].

4.2 Pertimbangan Lain Kemampuan Navigasi : Tidak hanya kemampuan untuk memindahkan layar yang

ada atau model-model yang dipaketkan, tetapi juga sistem seperti WWW. Dengan

banyaknya berbagai kemungkinan untuk menghubungkan antara pages dan sites.

Ini adalah pengetahuan yang fenomnal yang dikenal sebagai “hilang di angkasa”.

Walaupun browser mungkin mengnavigasikan seperti halnya tombl Back.

Kesederhanaan : layar seharusnya sederhana dan teratur rapi. Tampilan

seharusnya diorganisasikan jadi elemennya dengan mudah dikenal oleh yang

lainnya dan mudah ditemukan.

Tekanan/Perhatian : Elemen yang paling penting dari interface seharusnya

diperhatikan dalam berbagai cara sehingga bisa dengan cepat ditemukan. Ini

mungkin bisa diselesaikan melalui posisi yang ada dilayar atau melalui warna atau

melalui tekanan seperti text yang tebal yng tersedia di perintah menu.

Font Types : Banyak “designer” membuat kesalahan dengan menggunakan font

type jenis plethora tanpa dokumen, termasuk beberapa yang kelihatn dekorative

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.

20


4.3 Contoh Antarmuka

Beberapa contoh antarmuka ini diambil dari beberapa Web Site, dan Rancangan sendiri :Contoh 1. Antarmuka Manajemen

Data Barang

Contoh 2. Search Panel dan Query Panel

Search Panel A - query panel tab

B - fields panel tab

c - field window

d - element window

e -element selection buttons

F - field selection window

g - search button

h - results window

i - print button

j - status bar

k - clear all (new search)

(Lihat alamat ini : http://ebony.open.ac.uk/britmath/guidelines01.htm)

Query Panel

21


1 - operand option

2 - field option

3 - element option

4 - operation option

5 - value option

6 - add button

7 - modify button

8 - delete button

9 - clear all button

10 - search button

11 - print button

12 - status bar

13 - clear all (new search)

14 - results window

15 - query window

Contoh 3. Integrasi Menu, dan Icon

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.

22


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

Contoh 5. Cash Register

berbasis PC

23

Pesan BerjalanMessage

ID Kartu & Passowrd

Pengumuman

Jam & Tempat tersedia

Latar Belakang


Contoh 6. Situs www.Yahoo.com

24


25


5 PANDUAN MEMBUAT MENU

Disain menu yang baik secara hati-hati dibangun supaya memberi umpan balik yang tepat untuk

pemakai. Macam-macam hal yang dihasilkan oleh pendisain antaralain :

Pilihan yang dapat diseleksi

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.

Menggunakan garis pemisah antara kumpulan dari perintah yang berhubungan.

Akhir dari Proses Seleksi

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.

5.1 Pengaturan Tugas yang berhubungan (Task-Related Organization)

Tujuan dari pembuatan menu, form-fillin, dan dialog-box adalah membuat sesuatu tugas menjadi wajar/masuk akal, mudah dipahami, mudah diingat oleh penggunanya.

Ada beberapa jenis menu yang dapat dikelompokkan sebagai berikut :

26


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 Linear Sequences and Multiple Menus

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 Beberapa bentuk menu yang lainnya

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.

5.2 Strategi untuk mengelompokkan menu

27


Ada sejumlah cara dimana item dalam menu dikelompokan bersama. Hal ini termasuk :

Pengkategorian – pilihan dari tipe yang serupa ditempatkan bersama

Urutan yang lazim – contohnya nama hari dalam seminggu

Jumlah pemakaian – pilihan yang sering digunakan terletak dekat dengan bagian atas dari

menu

Pastikan tidak ada item menu yang duplikasi atau overlapping

Gunakan istilah yang umum

Catatan : Pengurutan secara alpabet mungkin digunakan ketika tidak ada lagi metode yang

jelas dari organisasi

5.3 Urutuan Penampilan Item Menu

Urutan dari item menu sangat penting dan sebaiknya mengikuti urutan alamiah seperti urutan :

Waktu Urutan Angka Properti secara fisik

Bila ditemukan kasus pengurutan tugas tidak memiliki hubungan satu sama lainnya, perancang harus memilih dengan urutan sebagai berikut jika dimungkinkan :

Urutan Alphabet Pengelompokkan item yang serupa Letakkan item yang sering digunakan di urutan terdepan (paling atas/paling kiri) Letakkan item yang paling penting di urutan pertama

5.4 Waktu Respon dan Kecepatan Tampil

Kecepatan menu saat diklik oleh pengguna menentukan kecantikan dari mekanisme interface menu tersebut.

Waktu Respon (Response Time): Waktu yang dibutuhkan oleh sistem untuk mulai menampilkan informasi saat pengguna memilih menu tersebut.

Kecepatan Tampil (Display Rate): Kecepatan menu tersebut ditampilkan.

Pengguna lebih menyukai menu yang melebar dari pada mendalam.

5.5 Pemilihan Menu yang Cepat

Menus dengan typeahead (bergaris bawah) atau Shortcut penting bila : Menus sangat familiar

28


Response time/display rates sangat lambat slow

Menu names or bookmarks for direct access. Menu yang sederhana yang mengijinkan pengguna untuk mengakses langsung suatu halaman.

Menu dengan Icon/Toolbutton. Beberapa menu yang sering digunakan akan lebih cepat diakses jika disediakan Icon/toolbuttonnya.

Menu cepat (pop-up). Menu yang diaktifkan pada objek yang dikehendaki dengan mengklik tombol mouse kanan, akan mempercepat pemilihan menu tersebut.

5.6 Tata Letak Menu

5.6.1 Judul

Untuk single menu, gunakan judul yang sederhana. Untuk tree-structured menus, gunakan kata-kata pada item menu pada tingkat yang lebih tinggi sebaiknya dimunculkan pada judul menu yang dibawahnya. Contoh item menu Layanan Bisnis dan Keuangan, akan muncul sebagai judul pada menu dibawahnya, jika kita memilih menu dibawahnya.

5.6.2 Frasa dari item menu

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 Tata letak dan desain monitor (Graphic)

Batasan : lebar dan panjang layar display rate character set highlighting techniques

Panduan untuk konsistensi menu paling tidak hal berikut yang harus diperhatikan

Titles Item placement Instructions Error messages Status reports

Tehnik Indentation Upper/lower case characters Symbols such as * or - to create separators or outlines Position markers

29


Cascading or walking menus Magic lens

5.7 Form Fillin

Hal yang patut diperhatikan saat banyak field data harus dimasukkan : Full complement of information is visible to user. Display resembles familiar paper forms. Few instructions are required for many types of entries.

Pengguna harus terbiasa dengan penggunaan : Keyboards Use of TAB key or mouse to move the cursor Error correction methods Field-label meanings Permissible field contents Use of the ENTER and/or RETURN key.

5.7.1 Form-Fillin Design Guidelines

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

30


5.7.2 List dan combo boxes

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

Kombinasi dari tehnik menu dan form-fillin.

Related to a specific task.

Internal layout guidelines:

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

5.8 Saran umum

Tombol yang mempercpat seharusnya tidak digunakan untuk operasi sistem yang genting seperti

berhenti atau logoff karena sebuah kesalahan dalam keystroke dapat mengalami effek yang

membawa bencana dalam pekerjaan yang sedang dikerjakan.

Dalam beberapa aplikasi, perintah yang pasti tidak dapat dikembalikan seharusnya tidak

ditempatkan di bagian atas dari menu atau yang dekat dengannya, dan khususnya tidak

dibawah pilihan yang sering digunakan.

31


6 ICON / TOOLBUTTON

Bahasan :

1. Definisi dari icon.2. Kelebihan dan kekurangan dari icons.3. Faktor-faktor yang mempengaruhi arti dari icons.4. Bentuk dan fungsi.5. Bentuk perintah-perintah.6. Klasifikasi dari icons.

6.1 Definisi Icon

Hampir semua komputer antarmuka saat ini memiliki icons dalam arti simbol kecil

bergambar dimana jika didisain secara tepat akan mempermudah penyampaian fungsinya

kepada pemakai. Ide dari penggunaan icons ialah memberi arti baru, simbol bergambar ini

berguna untuk merepresentasikan sesuatu, proses dan juga ide-ide yang abstrak. Banyak

simbol huruf abstrak yang berasal dari bentuk-bentuk icons terdahulu.

Icons Komputer Antarmuka (dari MS Word)

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.

32


Mungkin fungsi icon untuk “undo” dan “redo” tidaklah begitu sukses digunakan untuk

menyampaikan arti dari konsep abstrak ini. Begitu juga icon dengan kaca pembesar (me-

review dokumen) dapat membingungkan, karena fungsi yang lainnya menggunakan icon

yang mirip untuk fungsi yang berbeda seperti “search” atau “magnify”.

6.2 Keuntungan Penggunaan Icon1. Mudah diingat / dikenali. Pada bab sebelumnya, disebutkan bahwa orang akan

lebih mudah mengenali sesuatu daripada mereka harus mengingat kembali

informasi yang sudah cukup lama. Oleh karena itu kegiatan mengenali sebuah icon

di layar akan lebih mudah daripada mencoba untuk mengingat kembali perintah-

perintah. Begitu juga halnya ketika mencari sesuatu di layar, orang akan

menemukan icon yang tepat lebih cepat daripada mencari fungsi yang mereka

inginkan yang berbentuk daftar perintah. Ini biasanya dikarenakan setiap icon

cenderung berbeda dengan icon lainnya, jadi akan mudah untuk membedakan antar

icon.

2. Kepadatan. Icons normalnya memakan ruang yang lebih sedikit dan sebaliknya

apabila fungsi-fungsi tersebut digambarkan ke dalam bentuk teks. Artinya akan

lebih banyak fitur-fitur yang dapat ditampilkan di area layar yang tersedia.

3. Mudah dipahami. Menyediakan gambar dari suatu icon yang sudah dipilih secara

seksama, sebuah icon dapat dengan mudah dimengerti oleh rata-rata pemakai. Ini

dapat digambarkan apakah icon merepresentasikan sebuah objek, data atau proses.

4. Universal. Banyak (tapi tidak semua) icons mempunyai bahasa yang relatif

dan/atau berdiri sendiri, jadi mereka dapat digunakan pada versi internasional pada

perangkat lunak, tanpa harus mengeluarkan biaya penerjemahan dan penulisan

kembali. Trend ini sangat dikenal saat ini, walaupun dalam aplikasi non-komputer

seperti rambu-rambu lalu lintas, rambu-rambu penerbangan, dll. Bagaimanapun,

kita tidak dapat menggunakan universalitas secara pasti dan ini sesuatu yang

penting untuk diingat dalam media internasional seperti World Wide Web. Lihat di

website untuk icons seperti halnya mail boxes yang mempunyai bentuk dan warna

yang berbeda di setiap negara.

5. Mudah didapat / Availability. Untungnya tak terlalu sulit untuk mendapatkan icon

yang sudah jadi, untuk berbagai fungsi, dari berbagai media seperti World Wide

Web dan koleksi klip-art. Banyak pengarang tidak terlalu peduli jika icons yang

33


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.

6.3 Kekurangan Penggunaan Icon

1. Kadang membingungkan / Ambiguity. Jika disain icon belum benar-benar

sempurna, ada kemungkinan pemakai umum tidak dapat menebak untuk

merepresentasikan apa. Walaupun jika anda mencoba menebak, ada kemungkinan

anda salah. Coba lihat kembali pada MS Word icon.

Jika anda belum begitu mengenal dengan antarmuka ini, dapatkah anda mengatakannya

dengan jujur bahwa anda dapat menebak dengan benar mewakili apa setiap icon yang

ada? Lihat juga pada icon kecil yang dapat memanipulasi windows dalam sistem

operasi anda, jika anda melihatnya pada pertama kali, apakah anda mengetahui

kegunaan icon “close window”?

Tergantung pada pemakai, tugas dan konteks. Setiap individu dapat mengutus keinginan mereka ke dalam sebuah icon, dan ini tergantung kepada individu apakah mereka sudah ketahui dan asosiasi yang mereka buat antara icon dengan ilmu pengetahuan yang ada. Kadang-kadang ini merupakan suatu hal yang tidak mungkin untuk menebak arti dari icon, dan untuk menggunakannya seseorang haruslah diberitahu artinya terlebih dahulu dalam sebuah tugas dan konteks dimana ini digunakan. Dalam MS Word, sebagai contoh, setidaknya tidak terlalu intuitif.

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.

34


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.

6.4 Pertimbangan Perancangan/Pemilihan Icon

Bagaimana kita mengatakan sebuah icon ‘bagus’ dan yang lainnya ‘jelek’? Apa yang

menjadi faktor yang menentukan apakah icon menjadi mudah atau sulit untuk dirancang?

Apakah icon ini berhasil/tidak?

Konteks. Perlu dipertimbangkan konteksnya apa? Misal icon untuk memilih

warna teks, bagaimana agar icon yang dibuat tidak duplikasi.

35


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 .

Contoh 1 : Kumpulan Icon File Cabinets

Contoh 2 : Kumpulan Icon Notebook

36


7 Pengaturan Tampilan dan Warna

Pada bagian ini kita akan melihat sejumlah masalah-masalah design yang berhubungan

dengan bagaimana informasi dapat ditampilkan dengan cara yang terbaik pada layar,

termasuk:

A. Kerapatan visual dan keseimbangan (dari daerah-daerah teks)

B. Kejelasan teks

C. Pengkodean visual

D. Visualisasi

E. Penggunaan warna

7.1 Kerapatan visual dan keseimbangan

Ini berhubungan dengan bagaimana “terkemas dengan eratnya” teks itu pada layar dan

oleh karena itu berhubungan dengan jumlah “white space/ruang kosong” yang ada

sehubungan dengan teks itu. Kepadatan/kerapatan tinggi berarti ada banyak teks dan

sedikit ruang kosong dan pengaturan seperti ini membuat teks itu lebih sulit untuk

dibaca.

Dengan teks pada sebuah kertas anda akan sering mendapatan kerapatan 70% hingga

80%. Ini berarti 70% dari halaman kertas itu ditutupi oleh teks. Ini biasanya dapat

terbaca, tetapi kerapatan yang sama pada sebuah layar komputer jauh lebih sulit.

Dalam hal ini kerapatan 15% hingga 20% dianjurkan.

Namun kerapatan itu sendiri bukanlah ukuran yang cukup untuk menentukan suatu teks

dapat terbaca atau tidak: cara teks itu tersusun pada layar juga sangat penting. Ini

biasanya berlaku ketika si pengguna komputer/user dituntut untuk mencari informasi

pada layar (berlawanan dengan sekedar membaca semua teks secara berurutan).

Sebagai contoh, sebuah directory telepon sengaja disusun dalam bentuk tabular untuk

mempermudah pencarian informasi.

37


7.2 Kejelasan teks

Ada sejumlah hal yang dapat menentukan kejelasan teks. Sebagai contoh; Gunakan

peraturan-peraturan standar huruf kecil dan huruf besar daripada hanya menggunakan

huruf besar semua ketika anda memiliki teks yang panjang karena hal ini akan

memudahkan pembacaan. Tata bahasa dan tanda baca yang salah dapada

memperlambat kecepatan membaca. Perhatikan beberapa hal menghambat pembacaan

seperti berikut :

MEMBACA SESUATU YANG DITULIS DALAM HURUF BESAR SEMUA

AKAN MEMAKAN WAKTU LEBIH LAMA KARENA HURUF-HURUF ITU

KEHILANGAN BENTUK-BENTUK KARAKTERISTIK MEREKA DAN SEMUA

KATA MENJADI TIDAK BERATURAN.

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

38


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 partikel-

partikel gambar tertentu ( daripada ke sekian % dari lebar layar). Dengan cara

demikian, kolom teks akan selalu tetap lebarnya seperti yang telah ditentukan

berapapun ukuran jendela browser. 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.

7.3 Pengkodean Visual

Ini mengacu kepada sejumlah teknik yang mungkin dapat digunakan untuk menarik

perhatian, atau untuk memusatkan perhatian pada elemen-elemen tertentu di layar.

Elemen-elemen ini termasuk:

Elemen-element intensitas yang membedakan, (terang) yang berasal dari warna dasar yang sama. Sulit bagi orang untuk membedakan antara lebih dari dua level/tingkat terang. Akan lebih mudah jika kedua elemen itu saling berdekatan pada layar, tetapi lebih sulir jika mereka berjauhan. Jadi,jika anda akan mengunakan intensitas ysng berbeda untuk membedakan antar elemen, pastikan perbedaan itu cukup penting/ jelas terlihat. (Lakukan eksperimen dengan ‘roda warna/colour wheel” untuk melihat efek perubahan warna dasar, saturasi/penyerapan dan intensitas sebuah objek, misal: sebuah karakter teks)

Pemilihan bentuk-bentuk yang unik, sebagai contoh teks yang di taruh di dalam bentuk ‘awan’, atau dalam sebuah kotak, akan tampak mencolok dari sekelilingnya.

Warna dan shading/bayangan dapat digunakan untuk memberi efek yang bagus (nanti akan dijelaskan lebih lanjut)

Beberapa hal yang perlu diperhatikan penggunaannya : Garisbawah tidak dianjurkan pada teks yang dicetak karena hal ini menggangu ujung-

ujung bawah huruf (lihat huruf g, y, p dalam kalimat ini). Ini, seperti halnya HURUF BESAR, merusak bentuk karakteristik kata dan dapat memperlambat kecepatan

39


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

40


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

41


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 tampilan-

tampilan 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 Tuntunan untuk menggunakan warna

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 bidang-

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

7.5 Tuntunan umum

Jangan menggunakan lebih dari 4 atau 5 warna sekaligus (jika tidak layar menjadi

kacau atau tidak tersusun dengan baik)

42


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 interfaces-

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

43


8 Penggunaan Sistem Warna RGB

Bahasan :

· 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

8.1 Cahaya melalui Kombinasi Warna dasar/primer

Cahaya terdiri dari tiga kombinasi warna dasar/primer: merah, biru dan hijau. Dengan kombinasi warna dasar/primer ini dalam intensitas yang berbeda kita mendapatkan semua warna kelihatan.

Jika kita menghadirkan intensitas dari tiap warna primer dengan suatu angka, maka kita dapat melihat ke tiga warna tersebut berupa tiga angka ( satu angka untuk merah, satu untuk hijau dan satu untuk biru). Melalui sistem ini setiap warna dapat dihadirkan yaitu dengan mengatur intensitas dari masing-masing warna primer. Sistem ini yang dikenal dengan RGB Color System (Red, Green, Blue).

8.2 Sistem Warna RGB

Sebagai asumsi kita menggunakan bilangan bulat dengan cakupan 0..255 (1 byte), yaitu 256 nilai yang mungkin untuk masing-masing warna primer, maka dengan tiga bytes kita dapat menghadirkan 256 x 256 x 256 kombinasi warna berbeda. Ada lebih dari 16 juta warna yang dapat dihadirkan, dikenal dengan "true color". Sistem Warna RGB ini dikenal sebagai RGB-256. Beberapa program ada yang menggunakan sistem RGB-100, yaitu menggunakan angka-angka dengan cakupan 0..100 untuk menandakan persentase dari intensitas ( 0%=off; 100%=max). Pada bagian ini kita akan menggunakan RGB-256 karena lebih populer.

44


8.3 Warna Abu-abu (gray)

Warna hitam dilambangkan sebagai ketidakhadiran warna (cahaya) diwakili dengan nilai RGB(0,0,0) (Red=0, Green=0, Blue=0). Sedangkan Putih sebagai kehadiran dari semua warna (dalam intensitas maksimum) diwakili dengan RGB(255,255,255) (Red=255, Green=255, Blue=255). Warna abu-abu (perpindahan dari hitam ke putih) diwakili dengan tiga nilai yang sama untuk komponen yang merah, biru dan hijau memiliki format RGB(X,X,X). Contoh : RGB(0,0,0)= hitam RGB(128,128,128) = Abu-abu Gelap (Dark gray) RGB(192,192,192) = Abu-Abu Terang (Light gray) RGB(255,255,255)= putih

8.4 Warna dasar / warna primer

Kombinasi nilai RGB untuk warna dasar adalah sebagai berikut: RGB(255,0,0)= Merah menyala (atau merah

terang) RGB(0,255,0)= Hijau menyala (atau hijau

terang) RGB(0,0,255)= Biru menyala (atau biru terang)

Ini adalah warna dasar yang Gelap : RGB(128,0,0)= Merah gelap RGB(0,128,0)= Hijau gelap RGB(0,0,128)= biru tua

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

8.5 Warna sekunder

Warna Sekunder seperti cyan (warna biru kehijau-hijauan), magenta (warna merah keungu-unguan) dan kuning, diakibatkan oleh kombinasi dari dua warna primer dalam intensitas sama. Sebagai contoh : RGB(0,255,255) = Cyan Terang = light green + light blue RGB(255,0,255) = Magenta Terang = light red + light blue RGB(255,255,0) = Kuning/Yellow Terang = light red + light green

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

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

45


8.6 Warna-warna lainnya

Bagaimana mungkin kita membuat warna lain? Mari mencoba warna oranye/orange. Seperti anda ketahui oranye/orange adalah suatu warna antara yang merah terang dan kuning terang yaitu RGB(255,0,0)=merah terang dan RGB(255,255,0)=kuning terang, maka oranye adalah RGB(255,128,0). Bagaimana caranya mendapatkan nilai ini? Dengan hanya mengambil rata-rata dari komponen warna merah terang dan kuning terang, seperti berikut :

Merah=( 255+ 255) / 2 = 255Hijau=( 0+ 255) / 2 = 128Biru=( 0+ 0) / 2 = 0

RGB(255,0,0)= Merah terang RGB(255,128,0)= Oranye terang RGB(255,255,0)= Kuning terang

Intensitas oranye yang berbeda mempunyai format RGB(X,X/2,0).

8.7 Warna murni

Warna murni berkombinasi hanya dua warna dasar dan mempunyai format RGB(X,Y,0), RGB(Y,X,0), RGB(0,X,Y), RGB(0,Y,X), RGB(X,Y,0) atau RGB(Y,X,0) di mana x<> 0 dan x>=y: Ketika y= 0, kita mempunyai suatu warna dasar. Ketika x= y, kita mempunyai suatu warna sekunder. Ketika y= x/2 kita mempunyai suatu warna yang persisnya antara suatu

warna dasar dan suatu warna sekunder. Sebagai contoh RGB(255,128,0) adalah warna oranye persisnya antara merah dan kuning.

Ketika y < x/2 kita mempunyai suatu warna semakin dekat dengan warna dasar dibanding warna sekunder. Sebagai contoh RGB(255,116,0) adalah oranye yang semakin dekat ke merah dibanding ke kuning.

Ketika y > x/2 kita mempunyai suatu warna semakin dekat dengan warna sekunder dibanding warna dasar. Sebagai contoh, RGB(255,140,0) adalah orange yang semakin dekat ke kuning dibanding ke merah.

8.8 Hue (Roda warna) dan luminosity (kilauan)

Warna dengan format yang sama akan mempunyai hubungan sama dengan x/y, ini dikatakan 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.

46


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

8.9 Saturation / Kejenuhan

Terlepas dari kilauan dan hue, warna digambarkan oleh parameter ketiga yang dikenal sebagai kejenuhan (saturation), yang mana mengukur kemurnian dari warna. Sejauh ini kita telah berhadapan dengan 100% warna murni. Warna tidak murni adalah warna murni yang bercampur dengan kelabu. Semakin sedikit bercampur dengan kelabu, semakin jenuh. Sebagai contoh, RGB(192,128,64) mempunyai kilauan dan hue oranye terang RGB(255,128,0), tetapi 50% kejenuhan. Hal ini diakibatkan percampuran oranye terang dengan abu-abu sedangRGB(128,128,128): Oranye merah kelabu =( 255+ 128) / 2= 192 Hijau=( 128+ 128) / 2= 128 Biru=( 0+ 128) / 2= 64

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%

47


8.10 Penyajian warna dengan bilangan bulat (Desimal & Heksa)

Ke tiga bytes itu menghadirkan suatu warna yang dapat dikombinasikan dalam 32-bit bilangan bulat, secara normal diwakili oleh notasi hekadesimal. Sebagai contoh, RGB(160,128,96) adalah 6080A0: Red (RR) = 160 dec = A0 hex Green (GG) = 128 dec = 80 hex Blue (BB) = 96 dec = 60 hex

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.

8.11 Menampilkan warna dalam aplikasi Windows

Kita akan membuat sebuah program dalam Delphi untuk menampilkan warna tulisan dan warna latar belakangnya seperti tampak berikut :

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 dalam heksa dan 2 edit untuk konstanta kombinasi ketiga warna dasar (desimal dan heksa).

48


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

49


8.12 Warna Warna Pastel

Hijau diatas hijau pastel Hijau Pastel diatas Hijau

Merah diatas Merah Muda (pastel) Merah Muda diatas Merah

Biru Muda diatas Biru

Biru Muda diatas Biru

50


Biru diatas Biru Muda (pastel)

Daftar Pustaka1. 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.asp3. D’Spirito, Ernesto, “Understanding color and the RGB system,

http://www.latiumsoftware.com/en/articles/00015.php#1

51

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch14b.asp


9 Spesifikasi Kegunaan (Usability)

9.1 Spesifikasi Kegunaan

Dalam siklus hidup pengembangan sistem tradisional, tahap awal yang sangat

penting adalah produksi dari spesifikasi fungsi, yang menyatakan secara tepat apa

yang harus dapat dikerjakan oleh sistem yang telah selesai; apa fungsi yang harus

dapat dilaksanakan. Sebagai contohnya, kekuatan individual untuk menetapkan

bahwa sistem khusus harus dapat:

“menghitung pembayaran bruto dan netto, pajak, dan potongan lainnya untuk seluruh

pegawai yang diberi upah per jam, jam kerja, hukum tentang perpajakan, dan lainnya.”

Spesifikasi penggunaan ini memberikan kepada programer suatu ide yang bagus

tentang apa yang menjadi masukan, proses, dan keluaran dari sistem yang harus dapat

ditangani. Bagaimanapun juga apabila perhitungan pembayaran gaji tidak dapat selesai

pada pukul 4 sore setiap hari Kamis, maka akan terjadi keributan. Adalah sangat mendasar

bahwa operator dalam kantor penggajian harus dapat menyusun dan menggunakan paket

tersebut secara cepat dan mudah; paket tersebut harus memenuhi standar spesifik dari

penggunaan.

Tujuan utama dari apa yang kita sebut “pendekatan HCI” untuk desain sistem

adalah dalam menghadapi masalah untuk membuat sistem menjadi mudah untuk

digunakan dan dapat diterima oleh orang-orang yang sebenarnya harus menggunakan

sistem tersebut. Dengan demikian dalam pendekatan HCI betul-betul penting

dipertimbangkan untuk menerangkan spesifikasi penggunaan serupa dengan spesifikasi

fungsi.

Kita lalu dapat mengatakan bahwa:

- Spesifikasi fungsi adalah pusat untuk memastikan fungsi sistem.

- Spesifikasi penggunaan adalah pusat untuk memastikan penggunaan sistem.

Kita menggambarkan konsep penggunaan dalam perkuliahan pertama ke beberapa

tingkat. Keterangan umum lebih lanjut yang lainnya mungkin:

52


“ Efektivitas, efisiensi, dan kepuasan dengan apa pengguna yang telah ditetapkan dapat

mencapai tujuan yang telah ditetapkan dalam sebuah lingkungan yang khusus.”

9.2 Pengukuran Spesifikasi Kegunaan

Sayangnya, tidak ada jalan yang mudah untuk mengukur sifat seperti efektivitas,

efisiensi, atau kepuasan. Penilaian sifat tersebut akan selalu cenderung menjadi lebih

banyak penilaian subjektif daripada objektif. Masing-masing sistem dalam pengembangan

juga akan cenderung untuk membutuhkan gambarannya sendiri dari pengguna yang telah

dimaksudkan sebelumnya; akan mempunyai tujuan spesifik sendiri; dan dalam banyak

respek akan diperlukan untuk menjalankan dalam sebuah lingkungan kerja yang mungkin

cukup berbeda, dari semua lingkungan kerja lainnya.

Dengan demikian, pengukuran penggunaan cenderung untuk menjadi proses yang

cukup sulit; beberapa telah digambarkan sebagai suatu campuran seni dan ilmu

pengetahuan dari penilaian subjektif dan objektif.

Untuk alasan ini, Penggunaan dari sebuah sistem akan secara normal dilaksanakan

oleh sekelompok orang yang selanjutkan akan menyatukan penilaian individual mereka

dan mencapai beberapa persetujuan tentang masing-masing faktor yang sedang dievaluasi.

Sebagai contohnya: perancangan oleh komisi, tidak secara normal dipertimbangkan

sebagai suatu ide yang sangat bagus, tetapi ini adalah langkah yang terbaik yang dapat kita

lakukan dalam kasus ini.

Dalam tahap awal perancangan, ketika kelompok tersebut mencoba untuk bangkit

dengan spesifikasi penggunaan pertama sebagai suatu pedoman untuk pengembang sistem,

kita sesungguhnya berhubungan dengan persyaratan ketat “perkiraan yang diketahui

dengan sangat baik“ tentang apa yang diperlukan. Yang diketahui dengan sangat baik

disini berarti mempunyai beberapa pengetahuan dan pengalaman dari perancangan HCI

dari proyek sebelumnya dan dari pelajaran informasi MSc.

Dalam berbagai tingkat lain di proses tersebut, ketika pengguna yang mewakili

pengguna lainnya ditest, baik contoh maupun sistem akhir, beberapa dari perkiraan awal

dapat dibuktikan salah, dan penambahan akan diperlukan pada sistem untuk meningkatkan

penggunaannya.

Pada waktu sekarang, pengevaluasian penggunaan dari suatu produk adalah bagian

yang perlu dalam proses pengembangan perangkat lunak. Pengevaluasian penggunaan ini

mengizinkan pengembang untuk membuat perbandingan antara produk mereka dengan

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 Faktor penggunaan umum.

Dalam perkuliahan pertama empat judul umum untuk penggunaan disebutkan sebagai

kemampuan untuk belajar, kelenturan, dan pendiriannya. Sekarang kita akan melangkah

lebih lanjut dalam menjelaskan persyaratan ini dengan lebih detail dan mengatakan

bagaimana mereka mungkin dinilai.

Faktor utama untuk dipertimbangkan adalah:

1. Kecepatan operasi.

2. Tingkat penyelesaian.

3. Tingkat bebas kesalahan.

4. Tingkat kepuasan.

5. Kemampuan belajar.

6. Kemampuan untuk memelihara.

7. Pemakaian kegunaan yang lebih modern.

Tidak semua dari faktor ini diukur oleh semua pengembang untuk setiap

antarmuka. Empat faktor pertama adalah mungkin yang paling penting dan adalah salah

satu yang dipakai oleh IBM untuk mengukur sistem mereka.

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 masing-

masing orang ambil untuk menyelesaikan setiap tugas.

9.3.3 Tingkat bebas kesalahan.

Dalam melaksanakan sejumlah tugas, pengguna dapat membuat kesalahan

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 Kemampuan untuk belajar.

Semakin rumit paketnya, semakin lama waktu yang diperlukan untuk

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 Kemampuan untuk memelihara.

Yaitu dapatkah pengguna mengingat atau mengenal bagaimana cara untuk

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 Pemakaian kegunaan yang lebih modern.

Pedagang-pedagang biasanya menjual paket mereka yang telah diperbaharui

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?

9.4 Kapan anda melakukan penelitian kegunaan ini?

Seperti telah dinyatakan sebelumnya, perancang HCI pada awalnya akan membuat

sebuah perkiraan yang diketahui tentang banyak dari faktor-faktor dan ini akan memulai

dalam spesifikasi penggunaan untuk pengembang antarmuka untuk memulai memproduksi

contoh pertama dari sistem.

Segera setelah contoh diproduksi, lalu perancang HCI dapat memulai untuk

mengadakan percobaan dengan pengguna sesungguhnya. Ini mungkin dapat dilakukan

sepanjang dimensi waktu berikut:

Prestasi awal. Sebagai contohnya, apakah mereka dapat menggunakan paket secara

sungguh-sungguh sukses selama dua puluh menit pertama dan apakah itu kelihatannya

seperti jika mereka dapat dan ingin untuk berkembang secukupnya dengannya dari sana.

Prestasi jangka panjang. Akan sangat baik untuk dapat melakukan prestasi jangka panjang

ini, karena mungkin tidak sesungguhnya untuk mencoba melakukannya. Ini mungkin

57


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


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.

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

9.5 Menentukan tingkat untuk penggunaan.

Daftar dari tugas benchmark yang digunakan dalam test penggunaan akan secara

ideal dipilih oleh kelompok dari orang-orang yang terlibat pada tingkatan berbeda dalam

organisasi yang akan menggunakan sistem akhir. Mereka mungkin termasuk pengembang

sistem antarmuka pemakai, perancang interaksi pemakai dengan marketing manager,

manager proyek, pengawas, dll. Mereka harus memilih benchmark yang berfokus pada

bahasan utama atau bahasan kritis yang berhubungan dengan penggunaan sistem dan

mencoba untuk menghindari bahasan pertanyaan.

Setelah menentukan test dari benchmark, tim harus dapat menentukan sekarang

pada bagaimana kemampuan dari tiap tugas akan dapat diukur, dan pada tingkat berapa

kemampuan dapat diharapkan pada setiap tugas.

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.

9.6 Keuntungan dari spesifikasi pengguna.

Ini dapat digunakan sebagai bagian dari mekanisme manajemen dan pengendalian untuk

proses perbaikan iteratif dari pengembangan sistem. Seperti menyediakan tujuan untuk

dicapai, mungkin lebih penting hal tersebut menerangkan dimana proses perbaikan dapat

diakhiri, dan membiarkan orang-orang menerimanya dengan memberikan uangnya untuk

sebuah sistem.

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.

9.7 Kerugian Spesifikasi Kegunaan

Spesifikasi penggunaan disiapkan untuk mengukur tugas yang telah ditentukan yang dijalankan dalam situasi tertentu oleh pengguna tertentu. Sejak tidak ada teknik yang nyata dalam menentukan spesifikasi ini, lebih banyak yang bergantung pada penilaian dan pengetahuan dari tim perancang, contohnya memilih pengujian benchmark tugas yang tepat, mempersiapkan tingkat kehandalan secara nyata dan mengidentifikasi pengguna tertentu.

Point terakhir ini, pengguna tertentu, dapat menjadi masalah secara partikular sejak sistem mungkin digunakan oleh tipe berbeda dari pemakai dan spesifikasi pengguna yang berbeda mungkin dapat didefinisikan untuk setiap jenis. Contoh secara aktual dari kepentingan, terjadi ketika IBM mengembangkan operasi sistem IBM 34. Sistem ini harus digunakan oleh personal administrasi, sekretaris dan individu pribadi, semua dari mereka memerlukan kegunaan dari sistem untuk tugas yang berbeda. IBM pada awalnya tidak menguji sistemnya dengan semua tingkat pengguna ini dan itu ditemukan kemudian terlalu rumit untuk beberapa dari mereka. Umpan balik ini digunakan untuk memodifikasi sistem sehingga sistem tersebut memiliki antarmuka berjenis menu yang lebih mudah digunakan

62


10BUKU PANDUAN, ONLINE HELP, DAN TUTORIALS

10.1 Pendahuluan10.1.1 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

User manual Help facility Tutorials Demonstrations

10.1.3 One way to classify paper and online materials (Duffy):

User's Goal Medium of Delivery

Paper Online

I want to buy it. sales brochure, fact sheet demonstration program

I want to learn it. tutorial manual guided tour

I want to use it. user's manual online help, online document

10.2 Reading from Paper versus from Displays

Potential Disadvantages to Reading from Displays Poor fonts, especially on low resolution displays Low contrast between characters and the background Fuzzy character boundaries Emitted light from displays may be more difficult to read by than reflected light

from paper Glare may be greater on displays

63


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 Preparation of Printed Manuals

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 Use of OAI Model to design manuals

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 link these concepts to high-level interface objects and actions o 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 Organization and writing style

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 o Avoid ask, tell, speak to, communicate with

65


o 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

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 Preparation of Online Facilities

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 short-

term 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

Most effective if manuals redesigned to fit electronic medium to take advantage of

67


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.2 Online tutorials, demonstrations, and animations

Online tutorials can be effective because the user (Al-Awar et al) Does not have to keep shifting attention between the terminal and the instructional

material Practices the skills needed to use the system Can work alone at an individual pace and without the embarrassment of mistakes

made before a human instructor or fellow students

Demonstration systems: Distributed on disk, CD-ROM, or over Internet Designed to attract potential users Typically show off system features using animation, color graphics, sound, etc. User-interface requirements are to

o capture and maintain user interest o convey information o build positive product image

Typical controls o automatic or manual pacing o length of demonstration (short versus in-depth) o stop o replay o skip

10.4.3 Helpful Guides

May be well-known personalities or cartoon figures to lead user through information

Help networks using email o sent to designated help desk or staff person

68


o sent to general list within organization o users must publicly expose their lack of knowledge o risk of getting incorrect advice

Frequently asked questions (FAQ) lists for newcomers

69


11STRATEGI MULTIPLE-WINDOW

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


11.4 Coordination by Tightly Coupled Windows

Synchronized scrolling Hierarchical browsing Direct selection Two-dimensional browsing Dependent-windows opening Dependent-windows closing Save or open window state

11.5 Image Browsing and Tightly-coupled Windows

The design for image browsers should be governed by the user's tasks which can be classified into:

Image generation Open-ended exploration Diagnostic Navigation Monitoring

11.6 Personal Role Management and Elastic Windows

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


12LAMPIRAN

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


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

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

7. Anthropomorphization o don't anthropomorphize (i.e. don't attribute human characteristics to objects)

- avoid the "Have a nice day" messages from your computer 8. 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 9. 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


o use colors consistently o use only 2 levels of intensity on a single screen o Use underlining, bold, inverse video or other markers sparingly o 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)

74


User Interface Componentshttp://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.

Calendar, Date and Time Components - (27 products) Enable users to enter dates and times easily with drop down calendars, clocks, day, month, week, year views and date selectors. These controls are ideal for all calendaring and scheduling applications. This page contails all calendar components for .net, ActiveX, java and Delphi.

Color Controls & Components - (15 products) Color picker controls enable you to easily add a color selection dialog to your application. Interface styles include Color wheel, hexagon, listbox and slider controls to help your users choose colors easily and accurately. Many of these components also offer conversions between formats such as RGB, HSL and CMYK. Color selection components are available for all platforms - ASP.Net, .Net, ActiveX, Java and Delphi.

Data Input Controls & Components - (33 products) Data input controls help you to control the data input process and validate the resultant data. Use these controls to build robust data entry applications and database front ends. Styles range from edit masks to rule based validation. The data input control page lists all data input controls and components for .Net, ASP.NET, ActiveX, Java, Delphi.

Dockable Window & Panel Controls - (15 products) These controls enable you to add dockable windows such as those found in Visual Studio to your applications. Docking panels, panes or windows can have properties such as tear-off tabs, MDI tabbs, autohide and pinning. The docking panel control page includes all dockable panel components for .Net, ActiveX, VB, Delphie, Java.

ExplorerBar Controls & Components - (9 products) Explorer bar controls enable your application to deliver Windows XP-style task panes in order to provide end users with logically grouped options. The ExplorerBar page lists all ExplorerBar Controls and Components for .Net, Java, ActiveX and Delhpi.

Grid Controls & Grid Components - (44 products) Grid controls facilitate two dimensional data layout similar to a speadsheets or a database tables with rows and columns. Features include heirarchical data organisation, row and column grouping, data binding, data caching, sorting, subtotaling, parent/child one-to-many relationships. Also specific look and feel emulation such as Outlook, Access and Excel. The grid control & grid component page lists all controls, components, libraries & classes for .Net, ASP.NET, ActiveX, Java, Delphi.

HTML and Text Editing Components - (27 products) Enable users of your applications to perform word processing, edit text and HTML within your application. Also use these components to develop content management applications for your web site. The HTML editing and word processing page lists all HTML and Rich Text editing controls and components for all platforms - .Net, ASP.NET, ActiveX, Java, Delphi.

Instrumentation Controls & Components - (37 products)

75

http://www.devdirect.com/ALL/UInstruments_PCAT_1929.aspx

http://www.devdirect.com/ALL/TEXTEDIT_PCAT_1858.aspx

http://www.devdirect.com/ALL/GRID_PCAT_1855.aspx

http://www.devdirect.com/ALL/ExplorerBar_PCAT_2026.aspx

http://www.devdirect.com/ALL/DockableWindows_PCAT_2061.aspx

http://www.devdirect.com/ALL/UIDATA_PCAT_1919.aspx

http://www.devdirect.com/ALL/UserInterfaceColor_PCAT_1991.aspx

http://www.devdirect.com/ALL/CalendarDateTimeComponents_PCAT_2038.aspx

http://www.devdirect.com/ALL/UIBUTTONS_PCAT_1918.aspx


Create a user interface which emulates real hardware with controls like switches, dials and knobs. The Instrumentation control page contains all Instrumentation libraries, components and controls for .Net, ASP.NET, ActiveX, Java, Delphi.

List & Combo Box Controls & Components - (27 products) Use our list and combo box controls to extend the native listbox components found in windows with capabilites like multi column data, large data set support and auto completion of text. Our list and combo page includes list and combo components for all platforms including ASP.Net, .Net, Delphi, ActiveX and Java.

Menu Controls & Components - (29 products) Add side menus, top menu bars, drop down, fly-out and cascading menus and many other types of menues with our range of menu components. Add graphics and style menus like your favorite applications such as Windows XP and Office 2003. The menu control page contains all menu libraries, components and controls for .Net, ASP.NET, ActiveX, Java, Delphi.

User Interface Components - (40 products) The miscellaneous user interface (UI) control page contains all GUI libraries, components and controls for .Net, ASP.NET, ActiveX, Java, Delphi which do not have their own classification .

Navigation Bar Controls & Components - (23 products) Also called side bars, button bars, or Outlook Bars, these controls allow you to display a selection of buttons collectedinto user selectable groups. Our Navigation bar page includes Nav Bar control for all platforms, .Net, ASP.Net, DHTML, Java, Delphi & ActiveX

Popup Window Controls & Components - (9 products) Enable your applications to display Messenger-style popup windows to notify users of an event or request attention.

Property List Controls & Components - (6 products) Property lists are a hybrid grid/list user interface paradigm similar to those used to edit the properties of controls in MS Visual Studio. They enable the application to display and edit a collection of name/value pairs with a variety of data types.

Resizing Controls & Components - (17 products) Use a resize control to make your applications resolution independant. Manage the size and position of child controls on a form when a user changes the size of the parent window. The resizing component page contains all resizer controls for .Net, ActiveX, Java and Delphi.

Tab Components - (24 products) Implelement tabbed navigation to switch documents or panels within your application. Go beyond native tab capabilities with more styling options and extended capabilities. The tab control page contains all tab/tabstrib components and controls for .Net, ASP.NET, ActiveX, Java, Delphi.

Toolbar Controls & Components - (24 products) Use toolbars to emulate the various types of control strips found in MS Outlook, MS Office and MS Visual Studio. They can usually contain a variety of other controls such as buttons, drop down lists and menus. Some offer docking capabilities. The toolbar page lists all toolbars (controls, components, libraries & classes) for .Net, ASP.NET, ActiveX, Java, Delphi.

ToolTip Controls & Components - (10 products) Display text information in a small popup window when a user points to an object on the screen. The The tooltip page lists all tooltip controls and components for .net, ActiveX, Java, Delphi

Treeview Components - (44 products) Manage, display and navigate heirachical data with a tree or treeview component. The tree control page contains all treeview controls for.net, ASP.Net, active X, Delphi and Java

User Interface Component Suites - (71 products) The user interface suites page lists all GUI component and control suites for .Net, ASP.NET, ActiveX, Java, Delphi.

76

http://www.devdirect.com/ALL/UISuite_PCAT_1872.aspx

http://www.devdirect.com/ALL/UITREE_PCAT_1901.aspx

http://www.devdirect.com/ALL/Tooltip_PCAT_2023.aspx

http://www.devdirect.com/ALL/UIToolbar_PCAT_1856.aspx

http://www.devdirect.com/ALL/UITAB_PCAT_1920.aspx

http://www.devdirect.com/ALL/RESIZE_PCAT_1892.aspx

http://www.devdirect.com/ALL/PropertyListComponents_PCAT_2041.aspx

http://www.devdirect.com/ALL/PopupComponents_PCAT_2029.aspx

http://www.devdirect.com/ALL/User%20InterfaceNavBar_PCAT_1956.aspx

http://www.devdirect.com/ALL/UserInterfaceOther_PCAT_1961.aspx

http://www.devdirect.com/ALL/UIMENU_PCAT_1976.aspx

http://www.devdirect.com/ALL/UILIST_PCAT_1894.aspx


Window and Form Components - (8 products) Affect the shape, color, caption or other properties windows using a window component.

13 User Interface Design and Usability

This is page contains links to HCI and User Interface Design related web sites that may help you with User Interface Design. Links include corporate sites, industry GUI and WEB style guides, Universities that have HCI or User Interface Design related 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.

13.1 User Interface Design Style Guides

Object-Oriented Interface - Design: IBM Common User Access GuidelinesCommon Desktop Environment 1.0 Style Guide and Certification ChecklistOSF/Motif Style GuideMacintosh Human Interface GuidelinesThe Windows ® Interface Guidelines for Software DesignTaligent Style Guide JMAPI User Interface Style Guide Java Management API. - Sun MicrosystemsDesign Guide for Multiplatform Graphical User Interfaces - Bellcore

77

http://www.bellcore.com/RAPIDAPPS/DesignGuide.html

http://java.sun.com/products/JavaManagement/documents/style_guide/html/ui_styleguide_title.html

http://hpsalo.cern.ch/TaligentDocs/TaligentOnline/DocumentRoot/1.0/Docs/books/SG/SG_3.html

http://www.microsoft.com/win32dev/uiguide/default.htm

http://www.ibm.com/ibm/hci/designer/docs/mac.html

http://www.ibm.com/ibm/hci/designer/docs/motif.html

http://www.ibm.com/ibm/hci/designer/docs/cde.html

http://www.ibm.com/ibm/hci/designer/docs/cua.html

mailto:[email protected]

http://www.isii.com/ui_design.html#Universities

http://www.isii.com/ui_design.html#Miscellaneous%20Sites%20of%20Interest

http://www.isii.com/ui_design.html#UNIX%20User%20Interface%20Links

http://www.isii.com/ui_design.html#Apple%20User%20Interface%20Links

http://www.isii.com/ui_design.html#Microsoft%20User%20Interface%20Links

http://www.isii.com/ui_design.html#IBM%20User%20Interface%20Links

http://www.isii.com/ui_design.html#Associations%20and%20Organizations

http://www.isii.com/ui_design.html#Useful%20User%20Interface%20Design%20and%20HCI%20References

http://www.isii.com/ui_design.html#Web%20Design%20Style%20Guides

http://www.isii.com/ui_design.html#User%20Interface%20Design%20Style%20Guides

http://www.isii.com/book_frame.html

http://www.devdirect.com/ALL/UIWINDOW_PCAT_1932.aspx


13.2 Web Design Style Guides

Ameritech Web Page User Interface Standards and Design Guidelines Apple Web Design Guide Sun Microsystems: Guide to Web StyleYale Web Style Manual IEEE Web Style GuideIBM Web Design Guidelines

13.3 Useful User Interface Design and HCI ReferencesHCI Resources: Guidelines, Styleguides, and Standards - Collection of links to various resourcesHCI resources on the Net (Yahoo listing)HCI Index - A collection different resources on Human-Computer-InteractionUser Interaction Design Webcomp.human-factors - A newsgroup for questions and information related to HCI in generalHCI Related Material on the Web - A collection of pages that point to many different resources on Human-Computer-Interaction.Human - Computer Interaction Virtual Library - a meta-index of information on human-computer interaction.Graphics Visualization & Usability Center - A searchable database of research related to User Interface and Usability, and other cool topics like Animation, Multimedia, and Hypertext.

13.4 Associations and Organizations

Association for Computing Machinery (ACM)Association for Software DesignHuman Factors and Ergonomics Society (HFES)Society for Technical Communications (STC)Special Interest Group on Computer-Human Interaction (SIGCHI)Usability Professional's AssociationBritish HCI group Institute of Electrical and Electronics Engineers (IEEE) International Standards Organization (ISO)The Ergonomics Society

13.5 IBM User Interface Links

IBM Human-Computer InteractionIBM Open BlueprintIBM OpenDoc Site

13.6 Microsoft User Interface Links

Microsoft Research User Interfaces Group - A page about a group at Microsoft that is researching future user interface technologies. Discusses a project called Persona which is exploring conversational assistants (little animated characters) to interact with users.The Windows ® Interface Guidelines for Software Design

13.7 Apple User Interface Links

Apple Macintosh Human Interface GuidelinesApple's OpenDoc Home Page

13.8 UNIX User Interface Links

The Open Group

78

http://www.opengroup.org/

http://www.opendoc.apple.com/

http://devworld.apple.com/dev/techsupport/insidemac/HIGuidelines/HIGuidelines-2.html

http://www.microsoft.com/win32dev/uiguide/default.htm

http://www.research.microsoft.com/research/ui/

http://www.software.ibm.com/ad/opendoc/

http://www.software.ibm.com/openblue//

http://www.ibm.com/ibm/hci/general.html

http://www.ergonomics.org.uk/

http://www.iso.ch/

http://www.ieee.org/

http://www.bcs.org.uk/hci/

http://www.upassoc.org/

http://info.sigchi.acm.org/sigchi/

http://stc.org/

http://vered.rose.utoronto.ca/HFESVE_dir/HFES.html

http://www-pcd.stanford.edu/asd/

http://www.acm.org/

http://www.cc.gatech.edu/gvu/gvutop.html

http://www.cs.bgsu.edu/HCI/

http://is.twi.tudelft.nl/hci/

news://comp.human-factors

http://www.io.tudelft.nl/uidesign/

http://is.twi.tudelft.nl/hci/

http://yahoo.com/Science/Computer_Science/Human_Computer_Interaction__HCI_/

http://www.ida.liu.se/~miker/hci/guidelines.html

http://www.ibm.com/ibm/hci/guidelines/web/web_design.html

http://www.ieee.org/i3e_www_docs/www_style_guide_1.0.html

http://info.med.yale.edu/caim/StyleManual_Top.HTML

http://www.sun.com/styleguide/

http://www.applenet.apple.com/hi/web/intro.html

http://www.ameritech.com/news/testtown/library/standard/web_guidelines/index.html


I nterface Design for Sun's WWW Site - Part of Sun Microsystems site that shows their numerous iterations of home page and icon designs, as well as a description of the usability engineering methods used in their design process.

13.9 Miscellaneous Sites of Interest

World Wide Web Usability - Abstracts from the International Journal of Human Computer Studies. Bad Human Factors Designs - Examples of bad human factors designs from everyday life.

13.10 Universities

Binghamton University

Glasgow UniversityStaffordshire University

University of Lisbon University of Toronto

Brigham Young University

Helsinki University of Technology

Stanford University University of LondonUniversity of Trondheim

Brunel UniversityHeriot-Watt University

University of British Columbia

University of Manchester

University of Technology in Vienna

Brunel University Hull UniversityUniversity of

CanberraUniversity of Manchester

University of Vienna

Carnegie Mellon University

Linkoping University University of DundeeUniversity of

MarylandUniversity of York

Chalmers University of Technology

Loughborough University of Technology

University of Göteborg

University of Nebraska

Uppsala University

City University of London

New York University University of GuelphUniversity of New

BrunswickUniversity of Ulster

Delft University of Technology

The Open UniversityUniversity of Huddersfield

Universoty of Oldenburg

Virginia Tech.

Free University of Berlin

Oregon Graduate Institute

University of Kassel University of Sussex

Georgia Tech.Queen Mary and

Westfield CollegeUniversity of Leeds

University of Tampere

79

http://www.uta.fi/~kjr/HCI/HCI.html

http://www.uta.fi/~kjr/HCI/HCI.html

http://cbl.leeds.ac.uk/workgroups/graphical-programming-user-interfaces/overview.html

http://www.dcs.qmw.ac.uk/research/hci/

http://www.dcs.qmw.ac.uk/research/hci/

http://www.cc.gatech.edu/gvu/gvutop.html

http://www.cogs.susx.ac.uk/lab/scot/index.html

http://www.imat.maschinenbau.uni-kassel.de/

http://www.cse.ogi.edu/Interactive/

http://www.cse.ogi.edu/Interactive/

http://www.inf.fu-berlin.de/inst/ag-is/

http://www.inf.fu-berlin.de/inst/ag-is/

http://www.cs.vt.edu/~hci/chci.html

http://www.informatik.uni-oldenburg.de/abt/ub/CG_SE.e.html

http://www.informatik.uni-oldenburg.de/abt/ub/CG_SE.e.html

http://www.hud.ac.uk/schools/comp+maths/private/alan/hci/HCIcentre.html

http://www.hud.ac.uk/schools/comp+maths/private/alan/hci/HCIcentre.html

http://pepper.open.ac.uk/computing/iisigposter.html

http://www.twi.tudelft/TWI/Overview.html

http://www.twi.tudelft/TWI/Overview.html

http://www.iscm.ulst.ac.uk/isc/isc-intr.html

http://www.omg.unb.ca/hci/

http://www.omg.unb.ca/hci/

http://www.cis.uoguelph.ca/~mac/IRGG.html

http://www.itp.tsoa.nyu.edu/

http://web.cs.city.ac.uk/hcid/index.html

http://web.cs.city.ac.uk/hcid/index.html

http://www.cmd.uu.se/

http://pooh.unl.edu/~scotth/CHI-research

http://pooh.unl.edu/~scotth/CHI-research

http://www.cs.chalmers.se/SSKKII/index.html

http://www.cs.chalmers.se/SSKKII/index.html

http://www.lut.ac.uk/departments/co/lutchi/



http://www.cs.chalmers.se/ComputingScience/Research/Cognition/

http://www.cs.chalmers.se/ComputingScience/Research/Cognition/

http://dcpu1.cs.york.ac.uk:6666/hci/hci.html

http://www.cs.umd.edu:80/projects/hcil/

http://www.cs.umd.edu:80/projects/hcil/

http://alpha.mic.dundee.ac.uk/microcentre.html

http://www.ida.liu.se/labs/aslab/groups/um/

http://www.cs.cmu.edu/afs/cs.cmu.edu/user/hcii/www/hcii-home.html

http://www.cs.cmu.edu/afs/cs.cmu.edu/user/hcii/www/hcii-home.html

http://sokrates.ani.univie.ac.at/ani/research/MCK.html

http://info.mcc.ac.uk/CGU/CGU-intro.html

http://info.mcc.ac.uk/CGU/CGU-intro.html

http://pandonia.canberra.edu.au:80/itcentre/

http://pandonia.canberra.edu.au:80/itcentre/

http://web.dcs.hull.ac.uk/VERC/

http://interaction.brunel.ac.uk/

http://nswt.tuwien.ac.at:8000/hci/hci_home.html

http://nswt.tuwien.ac.at:8000/hci/hci_home.html

http://www.cs.man.ac.uk/aig/aig.html

http://www.cs.man.ac.uk/aig/aig.html

http://www.cs.ubc.ca/nest/magic/projects/hands/home

http://www.cs.ubc.ca/nest/magic/projects/hands/home

http://janus.cee.hw.ac.uk/HCI/

http://janus.cee.hw.ac.uk/HCI/

http://http2.brunel.ac.uk:8080/~cspgmjp/group/HCI_COGSCI.html

http://www.ifi.unit.no/aktiv/hci.su.html/

http://www.ifi.unit.no/aktiv/hci.su.html/

http://www.ee.ic.ac.uk/research/information/www/HCIGroup.html

http://pcd.stanford.edu/hci.html

http://www.cs.hut.fi/HCI/

http://www.cs.hut.fi/HCI/

ftp://issl.cs.byu.edu/home.html

ftp://issl.cs.byu.edu/home.html

http://www.ie.utoronto.ca/IE/HF/summary.html

http://mmedia.fct.unl.pt/mosaic/inter.html-english

http://www.soc.staffs.ac.uk/research/groups/hci/

http://www.soc.staffs.ac.uk/research/groups/hci/

http://www.dcs.glasgow.ac.uk/

http://hcirisc.cs.binghamton.edu/

http://hcirisc.cs.binghamton.edu/

http://www.baddesigns.com/

http://www.hbuk.co.uk/ap/ijhcs/webusability

http://www.sun.com/sun-on-net/uidesign


DAFTAR ISI

1 INTERAKSI MANUSIA KOMPUTER ................................................................................................... 1

1.1 DEFINISI DAN FUNGSI INTERAKSI MANUSIA KOMPUTER.....................................................................11.2 USABILITY................................................................................................................................................21.2.1 LEARNABILITY.................................................................................................................................21.2.2 THROUGHPUT....................................................................................................................................21.2.3 FLEXIBILITY......................................................................................................................................31.2.4 ATTITUDE...........................................................................................................................................31.3 PROSES MENGHASILKAN INTERFACE YANG BAIK.................................................................................31.4 KONSEKUENSI INTERFACE YANG BURUK...............................................................................................41.5 BIDANG ILMU YANG TERKAIT DENGAN IMK........................................................................................41.5.1 ILMU KOMPUTER....................................................................................................................................41.5.2 COGNITIVE PSIKOLOGI / PEMAHAMAN PSIKOLOGI................................................................................41.5.3 ERGONOMIK...........................................................................................................................................51.5.4 SOSIOLOGI.............................................................................................................................................51.6 KONTEKS IMK........................................................................................................................................5

2 PERALATAN & MODEL INTERAKSI ................................................................................................. 7

2.1 PERALATAN INTERAKSI..................................................................................................................82.2 TEKNIK INTERAKSI...........................................................................................................................92.2.1 LINGUISTIC STYLES...............................................................................................................................92.2.2 KEY-MODAL STYLES.............................................................................................................................92.2.3 DIRECT MANIPULATION STYLES...........................................................................................................9

3 SISTEM PENGOLAHAN INFORMASI PADA MANUSIA ............................................................... 10

3.1 SUBSISTEM INTERAKSI..................................................................................................................113.1.1 PERCEPTUAL SYSTEM..........................................................................................................................113.1.2 SISTEM KOGNITIF................................................................................................................................113.1.3 SISTEM GERAK....................................................................................................................................113.2 MODEL PROSESOR DAN MEMORI MANUSIA..........................................................................123.3 KETERBATASAN MEMORI..................................................................................................................133.3.1 SHORT-TERM-MEMORY.......................................................................................................................133.3.2 LONG-TERM-MEMORY........................................................................................................................143.3.3 KESIMPULAN DARI KETERBATASAN MEMORI......................................................................................14

4 PANDUAN MERANCANG IMK ........................................................................................................... 15

4.1.1 KONSISTENSI.......................................................................................................................................174.1.2 KESESUAIAN DENGAN HARAPAN PENGGUNA.....................................................................................174.1.3 KONTROL DAN FLEKSIBILITAS............................................................................................................184.1.4 SUSUNAN EKSPLISIT DARI ANTARMUKA.............................................................................................184.1.5 UMPAN BALIK YANG INFORMATIF DAN BERKESINAMBUNGAN............................................................184.1.6 PENCEGAHAN DAN PERBAIKAN KESALAHAN......................................................................................194.1.7 PENDUKUNG DAN DOKUMENTASI PENGGUNA.....................................................................................194.1.8 KEJELASAN VISUAL SECARA LOJIK DAN RELEVAN./ VISUAL CLARITY...............................................204.2 PERTIMBANGAN LAIN............................................................................................................................204.3 CONTOH ANTARMUKA..........................................................................................................................21

5 PANDUAN MEMBUAT MENU ............................................................................................................. 26

80


5.1 PENGATURAN TUGAS YANG BERHUBUNGAN (TASK-RELATED ORGANIZATION)..............................265.1.1 SINGLE MENUS....................................................................................................................................275.1.2 LINEAR SEQUENCES AND MULTIPLE MENUS......................................................................................275.1.3 TREE-STRUCTURED MENUS.................................................................................................................275.1.4 BEBERAPA BENTUK MENU YANG LAINNYA.........................................................................................275.2 STRATEGI UNTUK MENGELOMPOKKAN MENU.....................................................................................285.3 URUTUAN PENAMPILAN ITEM MENU...................................................................................................285.4 WAKTU RESPON DAN KECEPATAN TAMPIL........................................................................................285.5 PEMILIHAN MENU YANG CEPAT...........................................................................................................295.6 TATA LETAK MENU...............................................................................................................................295.6.1 JUDUL..................................................................................................................................................295.6.2 FRASA DARI ITEM MENU......................................................................................................................295.6.3 TATA LETAK DAN DESAIN MONITOR (GRAPHIC).................................................................................295.7 FORM FILLIN.........................................................................................................................................305.7.1 FORM-FILLIN DESIGN GUIDELINES.....................................................................................................305.7.2 LIST DAN COMBO BOXES.....................................................................................................................315.7.3 DIALOG BOXES....................................................................................................................................315.8 SARAN UMUM.........................................................................................................................................31

6 ICON / TOOLBUTTON .......................................................................................................................... 32

6.1 DEFINISI ICON........................................................................................................................................326.2 KEUNTUNGAN PENGGUNAAN ICON......................................................................................................336.3 KEKURANGAN PENGGUNAAN ICON......................................................................................................346.4 PERTIMBANGAN PERANCANGAN/PEMILIHAN ICON............................................................................35

7 PENGATURAN TAMPILAN DAN WARNA ....................................................................................... 37

7.1 KERAPATAN VISUAL DAN KESEIMBANGAN...........................................................................................377.2 KEJELASAN TEKS...................................................................................................................................387.3 PENGKODEAN VISUAL...........................................................................................................................397.4 WARNA...................................................................................................................................................407.4.1 CACAT WARNA...................................................................................................................................407.4.2 PENYIMPANGAN KROMATIK................................................................................................................417.4.3 MENGAPA WARNA SEKARANG LEBIH BANYAK DIGUNAKAN DALAM INTERFACES KOMPUTER?.........417.4.4 TUNTUNAN UNTUK MENGGUNAKAN WARNA.......................................................................................427.5 TUNTUNAN UMUM..................................................................................................................................42

8 PENGGUNAAN SISTEM WARNA RGB ............................................................................................. 44

8.1 CAHAYA MELALUI KOMBINASI WARNA DASAR/PRIMER....................................................................448.2 SISTEM WARNA RGB............................................................................................................................448.3 WARNA ABU-ABU (GRAY).....................................................................................................................458.4 WARNA DASAR / WARNA PRIMER.......................................................................................................458.5 WARNA SEKUNDER................................................................................................................................458.6 WARNA-WARNA LAINNYA.....................................................................................................................468.7 WARNA MURNI.......................................................................................................................................468.8 HUE (RODA WARNA) DAN LUMINOSITY (KILAUAN)............................................................................468.9 SATURATION / KEJENUHAN...................................................................................................................478.10 PENYAJIAN WARNA DENGAN BILANGAN BULAT (DESIMAL & HEKSA)............................................488.11 MENAMPILKAN WARNA DALAM APLIKASI WINDOWS.......................................................................488.12 WARNA WARNA PASTEL....................................................................................................................50

9 SPESIFIKASI KEGUNAAN (USABILITY) ......................................................................................... 51

9.1 SPESIFIKASI KEGUNAAN........................................................................................................................51

81


9.2 PENGUKURAN SPESIFIKASI KEGUNAAN...............................................................................................529.3 FAKTOR PENGGUNAAN UMUM...............................................................................................................539.3.1 KECEPATAN OPERASI...........................................................................................................................539.3.2 TINGKAT PENYELESAIAN.....................................................................................................................549.3.3 TINGKAT BEBAS KESALAHAN..............................................................................................................549.3.4 TINGKAT KEPUASAN............................................................................................................................559.3.5 KEMAMPUAN UNTUK BELAJAR............................................................................................................559.3.6 KEMAMPUAN UNTUK MEMELIHARA....................................................................................................559.3.7 PEMAKAIAN KEGUNAAN YANG LEBIH MODERN..................................................................................569.4 KAPAN ANDA MELAKUKAN PENELITIAN KEGUNAAN INI?...................................................................569.5 MENENTUKAN TINGKAT UNTUK PENGGUNAAN...................................................................................599.6 KEUNTUNGAN DARI SPESIFIKASI PENGGUNA.......................................................................................609.7 KERUGIAN SPESIFIKASI KEGUNAAN....................................................................................................61

10 BUKU PANDUAN, ONLINE HELP, DAN TUTORIALS ............................................................... 62

10.1 PENDAHULUAN.....................................................................................................................................6210.1.1 FORMS OF PAPER USER MANUALS:....................................................................................................6210.1.2 ONLINE MATERIALS..........................................................................................................................6210.1.3 ONE WAY TO CLASSIFY PAPER AND ONLINE MATERIALS (DUFFY):..................................................6210.2 READING FROM PAPER VERSUS FROM DISPLAYS.............................................................................6210.3 PREPARATION OF PRINTED MANUALS...............................................................................................6310.3.1 USE OF OAI MODEL TO DESIGN MANUALS.......................................................................................6310.3.2 ORGANIZATION AND WRITING STYLE................................................................................................6410.3.3 NONANTHROPOMORPHIC DESCRIPTIONS...........................................................................................6410.3.4 DEVELOPMENT PROCESS...................................................................................................................6510.4 PREPARATION OF ONLINE FACILITIES..............................................................................................6510.4.1 ONLINE MANUALS............................................................................................................................6610.4.2 ONLINE TUTORIALS, DEMONSTRATIONS, AND ANIMATIONS.............................................................6710.4.3 HELPFUL GUIDES..............................................................................................................................68

11 STRATEGI MULTIPLE-WINDOW ................................................................................................... 69

11.1 INTRODUCTION....................................................................................................................................6911.2 INDIVIDUAL-WINDOW DESIGN...........................................................................................................6911.3 MULTIPLE-WINDOW DESIGN.............................................................................................................6911.4 COORDINATION BY TIGHTLY COUPLED WINDOWS..........................................................................7011.5 IMAGE BROWSING AND TIGHTLY-COUPLED WINDOWS...................................................................7011.6 PERSONAL ROLE MANAGEMENT AND ELASTIC WINDOWS..............................................................70

12 LAMPIRAN ............................................................................................................................................. 71

82

Documents

interaksi manusia dan komputer