Here are the steps for user testing:
1. Select a volunteer to be the "user"
2. Explain to the user that you want honest feedback, there are no wrong answers
3. Have the user interact with your prototype/wireframe and think out loud
4. As the designer, observe where the user gets stuck or confused
5. Ask follow up questions like "what were you expecting"
6. Make notes to improve based on the user's experience
7. Thank the user for their participation and feedback!
The goal is to catch usability issues early when changes are still inexpensive. User testing helps create products people want to use.
1. 12TH OF MARCH 2013
Wireframing in Design Processes
Andreas Kure Thorngreen, Senior Lecturer, AU Herning, Denmark
Mind The Gap, Terrassa February 2013
2. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Now what?
1. Idea generation – A note and perhaps a quick and dirty workshop
2. The point of prototyping and wireframing
3. Deciding and organizing contents
4. Sketching ideas for design and layout
5. Wireframing in general
6. User testing
7. The Pencil Application
3. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Books on the subject(s)
› Brown, Dan M.: “Communicating Design: Developing Web Site Documentation
for Design and Planning”, Second Edition, New Riders, September 15, 2010.
› Garett, Jesse James: “The Elements of User Experience: User-centered Design
for the Web and Beyond”, New Riders, 2010.
› Jesmond, Allen & Chudley, James: “Smashing UX Design: Foundations for
Designing Online User Experiences (Smashing Magazine Book Series)”, 18 May
2012.
› Or hey: Go to your library or bookstores and look for books on wireframing and
prototyping
4. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
A short note on the process
IDEA GENERATION
5. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Research
› Before starting any creative process, you must consider:
› The aim and purpose of what you are doing.
› Who are the users?
› How would the users use what you are producing?
› Why would or should they use it?
6. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Idea Generation & Criticism
› Yellow Zone:
› Define the problem to be solved.
Or define which desire to create and then fulfill (who knew they needed to play
Angry Birds?)
› Green Zone:
› Unprejudiced and almost weird brainstorming, provoking as much output as
possible! What would catholics do? What would McDonalds do? Look at a
painting and write it all down.
› Red Zone:
› Criticizing ideas and determining which ideas, in whole, in part or even in
combination, might actually have chance of solving the problem defined.
7. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Just Checking …
› Do you have a problem defined that you want to address?
› Can it be solved with a web app?
› What we will be doing here, you can do on your own too!
8. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Introduction:
PROTOTYPING, WIREFRAMING
AND FEELING SAFE
9. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
The point of prototyping and wireframing
› Playing in a band?
› You rehearse before playing a concert.
› Doing Parkour?
› Tricks can be practiced on a parking lot, not on stairs or between buildings as the first
thing you do.
› Firefighter or soldier?
› You practice in a simulator and in simulated situations in order to react properly.
› An architect about to make a house?
› Plenty of drawings are made and calculations in order to not build the wrong building.
› Designing a car?
› Models are built and tested before putting them into mass production.
10. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
The point of prototyping and wireframing
› Designing an application, a website or the like? (that’s you)
› Acquire knowledge about the area
› Draw on paper
› Let ideas flow, create more and more concrete examples
› Pretend your drawing is the real thing when testing on humans, and get
real reactions!
› Make detailed colorful and perhaps even interactive models.
› Test, test and test on human subjects! Record them on video! Ha haa!
› Refine your designs when they are still flexible.
11. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Advice:
Work on the right idea!
Keep it flexible! (for as long as possible)
Test it on humans!
12. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Don’ts!
› Don’t start constructing right away!
It is often a waste of time OR becomes darlings you
must kill!
› Don’t start designing the final product before you are
sure you are working on the right thing.
› Don’t squeeze some good ideas or single design
pieces into a complete design, if the whole design is
suffering (kill your darlings)
› Don’t make it too complex.
KISS: Keep It Simple, Stupid!
13. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Flexibility in the process
Beginning:
Total flexibility! Lots of ideas! Wee!
As the process moves on:
More design choices made narrow in the
flexibility. But still quite some freedom!
Near the end:
Almost all choices made and
constructed, expensive to change!
14. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
What’s in it?
DECIDING AND ORGANIZING
CONTENTS
15. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Contents and Features: Core contents
› What features should the web app have in order to fulfill the goal?
› What features are outside the scope of the web app?
We must avoid that it becomes “bloated”, forcing inconsistent ideas in it.
› There needs to be some coherence in the app.
“Who you’re gonna call?”
16. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Exercise:
Individual brainstorm on features & contents
› Each group and group member has lots of ideas!
Let’s exploit that fact:
› Each group member writes down on paper all ideas she/he can
think of relating to what features the web app should have.
› No talking! No criticism! Live and let live!
› Provoke more ideas by thinking:
› What would Antoni Gaudi do?
› What would McDonalds do?
› What would a madman do?
› What would the president of the United States do?
17. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Exercise:
Group similar ideas about feature ideas
› Now in the groups, you need to cooperate in organizing the material.
› Introduce and organize:
1. All ideas are put on the table
2. Group the ideas when they are alike or logically the same
3. Select the best ones and find a coherence in them.
4. If something doesn’t fit, either it must be discarded, reformed or the whole
idea rephrased to fit that.
18. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Organizing contents: Sitemap
› Now, the ideas should be divided into pages or sections
› In web design it’s called a sitemap, because it’s a map of the site:
What’s on which page?
Welcome Events Sign up Contact
19. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Exercise:
Make a sitemap
› Make a logical division of the contents into pages or screens
› How should features be grouped?
20. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
They may be as ugly as they want to, as long as they communicate!
SKETCHING
21. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Sketching: The Purpose
› To capitalize on the flexibility of the beginning of the process.
› It’s very easy to change a sketch
– but not at all easy to change a whole application!
› To get specific and general ideas for any part of the webapp, and have
capture them on paper!
› You can sketch out:
› Whole layouts
› One part of the design, a header or logo
22. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Exercise: Individual sketching ideas
› Your task:
› Individual sketching of ideas for the problem defined from the top of
your head.
› No one talks to each other!
23. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Inspiration: Is it dangerous?
› Quick answer: No!
› Everyone imitates each other legally.
Rounded corners, colors, music styles
- all media products imitate each other a lot!
› Copyrights and plagiarism dictate that we are not to copy a design in its
entirety … but we may still use similar ideas to theirs!
24. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Exercise: Inspiration and sketching part I
› Look at apps on your phone, and websites online
› Find good looking layouts, logos, top bars, backgrounds etc.
› Make a sketch of the ideas on paper. Just keep drawing.
› (You may talk during this exercise)
› If there are certain colors to use, you can just write what color it is, or perhaps use crayons?
› You can find inspiration for:
› Placements of different sections on the site or app (layout)
› Logo design, complete with details and colors
› Sizes of pictures, amount of text, decorations
› Ways it moves, animations
› Et cetera!
25. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Exercise: Inspiration and sketching part II:
Selecting and Combining the Ideas
› Now combine the sketches you have: The best ideas from
both rounds.
› Put the sketches in the middle of the table
› Select the good ones you can agree are good
› Group ideas in logical portions
› Keep the rest, but separated.
› Keep it logical! It should be surrounding the same subject.
26. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
From bare-bone sketch to higher level of detail
WIREFRAMING
27. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
“Wireframe”
› The word “wireframe” is often
used in 3D modeling, where a
model without textures can be
previewed to see the whole
shape:
However for websites and
other 2D apps, we work
with a 2D grid:
28. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Wireframe Detail Level
› Low-fidelity Wireframes:
› Rough sketch or quick mock-up. Quick to produce,
quite abstract, rectangles and labelling.
› High-fidelity Wireframes:
› Incorporates higher level of detail, that more
closely matches the actual design of the final
webpage.
Source: Wodtke, Christina & Govella, Austin: “Information Architecture: Blueprints for the Web”, Second Edition, New Riders. ISBN
978-0-321-59199-9.
29. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Wireframes: Summary
› So:
› Wireframes can be made on paper, on computer screens or wherever you
can make a model of the web app or website
› Wireframes can be of low or high detail
› The point of them is to make design decisions before constructing more
detailed versions that take longer to edit.
30. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Exercise: Create a paper wireframe
› Spend max. 5 minutes putting together 2 – 3 screens of your app.
(Right now, we are just trying this technique out, later you will be more thorough)
› It must have:
› Buttons for navigation
› Contents with information of some sort
› Use the sketches you have already made
› Keep it lo-fi – No colors, just placement of elements.
31. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Going wide or going deep?
HORIZONTAL AND VERTICAL
PROTOTYPES
32. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Horizontal and Vertical Prototypes
› A horizontal prototype is testing a broad palette of features and gives
an overview of what the application might look like in the end. It is not
very detailed, but focuses on the broad features.
› A vertical prototype selects a certain area and makes a detailed model
of how it would look. It would resemble the final product quality.
33. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Horizontal and Vertical Prototypes
› Why is this relevant?
› A prototype is a model to test and show certain aspects of a system, perhaps all.
› When making a prototype, one may choose to show a certain part of the system.
› So, WHY is that relevant here? You may want to decide at some point that you want to
go for either a horizontal or vertical prototype, or make a complete prototype.
34. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
WIREFRAMING: USER TESTING
35. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
User Testing
› Why user testing?
› A common mistake is forgetting the user!
› We tend to make products the way we like them, and then nothing is sold or used because the users
didn’t like it or couldn’t figure out how to use it.
› Why aren’t designers and technology developers doing it?
› Sometimes, I think it’s because they’re LAZY!
› Other times they are ARROGANT!
› It could also be because they don’t have money or the time to do it.
› Or, maybe they don’t know about the option, or aware of the importance.
› How user testing?
› We use our prototype / wireframe!
› We perform a little game, where one acts as the user, the other as the machine!
36. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Exercise: User Testing
› You need: A wireframe for each page or screen in the application, possibly
with buttons to switch between them.
› You can choose to use a wireframe on paper or one made in Pencil
› Work in pairs
› One has the role of the user. (S)he must think aloud and try to use the
application.
› The other is the machine and switches the pages when the user asks for it.
› You can also record the session on video for later scrutiny.
37. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
And now to something more concrete: Wireframing applications!
WIREFRAMING: “PENCIL”
38. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Examples of wireframing applications
› Balsamiq Mockups
› MockFlow
› Axure
› Hotgloo
› Mockingbird
› Pencil Project (we’ll try this one!)
› For more results:
› http://webdesignledger.com/tools/10-excellent-tools-for-creating-web-design-wireframes
39. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
What is Pencil?
› Pencil is a wireframing application!
› It can be used to:
› Create a sketch like you would on paper
› Create more detailed sketches, or prototypes, of the site you are designing
› Create a (or an almost) complete design of the website
› Export images of the design
› Test link structure
40. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Downloading Pencil
http://pencil.evolus.vn/
41. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Pencil Interface Toolbox Canvas
42. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Pencil Tool Groups
43. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Adding shapes
Drag and drop shapes from the Toolbox, move
and resize them afterwards.
44. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Arh… We can’t avoid looking at the app!
› So let’s do that!
› There are some NICE options waiting.
45. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Exercise: Play Around!
› Familiarize yourself with dragging elements to the canvas, move and resize them.
46. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Page Properties Double-click “Untitled Page” to
see options for the page,
including size.
Set page title.
Set size to the page size you are
designing for!
Set a background color:
47. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Links between pages
› You can make several pages in the site, and then make a menu with links to
the different pages.
› First, of course, there should be more than one page:
Create a new page with the button in the The same options are available as for the Page
upper right part of the screen: Properties earlier. Choose the same size as the
previous page!
48. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Links between pages
You can now switch between pages:
Each page can be organized the way you want.
However, each page in a site always has the same basic layout, where only the arrangement
of the content changes.
49. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Links between pages
2. Double-click to rename.
1. Drag a Hyperlink to the work area:
3. Right-click and select “Link to”
and choose the page you want the
link to link to.
50. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Exercise: Links
› Make two pages and link them together.
51. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Exporting the wireframe
Your options for export are:
Export to images in PNG format
Export as Document, including HTML files as one of the
options.
Go to:
“Document > Export Page as PNG” or
“Document > Export Document”
52. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Exporting the wireframe
In “Export to Document” you can
choose different options.
“Single web page” exports an
interactive version.
53. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Exporting the wireframe
You can then choose to export all the
pages:
54. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Exporting the wireframe
Choose a destination and leave the
rest as it is.
The result is one html document,
where the links actually work!
55. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Exporting the wireframe
The resulting files include
“index.html” which is the first page
opened by the browser. Double-
click to open the page in your
default browser.
The folder “pages” contains pictures
of the pages you have made. These
The “Resources” folder contains a pictures are inserted one after the
so-called Stylesheet. This decides other in the webpage. When you click
the layout, colors and fonts of a a link, it simply jumps down to that
website. picture in the same page.
56. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
Exercise: Export wireframe
› Export the wireframe as HTML and study the result.
› To export it:
› Document > Export Document
› Choose:
› Single Web Page
› All Pages in Document
› Choose a destination – Your desktop or the like
› Open the exported wireframe:
› Double-click “index.html”
57. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
User testing again! Horray!
› Now we can go on to do the same thing again, this time with a wireframe
of higher fidelity.
› Maybe this time, we should let someone else use our app?
› Remember:
› Let the user think aloud
› Do not interrupt or help!
› Record the session on video
58. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
This is …
THE END
59. WIREFRAMING IN DESIGN PROCESSES 12th of March 2013
Andreas Kure Thorngreen
Senior Lecturer, Master of Multimedia
This is the end …
Thank you for participating, I am looking forward to coaching you!
“Farvel og på gensyn” – Thank you, see you again!
Best wishes from Andreas Kure Thorngreen, AU Herning, Denmark.