1. HCI User Interface

2. Why HCI?

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

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

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

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

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

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

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

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

11. Physical, perceptual, and conceptual aspects of the user interface

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

15. Well, “…it could be better …”

16. “Better …”

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

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

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

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

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

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

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

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

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

27. Testing prototypes to choose among alternatives

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

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

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

32. Linux/UNIX: Shell Command Language

33. Windows XP “DOS” Shell Command Language

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

50. Menu Selection

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

52. 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!

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

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

55. Layout

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

57. Layout

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

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

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

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

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

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

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

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

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

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

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

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

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

71. 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?

72. Example : Color Stereoscopy

73. Example : Text Stand Out

74. Example: One Color

75. Example: Two Colors

76. Example: Three Colors

77. Example: Four Colors

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

79. Example: One Font

80. Example: Two Fonts

81. Example: Three Fonts

82. Example: Four Fonts

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

84. Attention with Structured Information

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

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

87. Example
Visionary approaches for developing novel conceptual paradigms

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