CS1001 Programing Fundamental
Lecture 14
HCI
(Chapter 5)
Lecturer: Narong Wesnarat
Lecture 14-1
Human Computer Interaction

A discipline concerned with the design,
evaluation and implementation of
interactive computing systems for
human use and with the study of major
phenomena surrounding them.
Lecture 14-2
Human Computer Interaction

The interaction between a person and a
computer with the person, for instance
using a keyboard, keypad, mouse,
voice, joystick, etc and the computer
using characters, menus, graphics,
images, sound, etc.
Lecture 14-3
The Human


Human are limited in their capacity to
process information. This has important
implications for design.
Users share common capabilities but
are individuals with differences which
should not be ignored.
Lecture 14-4
The Computer

A computer system comprises various
elements, each of which affects the user of
the system





Input devices: text entry, pointing, 3D interaction
devices
Output devices: screen, audible outputs
Paper output/input: printers, scanners, OCR
Memory
Processing
Lecture 14-5
Interaction styles








Command line interface
Menus
Natural language
Question/answer and query dialog
Form-fills and spreadsheets
WIMP (Windows, Icons, Menus, Pointers)
Point and click
Three-dimensional interfaces
Lecture 14-6
WIMP

In human-computer interaction, WIMP
stands for "window, icon, menu, pointing
device", denoting a style of interaction
using these elements. It was once often
used as an approximate synonym of
graphical user interfaces. WIMP
interaction was developed at Xerox PARC
(see Xerox Alto, developed in 1973) and
"popularized by the Macintosh in 1984"
(van Dam, 1997).
Lecture 14-7
Widget (computing)



In computer programming, a widget (or control) is
an interface element that a computer user
interacts with, such as a window or a text box.
Widgets are sometimes qualified as virtual to
distinguish them from their physical counterparts,
e.g. virtual buttons that can be clicked with a mouse
cursor, vs. physical buttons that can be pressed with
a finger.
Widgets are often packaged together in widget
toolkits. Programmers use widgets to build graphical
user interfaces (GUIs).
Lecture 14-8
Design concerns



Visual Structure
Population Stereotype
Cultural Association
Lecture 14-9
Making things work: Visual
Structure
Lecture 14-10
Making things work: Visual Structure
(continued)




Visible Constraints
limitations of the actions possible
perceived from object’s appearance
provides people with a range of usage
possibilities
A Progression of Visible Constraints to
Enter a Date
Lecture 14-11
Making things work: Visual
Structure (continued)

Mappings


the set of possible relations between objects
the natural relationship between two things



eg. control-display compatibility
visible mapping and mimic diagrams: store and
controls
cause and effect: steering wheel-turn right, car turns
right
Lecture 14-12
A Progression of Visible Constraints to
Enter a Date
Lecture 14-13
Lecture 14-14
Population stereotypes

Populations learn idioms that work in a
certain way



red means danger
green means safe
But idioms vary in different cultures!

Light switches



America: down is off
Britain: down is on
Faucets (hand-operated liquid valve)


America: anti-clockwise on
Britain: anti-clockwise off
Lecture 14-15
Cultural Associations

Because a trashcan in some country
may look like this:



it is likely to be confused by this
image popular in Apple interfaces:
Sun found their email icon problematic
for some American urban dwellers who
are unfamiliar with rural mail boxes.
Lecture 14-16
Conceptual model


People have “mental models” of how things work
conceptual models built from:





Affordances, Causality, Constraints , Mapping
Positive transfer, Population stereotypes/cultural standards,
Instructions, Interactions
Familiarity with similar devices (positive transfer)
models may be wrong, particularly if above attributes
are misleading
models allows people to mentally simulate operation
of device
Lecture 14-17
Conceptual model
Lecture 14-18
Example of Conceptual Model
Good: Scissors

affordances:


constraints:


between holes and fingers suggested and constrained by
appearance
positive transfer and cultural idioms



big hole for several fingers, small hole for thumb
mapping:


holes for something to be inserted
learnt when young
constant mechanism
conceptual model:

implications clear of how the operating parts work
Lecture 14-19
Lecture 14-20
Who do you design for?


People are different. It is rarely possible to
accommodate all people perfectly
Design often a compromise

E.g.. ceiling height: 8'


Rule of thumb:

Design should cater for 95% of audience (i.e. for
5th or 95th percentile)


but tallest man: 8' 11"!
but means 5% of population may be (seriously!)
compromised
Designing for the average a mistake may
exclude half the audience
Lecture 14-21
Why graphics work?






Vision is our dominant sense
Graphics are compact
Graphics escape the limitations of linear text
Graphics are readily understood
Graphics are remembered
Graphics are self-correcting
Lecture 14-22
Graphics
Windows XY Coordination
System
 specify how and where
drawing operations take
place
 has an origin that is located in
the upper-left corner of the
window,
 with positive X values
increasing to the right and
positive Y values increasing
down
Lecture 14-23
Basics of Color


A color monitor has three electron guns: red,
green, and blue. The output from these three
guns converges on each pixel on the screen,
stimulating phosphors to produce the
appropriate color.
Color System


RGB (Red Green Blue) standard across most
graphical computer systems
CMYK (Cyan-Magenta-Yellow-Black) used
heavily in (four-color) printing
Lecture 14-24


Numeric RGB Color Component
Values for Commonly Used Colors
Lecture 14-25
Computer Graphics
The theory and
technology for
computerized
image synthesis
 Computergenerated image is
not continuous,
discrete pixels
(picture
elements)

Lecture 14-26
Image files

Often encoded in the
form of a binary file





BMP (Windows Bitmap)
JPEG (Joint
Photographic Experts
Group File Interchange
Format)
TIFF (Tagged Image
File Format)
Length of file header is
often fixed
Length of image data is
dependent on factor of
image type and
compression type
Lecture 14-27
Image Types




Black and white (1 bit per pixel)
8-bit gray scale (256 levels)
8-bit color
24-bit color
Lecture 14-28
2-D Image Model
Transformation




Translation
Rotation
Scaling
Mirror Reflection
Lecture 14-29
Other image viewing
transformations


Viewing and Clipping
Panning and Zooming
Lecture 14-30
Graphics Software

Brands
Adobe: Photoshop, Illustrator, InDesign,
Streamline
 Corel: CorelDraw, Bryce, Designer
 Macromedia: FreeHand MX, Studio MX, Director
MX
 Microsoft: Visio, PhotoDraw, Creative Write
 ACDSystems: ACDSee
See list at
 http://www.epinions.com/creativity_applicationsgr
aphics/_
 redir_att__~1#more_options

Lecture 14-31
Graphics Software Categories

Bitmap-Based Image Editors




Digital Photography Software


Photo Editor, Image editors
creating and editing bitmap or raster images and photos.
tools for painting, retouching, color correcting
With sharing, cataloging, and managing a large digital image
collection in addition to other tasks such as batch processing,
photo embellishment, photo printing, and creating digital photo
projects
Vector-Based Illustration and Drawing Software

creating and editing vector-based graphics
http://graphicssoft.about.com/bl_types.htm
Lecture 14-32

Integrated Graphics Suites


Image Management and Processing


integrated features for bitmap-based editing,
painting, vector-based drawing, typography, page
layout, and more
designed primarily for ease of viewing, organizing,
cataloging, managing, storing, and browsing
images and other digital content
Web Graphics Software

for creating and editing images that are destined
for the Web
Lecture 14-33
Multimedia Software


combine graphic images with sound, motion,
text, and special effects to create animated
greetings, business presentations, screen
savers, slide shows, photo albums, and
interactive streaming content for the Web,
CD, DVD, and other applications
Page Layout

creating documents consisting of text and graphics
eg. Word processor, DTP software (Desk top
publishing)
Lecture 14-34
EzWindows API



EzWindows API
A Graphical Application
Programmer Interface
Lecture 14-35
Event-based Programming

Messages are sent to your program by
the operating system








Mouse down
Mouse up
Key down
Key up
Refresh
Quit
Timer
Handle messages
Lecture 14-36
EzWindows Coordinate System




Use centimeters
Metric
Simpler to understand
than pixels
Device independent

Helps introduce notion
of information hiding or
encapsulation
Lecture 14-37
Class Position


For earlier objects, the position was
specified by given both an x-coordinate
and a y-coordinate
We can now introduce a new object
called Position and use it
Lecture 14-38
Class Position
Lecture 14-39
EzWindows Auxiliary Functions

long int GetMilliseconds()


Returns the value of a timer that is ticking
continuously. The resolution of the timer is
milliseconds.
void Terminate()

Sends a terminate message to the
EzWindowswindow manager.
Lecture 14-40
Class SimpleWindow

Writing text in a window

void
SimpleWindow::RenderText(const
Position &UpperLeft, const Position
&LowerRight, const string &Msg =
"Message", const color &TextColor =
Black, const color &BackGroundColor
= White)
Lecture 14-41
Hello EzWindows
Lecture 14-42