Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
User-Centered Design
A r e l a t i v e l y b r i e f i n t r o d u c t i o n t o
u s e r - c e n t e r e d d e s i g n .
Designer’s are crazy
We are particular about type
My favorite font!
Stretched type is not fun
A kitten dies every time this happens – but it’s still not ok
What’s wrong here?
Sounds…awkward? Kerning matters!
Programmers
are crazy too
No matter what:
The previous guys
code is crap.
JavaScript sucks…ex:
Every script is executed in a
single global namespace that
is accessible in browsers with
the window ...
Interactive designers
are no different
Save the floppy disk
Buttons vs links
Good:
Bad:
Sample debate: http://www.ixda.org/node/15621
Should designers
learn to code?
011110010110010101110011
It’s not crazy…
it’s passion
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...
Hello, I’m Patrick
A n d I h a v e a n o b s e s s i o n wi t h t h e we b
About me
I teach at the Univ. of Missouri St. Louis
About 15 years in the web industry
Started in tech – shifted to design...
Get in touch:
mcneilp@gmail.com
or @designmeltdown
or pmcneil.com
Today's agenda
1. An overview of the User-Centered Design
Process (90 min)
2. Deep dives into key topics (70 min)
PDF download
at the end
Got links?
I loathe bulleted
presentations…
Warning, impending hypocrisy
This is the tip of the iceberg
Caution,
The User-Centered
Design Process
Part 1:
Backgrounds
The background of UX professionals
Your backgrounds
From the pre-conference survey:
A previous group:
User-centered design (UCD) is a
design philosophy that puts the
user of a product, application, or
experience, at the cent...
The foundation
The three basic principles behind UCD:
1.Early focus on users and their tasks
2.Evaluation and measurement ...
Sure seems reasonable
Peeling potatoes
vs
users
define
concept
designdevelop
deploy
UCD Process overview
UCD is a state of mind & it is not a one man show
Start her...
UCD Step 1:
Defining the project
users
define
concept
designdevelop
deploy
Define the scale
• Replacement or brand new product
• Update to an existing product
Documentation
Many options to select from
Define basic requirements
• What should it do (features, functionality, what
it does etc)? Or what are we working on?
• Ho...
Generate documentation
Site maps – defines
the sites content and
information
architecture
Information
Architecture (IA) is...
Sitemap tools – text editor
Sitemaps can be simple outlines and
remind us that the purpose is more
important than the tool.
Flowcharts
Sometimes the flow
is more important
than a chart of all the
pages.
Source: http://www.codeproject.com/Articles...
Generate documentation
• Activity diagrams – Flowcharts showing how a process will work
Source: http://www.edmullen.com/wo...
Generate documentation
Content Inventories:
A catalog of an entire
websites content.
1.Title/logo
2.Input field labels
3.R...
Content inventories
Learn more:
Responsive Design
Workflow
by Stephen Hay
Site planning answers
the question:
What am I designing?
User research happens
in concert with the
fundamental project
definition
Documenting users
• Write personas – A rich description of typical users
• http://uxmag.com/articles/personas-the-foundati...
Methods for researching users
• Interviews (great for exploring ideas) (requirements)
• Questionnaires / surveys (a great ...
As a result we have:
• A clear description of the project
• A plan for what we are building
• A detailed understanding of ...
Learn more
If you would like to learn more about this phase:
Learn to make:
• Personas
• Concept models
• Site maps
• Flow...
UCD boils down to
seeking meaningful
design insights over
random acts of design
In the Define phase we
include the user by
inquiring of them
Activity time
Our product:
A new tool to help
holiday shoppers
stay organized,
find gift ideas &
score the best deals
Steps:
1) Reflect
2) Ask questions
3) Answer questions
4) Reflect
Time box 5 minutes per step
organized, gift ideas & deals
Steps:
1) Reflect
2) Ask questions
3) Answer questions
4) Reflect
Time box 5 minutes per step
organized, gift ideas & deals
Steps:
1) Reflect
2) Ask questions
3) Answer questions
4) Reflect
Time box 5 minutes per step
organized, gift ideas & deals
Steps:
1) Reflect
2) Ask questions
3) Answer questions
4) Reflect
Time box 5 minutes per step
organized, gift ideas & deals
Share some results
My results:
1) The list repeats itself every year
2) Zero carry over year to year
3) Thoughtfulness over price tag
User research isn’t as
hard as it might sound
UCD Step 2:
Create concepts
users
define
concept
designdevelop
deploy
Developing concepts includes
• Interpret the documentation to develop possible solutions
• Shift from listening to problem...
Wireframes
A schematic or blueprint that
represents the structure of a website.
Wireframes are nonfunctional, static
image...
Prototypes
Creating the illusion of functionality
They don’t need to be complete and typically only
simulate a small set o...
Workflow
A note on:
Iterations are the key
Wireframe
something
Visual
design
Test with a
prototype
Discover
something
Lean on your user insights
and work magic
Beautiful, unicorn magic
Video time
Source: http://www.youtube.com/watch?v=9wQkLthhHKA
Usability test with a paper prototype
Observations
• You DO NOT need a finished app to test!
• It takes practice
• Focus on the user experience of the app and n...
More on usability
testing in the
second half.
In the Concept phase
we include the user via
Exploratory based
usability tests
UCD Step 3:
Design visual solutions
users
define
design
concept
develop
deploy
Design the interface
using the blueprints
Finally,
So much more than
a suggestion
Wireframes,
Sample wireframe
http://newsignature.com/blog/2011/08/06/a-quick-introduction-to-wireframing/#.UnD57PnXRvB
Sample wireframe
http://newsignature.com/blog/2011/08/06/a-quick-introduction-to-wireframing/#.UnD57PnXRvB
Be an interior designer
Style Tiles
A stepping stone towards the full design:
Minimize the radical leap from idea to visual design:
A design deliverable
consisting of fonts,
colors and interface
elements that
communicate the
essence of a visual
brand for...
Establish the visual
voice before
committing to a full
blown design
Style tiles:
An iterative tool for
visual design
Style tiles:
UI Design tools
http://www.adobe.com/products/photoshop.html
http://html.adobe.com/edge/reflow/
UI Design tools
http://macaw.co/
http://www.bohemiancoding.com/sketch/
UI Design tools
UI Design tools
Question:
What is your primary tool for designing websites (the actual look and feel of the interface)?
Ou...
In the Design phase we
include the user via
assessment based
usability test
UCD Step 4:
Development
users
define
develop design
concept
deploy
Documentation
can really pay off
This is when all that
Toss it over the fence
and forget about it
You do not get to
In the Develop phase
we include the user via
Validation based
usability test
UCD Step 5:
Deploy into the wild
users
define
deploy
designdevelop
concept
In the Deploy phase we
include the user by
measuring the use
of the product
The foundation
1.Early focus on users and their tasks
2.Evaluation and measurement of product usage
3.Iterated design
Google Analytics
Who
What
When
From
Events
Goals
Conversions
And much more
http://www.google.com/analytics/
Crazy Egg
http://www.crazyegg.com/
Inspectlet
http://www.inspectlet.com/
The definition of the
next project
Ideas and insights from here become
User Centered Design
users
define
designdevelop
deploy concept
UX Designers &
Information
Architects
UI Designers
Front en...
x
x
Did you notice
something missing?
Do you like to read?
Sources
Books referenced in this presentation & others I recommend:
Take 10 minutes…
Break time
Come back for some free books
Thank you for
completing the survey!
Deep dives
Part 2:
The foundation
The three basic principles behind UCD:
1.Early focus on users and their tasks
2.Evaluation and measurement ...
users
UCD Recap
Because it is a lot to absorb:
Part 2 Outline
What we will cover:
1.Interviews & Surveys
2.Wireframes & prototypes
3.Usability testing
Interviewing users
A b r i e f g u i d e
Interviews will
humanize your
apps problems
Interviews almost
always lead to
ideas, solutions and
features that you had
not thought of.
Tips for
interviewing users
1) Interviewing is not
selling – don’t defend
your app – ask more
questions
“Why is that feature
important to you?”
“Describe what you
wanted to happen”
2) Get actual users –
not just your office
neighbor
3) Don’t ask
hypothetical questions
4) Embrace awkward
silence
5) Shut up – it’s not a
conversation
After a round of
interviews, use a
survey to validate
the results
Survey tips
Simple tips for a good survey:
• Know what you want to learn
• Write questions that everyone:
• will interpret...
Wireframes & Prototypes
A b r i e f g u i d e
Finding problems early
1x cost to change during requirements / design
5x cost to change during development
25x cost to cha...
Elements of Wireframes
Wireframes address three core elements
1) Information design – the placement
and prioritization of ...
Wireframing tools
Wireframing tools
http://inspirationhut.net/printable-paper/
Wireframing tools
http://www.interfacesketch.com/
Wireframing tools
http://www.uistencils.com/
My kit
Wireframing tools
Many people also frequently use the following to wireframe:
InDesign, PowerPoint, Keynote, Visio & HTML
Wireframing methods
Wireframing: move fast
• Sketch 6 to 8 thumbnail sketches in 5 minutes
• Asses the results
• Take a break
• Rinse and repe...
Wireframes should
be iterative
From wireframe to
prototype
Tools for prototyping
Many people also frequently use the following to prototype:
InDesign, PowerPoint, Keynote, Visio & H...
Demo PDF prototype
Demo Axure prototype
Specialized tools
https://fluidui.com/ (Is it a wireframe or a prototype? )
Specialized tools
https://fluidui.com/ (Is it a wireframe or a prototype? )
Consider your workflow
Again,
Not every prototype is
made for the same
purpose
The 5 types of
prototypes
Type 1:
To unify groups
of people
(often diverse people)
Type 2:
To work through ideas
Type 3:
Get buy in to the idea
of UX design practices
Type 4:
For usability testing
Type 5:
Is it technically
possible?
Build only what
you need
Prototype formats
• Digital prototypes
• Paper Prototypes
• Storyboards
• Video based
Activity time
Our product:
A mobile weather
application…
with a twist
Why do you check the weather?
• What to wear?
• Type of hat to wear
• Type of shoes to wear
• Type of jacket/coat
• Bring ...
What does this do?
Test on at least 3 users in each round.
5 second test:
Steps:
1) Think & sketch
2) Test your design
3) Sketch some more
4) Test your design
Mobile weather app
Steps:
1) Think & sketch
2) Test your design
3) Sketch some more
4) Test your design
Mobile weather app
Steps:
1) Think & sketch
2) Test your design
3) Sketch some more
4) Test your design
Mobile weather app
Steps:
1) Think & sketch
2) Test your design
3) Sketch some more
4) Test your design
Mobile weather app
Testing designs
can be easy.
&
Wireframes can be
packed with meaning.
Usability testing
A n e x t r e m e l y b r i e f i n t r o d u c t i o n .
What is usability?
• In essence, how easy it is to use an interface
• Good usability = easy to use = positive user experie...
What we are looking for:
• Usefulness – Does it do what users need and want?
• Efficiency – Does it perform its tasks effi...
Is this usable?
We can craft the
usability as a way to
influence the user
experience
Accessibility: What’s
good for a few, is often
good for everyone.
Usability testing is our
attempt to answer
these questions –
is it usable?
Nano Tests
T h e 5 m i n u t e g e t s t a r t e d g u i d e t o u s a b i l i t y
t e s t i n g .
Nano-usability tests as
described in
Observing the User
Experience
What we are going to do:
Bite sized guerilla
usability testing
designed to get you
started in 5 minutes.
Nano-usability testing
Nano-usability testing
Our simple process:
1. Find one person who cares about your product.
It doesn’t matter who. Serious...
Keep your mouth shut.
Did I mention,
You want to learn what
is wrong. You are not
trying to defend
your creation.
Remember,
Five users will find
80% of the problems
(typically)
Many small tests,
not one big test.
Goal:
There is much more to
usability testing. But
this is a totally legit
way to start.
Naturally,
Beyond digital interfaces
T h i s m o d e l wo r k s i n m a n y s c e n a r i o s
Presentation
Planning a
New business
Starting a
Wrapping up
We a r e a l m o s t d o n e !
The foundation
The three basic principles behind UCD:
1.Early focus on users and their tasks
2.Evaluation and measurement ...
users
UCD Recap
Get a PDF of this
presentation: pmcneil.com
Get in touch:
mcneilp@gmail.com
or @designmeltdown
or pmcneil.com
1) Mini Brochure Site
The good old content driven brochure style website.
Assuming responsive web design is required.
Invo...
2) New iPhone app
Interview
users
Survey users Flowchart Wireframes
Prototype
Usability
testing
Style Tile UI Design
Usabi...
User centered design workshop
User centered design workshop
Upcoming SlideShare
Loading in …5
×

User centered design workshop

49,315 views

Published on

Published in: Technology, Education
  • Be the first to comment

User centered design workshop

  1. 1. User-Centered Design A r e l a t i v e l y b r i e f i n t r o d u c t i o n t o u s e r - c e n t e r e d d e s i g n .
  2. 2. Designer’s are crazy
  3. 3. We are particular about type My favorite font!
  4. 4. Stretched type is not fun A kitten dies every time this happens – but it’s still not ok
  5. 5. What’s wrong here? Sounds…awkward? Kerning matters!
  6. 6. Programmers are crazy too
  7. 7. No matter what: The previous guys code is crap.
  8. 8. JavaScript sucks…ex: Every script is executed in a single global namespace that is accessible in browsers with the window object.
  9. 9. Interactive designers are no different
  10. 10. Save the floppy disk
  11. 11. Buttons vs links Good: Bad: Sample debate: http://www.ixda.org/node/15621
  12. 12. Should designers learn to code? 011110010110010101110011
  13. 13. It’s not crazy… it’s passion
  14. 14. 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 .
  15. 15. Hello, I’m Patrick A n d I h a v e a n o b s e s s i o n wi t h t h e we b
  16. 16. About me I teach at the Univ. of Missouri St. Louis About 15 years in the web industry Started in tech – shifted to design – and back again
  17. 17. Get in touch: mcneilp@gmail.com or @designmeltdown or pmcneil.com
  18. 18. Today's agenda 1. An overview of the User-Centered Design Process (90 min) 2. Deep dives into key topics (70 min)
  19. 19. PDF download at the end Got links?
  20. 20. I loathe bulleted presentations… Warning, impending hypocrisy
  21. 21. This is the tip of the iceberg Caution,
  22. 22. The User-Centered Design Process Part 1:
  23. 23. Backgrounds The background of UX professionals
  24. 24. Your backgrounds From the pre-conference survey: A previous group:
  25. 25. 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.
  26. 26. 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
  27. 27. Sure seems reasonable
  28. 28. Peeling potatoes vs
  29. 29. users define concept designdevelop deploy UCD Process overview UCD is a state of mind & it is not a one man show Start here…
  30. 30. UCD Step 1: Defining the project users define concept designdevelop deploy
  31. 31. Define the scale • Replacement or brand new product • Update to an existing product
  32. 32. Documentation Many options to select from
  33. 33. 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)?
  34. 34. 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/
  35. 35. Sitemap tools – text editor Sitemaps can be simple outlines and remind us that the purpose is more important than the tool.
  36. 36. 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
  37. 37. 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/
  38. 38. Generate documentation Content Inventories: A catalog of an entire websites content. 1.Title/logo 2.Input field labels 3.Remember me 4.Login button 5.Lost password link
  39. 39. Content inventories Learn more: Responsive Design Workflow by Stephen Hay
  40. 40. Site planning answers the question: What am I designing?
  41. 41. User research happens in concert with the fundamental project definition
  42. 42. 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
  43. 43. 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)
  44. 44. 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
  45. 45. 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
  46. 46. UCD boils down to seeking meaningful design insights over random acts of design
  47. 47. In the Define phase we include the user by inquiring of them
  48. 48. Activity time
  49. 49. Our product: A new tool to help holiday shoppers stay organized, find gift ideas & score the best deals
  50. 50. Steps: 1) Reflect 2) Ask questions 3) Answer questions 4) Reflect Time box 5 minutes per step organized, gift ideas & deals
  51. 51. Steps: 1) Reflect 2) Ask questions 3) Answer questions 4) Reflect Time box 5 minutes per step organized, gift ideas & deals
  52. 52. Steps: 1) Reflect 2) Ask questions 3) Answer questions 4) Reflect Time box 5 minutes per step organized, gift ideas & deals
  53. 53. Steps: 1) Reflect 2) Ask questions 3) Answer questions 4) Reflect Time box 5 minutes per step organized, gift ideas & deals
  54. 54. Share some results
  55. 55. My results: 1) The list repeats itself every year 2) Zero carry over year to year 3) Thoughtfulness over price tag
  56. 56. User research isn’t as hard as it might sound
  57. 57. UCD Step 2: Create concepts users define concept designdevelop deploy
  58. 58. Developing concepts includes • Interpret the documentation to develop possible solutions • Shift from listening to problem solving • Build wireframes and prototypes • User testing
  59. 59. 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!
  60. 60. 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
  61. 61. Workflow A note on:
  62. 62. Iterations are the key Wireframe something Visual design Test with a prototype Discover something
  63. 63. Lean on your user insights and work magic Beautiful, unicorn magic
  64. 64. Video time Source: http://www.youtube.com/watch?v=9wQkLthhHKA Usability test with a paper prototype
  65. 65. 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
  66. 66. More on usability testing in the second half.
  67. 67. In the Concept phase we include the user via Exploratory based usability tests
  68. 68. UCD Step 3: Design visual solutions users define design concept develop deploy
  69. 69. Design the interface using the blueprints Finally,
  70. 70. So much more than a suggestion Wireframes,
  71. 71. Sample wireframe http://newsignature.com/blog/2011/08/06/a-quick-introduction-to-wireframing/#.UnD57PnXRvB
  72. 72. Sample wireframe http://newsignature.com/blog/2011/08/06/a-quick-introduction-to-wireframing/#.UnD57PnXRvB
  73. 73. Be an interior designer
  74. 74. Style Tiles A stepping stone towards the full design: Minimize the radical leap from idea to visual design:
  75. 75. A design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. Style tiles:
  76. 76. Establish the visual voice before committing to a full blown design Style tiles:
  77. 77. An iterative tool for visual design Style tiles:
  78. 78. UI Design tools http://www.adobe.com/products/photoshop.html http://html.adobe.com/edge/reflow/
  79. 79. UI Design tools http://macaw.co/ http://www.bohemiancoding.com/sketch/
  80. 80. UI Design tools
  81. 81. 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%
  82. 82. In the Design phase we include the user via assessment based usability test
  83. 83. UCD Step 4: Development users define develop design concept deploy
  84. 84. Documentation can really pay off This is when all that
  85. 85. Toss it over the fence and forget about it You do not get to
  86. 86. In the Develop phase we include the user via Validation based usability test
  87. 87. UCD Step 5: Deploy into the wild users define deploy designdevelop concept
  88. 88. In the Deploy phase we include the user by measuring the use of the product
  89. 89. The foundation 1.Early focus on users and their tasks 2.Evaluation and measurement of product usage 3.Iterated design
  90. 90. Google Analytics Who What When From Events Goals Conversions And much more http://www.google.com/analytics/
  91. 91. Crazy Egg http://www.crazyegg.com/
  92. 92. Inspectlet http://www.inspectlet.com/
  93. 93. The definition of the next project Ideas and insights from here become
  94. 94. User Centered Design users define designdevelop deploy concept UX Designers & Information Architects UI Designers Front end dev’s & programmers SEO and web optimization folks Interaction Designers (IxD)
  95. 95. x x Did you notice something missing?
  96. 96. Do you like to read?
  97. 97. Sources Books referenced in this presentation & others I recommend:
  98. 98. Take 10 minutes… Break time Come back for some free books
  99. 99. Thank you for completing the survey!
  100. 100. Deep dives Part 2:
  101. 101. 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
  102. 102. users UCD Recap Because it is a lot to absorb:
  103. 103. Part 2 Outline What we will cover: 1.Interviews & Surveys 2.Wireframes & prototypes 3.Usability testing
  104. 104. Interviewing users A b r i e f g u i d e
  105. 105. Interviews will humanize your apps problems
  106. 106. Interviews almost always lead to ideas, solutions and features that you had not thought of.
  107. 107. Tips for interviewing users
  108. 108. 1) Interviewing is not selling – don’t defend your app – ask more questions
  109. 109. “Why is that feature important to you?” “Describe what you wanted to happen”
  110. 110. 2) Get actual users – not just your office neighbor
  111. 111. 3) Don’t ask hypothetical questions
  112. 112. 4) Embrace awkward silence
  113. 113. 5) Shut up – it’s not a conversation
  114. 114. After a round of interviews, use a survey to validate the results
  115. 115. 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!!!
  116. 116. Wireframes & Prototypes A b r i e f g u i d e
  117. 117. 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).
  118. 118. 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?
  119. 119. Wireframing tools
  120. 120. Wireframing tools http://inspirationhut.net/printable-paper/
  121. 121. Wireframing tools http://www.interfacesketch.com/
  122. 122. Wireframing tools http://www.uistencils.com/
  123. 123. My kit
  124. 124. Wireframing tools Many people also frequently use the following to wireframe: InDesign, PowerPoint, Keynote, Visio & HTML
  125. 125. Wireframing methods
  126. 126. 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)
  127. 127. Wireframes should be iterative
  128. 128. From wireframe to prototype
  129. 129. Tools for prototyping Many people also frequently use the following to prototype: InDesign, PowerPoint, Keynote, Visio & HTML
  130. 130. Demo PDF prototype Demo Axure prototype
  131. 131. Specialized tools https://fluidui.com/ (Is it a wireframe or a prototype? )
  132. 132. Specialized tools https://fluidui.com/ (Is it a wireframe or a prototype? )
  133. 133. Consider your workflow Again,
  134. 134. Not every prototype is made for the same purpose
  135. 135. The 5 types of prototypes
  136. 136. Type 1: To unify groups of people (often diverse people)
  137. 137. Type 2: To work through ideas
  138. 138. Type 3: Get buy in to the idea of UX design practices
  139. 139. Type 4: For usability testing
  140. 140. Type 5: Is it technically possible?
  141. 141. Build only what you need
  142. 142. Prototype formats • Digital prototypes • Paper Prototypes • Storyboards • Video based
  143. 143. Activity time
  144. 144. Our product: A mobile weather application… with a twist
  145. 145. 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
  146. 146. What does this do? Test on at least 3 users in each round. 5 second test:
  147. 147. Steps: 1) Think & sketch 2) Test your design 3) Sketch some more 4) Test your design Mobile weather app
  148. 148. Steps: 1) Think & sketch 2) Test your design 3) Sketch some more 4) Test your design Mobile weather app
  149. 149. Steps: 1) Think & sketch 2) Test your design 3) Sketch some more 4) Test your design Mobile weather app
  150. 150. Steps: 1) Think & sketch 2) Test your design 3) Sketch some more 4) Test your design Mobile weather app
  151. 151. Testing designs can be easy. & Wireframes can be packed with meaning.
  152. 152. Usability testing A n e x t r e m e l y b r i e f i n t r o d u c t i o n .
  153. 153. 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
  154. 154. 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?
  155. 155. Is this usable?
  156. 156. We can craft the usability as a way to influence the user experience
  157. 157. Accessibility: What’s good for a few, is often good for everyone.
  158. 158. Usability testing is our attempt to answer these questions – is it usable?
  159. 159. Nano Tests T h e 5 m i n u t e g e t s t a r t e d g u i d e t o u s a b i l i t y t e s t i n g .
  160. 160. Nano-usability tests as described in Observing the User Experience What we are going to do:
  161. 161. Bite sized guerilla usability testing designed to get you started in 5 minutes. Nano-usability testing
  162. 162. 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?
  163. 163. Keep your mouth shut. Did I mention,
  164. 164. You want to learn what is wrong. You are not trying to defend your creation. Remember,
  165. 165. Five users will find 80% of the problems (typically)
  166. 166. Many small tests, not one big test. Goal:
  167. 167. There is much more to usability testing. But this is a totally legit way to start. Naturally,
  168. 168. Beyond digital interfaces T h i s m o d e l wo r k s i n m a n y s c e n a r i o s
  169. 169. Presentation Planning a
  170. 170. New business Starting a
  171. 171. Wrapping up We a r e a l m o s t d o n e !
  172. 172. 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
  173. 173. users UCD Recap
  174. 174. Get a PDF of this presentation: pmcneil.com Get in touch: mcneilp@gmail.com or @designmeltdown or pmcneil.com
  175. 175. 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
  176. 176. 2) New iPhone app Interview users Survey users Flowchart Wireframes Prototype Usability testing Style Tile UI Design Usability testing Development Usability testing

×