Transcript
Page 1: Mobile UX Prototyping & Storytelling

mobile ux workshop

Page 2: Mobile UX Prototyping & Storytelling

MOBILE UX PROTOTYPING& STORYTELLINGPresentation & Workshop by: Vince Baskerville | VP of Product TripLingo

Page 3: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

THANK YOU SPONSORS

Page 4: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

Page 5: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

10 SIMPLE MOBILE PRINCIPLES

Page 6: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

CREATE A VISUAL HIERARCHY THAT MATCHES USERS

NEEDS

Page 7: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

WEIGHT BALANCE

Page 8: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

THUMB OR FINGER RULE

Page 9: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

EASILYNAVIGABLE

Page 10: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

LIMITDISTRACTIONS

Page 11: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

USE APPROPRIATE

DEFAULTS

Page 12: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

MAKEACTIONS

REVERSIBLE

Page 13: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

BECONSISTENT

Page 14: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

DON’T BEAFRAID TO

SHOW SOME EMOTION

Page 15: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

AVOIDJARGON

Page 16: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

1. Create a visual hierarchy that matches users needs

2. Weight balance

3. Thumb or finger rule? - don’t forget fat fingers

4. Easily navigable

5. Limit distractions

6. Use appropriate defaults

7. Make actions reversible

8. Be consistent

9. Don’t be afraid to show some emotion

10. Avoid jargon

RECAP

Page 17: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

•Truly understand your medium•Solve the right problem, don’t just make pretty interfaces

•Try to keep things simple•but remember *Less is more* not always the answer

Page 18: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

SKETCH & WIREFRAME TIPS

Page 19: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

VERSUS

Page 20: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

NOT RECOMMENDED

Page 21: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

•Sketches aren’t the *product*•the focus isn’t instagrammable wireframes

•Consider actual content•don’t get too caught up with lorem text

•Focus on communication•remember the purpose of the interactions

Page 22: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

•Keep it fast and in short bursts

•Sketches & prototypes should always be communicating those in between steps.. try not to leave anything for interpretation

Page 23: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

UNDERSTANDING MOBILE CONTEXT

Page 24: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

•Design for partial attention spans and interrupted states

•We don’t just create interfaces.. remember to focus on interaction

•Where will your users be?

Page 25: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

•Will they have gloves on?

•Are they driving?

•Walking and frustratingly looking for something?

•Relaxed, sipping on a latte?

Page 26: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

SKETCH TIME

Page 27: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

BE RUTHLESS & BRAVE

EDIT.. EDIT.. EDIT.. EDIT

Page 28: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

PROTOTYPING

Page 29: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

•Hi or lo fidelity?

•Prototyping reduces misinterpretation

•in comparison to detailed requirement docs

•Remember to set expectations

Page 30: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

•Eventually saves time, money & overall effort

•Helps to create a constant feedback loop, which helps produce a better product

•This isn’t a means to an end, but wrather it is to help better articulate ‘show & tell’

Page 31: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

!"#r$"!v# f##%b$&' ())p

Page 32: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

Page 33: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

WHY PROTOTYPE?

Page 34: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

•It’ll help you improve design making decision

•Communicate your ideas better & get buy-in from your team / client easily

•Gather proper user feedback

•Explore unknowns

•Further refine concepts

Page 35: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

•Multiple ways to prototype your product•paper•power point / keynote•balsamiq•axure•adobe photoshop / fireworks / flash•html / js•etc...

Page 36: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

STORYTELLING

Page 37: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

The goal of sketches & prototypes is to convince yourself & others

Page 38: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

•Telling stories:•helps put a ‘face’ on data•helps paint in missing details from sketches & prototypes

•helps encourage collaboration & innovation

Page 39: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

Stories turn profile information into a persona; with this information we can better design a solution for this & other similar user needs

Page 40: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

•Stories can illustrate problems & ‘pain points’ that wasn’t discovered through sketching prototypes

Page 41: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

INSTRUCTIONS / PEE BREAK

Page 42: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

WRAP UP

Page 43: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

THANK YOU SPONSORS

Page 44: Mobile UX Prototyping & Storytelling

VINCENT BASKERVILLE | VP of PRODUCT

AU REVOIRVINCE BASKERVILLE

@[email protected]