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: moJoejoelamantia.comjoe.lamantia@gmail.com

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

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.

Structural ShiftWhy Frameworks Matter

Web 1.0

CentralizedStructureOrganizationArchitecture

Emerging Discipline = IA

Web 2.0

Structural & relational diversity

DecentralizedFlowsParticipationInteraction

Micro formats

WidgetsAPI’s

Services

Gadgets Grids Clouds

Streams Plug-insObjects

Posts Tweets

ThemesStatus

EmbedsPage

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

Thereʼs Plenty of Room at the Bottom 1959

Larger

Smaller

WidgetsTweets

Embeds

Sites Web app

Services Clouds

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

Browser

Desktop

Mobile

MultitouchDisplays

Powers of 10Exercise

1.Where do you see modularity?

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

Powers of 10

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

Identity

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.

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)

ContentContext

Loss of control bad!

Ubiquitous computingSpimesAugmented realityGames vs. reality inversionDigital singularity

Future Contexts

Wikitude

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 Earthby Bruce Sterling

SIGGRAPH, Los Angeles, August 2004

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.

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

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

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

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

ContentContext

Loss of control bad!

Direct Design Complexity

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?

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

“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

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

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

User Experience

Whole Parts

Information Architecture

Designers

Co-creators / DIY

Structural Design

component

pattern

template

system

network

service

standard / protocol

framework

product

UserExperience

Professional Design

Co-creators

Ecology of Co-Creation

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

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

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.

human insightdesign skillsarchitecture

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

Components

x =Relationships

Efficient

Downstreamleverage

Managing Complexity

Contexts

Co-creation

Framework Utility

Frak Me!

UserExperience

Professional Design

Co-creators

Co-creation

FrameworkPossibility Space

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

Whatʼs the pattern?

Environmental change

(assumptions)

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?

designconstructionmanagementorganizationcommunicationanalysisdistribution

Name That FrameworkExercise

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

2.What kind of framework is it?

Name That Framework

Netvibes

Flickr

MS Sharepoint

Blogging services

CM Systems

Balsamiq

Yahoo Pipes

Facebook

Pandora

BaseCamp

Blip.fm

MySpace

YouTube

GoogleMaps

Intranets

RememberTheMilk

delicious

Upcoming

dopplr

CafePress

Twitter

friendfeed

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*

User ExperienceGovernance

Business Logic

Application Logic

FunctionalityAdministration

Social Dynamics

*Depends on your viewpoint!

Boundary(s)

Closed

Openunbounded

ComponentsRelationshipsScopeBoundaries

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

Problem

{Solution

The Building BlocksAn Example Framework

The Box of Chocolates Model

Everything in a portlet

Portlets are islands

Growth = more portlets

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

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

IA Summit 2009 | Joe Lamantia | MediaCatalystBeyond Findability: Frameworks

Environmental Servicesidentitysecuritypublicationdata infrastructureapplication supportmanagement

Purpose: Improve portal experience

Type: Design

Audience: Design, build, IT management

Assumptions: Enterprise environment

Vision: Enterprise Portal Suite

Problem Solution

The Building Blocks System

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

PortabilityBlocks can be:

•syndicated

•shared

• reused

•placed elsewhere

•duplicated

•moved

OpenClosed

Boundary(s)

Building Blocks

LayeringBlocks can define all layers of an environment

Blocks can cover *any* combination of layers

BroadNarrow

User ExperienceGovernance

Business LogicData

Application LogicFunctionalityAdministration

Building Blocks

Independence

Blocks are independent

•content

• interaction

•display...until “stacked” together

Relationships

InheritanceBlocks inherit from those stacked above:

• content

• properties

• interaction

Inheritance cascades top to bottom

All blocks stacked below inherit from above

Relationships

ComponentsBuilding Blocks Framework

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

Components

TileSize: 1Elements:HeaderBody[Footer]

SectionSize: 5Elements:Page (1)

Portal SuiteSize: 7Elements: Portal (1)

Larger

Smaller

TileGroup

Section

Portal

Element

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

Relationships Components

Crosswalk ConnectorDirectly links two individual Containers

Section ConnectorLinks all Sections (1 Page) in a Portal

Portal ConnectorLinks Dashboards & Portals in a Suite

Larger

Smaller

Crosswalk

Geography Selector

TileGroup

Control Bar

Section

Portal Section Connector

Suite Portal Connector

Page Connector

Element

Contextual Crosswalk

Utility Navigation

Stacking RulesAssigns “size” to all blocksDefines possible combinations

Portal Suite 7

Portal 6

Section 5

Tilegroup 2

Tile 1

Tilegroup 2

Tile 1 Tile 1

Tile 1

Relationships Components

Free-form contentSection ConnectorPage ConnectorUtility Navigation

Control Bar

Convenience Functionality

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

Global Executive Portal

Global Leadership TeamEnterprise insightBusiness intelligence

US Dashboard

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

*Introduced social mechanisms

Approvals Portal

Senior Managers, ExecsStreamline finance operationsInvoice tracking & approval

*Portability = critical

Expense Management Portal

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

Sales Dashboard

Unit LeadershipUnit operations insightBusiness intelligence, social asessment

Succeeding With Frameworks

Solution

{Problem

{PurposeTypeAudienceAssumptions

Borrow and adapt:ExtendAlter

Adapt things as needed

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

Change or add principles with care

Create new

Start simple: 3 Containers 2 Connectors

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

Larger

Smaller

TileGroup

Section

Portal

Element

Evolution

Larger

Smaller

Crosswalk

Geography Selector

TileGroup

Control Bar

Section

Portal Section Connector

Suite Portal Connector

Page Connector

Element

Contextual Crosswalk

Utility Navigation

Evolution

FrameworkPossibility

Components

x =Relationships

Donʼt Get Carried Away

YourFramework

Largest Structures In the Universe

Use simple language.Make it relevant.

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

Pragmatic Politics

No land grabsCollaborate on scope & boundaryGet a sponsor

BroadNarrow

Evolving Scope

•Use

•Gov

•Busine

•Data

•Applica

tion L

•Functio

nality

•Adminis

tratio

Building Blocks

•Produc

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

Design A FrameworkExercise

1. Think of a common experience

2. Imagine how it could be better

3. Design a framework that makes it better

Create A Service

In Conclusion...

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

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

Bedankt!joe@joelamantia.comjoe.lamantia@gmail.comtwitter: moJoeslideshare.net/moJoe

Contact MediaCatalyst

Herengracht 1821016 BR AmsterdamThe NetherlandsT: +31 20 626 2976joe.lamantia@mediacatalystjoe.lamantia@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

What You Can Build

Designing Frameworks For Interaction and User Experience

Design

Transcript of Designing Frameworks For Interaction and User Experience

Designing and Implementing Test Automation Frameworks with QTP · Designing and Implementing Test Automation Frameworks with QTP HP QuickTest Professional is a test automation tool

Designing and Building (Your Own) UI Frameworks For the Enterprise

Designing Interaction Routines in Service Networks

Designing for Gesture and Tangible Interaction

Designing Exhibition Frameworks for Questions

A classification of user experience frameworks for ...€¦ · frameworks or user experience aspects ((Nijholt, van Dijk, & Reidsma, 2008), of frameworks for tangible user interaction

Designing Reusable Frameworks for Test Automation

Designing for interaction - LMU

Designing for Diversity - Human Computer Interaction

Lecture 5 Interaction Frameworks

WDE08 Designing for interaction with Ajax

You should collaborate, children : a study of teachers design and ...€¦ · Both these frameworks provide guidelines for facilitating and designing whole-class interaction, group

Designing Interaction between Man and Machine

A Pattern for Designing Component-Based Frameworks

Designing for People: Communicating Effectively with Interaction

Designing gaze interaction systems

Designing interaction in digital tabletop games to support ... interaction in digital... · 1 Designing interaction in digital tabletop games to support collaborative learning in

Designing Interaction For Social Change

Designing modular frameworks for crop modelling. Myriam Adam

Designing for Interaction 120379359583537 4