Designing Frameworks For Interaction and User Experience

Succeeding With FrameworksBeyond Findability Workshop: IA Summit 2009

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

Joe LamantiaDesign, technology & business since 1996Architect > Management Consultant Speak and write on diverse topics: ubicomptwitter: [email protected]

2

mailto:[email protected]


Amsterdam Malta INY

New York Los Angeles

Media Catalyst is a full service interactive agencywith offices in Europe and North America

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

Add frameworks to your toolkit


Give up control...


Gain influence!


Why Frameworks MatterFrameworks 101An exampleSucceeding 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

Structural ShiftWhy Frameworks Matter


Web 1.0

12

CentralizedStructureOrganizationArchitecture

Emerging Discipline = IA


Web 2.0

15

Structural & relational diversity

DecentralizedFlowsParticipationInteraction


Feeds

Micro formats

Apps

WidgetsAPI’s

Services

Gadgets Grids Clouds

Streams Plug-insObjects

Posts Tweets

ThemesStatus

Links

EmbedsPage

Tags


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

17

Thereʼs Plenty of Room at the Bottom 1959


Larger

Smaller

Apps

WidgetsTweets

Links

Embeds

Posts

Pages

Sites Web app

Services Clouds

API

Tags

ObjectsFeed


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


“...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.

Modularity


Web


Browser


Desktop


Mobile


MultitouchDisplays

25

Powers of 10Exercise


1.Where do you see modularity?

2.What kind of modularity?3.What levels of structure?

27

Powers of 10


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

28

“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.”


Identity

29

Work

Friends

Public

Chi.mp


Structuration good!

Context ShiftWhy Frameworks Matter


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.

34

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

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



Digital objects are portable» People choose and manage streams of content & functionality

» Common structure allows easy manipulation» RSS, microformats, APIs, metadata, SOA, file formats

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

» Digital atoms are ʻvisibleʼ & accessible

Take Away

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, film, UGC, widgets, environmental services (search)

Convergence

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)


Users

ContentContext


Loss of control bad!


Ubiquitous computingSpimesAugmented realityGames vs. reality inversionDigital singularity

Future Contexts


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.

44

When Blobjects Rule the Earthby Bruce Sterling

SIGGRAPH, Los Angeles, August 2004

http://blog.wired.com/sterling/

http://blog.wired.com/sterling/

http://www.siggraph.org/

http://www.siggraph.org/


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.

46

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


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


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

48


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.

Siftables


Motion sensing

Communication

Graphical display

Wireless

Autonomous

Framework

{

Neighbor detection

Piling

Grouping

Sorting

Contextual

51

DIY ShiftWhy Frameworks Matter

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

IA Summit 2009 | Joe Lamantia | MediaCatalystBeyond Findability: Frameworks 52


New Creators

53


Users

ContentContext


Loss of control bad!


Direct Design Complexity

57

Contexts

Co-creation

Frak Me!

Cake! Are We There Yet...

Seatbelts, please.

How Will Our Role Change?Exercise


1.Think 5 years ahead

What do you do every day?Who do you work with?How do you do it?

60

How Will Our Role Change


It means that developers will have to learn how to code pages for modularity. ...letting their sites be mashed up 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 refined 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 "everybody" (simple!) but in finding 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

62

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




"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

63

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




User Experience

64

Whole Parts

Information Architecture

Information Architecture


Designers

Co-creators / DIY

Structural Design

65

component

pattern

template

system

network

service

standard / protocol

Scale

Scope

framework

product


UserExperience

66

Whole

Parts

Professional Design

Professional Design

Co-creators


Ecology of Co-Creation


Architects define the frameworks other people use to build experiences for themselves, and the world.

68


SporeOver 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)!

69

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


Creating frameworks allows designers to sell high value services.

$$

70


human insightdesign skillsarchitecture

71

We have special powers!

What Makes Frameworks Useful?


New Web resembles

environments

Executive dashboard Dashboards Portals Enterprise portals Tile-based UX WidgetsDIY experiences Hackware Fablab


Durable / Exstensible


Tile View

View Selector Utility Navigation

Free-form

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

Framework



FrameworkPossibility

Space

78

Components

x =Relationships

Efficient


Downstreamleverage

79


Managing Complexity

82

Contexts

Co-creation

Framework Utility

Frak Me!


UserExperience

83

Whole

Parts

Professional Design

Professional Design

Co-creators

Co-creation


FrameworkPossibility Space

84

Instance

Instance

Instance


Avatar

Vehicle

Service

Framework

Everyware

When Frameworks FailExercise


1.Name some failed frameworks

2.What happened?3.Why did they fail?4.Could they have worked?

5.What needed to change?87

When Frameworks Fail


USSRcomplex financial derivativesTitanictransportation via dirigiblesnuclear powerVersailles treatymusic businessadvertising in social mediaprinted media

88


Whatʼs the pattern?

89


Environmental change

(assumptions)

90

Spotting FrameworksFrameworks 101


valuable

useful

credible

usable

findable

desirable

accessible


identity

presence

groups

sharing

conversations

relationships

reputation


Are these the same?

How are they different?

107


designconstructionmanagementorganizationcommunicationanalysisdistribution

108

Name That FrameworkExercise


1.Name some framework based experiences, services, tools.

2.What kind of framework is it?

110

Name That Framework


Linkedin

Netvibes

Flickr

MS Sharepoint

Yelp

Blogging services

CM Systems

Ning

Balsamiq

Yahoo Pipes

Facebook

Pandora

BaseCamp

Blip.fm

MySpace

YouTube

GoogleMaps

Wikis

Intranets

RememberTheMilk

delicious

Upcoming

dopplr

Etsy

CafePress

Lulu

Twine

digg

Twitter

friendfeed

111

De-constructionExercise


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

De-construction


Components


Relationships

Stacking

Linking

Grouping


Broad*Narrow*

Scope

User ExperienceGovernance

Business Logic

Data

Application Logic

FunctionalityAdministration

Social Dynamics

*Depends on your viewpoint!


Boundary(s)

Closed

Openunbounded


ComponentsRelationshipsScopeBoundaries

118

DefinitionExercise


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

Definition


PurposeTypeAudienceAssumptions

122



123


Problem

{Solution

{

The Building BlocksAn Example Framework


The Box of Chocolates Model

126

Everything in a portlet

Portlets are islands

Growth = more portlets


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

127


NeedsAllow for growth and changeEstablish common language for all perspectivesConstruct scalable, reusable structuresEncourage high-quality user experiencesSharing of assets

128

IA Summit 2009 | Joe Lamantia | MediaCatalystBeyond Findability: Frameworks

Environmental Servicesidentitysecuritypublicationdata infrastructureapplication supportmanagement

129


Purpose: Improve portal experience

Type: Design

Audience: Design, build, IT management

Assumptions: Enterprise environment

130


Vision: Enterprise Portal Suite

131



132


Problem Solution

{ {


The Building Blocks System

133

Basic PrinciplesStandardized Components

Containers manage content

Connectors define structure & navigation

Assembly RulesSuggested Functionality

Convenience, Utility, Social


OpennessUse blocks for some or all contentMix blocks and free-form content

134


PortabilityBlocks can be:

•syndicated

•shared

• reused

•placed elsewhere

•duplicated

•moved

135


OpenClosed

Boundary(s)

Building Blocks


LayeringBlocks can define all layers of an environment

Blocks can cover *any* combination of layers

137

Scope


BroadNarrow

Scope

User ExperienceGovernance

Business LogicData

Application LogicFunctionalityAdministration

Building Blocks


Independence

Blocks are independent

•content

• interaction

•display...until “stacked” together

139

Relationships


InheritanceBlocks inherit from those stacked above:

• content

• properties

• interaction

Inheritance cascades top to bottom

All blocks stacked below inherit from above

140

Relationships

ComponentsBuilding Blocks Framework


Containers7 typesBegin with Tile, range up to Portal SuiteSmaller Containers deliver contentLarger Containers create structureWork together with Connectors

142

Components


TileSize: 1Elements:HeaderBody[Footer]

143


SectionSize: 5Elements:Page (1)

144


Portal SuiteSize: 7Elements: Portal (1)

145


Larger

Smaller

TileGroup

Tiles

Page

Section

Portal

Suite

Element

View


Connectors Overview8 Connector typesSome enable navigationSome provide interactivity for ContainersMakeup and behavior defined in detail

147

Relationships Components


Crosswalk ConnectorDirectly links two individual Containers

148


Section ConnectorLinks all Sections (1 Page) in a Portal

149


Portal ConnectorLinks Dashboards & Portals in a Suite

150


Larger

Smaller

Crosswalk

Geography Selector

TileGroup

Tiles

Control Bar

Page

Section

Portal Section Connector

Suite Portal Connector

Page Connector

Element

View

Contextual Crosswalk

Utility Navigation


Stacking RulesAssigns “size” to all blocksDefines possible combinations

152

Portal Suite 7

Portal 6

Section 5

Page 4

View 3

Tilegroup 2

Tile 1

Page 4

View 3

Tilegroup 2

Tile 1 Tile 1

Tile 1

Tile 1

Relationships Components


Free-form contentSection ConnectorPage ConnectorUtility Navigation

View

Tile

Control Bar

Convenience Functionality

Page

Case StudyChange and Growth


Series of portal effortsVendor: strategy, design, build, supportEngaged across enterpriseBuilding blocks leveraged as:• Concept language• Design Tool• Prototype Accelerator• Governance Framework

155


Global Executive Portal

Global Leadership TeamEnterprise insightBusiness intelligence

156


US Dashboard

US Leadership TeamMajor market insight, enhancing dialog Business intelligence, social commentary

*Introduced social mechanisms

159


Approvals Portal

Senior Managers, ExecsStreamline finance operationsInvoice tracking & approval

*Portability = critical

162


Expense Management Portal

Managers, budget coordinatorsStreamline invoicing, improve forecastingInvoice & project management capability

165


Sales Dashboard

Unit LeadershipUnit operations insightBusiness intelligence, social asessment

168

Succeeding With Frameworks


Solution


{Problem

{PurposeTypeAudienceAssumptions


Borrow and adapt:ExtendAlter

173


Adapt things as needed

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

Change or add principles with care

174


Create new

175


Start simple: 3 Containers 2 Connectors

176


Add only what is essential.7 Containers11 Connectors1 stacking hierarchytop-down inheritance

177


Larger

Smaller

TileGroup

Tiles

Page

Section

Portal

Suite

Element

View

Evolution


Larger

Smaller

Crosswalk

Geography Selector

TileGroup

Tiles

Control Bar

Page

Section

Portal Section Connector

Suite Portal Connector

Page Connector

Element

View

Contextual Crosswalk

Utility Navigation

Evolution


FrameworkPossibility

Space

180

Components

x =Relationships


Donʼt Get Carried Away

181

YourFramework

Largest Structures In the Universe


Use simple language.Make it relevant.

182


ABC Selling: Always Be Closing

Pitch the outcome, not the frameworkSpeak the buyersʼ language (IT, user, biz)Always explain the minimumStart simple, promise less, do more

183


Pragmatic Politics

No land grabsCollaborate on scope & boundaryGet a sponsor

184


BroadNarrow

Evolving Scope

•Use

r Exp

erien

ce

•Gov

ernan

ce

•Busine

ss Lo

gic

•Data

•Applica

tion L

ogic

•Functio

nality

•Adminis

tratio

n

Building Blocks

•Produc

t Man

agem

ent


Use the blocks at the right levelHow will you use the blocks?Common languageReference / exampleStarting point for designSet of defined componentsPolitical shield

186

Design A FrameworkExercise


1. Think of a common experience

2. Imagine how it could be better

3. Design a framework that makes it better

188

Create A Service

In Conclusion...


Possible Future StuffWikiCommunity of PracticePatterns & Pattern LibraryMailing List, Blog, FeedDestinationWorkshops & SeminarsCoursesBook...?

190


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

@JoeLamantia.comCategories: Building Blocks, Dashboards & Portals

Tags: building_blocks, executive_dashboards

ia_building_blocks, portals

@del.icio.us: jlamantia

191

[email protected]@gmail.comtwitter: moJoeslideshare.net/moJoe





Contact MediaCatalyst

Herengracht 1821016 BR AmsterdamThe NetherlandsT: +31 20 626 [email protected]@gmail.com

Discussion Topics


Frameworks vs. templates


Disciplines & frameworks


Frameworks vs. systems


Process & frameworks


Deliverables & frameworks


Domain specific

Innately specified

Hierarchically nested

More internal integration than external integration

Localized processes and autonomy

Informationally encapsulated

Near decomposability

Recombinability

Expandability

Module as homologue

200


What You Can Build

202

Designing Frameworks For Interaction and User Experience

Design

Transcript of Designing Frameworks For Interaction and User Experience