Transcript User interface design

Rekabentuk Antaramuka
Pengguna

Objektif bagi bab ini adalah untuk
memperkenalkan beberapa aspek
dalam rekabentuk antaramuka
pengguna yang penting untuk
jurutera perisian.
Topik-topik yang dibincangkan

Pengenalan:
- antaramuka pengguna
- GUI
- proses merekabentuk antaramuka





Prinsip rekabentuk antaramuka
pengguna
Gaya Interaksi
Persembahan maklumat
Sokongan pengguna
Penilaian antaramuka
Antaramuka Pengguna


“Why can’t I view the customer’s past ordering
history when I entering a new order?
(here the user cannot access all the information
needed)
“Sometimes I don’t know the code of a new product
off the top of my head. Is there a key I can hit to see
the codes on the screen rather than having to refer to
my codes printout? I tried Shift-C for Codes but it
didn’t work!”
(the user expects the system to behave in certain
ways)
Antaramuka Pengguna

“You know the screen where I can page back and
forth through deliveries; well, sometimes the
deliveries I want to see are split across two pages. Is
there a way where I can move one up at a time,
rather than page forward, so that I eventually have
all the ones I need on the one screen?
(the user cannot access information in small chunks)
Antaramuka Pengguna

Berikut adalah jawapan yang biasa diberikan oleh
jurutera perisian ataupun juruanalisa sistem : “you
didn’t tell us that”.


Masalah-masalah yang ditunjukkan di atas adalah
akibat dari rekabentuk antaramuka yang tidak
efektif/baik dan bukannya yang disebabkan oleh
spesifikasi keperluan.
Kurangnya pemahaman pada juruanalisa dan jurutera
perisian mengenai pengguna dan bagaimana
pengguna melaksanakan tugasnya.
Antaramuka Pengguna
Contoh-contoh lain bagi antaramuka yang
tidak baik:
‘when an application doesn’t work properly or
crashes’
‘when a system doesn’t do what the user wants
it to do’
‘when a user’s expectations are not met’
‘when a system does not provide sufficient
information to let user know what to do’
‘when error messages pop-up that are vague or
condemning’ , etc.

Jurang di antara pengguna dan
perisian
• Jurang berlaku apabila pengguna tidak merasa selesa atau
efektif menggunakan sesuatu sistem.
Antaramuka Pengguna


Antaramuka pengguna adalah pusat utama
bagi hubungan di antara pengguna dan
sistem komputer. Ianya adalah bahagian
sistem di mana pengguna nampak, dengar,
sentuh dan berhubung dengannya.
Pengguna berinteraksi dengan sistem
komputer bagi melaksanakan tugas-tugas
mereka.
Antaramuka Pengguna


Rekabentuk antaramuka pengguna yang
baik adalah kritikal bagi kejayaan
sesuatu sistem perisian.
sebab..
Pengguna umumnya menilai sesuatu
sistem perisian itu mengikut
antaramukanya berbanding dengan
kefungsiannya.
Antaramuka Pengguna


Masalah yang timbul dari rekabentuk yang tidak baik
termasuklah:
- mengurangkan kadar produktiviti pengguna
- meningkatkan kadar masa mempelajari sistem
- meningkatkan kadar berlakunya ralat
- dan sebagainya
Kesemua masalah di atas akan menyebabkan kepada
‘user frustration’ dan ‘user rejection’ bagi sistem yang
telah dibangunkan.
Antaramuka Pengguna


Merekabentuk antaramuka pengguna
bagi sesuatu sistem adalah profesion
seorang perekabentuk antaramuka
(interface designer).
Mengapakah di sesetengah syarikat
(umumnya di Malaysia) tanggungjawab
ini juga diberikan kepada jurutera
perisian?
GUI


Kebanyakkan sistem pada hari ini
menggunakan antaramuka pengguna
bergrafik (GUI). Ianya mudah dipelajari
dan digunakan walaupun bagi
pengguna yang kurang biasa dengan
sistem komputer.
Ciri-Ciri GUI – seperti di jadual
Ciri-Ciri GUI (WIMP)
Characteri stic
Wi ndows
Icons
Menus
P oi nting
Graphi cs
Des cripti on
Mult iple windows allow different informat ion to be
dis pl ayed s imult aneousl y on t he user’ s screen.
Icons different types of information.
On some syst ems ,
icons represent fi les; on ot hers , i cons
represent
process es .
Commands are selected from a menu rather t han typed
in a command l anguage.
A pointing device such as a mouse is
used for s el ecti ng
choices from a menu or indi cati ng i tems of i nteresint a
window.
Graphi cal elements can be mi xed with t ext
on the s ame
dis pl ay.
Proses rekabentuk antaramuka
pengguna
Analyse and
understand user
activities
Produce paperbased design
prototype
Design
prototype
Evaluate design
with end-users
Produce
dynamic design
prototype
Executable
prototype
Evaluate design
with end-users
Implement
final user
interface
Proses rekabentuk antaramuka
pengguna

(1)
(2)
Tiga perkara utama yang dapat diperhatikan
dari gambarajah proses tesebut:
Analisis dan pemahaman mengenai
pengguna dan aktivitinya
Rekabentuk antramuka pengguna
melibatkan pembangunan beberapa
prototaip, bermula dengan prototaip
berasaskan-kertas (paper prototyping)
seterusnya prototaip berasaskan-skrin yang
mensimulasikan interaksi pengguna
Proses rekabentuk antaramuka
pengguna
(3) Kaedah berasaskan-pengguna (usercentered approach) yang mana
pengguna adalah terlibat secara aktif
dalam proses rekabentuk.
Prinsip rekabentuk
antaramuka pengguna

Prinsip antaramuka pengguna adalah
dinyatakan secara umum. Prinsip
umumnya adalah berdasarkan kepada
keupayaan manusia dari segi mental
dan fizikal (physical and mental
capabilities). Dan mengambilkira
bahawa manusia membuat kesilapan.
Prinsip rekabentuk
antaramuka pengguna


Terdapat banyak jenis prinsip
antaramuka yang telah dihasilkan. Satu
contoh prinsip antaramuka adalah
seperti yang dinyatakan dalam jadual.
Prinsip antaramuka bagi web juga telah
dihasilkan. Prinsip yang biasa digunakan
adalah ‘Top ten mistakes in web design’
oleh Jakob Nielsen.
User interface design
principles
Principle
User familiarity
Consistency
Minimal surprise
Recoverability
User guidance
User diversity
Description
The interfa ce should use terms and concepts which are
drawn fromth e experience ofth e people who will
make most use ofth e system.
The interfa ce should be consistent in that, wherever
possible, comparable operations should be activated in
the same way.
Users should never be surprised by the behaviour of a
system.
The interfa ce should include mechanisms to allow
users to recover from errors.
The interfa ce should provide meaningful feedback
when errors occur and provide context-sensitive user
help facilities.
The interfa ce should provide appropriate interaction
facilities for different types of system us er.
Prinsip Rekabentuk

Kebiasaan pengguna (User familiarity)


Antaramuka perlu berdasarkan kepada istilah dan
konsep yang biasa kepada pengguna bagi sistem
tersebut dan bukannya mengikut apa yang biasa
kepada perekabentuk (designer)
Kekonsistenan (Consistency)

Kekonsistenan dapat mengurangkan masa
mempelajari sistem. Arahan, menu dan
sebagainya perlu mempunyai format yang sama
bagi keseluruhan sistem.
Prinsip Rekabentuk

‘Minimal surprise’

Perekabentuk perlu memastikan arahan
yang sama (comparable actions)
mempunyai kesan/perlakuan yang sama.
Design principles

Kebolehpulihan (Recoverability)


Antaramuka pengguna perlu mengandungai
kemudahan-kemudahan yang dapat membantu
pengguna pulih dari kesilapan yang dibuat.
Contohnya kemudahan ‘undo’ dan ‘confirmation of
destructive actions’.
Panduan pengguna (User guidance)

Manual atas-talian, kemudahan bantuan dan
sebagainya perlu disediakan untuk kegunaan
pengguna.
Design principles

Kepelbagaian pengguna (User diversity)

Kemudahan interaksi bagi kegunaan
pelbagai pengguna sistem tersebut perlu
disediakan. Contohnya, ‘first-time user’,
‘more experienced user’ berkehendakkan
kepada kemudahan interaksi yang
berlainan.
Interaksi pengguna-sistem

Dua isu berkaitan dengan interaksi
pengguna-sistem:



Bagaimanakah maklumat daripada
pengguna dapat diberikan kepada sistem
komputer?
Bagaimanakah maklumat daripada sistem
komputer dapat dipersembahkan kepada
pengguna?
Gaya interaksi adalah diperlukan.
Gaya interaksi (Shneiderman
1998)





Manipulasi terus (Direct manipulation)
Pemilihan menu (Menu selection)
Pengisian borang (Form fill-in)
Bahasa arahan (Command language)
Bahasa tabii (Natural language)
Kebaikan dan keburukan bagi setiap gaya
interaksi adalah seperti di jadual.
Interaction
style
Direct
manipulatio
n
Main
advantages
Fast and intuitive
interaction
Easy to learn
Menu
selection
Avoids user
error
Little typing
required
Form fill-in
Simple data
entry
Easy to learn
Powerful and
flexible
Command
language
Natural
language
Accessible to
casual users
Easily extended
Main
disadvan tages
May be hard to
implement
Only suitable where
there is a visual
metaphor for tasks
and objects
Slow for
experienced users
Can become
complex if many
menu opt ions
Takes up a lot of
screen space
Hard to learn
Poor error
management
Requires more
typing
Natural language
understanding
systems are
unreliable
Application
e xam ples
Video games
CAD systems
Most generalpurpose systems
Stock control,
Personal loan
processing
Operating systems,
Library
information
retrieval systems
Timetable systems
WWW
information
retrieval systems
Advantages and
disadvantages
Gaya Interaksi


Manipulasi Terus: pengguna berinteraksi
terus dengan objek di skrin. e.g. to
delete a file, a user drag it to a
trashcan.
Pemilihan menu: pengguna memilih
arahan daripada senarai menu.
e.g. to delete a file, the user selects the
file, then selects the delete command
Gaya Interaksi

Pengisian borang: pengguna mengisi medanmedan di borang. Sesetengah medan
mempunyai menu pilihan. Borang mempunyai
‘action button’ yang mana akan
melaksanakan sesuatu arahan.
e.g. to delete a file, it would involve filling in
the name of the file, then pressing a delete
button.
Gaya Interaksi

Bahasa Arahan: pengguna memberikan
arahan dan parameter yang berkaitan
bagi sistem melaksanakan sesuatu
tugas.
e.g. to delete a file, the user issues a
delete command with the filename as a
parameter
Gaya Interaksi

Bahasa Tabii: pengguna menyatakan
arahan kepada sistem dengan
menggunakan bahasa biasa (bahasa
malaysia, inggeris, cina, dan
sebagainya).
e.g. To delete a file, the user types
‘delete the file named xxx’
Interaksi Pengisian Borang
NE W BOOK
Title
ISBN
Author
Price
Publisher
Publication
date
Edition
Number of
copies
Classification
Date of
purchase
Loan
status
Order
status
Interaksi Pemilihan Menu
Interaksi Soal-Jawab
Interaksi Bahasa Tabii
Gaya Interaksi

Sesuatu sistem itu boleh menggunakan
beberapa gaya interaksi.
e.g. Microsoft windows supports direct
manipulation of the iconic representation of
files and directories, menu-based command
selection, for some commands such as
configuration commands, the user must fill-in
a special purpose form that is presented to
them.
Antaramuka pengguna berbilang
Gr aphical user
interface
Command
language
interface
GUI
manager
Command
language
interpreter
Operating system
Paparan Maklumat


Maklumat boleh dipaparkan secara terus (e.g.
text in a word processor) ataupun ditukar ke
sesuatu bentuk paparan (e.g. in some
graphical form)
Dengan mengasingkan sistem paparan
dengan data, maklumat pada skrin pengguna
boleh diubah ke bentuk paparan yang
dikehendaki (seperti gambarajah)
Paparan Maklumat
Information to
be displayed
Presentation
software
Display
Paparan Maklumat

Maklumat Statik


Maklumat Dinamik


Maklumat yang tidak berubah semasa sesi
interaksi.
Maklumat yang berubah semasa sesi interaksi dan
perubahan tersebut perlu dipaparkan kepada
pengguna sistem
Teks mengambil ruang skrin yang kurang,
tetapi tidak memberikan gambaran mengenai
maklumat dengan sekali pandang (at a
glance).
Maklumat yang sama boleh
dipaparkan secara teks atau grafik
Jan
2842
Feb
Mar
2851 3164
April
2789
May
1273
June
2835
May
June
4000
3000
2000
1000
0
Jan
Feb
Mar
April
Paparan maklumat numerik
yang dinamik
1
4
0
2
10
3
Dial with needle
Pie chart
Thermometer
Horizontal bar
20
Paparan maklumat bergrafik
menunjukkan nilai relatif
Pressure
0
100
200
300
Temper atu re
400
0
25
50
75
100
‘Textual Highlighting’
!
The filename you have chosen h as been
used. Please choose an other name
Ch. 16 User interface design
OK
Cancel
Faktor paparan maklumat



Adakah pengguna mahukan maklumat yang
terperinci ataupun hubungan di antara nilainilai data yang berbeza?
Berapa cepat nilai maklumat berubah?
Adakah perubahan perlu dimaklumkan serta
merta?
Adakah pengguna perlu mengambil sebarang
tindakan ke atas perubahan tersebut?
Faktor paparan maklumat


Adakah pengguna perlu berinteraksi
dengan maklumat yang dipaparkan
menggunakan antaramuka manipulasi
terus?
Adakah maklumat yang perlu
dipaparkan dalam bentuk teks ataupun
numerik? Adakah nilai relatif bagi
maklumat penting?
Paparan maklumat


Penvisualan maklumat (information
visualization) adalah teknik bagi
memaparkan maklumat yang banyak
(large amounts of information)
Penvisualan dapat menunjukkan
hubungan entiti dengan tren di dalam
data
Penvisualan Data

Contoh penvisualan data:




Weather information collected from a number of
sources
The state of a telephone network as a linked set
of nodes
Chemical plant visualised by showing pressures
and temperatures in a linked set of tanks and
pipes
A model of a molecule displayed in 3 dimensions
Paparan Warna


Warna dapat digunakan dalam
beberapa cara pada antaramuka sistem.
Warna juga apabila disalahgunakan
boleh mengakibatkan antaramuka yang
tidak baik – ‘visually unattractive’.
Dua kesalahan biasa dalam penggunaan
warna pada antaramuka adalah:
Paparan Warna
(1) Menghubungkan maksud dengan warna
contohnya merah menunjukkan ‘panas’.
Memberi kesan kepada mereka yang mempunyai
masalah ‘colour blind’.
Interpretasi maksud yang berlainan. Kepada
pemandu lori merah bermaksud ‘bahaya’.
(2) Penggunan warna yang berlebihan pada paparan
maklumat
Garispanduan penggunaan warna



“Limit the number of colours used and be
conservative how these are used”
gunakan di antara 3 – 4 warna pada satu skrin.
“Use colour change to show a change in system
status’ (colour highlighting)
apabila warna berubah, ia menandakan sesuatu
peristiwa telah berlaku. Penting bagi sistem yang
kompleks dimana beratus entiti yang berbeza perlu
dipaparkan.
“Use colour coding to support the task which users
are trying to perform”
e.g. Microsoft word, warna merah menandakan
kesilapan ejaan
Garispanduan penggunaan
warna


“Use colour coding in a thoughtful and consistent
way”
sekiranya satu bahagian sistem menggunakan warna
merah untuk menggambarkan mesej ralat, maka
dibahagian-bahagian lain juga perlu menggunakan
warna yang sama bagi mesej ralat
“Be careful about colour pairings”
masalah ‘eyestrain’ adalah akibat utama dari
pasangan warna yang tidak baik. Pasangan warna
yang tidak tepat juga boleh menyebabkan maklumat
sukar dibaca.
Peranti input dan output

Contoh-contoh bagi peranti input:
- text entry: keyboard, speech and
handwriting
- pointing: mouse, trackball, joystick,
touchscreen, light pen, digitizing tablet,
touch pad
- 3D interaction devices: dataglove, virtual
reality helmets, whole-body tracker
Peranti input dan output

Contoh-contoh bagi peranti output –
- display screen, printer, audio output,
scanner
Peranti input dan output



Peranti input dan output apakah yang akan anda
gunakan bagi aplikasi sistem di bawah:
Tourist information system?
Touchscreen.
Portable word processor?b
LCD screen – low power requirement
trackball or stylus for pointing
real keyboard
small, low-power bubble-jet printer
Sokongan pengguna

Sokongan pengguna termasuklah:
- mesej ralat
- bantuan atas-talian (online help)
- dokumentasi pengguna
Mesej Ralat


Mesej perlulah sopan, ringkas lagi
padat, konsisten dan membina (polite,
concise, consistent and constructive).
Dan bukannya yang berbentuk negatif
seperti menggunakan bunyi ‘beep’,
menggunakan istilah yang sukar
difahami oleh pengguna (systemoriented terms) dan sebagainya.
Faktor merekabentuk mesej ralat
Cont ext
Experience
Ski ll level
Style
Cul ture
The user guidance s ystem s hould be aware of what t heuser i s
doi ng and s hould adj us t the output mess age to the current
context .
As us ers become fami liar wi th a s ys tem they become i rritated
by long, ‘ meaningful ’ mess ages . However, beginners find it
difficul t t o unders tand s hort t erse s tat ement s of the probl em.
The user guidance s ystem s hould provi de bot
types
h of mess age
and allow t he user to control mes sage concisenes s.
Mess ages s hould be t ai lored the
to user’s s ki ll s as wel l as thei r
experience. Mes sages for the di fferent clas s esof user may be
express ed i n di fferent ways dependi ng the
on terminology which
is famil iar t o t he reader.
Mess agess hould be posi tive rather than negati ve. They s hould
use the acti ve rather t han the pass ive mode of address . They
s hould never be i ns ulti ng or try t o be funny.
Wherever pos s ible, the
des igner of mes sages shoul d be famili ar
wit h the culture of thecountry where the s ystem is s ol d. There
are di st inct cul tural differences bet ween Europe, Asi a and
America. A suit able mes s age for one cul ture
might be
unacceptable in another.
Jururawat telah tersilap
memasukkan nama pesakit
Please type thepatientname inthe bo
Bates ,J .
OK
Cancel
x thenc lic k on OK
Mesej ralat dipaparkan

Yang manakah di antara dua mesej ini
telah direkabentuk dengan baik?
System-oriented err or message
?
OK
User-oriented err or message
Error #27
Patient J . Bates is not registered
Invalid patient id entered
Clic kon P atientsf or a listof registeredpati ents
Click on Retry to re-input a pati ent name
Click on Help for more i nformation
Cancel
Patients
Help
Retr y
Cancel
Bantuan atas-talian


Dua jenis bantuan maklumat adalah:
1. ‘Help’ bermaksud ‘help I want information”
2. ‘Help’ bermaksud `I'm in trouble”. (iaitu
apabila pengguna mendapat mesej ralat dan
perlukan maklumat lanjut mengenai ralat
tersebut)
Kedua-dua keperluan ini perlu diambilkira
dalam rekabentuk sistem bantuan
Bantuan atas-talian


‘Multiple entry points to a help system’
adalah diperlukan supaya pengguna
dapat mencapai bantuan tersebut di
beberapa tempat – dicapai dari
bahagian atas hierarki mesej; dicapai
dari mesej ralat; dicapai disesuatu
bahagian aplikasi.
Lihat gambarajah
‘Entry points to a help system’
Top-level
entry
Entry from
application
Entry from error
message system
Help frame network
Dokumentasi pengguna


Dokumentasi pengguna memberikan
maklumat lebih lanjut berbanding dengan
bantuan atas-talian. Ianya bukanlah bahagian
yang mesti ada bagi rekabentuk antaramuka
pengguna tetapi elok diadakan kemudahan
ini.
Ianya boleh digunakan oleh beberapa
kategori pengguna (from inexperienced to
experienced users).
Jenis-jenis dokumen
pengguna
System
evaluators
Functional
description
Description of
services
System
administrators
Novice
users
Experienced
users
System
administrators
Installation
document
Introductory
manual
Reference
manual
Administrator’s
guide
How to install
the system
Getting
started
Facility
description
Operation and
maintenance
Jenis-jenis dokumen

Functional description


Introductory manual


Describes all system facilities in detail
System installation manual


Presents an informal introduction to the system
System reference manual


Brief description of what the system can do
Describes how to install the system
System administrator’s manual

Describes how to manage the system when it is in
use
Penilaian Antaramuka
Pengguna


Penilaian adalah satu proses bagi menilai
kebolehgunaan (usability) antaramuka
tersebut dan menyemak antaramuka tersebut
memenuhi keperluan pengguna.
Sebaiknya penilaian dilaksanakan berbanding
dengan atribut kebolehgunaan. Atribut
kebolehgunaan ditakrif sebelum penilaian
dibuat. Contoh atribut kebolehgunaan
diberikan di jadual.
Atribut Kebolehgunaan
Attri bute
Learn ab il it y
Speed o f o p erat io n
Rob u st ness
Reco verabi lit y
Ad ap tabi li ty
Des cripti on
Ho w lo ng d o es it t ak e a n ew us er
to
b ecome p ro du ctiv e with t he s ys tem?
Ho w wel l d o es th e sy st emresp o ns e match
th e u ser’s wo rk p ract ice?
Ho w to lerant is t he s ys tem of u ser error?
Ho w go o d is th es ys tem at reco v erin g fro m
u ser errors?
Ho w cl os el y is th e sy st em t ied to a s in gl e
mod el o f wo rk ?
Penilaian Antarmuka
Pengguna


‘Full scale evaluation’ iaitu yang
melibatkan makmal kebolehgunaan
(usability lab) dan pakar kognitif
adalah memakan belanja yang besar.
Simple evaluation techniques sesuai
bagi syarikat yang kecil.
Teknik penilaian mudah




Questionnaires for user feedback
Video recording of system use
Observation of users at work with the system,
looking at the facilities used and the errors
made.
The inclusion in the software of code which
collects information about the most-used
facilities and the most common errors.
Rekabentuk antaramuka
pengguna
Bab seterusnya adalah Pemprototaipan
Perisian (Software Prototyping).