Effective IA For Portals: The Building Blocks Framework

EffectiveIA For Enterprise PortalsThe Building Blocks Design Framework

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

Todays MenuOf Portals and ProblemsEscaping FlatlandThe Building BlocksEnhancing Portal Value & ExperienceCase StudyCommunity...?

2

Of Portals and Problems


User experience often left to IT...

4


User experience often left to IT...

4

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 5


Portal Types • Dynamic web publishing• Self-service• Collaboration• Intranet• E-business• Enterprise integration

6


Enterprise Portals“a portal addressing the whole enterprise”

Audience: all HR staff, all suppliers

Purpose: all HR processes, all purchasing

Content: all HR data, all ERP functions

7


Some examples

8


Some examples

8


Some examples

8


Some examples

8


ʻEnterpriseʼ: Perceived differently

9

Implied universality, ubiquity, permanenceHigher costs, ʻstakesʼ, visibility, complexityMore pressure, politics, risk


The Usersportal is...

10

“Is everything in one place?”

a single destinationaggregates content (info, functionality)personalized or customizable


IT Stakeholdersportal is...

11

“Will it fit our IT architecture?”

a technology platformlowers integration costs, complexity

The Businessportal is...


“What does it cost?”

a business channelconnects with audiences or partnersenhances strategic capabilities

Potential conflicts• distinct languages• divergent goals• differing success criteria• competing agendas

IA / UX


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

15





The Ubiquitous Portlet

17


The Box of Chocolates Model

18

1. Everything in a portlet

2. Portlets are islands

3. ?? Add more portlets!


Advantages

Single toolSimple methodClassic strategy

...but only one outcome.19


Welcome to Flatland!2Dbasic structureno depthlimited flexibility

20


Growth & ChangeMore content...New audiences...Re-organizations...

????

21


The Bigger Box of Chocolates

22

^



22

^



22

^



22

^



22

^



Increased...Information costsManagement costsTraining costs

24

DecreasedUsabilityFindabilitySatisfactionExperience qualityAdoptionPerceived valueROI



The iTablet...?



The Kitchen of the Future...?


One-Way Aggregation

26

??????


Two-way Conversation

27

Escaping Flatland


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

29


Vision: Enterprise Portal Suite

30






A Better Experience

32

The Building BlocksEscaping Flatland


Why Use Frameworks...?

Cheaper!

Faster!

34


The Building Blocks System

35

Basic PrinciplesStandardized Components

Containers manage content

Connectors define structure & navigation

Assembly RulesSuggested Functionality

Convenience, Utility, Social

Best Practices [soon]




Free-form content



Section Connector



Page Connector



Utility Navigation



View



Tile



Control Bar



Convenience Functionality



Page


Basic PrinciplesThe Design Behind the System

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



PortabilityBlocks can be:

•syndicated

•shared

• reused

•placed elsewhere

•duplicated

•moved

39


Independence

Blocks are independent

•content

• interaction

•display...until “stacked” together

40


InheritanceBlocks inherit from those stacked above:•content

•properties

• interaction

Inheritance cascades top to bottomAll blocks stacked below inherit from above

41


Inheritance

42


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

43


Layering

44

Containers


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

46


TileSize: 1Elements:

• Header• Body• [Footer]

47


Tile GroupSize: 2Elements:


48


ViewSize: 3Elements:


49


PageSize: 4Elements:

• [none]

50


SectionSize: 5Elements:

• Page (1)

51


Dashboard / PortalSize: 6Elements: Section (1)

52


Portal SuiteSize: 7Elements: Portal (1)

53

ConnectorsK.I.T. Keep it Together...


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

55


Control BarAdds ʻdepthʼ

Attach to:• Tiles• Tile Groups• Views

56


Page ConnectorLinks all Pages in a Section

57


Section ConnectorLinks all Sections (1 Page) in a Portal

58


Crosswalk ConnectorDirectly links two individual Containers

59


Crosswalk Connector

60


Contextual CrosswalkDestination changes with context

61


Contextual Crosswalk

62



62



62


Portal ConnectorLinks Dashboards & Portals in a Suite

63



63



63



63


Utility NavigationLinks external tools:

• calendars• alerting• instant messaging• corporate blogs• enterprise wikis• licensed feeds• RSS aggregators

64


Geography Selector

65


Geography Selector

66

Putting It All TogetherStacking Hierarchy & Assembly Guidelines


Stacking HierarchyAssigns “size” to all blocksDefines possible combinations

68


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

69

Container Stacking HierarchyPortal Suite 7

Portal 6

Section 5

Page 4

View 3

Tilegroup 2


Tile 1


1. Smaller blocks inside larger blocks

71

Portal Suite 7

Portal 6

Section 5

Page 4

View 3

Tilegroup 2

Tile 1


2. Multiple smaller blocks allowed

72

Page 4

Tilegroup 2

Tile 1 Tile 1 Tile 1

Page 4

View 3

Tilegroup 2

Tilegroup 2

3. No larger blocks inside smaller blocks


Tile 1

Section 5

Tilegroup 2

Page 4


4. Can stack blocks sequentially

74

View 3

Tilegroup 2

Tile 1

Portal 6

Section 5

Page 4


5. Can skip sizes when stacking

75

Section 5

View 3

Tile 1

6. Can stack different sizes on the same level


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


Stacking Example

77

Case StudyChange and Growth


Strategy: Enterprise Tile Library

Design: US Dashboard / Healthcare Portals

Prototyping: Healthcare Portal POC

Governance: US Design Guide

79


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

80


ProjectSeries of portal effortsVendor: strategy, design, build, supportEngaged across enterpriseBuilding blocks evolved

81


Global Executive Portal

Global Leadership TeamEnterprise insightBusiness intelligence

82





Account Management Portal

National market managersPerformance assessment, decision supportAnalytical tools, alerting

*Geographic visualization

86







US Dashboard

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

*Introduced social mechanisms

92







Approvals Portal

Senior Managers, ExecsStreamline finance operationsInvoice tracking & approval

*Portability = critical

98





Regional Dashboard

Regional executive teamPerformance monitoringBusiness intelligence

*Emphasis on social assessment

102








Expense Management Portal

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

109








Sales Dashboard

Unit LeadershipUnit operations insightBusiness intelligence, social asessment

116







Daily Planner Console

Chronic care managersIncrease efficiency & productivity Productivity tools, workflow integration

*UX offers rich interactions

122







Working With the BlocksEverone 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

130


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

131


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

132


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

133


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

134


Thanks!

[email protected]

135