Multi-Device Prototypes

65
mStoner MULTI-DEVICE PROTOTYPES 8 ways to improve how we prototype websites

description

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.

Transcript of Multi-Device Prototypes

Page 1: Multi-Device Prototypes

mStoner

MULTI-DEVICE PROTOTYPES

8 ways to improve how we prototype websites

Page 3: Multi-Device Prototypes

mStoner.com

It’s totally not what it sounds like.

Page 4: Multi-Device Prototypes

THE NEED TO CHANGE HOW WE PROTOTYPE

8 WAYS TO CHANGE HOW WE PROTOTYPE

QUESTIONS

Page 5: Multi-Device Prototypes

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

Page 6: Multi-Device Prototypes

How?

Page 7: Multi-Device Prototypes

Prototypes can help us expose design flaws before we ship.

Page 8: Multi-Device Prototypes

Prototypes can help us plan websites for the extreme design constraints imposed by multiple devices.

29 inches wideLG monitor

2.3 inches wideiPhone

Page 9: Multi-Device Prototypes

Prototypes can help us plan content needs.

Page 10: Multi-Device Prototypes

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

Page 11: Multi-Device Prototypes

Prototypes can help us with iterative development.

UX advice from TLC: Don’t go chasing waterfall (process)!

Page 12: Multi-Device Prototypes

THE NEED TO CHANGE HOW WE PROTOTYPE

Page 19: Multi-Device Prototypes

Source: Uversity / Zinch

97% of students have visited a college website on a smartphone or tablet.

Source: Uversity / Zinch

Page 20: Multi-Device Prototypes

Source: Uversity / Zinch

Nearly 66% said the experience was “just ok” or “challenging.”

Source: Uversity / Zinch

Page 21: Multi-Device Prototypes

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

Page 22: Multi-Device Prototypes

Traditional wireframes have not aged well as a prototype.

Page 23: Multi-Device Prototypes

“Traditional wireframes are dead.”–@smiley

Page 24: Multi-Device Prototypes

8 WAYS TO CHANGE HOW WE PROTOTYPEFOR THE MULTI-DEVICE WEB

Page 25: Multi-Device Prototypes

#1 Make real content a priority

in your prototypes.

Page 26: Multi-Device Prototypes

All frame + no content = unforeseen problems at launch

Page 29: Multi-Device Prototypes

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

Page 30: Multi-Device Prototypes

Provide a minimum viable content plan with the prototype.

Page 31: Multi-Device Prototypes

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)

Page 34: Multi-Device Prototypes

#2 Build prototypes that are less specific

about layout and more specific about style.

Page 37: Multi-Device Prototypes

#3 Prototype for multiple screen sizes.

Page 38: Multi-Device Prototypes

NOT ALL DESIGNERS ARE UNICORNS!

Page 40: Multi-Device Prototypes

uxpin.com

sitemap

elements library preview

breakpoints editing tools settings / previews

Page 41: Multi-Device Prototypes

skinny medium wide

Page 42: Multi-Device Prototypes

Zurb Foundation: responsive HTML templates, in-browser prototypes

Foundation Templates by Zurb

Page 44: Multi-Device Prototypes

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

Page 45: Multi-Device Prototypes

#4 Plan for progressive disclosure

in prototypes.

Page 46: Multi-Device Prototypes

Progressive disclosure–in the context of responsive design–is the idea

of displaying fewer items or shorter content entries on smaller screens.

Page 47: Multi-Device Prototypes

Prototyping progressive disclosure:showing fewer items on smaller displays

Page 48: Multi-Device Prototypes

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.

Page 49: Multi-Device Prototypes

DID SOMEONE SAY CONTENT PARTY

Page 50: Multi-Device Prototypes

PREVENTTHE

13 FEETLONG

WEBSITEImage source: @lukew

Page 51: Multi-Device Prototypes

PREVENT THE 7.5 MILE LONG WEBSITEImage source: @benbrown

Page 52: Multi-Device Prototypes

#5 Prototype interactions.

Page 53: Multi-Device Prototypes

Tools for prototyping interactions:

Adobe Fireworks(desktop app)

Flinto(web-based app)

Page 54: Multi-Device Prototypes

A tool for prototyping interactions if you’re good with code:

Famo.us(JavaScript framework)

Page 55: Multi-Device Prototypes

#6 Test your prototypes.

Page 56: Multi-Device 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

Page 57: Multi-Device Prototypes
Page 58: Multi-Device Prototypes
Page 59: Multi-Device Prototypes

#7 Always explain to the client what the

purpose of the prototype is.

Page 60: Multi-Device Prototypes

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.

Page 61: Multi-Device Prototypes

“It’s part of our job to decide the most appropriate way to share

our work with a client.”

—@laurakalbag

Source: A List Apart

Page 62: Multi-Device Prototypes

#8 When it comes to prototyping,

there is no magic bullet.

Page 63: Multi-Device Prototypes

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

Page 64: Multi-Device Prototypes

?Questions?