1.
Designing Great Mobile Apps<br />Chris Griffith<br />

2.
Disclaimer<br />These opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.<br />

3.

4.

5.

6.
We need a mobile APP! NOW!<br />

7.
Building Mobile Apps is hard work.<br />

8.

9.

10.
Bored Users<br />

11.
Fickle Users<br />

12.

13.
It begins with a simple touch…<br />

14.

15.

16.

17.

18.

19.
There’s Not an App for that!<br />

20.
But is it mobile?<br />

21.
Mobile Mindsets…<br />I’m here!<br />I’m bored!<br />I’m working!<br />

22.
I’m working<br />

23.

24.
I’m Here<br />

25.

26.
I’m bored<br />

27.

28.

29.
What Makes Your App Special?<br />

30.
Building the User Experience<br />

31.
An effortless experience requires <br />streamlined choices of features<br />limited attention<br />limited time<br />limited pixels<br />limited processing power <br />limited connectivity<br />

32.
What is your app’s quest?<br />

33.
Focal Task/Key Problem<br />

34.
What wrong a web app/site?<br />

35.
Designing for the tiny<br />

36.
Rule of Thumbs<br />The average fingertip is 3x larger than the hand cursor<br />Make your buttons 3x larger<br />Then make them even larger <br />

37.
With fingers, come hands…<br />

38.

39.
Pixels Per Inch (PPI)<br />Data based on respective products published technical specifications<br />

40.

41.

42.

43.

44.
Flat Card Pattern<br />Pros<br />Quick Focused Content<br />Varied Content Layout<br />Low Chrome<br />Cons<br />Traversing from start to end of the stack<br />Issues of scaling the number of cards<br />Tiny page dots<br />

45.

46.

47.
Tab/Nav Bar Pattern<br />Pros<br />Easy access to main sections<br />Easy overview of the features and the context<br />Navigation marker<br />Cons<br />Limited number of tabs<br />Tab always on screen<br />

48.

49.

50.
List/Tree Pattern<br />Pros <br />Scales past 5 items<br />Direct interaction<br />Limited UI chrome<br />Cons<br />User must remember their navigation path<br />Must travel to top node to access another branch<br />Scroll risk<br />

51.

52.

53.
Dashboard Pattern<br />Pros <br />Reveals capabilities<br />Offers shortcuts to key sections<br />Can be colorful and engaging<br />Cons<br />Falling out of favor<br />Return Navigation mystery<br />Hub-Spoke navigation<br />

54.
Combination Patterns<br />

55.

56.
Be careful of your navigation path<br />

57.

58.

59.

60.

61.

62.

63.
Put something on device<br />

64.

65.
Stand Out from the Crowd<br />

66.
What’s your style<br />Business<br />Sleek and cool<br />Gritty<br />Hipster<br />Fun and playful<br />Glittery?<br />

67.

68.
People judge an app by it’s cover<br />App Icon<br />Start Screen<br />Overall Look<br />

69.
Your App Icon == Your Brand<br />

70.

71.

72.
It’s not a guessing game…<br />http://glyphish.com/<br />

73.
Give Feedback<br />Did I touch it?<br />Is it working?<br />Is there a signal?<br />

74.
Design Tips <br />for the Developer<br />

75.
Provide surprises<br />

76.

77.

78.
Mobile is Everywhere<br />

79.
Now go build something!<br />

80.
Thanks!<br />chris.griffith@gmail.com<br />@chrisgriffith<br />http://chrisgriffith.wordpress.com/<br />