Frameworks Are The Future of Design

Design Frameworks ...are the Future

Joe LamantiaEuroIA 2008

Joe LamantiaActive in User Experience & the Internet since 1996.

Started a company that failed.

Speak and write on diverse topics inspired by work.

Just moved to Amsterdam.

2


Todays MenuModularity in all thingsItʼs a DIY FutureExample: Hot Framework Action!Framework Design Tips

3


Design frameworks are

sexy!

4


Whatʼs in a design framework?Goals and principlesStandard componentsBoundaries and connectionsGuidelines and rules

5

Joe LamantiaEuroIA 2008 6

IA Summit 2008 | Joe LamantiaEffective IA For Enterprise Portals: The Building Blocks Framework

What You Can Build

8

Modularity In All Things


Web 1.0Model = centralizedConcerns• organization• structure• architecture

10


Together, Ubiquity and Web Slices lead me to believe we're entering an era of fracturing Web content. Already we have seen content separated from presentation with RSS, and we've given developers access to online data for their mashups via Web APIs. Rafe Needleman

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

11


Welcome to the coalmine


Developers build the world we all live and work in. Theyʼre like canaries in the coalmine for designers.What happens to them first......happens to us next!

So whatʼs happeningto the developers?

14


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


15


Modularity is Everywhere

16

BrowserArchitecture


Modularity is Everywhere

17

BrowserExperience


In the Operating System

18


Physical & InformationExperiences

21


The iTablet...?


The Kitchen of the Future...?


Web 2.0Model = de-centralizedConcerns• participation• interaction

23


...the growth of Microformat-coded Web pages will make it possible for users to more easily create their own mashups--personal profile pages that have just the pieces of Web content they want.Rafe Needleman


24

IA Summit 2008 | Joe LamantiaEffective IA For Enterprise Portals: The Building Blocks Framework 25

Web 2.0 resembles enterprise

environments


Syndication streams of modular content and functionality

Social Structures tangible networks & communities

Services identity, security, publication, data management

26


The Ubiquitous Portlet

27

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

IA Summit 2008 | Joe LamantiaEffective IA For Enterprise Portals: The Building Blocks Framework 28

It’s A DIY Future

29


Industrial Production Model

30


The Walls Are Coming Down

31


DIY (Do It Yourself) Shift

Lowered entry barriers to design and create

Creator vs. consumer distinction blurs

Flattened control & management structures

Fluid economic and cultural models

32


Web 2.0, culture of contribution, self-publishing

Commoditized design, development & manufacturing

ʻShadow ITʼ

Open Source & public data sets

APIs, Web Services, SOA

Mashup infrastructure: Yahoo Pipes, Google Gadgets

Physical goods: fab, ReadyMade, Make

33


New Creators

34


“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

35

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




Together, Ubiquity and Web Slices lead me to believe we're entering an era of fracturing Web content. Already we have seen content separated from presentation with RSS, and we've given developers access to online data for their mashups via Web APIs. But the growth of Microformat-coded Web pages will make it possible for users to more easily create their own mashups--personal profile pages that have just the pieces of Web content they want, or e-mail messages made up of live maps, automatically updating weather forecasts, up-to-the-minute travel information, and so on.

It means that developers will have to learn how to code pages for modularity. Conceptually that's not that big a deal, although if coding for Ubiquity and coding for Slices is different, it's going to be a technical mess. What I am waiting to see is how managers wrestle with the branding and revenue implications of letting their sites be mashed up and refactored into tiny pieces all over the Web, by anyone. Rafe Needleman


36


Ecology of Co-Creation


CreativeCommons(Infrastructure)

38

What’s An Architect To Do?

39


Herecomeseverybody!

41

...no designer required!


Itʼs bad to be a commodity in a digital world.

42


Creating frameworks allows designers to sell high value services.

$$

43


We have framework superpowers!human insightdesign skillsarchitecture

44


Designers create the tools other people use...

...to create experiences for themselves, and the world.

45


Design: Now

46

Scope

Persistence


Design: Now

46

component

Scope

Persistence


Design: Now

46

component

template

Scope

Persistence


Design: Now

46

component

product / solution

template

Scope

Persistence


Design: Now

46

component

product / solution

template

Scope

Persistence

pattern


Design: Now

46

component

product / solution

template

systemScope

Persistence

pattern


Design: Now

46

component

product / solution

template

system

process / service

Scope

Persistence

pattern


Design: Now

46

component

product / solution

template

system

process / service

Scope

Persistence

network

pattern


Design: Now

46

component

product / solution

template

system

process / service

environment / framework

Scope

Persistence

network

pattern


Design: Now

46

component

product / solution

template

system

process / service


standard

Scope

Persistence

network

pattern


Design: Now

46

component

product / solution

template

system

process / service


standard

Scope

Persistence

network

pattern

Co-creators / DIY


Design: Now

46

component

product / solution

template

system

process / service


standard

Scope

Persistence

network

pattern

Designers

Co-creators / DIY


"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

47

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




SporeOver 1.8 million creatures created by people using the Spore Creature Creator.

48

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

The Problem With PortletsThe Forrest Gump School of Architecture


The Common Portlet“portletus flaticus”

Two part structureNo ʻhooksʼ or connectionsOnly purpose = displayA little bit anti-social...

50


The Box of Chocolates Model

51

Everything in a portlet

Portlets are islands

?? Add more portlets!


Advantages

Single toolSimple methodClassic strategy

...but only one outcome.52


Welcome to Flatland!Structure?Connection?Interaction?Context?

54


The Bigger Box of Chocolates

55

^


One-Way Aggregation

57

??????


Increased...Information costsManagement costsTraining costs

58

DecreasedUsability

FindabilitySatisfaction

Experience qualityAdoption

Perceived valueROI

Escaping Flatland


Two-way Conversation

60


Vision: Enterprise Portal Suite

61


NeedsAllow for growth and changeEstablish common language for all perspectivesConstruct scalable, reusable structuresEncourage high-quality user experiencesEnable sharing of assetsFurther vision of 2-way conversation

62


A Better Experience

64


structure

65


Environments rich in

Structure Connection Interaction Context

67

Building Blocks OverviewWhat’s In the Bag...?


The Building Blocks System

69

Basic PrinciplesStandardized Components

Containers manage content

Connectors define structure & navigation

Assembly RulesSuggested Functionality

Convenience, Utility, Social

Best Practices [soon]


Containers7 typesBegin with Tile, range up to Portal SuiteMakeup and behavior defined in detailSmaller Containers deliver contentLarger Containers create structureWork together with Connectors

70


Container Blocks Overview

71



71

Tile



71



71

Tilegroup



71



71

View



71



71

Page



71



71

Section



71



71

Portal



71



71

Portal Suite



71


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

72


Connector Components Overview

73



73

ControlBar



73



73

Geography Selector



73



73

Page Connector



73



73

Section Connector



73



73

Crosswalk



73



73

Contextual Crosswalk



73



73

Portal Connector



73



73

Utility Navigation



73


Free-form content


Section Connector


Page Connector


Utility Navigation


View


Tile


Control Bar


Convenience Functionality


Page

Basic PrinciplesBoundaries


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

76


PortabilityBlocks can be:

•syndicated

•shared

• reused

•placed elsewhere

•duplicated

•moved

77


Independence

Blocks are independent

•content

• interaction

•display...until “stacked” together

78


InheritanceBlocks inherit from those stacked above:

• content

• properties

• interaction

Inheritance cascades top to bottomAll blocks stacked below inherit from above

79


Inheritance

80


Layering

Blocks can define all layers of an environment...not just visual / IA / UX

Blocks can cover *any* combination of layers...some, all, one, UX, tech, biz

81


Layering

82

Putting It All TogetherRules


Stacking HierarchyAssigns “size” to all blocksDefines possible combinations

84


Stacking Rules1. Smaller blocks inside larger blocks2. Multiple smaller blocks allowed3. No larger blocks inside smaller blocks4. Can stack blocks sequentially5. Can skip sizes when stacking6. Can stack different sizes on the same level

85


Container Stacking Hierarchy

86



86

Tile 1



Tilegroup 2

86

Tile 1



View 3

Tilegroup 2

86

Tile 1



Page 4

View 3

Tilegroup 2

86

Tile 1



Section 5

Page 4

View 3

Tilegroup 2

86

Tile 1



Portal 6

Section 5

Page 4

View 3

Tilegroup 2

86

Tile 1


Container Stacking HierarchyPortal Suite 7

Portal 6

Section 5

Page 4

View 3

Tilegroup 2

86

Tile 1


6. Can stack different sizes on the same level

87

Page 4

View 3

Tilegroup 2

Tile 1 Tile 1

Tile 1

Tile 1

Page 4

Tilegroup 2

Tile 1 Tile 1 Tile 1

Tile 1


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

88

Apple Stole My Framework!Just Kidding...


Tile View

View Selector Utility Navigation

Free-form

Case StudyChange and Growth


ClientBiopharMEGAceuticialsGlobal enterprise ~100k staff R+D > manufacturing > sales > distributionRecent mergers = new size and complexity

92


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

93


Global Executive Portal

Global Leadership TeamEnterprise insightBusiness intelligence

94


US Dashboard

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

*Introduced social mechanisms

97


Approvals Portal

Senior Managers, ExecsStreamline finance operationsInvoice tracking & approval

*Portability = critical

100


Expense Management Portal

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

103


Sales Dashboard

Unit LeadershipUnit operations insightBusiness intelligence, social asessment

106

Working With the BlocksEveryone Loves Structural Frameworks!


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

110


Adapt things as needed

What is the environment?What needs to be portable, open?Is inheritance useful?Are these the right blocks?

Change or add principles with care

111


Selling the Building Blocks

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

112


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

113

On Designing Frameworks


Framework Checklist Goals & Purpose Components Boundaries Rules (behaviors)

115


Define the goals first.

116


Start simple: 3 Containers 2 Connectors

117


Use stable language.Donʼt change names!

118


Conserve simplicity.Add only essential elements. 7 Containers 11 Connectors

119


Set boundaries carefully.

120


Make as few rules as possible.

121

In Conclusion...


Frameworks are

SEXY!

123


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

124

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

mailto:[email protected]




Frameworks Are The Future of Design

Design

Transcript of Frameworks Are The Future of Design