Upload
gelvan
View
214
Download
0
Embed Size (px)
Citation preview
8/20/2019 Mobile App Design Methods
1/18
Interactivity 1
Mobile App Design
Some Suggested Methods
8/20/2019 Mobile App Design Methods
2/18
Interactivity 1
Mobile App Design
A Few Quick and Dirty Methods
1. PACT Analysis
2. App Analysis
3. Lo/Hi Fi Wireframe
4. Interaction Map
5. Hi-Fi Prototyping
8/20/2019 Mobile App Design Methods
3/18
Interactivity 1
PACT AnalysisA Framework for User Experience Design
8/20/2019 Mobile App Design Methods
4/18
People
Activities
Contexts
Technologies
8/20/2019 Mobile App Design Methods
5/18
PACT Analysis
Who are the users?
What are they doing?
Where are they doing it?
How will do it?
People
Activities
Context
Technology
8/20/2019 Mobile App Design Methods
6/18
Who are you designing for?
People have varying characteristics
Physical differences
Size - height and weight
Senses - vision, hearing
Disability - accessibility
Psychological differences
Spatial ability - wayinding
Language - cultural interpretation
Attention - memory, stress, tiredness
Mental Model - association, memorability
Usage differences
Novice or Expert- technical knowledge
Homogeneous or Heterogeneous
People
Activities
ContextsTechnologies
8/20/2019 Mobile App Design Methods
7/18
Who are you designing for?
People have varying characteristics
Physical differences
Size - height and weight
Senses - vision, hearing
Disability - accessibility
Psychological differences
Spatial ability - wayinding
Language - cultural interpretation
Attention - memory, stress, tiredness
Mental Model - association, memorability
Usage differences
Novice or Expert- technical knowledge
Homogeneous or Heterogeneous
People
Activities
ContextsTechnologies
8/20/2019 Mobile App Design Methods
8/18
What are the people doing?
Frequency
Regular - daily, yearly
Cooperation
Alone or with others
Complexity
Well deined or vague
Safety Critical
Prevent injury/harm, errors
Nature of Content
Amount of info, form
People
Activities
ContextsTechnologies
8/20/2019 Mobile App Design Methods
9/18
Where are the activities occurring?
Physical
Environment - weather, noise, location
Social
Private or Public
Organizational
Institutional, Workplace
People
Activities
ContextsTechnologies
8/20/2019 Mobile App Design Methods
10/18
What are people using or will use?
Medium
Mouse, touch, gesture, scan, speech
Output Display, audio, tactile
Communication
Networks, one-to-one, one-to-many
Input
Hardware, software
Content
accurate, relevant, understandable
People
Activities
ContextsTechnologies
8/20/2019 Mobile App Design Methods
11/18
Scoping a problem with the PACT
Goal is to harmonize the PACT elements
Useful to understand current state
Scope as many Ps, As Cs and Ts as possible
Observe and talk to people
People
Activities
ContextsTechnologies Identify pain points and unmet needs
8/20/2019 Mobile App Design Methods
12/18
Think about the user community
How is this community de ined ?
Stakeholders
People
Physical, social, functional
Contexts
Some obvious - others not so much
Activities
Current and proposed
Technologies
People
Activities
ContextsTechnologies
8/20/2019 Mobile App Design Methods
13/18
Wireframing
Wireframes provide designers with a visual plan
for building more complex interactive products.
They often start as a schematic for your app with
basic layout of content and interface elements.
8/20/2019 Mobile App Design Methods
14/18
Wireframing
Low idelity (lo-i) wireframes are simply
lines and shapes on a plain background
with some labels to identify content areas
and interface elements.
These can be hand-drawn or digital, and
they are very basic.
8/20/2019 Mobile App Design Methods
15/18
Wireframing
Highidelity (hi-
i) wireframes go a few steps further, applying certain visual
design elements within the screens.
This includes: colour, icons, shapes, photos type treatment, labels, menus.
Include actual content so you start to work with actual material.
8/20/2019 Mobile App Design Methods
16/18
Interaction Map
8/20/2019 Mobile App Design Methods
17/18
Interactive Prototyping
https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/https://facebook.github.io/origami/http://blogs.adobe.com/creativecloud/introducing-project-comet-a-new-tool-for-designing-and-prototyping-user-experiences/http://www.pixate.com/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/https://proto.io/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/http://framerjs.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.sketchapp.com/https://www.flinto.com/http://www.invisionapp.com/
8/20/2019 Mobile App Design Methods
18/18
Interactive Prototyping - Exercise
You have been asked to design app for a coffee shop. It will run on a tablet for the
cashier to send the order to the barista
The requirements are as follows:
- 3 drinks options (coffee, tea, hot chocolate) in 3 sizes (S,M,L)
- conirm each drink before adding to the total order
- an option to modify a drink order
- calculate and display the price of the total order
- issue a conirmation of the order before inally sending it to the barista
Using this criteria quickly sketch a user low and basic user interface elementsneeded.