UAS IMK

Ben Shneidermans - Eight Golden Rules of Dialog Design

1. 2. 3. 4. 5. 6.

Upayakan untuk tetap konsisten. Gunakan short cut pada bagian yang sering digunakan. Sediakan feedback yang informatif. Dialog memiliki lingkup tertentu. Sediakan penanganan kesalahan yang sederhana. Perbolehkan user melakukan aksi mundur atau pembatalan. 7. Berikan kontrol internal. 8. Kurangi aktifitas mengingat.

Deborah J. Mayhews - General Principles of User Interface Design

1. 2. 3. 4. 5. 6. 7. 8. 9.

User compatibility Product compatibility Task compatibility Work flow compatibility Consistency Familiarity Simplicity Direct manipulation Control

10. 11. 12. 13. 14. 15. 16. 17.

WYSIWYG Flexibility Responsiveness Invisible technology Robusteness Protection Ease of learning Ease of use

IBMs - Design Principels for Tomorrow

1. Kesederhanaan : tidak mengabaikan usability demi fungsionalitas tertentu 2. Support : pengguna tetap terkendali melalui panduan proaktif 3. Familiarity : bangun pemahaman pengguna 4. Obviousness : buat objek fungsinya dapat terlihat dan intuitif 5. Encouragement : buat aksi dapat diperkirakan hasilnya dan dapat dibatalkan 6. Satisfaction : berikan pencapaian progress 7. Accessibility : buat semua object dapat di akses setiap saat 8. Safety : pastikan pengguna terbebas dari masalah 9. Versatility : berikan alternatif teknik interaksi 10. Personalization : berikan kesempatan pengguna untuk kustomisasi 11. Affinity : sesuaikan objek dengan kehidupan nyata melalui desain visual.

DIALOG

Dialog adalah level sintaksis dari interaksi manusia dan komputer Notasi dialog dapat berupa
Diagramatik, mudah dibaca Tekstual, mudah untuk dilakukan analisis formal.

Dialog berkaitan dengan

Semantik sistem, apa yang dilakukan oleh sistem Presentasi, bagaimana tampilan sistem

Deskripsi formal dapat dianalisis terhadap

Aksi yang tidak konsisten Aksi yang sulit dikembalikan Item yang hilang Kesalahan dalam memencet tombol

BHS.KOMPUTER

Bahasa komputer dibagi menjadi 3 tingkatan yaitu :

Leksikal, merupakan tingkat yang paling rendah : bentuk icon pada layar, tombol yang ditekan. Pada bahasa manusia, ekuivalen dengan bunyi dan ejaan suatu kata. Sintaksis, urutan dan struktur dari input dan output. Pada bahasa manusia, ekuivalen dengan grammar/tatabahasa suatu kalimat. Semantik, arti dari percakapan yang berkaitan dengan pengaruhnya pada struktur data internal komputer dan/ atau dunia eksternal. Pada bahasa manusia, ekuivalen dengan arti yang berasal dari para partisipan dalam percakapan.

Perancangan Dialog & Prinsip Desain dialog

Beberapa hal yang perlu diperhatikan dalam perancangan dialog :

Rangkaian dialog menggambarkan struktur tugas. Beberapa rangkaian dialog tambahan digunakan untuk user support, misalnya help system, tutorial subsystem. Rangkaian dialog diurutkan sesuai dengan struktur tugas.

Prinsip yang digunakan dalam desain dialog adalah membagi sistem menjadi beberapa bagian yang disebut modul (module).

Perancangan Dialog & Prinsip Desain dialog

Pembagian modul dalam sebuah sistem pemesanan buku di perpustakaan

Mendesain sebuah dialog & Notasi Diagramatik

Dalam mendesain sebuah dialog, diperlukan deskripsi yang terpisah dari program secara keseluruhan. Ada beberapa alasan yang mendasari hal tersebut, antara lain :

Agar lebih mudah dianalisa Pemisahan elemen-elemen interface dari logika program (semantik) Apabila notasi dialog ditulis sebelum program dibuat, maka notasi tersebut dapat membantu desainer untuk menganalisis struktur dialog yang diajukan, bahkan desainer juga dapat menggunakan prototyping tool untuk menguji dialog. Notasi dialog dapat digunakan sebagai salah satu cara bagi anggota tim perancangan untuk mendiskusikan rancangan dialog dan pada akhirnya diberikan kepada programmer aplikasi.

Bentuk yang paling sering digunakan dalam desain dialog. Kelebihan bentuk ini memungkinkan desainer untuk melihat secara sekilas struktur dialog, namun sulit untuk menjelaskan struktur dialog yang lebih luas dan kompleks. Beberapa bentuk notasi diagramatik :
State Transition Network Hierarchical State Transition Networks Harels State Charts Flowcharts JSD Diagrams

STN

STN telah lama digunakan untuk mendeskripsikan dialog.

Sebuah menu dari drawing tool sederhana berbasiskan mouse. State Transition Networks untuk menu Drawing Tools

STN

Hierarchical State Transition Network

Struktur Hierarchical State Transition Network mirip dengan STN namun memiliki tambahan berupa gabungan state (composite state) yang digambarkan dengan persegi panjang dengan gambar struktur STN berukuran kecil di dalamnya. Masing-masing persegi panjang ini menggambarkan submenu yang berkaitan. Submenu ini dapat dispesfikasikan dengan rinci pada STN tersendiri dengan menaruh label nama submenu yang bersangkutan pada simbol startnya. Penggunaan hirarki ini tidak mengubah notasi dasar STN namun menggabungkan beberapa STN ke dalam satu diagram besar sehingga model ini dapat digunakan untuk sistem-sistem yang besar.

Hierarchical State Transition Network

Hierarchical State Transition Network dari sebuah tool drawing lengkap

Harels State Charts

Harels State Charts dapat digolongkan sebagai kelompok STN. Chart ini dibangun untuk menspesifikasikan secara visual sistem reaktif yang kompleks dan mampu mengakomodasi masalah seperti concurrecy dan escape. Chart ini memiliki karakter struktur hirarki dalam satu diagram tunggal yang membagi elemen mana yang merepresentasikan state alternatif dan yang merepresentasikan aktifitas concurrent (dijalankan bersama-sama).

Flowchart

Notasi diagramatik yang paling sering digunakan

Flow Chart digunakan untuk mendeskripsikan dialog yang sederhana dan memiliki kelebihan dalam hal kesederhanaan dan mudah dimengerti.

Flowchart

Kotak pada flowchart merepresentasikan proses atau keputusan sehingga tidak ekuivalen dengan state pada STN. Flowchart menggunakan berbagai jenis kotak untuk merepresentasikan berbagai jenis aktifitas yang berbeda, namun lebih merefleksikan sudut pandang programmer dibandingkan user. Perbedaan utama antara menggunakan flowchart untuk perancangan dialog dengan pemrograman adalah tingkat detail pada sisi program. Misalkan, jika pembacaan record karyawan melibatkan pencarian secara sequential pada file untuk mencari file tertentu, maka flowchart program akan menyertakan loop pencarian tersebut. Sedangkan pada flowchart dialog, sama sekali tidak akan dicantumkan loop semacam itu.

JSD Diagrams

Jackson Structured Design biasa digunakan untuk berbagai aspek dari analisis tugas dan notasi dialog. Kelas dari dialog yang dapat direpresentasikan dengan JSD adalah sederhana, terbatas, dan merupakan sistem informasi yang berbasis menu (menu-driven information systems). JSD Diagrams untuk sistem kepegawaian

Action Properties

Karakteristik deterministik memperbolehkan kedua state berjalan atau state yang akan dijalankan adalah state dengan prioritas yang lebih tinggi. Karakteristik konsistensi (consistency) mengharapkan aksi yang sama pada situasi yang berbeda akan melakukan hal yang sama pula. Contoh : user terbiasa dengan tombol tab yang menyebabkan kursor bergeser ke kanan sebanyak 8 karakter. Pada penggunaan dialog box, tombol tab menyebabkan kursor bergerak ke dialog box berikutnya. Karakteristik deterministik memperbolehkan kedua state berjalan atau state yang akan dijalankan adalah state dengan prioritas yang lebih tinggi. Karakteristik konsistensi (consistency) mengharapkan aksi yang sama pada situasi yang berbeda akan melakukan hal yang sama pula. Contoh : user terbiasa dengan tombol tab yang menyebabkan kursor bergeser ke kanan sebanyak 8 karakter. Pada penggunaan dialog box, tombol tab menyebabkan kursor bergerak ke dialog box berikutnya.

Pesan kesalahan

Hal-hal yang perlu dihindari pada pembentukan pesan kesalahan :

1. Tekanan (suara atau pesan) keras yang menyalahkan user 2. Pesan terlalu generik
(contoh : WHAT?, SYNTAX ERROR)

3. Pesan yang sulit dimengerti (contoh : FAC RJCT 004004400400)

Contoh
SYNTAX ERROR (buruk) UNMATCHED LEFT PARENTHESIS (lebih baik) (Tidak sesuai dengan aturan penulisan) ILLEGAL ENTRY (buruk) TYPE FIRST LETTER : Send, Read, or Drop (lebih baik) (Ketikan huruf pertama : Send, Read or Drop) INVALID DATA (buruk) DAYS RANGE FROM 1 TO 31 (lebih baik) (Beri range data misal hari dari 1 31) BAD FILE NAME (buruk) FILES NAMES MUST BEGIN WITH A LETTER (lebih baik) (Nama file harus mulai dari huruf) Buruk : DISASTROUS STRING OVERFLOW, JOB ABONDONED Baik : String space consummed. Revise program to use shorter strings or expand string space Buruk : UNDEFINED LABELS Baik : Define statement labels before use Buruk : ILLEGAL STA. WRN. Baik : RETURN statement cannot be used in a FUNCTION subprogram

1.

2. 3.
4. 5. 6.

7. 8. 9.

Tipe-tipe Kesalahan (Errors) Mistakes, aksi user yang diambil berdasar keputusan yang salah. Contoh : menggeser icon harddisk ke recycle bin. Slips, suatu kesalahan yang tidak disengaja. Capturer error, kesalahan karena terlalu sering atau kebiasaan. Contoh : pada vi editor dalam UNIX, mau save (W) tetapi (WQ) save dan quit. Description error, kesalahan dalam melakukan aksi pada objek yang salah. Contoh : klik X untuk menutup editor, tetapi yang di klik adalah X aplikasi. Data-driven error, kesalahan karena pengaruh data dari area edit. Contoh : menulis nama file dengan sesuatu yang terbaca di sekitar window, bukan nama yang diinginkan. Assosiative-activation error, kesalahan karena pengaruh data yang ada di dalam pikiran user saat itu. Contoh : mirip dengan data-driven error, tetapi ini dengan sesuatu yang ada di pikiran user saat itu. Loss-of-activation error, kesalahan karena lupa apa yang harus dilakukan. Contoh : lupa mau searching apa. Mode error, kesalahan akibat lupa ada di dunia mana. Contoh : mengetikkan suatu perintah padahal sedang berada di dalam ruang pengeditan teks Keliru, aksi salah diambil berdasarkan keputusan yang salah. Contoh : ingin mengubah ukuran gambar tetapi yang di lakukan adalah cropping.

Format fisik yang sesuai

Gunakan kombinasi huruf besar dan kecil. Pesan dengan huruf besar semua hanya digunakan untuk peringatan gawat.

Hindari pesan hanya dengan nomor kode. Jika perlu tampilkan kode di akhir pesan
Penempatan pesan : dekat sumber masalah, dibaris pada bagian bawah layar, sebagai pop-up window di tengah layar.

Peringatan dengan suara berguna tetapi dapat memalukan pemakai, pemakai harus dapat mengendalikannya.

Rancangan pesan yang efektif

Produk Sespesifik dan sepresisi mungkin Konstruktif : tunjukkan apa yang harus dilakukan Gunakan nada positif, jangan memarahi Gunakan kata yang berpusat ke pemakai Gunakan tatabahasa, istilah dan singkatan yang konsisten Pertimbangkan pesan yang bertingkat Gunakan format visual dan penempatan yang konsisten Proses Bentuk gugus kendali kualitas pesan Sertakan pesan dalam tahap perancangan Simpan semua pesan dalam sebuah file Bahas pesan dalam pengembangan Usahakan untuk menghapus beberapa kebutuhan pesan Laksanakan uji penerimaan (acceptance test) Kumpulkan data frekuensi setiap pesan Kaji ulang dan perbaiki pesan dari waktu ke waktu

Rancangan Nonantropomorfik Antropomorfik adalah : sifat suatu barang yang memiliki sifat atau pribadi manusia Masalah yang muncul dengan instruksi antropomorfik, dan sekaligus alasan untuk menggunakan instruksi nonantropomorfik : Atribut bebas dapat menipu, membingungkan, dan menyesatkan pemakai Penting untuk membedakan manusia dengan komputer Meskipun antarmuka antropomorfik bisa menarik beberapa orang, namun dapat mengganggu orang lain Penelitian menunjukkan bahwa instruksi nonantropomorfik lebih baik

Alternatif bagi perancang software adalah memfokuskan pada : pemakai dan menggunakan kata ganti orang ketiga tunggal tidak menggunakan kata ganti sama sekali contoh :

Buruk : I will begin the lesson when you press RETURN

Lebih baik : You can begin the lesson by pressing RETURN

Baik : To begin the lesson, press RETURN

Rancangan Nonantropomorfik

Hindari menampilkan komputer sebagai orang pribadi (manusia) Gunakan tokoh yang sesuai (manusia atau karakter animasi) dalam pengenalan atau sebagai pemandu Hati hati dalam merancang wajah manusia atau tokoh kartun dengan komputer Gunakan karakter kartun di games atau software anak-anak jika diperlukan Rancang antarmuka yang dapat dimengerti, dapat diramalkan, dan dapat dikendalikan Gunakan sudut pandang pemakai dalam orientasi dan keadaan selesai Jangan gunakan I ketika komputer menanggapi aksi pemakai Gunakan You hanya untuk memandu pemakai dan menyebutkan fakta-fakta

Rancangan tampilan (display)

Pada setiap tahap dalam sekuen transaksi, pastikan bahwa data apapun yang dibutuhkan pemakai tersedia pada tampilan Tayangkan data kepada pemakai dalam bentuk yang langsung dapat digunakan, jangan mengharuskan pemakai mengkonversikan data yang ditampilkan Untuk setiap jenis tampilan data, pertahankan format yang konsisten dari satu tampilan ke tampilan lainnya. Gunakan kalimat yang pendek dan sederhana Gunakan pernyataan yang positif, bukan negatif Gunakan prinsip logis dalam pengurutan list, jika tidak ada aturan khusus, urutkan secara alfabetis

 Pastikan label cukup dekat dengan data field yang berhubungan tetapi harus dipisahkan dengan paling sedikit satu spasi Buat kolom data alfabetis rata kiri agar mudah ditelusuri Pada tampilan banyak halaman,berikan label pada setiap halaman untuk menunjukkan hubungan dengan halaman lainnya. Awali setiap tampilan dengan judul atau header yang menggambarkan secara singkat isi atau tujuan tampilan, sisakan paling sedikit satu baris kosong antara judul dan isi tampilan. Untuk kode ukuran, simbol yang lebih besar tingginya paling sedikit 1,5 kali tinggi simbol berikut yang lebih kecil Gunakan kode warna untuk aplikasi sehingga pemakai dapat membedakan dengan cepat berbagai kategori data, khususnya ketika item data terpencar pada tampilan Jika menggunakan blink, kecepatan kedip harus antara 2 5 herts dengan minimum duty cycle 50 persen Untuk tabel dasar yang melebihi kapasitas display pastikan pemakai dapat melihat kepala kolom dan label baris di semua bagian Jika kebutuhan tampilan data berubah, sediakan cara bagi pemakai (administrator sistem) untuk melakukan perubahan yang diinginkan.

Warna

Warna dapat menarik bagi pemakai dan dapat meningkatkan kinerja tetapi dapat disalahgunakan Warna dapat : Menyejukkan atau menyakiti mata Menambah aksen pada tampilan yang tidak menarik Memungkinkan pembedaan yang halus pada tampilan yang kompleks Menekankan organisasi logis informasi Menarik perhatian kepada peringatan Menimbulkan reaksi emosional yang kuat berupa sukacita, kegembiraan, ketakutan atau kemarahan

Pedoman memakai warna

Gunakan warna secara konservatif Batasi jumlah warna Kenali kekuatan warna sebagai teknik pengkodean Pastikan bahwa warna simbol mendukung tugas Tampilkan warna simbol dengan usaha pemakai yang minimal Tempatkan warna simbol dibawah kendali pemakai Rancang untuk monokrom dulu Gunakan warna untuk membantu pemformat Gunakan warna simbol yang konsisten Perhatikan ekspektasi umum tentang warna simbol Perhatikan masalah perpaduan warna Gunakan perubahan warna untuk menunjukkan perubahan status Gunakan warna pada tampilan grafis untuk kerapatan informasi yang lebih tinggi Waspada atas kehilangan resolusi pada tampilan warna

Model Kognitif

o MHP (Model Human Processor) o GOMS (Goals, Operators, Methods and Selections)
o CCT (Cognitive Complexity Theory) o KLM (Keystroke Level Model)

MHP (Model Human Processor)

Dari Card,Moran, dan Newell (1980an) adalah model yang menganggap manusia sebagai sistem pemrosesan informasi Komponen MHP: kumpulan memori dan pemrosesan bersama kumpulan Prinsip Operasi model diskrit dan berurutan setiap tahapan mempunyai karakteristik waktu (tambahkan waktu tiap tahapan untuk memperoleh total waktu kerja)

Persepsi o terdiri atas banyak sensor dan memori pendukung. o memori terpenting adalah pada penyimpanan visual dan audio image o menunda output sistem sensor ketika sedang dikodekan (simbolik)

MHP (Model Human Processor)

Kognitif Menerima kode-kode simbolik (informasi) dari penyimpanan sensor image pada memori kerjanya. Menggunakannya dengan informasi (yang telah tersimpan sebelumnya) pada long term memory untuk memutuskan aksi/respon. Motorik Masing-masing memiliki prosessor dan memori Isi memori kerja menyulut aksi yang tersimpan dalam long-term memory Menjalankan response yang sesuai

GOMS (Goals, Operators, Methods, Selection) Goal / Tujuan : status terakhir yang ingin dicapai, kemudian uraikan dalam sub tujuan. Operator : aksi pada tingkat paling rendah, terdiri atas tindakan dasar yang harus dilakukan user dalam menggunakan sistem (untuk menjalankan suatu kegiatan)
misal: press key, drag mouse, memindahkan pointer

Methods: urutan operator (prosedur) untuk menuntaskan suatu tujuan (satu atau lebih) contoh: Memilih kalimat gerakkan mouse ke awal kata, press mouse, tarik ke akhir kata, lepaskan mouse Contoh:
GOAL : CLOSE-WINDOW

[select GOAL : USE-MENU-METHOD MOVE-MOUSE-TO-FILE-MENU PULL-DOWN-FILE-MENU CLICK-OVER-CLOSE-OPTION GOAL : USE-CTRL-W-METHOD PRESS-CONTROL-W-KEYS]

GOMS (Goals, Operators, Methods, Selection) Selection Rules: merupakan pilihan terhadap metode yang ada. Secara umum bergantung kepada user dengan melihat kebutuhan, kondisi sistem dan detail tujuan. Contoh: dapat menghapus sebuah kata baik dengan cara ctrl-X ataupun melalui menu tertentu.

Rule 1: GunakanUSE-MENU-METHOD kecuali ada aturan lain Rule 2: Jika aplikasi adalah Game, gunakan CTRL-W-METHOD *GOAL: create a Word document * * GOAL: create new document *** choose new doc icon *** set font *** set font size *** type document text ** GOAL: save document *** SELECT save icon File then save from menu *** complete save dialogue box ** GOAL: print document *** SELECT print icon File then print from menu

Manfaat-manfaat goms

Analisis struktur tujuan GOMS digunakan untuk mengukur kinerja. Kedalaman tumpukan struktur tujuan digunakan untuk meng-estimasi kebutuhan memori jangka pendek. Pemilihan dapat diuji keakuratannya dengan jejak user dan perubahan respons. Mendeskripsikan bagaimana seorang user yang ahli melakukan pekerjaannya.

Cognitive complexity theory (cct)

Diperkenalkan oleh Kieras dan Polson.

Merupakan perluasan dari GOMS.

Mengandung banyak prediksi / kemungkinan.

Dua deskripsi paralel pada cct: 1. User goal : berhubungan dengan aturan produksi. aturannya berbentuk IF kondisi THEN aksi dan dipisahkan antara aturan untuk pemula dan yang sudah ahli.

2. System atau device : berhubungan dengan jaringan transisi tergeneralisasi yang sangat detail. Terdapat deskripsi yang luas dan jaringan transisinya mencakup semua model dialog.

cct

State (kondisi) adalah pernyataan tentang isi memori kerja. Jika kondisi bernilai benar, maka aturan produksi dijalankan.

Aksi dapat terdiri dari satu atau lebih aksi elementer yang mungkin mengubah memori kerja atau berupa aksi eksternal seperti keystroke. Masalah pada cct: Semakin detail deskripsinya, ukuran deskripsi dari satu bagian interface dapat menjadi sangat besar. Pemilihan notasi yang digunakan. Kapan akan menggunakan notasi tertentu yang menjadi suatu hal yang penting. Merupakan engineering tool (alat rekayasa) dengan pengukuran kemudahan untuk dipelajari (learnability) dan tingkat kesulitan (difficulty) secara garis besar, digabung dengan deskripsi detail perilaku user.

KLM (Keystroke Level Model)

KLM ditujukan untuk suatu unit tugas dalam interaksi, misalnya, eksekusi dari beberapa perintah sederhana yang tidak lebih dari 20 detik. Contohnya adalah perintah search and replace, atau mengubah jenis huruf (font) dari suatu kata. KLM mengasumsikan bahwa suatu tugas yang kompleks harus sudah di pecah-pecah menjadi tugas yang lebih sederhana (seperti dalam GOMS) sebelum user berupaya untuk mengekspresikannya dalam suatu model.

Model KLM

K keystroke, berupa penekanan tombol keyboard, termasuk tombol shift dan tombol-tombol lainnya. B berupa penekanan tombol mouse (mouse button) P pointing, menggerakkan mouse (atau device lain) ke suatu target lokasi H homing, perpindahan tangan dari mouse dan keyboard D drawing, menggambar garis dengan menggunakan mouse M mental, persiapan pemikiran untuk menyelesaikan suatu aksi fisik R system response, yang bisa diabaikan jika user tidak perlu menunggu penyelesaian dari suatu tugas, seperti dalam mengcopy satu karakter.

Waktu Eksekusi

Edit Karakter Move hand to mouse position mouse after bad character return to keyboard delete character type correction reposition insertion point
Total waktu TEXECUTE

H[mouse] PB[LEFT] H[keyboard] MK[DELETE] K[char] H [mouse] MPB[LEFT]

= TK + TB + TP + TH + TD + TM + T R = 2tK + 2tB + tP + 3tH + 0 + 2tM + 0

Mengapa evaluasi dibutuhkan ?

Desainer tidak dapat berasumsi bahwa orang lain seperti dirinya, dan mengikuti design guidlines menjamin bahwa karyanya pasti bagus. Evaluasi dibutuhkan untuk memeriksa apakah user dapat menggunakan produk tersebut dan menyukainya.

Evaluasi kepuasan penggunaan terhadap sebuah produk dapat dilakukan menggunakan kuesioner dan atau interview.
Kapan evaluasi dilakukan ?

Evaluasi dapat dilakukan pada : Selama proses pembuatan produk tersebut supaya selalu sama dengan yang diminta atau dibutuhkan oleh user. Proses ini biasa disebut formative evaluations. Saat produk tersebut telah jadi yaitu melalui prototype. Saat produk dipasarkan, melalui update version. Evaluasi produk dapat dilakukan melalui riset pasar, baik melalui perorangan atau sekelompok user.

Tujuan Evaluasi

Ada 3 tujuan utama dari evaluasi Melihat seberapa jauh sistem berfungsi Melihat efek interface dari pengguna Mengidentifikasi problem khusus yang terjadi pada sistem. Paradigma Evaluasi Quick and dirty evaluatuion Usability testing (pengujian usability)

Field studies (studi lapangan)

Predictive evaluation (evaluasi prediktif)

Paradigma Evaluasi Quick and dirty & Usability testing (pengujian usability)

Quick and dirty Adalah umpan balik berupa keinginan dan yang disukai dari user atau konsultan yang disampaikan secara informal kepada desainer tentang produk yang dibuatnya. Evaluasi ini bisa dilakukan pada semua tahapan pembuatan produk, dimana penekanannya pada masukan yang cepat dan sesingkat mungkin. Usability testing Evaluasi ini cukup domain digunakan pada tahun 1980-an Melibatkan pengukuran kinerja user dalam mempersiapkan tugasnya secara hati-hati, dari proses inilah maka dibuatkan desain sistemnya. Kinerja user diukur dari jumlah kesalahan yang dilakukan dan waktu yang digunakan untuk menyelesaikan tugas. Cara yang paling umum digunakan adalah dengan melihat secara langsung dan merekam ke video. Menggunakan kuesioner dan wawancara kepada user tentang kepuasan terhadap sistem. Dilakukan di dalam laboratorium, dengan memberi treatment kepada user, atau tanpa treatment.

Paradigma Evaluasi Field studies (studi lapangan)

Dilakukan di lingkungan dimana user bekerja, hal ini bertujuan untuk meningkatkan pemahaman tentang kerja user secara alami dan bagaimana teknologi tersebut berdampak padanya Evaluasi ini dapat digunakan untuk : Membantu mengidentifikasi kesempatan sebuah teknologi baru Menentukan kebutuhan-kebutuhan untuk melakukan desain Memfasilitasi pengenalan sebuah teknologi Evaluasi teknologi

Teknik yang digunakan : Interview Observasi (pengamatan) Partisipatory (user yang dilibatkan dalam pembuatan desain) Ethnography (penilaian berdasar budaya)

Paradigma Evaluasi Predictive evaluation (evaluasi prediktif)

Didasarkan pada pengalaman seorang ahli dalam menghadapi user, dan biasanya hal ini dijadikan patokan untuk memprediksi masalah-masalah penggunaan sebuah produk. Keuntungan evaluasi ini :
User yang diinginkan tidak perlu dihadirkan. Proses pembuatannya relatif cepat, murah, dan cukup disukai oleh perusahaan.

Teknik-teknik evaluasi

Observing users Asking users their opinions Asking expert their opinions Testing users performance Modeling users task performance to predict efficacy of user

Skala Likert Merupakan skala yang cukup banyak digunakan untuk melakukan evaluasi Ukuran skala mulai dari 4 sampai 7 Ukuran 4 (1=sangat buruk, 2= buruk, 3=bagus, 4=sangat bagus) Ukuran 5 (1=sangat buruk, 2= buruk, 3=netral, 4=bagus, 5=sangat bagus) Ukuran 7 (1=sangat buruk, 2= buruk, 3=agak buruk, 4=netral, 5=agak bagus, 6=bagus, 7=sangat bagus) Pada umumnya penelitian menggunakan 5 skala.

CSCW(Computer Supported Cooperative Work) Mengklasifikasikan groupware dengan: Ketika (when) partisipan bekerja , pada waktu yang sama atau tidak Dimana (where) para partisipan bekerja , di tempat yang sama atau tidak Nama untuk sumbu matrix: time (waktu): synchronous/asynchronous place (tempat): co-located/remote
same place same time different time different place

hypertext, multimedia and the world-wide web

hypertext

hypertext systems + additional media

illustrations, photographs, video and sound

links/hotspots may be in media

areas of pictures times and locations in video

also called multimedia

but term also used for simple audio/video

animation (ctd) for education and training for data visualisation

let students see things happen as well as being interesting and entertaining images in their own right abrupt and smooth changes in multi-dimensional data visualised using animated, coloured surfaces complex molecules and their interactions more easily understood when they are rotated and viewed on the screen wizards and help

for animated characters

adding motion to images

for things that change in time

digital faces seconds tick past or warp into the next analogue face hands sweep around the clock face live displays: e.g. current system load flashing carat at text entry location busy cursors (hour-glass, clock, spinning disc) progress bars

for showing status and progress

video and audio

now easy to author

tools to edit sound & video and burn CDs & DVDs

easy to embed in web pages

standard formats (QuickTime, MP3)

still big but getting manageable

memory OK hand held MP3 players, TiVo etc. but download time needs care tell users how big!

very linear
hard to add links often best as small clips or background

ISSUE formats
raw sound samples huge used for mixing and editing MIDI
just which notes played and when

MP3
uses psychoacoustics - how the ear hears

issues
annoying if unwanted even more annoying for others!

web technology and issues

protocols and browsers web servers and clients networking

the web protocols and standard

HTTP to carry information over the internet HTML, XML and graphics formats for content browsers to view the results plus plug-ins initially research (CERN - high energy physics) now corporate, government, commerce and entertainment, advertising, community lost in hyperspace, information overload different machines far across the world pages stored on servers browsers (the clients) ask for pages sent to and fro across the internet

changing use

challenges

the web is distributed

network issues - timing QoS (quality of service)

bandwidth

latency
jitter

how much information per second how long it takes (delay) how consistent is the delay some messages are lost need to be resent increases jitter need to handshake to start

reliability

connection set-up

design implications

bandwidth think about download time

e.g. 100K image: 1 sec broadband, 18 secs 56K modem

save graphics in appropriate format and size reuse the same graphics
in the browser cache after first load

connection time
one big file may be better then several small ones
beware of fit on one screen rule scrolling is fast! think before breaking big graphic into bits

latency think about feedback

feedback and feedthrough

network delays too slow! so feedback think: immediate local feedback something has happened slower semantic feedback what has happened feedthrough between users: hard cannot avoid network

WAP - web on the phone

movies and sound

problems
size and download like graphics but worse! may need special plug-ins audio not so bad, some compact formats (MIDI)

streaming video
play while downloading can be used for broadcast radio or TV

dynamic web content

what happens where

architectural design is about what happens where this affects:

feedback
seeing results of ones own actions

feedthrough
seeing effects of other peoples actions
also affects complexity of implementation and hence maintenance

technology and security local interaction, search remote & batch generation dynamic content

technology and security

Tech: where does it happen

client server
applets , Flash, JavaScript & DHTML
CGI scripts, Java servlets , JSP, ASP, PHP, etc, authors machine, database server, proxy socio-techncal solutions

another machine

people

Security for computation problem

code and data at same place!

data - needs to be secure web-server - least secure machine client machine even worse and networks!

local interaction (at client)

fixed content use Java applets, Flash, JavaScript+DHTML pros: rapid feedback cons: only local, no feedthrough after interaction what does back do ??

Search create indices off-line fast lookup when needed

see http://www.hcibook.com/e3/search/

automatic generation
dilemma;
hand crafting leads to web stasis!! so need database driven sites

early days ad hoc, now many tools options:

client-end applet or Flash access remote DB server-end CGI driven by web forms (limited UI)

hybrid solutions
CGI generated pages can contain JavaScript etc. JavaScript can write web pages on the fly!

Java applet & JDBC pros: interactive DB access cons: bandwidth, security CGI script accesses database pros: up-to-date, use existing DB cons: not proxy/index friendly

Batch generation of web pages pros: indexable, secure cons: slower turnaround

dynamic content

really active web pages

data updated as well as presented on the web

presentation
any of the previous means: CGI, applet-JDBC

update
web form/interface -> server script -> update db e.g. book theatre seats

issues
authentication and security multiple transactions due to back button right pace/control do we want human in the loop?