1. CS1001 Programing Fundamental Lecture 14 HCI
(Chapter 5)
Lecturer: Narong Wesnarat

2. 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.

3. 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.

4. 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.

5. 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

6. 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

7. 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).

8. 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).

9. Design concerns Visual Structure Population Stereotype
Cultural Association

10. Making things work: Visual Structure

11. 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

12. 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

13. A Progression of Visible Constraints to Enter a Date

15. 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

16. 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 icon problematic for some American urban dwellers who are unfamiliar with rural mail boxes.

17. 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

18. Conceptual model

19. Example of Conceptual Model
Good: Scissors
affordances:
holes for something to be inserted
constraints:
big hole for several fingers, small hole for thumb
mapping:
between holes and fingers suggested and constrained by appearance
positive transfer and cultural idioms
learnt when young
constant mechanism
conceptual model:
implications clear of how the operating parts work

21. 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'
but tallest man: 8' 11"!
Rule of thumb:
Design should cater for 95% of audience (i.e. for 5th or 95th percentile)
but means 5% of population may be (seriously!) compromised
Designing for the average a mistake may exclude half the audience

22. 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

23. 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

24. 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

25. Numeric RGB Color Component
Values for Commonly Used Colors

26. Computer Graphics
The theory and technology for computerized image synthesis
Computer-generated image is not continuous, discrete pixels (picture
elements)

27. 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

28. Image Types Black and white (1 bit per pixel)
8-bit gray scale (256 levels)
8-bit color
24-bit color

29. 2-D Image Model Transformation
Translation
Rotation
Scaling
Mirror Reflection

30. Other image viewing transformations
Viewing and Clipping
Panning and Zooming

31. 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
redir_att__~1#more_options

32. Graphics Software Categories
Bitmap-Based Image Editors
Photo Editor, Image editors
creating and editing bitmap or raster images and photos.
tools for painting, retouching, color correcting
Digital Photography Software
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

33. Integrated Graphics Suites
integrated features for bitmap-based editing, painting, vector-based drawing, typography, page layout, and more
Image Management and Processing
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

34. 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)

35. EzWindows API EzWindows API A Graphical Application
Programmer Interface

36. 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

37. EzWindows Coordinate System
Use centimeters
Metric
Simpler to understand than pixels
Device independent
Helps introduce notion of information hiding or encapsulation

38. 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

39. Class Position

40. 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.

41. 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)

42. Hello EzWindows