Overview
Design involves achieving goals within constraints tradeoffs and limitations
Design process has several stages and is iterative
Interaction starts with getting to know users and their context
Scenarios (rich design stories) System Navigation Iteration and prototyping
Introduction
HCI is focused on understanding and design - doing things and making things
Interaction design not just design of interactive system, but about
interaction itself how it affects the way people work
not just devices and programs, but manuals, tutorials, online help systems
What is design?
Design is achieving goals within constraints Goals
What is the purpose of the design? Who is it for? Why do they want it?
Constraints materials standards cost and time health and safety issues
Tradeoffs involve choosing which goals and constraints can be
relaxed so others can be met
Golden rule of design
understand your materials raw materials are the same, but designs
produced may be different for HCI
obvious materials are human and computer understand computers
limitations, capacities, tools, platforms understand people
psychological, social aspects, human error
Human error
Human error often taken to mean operator error error is inherent in design or installation of
human interface Bad interfaces
slow or error-prone to use cost money and lives
People do make mistakes – human nature Design to reduce mistakes or minimize
consequences
Process of Design
Usability is designed in from the start don’t call in HCI experts at the end or view usability as equivalent to testing
Interaction Design Process
Requirements – what is wanted precursor: what is currently happening interview, observe, look at documents
Analysis order results of requirements identify key issues use scenarios
Design how do accomplish what you want apply rules, guidelines, design principles navigations layout of screens
Iteration and Prototyping can’t expect to get it right the first time
Implementation and Deployment coding, making hardware, writing documentation
User Focus
Know thy user Rarely one user System may impact more than person
immediately using it Stakeholders – everyone affected directly or
indirectly by a system
Get to know user
Who are they? young or old? novice or experienced? harder if we are producing generic software think of several specific users
Know they are probably not like you most developers male but women have better empathetic skills
Talk to them interview, open-ended discussions bring them into design process (design
ownership)
Get to know user
Watch them explanations often do not match what people do observe them, tape them look at artifacts they use and create discuss observations with them
observations tell you what they do, they will tell you why Use your imagination
try to imagine their experiences if you cannot involve actual users
Do NOT imagine what you would do in their place, buy imagine what they would do (method acting)
develop a persona – a rich picture of an imaginary person who represents core user group
Scenarios
Scenarios – design stories of interaction simplest design representation flexible and powerful detailed to make events seem real augmented with storyboards (sketches,
simulated screen shots, etc.)
Scenarios
Used to: communicate with others (designers, clients,
users) validate other models express dynamics (describe behavior)
Are linear Advantage: Time is linear Disadvantage: No alternative paths, so miss
unintended things a person may do
Design
Object of design is not just computer system or device, but socio-technical intervention as a whole, but for now focus on system:
Most tangible outputs of design Widgets Screens or windows Navigation within application environment
Levels of Interaction
PC app Website Physical Devicewidgets form elements, buttons, dials,
lights
tags, links displays
screen design page design physical layout
navigation designsite structure main modes of device
Other apps & web, browser, The real world
OS external links
Navigation Design
1st task who is using application? how do they think about it? what will they do with it?
2nd task – think about structure local structure – one screen or page global structure – site, movement between
screens
Local Structure
Much interaction is goal-seeking behavior users know what they are after users know a partial model of system ideal world users would take shortest path to
achieve goal, pressing right buttons and links in order
real world, users meander through system and make assessments at each point if they are getting closer to goal
Local structure
Four things to look for when looking at web page, screen or state of a device know where you are know what you can do there know where you are going – or what will
happen know where you’ve been – or what you’ve done
Make this clear to user!
Local Structure
Make things clear to the user where you are
show bread crumbs, path of titles, progress bars, etc. what you can do
what can be pressed or clicked, gray out things that can’t be done or get rid of entirely
use standards for links where you are going or what will happen
tool tips for icons, ‘back’ mechanism to return in case you go somewhere you didn’t mean to
modes for different contexts should be clear what you’ve done or where you’ve been
confirmation feedback history, and back button
Global Structure
Way various screens, pages or device states link to one another
Create a hierarchical chart shows functional boundaries may be organized by roles, user type, etc. Deep hierarchies difficult to navigate, better to
have broad top-level categories 7+ 2 doesn’t apply for menus, it applies to
memory, not visual search menu breadth can be quite large if they are
organized
Global Structure - Dialog
Dialog – refers to pattern of interactions between user and a system
Should be flow of screens and commands that is not about hierarchy
Use a Network Diagram to show principal states or screens linked with arrows
show what leads to what show what happens when include branches and loops - take into account
different paths through system and loops that return to same screen
more task oriented than hierarchy
More Global
Each thing we design sits among other devices and applications
Implications style issues – conform to platform standards functional issues
example: PC app must interact with files, read standard formats, etc.
navigation issues – support linkages between apps
Screen Design and Layout
How to put the different elements that make up interactive applications together
Basic Principles at the screen level reflect other areas of interaction Ask – what is the user doing? Think – what information is required? what
order are things likely to be needed? Design - form follows function: let the required
interactions drive the layout
Tools for layout
Number of visual tools allow grouping and structure
indentation, group spatially, use line separators, boxes order within groups
date, alphabetic, natural order set up order of tab key moves between fields
decoration boxes, separating lines, font style, text or background
color can emphasize groupings alignment
text at the left, numbers at right or by decimal point multiple columns – ‘leaders’ or alternate colors of rows
white space – can create more complex structures, can create resting areas
User action and Control
Entering information forms-based interfaces and dialog boxes alignment still important labels just above or to the left and in smaller font
Knowing what to do some elements passive, some active buttons and menus need to be recognizable
Affordances things may suggest by their shape and other attributes
what you can do with them use when designing novel interaction elements depend on background and culture of user
Appropriate Appearance
Presenting information know the purpose for which it is being used
alphabetic, date – most recent? complex numerical data – consider scatter graphs,
histograms or 3D surfaces, outlines, etc. allow user to choose among representations
Aesthetics and utility pretty interface not necessarily a good interface beauty and utility may be at odds
example diversity of controls can help operator keep track of which controls refer to which subsystem
careful application of aesthetics often aid comprehensibility
Appropriate Appearance
Making a mess of color and 3D Color should not be relied upon to convey information,
but instead reinforce 3D pie chart useless
Localization/internationalization process of making software suitable for different
languages and cultures many toolkits have resources for doing this easily text left-to-right or top-to-bottom more difficult icons and images are meaningful in restricted cultural
context Example:
Iteration and Prototyping
First design will NOT be perfect Formative evaluation – intended to improve
design expert checks against guidelines (the knowing
where you are stuff) involves real users
Redesign, reevaluate, …
Prototyping
Iteration and prototyping universally accepted “best practice” approach for interaction design
pitfall – finds local maxima
Prototyping
Two things to improve prototyping methods understand what is wrong and how to improve it choose a good starting point
Good designers might guess a good initial design based on experience and judgment
Another approach – have several initial ideas and drop them one by one as they are developed further
Top Related