mobile app design methods

8/20/2019 Mobile App Design Methods

1/18

Interactivity 1

Mobile App Design

Some Suggested 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


3/18

Interactivity 1

PACT AnalysisA Framework for User Experience Design


4/18

People

Activities

Contexts

Technologies


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


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


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



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



9/18

Where are the activities occurring?

Physical

Environment - weather, noise, location

Social

Private or Public

Organizational

Institutional, Workplace

People

Activities



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



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


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



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.


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.


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.


16/18

Interaction Map


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/


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.

mobile app design methods

Documents