Level Up Your Apps: Mobile UX Design and Development

The slides from the tutorial on Android design and development that @chrisjrn, @desplesda and @parisba ran at OSCON 2013 in Portland.

Blog post/details at http://blog.secretlab.com.au/2013/07/23/mobile-ux-design-and-development/

Transcript

1. Level Up Your Apps! There are prerequisites for this session available at http://lab.to/oscon-2013 Please install the software if you want to follow the coding exercises.
2. Level Up Your Apps Mobile UX, Design, and Development
3. What You’ll Learn Why mobile apps are different Designing a mobile user experience Android’s architecture Building an Android app
4. Introduction (us, Android, etc etc etc)
5. Chris Neugebauer Jon Manning Paris Buttfield-Addison Python developer iOS developer ?!
6. Next year!
7. We are Australian. Please inform us if we do not make sense.
8. Android.
9. It’s an operating system
10. It’s an operating system for phones.
11. It’s an operating system for tablet devices.
12. It’s an operating system for your sunglasses.
13. The latest version 4.2 (“Jelly Bean”)
14. This tutorial: Designing Mobile Apps
15. This tutorial: Designing Android 4.0 Apps
16. The Goal: An Android App for OSCON
17. Housekeeping
18. Git! We’ve got a git repo full of our example app! git clone https://github.com/thesecretlab/oscon-2013-app.git cd oscon-2013-app git checkout talk_listing_start
19. Let’s talk about humans.
20. Humans are arrogant, lazy, and easily bored.
21. Humans are lazy. They don’t want to work to get nice things.
22. Humans are arrogant. They’ll expect other people to anticipate what they want, and give it to them the moment they want it.
23. Humans are easily bored. If something takes longer than a couple of seconds, they’re not interested.
24. Behold: your customer!
25. We’re kind of exaggerating.
28. Mobile Design
29. Mobile computers are different to desktop computers.
30. Mobile apps are different to other apps.
31. Android is a Unix machine, but don’t write Unix programs.
33. Small screens. Short attention spans. Limited capacity.
34. The Mouse Doesn’t Exist
36. Direct Manipulation Rocks
37. Scrolling with inertia!
39. The iPhone’s inertia-like flick scrolling seems to work really well for this. - John Gruber, 2007
40. Direct manipulation rocks!
41. Direct manipulation sucks!
42. Direct manipulation sucks! (for you)
43. Crutch
44. Virtual keyboards suck
45. No tactile feedback.
46. Individual keys are small.
47. Keyboard entry = 50% of the screen is gone
49. Virtual keyboards rule.
50. Keyboards hide when unnecessary.
51. Keyboards change when necessary.
53. Typing still sucks.
54. The user’s hand is a solid object.
57. Can tap these while looking at screen content Can’t tap these without covering the screen
58. Hands also hold the device.
63. The screen is small.
64. The human eye can only see so much.
67. Make every pixel count.
68. Summary Direct Manipulation Keyboards Orientation
69. Android Principles And how it’s not iOS or GNOME or the Web
70. Android Principles
71. •Enchant me •Simplify my life •Make me amazing “Creative Vision” http://developer.android.com/design/get-started/creative-vision.html
72. We have no idea what these mean.
73. Our Creative Vision
74. Do one thing Do it well
75. Multiple Features One Purpose
77. Make it easy to leave Make it even easier to return
78. “Our goal is to have people leave our website as quickly as possible.” http://www.google.com/about/company/philosophy/
80. Being a great app means Being great with other apps
81. Your app should provide features to other apps
84. If there’s a native experience, provide it.
85. If other apps provide functionality, use it
88. What does this mean?
89. Android UI Paradigms
90. Actions
91. Do something Do it well
92. Do something Make it obvious
94. The Action Bar
96. What are actions?
97. FIT Scheme Frequent Important Typical http://developer.android.com/design/patterns/actionbar.html
98. Frequent
99. Important
100. Typical
103. What’s not in the action bar •Jump To Top •View my Profile •Mute •View Settings
104. Action Bar Paradigms
107. Menus aren’t gone :(
109. Frequent Important Typical
110. Always Sometimes Never
111. Action Bars The most important things go here Split or single? Overflow Menu: Always, sometimes, or never?
112. Navigation
113. Where am I? What can I do here?
114. How did I get here? Where can I go next?
115. Navigation with the action bar
117. Tabs
120. List navigation
123. Lists ONE thing ALL of the things SOME of the things
124. Tabs SOME of the things SOME of the things SOME of the things
125. “Back” vs. “Up”
126. http://developer.android.com/design/patterns/navigation.html
127. http://developer.android.com/design/patterns/navigation.html
128. Graphic Design
130. Text
131. “layout and typography are crisp and meaningful.” http://developer.android.com/design/get-started/creative-vision.html
132. Swiss Design
136. FONT WEIGHTS HAVE MEANING
139. Icons
144. Icons should be obvious. If it’s not obvious, use text.
145. When is it obvious?
146. It’s obvious if lots of other apps do it
147. It’s obvious if it’s obvious
149. It’s obvious if Google has an icon for it http://developer.android.com/design/downloads/index.html
151. An aside: Heuristic Analysis
153. 0 25 50 75 100 0 5 10 15 Percentage of Usability Problems Found Number of Evaluators
154. Analyse your results. Create findings.
155. Text Colours Icons In order of importance
156. Summary Think about design. Please.
157. Making an App
158. We’re going to make an OSCON app.
159. We’ll go through the process of conceptualising and designing the interface.
160. You’ll design some stuff!
161. You’ll work with the person next to you. Say hello!
162. Designing a Mobile App
163. Our Process
164. The tools you’ll need:
165. The tools you’ll need:
166. Start with an outline.
167. “I want to see what’s happening at OSCON.”
168. Outlines can be iterated upon.
169. “I want to quickly see what’s happening at OSCON.”
171. Now start listing features.
172. What are the three most important features that this app must have?
173. What We Thought See the details of a talk See what talks are on sometime Update the schedule
174. What We Thought Individual session screen List of sessions List days of conference Updating should be invisible See the details of a talk See what talks are on sometime Update the schedule
175. Draw the screens needed for the features you’ve chosen.
177. Never code before designing.
178. Side note: API design is still design.
179. Code something and test it. Now.
181. Iterate.
183. Coffee time See you at 11:00am! We’ve got a git repo full of our example app! git clone https://github.com/ thesecretlab/oscon-2013- app.git cd oscon-2013-app git checkout talk_listing_start
184. Step 1 A static app
185. Stage 1 Implement all of the screens of the app Will always show the same data, no matter what we press Will not be themed beyond the defaults
186. We’ll give you most of the code. Follow along with us.
187. Three screens to make.
188. What is an Android App?
189. A loose collection of managed Java classes Instructions telling Android how they all fit together An Android app is:
190. The Manifest An XML file that describes the contents of the app to the Android OS More on that later.
191. Activities public void onCreate(Bundle foo) { doLol(); } public void warble() { } UI bits
193. Rare Startup Shutdown Frequent Rare
194. UI thread vs. background threads Great and epic battle?
195. “The developer of this app was lazy and foolish, please check the Play Store for something better!” http://developer.android.com/guide/practices/design/responsiveness.html
196. Keep off the UI thread
197. Views
198. Image View Text View Scroll Pane Button Composite Layout
199. Fragments
200. Your New Master
201. Introduced in 3.0, Back-ported to 1.6. It’s that important.
202. Views with code Views with a life cycle
205. Activities vs. Fragments
206. Activities are expensive
207. FRAGMENTS
208. Fragments Many at once.
209. Talk Listings
210. (We’re going to code now!) git checkout talk_listing_start
211. git checkout talk_listing_end
212. Adding a second screen
213. We need one activity to launch another.
214. Intents
215. OS-Level signals Used to launch activities
216. OS-Level signals Used to launch other apps
217. Schedule
218. (We’re going to code now!) git checkout schedule_start
219. git checkout schedule_end
220. Days List
221. (We’re going to code now) git checkout day_list_start
222. git checkout day_list_end
223. Finished (for now)!
224. Finishing An App Part 2
225. YOU ARE HERE.
226. Implementing “Up” navigation
227. (Coding goes here) (git checkout navigation_start)
228. git checkout navigation_end
229. Backing it with data
230. git checkout data_end
231. Adding tab navigation
232. git checkout tabs_end
233. Theming the app
234. Coding Exercise (git checkout theme_start)
235. git checkout theme_end
236. The End?
237. Problems!
238. “It’s too slow!”
241. a-ha!
242. git checkout make_faster
243. “I don’t know what’s on now.”
244. From This
245. To This...
246. ...Or This
247. git checkout navigation_refresh
248. “I want session reminders.” “I want to tweet sessions.” “I want abstracts from the website.”
249. git checkout talk_listing_update
250. Polish.
251. git checkout themeing_finished
252. Finished! http://lab.to/oscon2013apk
253. Bringing it together (We have a point to make)
254. Building apps people want to use Harder than you think.
255. People do not like phones. Because they’re generally unpleasant to use.
256. Mobile users hate being surprised.
257. Dialog boxes suck. Being modal also sucks.
258. A similar problem: deleting stuff
259. What should happen?
260. Option 1: Do nothing
261. Option 2: Pop a dialog box!
262. Option 3: Quietly indicate.
264. Be fast. We mentioned this before. http://lab.to/qQlVJW
265. Pretend to be fast. (If you’re not fast!)
266. Be responsive.
267. Lag equals death.
269. Instagram starts uploading here Most apps start uploading here
271. Never drop data.
272. Expose yourself.
273. The device’s conditions change. A lot.
275. Things that can change: Screen size Speed of CPU / GPU Available memory Storage space Network speed Everything ✔ ✔ ✔ ✔ ✔ ✔
277. Minimise your views Views are expensive! MEMORY PROBLEM
278. Think about first launch
279. Your home activity Straightforward, aesthetic, consistent.
280. Think about the ecosystem It’s more than just your app.
281. It starts in the Marketplace.
282. *Slide stolen from Roman Nurik’s Google Developer Day 2010 presentation.
283. Where am I? What can I do? What else can I do?
284. Constant collaboration between design and development
285. Style your app. Never port it.
287. Beware the Port
288. UI ports from iOS to Android look bad.
291. Start development early.
292. Mobile is the perfect storm
293. Greatest Strength? It runs on a whole bunch of devices.
294. Biggest Weakness? It runs on a whole bunch of devices.
295. Summary. This is a summary, yes.
296. Thanks for coming!
297. Important Things! •Give us feedback • http://spkr8.com/t/23521 • http://lab.to/oscon-2013 •Download the App! • http://lab.to/oscon2013apk
298. @thesecretlab