Tap, Not Click: Mobile User-Interface Design

An Inneract Project Learning Labs 1-day workshop with high school students on the why, what and how of design, user-interface design designing for mobile devices.

Transcript

1. TAP, NOT CLICK! MOBILE USER-INTERFACE DESIGN Chetana Deorah SEPTEMBER 2013 INNERACT  PROJECT  LEARNING  LABS  
2. TAP, NOT CLICK! MOBILE APP UI DESIGN INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
3. MOBILE APPLICATION USER-INTERFACE DESIGN INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
4. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
5.           “Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it's really how it works.” Steve Jobs INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
6. MOBILE APPLICATION USER-INTERFACE DESIGN INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
7. TP 1 radio/phono combination, 1959 Dieter Rams for Braun MPZ 21 multipress citrus juicer, 1972 Dieter Rams and Jürgen Greubel for Braun INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
8. Vintage car dashboard INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
9. Tesala “dashboard” INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
10.     “Good design makes a product understandable.” Dieter Rams, 1978 h9ps://www.vitsoe.com/us/about/good-­‐design   INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
11. MOBILE APPLICATION USER-INTERFACE DESIGN INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
12. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS   Desktop application (or web application, mobile application...)
13.     “A picture is worth a thousand words. An interface is worth a thousand pictures.” Ben Shneiderman, 1947 INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
14. DESIGN PROCESS INNERACT  PROJECT  LEARNING  LABS  
15. …CREATE > sketch > wireframes > paper prototypes > INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
16. MOBILE APPLICATION USER-INTERFACE DESIGN Why Mobile App Design?   What is it all about? Website Design to Mobile App Design How to? Being a Designer INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
17. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS   …CREATE > define
18. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS   …CREATE > sketch > concepts
19. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS   …CREATE > sketch > user tasks
20. …CREATE > sketch > visual design INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
21. MOBILE APPS (NATIVE) INNERACT  PROJECT  LEARNING  LABS  
22. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
23. PANDORA: The WEBSITE > MOBILE APP (iPhone/ iOS) INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
24. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
25. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
26. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
27. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
28. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
29. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
30. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
31. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
32. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
33. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
34. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
35. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
36. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
37. CORE DESIGN ELEMENTS INNERACT  PROJECT  LEARNING  LABS  
38. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS   www.usercentered.net
39. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS   Table View List View Mobile Web View Keyboard www.usercentered.net
40. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
41. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
42. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
43. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
44. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS   DESIGNING MOBILE UI Design Brief What will the app do? What will it make easier for users? Who are the Users? Sketch The app map – the system Identify key screens and main navigation Interaction sketches Paper prototype Wireframes USability Testing Visual Design Development QA Launch INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
45. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS   Paul Adams @padday
46. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS  
47. BEING A DESIGNER Graphic Designer Fashion Designer Interior Designer Industrial Designer Architect User-Interface Designer/ Web Designer/ Product Designer/ Digital Designer Interaction Designer Information Architect Visual Designer Book Designer Lighting Designer Jewelry Designer …  
48. INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS   TAP, NOT CLICK! Thank You CHETANA DEORAH chetanad@gmail.com INNERACT  PROJECT  LEARNING  LABS  FALL  2013  HIGH  SCHOOL  STUDENTS