Interactivity 1

Mobile App Design

Some Suggested Methods

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

Interactivity 1

PACT Analysis
A Framework for User Experience Design

People
Activities
Contexts
Technologies

PACT Analysis
People

Who are the users?

Activities
What are they doing?
Context
Where are they doing it?
Technology How will do it?

Who are you designing for?

People have varying characteristics
Physical dierences

People
Activities
Contexts

Size - height and weight

Senses - vision, hearing
Disability - accessibility
Psychological dierences
Spatial ability - wayfinding

Technologies

Language - cultural interpretation

Attention - memory, stress, tiredness
Mental Model - association, memorability
Usage dierences
Novice or Expert- technical knowledge
Homogeneous or Heterogeneous

Who are you designing for?

People have varying characteristics
Physical dierences

People
Activities
Contexts

Size - height and weight

Senses - vision, hearing
Disability - accessibility
Psychological dierences
Spatial ability - wayfinding

Technologies

Language - cultural interpretation

Attention - memory, stress, tiredness
Mental Model - association, memorability
Usage dierences
Novice or Expert- technical knowledge
Homogeneous or Heterogeneous

What are the people doing?

Frequency

People
Activities
Contexts
Technologies

Regular - daily, yearly

Cooperation
Alone or with others
Complexity
Well defined or vague
Safety Critical
Prevent injury/harm, errors
Nature of Content
Amount of info, form

Where are the activities occurring?

People
Activities
Contexts
Technologies

Physical
Environment - weather, noise, location
Social
Private or Public
Organizational
Institutional, Workplace

What are people using or will use?

People
Activities
Contexts
Technologies

Medium
Hardware, software
Input
Mouse, touch, gesture, scan, speech
Output
Display, audio, tactile
Communication
Networks, one-to-one, one-to-many
Content
accurate, relevant, understandable

Scoping a problem with the PACT

Goal is to harmonize the PACT elements

People
Activities

Scope as many Ps, As Cs and Ts as possible

Observe and talk to people

Contexts

Useful to understand current state

Technologies

Identify pain points and unmet needs

Think about the user community

How is this community defined ?

People
Activities
Contexts

People
Stakeholders
Contexts
Physical, social, functional
Activities

Technologies

Some obvious - others not so much

Technologies
Current and proposed

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.

Wireframing

Low fidelity (lo-fi) 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.

Wireframing

High fidelity (hi-fi) 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.

Interaction Map

Interactive Prototyping

Interactive Prototyping - Exercise

You have been asked to design app for a coee 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 (coee, tea, hot chocolate) in 3 sizes (S,M,L)
- confirm 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 confirmation of the order before finally sending it to the barista

Using this criteria quickly sketch a user flow and basic user interface elements
needed.