what you can learn from a 4 year old about ponies and mobile ux

84

Upload: fitc

Post on 27-Jan-2015

106 views

Category:

Technology


0 download

DESCRIPTION

Presented at SCREENS 2013 in Toronto. Details at fitc.ca/screens Look at mobile from a child’s perspective to gain insight to practical take-a-ways for implementation with real world examples. See how storytelling, usability and interactive design change the mobile user experience when designed and developed with a four year in mind. In this session, explore a project case study involving the UX for the various mobile platforms and decisions regarding navigation, content strategy based on testing the user experience with my 4 year old daughter by changing to kid friendly content and images. Take advantage of the humbling and brutal honesty of kids to build practical and engaging mobile web applications. Feedback was used to make changes to the RWD site’s user experience and the content strategy. If you can engage a 4 year old with good UX, you can certainly engage the target market with good UI/UX, presentation and navigation. Answer the pressing question “where are the ponies?” in your mobile UX.

TRANSCRIPT

Page 1: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 2: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 3: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

Andrew Smyk

Husband, father, educator, all around good guy

Program Coordinator for the Interactive Multimedia program at Sheridan.

Lover of all things pizza.

Page 4: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

“People two, three or four years apart are having completely different experiences with technology,”

Lee Rainie, director of the Pew Research Center’s Internet and American Life Project.

http://www.flickr.com/photos/tocaboca/5523596357/

Page 5: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 6: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 7: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 8: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

Project One:

Brewer’s Web RelaunchResponsive Web Design

Create a desktop and mobileUser Experience that capturesthe lifestyle of the brand

Allows users to participate in contests and give-a-ways easily regardless of platform

Optimized site elements for mobile

Page 9: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

Project Two:

Mobile AppPush Promotions

Brand related games

Create a User Experience that captures the lifestyle of the brand

App to update content seamlessly for the user

Page 10: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

Users:

Mobile

Accessing content in various settings

Specifically bars & outdoor events

Out with friends

Page 11: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 12: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 13: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

Experiment:

Substitute content with ponies

Page 14: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

“People two, three or four years apart are having completely different experiences with technology,”

Lee Rainie, director of the Pew Research Center’s Internet and American Life Project.

http://www.flickr.com/photos/tocaboca/5523596357/

Page 15: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

11 - 6 - 4

Page 16: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

12 - 7 - 5Born during

evolving techtechnology is gesture based

Born 1 year

before the

iPhone

Page 17: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

digital and analog

Page 18: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

“This is my iPad.”

Page 19: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

“Why is there a phone in your camera?”

Page 20: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

Mobile UX is a balancing act

Page 21: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

constraints

andbehaviour

s

capabilities

and needs

Page 22: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

fitts’s law

Page 23: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

Fitts's Law is a model of human movement which predicts the time required to rapidly move to a target area a function of the distance to the target and the size of the target.

source: Wikipedia

Page 24: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 25: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

Small Touch Target = Big Problems

Page 26: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

Small Touch Target = Big Problems

Sources: Apple HIG & MIT Touch Lab

Page 27: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

Small Touch Target = Big Problems

Page 28: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

Small Touch Target = Big Problems

Page 29: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

Touch Zones: LukeW

Page 30: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

Touch Zones: LukeW

Page 31: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 32: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

If it looks like a button, it better be a button.

Page 33: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 34: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

skeuomorph vs. flat

Page 36: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 37: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 38: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 39: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 40: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 41: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 42: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 43: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 44: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 45: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 46: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

content

Page 47: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 48: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 49: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 50: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 51: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 52: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 53: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 54: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 55: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

Two versions of a site created(desktop vs. responsive)

Page 56: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 57: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

95%abandon rate

Page 58: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 59: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 60: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 61: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 62: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 63: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 64: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 65: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 66: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 67: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 68: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 69: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

<a href="#menu">[image file]</a>

<a name="menu"></a>

Page 70: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

Simple solutions are elegant.

Page 71: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

You will never hear, “Hey, where’s the slide out menu?”

Page 72: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

You will hear, “Your menu doesn’t work! #fail”

Page 73: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

performance is design

Page 74: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

74

Test in the Wild

Page 75: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

75

Test in the Wild

Drop the WiFi

Page 76: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

76

Test in the Wild

Test using “one bar”

Page 77: What You Can Learn From a 4 Year Old About Ponies and Mobile UX
Page 78: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

Help Your User (Find the Ponies)

Page 79: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

If a 4 year old can find the ponies

Page 80: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

so can your user

Page 81: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

Thank you!

Page 82: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

Questions?

Page 83: What You Can Learn From a 4 Year Old About Ponies and Mobile UX

@andrewsmyk

Page 84: What You Can Learn From a 4 Year Old About Ponies and Mobile UX