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

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.

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.

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.

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

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

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

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

Design concerns Visual Structure Population Stereotype Cultural Association

Making things work: Visual Structure

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

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

A Progression of Visible Constraints to Enter a Date

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

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.

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

Conceptual model

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

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

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

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

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

Numeric RGB Color Component Values for Commonly Used Colors

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

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

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

2-D Image Model Transformation Translation Rotation Scaling Mirror Reflection

Other image viewing transformations Viewing and Clipping Panning and Zooming

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_applicationsgraphics/_ redir_att__~1#more_options

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 http://graphicssoft.about.com/bl_types.htm

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

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)

EzWindows API EzWindows API A Graphical Application Programmer Interface

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

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

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

Class Position

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.

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)

Hello EzWindows