User-centered design (UCD) is a design philosophy that focuses on the needs of users throughout the design process. The document discusses the key steps in UCD, which include defining the project and users, creating concepts, designing visual solutions, development, and deployment. It emphasizes early and continuous user research methods like interviews and usability testing to help ensure designs meet user needs.
15. Are you this
enthusiastic about
Interactive Design?
I f s o , U s e r - C e n t e r e d D e s i g n wi l l h e l p y o u
a c h i e v e h e b e s t r e s u l t s p o s s i b l e .
26. User-centered design (UCD) is a
design philosophy that puts the
user of a product, application, or
experience, at the center of the
design process.
27. The foundation
The three basic principles behind UCD:
1.Early focus on users and their tasks
2.Evaluation and measurement of product usage
3.Iterated design
34. Define basic requirements
• What should it do (features, functionality, what
it does etc)? Or what are we working on?
• How will we measure our success?
• Incremental changes in revenue (direct or indirect)
• Customer leads or other activity
• What are the environmental factors (physical
& technical)?
• Who is the user (demographics, skill level,
frequency of use & physical)?
35. Generate documentation
Site maps – defines
the sites content and
information
architecture
Information
Architecture (IA) is
an entire field of work
Awesome resource:
http://iainstitute.org/en/learn/
Source: http://ils.indiana.edu/faculty/smilojev/teaching/s515spring2012/2012springprojects/session11/
36. Sitemap tools – text editor
Sitemaps can be simple outlines and
remind us that the purpose is more
important than the tool.
37. Flowcharts
Sometimes the flow
is more important
than a chart of all the
pages.
Source: http://www.codeproject.com/Articles/111949/Excerpt-from-Designing-the-iPhone-User-Experience
38. Generate documentation
• Activity diagrams – Flowcharts showing how a process will work
Source: http://www.edmullen.com/work/project/free-people-retail & http://ils.indiana.edu/faculty/smilojev/teaching/s515spring2012/2012springprojects/session11/
43. Documenting users
• Write personas – A rich description of typical users
• http://uxmag.com/articles/personas-the-foundation-of-a-great-user-experience
• Write use case scenarios – Written descriptions of
how a product will be used describing common
scenarios
• http://www.gatherspace.com/static/use_case_example.html
44. Methods for researching users
• Interviews (great for exploring ideas) (requirements)
• Questionnaires / surveys (a great preliminary tool) (requirements)
• Focus groups (basically group interviews) (requirements)
• Direct observation (observe users completing a task) (flowchart)
• Card sorts (to discover how users view the content) (sitemaps)
45. As a result we have:
• A clear description of the project
• A plan for what we are building
• A detailed understanding of the user
• Vision for how the product will be used
• Best of all, tangible assets the team can share
46. Learn more
If you would like to learn more about this phase:
Learn to make:
• Personas
• Concept models
• Site maps
• Flowcharts
• Wireframes
• Design Briefs
• Usability plans
• Usability reports
47. UCD boils down to
seeking meaningful
design insights over
random acts of design
48. In the Define phase we
include the user by
inquiring of them
59. Developing concepts includes
• Interpret the documentation to develop possible solutions
• Shift from listening to problem solving
• Build wireframes and prototypes
• User testing
60. Wireframes
A schematic or blueprint that
represents the structure of a website.
Wireframes are nonfunctional, static
image.
Start with low-fidelity. Less detail and
quick to produce. Move towards higher
fidelity as you shape and improve it.
Work from the documentation project
requirements and research from step 1!
61. Prototypes
Creating the illusion of functionality
They don’t need to be complete and typically only
simulate a small set of features in an interface
Allows you to test out how an interface flows from
screen to screen
Can start as paper prototypes and move up to full
functional high-fidelity prototypes
66. Observations
• You DO NOT need a finished app to test!
• It takes practice
• Focus on the user experience of the app and not technical or
secondary issues – it is about the essence of the app
• Paper prototype allows to accommodate the unexpected
• You could quickly change it and test with a new subject
• He isn’t trying to get her to do what he wants and prove his
design is right – genuine interest in improving
83. UI Design tools
Question:
What is your primary tool for designing websites (the actual look and feel of the interface)?
Out of 274 respondents
22%
53%
18%
84. In the Design phase we
include the user via
assessment based
usability test
103. The foundation
The three basic principles behind UCD:
1.Early focus on users and their tasks
2.Evaluation and measurement of product usage
3.Iterated design
116. After a round of
interviews, use a
survey to validate
the results
117. Survey tips
Simple tips for a good survey:
• Know what you want to learn
• Write questions that everyone:
• will interpret the same way (ex: avoid “do you frequently do x”)
• can answer accurately
• Avoid leading questions:
• Do you agree with most people that Windows 8 is terrible?
• Do not make people predict their own behavior
• Have follow up questions!!!
119. Finding problems early
1x cost to change during requirements / design
5x cost to change during development
25x cost to change during formal testing
100x cost to change in production
You can’t afford not to do it.
Researchers at Hewlett-Packard, IBM, Hughes Aircraft, TRW, and other
organizations have found that purging an error by the beginning of construction
allows rework to be done 10 to 100 times less expensively than when it’s done in
the last part of the process, during system test or after release.
(Fagan 1976; Humphrey, Snyder, and Willis 1991; Leffingwell 1997; Willis et al. 1998; Grady 1999; Shull et al. 2002; Boehm and Turner 2004).
120. Elements of Wireframes
Wireframes address three core elements
1) Information design – the placement
and prioritization of the layout. Very
inline with graphic design.
2) Navigation design – the location and
structure of the navigation systems.
3) Interface design – expose the
features that the app offers. What does
it do? How does the structure expose
this to users?
128. Wireframing: move fast
• Sketch 6 to 8 thumbnail sketches in 5 minutes
• Asses the results
• Take a break
• Rinse and repeat
• Identify a solid solution – flush out variants on that idea
• Move up to larger sketches
• Rapidly iterate on variations of your favorite thumbnail
• Slowly move towards a more refined result
(lookup Prototyping by Todd Zaki Warfel)
147. Why do you check the weather?
• What to wear?
• Type of hat to wear
• Type of shoes to wear
• Type of jacket/coat
• Bring an umbrella?
• Drive the convertible?
• Bike or bus?
• Surfing related
• Ski related
• Biking related
• Phases of the moon
• Tide related
• Hunting related
•Tornado watching
• Snow days
• Global warming
related
• Spelunking
• Water the garden?
• Good day for the
beach?
• Leave early for work?
• Monitor weather on a
target date: like a
vacation etc
•Historical weather
patterns for a day in
relation to planning an
event like a wedding
• BBQ weather?
• Planning to view
changing leaves or any
other seasonal event
148. What does this do?
Test on at least 3 users in each round.
5 second test:
149. Steps:
1) Think & sketch
2) Test your design
3) Sketch some more
4) Test your design
Mobile weather app
150. Steps:
1) Think & sketch
2) Test your design
3) Sketch some more
4) Test your design
Mobile weather app
151. Steps:
1) Think & sketch
2) Test your design
3) Sketch some more
4) Test your design
Mobile weather app
152. Steps:
1) Think & sketch
2) Test your design
3) Sketch some more
4) Test your design
Mobile weather app
155. What is usability?
• In essence, how easy it is to use an interface
• Good usability = easy to use = positive user experience
• Poor usability = hard to use = negative user experience
• Attributes that describe the usability of a design:
• Usefulness
• Efficiency
• Effectiveness
• Learnability
• Satisfaction
• Accessibility
156. What we are looking for:
• Usefulness – Does it do what users need and want?
• Efficiency – Does it perform its tasks efficiently?
• Effectiveness – Does it perform its tasks the way it is intended to?
• Learnability – Is it easy to learn use the interface?
• Satisfaction – Does the user enjoy using it?
• Accessibility – Is the product usable by those with disabilities?
164. Nano-usability testing
Our simple process:
1. Find one person who cares about your product.
It doesn’t matter who. Seriously, anyone.
2. Arrange to watch them use the product. (in person)
3. Ask them to use the product to do something. Any function of
the application. (I suggest you focus on the core feature)
4. Watch them do it. Keep your mouth shut. Just watch.
5. Ask yourself: what did I learn?
174. The foundation
The three basic principles behind UCD:
1.Early focus on users and their tasks
2.Evaluation and measurement of product usage
3.Iterated design
176. Get a PDF of this
presentation: pmcneil.com
Get in touch:
mcneilp@gmail.com
or @designmeltdown
or pmcneil.com
177. 1) Mini Brochure Site
The good old content driven brochure style website.
Assuming responsive web design is required.
Involving users on this type of project feels hard at first.
Investigate the user
•Interview users
•Use analytics
Content Inventory Sitemap
Wireframes Style Tile UI Design
5 Second tests Development Measure the results