IF MATERI 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

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

• 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 dari

pemakai 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

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.

Ilmu Pengamatan Sosial dan

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

2

PERALATAN & MODEL INTERAKSI

Bahasan :

1. Menjelaskan secara global peralatan interaksi

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

Gambar 1. Interaksi Manusia-Komputer : Aksi dan Fungsi TUJUAN Aksi

F

ungsi

KOMPUTER MANUSIA

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 pad alphanumeric key

pad tablet

2 joystick/trackball joystick/trackball alphanumeric key _pad tablet mouse 3 lightpen/touch

screen

lightpen/touch

screen tablet soft keyboard

lightpen/touch screen

4 function keys cursor soft keyboard

Masukan Pemroses Keluaran

Penyimpan Alat interaksi

manusia

komputer Alat interaksi

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.

3

SISTEM PENGOLAHAN

INFORMASI PADA MANUSIA

Bahasan :

1. Menjelaskan bagaimana psikologi dapat memberi kontribusi untuk HCI

2. Menjelaskan beberapa subsistem interaksi manusia

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

Kiri Kanan

Kata – 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 interaksi

2. prosesor dan

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

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

1

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.

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

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

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 tugas

2. Mudah digunakan

3. Dapat disesuaikan dengan pemakaian tingkat pengguna

4. Mampu menyediakan umpan balik

5. Layar informasi dalam sebuah format, dan satu ruangan, cocok dengan sistem

operator

6. Mengikuti prinsip-prinsip ergonomik

Secara lebih detail panduan merancang IMK sebagai berikut :

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

4.1.1

Konsistensi

Internal Konsistensi. Yaitu penggunaan yang konsisten pada hal-hal seperti format perintah, simbol, posisi objek, kotak-kotak dialog, dan lain-lain, dalam sebuah aplikasi yang diberikan ; aturan-aturan yang harus diaplikasikan secara konsisten pada semua elemen dalam sistem softwarekhusus manapun..

Contoh : “ Semua kotak dialog harus mempunyai tombol Cancel dan Ok, pada posisi yang relatif sama pada setiap kotak”, “ Hala-hal yang serupa harus harus di presentasikan

kembali secara konsisten ( tombol-tombol dan kotak-kotak radio)”

External Consistency. Yaitu konsisten antara perangkat software pada jalur yang diberikan ( Mac dan Pc ) contohnya : penampilan, funsi dan posisi menu dalam semua aplikasi. Menggunakan icon yang sama untuk sebah text dalam semua aplikasi. 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 AldusPagemaker, 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

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

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.

• Lexical feedback

Ini adalah dimana sistem menindikasikan “terima pesan, tetapi tidak ada perubahan yang telah dibuat dibawah pengaruh dari sistem”. Sebagai contoh, daftar nama telah diblok ketika cursor merubah bentuk dari 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.

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.

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

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

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

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 Pesan Berjalan

Message

ID Kartu & Passowrd

Pengumuman

Jam & Tempat tersedia Latar Belakang

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

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 :

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

5.2

Strategi untuk mengelompokkan menu

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

• 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

Tehnik

• Indentation

• Upper/lower case characters

• Symbols such as * or - to create separators or outlines

• Position markers

• Cascading or walking menus

• Magic lens

5.7

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

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.

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

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 Icon

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

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.

• 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

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.

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

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)

• 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

Yale Web Style Manual IEEE Web Style Guide IBM Web Design Guidelines

13.3

Useful User Interface Design and HCI References

HCI Resources: Guidelines, Styleguides, and Standards - Collection of links to various resources HCI resources on the Net (Yahoo listing)

HCI Index - A collection different resources on Human-Computer-Interaction User Interaction Design Web

comp.human-factors - A newsgroup for questions and information related to HCI in general

HCI Related Material on the Web - A collection of pages that point to many different resources on Human Interaction.

Human - Computer Interaction Virtual Library - a meta-index of information on human-computer interaction Graphics Visualization & Usability Center - A searchable database of research related to User Interface a Usability, and other cool topics like Animation, Multimedia, and Hypertext.

13.4

Associations and Organizations

Association for Computing Machinery (ACM) Association for Software Design

Human Factors and Ergonomics Society (HFES) Society for Technical Communications (STC)

Special Interest Group on Computer-Human Interaction (SIGCHI) Usability Professional's Association

British 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 Interaction IBM Open Blueprint

IBM OpenDoc Site

13.6

Microsoft User Interface Links

Microsoft Research User Interfaces Group - A page about a group at Microsoft that is researching future us interface technologies. Discusses a project called Persona which is exploring conversational assistants (li animated characters) to interact with users.

13.7

Apple User Interface Links

Apple Macintosh Human Interface Guidelines Apple's OpenDoc Home Page

13.8

UNIX User Interface Links

The Open Group

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

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 University

Staffordshire

University University of Lisbon

University of Toronto

Brigham Young University

Helsinki University

of Technology Stanford University

University of London

University of Trondheim

Brunel University Heriot-Watt University

University of British Columbia University of Manchester University of Technology in Vienna

Brunel University Hull University University of Canberra

University of

Manchester University of Vienna

Carnegie Mellon University Linkoping University University of Dundee University of

Maryland University 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 Guelph

University of New

Brunswick University of Ulster

Delft University of

Technology The Open University

University of Huddersfield

Universoty of

Free University of Berlin

Oregon Graduate

Institute University of Kassel University of Sussex

Georgia Tech. Queen Mary and

Westfield College University of Leeds

University of Tampere

DAFTAR ISI

1 INTERAKSI MANUSIA KOMPUTER ... 1

1.1 DEFINISI DAN FUNGSI INTERAKSI MANUSIA KOMPUTER ... 1

1.2 USABILITY ... 2

1.2.1 LEARNABILITY ... 2

1.2.2 THROUGHPUT ... 2

1.2.3 FLEXIBILITY ... 3

1.2.4 ATTITUDE ... 3

1.3 PROSES MENGHASILKAN INTERFACE YANG BAIK ... 3

1.4 KONSEKUENSI INTERFACE YANG BURUK ... 4

1.5 BIDANG ILMU YANG TERKAIT DENGAN IMK ... 4

1.5.1 ILMU KOMPUTER ... 4

1.5.2 COGNITIVE PSIKOLOGI /PEMAHAMAN PSIKOLOGI ... 4

1.5.3 ERGONOMIK ... 5

1.5.4 SOSIOLOGI ... 5

1.6 KONTEKS IMK ... 5

2 PERALATAN & MODEL INTERAKSI ... 7

2.1 PERALATANINTERAKSI ... 8

2.2 TEKNIKINTERAKSI ... 9

2.2.1 LINGUISTIC STYLES. ... 9

2.2.2 KEY-MODAL STYLES. ... 9

2.2.3 DIRECT MANIPULATION STYLES. ... 9

3 SISTEM PENGOLAHAN INFORMASI PADA MANUSIA ... 10

3.1 SUBSISTEMINTERAKSI ... 11

3.1.1 PERCEPTUAL SYSTEM ... 11

3.1.2 SISTEM KOGNITIF ... 11

3.1.3 SISTEM GERAK ... 11

3.2 MODELPROSESORDANMEMORIMANUSIA ... 12

3.3 KETERBATASAN MEMORI ... 13

3.3.1 SHORT-TERM-MEMORY ... 13

3.3.2 LONG-TERM-MEMORY ... 14

3.3.3 KESIMPULAN DARI KETERBATASAN MEMORI ... 14

4 PANDUAN MERANCANG IMK ... 15

4.1.1 KONSISTENSI ... 17

4.1.2 KESESUAIAN DENGAN HARAPAN PENGGUNA. ... 17

4.1.3 KONTROL DAN FLEKSIBILITAS ... 18

4.1.4 SUSUNAN EKSPLISIT DARI ANTARMUKA. ... 18

4.1.5 UMPAN BALIK YANG INFORMATIF DAN BERKESINAMBUNGAN. ... 18

4.1.6 PENCEGAHAN DAN PERBAIKAN KESALAHAN ... 19

4.1.7 PENDUKUNG DAN DOKUMENTASI PENGGUNA ... 19

4.1.8 KEJELASAN VISUAL SECARA LOJIK DAN RELEVAN./VISUAL CLARITY. ... 20

4.2 PERTIMBANGAN LAIN ... 20

4.3 CONTOH ANTARMUKA ... 21

5.1 PENGATURAN TUGAS YANG BERHUBUNGAN (TASK-RELATED ORGANIZATION) ... 26

5.1.1 SINGLE MENUS ... 27

5.1.2 LINEAR SEQUENCES AND MULTIPLE MENUS ... 27

5.1.3 TREE-STRUCTURED MENUS ... 27

5.1.4 BEBERAPA BENTUK MENU YANG LAINNYA ... 27

5.2 STRATEGI UNTUK MENGELOMPOKKAN MENU ... 28

5.3 URUTUAN PENAMPILAN ITEM MENU ... 28

5.4 WAKTU RESPON DAN KECEPATAN TAMPIL ... 28

5.5 PEMILIHAN MENU YANG CEPAT ... 29

5.6 TATA LETAK MENU ... 29

5.6.1 JUDUL ... 29

5.6.2 FRASA DARI ITEM MENU ... 29

5.6.3 TATA LETAK DAN DESAIN MONITOR (GRAPHIC) ... 29

5.7 FORM FILLIN ... 30

5.7.1 FORM-FILLIN DESIGN GUIDELINES ... 30

5.7.2 LIST DAN COMBO BOXES ... 31

5.7.3 DIALOG BOXES ... 31

5.8 SARAN UMUM ... 31

6 ICON / TOOLBUTTON ... 32

6.1 DEFINISI ICON ... 32

6.2 KEUNTUNGAN PENGGUNAAN ICON ... 33

6.3 KEKURANGAN PENGGUNAAN ICON ... 34

6.4 PERTIMBANGAN PERANCANGAN/PEMILIHAN ICON ... 35

7 PENGATURAN TAMPILAN DAN WARNA ... 37

7.1 KERAPATAN VISUAL DAN KESEIMBANGAN ... 37

7.2 KEJELASAN TEKS ... 38

7.3 PENGKODEAN VISUAL ... 39

7.4 WARNA ... 40

7.4.1 CACAT WARNA ... 40

7.4.2 PENYIMPANGAN KROMATIK ... 41

7.4.3 MENGAPA WARNA SEKARANG LEBIH BANYAK DIGUNAKAN DALAM INTERFACES KOMPUTER? ... 41

7.4.4 TUNTUNAN UNTUK MENGGUNAKAN WARNA ... 42

7.5 TUNTUNAN UMUM ... 42

8 PENGGUNAAN SISTEM WARNA RGB ... 44

8.1 CAHAYA MELALUI KOMBINASI WARNA DASAR/PRIMER ... 44

8.2 SISTEM WARNA RGB ... 44

8.3 WARNA ABU-ABU (GRAY) ... 45

8.4 WARNA DASAR / WARNA PRIMER ... 45

8.5 WARNA SEKUNDER ... 45

8.6 WARNA-WARNA LAINNYA ... 46

8.7 WARNA MURNI ... 46

8.8 HUE (RODA WARNA) DAN LUMINOSITY (KILAUAN)... 46

8.9 SATURATION /KEJENUHAN ... 47

8.10 PENYAJIAN WARNA DENGAN BILANGAN BULAT (DESIMAL &HEKSA) ... 48

8.11 MENAMPILKAN WARNA DALAM APLIKASI WINDOWS ... 48

8.12 WARNA WARNA PASTEL ... 50

9 SPESIFIKASI KEGUNAAN (USABILITY) ... 51

9.2 PENGUKURAN SPESIFIKASI KEGUNAAN ... 52

9.3 FAKTOR PENGGUNAAN UMUM. ... 53

9.3.1 KECEPATAN OPERASI. ... 53

9.3.2 TINGKAT PENYELESAIAN. ... 54

9.3.3 TINGKAT BEBAS KESALAHAN. ... 54

9.3.4 TINGKAT KEPUASAN. ... 55

9.3.5 KEMAMPUAN UNTUK BELAJAR. ... 55

9.3.6 KEMAMPUAN UNTUK MEMELIHARA. ... 55

9.3.7 PEMAKAIAN KEGUNAAN YANG LEBIH MODERN. ... 56

9.4 KAPAN ANDA MELAKUKAN PENELITIAN KEGUNAAN INI? ... 56

9.5 MENENTUKAN TINGKAT UNTUK PENGGUNAAN. ... 59

9.6 KEUNTUNGAN DARI SPESIFIKASI PENGGUNA. ... 60

9.7 KERUGIAN SPESIFIKASI KEGUNAAN ... 61

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

10.1 PENDAHULUAN ... 62

10.1.1 FORMS OF PAPER USER MANUALS: ... 62

10.1.2 ONLINE MATERIALS ... 62

10.1.3 ONE WAY TO CLASSIFY PAPER AND ONLINE MATERIALS (DUFFY): ... 62

10.2 READING FROM PAPER VERSUS FROM DISPLAYS ... 62

10.3 PREPARATION OF PRINTED MANUALS... 63

10.3.1 USE OF OAIMODEL TO DESIGN MANUALS ... 63

10.3.2 ORGANIZATION AND WRITING STYLE ... 64

10.3.3 NONANTHROPOMORPHIC DESCRIPTIONS ... 64

10.3.4 DEVELOPMENT PROCESS... 65

10.4 PREPARATION OF ONLINE FACILITIES ... 65

10.4.1 ONLINE MANUALS... 66

10.4.2 ONLINE TUTORIALS, DEMONSTRATIONS, AND ANIMATIONS ... 67

10.4.3 HELPFUL GUIDES ... 68

11 STRATEGI MULTIPLE-WINDOW ... 69

11.1 INTRODUCTION ... 69

11.2 INDIVIDUAL-WINDOW DESIGN ... 69

11.3 MULTIPLE-WINDOW DESIGN ... 69

11.4 COORDINATION BY TIGHTLY COUPLED WINDOWS ... 70

11.5 IMAGE BROWSING AND TIGHTLY-COUPLED WINDOWS ... 70

11.6 PERSONAL ROLE MANAGEMENT AND ELASTIC WINDOWS ... 70