Mobile Content Prototyping - Jump Start Your Mobile Project

Marta Rauch
Cindy Church
Gail Chappell
@martarauch
#ICC2013
Intelligent Content 2013
Jump Start Your Mobile Project

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!
Over 1B smartphones
in use worldwide
1.27M mobile devices
sold or activated
daily
Luke Wrobleski, http://www.lukew.com/ff/entry.asp?1506
Tweet this!

• Why create mobile prototypes?
• Prototyping exercises
• Design a tour
• Create a message
• Resources
• Prizes!
Tip! Our slides are on SlideShare:
http://www.slideshare.net/MartaRauch
Workshop Agenda
Key Takeaway
Prototyping
jumpstarts your
mobile project

Why Create a Mobile
Prototype?

 Buy-in
 Requirements
 Feedback
 Schedule
 Quality
 Profit
Facilitates:
Diego Pulido, Paper In
Screen Prototyping, UX Mag
http://uxmag.com/articles/pap
er-in-screen-prototyping#

Sketches
Templates
Presentation software
Mobile browsers
Tactical Prototypes

Nathan Curtis,
Sketching for
Understanding,
UIE Virtual
Seminar
http://www.uie.com/ev
ents/virtual_seminars/
sketching_understandi
ng/
Paper sketch:
Lowest fidelity,
lowest cost, quickest

Templates
http://www.ui
stencils.com/
Higher fidelity,
looks more like
a mobile device

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

Stencils
http://developer.yahoo.com/
ypatterns/about/stencils/
Next highest
fidelity

Presentation Templates
http://keyno
topia.com/
Even higher
fidelity

Take Them
on a Tour

A Tour Gets Users Started
 Key features
 Simple
 Helpful
 Engaging
 Brief

Integrated in
sign-on page
Highlights
features,
uses touch
terminology

Quickly gets you
using the product

Targeted to
user goals

Visually engaging

Things to Avoid
• Too obvious
• Too many pages
• Too much text
• Too complex

Recent Articles on Mobile Tours
Recent articles on mobile walkthroughs: Sarah Perez, Max Rudberg, Aaron Travis
If You See a UI Walkthrough,
They Blew It!
– Max Rudberg
In Defense of the Humble
Mobile Walkthrough
– Aaron Travis
Rethinking The Mobile
App Walkthrough
– Sarah Perez

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

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

Your Turn
1 Minute
Share the content
of your tour

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

Get the
Message
Across

Tip, feedback, instruction,
status, error, confirmation
 Brief
 Simple
 Positive
 Friendly
A Message Provides Guidance

Engaging,
helpful
Simple,
clear

Friendly
tone

Touch
terminology

Things to Avoid
• Complex
• Long
• Formal
• Desktop-style
Find my
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

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

1 Minute
Share the content
of your message
Your Turn

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
 Touch
 Press
 Tap
 Drag
 Flick
 Slide
 Swipe
 Pinch
 Rotate
 Plus multi-gesture combinations
Touch Gesture Reference Guide
http://www.lukew.com/touch/TouchGestureGuide.pdf
A mobile must-read
for touch devices

The Mobile Frontier
by Rachel Hinman
Rosenfeld Media
http://rosenfeldmedia.com/books/mobile-design/
Tweet this!
Best Mobile Prototyping Resource

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
Selected Resources

• 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
Today's Takeaways
Tweet this!

The Mobile Frontier
by Rachel Hinman
http://rosenfeldmedia.com/books/mobile-design/
Tweet this!
The Mobile Frontier by @Hinman
#RosenfeldMedia #ICC2013
Prizes!

Thank you!
Follow Marta’s upcoming presentations
- STC Summit
- IEEE PCS
- ACM HCII
Marta Rauch
@martarauch
Cindy Church
Gail Chappell

Mobile Content Prototyping - Jump Start Your Mobile Project

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Mobile Content Prototyping - Jump Start Your Mobile Project

Similaire à Mobile Content Prototyping - Jump Start Your Mobile Project (20)

Plus de Marta Rauch

Plus de Marta Rauch (12)

Dernier

Dernier (20)

Mobile Content Prototyping - Jump Start Your Mobile Project