Mobile UX Prototyping & Storytelling

  • Published on
    28-Jan-2015

  • View
    110

  • Download
    7

DESCRIPTION

A very hands on 3 hour workshop where participants had to sketch and prototype specific app ideas per team. The presentation was projected onto a whiteboard where I wrote notes, sketches & examples needed.

Transcript

1. mobile uxworkshop 2. MOBILE UXPROTOTYPING& STORYTELLINGPresentation & Workshop by:Vince Baskerville | VP of Product TripLingo 3. THANK YOU SPONSORS VINCENT BASKERVILLE | VP of PRODUCT 4. VINCENT BASKERVILLE | VP of PRODUCT 5. 10 SIMPLE MOBILE PRINCIPLESVINCENT BASKERVILLE | VP of PRODUCT 6. CREATE A VISUALHIERARCHY THAT MATCHES USERS NEEDS VINCENT BASKERVILLE | VP of PRODUCT 7. WEIGHTBALANCEVINCENT BASKERVILLE | VP of PRODUCT 8. THUMB ORFINGER RULE VINCENT BASKERVILLE | VP of PRODUCT 9. EASILYNAVIGABLEVINCENT BASKERVILLE | VP of PRODUCT 10. LIMITDISTRACTIONS VINCENT BASKERVILLE | VP of PRODUCT 11. USEAPPROPRIATE DEFAULTS VINCENT BASKERVILLE | VP of PRODUCT 12. MAKEACTIONSREVERSIBLEVINCENT BASKERVILLE | VP of PRODUCT 13. BECONSISTENT VINCENT BASKERVILLE | VP of PRODUCT 14. DONT BEAFRAID TOSHOW SOME EMOTION VINCENT BASKERVILLE | VP of PRODUCT 15. AVOID JARGONVINCENT BASKERVILLE | VP of PRODUCT 16. RECAP1. Create a visual hierarchy6. Use appropriate defaults that matches users needs7. Make actions reversible2. Weight balance8. Be consistent3. Thumb or nger rule?9. Dont be afraid to show- dont forget fat ngers some emotion4. Easily navigable10. Avoid jargon5. Limit distractions VINCENT BASKERVILLE | VP of PRODUCT 17. Truly understand your mediumSolve the right problem, dont just make pretty interfacesTry to keep things simple but remember *Less is more* not alwaysthe answerVINCENT BASKERVILLE | VP of PRODUCT 18. SKETCH & WIREFRAME TIPSVINCENT BASKERVILLE | VP of PRODUCT 19. VERSUS VINCENT BASKERVILLE | VP of PRODUCT 20. NOTRECOMMENDED VINCENT BASKERVILLE | VP of PRODUCT 21. Sketches arent the *product* the focus isnt instagrammable wireframes Consider actual content dont get too caught up with lorem text Focuson communication remember the purpose of the interactionsVINCENT BASKERVILLE | VP of PRODUCT 22. Keep it fast and in short bursts Sketches & prototypes should always be communicating those in between steps.. try not to leave anything for interpretation VINCENT BASKERVILLE | VP of PRODUCT 23. UNDERSTANDING MOBILECONTEXTVINCENT BASKERVILLE | VP of PRODUCT 24. Design for partial attention spans and interrupted states We dont just create interfaces.. remember to focus on interaction Wherewill your users be?VINCENT BASKERVILLE | VP of PRODUCT 25. Will they have gloves on? Arethey driving? Walkingand frustratingly looking for something? Relaxed, sipping on a latte? VINCENT BASKERVILLE | VP of PRODUCT 26. SKETCH TIMEVINCENT BASKERVILLE | VP of PRODUCT 27. BE RUTHLESS &BRAVEEDIT.. EDIT.. EDIT.. EDIT VINCENT BASKERVILLE | VP of PRODUCT 28. PROTOTYPINGVINCENT BASKERVILLE | VP of PRODUCT 29. Hi or lo delity? Prototypingreduces misinterpretation in comparison to detailed requirement docs Rememberto set expectationsVINCENT BASKERVILLE | VP of PRODUCT 30. Eventually saves time, money & overall effort Helpsto create a constant feedback loop, which helps produce a better product Thisisnt a means to an end, but wrather it is to help better articulate show & tellVINCENT BASKERVILLE | VP of PRODUCT 31. iterativefeedbackloopVINCENT BASKERVILLE | VP of PRODUCT 32. VINCENT BASKERVILLE | VP of PRODUCT 33. WHY PROTOTYPE? VINCENT BASKERVILLE | VP of PRODUCT 34. Itll help you improve design making decision Communicate your ideas better & get buy-infrom your team / client easily Gatherproper user feedback Explore unknowns Further rene concepts VINCENT BASKERVILLE | VP of PRODUCT 35. Multiple ways to prototype your product paper power point / keynote balsamiq axure adobe photoshop / reworks / ash html / js etc...VINCENT BASKERVILLE | VP of PRODUCT 36. STORYTELLINGVINCENT BASKERVILLE | VP of PRODUCT 37. The goal of sketches & prototypes is to convince yourself & othersVINCENT BASKERVILLE | VP of PRODUCT 38. Tellingstories: helps put a face on data helps paint in missing details from sketches & prototypes helps encourage collaboration & innovationVINCENT BASKERVILLE | VP of PRODUCT 39. Stories turn proleinformation into apersona; with thisinformation we canbetter design a solutionfor this & other similaruser needs VINCENT BASKERVILLE | VP of PRODUCT 40. Storiescan illustrate problems & pain points that wasnt discovered through sketching prototypesVINCENT BASKERVILLE | VP of PRODUCT 41. INSTRUCTIONS / PEE BREAKVINCENT BASKERVILLE | VP of PRODUCT 42. WRAP UPVINCENT BASKERVILLE | VP of PRODUCT 43. THANK YOU SPONSORS VINCENT BASKERVILLE | VP of PRODUCT 44. AU REVOIRVINCE BASKERVILLE @WHOISVINCE VINCE@TRIPLINGO.COM VINCENT BASKERVILLE | VP of PRODUCT