HCI User Interface

Why HCI?

What is an interface? the place at which independent and often unrelated systems meet and act on or communicate with each other. — Meriam-Webster

Why do we remember only the bad? A good interface should be transparent Bad interfaces cause user frustration “What was this product designer thinking?” GOOD BAD

The First Graphical User Interfaces Apple Computer’s Lisa GUI (1983) XEROX’s GUI (1981) Microsoft’s Window (1985)

A Brief History of User Interfaces Batch-processing No interactive capabilities All user input specified in advance (punch cards, ...) All system output collected at end of program run (printouts,...) -> Applications have no user interface component distinguishable from File I/O Job Control Languages (example: IBM3090–JCL, anyone?): specify job and parameters

A Brief History of User Interfaces Time-sharing Systems Command-line based interaction with simple terminal Shorter turnaround (per-line), but similar program structure Example: still visible in Unix commands Full-screen textual interfaces Shorter turnaround (per-character) Interaction starts to feel "real-time" -> Applications receive UI input and react immediately in main "loop" (threading becomes important)

A Brief History of User Interfaces Menu-based systems Discover "Read & Select" over "Memorize & Type" advantage Still text-based! Example: UCSD Pascal Development Environment -> Applications have explicit UI component But: choices are limited to a particular menu item at a time (hierarchical selection)

A Brief History of User Interfaces Graphical User Interface Systems From character generator to bitmap display Pointing devices in addition to keyboard -> Event-based program structure Most dramatic paradigm shift for application development User is "in control" Application only reacts to user (or system) events Event handling

Conceptual model Need to first think about how the system will appear to users (i.e. how they will understand it) A conceptual model is a high level description of: “the proposed system in terms of a set of integrated ideas and concepts about what it should do, behave and look like, that will be understandable by the users in the manner intended” The goal of the “conceptual model” is to present to the user a view of the system which will allow the user to understand the system, and to use it effectively. Example of trash can in mac; example of how many documents have been retrieved in search engines.

Physical, perceptual, and conceptual aspects of the user interface

Interface User interfaces handle inputs and outputs that involve the system user directly Interactions with the user and computer (HCI) can be modeled with dialog designs User-interface design occurs in each iteration

Well, “…it could be better …”

“Better …”

Good Designs => Usable Systems Work the way the user thinks they should Allows the user to focus on task at hand and not worry about the underlying technology and interaction technology Minimize user errors Promote user satisfaction (users should feel that they are accomplishing more with the system than without the system)

What Is “Design” in HCI? It is a process: a goal-directed problem solving activity informed by intended use, target domain, materials, cost, and feasibility a creative activity a decision-making activity to balance trade- offs It is a representation: a plan for development a set of alternatives & successive elaborations

achieving goals within constraints what is design? achieving goals within constraints goals - purpose who is it for, why do they want it constraints materials, platforms trade-offs

Graphical Representation From the design point of view Screen  two-dimensional Objects  two-dimensional/three-dimensional Representation of 2D objects on a 2D screen Straightforward graphics is enough Representation of 3D objects on a 2D screen Required special techniques Human vision psychology is required to be considered

Four basic activities There are four basic activities in Interaction Design: 1. Identifying needs and establishing requirements 2. Developing alternative designs 3. Building interactive versions of the designs 4. Evaluating designs

Some practical issues Who are the users? What are ‘needs’? Where do alternatives come from? How do you choose among alternatives?

What are the users’ capabilities? Humans vary in many dimensions: size of hands may affect the size and positioning of input buttons motor abilities may affect the suitability of certain input and output devices strength - a child’s toy requires little strength to operate, but greater strength to change batteries disabilities(e.g. sight, hearing, dexterity)

What are ‘needs’? their context what information do they require? Users rarely know what is possible Users can’t tell you what they ‘need’ to help them achieve their goals Instead, look at existing tasks: their context what information do they require? who collaborates to achieve the task? why is the task achieved the way it is? Envisioned tasks: can be rooted in existing behaviour can be described as future scenarios

What is interaction design? Designing interactive products to support people in their everyday and working lives Sharp, Rogers and Preece (2002) The design of spaces for human communication and interaction Winograd (1997)

Testing prototypes to choose among alternatives

Many kinds of interaction styles available… Command line interface Speech Data-entry Form fill-in Query Graphical Web Pen Augmented reality three–dimensional interfaces

UI implementation Console applications (CUI’s) Command-line and natural language interfaces Interaction devises (input & output devises) User interfaces for virtual environments Graphical User Interfaces (GUI’s) Window systems, toolkits, frameworks GUI builders

Command line interface Way of expressing instructions to the computer directly function keys, single characters, short abbreviations, whole words, or a combination Exact spelling suitable for repetitive tasks better for expert users than novices offers direct access to system functionality command names/abbreviations should be meaningful! Hard to remember Typical example: the Unix system

Linux/UNIX: Shell Command Language

Windows XP “DOS” Shell Command Language

Natural language Familiar to user speech recognition or typed natural language Problems vague ambiguous hard to do well! Solutions try to understand a subset pick on key words

Query interfaces Question/answer interfaces Query languages (e.g. SQL) user led through interaction via series of questions suitable for novice users but restricted functionality often used in information systems Query languages (e.g. SQL) used to retrieve information from database requires understanding of database structure and language syntax, hence requires some expertise

Form-fills Primarily for data entry or data retrieval Screen like paper form. Data put in relevant place Requires good design obvious correction facilities

Three dimensional interfaces virtual reality ‘ordinary’ window systems highlighting visual affordance indiscriminate use just confusing! 3D workspaces use for extra virtual space light and occlusion give depth distance effects flat buttons … click me! … or sculptured

Graphical User Interface (GUI) Standard elements in GUI based direct manipulation Bitmapped screen WIMP Windows Icon Menus Pointers

Graphical User Interface (GUI) Standard elements in GUI based direct manipulation WIMP Windows Multiple windows Tiled vs. overlapping Reduce and restore Move Resize Scroll contents

Icons small picture or image represents some object in the interface often a window or action windows can be closed down (iconised) small representation if many accessible windows icons can be many and various highly stylized realistic representations.

Icons Icons get used for lots of different things Representing objects Files Tools Representing commands Open Undo ..often shortcuts to menu commands that have no icon

Icons There are guidelines for these too Apple: Microsoft: Design and composition should indicate purpose Perspective should agree with real-life interactions Differentiate them from other UI elements Microsoft: Colors that complement the XP design Perspective is either at a certain angle, or straight-on Everyday objects should look modern Microsoft seems more interested in having 3rd part icons that fit the XP style Apple is more concerned with composition than having everyone imitate their “photo-illustrative” style

Microsoft Icon Composition Exceptions: Document icons Symbols such as warning Single objects Objects not recognizable at an angle Icons are either in that particular perspective, or straight-on

Apple Icon Composition Icon “genres” Application: media (paper) and tool (pen) Utility: straight perspective, subdued colors ..also document, plug-in, toolbar The perspective (and shadow) of an icon should agree with how you interact with its real-life counterpart: on a desk, on a shelf, in your hand

Dialog Styles Q & A Old style. Used with setup. Answer selected (menu).

Graphical User Interface (GUI) Standard elements in GUI based direct manipulation WIMP Pointers Property sheets/dialogue boxes Check box Selection / radio buttons Fill-in blanks Pallets Tool bars etc.

Pointers important component WIMP style relies on pointing and selecting things uses mouse, trackpad, joystick, trackball, cursor keys or keyboard shortcuts wide variety of graphical images

Graphical User Interface (GUI) Standard elements in GUI based direct manipulation WIMP Menus Pull-down (from bar or top) Pop-up/contextual (from item)

Menus Set of options displayed on the screen Options visible less recall - easier to use rely on recognition so names should be meaningful Selection by: numbers, letters, arrow keys, mouse combination (e.g. mouse plus accelerators) Often options hierarchically grouped sensible grouping is needed Restricted form of full WIMP system

Menu Selection

Menus Choice of operations or services offered on the screen Required option selected with pointer problem – take a lot of screen space solution – pop-up: menu appears when needed

Kinds of Menus Menu Bar at top of screen (normally), menu drags down pull-down menu - mouse hold and drag down menu drop-down menu - mouse click reveals menu fall-down menus - mouse just moves over bar! Contextual menu appears where you are pop-up menus - actions for selected object pie menus - arranged in a circle easier to select item (larger target area) quicker (same distance to any option) … but not widely used!

Buttons individual and isolated regions within a display that can be selected to invoke an action Special kinds radio buttons – set of mutually exclusive choices check boxes – set of non-exclusive choices

Push Buttons You click it, and something happens Choose the title text carefully Apple: “Button names should be verbs that describe the action performed” Microsoft: “Aim for the shortest possible label; one word is best.” “If possible, use label text that makes sense when read out of context — for example, when a user reads or hears only the label of the current control.” An example of guidelines for a particular element On both platforms, “Yes” and “No” are not good choices for button titles Microsoft doesn’t always follow this - Excel’s dialog to confirm deleting a sheet includes an explanation of what each button will do, instead of using specific text for the button titles (Mac version at least)

Layout

Layout Notice the differences between this window and the Windows version? Buttons are moved to the bottom Special Help button, not just a push button that says “help” Apple has a program called Interface Builder which automatically helps you use the correct spacing

Layout

Toolbars long lines of icons … … but what do they do? fast access to common actions often customizable: choose which toolbars to see choose what options are on it

Dialogue boxes information windows that pop up to inform of an important event or request information. e.g: when saving a file, a dialogue box is displayed to allow the user to specify the filename and location. Once the file is saved, the box disappears.

Screen design use boxes to group logical items use fonts for emphasis, headings but not too many!! ABCDEFGHIJKLM NOPQRSTUVWXYZ

physical controls grouping of items defrost settings type of food time to cook11 defrost settings type of food time to cook

physical controls grouping of items order of items 1) type of heating 2 2) temperature 3 3) time to cook 4 4) start

physical controls grouping of items order of items decoration different colours for different functions lines around related buttons (temp up/down)

physical controls grouping of items order of items decoration alignment centred text in buttons ? easy to scan ?

physical controls grouping of items order of items decoration alignment white space gaps to aid grouping

alignment - text you read from left to right (English and European)  align left hand side boring but readable! Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess fine for special effects but hard to scan

multiple columns scanning across gaps hard: (often hard to avoid with large data base fields) sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

multiple columns - 2 use leaders sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

multiple columns - 3 or greying (vertical too) sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

colour and 3D both often used very badly! colour 3D effects older monitors limited palette colour over used because ‘it is there’ beware colour blind! use sparingly to reinforce other information 3D effects good for physical information and some graphs but if over used … e.g. text in perspective!! 3D pie charts

bad use of colour over use - without very good reason (e.g. kids’ site) colour blindness poor use of contrast do adjust your set! adjust your monitor to greys only can you still read your screen?

Example : Color Stereoscopy

Example : Text Stand Out

Example: One Color

Example: Two Colors

Example: Three Colors

Example: Four Colors

Text & Colors What materials to present as spoken vs. text? “less text is normally more effective” Text presentation Number of fonts– one or two E.g., stick with Times New Roman, or stick with New Century Schoolbook Don’t overuse bold, italics, underline etc. Spell check & proof read! Colors Background– pale colors Foreground– brighter colors Use a small number of colors

Example: One Font

Example: Two Fonts

Example: Three Fonts

Example: Four Fonts

Attention with Structured Information Structure the information so that it is easy to navigate through Presenting not so much information and not too little on a screen Instead of arbitrarily presenting data on the screen, it should be grouped and ordered into meaningful parts Blank space Color Font variations etc.

Attention with Structured Information

Ten Good Deeds in Web Design Place organization’s name and logo on every page and make the logo a link to he home page Provide a search function if the site is more than 100 pages Write straightforward headlines and page titles Structure the page to facilitate reader scanning Use hypertext to structure the content space

Ten Good Deeds in Web Design (continued) Use product photos with thumbnails on the primary page Use relevance-enhanced image reduction Use link titles to provide users with a link preview Ensure accessibility for users with disabilities Do (Design) the same as everyone else

Example Visionary approaches for developing novel conceptual paradigms

Questions Name four factors which must be taken into account when designing a good user interface. Explain why each factor is important. (8) Explain one way in which the needs of an expert user and a novice user can be accommodated when designing the HCI for a piece of software. (2)