TAP, NOT CLICK!
MOBILE USER-INTERFACE DESIGN
Chetana Deorah SEPTEMBER 2013
INNERACT
PROJECT
LEARNING
LABS
Slide 2
Slide 2 text
TAP, NOT CLICK!
MOBILE APP UI DESIGN
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 3
Slide 3 text
MOBILE APPLICATION
USER-INTERFACE DESIGN
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 4
Slide 4 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 5
Slide 5 text
“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
Slide 6
Slide 6 text
MOBILE APPLICATION
USER-INTERFACE DESIGN
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
Vintage car dashboard
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 9
Slide 9 text
Tesala “dashboard”
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 10
Slide 10 text
“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
Slide 11
Slide 11 text
MOBILE APPLICATION
USER-INTERFACE DESIGN
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 12
Slide 12 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Desktop application (or web application, mobile application...)
Slide 13
Slide 13 text
“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
Slide 14
Slide 14 text
DESIGN PROCESS
INNERACT
PROJECT
LEARNING
LABS
Slide 15
Slide 15 text
…CREATE > sketch > wireframes > paper prototypes >
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
…CREATE > define
Slide 18
Slide 18 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
…CREATE > sketch > concepts
Slide 19
Slide 19 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
…CREATE > sketch > user tasks
Slide 20
Slide 20 text
…CREATE > sketch > visual design
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 21
Slide 21 text
MOBILE APPS (NATIVE)
INNERACT
PROJECT
LEARNING
LABS
Slide 22
Slide 22 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 23
Slide 23 text
PANDORA: The WEBSITE > MOBILE APP (iPhone/ iOS)
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 24
Slide 24 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 25
Slide 25 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 26
Slide 26 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 27
Slide 27 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 28
Slide 28 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 29
Slide 29 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 30
Slide 30 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 31
Slide 31 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 32
Slide 32 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 33
Slide 33 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 34
Slide 34 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 35
Slide 35 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 36
Slide 36 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 37
Slide 37 text
CORE DESIGN ELEMENTS
INNERACT
PROJECT
LEARNING
LABS
Slide 38
Slide 38 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
www.usercentered.net
Slide 39
Slide 39 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Table View List View Mobile Web
View
Keyboard
www.usercentered.net
Slide 40
Slide 40 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 41
Slide 41 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 42
Slide 42 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 43
Slide 43 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Paul Adams @padday
Slide 46
Slide 46 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
Slide 47
Slide 47 text
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
…
Slide 48
Slide 48 text
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS
TAP, NOT CLICK! Thank You
CHETANA DEORAH [email protected]
INNERACT
PROJECT
LEARNING
LABS
FALL
2013
HIGH
SCHOOL
STUDENTS