ITEC80 Flashcards
look and feel
Aesthetic appeal
coined by HANSEN
in 1971, States that the interaction and
interface should cater to the
needs of the target user of the
system design
Know thy user
PRINCIPLES
OF
HUMAN-
COMPUTER INTERACTION
- KNOW THY USER
- Understanding the task
- Reduced memory load
- Strive for consistency
- Remind user and refresh their memorY
- Prevent errors/reversal action
- Naturalness
EXAMPLES
OF
HCI
GUIDELINES
- Information strucutring
and navigation (general HCI design - Navigation
- two-panel selector
- One-window drilldown
drilldown as a
design pattern for content organization and fast
navigation.
One-window drilldown
is a concept distinguished from
another similar term, interface.
Interaction
refers to an abstract
model by which humans interact with
the computing devices for a given task
Interface
means that the resulting
interface are easy to use, efficient for the task,
ensure safety, and lead to a correct completion
of tasks.
High usability
GOAL
OF
HUMAN-
COMPUTER INTERACTION
Functional completeness, High usability, Aesthetic appeal, Compelling user experience
Functional
completenes
complete feature in one package
(device, gadget).
High usability
efficient and easy to
use
look and feel
Aesthetic appeal
immersive user experience
Compelling user experience
base
the HCI design on the understanding of
the task.
1Understanding the task
refers to the job accomplished by
the user through the use of interactive
system.
Task
design
interaction with as little memory load as
possible is a principle that has also a
theoretical basis.
Reduced memory load
the capacity of
human’s short term memory,
famously known as “magic
number”
5
to
4
chunks
of
information
one way
to unburden the memory load is to keep
consistency.
Strive for consistency
give continuous reminders
of important information and thereby
refresh the user’s memory
Remind user and refresh their
memory
- the interaction and interface should be
designed to avoid operations in our
everyday life.
Prevent errors/reversal action
refers to a trait that is
reflective of various operations in our
everyday life.
Naturalness
EXAMPLES
OF
HCI
GUIDELINES
- Information strucutring
and navigation (general HCI design
- Navigation
- two-panel selector
- One-window drilldown
A
single display is often not sufficient to
encompass all of the required information
content or to control the UI for a given
application.
Information
strucutring
and
navigation (general HCI design)
refers to the method used to
find information within a Web site
Navigation
a design pattern for
information
structuring
and
facilitated
navigation.
two-panel selector
drilldown as a
design pattern for content organization and fast
navigation.
One-window drilldown
Clever designs for taking user input
(e.g., raw information or system commands) can
improve the overall performance, in terms of
both time and accuracy, for highly interactive
systems. Modern interfaces employ graphical
user interface (GUI) elements
Taking User Input (General HCI
Design)
Similar sequences of actions
should be used under all conditions (similar
delimiters, abbreviations, etc.)
Consistency
of
data-entry
transactions
Fewer
input
actions
means
greater
operator
productivity
Minimal input actions by user
When
doing data entry, use menus and button choices
so that users do not have to remember a lengthy
list of codes and complex syntactic command
strings.
Minimal memory load on users
The format of data-entry
information should be linked closely to the
format of displayed information (i.e., what you
see is what you get).
Compatibility of data entry with
data display
Use
consistent
labeling.
Clear and effective labeling of
buttons and data-entry fields
For example, do not place “save”
and “undo” buttons close together. Such a
placement is likely to produce frequent
erroneous input.
Do not place semantically opposing
entry/selection
options
close
together:
Provide text alternatives for
nontext content.
Provide captions and other
alternatives for multimedia.
Create content that can be
presented in different ways,
*
including
by
assistive
technologies,
without
losing
meaning.
- Make it easier for users to see
and hear content.
- Perceivable
Make all functionality available
from a keyboard.
Give users enough time to read
and use content.
Do not use content that causes
seizures.
Help users navigate and find
content.
Operable
Make
text
readable
and
understandable.
Make
content
appear
and
operate in predictable ways.
Help users avoid and correct
mistakes
- Understandable
Maximize compatibility with
current and future user tools.
- Robust
Recently, with the spread of smartphones,
usability and user experience of mobile devices
and applications has become even more
important
Mobile Device (Platform Type)
Major vendors
publish
style
guides
for
user-interaction
elements to be used for applications running on
their platform
Icons for Apple® iOS and Fonts for
Windows® XP (Vendor)
Blattner,
Sumikawa,
and
Greenberg have suggested a few guidelines for
designing “auditory” analog-to-visual icons.
Similar to visual icons, which must capture the
underlying meaning (for whatever it is trying to
represent) and draw attention for easy
recognition, earcons should be designed to be
intuitive.
“Earcon” Design for Aural Interface
(Modality)
“Earcon” Design for Aural Interface
(Modality)
“Earcon” Design for Aural Interface
(Modality)
Kalsbeek
has collected and formulated very extensive,
detailed, and structured HCI guidelines for e-
commerce applications.
E-Commerce (Application)
Check-out should start
at the shopping cart, followed by the gift options
or shipping method, the shipping address, the
billing address, payment information, order
review and finally an order summary.
Checkout process
Check-out should start
at the shopping cart, followed by the gift options
or shipping method, the shipping address, the
billing address, payment information, order
review and finally an order summary.
Checkout process
- level, inputs and outputs are handled
by the interrupt mechanism of the system
software (operating system).
Input and Output at the Low
Level
is a signal to the
processor indicating that an event (usually an I/O
event) has occurred and must be handled.
Interrupt
is interpreted so that the address of its
handler procedure can be looked up and
executed while suspending the ongoing
process for a moment.
Interrupt
how is the user/device input
processed, and how does the application (with
the help of the UI layer) generate output?
Central to its overall interworking are events, UI
objects, and event handlers.
Events,UI Objects,
and Event Handlers
Interactive behavior that is purely
computational will simply be carried out by
executing the event-handler procedure.
Output
It
explains how to make web content more
accessible to people with disabilities. Web
content generally refers to the information in a
web page or web application, including text,
images, forms, sounds, and such
Users with Disability (User Type
The ___ approach was first proposed as a computational architecture for interactive
programs (rather than a methodology) by the designers of the programming language
called SmallTalk, which is one of the first object-oriented and modular languages [2].
Model,View,andController (MVC)
part of the application corresponds to the computation (e.g., realized as
objects) that deals with the underlying problem or main information or data of the
application.
model
part of the application corresponds to the implementation for output and
presentation of data
View
part of the application corresponds to the implementation for
manipulating the view (in order to ultimately manipulate the internal model)
controller
In many application architectures, the view and controller may be merged into one
module or object because they are so tightly related to each other.
View/Controller
hen evaluating the interaction model and interface, there are largely two
criteria. One is the usability and the other is user experience (UX). Simply
put, usability refers to the ease of use and learnability of the user interface
(we come back to UX later in this section). Usability can be measured in
two ways, quantitatively or qualitatively.
EvaluationCriteria
often involves task-performance measurements
Quantitative assessment
One of the easiest and most straightforward evaluation methods is to simply interview
the actual/potential users and observe their interaction behavior,
Focus Interview/Enactment/Observation Study
____________________ is very similar to the interview method
Expert Heuristic Evaluation
In contrast to interviews and observation, measurement methods attempt to indirectly
quantify the goodness of the interaction/interface design
Measurement
Most HCI evaluation involves simple interviews and or carrying out simple tasks using
paper mock-ups, simulation systems, or prototypes
Safetyand Ethics in Evaluation
The talking computer interface is undoubtedly the holy grail of HCI. Language
understanding can be largely divided into two processes
Language Understanding
Gestures play a very important role in human communication, in many cases
unknowingly
Gestures
Image recognition or understanding is perhaps a lesser used technology in HCI,
especially for rapidly paced and highly frequent interaction in which the use of
mouse/touch/voice input is more common.
Image Recognition and Understanding
In this scheme, for a set of subtasks (which together satisfy a larger task),
we assign the most appropriate modality to each task.
Composed:
: In this scheme, as the name suggests, multiple modal interaction
techniques are used for the same subtask independently
Alternative:
In the redundant scheme, many modalities are used together
(simultaneously or not) for the same task (input or output).
Redundant:
In the redundant scheme, many modalities are used together
(simultaneously or not) for the same task (input or output).
Redundant:
The smartphone, while almost undetachable
from many users, is not a true form of wearable computer.
Wearable computing and interaction
Much research has been conducted in
ways to take advantage of our physiological signals such as brain waves, EMG
(electromyography), ECG (electrocardiography), and EEG (electroencephalography).
Interaction based on physiological signals:
