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.
22. 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. Define the scale
• Replacement or brand new product
• Update to an existing product
27. 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)?
28. 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
29. 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/
30. 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/
31. 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)
32. 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
35. 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
36. UCD boils down to
seeking meaningful
design insights over
random acts of design
47. 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)
48. 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!
49. 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?
50. Wireframing tools
Many people also frequently use the following to wireframe:
InDesign, PowerPoint, Keynote, Visio & HTML
53. 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
54. Tools for prototyping
Many people also frequently use the following to prototype:
InDesign, PowerPoint, Keynote, Visio & HTML
61. Iterations are the key
Wireframe
something
Discover
something
Test with a
prototype
62. 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).
66. 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
88. 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
108. The original debate
Contributors:
- MS Metro UI + iOS7 + Android
- Responsive design
- Greater focus on Type
Source: http://sachagreif.com/flat-pixels/