118 - i_o 2013- structure in android app design
TRANSCRIPT
-
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