INTERACTIVE

DEVICE DESIGN
INTERACTION DESIGN
PATTERNS
NOV 18, 2013

Next Project Homework

Due 1 week from today

Revision of CAD, PCB files
Progress on User Interface
Work plan for the rest of the semester

Design Patterns

What Do Expert Designers Know?

An effective and flexible design is difficult to
get right the first time.
Yet experienced designers do create good
designs.
New designers are often overwhelmed by all
the choices and options.
Do experienced designers know something
inexperienced ones dont?

How Experienced Designers Solve a Problem

Experts usually do not solve every problem
from first principles; they reuse solutions that
have worked in the past.
Good solutions are used again and again.
Such experience is part of what makes them
experts.
Experiences can be recorded as design
patterns.

What is a Design Pattern?

Each pattern describes a problem which
occurs over and over again in our
environment, and then describes the core of
the solution to that problem, in such a way
that you can use this solution a million times
over, without ever doing it the same way
twice.
C. Alexander, A Pattern Language, 1977

What is a Design Pattern?

Patterns communicate insights into design
problems, capturing the essence of the
problems and their solutions in a compact
form. They describe the problem in depth, the
rationale for the solution, and some of the
trade-offs in applying the solution.
D. Van Duyne et al., The Design of Sites, 2002

Hierarchy of Design Methods

Design Philosophy

Abstract

Design Principles

Design Patterns

Design Idioms, Tips & Tricks

Concrete

History: Christopher Alexander

Professor of Architecture,
UC Berkeley (since 63)
Influential books:
A Pattern Language
The Timeless Way of
Building

Alexanders Pattern Format

1.
2.
3.
4.
5.
6.

Pattern Name
Context
Forces
Problem Statement
Solution (Sketch)
Other Patterns to Consider (hyperlinks!)

Example Pattern:

From Architecture to Computer Science

The Gang of Four
borrowed the pattern
idea and applied it to
software engineering.
Goal: Communicate OO
software design
problems and solutions

Patterns in HCI

Borchers, 2001

Van Duyne et. al, 2002

(UC Berkeley EECS)

Tidwell 2005

Focus on Web, Desktop Apps

Example: Extras on Demand

Example: Extras on Demand

Description:
Show the most important content up front, but hide the rest. Let the
user reach it via a single, simple gesture.

Context
There's too much stuff to be shown on the page, but some of it isn't
very important.You'd rather have a simpler UI, but you have to put all
this content somewhere.

Solution
[P]rune the UI down to its most commonly used, most important
items. Put the remainder into their own page or section. Hide that
section by default; on the newly simplified UI, put a clearly marked
button or link to the remainder, such as "More Options." ...

Mobile Patterns
Some common
Android patterns:
Dashboard
Action Bar
Search Bar
Quick Actions
Companion Widgets
http://dl.google.com/googleio/2010/
android-android-ui-designpatterns.pdf
http://developer.android.com/design/
patterns/index.html
Caveat: UI design patterns are not universal
have an element of fashion to them!

Action Bar

Quick Actions

Companion Widget

Pattern: App Structure - Top Level

Put content forward
Many apps focus on the
content display. Avoid
navigation-only screens and
instead let people get to the
meat of your app right away
by making content the
centerpiece of your start
screen. Choose layouts that
are visually engaging and
appropriate for the data type
and screen size.

Juhani Letimaki:
How Following Android UI Guidelines Can Change Users Perception of Your App
http://www.androiduipatterns.com/2013/10/how-following-android-guidelines-can.html#more

Pattern: Swipe Views

Description: Efficient navigation is one of
the cornerstones of a well-designed app.
Allow the user to efficiently move from
item to item in a collection of related
items.
Context: On a phone, since the master
and detail are on separate screens, this
typically requires the user to jump back
and forth between the list and the detail
view, aka "pogo-sticking".
Solution: Avoid pogo-sticking by using a
horizontal swipe gesture to navigate to
the next/previous detail view.

Patterns for Interactive Devices

Limited device real estate and capabilities:
Splitting user I/O across multiple devices
Recurring problems:
Set Up / Initial Configuration
(e.g.: SSID, Password, AES Key for WiFi access)
Sync
Status info (e.g., battery)

Anti-Pattern: Hidden Modes

http://www.fisherpaykel.com/vault/pdfs/pdf_usecares/590025B_DD90SDD36S_userguide_USCANZAUGBIEw.pdf

Splitting I/O across devices

TI SmartConfig
Set device into
configuration mode
Enter details on smart
phone
Phone broadcasts info
over UDP (but on
which network?)

Configuration: Imp Blink Up

http://www.youtube.com/watch?v=zbhu7Mwicok

Anti-Pattern:
Debugging with Single-LEDs

Sync: Misfit Shine

http://www.youtube.com/watch?v=qkMu55IX2Es

Sync: FitBit
Sync triggered on
application launch
Show existing data
first to keep user
engaged
Can also manually
force resync

Summary:
Expert designers dont reinvent the wheel
(frequently).
Patterns capture design knowledge: good
solutions to frequently occurring problems.
Read up on Android design patterns and think
about where you can adopt successful
patterns in your project!