Frameworks Are The Future of Design

Design Frameworks ...are the Future

Joe Lamantia Active 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. EuroIA 2008 Joe Lamantia 2

Todays Menu Modularity in all things Itʼs a DIY Future Example: Hot Framework Action! Framework Design Tips EuroIA 2008 Joe Lamantia 3

Design frameworks are sexy! EuroIA 2008 Joe Lamantia 4

Whatʼs in a design framework? Goals and principles Standard components Boundaries and connections Guidelines and rules EuroIA 2008 Joe Lamantia 5

EuroIA 2008 Joe Lamantia 6

What You Can Build Effective IA For Enterprise Portals: The Building Blocks Framework IA Summit 2008 | Joe Lamantia 8

Modularity In All Things

Web 1.0 Model = centralized Concerns • organization • structure • architecture EuroIA 2008 Joe Lamantia 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 EuroIA 2008 Joe Lamantia 11

Welcome to the coalmine EuroIA 2008 Joe Lamantia 13

Developers build the world we all live and work in. Theyʼre like canaries in the coalmine for designers. What happens to them ﬁrst... ...happens to us next! So whatʼs happening to the developers? EuroIA 2008 Joe Lamantia 14

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 EuroIA 2008 Joe Lamantia 15

Modularity is Everywhere Browser Architecture EuroIA 2008 Joe Lamantia 16

Modularity is Everywhere Browser Experience EuroIA 2008 Joe Lamantia 17

In the Operating System EuroIA 2008 Joe Lamantia 18

Physical & Information Experiences EuroIA 2008 Joe Lamantia 21

The iTablet...? EuroIA 2008 Joe Lamantia 22

The Kitchen of the Future...? EuroIA 2008 Joe Lamantia 22

Web 2.0 Model = de-centralized Concerns • participation • interaction EuroIA 2008 Joe Lamantia 23

...the growth of Microformat-coded Web possible for users pages will make it to more easily create their own mashups--personal proﬁle pages that have just the pieces of Web content they want. Rafe Needleman Mozilla Ubiquity, Microsoft IE8, and the fracturing of Web pages EuroIA 2008 Joe Lamantia 24

Web 2.0 resembles enterprise environments Effective IA For Enterprise Portals: The Building Blocks Framework IA Summit 2008 | Joe Lamantia 25

Syndication streams of modular content and functionality Social Structures tangible networks & communities Services identity, security, publication, data management Effective IA For Enterprise Portals: The Building Blocks Framework IA Summit 2008 | Joe Lamantia 26

The Ubiquitous Portlet EuroIA 2008 Joe Lamantia 27

Executive dashboard Dashboards Portals Enterprise portals Tile-based UX Widgets DIY experiences Hackware Fablab Effective IA For Enterprise Portals: The Building Blocks Framework IA Summit 2008 | Joe Lamantia 28

It’s A DIY Future 29

Industrial Production Model EuroIA 2008 Joe Lamantia 30

The Walls Are Coming Down EuroIA 2008 Joe Lamantia 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 EuroIA 2008 Joe Lamantia 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 EuroIA 2008 Joe Lamantia 33

New Creators EuroIA 2008 Joe Lamantia 34

“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 \"everybody\" (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 EuroIA 2008 Joe Lamantia 35

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 proﬁle 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 Mozilla Ubiquity, Microsoft IE8, and the fracturing of Web pages EuroIA 2008 Joe Lamantia 36

Ecology of Co-Creation EuroIA 2008 Joe Lamantia 37

Creative Commons (Infrastructure) EuroIA 2008 Joe Lamantia 38

What’s An Architect To Do? 39

Here comes everybody! ...no designer required! EuroIA 2008 Joe Lamantia 41

Itʼs bad to be a commodity in a digital world. EuroIA 2008 Joe Lamantia 42

Creating frameworks $$ allows designers to sell high value services. EuroIA 2008 Joe Lamantia 43

We have framework superpowers! human insight design skills architecture EuroIA 2008 Joe Lamantia 44

Designers create the tools other people use... ...to create experiences for themselves, and the world. EuroIA 2008 Joe Lamantia 45

Design: Now Scope Persistence EuroIA 2008 Joe Lamantia 46

Design: Now Scope component Persistence EuroIA 2008 Joe Lamantia 46

Design: Now Scope template component Persistence EuroIA 2008 Joe Lamantia 46

Design: Now Scope product / solution template component Persistence EuroIA 2008 Joe Lamantia 46

Design: Now Scope pattern product / solution template component Persistence EuroIA 2008 Joe Lamantia 46

Design: Now Scope system pattern product / solution template component Persistence EuroIA 2008 Joe Lamantia 46

Design: Now process / service Scope system pattern product / solution template component Persistence EuroIA 2008 Joe Lamantia 46

Design: Now network process / service Scope system pattern product / solution template component Persistence EuroIA 2008 Joe Lamantia 46

Design: Now environment / framework network process / service Scope system pattern product / solution template component Persistence EuroIA 2008 Joe Lamantia 46

Design: Now standard environment / framework network process / service Scope system pattern product / solution template component Persistence EuroIA 2008 Joe Lamantia 46

Design: Now standard environment / framework network process / service Scope system pattern product / solution template Co-creators / DIY component Persistence EuroIA 2008 Joe Lamantia 46

Design: Now standard environment / framework network Designers process / service Scope system pattern product / solution template Co-creators / DIY component Persistence EuroIA 2008 Joe Lamantia 46

\"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 EuroIA 2008 Joe Lamantia 47

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 EuroIA 2008 Joe Lamantia 48

The Problem With Portlets The Forrest Gump School of Architecture

The Common Portlet “portletus ﬂaticus” Two part structure No ʻhooksʼ or connections Only purpose = display A little bit anti-social... EuroIA 2008 Joe Lamantia 50

The Box of Chocolates Model Everything in a portlet Portlets are islands ?? Add more portlets! EuroIA 2008 Joe Lamantia 51

Advantages Single tool Simple method Classic strategy ...but only one outcome. EuroIA 2008 Joe Lamantia 52

Welcome to Flatland! Structure? Connection? Interaction? Context? EuroIA 2008 Joe Lamantia 54

The Bigger Box of Chocolates ^ EuroIA 2008 Joe Lamantia 55

One-Way Aggregation ??? ??? EuroIA 2008 Joe Lamantia 57

Decreased Increased... Usability Information costs Findability Management costs Satisfaction Training costs Experience quality Adoption Perceived value ROI EuroIA 2008 Joe Lamantia 58

Escaping Flatland

Two-way Conversation EuroIA 2008 Joe Lamantia 60

Vision: Enterprise Portal Suite EuroIA 2008 Joe Lamantia 61

Needs Allow for growth and change Establish common language for all perspectives Construct scalable, reusable structures Encourage high-quality user experiences Enable sharing of assets Further vision of 2-way conversation EuroIA 2008 Joe Lamantia 62

A Better Experience EuroIA 2008 Joe Lamantia 64

structure EuroIA 2008 Joe Lamantia 65

Environments rich in Structure Connection Interaction Context EuroIA 2008 Joe Lamantia 67

Building Blocks Overview What’s In the Bag...?

The Building Blocks System Basic Principles Standardized Components Containers manage content Connectors deﬁne structure & navigation Assembly Rules Suggested Functionality Convenience, Utility, Social Best Practices [soon] EuroIA 2008 Joe Lamantia 69

Containers 7 types Begin with Tile, range up to Portal Suite Makeup and behavior deﬁned in detail Smaller Containers deliver content Larger Containers create structure Work together with Connectors EuroIA 2008 Joe Lamantia 70

Container Blocks Overview EuroIA 2008 Joe Lamantia 71

Container Blocks Overview Tile EuroIA 2008 Joe Lamantia 71

Container Blocks Overview Tilegroup EuroIA 2008 Joe Lamantia 71

Container Blocks Overview View EuroIA 2008 Joe Lamantia 71

Container Blocks Overview Page EuroIA 2008 Joe Lamantia 71

Container Blocks Overview Section EuroIA 2008 Joe Lamantia 71

Container Blocks Overview Portal EuroIA 2008 Joe Lamantia 71

Container Blocks Overview Portal Suite EuroIA 2008 Joe Lamantia 71

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

Connector Components Overview EuroIA 2008 Joe Lamantia 73

Connector Components Overview Control Bar EuroIA 2008 Joe Lamantia 73

Connector Components Overview Geography Selector EuroIA 2008 Joe Lamantia 73

Connector Components Overview Page Connector EuroIA 2008 Joe Lamantia 73

Connector Components Overview Section Connector EuroIA 2008 Joe Lamantia 73

Connector Components Overview Crosswalk EuroIA 2008 Joe Lamantia 73

Connector Components Overview Contextual Crosswalk EuroIA 2008 Joe Lamantia 73

Connector Components Overview Portal Connector EuroIA 2008 Joe Lamantia 73

Connector Components Overview Utility Navigation EuroIA 2008 Joe Lamantia 73

Free-form content EuroIA 2008 Joe Lamantia 74

Section Connector EuroIA 2008 Joe Lamantia 74

Page Connector EuroIA 2008 Joe Lamantia 74

Utility Navigation EuroIA 2008 Joe Lamantia 74

View EuroIA 2008 Joe Lamantia 74

Tile EuroIA 2008 Joe Lamantia 74

Control Bar EuroIA 2008 Joe Lamantia 74

Convenience Functionality EuroIA 2008 Joe Lamantia 74

Page EuroIA 2008 Joe Lamantia 74

Basic Principles Boundaries

Openness Use blocks for some or all content Mix blocks and free-form content EuroIA 2008 Joe Lamantia 76

Portability Blocks can be: • syndicated • shared • reused • placed elsewhere • duplicated • moved EuroIA 2008 Joe Lamantia 77

Independence Blocks are independent • content • interaction • display ...until “stacked” together EuroIA 2008 Joe Lamantia 78

Inheritance Blocks inherit from those stacked above: • content • properties • interaction Inheritance cascades top to bottom All blocks stacked below inherit from above EuroIA 2008 Joe Lamantia 79

Inheritance EuroIA 2008 Joe Lamantia 80

Layering Blocks can deﬁne all layers of an environment ...not just visual / IA / UX Blocks can cover *any* combination of layers ...some, all, one, UX, tech, biz EuroIA 2008 Joe Lamantia 81

Layering EuroIA 2008 Joe Lamantia 82

Putting It All Together Rules

Stacking Hierarchy Assigns “size” to all blocks Deﬁnes possible combinations EuroIA 2008 Joe Lamantia 84

Stacking Rules 1. Smaller blocks inside larger blocks 2. Multiple smaller blocks allowed 3. No larger blocks inside smaller blocks 4. Can stack blocks sequentially 5. Can skip sizes when stacking 6. Can stack different sizes on the same level EuroIA 2008 Joe Lamantia 85

Container Stacking Hierarchy EuroIA 2008 Joe Lamantia 86

Container Stacking Hierarchy Tile 1 EuroIA 2008 Joe Lamantia 86

Container Stacking Hierarchy Tilegroup 2 Tile 1 EuroIA 2008 Joe Lamantia 86

Container Stacking Hierarchy View 3 Tilegroup 2 Tile 1 EuroIA 2008 Joe Lamantia 86

Container Stacking Hierarchy Page 4 View 3 Tilegroup 2 Tile 1 EuroIA 2008 Joe Lamantia 86

Container Stacking Hierarchy Section 5 Page 4 View 3 Tilegroup 2 Tile 1 EuroIA 2008 Joe Lamantia 86

Container Stacking Hierarchy Portal 6 Section 5 Page 4 View 3 Tilegroup 2 Tile 1 EuroIA 2008 Joe Lamantia 86

Container Stacking Hierarchy Portal Suite 7 Portal 6 Section 5 Page 4 View 3 Tilegroup 2 Tile 1 EuroIA 2008 Joe Lamantia 86

6. Can stack different sizes on the same level Page 4 Page 4 View 3 Tile 1 Tile 1 Tile 1 Tile 1 Tilegroup 2 Tilegroup 2 Tile 1 Tile 1 Tile 1 Tile 1 EuroIA 2008 Joe Lamantia 87

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 Effective IA For Enterprise Portals: The Building Blocks Framework IA Summit 2008 | Joe Lamantia 88

Apple Stole My Framework! Just Kidding...

Tile View Free-form View Selector Utility Navigation EuroIA 2008 Joe Lamantia 90

Case Study Change and Growth

Client BiopharMEGAceuticials Global enterprise ~100k staff R+D > manufacturing > sales > distribution Recent mergers = new size and complexity EuroIA 2008 Joe Lamantia 92

Series of portal efforts Vendor: strategy, design, build, support Engaged across enterprise Building blocks leveraged as: • Concept langauge • Design Tool • Prototype Accelerator • Governance Framework EuroIA 2008 Joe Lamantia 93

Global Executive Portal Global Leadership Team Enterprise insight Business intelligence EuroIA 2008 Joe Lamantia 94

US Dashboard US Leadership Team Major market insight, enhancing dialog Business intelligence, social commentary *Introduced social mechanisms EuroIA 2008 Joe Lamantia 97

Approvals Portal Senior Managers, Execs Streamline ﬁnance operations Invoice tracking & approval *Portability = critical EuroIA 2008 Joe Lamantia 100

Expense Management Portal Managers, budget coordinators Streamline invoicing, improve forecasting Invoice & project management capability EuroIA 2008 Joe Lamantia 103

Sales Dashboard Unit Leadership Unit operations insight Business intelligence, social asessment EuroIA 2008 Joe Lamantia 106

Working With the Blocks Everyone Loves Structural Frameworks!

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 Effective IA For Enterprise Portals: The Building Blocks Framework IA Summit 2008 | Joe Lamantia 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 Effective IA For Enterprise Portals: The Building Blocks Framework IA Summit 2008 | Joe Lamantia 111

Selling the Building Blocks Pitch the outcome, not the framework Speak the buyersʼ language (IT, user, biz) Always explain the minimum Start simple, promise less, do more Effective IA For Enterprise Portals: The Building Blocks Framework IA Summit 2008 | Joe Lamantia 112

Possible Future Stuff Wiki Community of Practice Patterns & Pattern Library Mailing List, Blog, Feed Destination Workshops & Seminars Courses Book...? Effective IA For Enterprise Portals: The Building Blocks Framework IA Summit 2008 | Joe Lamantia 113

On Designing Frameworks

Framework Checklist Goals & Purpose Components Boundaries Rules (behaviors) EuroIA 2008 Joe Lamantia 115

Deﬁne the goals ﬁrst. EuroIA 2008 Joe Lamantia 116

Start simple: 3 Containers 2 Connectors EuroIA 2008 Joe Lamantia 117

Use stable language. Donʼt change names! EuroIA 2008 Joe Lamantia 118

Conserve simplicity. Add only essential elements. 7 Containers 11 Connectors EuroIA 2008 Joe Lamantia 119

Set boundaries carefully. EuroIA 2008 Joe Lamantia 120

Make as few rules as possible. EuroIA 2008 Joe Lamantia 121

In Conclusion...

Frameworks are SEXY! EuroIA 2008 Joe Lamantia 123

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 Effective IA For Enterprise Portals: The Building Blocks Framework IA Summit 2008 | Joe Lamantia 124

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

Frameworks Are The Future of Design

1 comments

Notes on slide 1

46 Favorites