8/12/2019 118 - I_O 2013- Structure in Android App Design

1/108

Structure inAndroid App Design

Jens Nagel and Rich Fulcher

Android Design

8/12/2019 118 - I_O 2013- Structure in Android App Design

2/108

Structure?

8/12/2019 118 - I_O 2013- Structure in Android App Design

3/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

4/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

5/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

6/108

A well-structured app ...

Makes it easy and efficient to get things done

Keeps related things together,and unrelated things separate

Actively manages complexity

through consistent navigation

8/12/2019 118 - I_O 2013- Structure in Android App Design

7/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

8/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

9/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

10/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

11/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

12/108

Developers

8/12/2019 118 - I_O 2013- Structure in Android App Design

13/108

Developers

8/12/2019 118 - I_O 2013- Structure in Android App Design

14/108

Developers

8/12/2019 118 - I_O 2013- Structure in Android App Design

15/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

16/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

17/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

18/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

19/108

Find a Bar

Primary actor:Drinker

System:BarKeeper appPrecondition:BarKeeper app installed

Primary scenario:

1. Drinker opens BarKeeper app

2. Drinker choose to find a nearby bar

3. BarKeeper presents list of nearby bars4. Drinker chooses a bar

5. Barkeeper presents details about the bar

8/12/2019 118 - I_O 2013- Structure in Android App Design

20/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

21/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

22/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

23/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

24/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

25/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

26/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

27/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

28/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

29/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

30/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

31/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

32/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

33/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

34/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

35/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

36/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

37/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

38/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

39/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

40/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

41/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

42/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

43/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

44/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

45/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

46/108

Structural patterns

8/12/2019 118 - I_O 2013- Structure in Android App Design

47/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

48/108

T

8/12/2019 118 - I_O 2013- Structure in Android App Design

49/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

50/108

T

8/12/2019 118 - I_O 2013- Structure in Android App Design

51/108

T

8/12/2019 118 - I_O 2013- Structure in Android App Design

52/108

T

8/12/2019 118 - I_O 2013- Structure in Android App Design

53/108

T

8/12/2019 118 - I_O 2013- Structure in Android App Design

54/108

T

Communication with user

8/12/2019 118 - I_O 2013- Structure in Android App Design

55/108

Co u cat o t use

Purpose:

I am all about ma

phone calls

Communication with user

8/12/2019 118 - I_O 2013- Structure in Android App Design

56/108

Other facets:

Call history

Phonebook with

Top-level navigation

8/12/2019 118 - I_O 2013- Structure in Android App Design

57/108

p g

Six-pack

8/12/2019 118 - I_O 2013- Structure in Android App Design

58/108

p

Six-pack

8/12/2019 118 - I_O 2013- Structure in Android App Design

59/108

p

- Straightforward and simpl

- All top-levels visible side-b

- Not overly interesting to lo

- No data

- Adds navigation effort

Fixed tabs

8/12/2019 118 - I_O 2013- Structure in Android App Design

60/108

Must support side swipe

8/12/2019 118 - I_O 2013- Structure in Android App Design

61/108

Fixed tabs

8/12/2019 118 - I_O 2013- Structure in Android App Design

62/108

- All top-levels visible side-b

- Ruthlessly efficient

- Limited to 3 items

- Takes up vertical real-esta

- Not accessible from lower

Spinners

8/12/2019 118 - I_O 2013- Structure in Android App Design

63/108

Spinners

8/12/2019 118 - I_O 2013- Structure in Android App Design

64/108

- Can display more views

- Compact

- Top-levels not visible side

- Not accessible from lower

New pattern:Navigation drawer

8/12/2019 118 - I_O 2013- Structure in Android App Design

65/108

Navigation drawer

New in the Android Design Guide!!

8/12/2019 118 - I_O 2013- Structure in Android App Design

66/108

Opening

8/12/2019 118 - I_O 2013- Structure in Android App Design

67/108

Navigation hubs

8/12/2019 118 - I_O 2013- Structure in Android App Design

68/108

1 2 3 4

2.1 3.1 4.1

3.3

3.2 4.2

Navig

Dividers, icons, counters Collapsible item

8/12/2019 118 - I_O 2013- Structure in Android App Design

69/108

Navigation drawer

8/12/2019 118 - I_O 2013- Structure in Android App Design

70/108

- Can display many views

- Compact when collapsed

- Can include lower-level scr

- Accessible from anywhere

- Top-levels not visible side-

8/12/2019 118 - I_O 2013- Structure in Android App Design

71/108

Using switching patte

8/12/2019 118 - I_O 2013- Structure in Android App Design

72/108

Calendar

Calendar with spinner

8/12/2019 118 - I_O 2013- Structure in Android App Design

73/108

Calendar with navigation drawer

8/12/2019 118 - I_O 2013- Structure in Android App Design

74/108

Calendar with tabs

8/12/2019 118 - I_O 2013- Structure in Android App Design

75/108

Preference

Switch not frequent

Compresses ve

estateSide-swipe already used

Calendar with six-pack

8/12/2019 118 - I_O 2013- Structure in Android App Design

76/108

The app is the data!

8/12/2019 118 - I_O 2013- Structure in Android App Design

77/108

Clock with tabsTimer Clock (default) Stopwa

8/12/2019 118 - I_O 2013- Structure in Android App Design

78/108

Timer Clock (default) Stopwa

Timer Clock Stopwatch

Alarms Citi

8/12/2019 118 - I_O 2013- Structure in Android App Design

79/108

Timer Clock Stopwatch

Alarms Citi

8/12/2019 118 - I_O 2013- Structure in Android App Design

80/108

Customization

Timer Clock Stopwatch

Alarms Citi

8/12/2019 118 - I_O 2013- Structure in Android App Design

81/108

CustomizationPlace/Facet

Clock with spinner

8/12/2019 118 - I_O 2013- Structure in Android App Design

82/108

Clock with navigation drawer

8/12/2019 118 - I_O 2013- Structure in Android App Design

83/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

84/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

85/108

Gallery

Gallery with Spinner

8/12/2019 118 - I_O 2013- Structure in Android App Design

86/108

Gallery with Navigation Drawer

8/12/2019 118 - I_O 2013- Structure in Android App Design

87/108

Gallery with tabs

8/12/2019 118 - I_O 2013- Structure in Android App Design

88/108

Preference:

Switch not frequent

Compresses vertical real

estateContent scrolling has to

change

Too ma

8/12/2019 118 - I_O 2013- Structure in Android App Design

89/108

Drive

Drive with six-pack

8/12/2019 118 - I_O 2013- Structure in Android App Design

90/108

Drive with modified spinner

8/12/2019 118 - I_O 2013- Structure in Android App Design

91/108

Drive with navigation drawer

8/12/2019 118 - I_O 2013- Structure in Android App Design

92/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

93/108

Shifting structures

Expanding feature sets

8/12/2019 118 - I_O 2013- Structure in Android App Design

94/108

Your appMore data New fe

A simple app

8/12/2019 118 - I_O 2013- Structure in Android App Design

95/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

96/108

8/12/2019 118 - I_O 2013- Structure in Android App Design

97/108

To-do listAdd Hockey and Soccer

8/12/2019 118 - I_O 2013- Structure in Android App Design

98/108

Segment sports into pro

college.

Add a place where user c

favorite team scores acro

Add a place where user cfavorite teams and mana

notification settings

Live score notifications

A first impulse...

8/12/2019 118 - I_O 2013- Structure in Android App Design

99/108

MY TEAMS

NFL FOOTBALL

NCAA FOOTBALL

BAS

NBA BASKETBALL

Looks good?

8/12/2019 118 - I_O 2013- Structure in Android App Design

100/108

Problem: Speed and efficiency

8/12/2019 118 - I_O 2013- Structure in Android App Design

101/108

Problem: Glanceability

8/12/2019 118 - I_O 2013- Structure in Android App Design

102/108

Problem: Settings

8/12/2019 118 - I_O 2013- Structure in Android App Design

103/108

Problem: Settings

8/12/2019 118 - I_O 2013- Structure in Android App Design

104/108

A better choice...

8/12/2019 118 - I_O 2013- Structure in Android App Design

105/108

- Quicker, more efficient top le

- Entire content glanceable

- Reflects segmentation

- Future proof

- Settings in expected place

In closing ...

Choosing the right structure

8/12/2019 118 - I_O 2013- Structure in Android App Design

106/108

Choosing the right structureis critical for a great experience

Understand what your app does,and how it serves different users

Consider all your options when

selecting a navigation pattern

8/12/2019 118 - I_O 2013- Structure in Android App Design

107/108

Thanks!

8/12/2019 118 - I_O 2013- Structure in Android App Design

108/108

Developers