Cross-device, cross-platform:
Designing for the entire mobile universe
#tinketytonk
Slide 2
Slide 2 text
Mobile Design Tutorial with a Title
Invented By An Marketing Department
Totally Not an Android Tutorial in Disguise™
#tinketytonk
Slide 3
Slide 3 text
@parisba @chrisjrn
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
We’re from Australia
We apologise in advance.
(This picture is of the Prime Minister of Australia.)
Slide 6
Slide 6 text
We Will Not Be Writing Code.
Slide 7
Slide 7 text
The tools you’ll need:
A Brain Pen and Paper
Slide 8
Slide 8 text
This Is Not A
Material Design
HOWTO
We might mention it occasionally, though.
Slide 9
Slide 9 text
Housekeeping
Slide 10
Slide 10 text
We run until 5 PM
Afternoon Break from 3 to 3:30 PM
Slide 11
Slide 11 text
unique challenges of mobile devices
rules for mobile app developers wireframes
usability and look
Slide 12
Slide 12 text
unique challenges of mobile devices
rules for mobile app developers
wireframes
usability and look
What’s the plan?
Mobile Design + Parting Thoughts
Mobile Computing and Interaction
Existing with other Apps and Devices
Building Apps and Testing Apps
Slide 13
Slide 13 text
Activities
Drawing
Group Work
Diagrams
Slide 14
Slide 14 text
Activity
Slide 15
Slide 15 text
Apps are great at doing
small, helpful things.
Slide 16
Slide 16 text
Help me move house!
I’m moving from Portland to Austin this year!
Slide 17
Slide 17 text
What does a house
moving app need?
Introduce yourself to the person next to you, and discuss…
Slide 18
Slide 18 text
That Was Fun!
Anything interesting?
Slide 19
Slide 19 text
What are we
actually Making?
Slide 20
Slide 20 text
Social TODO lists
Scheduling tasks with friends
Finding people to help out
Finding nearby tasks to help out with
Slide 21
Slide 21 text
Find location on map
Show list of
friends
Publishes task to
friends
CANCEL
SAVE
TITLE
WHERE
WHEN
WHO
Collect Boxes
29 NE Broadway
20 July at 2:39PM
Paris B-A; Bob Condo...
Ask for helpers
dit Task
21
Move Piano
with Josh and Paris
22 Jul 1PM
Map View
My Tasks
My Tasks
TODAY
TOMORROW
Collect Boxes
2:30PM
Paris
Bob
Needs more helpers!
Move Piano
1:00PM
Paris
Josh
Go to map view
Scrolls off the page
Shown if you're
still asking for
help
Let Me Help!
SOON
Collect Boxes
2:30PM
Help Chris!
Assemble Desk
3:00PM
Help Dave!
LATER
Move Piano
Tuesday 1PM
Disassemble Ke...Wednesday 1PM
Go to map view
Scrolls off the bottom
Click entry to go
to details page
Compact view
for later tasks
Slide 22
Slide 22 text
How are we
getting there?
Slide 23
Slide 23 text
1. Figure out what’s in the app
2. Design how the app’s laid out
3. Figure out how it fits together
4. See how it will work
Slide 24
Slide 24 text
No Code
Slide 25
Slide 25 text
And now…
Slide 26
Slide 26 text
Mobile Computing
and Interaction
Slide 27
Slide 27 text
Only some things.
Not all of the things.
Slide 28
Slide 28 text
Don’t try to do everything.
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Serve a purpose.
Slide 32
Slide 32 text
It’s not a computer.
But it is a computer.
Slide 33
Slide 33 text
Let’s talk about humans.
Slide 34
Slide 34 text
Humans.
Slide 35
Slide 35 text
Humans are arrogant,
lazy, and easily bored.
Slide 36
Slide 36 text
Humans are arrogant.
They’ll expect other people to anticipate what they want,
and give it to them the moment they want it.
Slide 37
Slide 37 text
Humans are lazy.
They don’t want to work to get nice things.
Slide 38
Slide 38 text
Humans are easily bored.
If something takes longer than a couple of seconds,
they’re not interested.
Slide 39
Slide 39 text
Behold: your
customer!
Slide 40
Slide 40 text
We’re kind of exaggerating.
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
Mobile computers are different
to desktop computers.
Slide 44
Slide 44 text
Mobile apps are different to
other apps.
Slide 45
Slide 45 text
Modern mobile devices are
basically Unix machines, but you
don’t write Unix programs.
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
Small screens.
Short attention spans.
Limited capacity.
Slide 48
Slide 48 text
The Mouse Doesn’t Exist
This picture is a gerbil.
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Direct Manipulation Rocks
Slide 51
Slide 51 text
Scrolling with inertia!
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
The iPhone’s inertia-like flick
scrolling seems to work really
well for this.
- John Gruber, 2007
Slide 54
Slide 54 text
Direct manipulation rocks!
Slide 55
Slide 55 text
Direct manipulation sucks!
Slide 56
Slide 56 text
Direct manipulation sucks!
(for you)
Slide 57
Slide 57 text
Crutch
Slide 58
Slide 58 text
Virtual keyboards suck
Slide 59
Slide 59 text
No tactile feedback.
Slide 60
Slide 60 text
Individual keys are small.
Slide 61
Slide 61 text
Keyboard entry
=
50% of the screen is gone
lol cant see ur
content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
Virtual keyboards rule.
Slide 64
Slide 64 text
Keyboards hide
when unnecessary.
Slide 65
Slide 65 text
Keyboards change
when necessary.
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
Typing still sucks.
Slide 68
Slide 68 text
Fingers are big, screens are small
Slide 69
Slide 69 text
How we use touch interfaces
Slide 70
Slide 70 text
How we don’t use touch interfaces
Slide 71
Slide 71 text
Real world things and digital things
Slide 72
Slide 72 text
Fingers are big, screens are small
Slide 73
Slide 73 text
Touch targets
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
Minimum size
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
Reachable region
Slide 79
Slide 79 text
Courtesy Scott Hurff
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
Hands are opaque
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
Controls at the top of the screen:
Replaces what you’re looking at
Controls at the bottom of the screen:
Modifies you’re looking at
Slide 86
Slide 86 text
Controls at the top of the screen:
Back button; URL field; new button
Controls at the bottom of the screen:
Check in button; keyboard
Slide 87
Slide 87 text
The user’s hand is a
solid object.
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
Can tap these
while looking at
screen content
Can’t tap these
without covering
the screen
Slide 90
Slide 90 text
Hands also hold the device.
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
The screen is small.
Slide 95
Slide 95 text
The human eye
can only see so much.
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
Make every pixel count.
Slide 99
Slide 99 text
Goals -> Features
Slide 100
Slide 100 text
Features are what the app can do
“Seeing what task are left to do”
“I want to manage my move”
Goals are what the user can do
Slide 101
Slide 101 text
Activity
Slide 102
Slide 102 text
Prune your feature list.
Just Enough Computer.
Slide 103
Slide 103 text
1. Take a feature list.
2. Pick the three most important.
3. Argue why they’re the most important.
Slide 104
Slide 104 text
Debrief.
Adding tasks that
make up my move Seeing which tasks I
have completed
Adding tasks to my
personal calendar
Seeing which tasks I
have to do today
Adding tasks to my
personal calendar
Asking my friends if
they can help
Slide 105
Slide 105 text
PART 2
Mobile Design Concepts
Slide 106
Slide 106 text
PART 2
Android Design Concepts
Slide 107
Slide 107 text
Actions
Slide 108
Slide 108 text
Do something
Do it well
Slide 109
Slide 109 text
Do something
Make it obvious
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
The Action Bar
app icon
action items action overflow
Slide 112
Slide 112 text
Toolbars
The App Bar
Slide 113
Slide 113 text
No content
Slide 114
Slide 114 text
What are actions?
Slide 115
Slide 115 text
FIT Scheme
Frequent
Important
Typical
http://developer.android.com/design/patterns/actionbar.html
Slide 116
Slide 116 text
Frequent
Slide 117
Slide 117 text
Important
Slide 118
Slide 118 text
Typical
Slide 119
Slide 119 text
No content
Slide 120
Slide 120 text
No content
Slide 121
Slide 121 text
What’s not in the app bar
•Find & Replace
•Export
•Offline
•Document
Details
Slide 122
Slide 122 text
Toolbar Paradigms
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 text
No content
Slide 125
Slide 125 text
Menus aren’t gone
:(
Slide 126
Slide 126 text
No content
Slide 127
Slide 127 text
Frequent
Important
Typical
Slide 128
Slide 128 text
Always
Sometimes
Never
Slide 129
Slide 129 text
Toolbars
The most important things go
here
Split or single?
Overflow Menu: Always,
sometimes, or never?
Slide 130
Slide 130 text
Navigation
Slide 131
Slide 131 text
Where am I?
What can I do here?
Slide 132
Slide 132 text
How did I get here?
Where can I go next?
Slide 133
Slide 133 text
Navigation
with toolbars
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
Tabs
Stack Liszt
Slide 136
Slide 136 text
Tabs
Stack List
Slide 137
Slide 137 text
Tabs
Slide 138
Slide 138 text
No content
Slide 139
Slide 139 text
No content
Slide 140
Slide 140 text
List navigation
Slide 141
Slide 141 text
No content
Slide 142
Slide 142 text
No content
Slide 143
Slide 143 text
Lists
ONE thing
ALL of the things
SOME of the things
Slide 144
Slide 144 text
Tabs
SOME of the things
SOME of the things SOME of the things
Slide 145
Slide 145 text
Graphic Design
Slide 146
Slide 146 text
No content
Slide 147
Slide 147 text
Text
Text
Text
Text
Slide 148
Slide 148 text
“layout and typography are
crisp and meaningful.”
http://developer.android.com/design/get-started/creative-vision.html
Slide 149
Slide 149 text
Swiss
Design
Slide 150
Slide 150 text
No content
Slide 151
Slide 151 text
No content
Slide 152
Slide 152 text
No content
Slide 153
Slide 153 text
FONT
WEIGHTS
HAVE
MEANING
Slide 154
Slide 154 text
No content
Slide 155
Slide 155 text
Icons
Slide 156
Slide 156 text
No content
Slide 157
Slide 157 text
No content
Slide 158
Slide 158 text
No content
Slide 159
Slide 159 text
No content
Slide 160
Slide 160 text
Icons should be obvious.
If it’s not obvious, use
text.
Slide 161
Slide 161 text
When is it obvious?
Slide 162
Slide 162 text
It’s obvious if
lots of other apps do it
Slide 163
Slide 163 text
It’s obvious if
it’s obvious
Slide 164
Slide 164 text
No content
Slide 165
Slide 165 text
It’s obvious if
Google has an icon for it
http://developer.android.com/design/downloads/index.html
Slide 166
Slide 166 text
No content
Slide 167
Slide 167 text
Text
Colours
Icons
In order of importance
Slide 168
Slide 168 text
Activity
Slide 169
Slide 169 text
1. Improve some wireframes
2. Make some new ones
Slide 170
Slide 170 text
What Are Wireframes?
Slide 171
Slide 171 text
MAP
Jane Smith
Raoul McGuinness
12:30 PM: Move Piano
Some other task goes here
Map showing
friend
locations
List of
friends
showing task
names
Tap name to
show details
on the task
they want
done?
Slide 172
Slide 172 text
No content
Slide 173
Slide 173 text
“Available Tasks”
screen
“My Tasks”
screen
Map / List
of friends
List of tasks
Task details
Slide 174
Slide 174 text
No content
Slide 175
Slide 175 text
Screens
IMPROVE: Tasks ordered by time
MAKE: “New Task”
MAKE: Tasks on map
Slide 176
Slide 176 text
1. Improve the task list screen
2. Design the new task and map screens
( 10 minutes )
Slide 177
Slide 177 text
Here’s One We Prepared
Earlier.
Slide 178
Slide 178 text
Coffee Time
Slide 179
Slide 179 text
Activity
Slide 180
Slide 180 text
Activity
1. Take your wireframes
2. Link them up
Slide 181
Slide 181 text
Debrief.
Slide 182
Slide 182 text
Existing with other
Apps and Devices
Slide 183
Slide 183 text
No content
Slide 184
Slide 184 text
No content
Slide 185
Slide 185 text
No content
Slide 186
Slide 186 text
•Enchant me
•Simplify my life
•Make me amazing
“Creative Vision”
http://developer.android.com/design/get-started/creative-vision.html
Slide 187
Slide 187 text
We have no idea
what these mean.
Slide 188
Slide 188 text
No content
Slide 189
Slide 189 text
“A material metaphor is the unifying theory of a
rationalized space and a system of motion. The
material is grounded in tactile reality, inspired by
the study of paper and ink, yet technologically
advanced and open to imagination and magic.”
http://www.google.com/design/
Slide 190
Slide 190 text
“Doug Fir James Mercer cashew cheese Pearl
District it's raining again. Also beers late-night
happy hours fixed gear Holocene bridgetown;
smoked ham ice cream Voodoo Donuts bicycle
rights brewvana bubble tea fifth quadrant muesli.”
http://www.google.com/design/
Slide 191
Slide 191 text
How to be an
Android App
Slide 192
Slide 192 text
Do one thing
Do it well
Slide 193
Slide 193 text
Multiple Features
One Purpose
Slide 194
Slide 194 text
No content
Slide 195
Slide 195 text
Make it easy to leave
Make it even easier to return
Slide 196
Slide 196 text
“Our goal is to have people leave our
website as quickly as possible.”
http://www.google.com/about/company/
philosophy/
Slide 197
Slide 197 text
No content
Slide 198
Slide 198 text
Being a great app
means
Being great with other apps