Your SlideShare is downloading. ×
Interactive Design
What you need to know to be an
effective web designer
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?
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?
Hello, I’m Patrick
And I have an obsession with the web
Get in touch:
mcneilp@gmail.com
or @designmeltdown
or pmcneil.com
Today's agenda
1. The User-Centered Design Process (2 hrs)
2. Core technologies of the web (15 min)
3. Hot topics & trends...
Got links?

PDF download
at the end
Part 1:

The User-Centered
Design Process
Backgrounds
The background of UX professionals
Your backgrounds
From the pre-conference survey
You’re already an
interactive designer
You just need some new tools & a fresh perspective
UCD gives us
the lens we need
User-centered design (UCD) is a
design philosophy that puts the
user of a product, application, or
experience, at the cent...
Peeling potatoes

vs
UCD Process overview
UCD is a state of mind & it is not a one man show

Start here…

define

deploy

concept

users

devel...
UCD Step 1:

Defining the project
define

deploy

develop

users

concept

design
Define the scale
• Replacement or brand new product
• Update to an existing product
Define basic requirements
• What should it do (features, functionality, what
it does etc)?
• How will we measure our succe...
Generate documentation
• Write personas – A rich description of typical users
• http://uxmag.com/articles/personas-the-fou...
Generate documentation
• Activity diagrams – Flowcharts showing how a process will work

Source: http://www.edmullen.com/w...
Generate documentation
Site maps – defines
the sites content and
information
architecture
Information
Architecture (IA) is...
Methods for gathering data
• Interviews (great for exploring ideas) (requirements)
• Questionnaires / surveys (a great pre...
As a result we have:
• A clear description of the project
• Specific, and measurable goals
• A detailed understanding of t...
Building requirements

Start here…

Define
Requirements

Gather

users

Interpret

Analyze
Tools of the trade
• For charting (flowcharts etc):
• Visio (PC) ($300)
• OmniGraffle (MAC) ($99)
• Axure (PC & MAC) ($289...
Learn more
If you would like to learn more about this phase:

Learn to make:
• Personas
• Concept models
• Site maps
• Flo...
UCD boils down to
seeking meaningful
design insights over
random acts of design
Activity time
Our product:

A new tool to help
holiday shoppers
stay organized,
find gift ideas &
score the best deals
Steps:

1)
2)
3)
4)

Reflect
Ask questions
Answer questions
Reflect

Time box 5 minutes per step

organized, gift ideas & ...
Steps:

1)
2)
3)
4)

Reflect
Ask questions
Answer questions
Reflect

Time box 5 minutes per step

organized, gift ideas & ...
Steps:

1)
2)
3)
4)

Reflect
Ask questions
Answer questions
Reflect

Time box 5 minutes per step

organized, gift ideas & ...
Steps:

1)
2)
3)
4)

Reflect
Ask questions
Answer questions
Reflect

Time box 5 minutes per step

organized, gift ideas & ...
Share some results
My results:

1) The list repeats itself every year
2) Zero carry over year to year
3) Thoughtfulness over price tag
UCD isn’t so complex
and you didn’t even need to know HTML
UCD Step 2:

Create concepts
define

deploy

develop

users

concept

design
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...
Elements of Wireframes
Wireframes address three core
elements
1) Information design – the placement
and prioritization of ...
Wireframing tools

Many people also frequently use the following to wireframe:
InDesign, PowerPoint, Keynote, Visio & HTML
Wireframing tools
http://blokkfont.com/
http://www.wirify.com/
Paper wireframing
http://www.uistencils.com/
Prototypes
Creating the illusion of functionality
They don’t need to be complete and typically only
simulate a small set o...
Tools for prototyping

Many people also frequently use the following to prototype:
InDesign, PowerPoint, Keynote, Visio & ...
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? )
Lean on your user insights
and work magic
Beautiful, unicorn magic
User testing

Great, so how do we actually test this stuff?
User testing tools
Guerrilla testing is the place to start (and end): http://silverbackapp.com/
Iterations are the key
Wireframe
something

Discover
something

Test with a
prototype
Cost to change/fix
1x cost to change during requirements / design
5x cost to change during development
25x cost to change ...
Test early & often
Results:

A set of wireframes
and prototypes packed
with meaningful
design decisions.
Video time

Usability test with a paper prototype

Source: http://www.youtube.com/watch?v=9wQkLthhHKA
Observations
• It takes practice
• Focus on the user experience of the app and not
anything technical or secondary – it is...
UCD Step 3:

Design visual solutions
define

deploy

develop

concept

users
design
Finally,

Design the interface
using the blueprints
Wireframes,

So much more than
a suggestion
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
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/
More testing!

Test the interface
using the same tools
User testing tools
User observation
UCD Step 4:

Development
define

deploy

concept

users

develop

design
This is when all that

Documentation
can really pay off
You do not get to

Toss it over the fence
and forget about it
Guess what?

More testing!
UCD Step 5:

Deploy into the wild
define

deploy

develop

concept

users
design
Still testing, but it looks a little different:

Monitor and look for
helpful insights
Google Analytics
http://www.google.com/analytics/

Who
What
When
From
Events
Goals
Conversions
And much more
Optimizely
https://www.optimizely.com/
Crazy Egg
http://www.crazyegg.com/
Inspectlet
http://www.inspectlet.com/
Ideas and insights from here become

The definition of the
next project
User Centered Design
define

UX Designers &
Information
Architects

SEO and web
optimization folks

deploy

concept

users...
x
x

Did you notice
something missing?
Large site redesigns
are dead
Do you like to read?
Sources
Books referenced in this presentation & others I recommend:
Learning code
The books to get for a foundation in HTML, CSS and JavaScript
Break time

Take 10 minutes…
Come back for some free books
Thank you for
completing the survey!
Part 2:

Core technologies
of the web
A high level overview in 15 minutes or less
HTML & CSS

Done!
User
User
Web Server
Web Server
Database
API
Questions?
Part 3:

Hot topics and trends
Trend 1:

Skeumorphic vs
flat design
The battle rages on…
The original debate
Contributors:
- MS Metro UI + iOS7 + Android
- Responsive design
- Greater focus on Type

Source: http...
Flat designs
Less generic flat design
Note the reduced focus on flat – and increased focus on overall style
Web skeuomorphs
They tend towards painful…and often feel very 2004
What not to do: http://skeu.it
So what is,

the opposite of
flat design?
Non-flat design
Trend 2:

Mobile first

Mobile design influencing desktop design
The Navicon on the desktop
Navicon tools
Slide out panels
Slide out panel tools
Trend 3:

Story telling
Creating stories instead of brochures
Tell a story
Trend 4:

Atmosphere
Setting a tone through style
Super sized imagery
Image tools
Via thematic design
A nice side effect of flat design – thematic design feels even more distinct.
Trends from the future
Trendy fortune telling…satisfaction guaranteed…for 24 hours
Gestures

Another step in the mobile evolution
Gestures
Cool resource: http://static.lukew.com/TouchGestureCards.pdf
Gesture tools
Video

More video integration – video will be the new parallax
Video
Video tools
Finally,

A few random predictions
That may, or may not hold true
Flat Design will fade in
popularity as yet another
trend. It’s downfall being
its generic nature.
Don’t get me wrong – the...
The desktop is truly going
to become a secondary
platform – it will be the
afterthought mobile was
5 years ago.
Today's trends are the
retro trends of the future!
We are just ahead of our time.
Get a PDF of this
presentation: pmcneil.com
Get in touch:
mcneilp@gmail.com
or @designmeltdown
or pmcneil.com
Intro to User Centered Design Workshop
Intro to User Centered Design Workshop
Upcoming SlideShare
Loading in...5
×

Intro to User Centered Design Workshop

14,495

Published on

In this three hour workshop I present an introduction to the UCD process, an overview of the basic technologies of the web and a survey of current Mobile Web Design trends.

Published in: Design, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
14,495
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
9
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Intro to User Centered Design Workshop"

  1. 1. Interactive Design What you need to know to be an effective web designer
  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?
  6. 6. Interactive designers are no different
  7. 7. Save the floppy disk
  8. 8. Buttons vs links Good: Bad: Sample debate: http://www.ixda.org/node/15621
  9. 9. Should designers learn to code? 011110010110010101110011
  10. 10. It’s not crazy… it’s passion
  11. 11. Are you this enthusiastic about interactive design?
  12. 12. Hello, I’m Patrick And I have an obsession with the web
  13. 13. Get in touch: mcneilp@gmail.com or @designmeltdown or pmcneil.com
  14. 14. Today's agenda 1. The User-Centered Design Process (2 hrs) 2. Core technologies of the web (15 min) 3. Hot topics & trends (30 min)
  15. 15. Got links? PDF download at the end
  16. 16. Part 1: The User-Centered Design Process
  17. 17. Backgrounds The background of UX professionals
  18. 18. Your backgrounds From the pre-conference survey
  19. 19. You’re already an interactive designer You just need some new tools & a fresh perspective
  20. 20. UCD gives us the lens we need
  21. 21. 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.
  22. 22. Peeling potatoes vs
  23. 23. UCD Process overview UCD is a state of mind & it is not a one man show Start here… define deploy concept users develop design
  24. 24. UCD Step 1: Defining the project define deploy develop users concept design
  25. 25. Define the scale • Replacement or brand new product • Update to an existing product
  26. 26. Define basic requirements • What should it do (features, functionality, what it does etc)? • 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)?
  27. 27. Generate documentation • 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
  28. 28. 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/
  29. 29. 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/
  30. 30. Methods for gathering data • 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)
  31. 31. As a result we have: • A clear description of the project • Specific, and measurable goals • A detailed understanding of the user • Vision for how the product will be used • Best of all, tangible assets the team can share
  32. 32. Building requirements Start here… Define Requirements Gather users Interpret Analyze
  33. 33. Tools of the trade • For charting (flowcharts etc): • Visio (PC) ($300) • OmniGraffle (MAC) ($99) • Axure (PC & MAC) ($289) (free to educators) • Card sorting • Online tool: OptimalSort ($109/month) • Free software (both free): • PC: UXSort • MAC: xSort • Survey tools • Survey Monkey (free, $17+) • Wufoo (free and up) • Google Docs (FREE!)
  34. 34. 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
  35. 35. UCD boils down to seeking meaningful design insights over random acts of design
  36. 36. Activity time
  37. 37. Our product: A new tool to help holiday shoppers stay organized, find gift ideas & score the best deals
  38. 38. Steps: 1) 2) 3) 4) Reflect Ask questions Answer questions Reflect Time box 5 minutes per step organized, gift ideas & deals
  39. 39. Steps: 1) 2) 3) 4) Reflect Ask questions Answer questions Reflect Time box 5 minutes per step organized, gift ideas & deals
  40. 40. Steps: 1) 2) 3) 4) Reflect Ask questions Answer questions Reflect Time box 5 minutes per step organized, gift ideas & deals
  41. 41. Steps: 1) 2) 3) 4) Reflect Ask questions Answer questions Reflect Time box 5 minutes per step organized, gift ideas & deals
  42. 42. Share some results
  43. 43. My results: 1) The list repeats itself every year 2) Zero carry over year to year 3) Thoughtfulness over price tag
  44. 44. UCD isn’t so complex and you didn’t even need to know HTML
  45. 45. UCD Step 2: Create concepts define deploy develop users concept design
  46. 46. Developing concepts includes • Interpret the documentation to develop possible solutions • Shift from listening to problem solving • Build wireframes • Create prototypes • User testing • This stage is much more iterative (or at least it should be)
  47. 47. 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!
  48. 48. 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?
  49. 49. Wireframing tools Many people also frequently use the following to wireframe: InDesign, PowerPoint, Keynote, Visio & HTML
  50. 50. Wireframing tools http://blokkfont.com/ http://www.wirify.com/
  51. 51. Paper wireframing http://www.uistencils.com/
  52. 52. 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
  53. 53. Tools for prototyping Many people also frequently use the following to prototype: InDesign, PowerPoint, Keynote, Visio & HTML
  54. 54. Demo PDF prototype Demo Axure prototype
  55. 55. Specialized tools https://fluidui.com/ (Is it a wireframe or a prototype? )
  56. 56. Specialized tools https://fluidui.com/ (Is it a wireframe or a prototype? )
  57. 57. Lean on your user insights and work magic Beautiful, unicorn magic
  58. 58. User testing Great, so how do we actually test this stuff?
  59. 59. User testing tools Guerrilla testing is the place to start (and end): http://silverbackapp.com/
  60. 60. Iterations are the key Wireframe something Discover something Test with a prototype
  61. 61. Cost to change/fix 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).
  62. 62. Test early & often
  63. 63. Results: A set of wireframes and prototypes packed with meaningful design decisions.
  64. 64. Video time Usability test with a paper prototype Source: http://www.youtube.com/watch?v=9wQkLthhHKA
  65. 65. Observations • It takes practice • Focus on the user experience of the app and not anything technical or secondary – it is about the essence of the app • Paper prototype allows for you to accommodate unexpected things • Record the session! • 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. UCD Step 3: Design visual solutions define deploy develop concept users design
  67. 67. Finally, Design the interface using the blueprints
  68. 68. Wireframes, So much more than a suggestion
  69. 69. Sample wireframe http://newsignature.com/blog/2011/08/06/a-quick-introduction-to-wireframing/#.UnD57PnXRvB
  70. 70. Sample wireframe http://newsignature.com/blog/2011/08/06/a-quick-introduction-to-wireframing/#.UnD57PnXRvB
  71. 71. Be an interior designer
  72. 72. UI Design tools http://www.adobe.com/products/photoshop.html http://html.adobe.com/edge/reflow/
  73. 73. UI Design tools http://macaw.co/ http://www.bohemiancoding.com/sketch/
  74. 74. More testing! Test the interface using the same tools
  75. 75. User testing tools User observation
  76. 76. UCD Step 4: Development define deploy concept users develop design
  77. 77. This is when all that Documentation can really pay off
  78. 78. You do not get to Toss it over the fence and forget about it
  79. 79. Guess what? More testing!
  80. 80. UCD Step 5: Deploy into the wild define deploy develop concept users design
  81. 81. Still testing, but it looks a little different: Monitor and look for helpful insights
  82. 82. Google Analytics http://www.google.com/analytics/ Who What When From Events Goals Conversions And much more
  83. 83. Optimizely https://www.optimizely.com/
  84. 84. Crazy Egg http://www.crazyegg.com/
  85. 85. Inspectlet http://www.inspectlet.com/
  86. 86. Ideas and insights from here become The definition of the next project
  87. 87. User Centered Design define UX Designers & Information Architects SEO and web optimization folks deploy concept users Interaction Designers (IxD) develop design Front end dev’s & programmers UI Designers
  88. 88. x x Did you notice something missing?
  89. 89. Large site redesigns are dead
  90. 90. Do you like to read?
  91. 91. Sources Books referenced in this presentation & others I recommend:
  92. 92. Learning code The books to get for a foundation in HTML, CSS and JavaScript
  93. 93. Break time Take 10 minutes… Come back for some free books
  94. 94. Thank you for completing the survey!
  95. 95. Part 2: Core technologies of the web A high level overview in 15 minutes or less
  96. 96. HTML & CSS Done!
  97. 97. User
  98. 98. User
  99. 99. Web Server
  100. 100. Web Server
  101. 101. Database
  102. 102. API
  103. 103. Questions?
  104. 104. Part 3: Hot topics and trends
  105. 105. Trend 1: Skeumorphic vs flat design The battle rages on…
  106. 106. The original debate Contributors: - MS Metro UI + iOS7 + Android - Responsive design - Greater focus on Type Source: http://sachagreif.com/flat-pixels/
  107. 107. Flat designs
  108. 108. Less generic flat design Note the reduced focus on flat – and increased focus on overall style
  109. 109. Web skeuomorphs They tend towards painful…and often feel very 2004 What not to do: http://skeu.it
  110. 110. So what is, the opposite of flat design?
  111. 111. Non-flat design
  112. 112. Trend 2: Mobile first Mobile design influencing desktop design
  113. 113. The Navicon on the desktop
  114. 114. Navicon tools
  115. 115. Slide out panels
  116. 116. Slide out panel tools
  117. 117. Trend 3: Story telling Creating stories instead of brochures
  118. 118. Tell a story
  119. 119. Trend 4: Atmosphere Setting a tone through style
  120. 120. Super sized imagery
  121. 121. Image tools
  122. 122. Via thematic design A nice side effect of flat design – thematic design feels even more distinct.
  123. 123. Trends from the future Trendy fortune telling…satisfaction guaranteed…for 24 hours
  124. 124. Gestures Another step in the mobile evolution
  125. 125. Gestures Cool resource: http://static.lukew.com/TouchGestureCards.pdf
  126. 126. Gesture tools
  127. 127. Video More video integration – video will be the new parallax
  128. 128. Video
  129. 129. Video tools
  130. 130. Finally, A few random predictions That may, or may not hold true
  131. 131. Flat Design will fade in popularity as yet another trend. It’s downfall being its generic nature. Don’t get me wrong – these sites are delicious.
  132. 132. The desktop is truly going to become a secondary platform – it will be the afterthought mobile was 5 years ago.
  133. 133. Today's trends are the retro trends of the future! We are just ahead of our time.
  134. 134. Get a PDF of this presentation: pmcneil.com Get in touch: mcneilp@gmail.com or @designmeltdown or pmcneil.com

×