Mtg prototyping

12TH OF MARCH 2013

Wireframing in Design Processes

Andreas Kure Thorngreen, Senior Lecturer, AU Herning, Denmark
Mind The Gap, Terrassa February 2013

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


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


A short note on the process
IDEA GENERATION


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?


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.


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!


Introduction:
PROTOTYPING, WIREFRAMING
AND FEELING SAFE


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.


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.


Advice:

Work on the right idea!

Keep it flexible! (for as long as possible)

Test it on humans!


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!


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!


What’s in it?
DECIDING AND ORGANIZING
CONTENTS


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?”


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?


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.


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


Exercise:
Make a sitemap (or clusters)
›  Make a logical division of the contents into pages or screens

›  How should features be grouped?


They may be as ugly as they want to, as long as they communicate!
SKETCHING


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


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.


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!


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!


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.


From bare-bone sketch to higher level of detail
WIREFRAMING


“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:


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.


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.


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.


Going wide or going deep?
HORIZONTAL AND VERTICAL
PROTOTYPES


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.


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.


WIREFRAMING: USER TESTING


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!


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.


And now to something more concrete: Wireframing applications!
WIREFRAMING: “PENCIL”


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


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


Downloading Pencil
http://pencil.evolus.vn/


Pencil Interface Toolbox
Canvas


Pencil Tool Groups


Adding shapes

Drag and drop shapes from the Toolbox,
move and resize them afterwards.


Arh… We can’t avoid looking at the app!
›  So let’s do that!
›  There are some NICE options waiting.


Exercise: Play Around!
›  Familiarize yourself with dragging elements to the canvas, move and resize them.


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:


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
upper right part of the screen:
Page Properties earlier. Choose the same
size as the previous page!


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.


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.


Exercise: Links
›  Make two pages and link them together.


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”



In “Export to Document” you can
choose different options.

“Single web page” exports an
interactive version.


You can then choose to export all
the pages:



Choose a destination and leave the
rest as it is.

The result is one html document,
where the links actually work!


The resulting ﬁles include
“index.html” which is the ﬁrst
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
The “Resources” folder contains a made. These pictures are inserted
so-called Stylesheet. This decides one after the other in the webpage.
the layout, colors and fonts of a When you click a link, it simply
website.
jumps down to that picture in the
same page.


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”


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


This is …
THE END


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.

Mtg prototyping

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (7)

Semelhante a Mtg prototyping

Semelhante a Mtg prototyping (20)

Mais de ipmindthegap

Mais de ipmindthegap (12)

Mtg prototyping