Your SlideShare is downloading. ×

Mobile Content Prototyping

135
views

Published on

Jump Start Your Mobile Project presentation at Intelligent Content 2013.

Jump Start Your Mobile Project presentation at Intelligent Content 2013.

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
135
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Jump Start Your Mobile Project Marta Rauch Cindy Church Gail Chappell @martarauch #ICC2013Intelligent Content 2013
  • 2. 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.
  • 3. Youre 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?1506Marta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 4. 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/MartaRauchMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 5. Why Create a Mobile Prototype?Marta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 6. 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#Marta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 7. Tactical Prototypes Sketches Templates Presentation software Mobile browsersMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 8. 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/Marta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 9. Higher fidelity,Templates looks more like a mobile device http://www.uiMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013. stencils.com/
  • 10. 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-appMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 11. Stencils Next highest fidelity http://developer.yahoo.com/ ypatterns/about/stencils/Marta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 12. Presentation Templates Even higher fidelity http://keynoMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013. topia.com/
  • 13. Take Themon a TourMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 14. A Tour Gets Users Started  Key features  Simple  Helpful  Engaging  BriefMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 15. Highlights features, uses touch terminology Integrated in sign-on pageMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 16. Quickly gets you using the productMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 17. Targeted to user goalsMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 18. Visually engaging Marta Rauch @martarauchMarta 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.
  • 19. Things to Avoid • Too obvious • Too many pages • Too much text • Too complexMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 20. 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 TravisMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 21. Exercise Prototyping A TourMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 22. 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-inMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 23. Instructions10 minutes1. Join a small group2. Discuss and plan your strategy3. Design and sketch4. Pick a spokesperson
  • 24. Your Turn 1 Minute Share the content of your tourMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 25. Tour Example  Key features  Helpful  Simple  Engaging  Gets users goingMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 26. Get the Message AcrossMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 27. A Message Provides Guidance Tip, feedback, instruction, status, error, confirmation  Brief  Simple  Positive  FriendlyMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 28. Simple, clear Engaging, helpfulMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 29. Friendly toneMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 30. Touch terminologyMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 31. Things to Avoid • Complex • Long • Formal • Desktop-style Find myMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013. iPhone
  • 32. Exercise Prototyping MessagesMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 33. 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-inMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 34. Instructions 10 minutes 1. Join a small group 2. Discuss and plan your strategy 3. Design and sketch 4. Pick a spokespersonMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 35. Your Turn 1 Minute Share the content of your messageMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 36. Message Example  Gives guidance  Simple  Positive  FriendlyMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 37. Innovative Message Includes a mini-tourMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 38. Punchy content scores during Super BowlMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 39. Resources for Learning MoreMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 40. iOS Guidelineshttps://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/UEBestPractices/UEBestPractices.html#//apple_ref/doc/uid/TP40006556-CH20-SW1Marta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 41. Android Guidelines http://developer.android.com/design/index.htmlMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 42. 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.pdfMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 43. Best Mobile Prototyping Resource Tweet this! The Mobile Frontier by Rachel Hinman Rosenfeld Media http://rosenfeldmedia.com/books/mobile-design/Marta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 44. 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 DocumentationMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 45. Todays 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/MartaRauchMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 46. Prizes! Tweet this! The Mobile Frontier by @Hinman #RosenfeldMedia #ICC2013 The Mobile Frontier by Rachel Hinman http://rosenfeldmedia.com/books/mobile-design/Marta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.
  • 47. Thank you! Marta Rauch @martarauch Cindy Church Gail Chappell Follow Marta’s upcoming presentations - STC Summit - IEEE PCS - ACM HCIIMarta Rauch @martarauch Cindy Church @vizcue Gail Chappell "Jumpstart Your Mobile Project" ICC2013 Copyright 2013.