Cross-device, Cross-platform: Mobile Design Tutorial

6ed02dec32058508c6feb43b2fbc94f7?s=47 Secret Lab
July 20, 2015

Cross-device, Cross-platform: Mobile Design Tutorial

OSCON 2015

6ed02dec32058508c6feb43b2fbc94f7?s=128

Secret Lab

July 20, 2015
Tweet

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

  4. None
  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.

  29. None
  30. None
  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.

  41. None
  42. None
  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.
  46. None
  47. Small screens.  Short attention spans. Limited capacity.

  48. The Mouse Doesn’t Exist This picture is a gerbil.

  49. None
  50. Direct Manipulation Rocks

  51. Scrolling with inertia!

  52. None
  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
  62. None
  63. Virtual keyboards rule.

  64. Keyboards hide when unnecessary.

  65. Keyboards change when necessary.

  66. None
  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

  74. None
  75. Minimum size

  76. None
  77. None
  78. Reachable region

  79. Courtesy Scott Hurff

  80. None
  81. None
  82. Hands are opaque

  83. None
  84. None
  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.

  88. None
  89. Can tap these while looking at screen content Can’t tap

    these without covering the screen
  90. Hands also hold the device.

  91. None
  92. None
  93. None
  94. The screen is small.

  95. The human eye  can only see so much.

  96. None
  97. None
  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

  110. None
  111. The Action Bar app icon action items action overflow

  112. Toolbars The App Bar

  113. None
  114. What are actions?

  115. FIT Scheme Frequent Important Typical http://developer.android.com/design/patterns/actionbar.html

  116. Frequent

  117. Important

  118. Typical

  119. None
  120. None
  121. What’s not in the app bar •Find & Replace •Export

    •Offline •Document Details
  122. Toolbar Paradigms

  123. None
  124. None
  125. Menus aren’t gone :(

  126. None
  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

  134. None
  135. Tabs Stack Liszt

  136. Tabs Stack List

  137. Tabs

  138. None
  139. None
  140. List navigation

  141. None
  142. None
  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

  146. None
  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

  150. None
  151. None
  152. None
  153. FONT WEIGHTS HAVE MEANING

  154. None
  155. Icons

  156. None
  157. None
  158. None
  159. None
  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

  164. None
  165. It’s obvious if Google has an icon for it http://developer.android.com/design/downloads/index.html

  166. None
  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?
  172. None
  173. “Available Tasks” screen “My Tasks” screen Map / List of

    friends List of tasks Task details
  174. None
  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

  183. None
  184. None
  185. None
  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.

  188. None
  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

  194. None
  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/
  197. None
  198. Being a great app means Being great with other apps

  199. Your app should provide features to other apps

  200. None
  201. None
  202. If there’s a native experience, 

  203. If other apps provide functionality, use it

  204. None
  205. WRONG BETTER

  206. None
  207. None
  208. Foursquare Search, discovery, recommendations Swarm Checkins, meet-ups, competition

  209. None
  210. None
  211. None
  212. None
  213. None
  214. None
  215. None
  216. None
  217. Design for an integrated experience

  218. iOS and Android

  219. Philosophy

  220. None
  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

  227. None
  228. None
  229. None
  230. None
  231. None
  232. None
  233. None
  234. None
  235. None
  236. None
  237. iOS and Android Look Different not so ^

  238. Both use Flat Design

  239. None
  240. None
  241. Simple geometric fundamental shapes Slight shading to imply volume Very

    subtle shadowing to create depth Icons rely on silhouettes
  242. Layout

  243. None
  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
  245. None
  246. None
  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

  263. None
  264. Screens on Phones are Elements on Tablets

  265. `

  266. Master-Detail

  267. LAZY!

  268. None
  269. Other Layouts

  270. None
  271. None
  272. Maps

  273. Some apps don’t need new layouts

  274. None
  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

  283. None
  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

  297. None
  298. None
  299. None
  300. “New World” Design (2012-2015)

  301. High contrast

  302. Solid colours

  303. Vibrancy

  304. None
  305. None
  306. None
  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.
  327. None
  328. Instagram starts uploading here Most apps start uploading here

  329. None
  330. Never drop data.

  331. Expose yourself.

  332. The device’s conditions change.  A lot.

  333. None
  334. Things that can change: Screen size Speed of CPU /

    GPU Available memory Storage space Network speed Everything ✔ ✔ ✔ ✔ ✔ ✔
  335. None
  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.

  345. None
  346. Beware the Port

  347. UI ports from iOS to Android look bad.

  348. None
  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