Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tap, Not Click: Mobile User-Interface Design

645ea43c28ae373fd90ba81eb8a1b9de?s=47 Chetana Deorah
September 23, 2013

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.

645ea43c28ae373fd90ba81eb8a1b9de?s=128

Chetana Deorah

September 23, 2013
Tweet

More Decks by Chetana Deorah

Other Decks in Design

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