@DougGapinski
#psuweb

mStoner.com It’s totally not what
it sounds like.

THE NEED TO CHANGE HOW
WE PROTOTYPE 8 WAYS TO CHANGE HOW WE PROTOTYPE QUESTIONS

Remember that the primary goal
of all website prototypes is better websites.

How?

Prototypes can help us expose
design flaws before we ship.

Prototypes can help us plan
websites for the extreme design constraints imposed by multiple devices. 29 inches wide LG monitor 2.3 inches wide iPhone

Prototypes can help us plan
content needs.

Prototypes can help us with
client e̶d̶u̶c̶a̶t̶i̶o̶n̶ collaboration.

Prototypes can help us with
iterative development. UX advice from TLC: Don’t go chasing waterfall (process)!

THE NEED TO CHANGE HOW
WE PROTOTYPE

Using multiple devices to access
the internet is how we complete tasks now. Source

40% of adults start an
activity on one device and finish it on another. Source

Multi-device use increases for every
device owned. Source

If two devices are owned:
53% switch devices to complete tasks. If 3 devices are owned: 77% switch devices to complete tasks. Source

People tend to finish tasks
on larger screens. Source

When using two or more
devices: 58% finish on a laptop 22% finish on a tablet Source

Source: Uversity / Zinch 97%
of students have visited a college website on a smartphone or tablet. Source: Uversity / Zinch

Source: Uversity / Zinch Nearly
66% said the experience was “just ok” or “challenging.” Source: Uversity / Zinch

The website prototypes we build
should help us better address the realities of different screen sizes and input types.

Traditional wireframes have not aged
well as a prototype.

“Traditional wireframes are dead.”–@smiley

8 WAYS TO CHANGE HOW
WE PROTOTYPE FOR THE MULTI-DEVICE WEB

#1 Make real content a
priority in your prototypes.

All frame + no content
= unforeseen problems at launch

A mobile-first content prototype Source:
Sparkbox

A mobile-first content prototype Source:
Sparkbox

This content prototype has little
to no style, but it demonstrates: • mobile-first methodology – a single column of stacked content • real content (not lorem ipsum!) • content models (subhead, headline, blurb, line length) • the order of content on the page

Provide a minimum viable content
plan with the prototype.

In Brown’s case, a minimum
viable content plan included a plan for: • social media needed to support the site • longer form stories with embedded media • interactive timeline content • content models for the above (fields, word count, image needs)

250.brown.edu

250.brown.edu

#2 Build prototypes that are
less specific about layout and more specific about style.

Style tiles by @samathatoy

Visual inventory by @danielmall Content
ideas Color Tone

#3 Prototype for multiple screen
sizes.

NOT ALL DESIGNERS ARE UNICORNS!

uxpin.com

uxpin.com sitemap elements library preview
breakpoints editing tools settings / previews

skinny medium wide

Zurb Foundation: responsive HTML templates,
in-browser prototypes Foundation Templates by Zurb

Pattern Lab by @brad_frost and
@dmolsen

Pattern Lab is: • an
iterative design and development tool that can be used for prototyping • a static site generator, similar to Jekyll or Octopress • a viewport resizer • annotation tool

#4 Plan for progressive disclosure
in prototypes.

Progressive disclosure–in the context of
responsive design–is the idea of displaying fewer items or shorter content entries on smaller screens.

Prototyping progressive disclosure: showing fewer
items on smaller displays

Ideally a user can still
get to all the same content regardless of device. They just might see shorter initial versions or fewer initial entries at one time on smaller screens.

DID SOMEONE SAY CONTENT PARTY

PREVENT THE 13 FEET LONG
WEBSITE Image source: @lukew

PREVENT THE 7.5 MILE LONG
WEBSITE Image source: @benbrown

#5
Prototype interactions.

Tools for prototyping interactions: Adobe
Fireworks (desktop app) Flinto (web-based app)

A tool for prototyping interactions
if you’re good with code: Famo.us (JavaScript framework)

#6
Test your prototypes.

“The best results come from
testing no more than 5 users and running as many small tests as you can afford.” Source: Nielsen Norman Group

#7 Always explain to the
client what the purpose of the prototype is.

It’s 2014. Most clients have
seen a wireframe before. It’s 2014. Most clients have not seen a style tile before. It’s your job to explain what the prototype is and what kind of feedback you need.

“It’s part of our job
to decide the most appropriate way to share our work with a client.” —@laurakalbag Source: A List Apart

#8 When it comes to
prototyping, there is no magic bullet.

Use the methods that best
suit each individual client and your team.

Questions?

Thanks!
@DougGapinski mstoner.com