INTERAKSI MANUSIA &

KOMPUTER
~MER~
TASK ANALYSIS
Materi Pertemuan 5
• Ada 3 komponen mendasar dalam “TASK
ANALYSIS” yaitu:
- Activities
- Artifacts
- Relations
• Tidak boleh hanya fokus pada sistem komputer
• Pelajari lingkungan kerja user sehingga dapat
melibatkan/menggunakan bantuan dengan
komputer.

Example: office env---papers, whiteboards, etc.

• Fokus pada perilaku yang dapat diamati.
• Apa praktek, metode, langkah, objek,… yang digunakan?
• Perhatikan user, apa yang mereka lakukan, bagaimana cara mereka
melakukannya.
• Tidak boleh hanya pada keadaan kognitif internal pengguna
• Cara mengumpulkan data:
- Dokumentasi
- Wawancara
- Pengamatan lapangan/Observasi
- Survei / kuesioner
- Merekam data secara otomatis / pelacakan
• Hasil Data:
- Narasi
- Daftar/list, garis besar, matriks
- Hierarki & Jaringan
- Flow chart
• Informasi tentang user
• Deskripsi tentang lingkungan user
– Dimana task akan dijalankan
• Tujuan utama dari task
– Apa hasil akhirnya?
• Yang diinginkan atau yang dibutuhkan user
• Documentasi
Sering kali berisi deskripsi tentang bagaimana tugas-
tugas yang harus dilakukan (bukan bagaimana tugas
tersebut saat ini sedang mereka lakukan)
Standar
Manual
Histories / Sejarah
Best Practices / Try & Error
• Deskripsi dari ahli
Ahli mendeskripsi bagaimana proses seharusnya
berjalan, bagaimana task harus dilakukan
Penemuan “Knowledge-based”
– Struktur harus efisien
Butuh latihan
– Tidak terstruktur
Tidak efisien
Tidak butuh latihan
– Setengah terstruktur
Lumayan seimbang
Seringkali ini yang tepat!
 SEMI-STRUCTURED
INTERVIEWS
• Tetapkan dulu data apa saja yang dibutuhkan

• Rencanakan tipe pertanyaan yg efektif, contoh

Bagaimana cara melakukan tugas X?
Kapan kamu kerjakan tugas X?
Dalam kondisi seperti apa harus melakukan tugas X?
Apa yang harus dilakukan sebelum melakukan X…?
Apa informasi yang dibutuhkan…?
Apa hasilnya jika melakukan…?
Apa hasilnya jika tidak melakukan…?
• Melihat langsung user melakukan pekerjaan
mereka
• Rekam dengan videotape, untuk dilihat kembali
nantinya
• Questionnaires
 Exploratory vs confirmatory
 Open-ended vs. categorical (exhaustive)
What do you need to perform..? (list)
Which of the following is most important to
perform…? (select)
 If you ask it, use it. If you won’t/can’t use it, don’t ask it.
• Think-aloud protocol
 Person talks about what they are doing, while they are
doing it (or just before or after)
 Observer can ask probe questions
 Why did you just do that?
• Note: Probe questions affect performance, as does
thinking aloud.
• Automatic tracking
– Keystroke/mouse click monitoring
– Timers
– Logs
– Physical location/movement trackers
Cell phones
Aware Home
• Lists, outlines, matrices
– Use expanding/collapsing outline tool
– Add detail progressively
– Know in advance how much detail is
enough
– Can add linked outlines for specific
subtasks
– Good for sequential tasks
– Does not support parallel tasks well
– Does not support branching well
– Describe tasks in sentences
– Often expanded version of list or outline
– More effective for communicating
general idea of task
– Not effective for details
– Not effective for branching tasks
– Not effective for parallel tasks
• Flow Chart of Task Steps
– Gabungkan Entity-relationship (network)
dengan sequential flow, branching, parallel tasks.
– Termasuk tindakan, keputusan, logika, oleh semua
bagian dari sistem
– Diabstraksi/disari
– Sempurna, mudah dipahami, tools yang baik
INTERACTION PARADIGM
Materi Pertemuan 6
 WHAT ARE PARADIGMS?
• Predominant theoretical frameworks or scientific
world views
• e.g., Aristotelian, Newtonian, Einsteinian
(relativistic) paradigms in physics.
 WHAT ARE PARADIGMS?

• Understanding HCI history is largely about

understanding a series of paradigm shifts
– Not all listed here are necessarily
“paradigm” shifts, but are at least
candidates.
– History will judge which are true shifts.
 WHY STUDY PARADIGMS?
• Concerns
– How can an interactive system be developed to
ensure its usability?
– How can the usability of an interactive system be
demonstrated or measured?

History of interactive system design provides

paradigms for usable designs
PARADIGMS OF INTERACTION

New computing technologies arrive, creating a new

perception of the human-computer relationship.

We can trace some of these shifts in the history of

interactive technologies.
 THE INITIAL PARADIGM

• Batch processing
 THE INITIAL PARADIGM
• Time-sharing
 THE INITIAL PARADIGM

• Networking
 THE INITIAL PARADIGM

• Microprocessor
 PERSONAL COMPUTING
• 1970s – Papert's LOGO language for simple graphics
programming by children
• A system is more powerful as it becomes easier to use
• Future of computing in small, powerful machines
dedicated to the individual
• Kay at Xerox PARC – the Dynabook as the ultimate
personal computer
 EXAMPLE PARADIGM SHIFTS
• Batch processing
• Timesharing
• Networking
• Microprocessor
• Graphical displays
 WINDOW SYSTEMS AND
THE WIMP INTERFACE

• humans can pursue more than one task

at a time
• windows used for dialogue partitioning, to
“change the topic”
• 1981 – Xerox Star first commercial
windowing system
• windows, icons, menus and pointers now
familiar interaction mechanisms
 METAPHOR
• Relating computing to other real-world
activity is effective teaching technique
– LOGO's turtle dragging its tail
– file management on an office desktop
– word processing as typing
– financial analysis on spreadsheets
– virtual reality – user inside the metaphor
• Problems
– some tasks do not fit into a given metaphor
– cultural bias
 DIRECT MANIPULATION
• 1982 – Shneiderman describes appeal of
graphically-based interaction
– visibility of objects
– incremental action and rapid feedback
– reversibility encourages exploration
– syntactic correctness of all actions
– replace language with action
• 1984 – Apple Macintosh
• The model-world metaphor
• What You See Is What You Get (WYSIWYG)
 LANGUAGE VERSUS ACTION

• actions do not always speak louder than

words!
• DM – interface replaces underlying system
• language paradigm
• interface as mediator
• interface acts as intelligent agent
• programming by example is both action and
language
 EXAMPLE PARADIGM SHIFTS
• Batch processing
• Timesharing
• Networking
• Microprocessor
• Graphical displays
• WWW
 HYPERTEXT
• 1945 – Vannevar Bush and the Memex
• key to success in managing explosion of information
• mid 1960s – Nelson describes hypertext as non-linear
browsing structure
• hypermedia and multimedia
• Nelson's Xanadu project still a dream today
 THE WORLD WIDE WEB
• Hypertext, as originally realized, was a closed system
• Simple, universal protocols (e.g. HTTP) and mark-up
languages (e.g. HTML) made publishing and accessing
easy
• Critical mass of users lead to a complete transformation
of our information economy
 (CSCW)
COMPUTER SUPPORTED
COOPERATIVE WORK
• CSCW removes bias of single user / single computer
system.
• Can no longer neglect the social aspects.
• Electronic mail is most prominent success.
 EXAMPLE PARADIGM SHIFTS
• Batch processing
• Timesharing
• Networking
• Microprocessor
• Graphical displays
• WWW
• Ubiquitous Computing
 EXAMPLE PARADIGM SHIFTS
• Batch processing
• Timesharing
• Networking
• Microprocessor
• Graphical displays
• WWW
• Ubiquitous Computing (Gadget, Google, Social Media)
USABILITY
Materi Pertemuan 7
 USABILITY?
• Usability is the degree to which something - software,
hardware or anything else - is easy to use and a good
fit for the people who use it.
• It is a quality or characteristic of a product.
• It is whether a product is efficient, effective and
satisfying for those who use it.
• And, it is a shorthand term for a process or approach
to creating those products, also called user-centered
design.
 DEFINITION OF USABILITY
• Two international standards define usability and human-
centered (or user-centered) design:

"[Usability refers to] the extent to which a product

can be used by specified users to achieve specified
goals with effectiveness, efficiency and satisfaction
in a specified context of use.”

Human-centered design is characterized by:

the active involvement of users and a clear
understanding of user and task requirements;
an appropriate allocation of function between
users and technology; the iteration of design
solutions; multi-disciplinary design
 CONCEPT OF USABILITY
• Usability is a quality attribute that assesses how easy a
given system is to use. The word "usability" also refers
to methods for improving ease-of-use during the
design process.
 WHY IS USABILITY IMPORTANT?

• On the Web, usability is a necessary condition for survival

• For intranets, usability is a matter of employee productivity
• For internal design projects, think of doubling usability as
cutting training budgets in half and doubling the number of
transactions employees perform per hour
• For external designs, think of doubling sales, doubling the
number of registered users or customer leads, or doubling
whatever other desired goal motivated your design project
 USABILITY GOALS

• Effective to use
• Efficient to use
• Safe to use
• Have good utility
• Easy to learn
• Easy to remember how to use
 EXAMPLE OF GOOD AND BAD
DESIGN
• Physical affordances:
How do the following physical objects afford?
Are they obvious?
AMBIGUOUS DOOR
DESIGNS

Good door
designs
 MAPPINGS
• Relationship between controls and their movements and
the results in the world
• Natural mappings take advantage of physical analogies
and cultural standards
• Why is this a poor mapping of control buttons?
 MAPPINGS
• Why is this a better mapping?

• The control buttons are mapped better onto the

sequence of actions of fast rewind, rewind, play and fast
forward.
 CONSTRAINTS
• Restricting the possible actions that can be
performed
• Helps prevent user from selecting incorrect
options
• Three main types (Norman, 1999)
– physical
– logical
– cultural
 PHYSICAL CONSTRAINTS
• Refer to the way physical objects restrict the movement
of things
– E.g. only one way you can insert a key into a lock
• How many ways can you insert a CD or DVD disk into a
computer?
• How physically constraining is this action?
• How does it differ from the insertion of a floppy disk into a
computer?
 LOGICAL OR AMBIGUOUS
DESIGN?
• Where do you plug the mouse?
• Where do you plug the
keyboard?
• Top or bottom connector?
• Do the color coded icons help?
 HOW TO DESIGN THEM MORE
LOGICALLY?
1. A provides direct adjacent
mapping between icon and
connector
2. B provides colour coding to
associate the connectors with
the labels
 CULTURAL CONSTRAINTS
• Learned arbitrary conventions like red triangles
for warning.

• Can be universal or culturally specific.

Example the color red:
• America danger
• Egypt death
• India life
• China happiness
 USABILITY PRINCIPLES
(NIELSEN 2001)
• Visibility of system status
• Match between system and the real world
• User control and freedom
• Consistency and standards
• Help users recognize, diagnose and recover
from errors
• Error prevention
• Recognition rather than recall
• Flexibility and efficiency of use
• Aesthetic and minimalist design
• Help and documentation
 VISIBILITY OF SYSTEM STATUS
The system should always keep users
informed about what is going on,
through appropriate feedback within
reasonable time.
 MATCH BETWEEN SYSTEM AND
REAL WORLD
• The system should speak the users‘ language,
with words, phrases and concepts familiar to
the user, rather than system oriented terms.
• Follow real-world conventions, making
information appear in a natural and logical
order.
 USER CONTROL AND
FREEDOM
• Users often choose system functions by
mistake and will need a clearly marked
"emergency exit" to leave the unwanted
state without having to go through an
extended dialogue. Support undo and
redo.
• Cancel
• Undo
“Exits” • Quit
• Interrupt long
operations
• Default values
HELP USERS RECOGNIZE, DIAGNOSE,
and recover from errors
• Error messages should be expressed in plain language
(not codes), precisely indicate the problem, and
constructively suggest a solution.
ERRORS
PREVENTION
 FLEXIBILITY AND EFFICIENCY
OF USE

• Accelerators -- unseen by the novice user --

may often speed up the interaction for the
expert user such that the system can satisfy
both inexperienced and experienced users.
• Allow users to tailor frequent actions.
ACCELERATORS
 AESTHETIC AND MINIMALIST
DESIGN
• Dialogues should not contain information which is
irrelevant or rarely needed.
• Every extra unit of information in a dialogue competes
with the relevant units of information and diminishes their
relative visibility.
 WEB USABILITY
• Web usability measures the quality of a user‘s
experience when interacting with a Web site.
• How do I make a successful Web site?
 WEB USABILITY
• Basics in Web design
₋ Text they can read
₋ Content that answers users’ questions
₋ Navigation and search that help them find what
they want
₋ Short and simple forms (streamlined registration,
checkout, and other workflow); and
₋ No bugs, typos, or corrupted data; no outdated
content
 COMMON MISTAKES IN WEB
DESIGN
• Bad search
 Search should be a box
 Query reformulation: not
 Advanced search: not
 Scoped search: maybe
 First results page is golden
 COMMON MISTAKES IN WEB
DESIGN
• PDF files for online reading

PDF is great for printing and for

distributing manuals and other big
documents that need to be printed.

Reserve it for this purpose and convert any

information that needs to be browsed or
read on the screen into real web pages.
 NOT CHANGING THE COLOR OF
VISITED LINKS

http://cuspide.com/
 MISTAKES IN WEB DESIGN
• Make obvious what's clickable: for text links, use
colored, underlined text (and don't underline non-
link text).
• Explain what users will find at the other end of the
link. Key information-carrying terms in the anchor
text. NO "click here“.
• Avoid JavaScript or other fancy techniques that
break standard interaction techniques for dealing
with links.
• In particular, don't open pages in new windows.
 MISTAKES IN WEB DESIGN
• Non-Scannable Text
 To draw users into the text and support
scannability, use well-documented tricks:
• Subheads
• bulleted lists
• highlighted keywords
• short paragraphs
• a simple writing style
 MISTAKES IN WEB DESIGN

• Fixed-font size
 CSS style sheets unfortunately give websites the power to
disable a Web browser's "change font size" button and
specify a fixed font size
 Respect the user's preferences and let them resize text as
needed
 Make your default font size reasonably big

• Low contrast between text and background

 MISTAKES IN WEB DESIGN

• Page Titles With Low Search Engine Visibility

• The page title is your main tool to attract new visitors from
search listings and to help your existing users to locate the
specific pages that they need.
 MISTAKES IN WEB DESIGN

• Anything that looks like an advertisement

– banner blindness
– animation avoidance
– pop-up purges

www.lanacion.com
 https://www.beoplay.com/landingpages/beoplayh4

http://www.basicagency.com/yir/

https://swro.fcinq.com/

http://www.johos.at/#/en/0/0

http://www.aisforalbert.com/

http://2017.makemepulse.com/
 MISTAKES IN WEB DESIGN

• Opening new browser windows

It disables the Back button which is the normal way

users return to previous sites

A link should be a simple hypertext reference that

replaces the current page with new content
MISTAKES IN WEB DESIGN

• Not answering a user’s questions

The ultimate failure of a website is to
fail to provide the information users
are looking for: e.g. avoid listing the
price of products and services
 MISTAKES IN WEB DESIGN

• Using frames
Splitting a page into frames is very confusing for users
since frames break the fundamental user model of
the web page

• Browser incompatibility
don't turn away customers just because they prefer a
different platform (e.g. Firefox, Opera, Safari)
 MISTAKES IN WEB DESIGN
• Cumbersome forms
• Cut any questions that are not needed
• Don't make fields mandatory unless they truly are
• Support autofill to the max by avoiding unusual field labels
• Set the keyboard focus to the first field when the form is
displayed
• Allow flexible input of phone numbers, credit card numbers,
and the like
• Internationalization
 MISTAKES IN WEB DESIGN
• No Contact Information or Other Company Info
– “About us” information
– Trust and credibility

• Unclear statement of purpose

Emphasize what your site offers that's of value to users
and how your services differ from those of key
competitors
 MISTAKES IN WEB DESIGN

• Screen resolution and page layout

–Optimize for 1024x768
–Do not design solely for a specific
monitor size
–Use a liquid layout that stretches to the
current user's window size
 MISTAKES IN WEB DESIGN

• Use graphics to show real content, not just to decorate

your homepage
use photos of people who have an obvious
connection to the content as opposed to using
models or generic stock photos
 MISTAKES IN WEB DESIGN

• Don't include an active link to the homepage on

the homepage
Never have a link that points to the
current page
 MORE ABOUT (WEB) USABILITY

• Jakob Nielsen http://www.useit.com/jakob/

http://www.nngroup.com/

• http://www.usability.gov/

• http://www.useit.com/alertbox/
 ADA
PERTANYAAN
???