Mobile Content Prototyping

Jump Start Your Mobile Project

Marta Rauch
Cindy Church
Gail Chappell

@martarauch
#ICC2013

Intelligent Content 2013

Audience Poll

Raise your hand if you have a
mobile device with you.

Who has
more than one?
(including mobile phones,
tablets, Kindles, eReaders)

Marta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.

You're In Good Company!
Tweet this!
Over 1B smartphones
in use worldwide

1.27M mobile devices
sold or activated
daily

Luke Wrobleski, http://www.lukew.com/ff/entry.asp?1506


Workshop Agenda
• Why create mobile prototypes?
• Prototyping exercises
• Design a tour
Key Takeaway
• Create a message Prototyping
jumpstarts your
• Resources mobile project

• Prizes!

Tip! Our slides are on SlideShare:
http://www.slideshare.net/MartaRauch


Why Create a Mobile
Prototype?


Facilitates:

 Buy-in
 Requirements
 Feedback
 Schedule
 Quality
 Profit

Diego Pulido, Paper In
Screen Prototyping, UX Mag
http://uxmag.com/articles/pap
er-in-screen-prototyping#

Tactical Prototypes

Sketches
Templates
Presentation software
Mobile browsers


Paper sketch:
Lowest fidelity,
lowest cost, quickest

Nathan Curtis,
Sketching for
Understanding,
UIE Virtual
Seminar
http://www.uie.com/ev
ents/virtual_seminars/
sketching_understandi
ng/


Higher fidelity,
Templates looks more like
a mobile device

http://www.ui
Marta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013. stencils.com/

Template with A Mobile Device
Moving to
higher
fidelity

Idea To App: How To Make A Mobile App, http://www.lucidity.ie/blog/155-idea-to-app-how-to-make-a-mobile-app

Stencils Next highest
fidelity

http://developer.yahoo.com/
ypatterns/about/stencils/

Presentation Templates
Even higher
fidelity

http://keyno
Marta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013. topia.com/

Take Them
on a Tour


A Tour Gets Users Started

 Key features
 Simple
 Helpful
 Engaging
 Brief


Highlights
features,
uses touch
terminology

Integrated in
sign-on page


Quickly gets you
using the product


Targeted to
user goals


Visually engaging

Marta Rauch @martarauch
Marta Rauch @martarauch Cindy Church @vizcue
Cindy Church @vizcue Gail Chappell
Gail Chappell "Jumpstart Your Mobile Project"
"Jumpstart Your Mobile Project" ICC2013
ICC2013 Copyright 2013.
Copyright 2013.

Things to Avoid

• Too obvious
• Too many pages
• Too much text
• Too complex


Recent Articles on Mobile Tours
If You See a UI Walkthrough,
They Blew It!
– Max Rudberg

Rethinking The Mobile
App Walkthrough
– Sarah Perez

In Defense of the Humble
Mobile Walkthrough
– Aaron Travis

Recent articles on mobile walkthroughs: Sarah Perez, Max Rudberg, Aaron Travis


Exercise

Prototyping
A Tour


Scenario

• Your team identifies three areas to
highlight in a tour
• You are asked to mock up content
• You must present it to the team
to get buy-in


Instructions
10 minutes
1. Join a small group
2. Discuss and plan your strategy
3. Design and sketch
4. Pick a spokesperson

Your Turn

1 Minute
Share the content
of your tour


Tour Example

 Key features
 Helpful
 Simple
 Engaging
 Gets users going


Get the
Message
Across


A Message Provides Guidance

Tip, feedback, instruction,
status, error, confirmation

 Brief
 Simple
 Positive
 Friendly


Simple,
clear Engaging,
helpful


Friendly
tone


Touch
terminology


Things to Avoid

• Complex
• Long
• Formal
• Desktop-style

Find my
Marta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013. iPhone

Exercise

Prototyping
Messages


Scenario
• A focus group reveals that guidance is
needed for sign-in errors
• You are asked to quickly sketch
the message
• You must present it to the team
to get buy-in


Instructions

10 minutes
1. Join a small group
2. Discuss and plan your strategy
3. Design and sketch
4. Pick a spokesperson


Your Turn

1 Minute
Share the content
of your message


Message Example

 Gives guidance
 Simple
 Positive
 Friendly


Innovative Message

Includes a
mini-tour


Punchy content
scores during
Super Bowl


Resources
for Learning More


iOS Guidelines

https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/UEBestPractices/UEBestPractice
s.html#//apple_ref/doc/uid/TP40006556-CH20-SW1

Android Guidelines

http://developer.android.com/design/index.html


Touch Terminology
A mobile must-read
 Touch for touch devices
 Press
 Tap
 Drag
 Flick
 Slide
 Swipe
 Pinch
 Rotate
 Plus multi-gesture combinations

Touch Gesture Reference Guide
http://www.lukew.com/touch/TouchGestureGuide.pdf


Best Mobile Prototyping Resource

Tweet this!

The Mobile Frontier
by Rachel Hinman

Rosenfeld Media
http://rosenfeldmedia.com/books/mobile-design/


Selected Resources
Books, Articles, and Blogs
• Rachel Hinman, The Mobile Frontier
• Rachel Hinman, Practical Guide to Tactical Mobile Prototyping
• Nathan Curtis, Sketching for Understanding, The Power of Sketches, 6 Tips for Organizing Sketched
Artifacts
• Lucidity, Idea To App: How To Make a Mobile App
• Paper Prototyping
• Paper In-Screen Prototyping
• Streamlining Design with Paper Prototyping
• Using paper prototyping to manage risk
• Design Better and Faster with Rapid Prototyping
• Recent articles on mobile walkthroughs: Sarah Perez, Max Rudberg, Aaron Travis
Tools
• Prototyping Tools: Stencils, http://www.uistencils.com/
• Usability testing with paper prototypes: http://vimeo.com/48675078
Guidelines
• iOS message guidelines, Android message guidelines, Other OSs
• Luke Wrobleski, Josh Clark, Theresa Neil
• Dan Roam, Back Of The Napkin
• Marta Rauch, Mobile Usability Guidelines, Mobile Documentation


Today's Takeaways
Tweet this!
• Create prototypes to
jumpstart your project
• Use a tour to get users quickly on task
• Make messages positive and meaningful

Tip! Our slides are on SlideShare:
http://www.slideshare.net/MartaRauch


Prizes!

Tweet this!
The Mobile Frontier by @Hinman
#RosenfeldMedia #ICC2013

The Mobile Frontier
by Rachel Hinman
http://rosenfeldmedia.com/books/mobile-design/


Thank you!

Marta Rauch
@martarauch
Cindy Church
Gail Chappell

Follow Marta’s upcoming presentations
- STC Summit
- IEEE PCS
- ACM HCII

Mobile Content Prototyping

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (11)

Semelhante a Mobile Content Prototyping

Semelhante a Mobile Content Prototyping (16)

Último

Último (20)

Mobile Content Prototyping