Cross-device, Cross-platform: Mobile Design Tutorial

OSCON 2015

Transcript

1. Cross-device, cross-platform: 
 Designing for the entire mobile universe #tinketytonk
2. Mobile Design Tutorial with a Title 
 Invented By An Marketing Department Totally Not an Android Tutorial in Disguise™ #tinketytonk
3. @parisba @chrisjrn
5. We’re from Australia We apologise in advance. (This picture is of the Prime Minister of Australia.)
6. We Will Not Be Writing Code.
7. The tools you’ll need: A Brain Pen and Paper
8. This Is Not A Material Design HOWTO We might mention it occasionally, though.
9. Housekeeping
10. We run until 5 PM Afternoon Break from 3 to 3:30 PM
11. unique challenges of mobile devices rules for mobile app developers wireframes usability and look
12. 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
13. Activities Drawing Group Work Diagrams
14. Activity
15. Apps are great at doing small, helpful things.
16. Help me move house! I’m moving from Portland to Austin this year!
17. What does a house moving app need? Introduce yourself to the person next to you, and discuss…
18. That Was Fun! Anything interesting?
19. What are we
 actually Making?
20. Social TODO lists Scheduling tasks with friends Finding people to help out Finding nearby tasks to help out with
21. 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
22. How are we getting there?
23. 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
24. No Code
25. And now…
26. Mobile Computing and Interaction
27. Only some things. Not all of the things.
28. Don’t try to do everything.
31. Serve a purpose.
32. It’s not a computer. But it is a computer.
33. Let’s talk about humans.
34. Humans.
35. Humans are arrogant, lazy, and easily bored.
36. Humans are arrogant. They’ll expect other people to anticipate what they want, 
 and give it to them the moment they want it.
37. Humans are lazy. They don’t want to work to get nice things.
38. Humans are easily bored. If something takes longer than a couple of seconds, 
 they’re not interested.
39. Behold: your customer!
40. We’re kind of exaggerating.
43. Mobile computers are different to desktop computers.
44. Mobile apps are different to other apps.
45. Modern mobile devices are basically Unix machines, but you don’t write Unix programs.
47. Small screens.
    Short attention spans.
    Limited capacity.
48. The Mouse Doesn’t Exist This picture is a gerbil.
50. Direct Manipulation Rocks
51. Scrolling with inertia!
53. The iPhone’s inertia-like flick scrolling seems to work really well for this. - John Gruber, 2007
54. Direct manipulation rocks!
    
55. Direct manipulation sucks!
    
56. Direct manipulation sucks!
    (for you)
57. Crutch
58. Virtual keyboards suck
59. No tactile feedback.
60. Individual keys are small.
61. Keyboard entry
    =
    50% of the screen is gone lol cant see ur content
63. Virtual keyboards rule.
64. Keyboards hide when unnecessary.
65. Keyboards change when necessary.
67. Typing still sucks.
68. Fingers are big, screens are small
69. How we use touch interfaces
70. How we don’t use touch interfaces
71. Real world things and digital things
72. Fingers are big, screens are small
73. Touch targets
75. Minimum size
78. Reachable region
79. Courtesy Scott Hurff
82. Hands are opaque
85. 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
86. Controls at the top of the screen: Back button; URL field; new button Controls at the bottom of the screen: Check in button; keyboard
87. The user’s hand is a solid object.
89. Can tap these while looking at screen content Can’t tap these without covering the screen
90. Hands also hold the device.
94. The screen is small.
95. The human eye
    can only see so much.
98. Make every pixel count.
99. Goals -> Features
100. 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
101. Activity
102. Prune your feature list. Just Enough Computer.
103. 1. Take a feature list. 2. Pick the three most important. 3. Argue why they’re the most important.
104. 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
105. PART 2 Mobile Design Concepts
106. PART 2 Android Design Concepts
107. Actions
108. Do something
     Do it well
109. Do something
     Make it obvious
111. The Action Bar app icon action items action overflow
112. Toolbars The App Bar
114. What are actions?
115. FIT Scheme Frequent Important Typical http://developer.android.com/design/patterns/actionbar.html
116. Frequent
117. Important
118. Typical
121. What’s not in the app bar •Find & Replace •Export •Offline •Document Details
122. Toolbar Paradigms
125. Menus aren’t gone
     :(
127. Frequent
     Important
     Typical
128. Always
     Sometimes
     Never
129. Toolbars The most important things go here Split or single? Overflow Menu: Always, sometimes, or never?
130. Navigation
131. Where am I?
     What can I do here?
132. How did I get here?
     Where can I go next?
133. Navigation
     with toolbars
135. Tabs Stack Liszt
136. Tabs Stack List
137. Tabs
140. List navigation
143. Lists ONE thing ALL of the things SOME of the things
144. Tabs SOME of the things SOME of the things SOME of the things
145. Graphic Design
147. Text Text Text Text
148. “layout and typography are crisp and meaningful.” http://developer.android.com/design/get-started/creative-vision.html
149. Swiss
     Design
153. FONT
     WEIGHTS
     HAVE
     MEANING
155. Icons
160. Icons should be obvious.
     If it’s not obvious, use text.
161. When is it obvious?
162. It’s obvious if
     lots of other apps do it
163. It’s obvious if
     it’s obvious
165. It’s obvious if
     Google has an icon for it http://developer.android.com/design/downloads/index.html
167. Text Colours Icons In order of importance
168. Activity
169. 1. Improve some wireframes 2. Make some new ones
170. What Are Wireframes?
171. 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?
173. “Available Tasks” screen “My Tasks” screen Map / List of friends List of tasks Task details
175. Screens IMPROVE: Tasks ordered by time MAKE: “New Task” MAKE: Tasks on map
176. 1. Improve the task list screen 2. Design the new task and map screens ( 10 minutes )
177. Here’s One We Prepared Earlier.
178. Coffee Time
179. Activity
180. Activity 1. Take your wireframes 2. Link them up
181. Debrief.
182. Existing with other Apps and Devices
186. •Enchant me •Simplify my life •Make me amazing “Creative Vision” http://developer.android.com/design/get-started/creative-vision.html
187. We have no idea what these mean.
189. “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/
190. “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/
191. How to be an Android App
192. Do one thing
     Do it well
193. Multiple Features
     One Purpose
195. Make it easy to leave
     Make it even easier to return
196. “Our goal is to have people leave our website as quickly as possible.” http://www.google.com/about/company/ philosophy/
198. Being a great app
     means
     Being great with other apps
199. Your app should provide features to other apps
202. If there’s a native experience,
     
203. If other apps provide functionality, use it
205. WRONG BETTER
208. Foursquare Search, discovery, recommendations Swarm Checkins, meet-ups, competition
217. Design for an integrated experience
218. iOS and Android
219. Philosophy
221. iOS Android Deference Make Me Amazing Clarity Simplify My Life Depth Enchant Me Philosophies
222. Philosophies iOS Android Actual People Deference Make Me Amazing Um Clarity Simplify My Life WTF Depth Enchant Me Huh?
223. Applications are different things on iOS and Android
224. Android: Applications are collections of services
225. iOS: Applications are individual units of functionality Though iOS 8 and 9 changes this very slightly
226. Example
237. iOS and Android Look Different not so ^
238. Both use Flat Design
241. Simple geometric fundamental shapes Slight shading to imply volume Very subtle shadowing to create depth Icons rely on silhouettes
242. Layout
244. “In material design, every pixel drawn by an application resides on a sheet of paper.” http://www.google.com/design/spec/layout/layout-principles.html
247. Shaded Not important Raised Important Action Foreground Current focus
248. Windows Phone (Coverage given proportional to market share)
249. Big Screens
 Small Screens
250. Tablets are like phones
251. Not Very Big
252. Touch Screens
253. Task-Oriented
254. Tablets aren’t like phones
255. Phones are small* Tablets are not
256. (Phablets Tablones are ???)
257. (Phablets Tablones are ???)
258. Tablones Portrait is like a phone Landscape is not
259. Phones are Modal Tablets offer Context
260. More Space != More Features
261. Designing for Tablets
262. Phone designs rarely work well
264. Screens on Phones are Elements on Tablets
265. `
266. Master-Detail
267. LAZY!
269. Other Layouts
272. Maps
273. Some apps don’t need new layouts
275. Which works best? You decide!
276. Activity
277. 1. Cut up your wireframes 2. Rearrange them into a big screen
278. (5 minutes!) 1. Cut up your wireframes 2. Rearrange them into a big screen
279. Debrief
280. Building Apps and Testing Apps
281. Usability testing
282. Heuristic Analysis
284. Percentage of Usability Problems Found 0 25 50 75 100 Number of Evaluators 0 5 10 15
285. Analyse your results.
     Create findings.
286. Activity
287. Split your teams up. Take turns explaining your app. Figure out what’s wrong. Task
288. Task What’s wrong with your UI?
289. Debrief
290. Trends in mobile design
291. Graphic design
292. “Old World” Design (2008-2012)
293. Skeuomorphism
294. Materials
295. Gradients simulating lighting
296. Richness
300. “New World” Design (2012-2015)
301. High contrast
302. Solid colours
303. Vibrancy
307. Lessons
308. Define a colour scheme for your app
309. You won’t need a designer immediately
310. But… Design is half the product
311. Wrapping up
312. Bringing it together (We have a point to make)
313. Building apps people want to use Harder than you think.
314. People do not like phones. Because they’re generally unpleasant to use.
315. Mobile users hate being surprised.
316. Dialog boxes suck. Being modal also sucks.
317. A similar problem:
     deleting stuff
318. What should happen when that’s done?
319. Option 1:
     Do nothing
320. Option 2:
321. Option 3:
     Quietly indicate.
322. Option 3:
     Quietly indicate.
323. Be fast. We mentioned this before. http://lab.to/qQlVJW
324. (If you’re not fast!) Pretend to
     be fast.
325. Be responsive.
326. Lag equals death. 76% of people who hate their phones do so because apps aren’t responsive enough. This statistic is made up.
328. Instagram starts uploading here Most apps start uploading here
330. Never drop data.
331. Expose yourself.
332. The device’s conditions change.
     A lot.
334. Things that can change: Screen size Speed of CPU / GPU Available memory Storage space Network speed Everything ✔ ✔ ✔ ✔ ✔ ✔
336. Minimise your views Views are expensive! MEMORY PROBLEM
337. Think about first launch
338. Main screen Straightforward, aesthetic, consistent.
339. Think about 
 the ecosystem It’s more than just your app.
340. It starts when you sell it.
341. NO NO NO NO NO NO NO NO
342. Where am I? What can I do? What else can I do?
343. Constant collaboration between design and development
344. Style your app. Never port it.
346. Beware the Port
347. UI ports from iOS
     to Android
     look bad.
349. NO NO NO
350. NO NO NO
351. Start development early.
352. Greatest Strength? Wide variety of form factors and device types.
353. Biggest Weakness? Wide variety of form factors and device types.
354. Thanks! The door is on the wall a.fresh.horse/oscon-2015