Designing Frameworks For Interaction and User Experience

Succeeding With
Frameworks
Beyond Findability Workshop: IA Summit 2009

Joe Lamantia
Design, technology & business since 1996
Architect > Management Consultant
Speak and write on diverse topics: ubicomp
twitter: moJoe
joelamantia.com
joe.lamantia@gmail.com

2
Beyond Findability: Frameworks IA Summit 2009 | Joe Lamantia | MediaCatalyst

Media Catalyst is a full service interactive agency
with ofices in Europe and North America

I
Amsterdam Malta New York Los Angeles
NY

Add frameworks to
your toolkit

4

Give up control...

5

Gain inﬂuence!

6

Why Frameworks Matter
Frameworks 101
An example
Succeeding With Frameworks

7

Framework:
A structure for supporting or enclosing something
else, especially a skeletal support used as the
basis for something being constructed.

A fundamental structure, as for a written work.

A set of assumptions, concepts, values, and
practices that constitutes a way of viewing reality.

8

9

10

Structural Shift

Web 1.0
Centralized
Structure
Organization
Architecture
Emerging Discipline = IA
12

13

14

Web 2.0
Decentralized
Flows
Participation
Interaction
Structural relational diversity
15

Page Services Embeds
Feeds Apps

Micro
Status Themes
API’s Widgets
formats

Posts Gadgets Grids Clouds Tweets

Tags Objects Streams Plug-ins Links

16

“What I want to talk about is
the problem of manipulating
and controlling things on a
small scale.quot;

Thereʼs Plenty of Room at the Bottom 1959

17

Larger
Services Clouds
Sites Web app
Pages
API
Posts
Feed
Objects
Apps
Tweets
Widgets
Links

Tags Embeds
Smaller 18

Information
environments are
increasingly
structured, at all
levels of scale.
19

Modularity
“...the degree to which a systemʼs
components may be separated and
recombined.”

“both the tightness of coupling between
components, and the degree to which the
“rules” of the system architecture enable
(or prohibit) the mixing and matching of
components.
20

Web

21

Browser

22

Desktop

23

Mobile

24

Multitouch
Displays

25

Powers of 10

1. Where do you see modularity?
2. What kind of modularity?
3. What levels of structure?

27

Modular America
Cross-Cultural Perspectives on the Emergence of an American Way

“uniquely American tendency to
organize cultural artifacts out of
component parts rather than
structured wholes”

...it has affected cultural domains as
diverse as manufacturing,
architecture, education, and jazz.

modularity opens new perspectives
on American culture as a whole.”

28

Identity Public

Chi.mp
Work

Friends

29

Structuration
good!

30

31

32

Context Shift

We were used to having walls.
Context was key, but context depends
on there being walls.
Online, there are no walls.
The walls have come crumbling down.

boyd, danah. 2007. quot;Incantations for Muggles: The Role of Ubiquitous Web 2.0 Technologies in
Everyday Life.quot; O'Reilly Emerging Technology Conference, San Diego, CA. March 28.

http://www.danah.org/papers/Etech2007.html

34

Take Away

Digital objects are portable
» People choose and manage streams of content functionality
» Common structure allows easy manipulation
» RSS, microformats, APIs, metadata, SOA, ﬁle formats

» Environment provides shared services
» OpenSocial, openID, cloud computing, analytics, search

» Digital atoms are ʻvisibleʼ accessible

Convergence

Media platforms converge
» Experiences span multiple media, channels, formats
» Narrative, interaction, emotional elements must sustain transitions
» Platforms and delivery converge
» Game console, PC, media center, time-shift [Tivo], data backup [Time Machine]

» Advertising permeates all experience environments
» Social networks, virtual worlds, game experiences, ﬁlm, UGC, widgets, environmental services (search)

Digital = Social

Experiences have a ʻsocial layerʼ
» Social interactions are the source of experience value
» New environments are primarily social

» Networks become primary organizing structures

» Experiences shaped by linked overlapping networks
» Exchanges occur via marketplaces
(information, services, goods, reputation)

38

Users

Context Content

39

Loss of
control bad!

40

41

Future Contexts
Ubiquitous computing
Spimes
Augmented reality
Games vs. reality inversion
Digital singularity

42

Wikitude

43

In the future, an object's life begins on a graphics
screen. It is born digital. Its design specs accompany it
throughout its life.
It is inseparable from that original digital blueprint, which
rules the material world.

When Blobjects Rule the Earth
by Bruce Sterling

SIGGRAPH, Los Angeles, August 2004

44

Information Shadows

Once you have the capability uniquely identify anything
immediately, you can attach meta information to it. Any
meta-information. How much is this worth on eBay? Which
of my friends has one? Will this go with my Momʼs china?
Will it make me sick if I eat it? Was it made by children?

I call this digital representation as accessed through a
unique ID, an objectʼs “information shadow” and I now see
them attached to just about everything.

45

Service Objects
“...changing the physical object to a service, for which the
thing youʼre looking at is but a single instantiation of that
agreement.

The solid object grows a
dotted line that is ﬁlled-in as-
needed, when-needed, and
with the features that are
needed.”

46

Devices are Service Avatars
“Devices become projections of services. They are physical
manifestations, avatars, projections into physical space of
abstract services, but are not services themselves.”
* Objects become subscriptions.

47

Granularity
Ubiquitous computing devices can come in all
sorts of sizes and the user experience design for
them must take this into account.

48

Siftables
Siftables are cookie-sized computers
with motion sensing, neighbor
detection, graphical display, and
wireless communication.

They act in concert to form a single
interface: users physically manipulate
them - piling, grouping, sorting - to
interact with digital information and
media.

Siftables provides a new platform on
which to implement tangible, visual and
mobile applications.

49

Autonomous Contextual
Graphical display Neighbor detection

Wireless Piling

Motion sensing Grouping

Communication Sorting

{
Framework
50

DIY Shift

51

Everyone can create (again)
Low-cost, high-quality tools for digital physical creation

Producer vs. consumer distinction dissolves

Business and economic (and political) structures change
Open Source, Open Data, Open Stack

hybrids, ecologies of co-creation

Beyond Findability: Frameworks 52
IA Summit 2009 | Joe Lamantia | MediaCatalyst

New Creators

53

54

Users

Context Content

55

Loss of
control bad!

56

Direct Design Complexity

Seatbelts,
Frak Me!
please.
Contexts

Are We
Cake!
There Yet...

Co-creation
57

58

How Will Our Role Change?
Exercise

How Will Our Role Change

1. Think 5 years ahead
What do you do every day?
Who do you work with?
How do you do it?
60

It means that developers
will have to
learn how to code pages for
modularity.
sites be mashed up
...letting their
and refactored into tiny pieces all
over the Web, by anyone.
Rafe Needleman

Mozilla Ubiquity, Microsoft IE8, and the fracturing of Web pages

61

“The systems we keep will be hybrid creations. They will have a strong rootstock of
peer-to-peer generation, grafted below highly reﬁned strains of controlling functions. Sturdy,
robust foundations of user-made content and crowd-sourced innovation will
feed very small slivers of leadership agility. Pure plays of 100% smart mobs or
100% smart elites will be rare.

The real art of business and organizations in the network economy will not be in harnessing the
crowd of quot;everybodyquot; (simple!) but in ﬁnding the appropriate hybrid mix of
bottom and top for each niche, at the right time. The mix of control/no-
control will shift as a system grows and matures.”
Kevin Kelly The Bottom is Not Enough

http://www.kk.org/thetechnium/archives/2008/02/the_bottom_is_n.php

62

quot;I created the platform, and
then I got out of the way.
Sometimes the best thing you
can do is get out of the way.''
Craig Newmark

http://www.sfgate.com/cgi-bin/article.cgi?ﬁle=/chronicle/archive/2004/10/10/LVGU693SFD1.DTL

63

User Experience

Information Information
Architecture Architecture

Whole Parts

64

Structural Design
standard / protocol

service

framework

network
Designers
Scale system

product

pattern
Co-creators / DIY
template

component

Scope
65

Whole

Professional
Design

User
Co-creators
Experience

Professional
Design

Parts
66

Ecology of Co-Creation

67

Architects deﬁne the
frameworks other people use to
build experiences for
themselves, and the world.

68

Spore
Over 1.8 million creatures
created by people using the
Spore Creature Creator.
..more than the number of
known species in the world
(1.5 million)!

EA was hoping to get 100,000 creatures uploaded by
players with the Creature Editor by September. They hit
that number in 22 hours.

E3 2008: More Creatures in Spore Than in Real Life
By Sam Kennedy, 07/14/2008

69

Creating

$$
frameworks
allows designers
to sell high value
services.

70

We have special powers!
human insight
design skills
architecture

71

73

New Web resembles

environments


Durable / Exstensible
Executive dashboard
Dashboards
Portals
Enterprise portals
Tile-based UX
Widgets
DIY experiences
Hackware
Fablab

Tile View Free-form

View Selector Utility Navigation

76

Neutral Terrain
• distinct languages
• divergent goals
• differing success criteria
• competing agendas
Framework


Efﬁcient
Components

Framework
x = Possibility
Space
Relationships

78

Downstream
leverage
79

80

81

Managing Complexity

Frak
Me!

Fr
am
Contexts

ew
or
k
U
til
ity

Co-creation
82

Co-creation
Whole

Professional
Design

User
Co-creators
Experience

Professional
Design

Parts
83

Framework
Possibility Space

Instance

Instance

Instance

84

Everyware
Service

Framework

Avatar

Vehicle

85

When Frameworks Fail
1. Name some failed frameworks
2. What happened?
3. Why did they fail?
4. Could they have worked?
5. What needed to change?
87

USSR
complex ﬁnancial derivatives
Titanic
transportation via dirigibles
nuclear power
Versailles treaty
music business
advertising in social media
printed media

88

Whatʼs the pattern?

89

Environmental
change
(assumptions)

90

Spotting Frameworks
Frameworks 101

92

93

94

95

96

97

98

99

100

101

102

103

104

useful

usable desirable

valuable

ﬁndable accessible

credible

105

presence

sharing relationships

identity

conversations reputation

groups

106

Are these the same?

How are they different?

107

design
construction
management
organization
communication
analysis
distribution
108

Name That Framework

1. Name some framework based
experiences, services, tools.
2. What kind of framework is it?

110

Linkedin Facebook delicious
Netvibes Pandora Upcoming
Flickr BaseCamp dopplr
MS Sharepoint Blip.fm Etsy
Yelp MySpace CafePress
Blogging YouTube Lulu
services
GoogleMaps Twine
CM Systems
Wikis digg
Ning
Intranets Twitter
Balsamiq
RememberThe friendfeed
Yahoo Pipes Milk
111

De-construction
1. Pick an experience
2. What is it made of?
3. How do these things relate?
4. What does it include / exclude?
5. What are its boundaries?
113

Components

114

Relationships
Linking

Grouping
Stacking

115

Scope
Data
Governance
User Experience
Business Logic Functionality
Administration
Application Logic
Social Dynamics

Narrow* Broad*

*Depends on your viewpoint!
116

Boundary(s)

Closed

Open
unbounded

117

Components
Relationships
Scope
Boundaries
118

119

Deﬁnition
1. What is it meant to do?
2. What kind is it?
3. Who is it for?
4. What does it assume about
the world?
121

Purpose
Type
Audience
Assumptions
122

Purpose Components
Type Relationships
Audience Scope
Assumptions Boundaries
{
{
Problem Solution
123

The Building Blocks
An Example Framework

125

The Box of Chocolates Model

Everything in a portlet
Portlets are islands
Growth = more portlets

126

No Structure!
No Connection!
No Interaction!
No Context!

127

Needs
Allow for growth and change
Establish common language for all perspectives
Construct scalable, reusable structures
Encourage high-quality user experiences
Sharing of assets

128

Environmental Services
identity
security
publication
data infrastructure
application support
management


Purpose: Improve portal experience

Type: Design

Audience: Design, build, IT management

Assumptions: Enterprise environment

130

Vision: Enterprise Portal Suite

131

Purpose Components
Type Relationships
Audience Scope
{
{
Problem Solution
132

The Building Blocks System
Basic Principles
Standardized Components
Containers manage content
Connectors deﬁne structure navigation

Assembly Rules
Suggested Functionality
Convenience, Utility, Social

133

Openness
Use blocks for some or all content
Mix blocks and free-form content

134

Portability
Blocks can be:
• syndicated
• shared
• reused
• placed elsewhere
• duplicated
• moved

135

Boundary(s)
Building Blocks

Closed Open

136

Scope

Layering
Blocks can deﬁne all layers of an environment
Blocks can cover *any* combination of layers

137

Scope
Building Blocks

Governance
User Experience
Data
Business Logic
Narrow Broad
Application Logic
Functionality
Administration

138

Relationships

Independence

Blocks are independent
• content
• interaction
• display
...until “stacked” together

139

Relationships

Inheritance
Blocks inherit from those stacked above:
• content
• properties
• interaction
Inheritance cascades top to bottom
All blocks stacked below inherit from above

140

Components
Building Blocks Framework

Components

Containers
7 types
Begin with Tile, range up to Portal Suite
Smaller Containers deliver content
Larger Containers create structure
Work together with Connectors

142

Tile
Size: 1
Elements:
Header
Body
[Footer]

143

Section
Size: 5
Elements:
Page (1)

144

Portal Suite
Size: 7
Elements: Portal (1)

145

Larger
Suite
Portal

Section

Page

View

TileGroup

Tiles

Element
Smaller 146

Components
Relationships

Connectors Overview
8 Connector types
Some enable navigation
Some provide interactivity for Containers
Makeup and behavior deﬁned in detail

147

Crosswalk Connector
Directly links two individual Containers

148

Section Connector
Links all Sections (1 Page) in a Portal

149

Portal Connector
Links Dashboards Portals in a Suite

150

Larger
Suite Portal Connector

Portal Section Connector

Section Page Connector

Contextual
Page Crosswalk

View Utility Navigation

TileGroup Crosswalk

Tiles Geography Selector

Element Control Bar

Smaller 151

Components
Relationships

Stacking Rules
Assigns “size” to all blocks
Deﬁnes possible combinations
Portal Suite 7 Page 4
Portal 6
View 3 Tile 1
Section 5
Tile 1 Tile 1
Page 4

View 3

Tilegroup 2 Tile 1
Tilegroup 2

Tile 1

152

Free-form content
Section Connector
Utility Navigation
Page Connector
Control Bar

Tile
Page
View

Convenience
Functionality

153

Series of portal efforts
Vendor: strategy, design, build, support
Engaged across enterprise
Building blocks leveraged as:
• Concept language
• Design Tool
• Prototype Accelerator
• Governance Framework

155

Global Executive Portal

Global Leadership Team
Enterprise insight
Business intelligence

156

157

158

US Dashboard

US Leadership Team
Major market insight, enhancing dialog
Business intelligence, social commentary

*Introduced social mechanisms

159

160

161

Approvals Portal

Senior Managers, Execs
Streamline ﬁnance operations
Invoice tracking approval

*Portability = critical

162

163

164

Expense Management Portal

Managers, budget coordinators
Streamline invoicing, improve forecasting
Invoice project management capability

165

166

167

Sales Dashboard

Unit Leadership
Unit operations insight
Business intelligence, social asessment

168

169

170

Purpose Components
Type Relationships
Audience Scope
{
{
Problem Solution
172

Borrow and adapt:
Extend
Alter

173

Adapt things as needed

What is the environment?
Is inheritance useful?
Are these the right blocks?

Change or add principles with care


Create new

175

Start simple:

3 Containers

2 Connectors

176

Add only what is essential.
7 Containers
11 Connectors
1 stacking hierarchy
top-down inheritance
177

Larger
Evolution
Suite
Portal

Section

Page

View

TileGroup

Tiles

Element
Smaller 178

Larger
Evolution
Suite Portal Connector

Portal Section Connector

Section Page Connector

Contextual
Page Crosswalk

View Utility Navigation

TileGroup Crosswalk

Tiles Geography Selector

Element Control Bar

Smaller 179

Components

Framework
x = Possibility
Space
Relationships

180

Donʼt Get Carried Away
Largest Structures In the Universe

Your
Framework

181

Use simple language.
Make it relevant.

182

ABC Selling: Always Be Closing

Pitch the outcome, not the framework
Speak the buyersʼ language (IT, user, biz)
Always explain the minimum
Start simple, promise less, do more


Pragmatic Politics

No land grabs
Collaborate on scope boundary
Get a sponsor


Evolving Scope

t
en
em
c
e

gi
nc

ag
c

n
gi
Lo

tio
ie

an
y

Lo

e
lit
er

nc
tra
n

M
na

io
xp

s

na
is
es

ct
at
io
rE

in

er
du
lic

in
ct

a

dm

ov
se

us
un

pp

ro
at

•G
•D
•U

•A
•P
•B
•F

•A

Narrow Broad
Building Blocks

185

Use the blocks at the right level
How will you use the blocks?
Common language
Reference / example
Starting point for design
Set of deﬁned components
Political shield


Create A Service

1. Think of a common experience
2. Imagine how it could be better
3. Design a framework that makes it better

188

Possible Future Stuff
Wiki
Community of Practice
Patterns Pattern Library
Mailing List, Blog, Feed
Destination
Workshops Seminars
Courses
Book...?

More About the Blocks
@Boxes and Arrows Building Blocks articles
http://www.boxesandarrows.com/person/88-joelamantia

@JoeLamantia.com
Categories: Building Blocks, Dashboards Portals

Tags: building_blocks, executive_dashboards

ia_building_blocks, portals

@del.icio.us: jlamantia


Bedankt!
joe@joelamantia.com
twitter: moJoe
slideshare.net/moJoe

Contact MediaCatalyst

Herengracht 182
1016 BR Amsterdam
The Netherlands
T: +31 20 626 2976
joe.lamantia@mediacatalyst

Frameworks vs. templates

195

Disciplines frameworks

196

Frameworks vs. systems

197

Process frameworks

198

Deliverables frameworks

199

Domain speciﬁc

Innately speciﬁed

Hierarchically nested
More internal integration than external integration
Localized processes and autonomy
Informationally encapsulated

Near decomposability
Recombinability
Expandability
Module as homologue

200

201

What You Can Build


Designing Frameworks For Interaction and User Experience

Designing Frameworks For Interaction and User Experience

Recommended

More Related Content

Viewers also liked

Viewers also liked(8)

Similar to Designing Frameworks For Interaction and User Experience

Similar to Designing Frameworks For Interaction and User Experience (20)

More from Joe Lamantia

More from Joe Lamantia(12)

Recently uploaded

Recently uploaded(20)

Designing Frameworks For Interaction and User Experience

Editor's Notes