Prototypes can help make or break the usability of a website. In the age of the multi-device web, how can we use prototypes to craft better experiences for our end users – and collaborate more effectively with internal teams and clients along the way? This session, originally presented at the Penn State Web Conference 2014, covers eight flexible ideas (and a number of tools) for building better prototypes for a variety of screen sizes and input types.

2. @DougGapinski
#psuweb

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

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

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

6. How?

7. Prototypes can help us expose design flaws before we ship.

8. 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

9. Prototypes can help us
plan content needs.

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

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

12. THE NEED TO CHANGE HOW WE PROTOTYPE

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

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

15. Multi-device use
increases for every
device owned.
Source

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

17. People tend to
finish tasks on
larger screens.
Source

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

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

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

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

22. Traditional
wireframes have
not aged well as
a prototype.

23. “Traditional wireframes are dead.”–@smiley

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

25. #1
Make real content a priority
in your prototypes.

26. All frame + no content = unforeseen problems at launch

27. A mobile-first content prototype
Source: Sparkbox

28. A mobile-first content prototype
Source: Sparkbox

29. 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

30. Provide a minimum viable
content plan with the prototype.

31. 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)

32. 250.brown.edu

33. 250.brown.edu

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

35. Style tiles by @samathatoy

36. Visual inventory by @danielmall
Content ideas
Color
Tone

37. #3
Prototype for multiple screen sizes.

38. NOT ALL DESIGNERS ARE UNICORNS!

39. uxpin.com

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

41. skinny medium wide

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

43. Pattern Lab by @brad_frost and @dmolsen

44. 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

45. #4
Plan for progressive disclosure
in prototypes.

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

47. Prototyping progressive disclosure:
showing fewer items on smaller displays

48. 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.

49. DID SOMEONE SAY CONTENT PARTY

50. PREVENT
THE
13 FEET
LONG
WEBSITE
Image source: @lukew

51. PREVENT THE 7.5 MILE LONG WEBSITE
Image source: @benbrown

52. #5
Prototype interactions.

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

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

55. #6
Test your prototypes.

56. “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

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

60. 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.

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

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

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

64. Questions?

65. Thanks!
@DougGapinski mstoner.com