IDEA 2008

by:   |  Posted on


The “IDEA Conference”: took place in Chicago on October 7-9 at the Harold Washington Library Center.

The speakers pushed the boundaries of what it means to design complex information spaces of all kinds. We can all expand our practice by absorbing their experiences and ideas. In cooperation with the “IA Institute”:, we’re happy to bring you recordings of most conference talks. We hope you enjoy listening to nearly the entire conference via these recordings.

This conference addressed issues of design for an always-on, always-connected world. Where “cyberspace” is a meaningless term because the online and offline worlds cannot be made distinct. Where physical spaces are so complex that detailed wayfinding is necessary to navigate them. Where work processes have become so involved, and so digitized, that we need new processes to manage those processes. — from the “IDEA Vision Statement”:

Subscribe to the Boxes and Arrows Podcast in iTunes or add this page to your account:

iTunes     IDEA Conference theme music generously provided by Sonic Blue

Micro-Interactions in a 2.0 WorldDavid Armano
We live in a world where the little things really do matter. Each encounter no matter how brief is a micro-interaction that makes a deposit or withdrawal from our rational and emotional subconscious. The sum of these interactions and encounters adds up to how we feel about a particular product, brand, or service. Little things. Feelings. They influence our everyday behaviors more than we realize.

Vice-President of Interaction Design at Critical Mass, David Armano shares what organizations are doing this and how we’ll all need to re-think how brands are built and sustained in an ever-changing 2.0 world.


Micro-Interactions in a 2.0 World (v2)

View SlideShare presentation or Upload your own. (tags: web 2.0)

CmapTools: From Meaningful Learning to a Network of Knowledge BuildersAlberto Cañas
Based on theories of meaningful learning and education, Co-Founder and Associate Director at the Institute for Human and Machine Cognition (IHMC), Alberto Canas presents a software tool that allows users to collaborate in the construction of shared knowledge models based on concept maps, which are used worldwide by users of all disciplines and ages, from elementary school students to NASA scientists.


Linguistic User InterfacesChris Crawford
Wouldn’t it be nice if, instead of digging through nested menus buried inside subpanes of dialogs, we could just talk to our computers in plain language? Sure it would, but computer scientists have long since proven that such “natural language processing” can’t be done.

Storyton Author and Inventor Chris Crawford describes a Linguistic User Interface, outlining how it’s impossible to create a LUI seperately from the digtial reality it reflects: the language and reality must be built up in a parallel process.

Chris illustrates this with Deikto, the LUI system he created for his interactive storytelling technology.


The Language of InteractionBill DeRouchey
We are interacting with technology in an exploding number of forms. “Traditional” computers, cell phones, pocket PDAs, game systems, gesture-based input, store kiosks and checkouts, and much more. How do people learn new technology? By subconsciously learning the language of interaction and applying that language when learning something new.

Bill DeRouchey, Sr. Interaction Designer at Ziba Design surveys everyday objects out there now to spot patterns and trends in what people are learning from devices and products.


The Language of Interaction

View SlideShare presentation or Upload your own. (tags: ixd ixda)

Getting RealJason Fried
Jason Fried is the co-founder and President of 37signals, a privately-held Chicago-based company committed to building the best web-based tools possible with the least number of features necessary. 37signals’ products include Basecamp, Highrise, Backpack, Campfire, Ta-da List, and Writeboard.

37signals also developed and open-sourced the Ruby on Rails programming framework. 37signals’ products do less than the competition — intentionally. Jason believes there’s real value and beauty in the basics. Elegance, respect for people’s desire to simply get stuff done, and honest ease of use are the hallmarks of 37signals products.


Aurora: Envisioning the Future of the WebJesse James Garrett
Co-founder and President of Adaptive Path Jesse James Garrett provides an inside look at the process of creating Aurora, a concept video depicting one possible future user experience for the Web.

Jesse talks about the technology trends that will shape the future Web, outlines the challenges of designing a future product, and takes the audience for a behind the scenes look at the creation of the Aurora concept video.


Aurora (Part 1) from Adaptive Path on Vimeo

Aurora (Part 2) from Adaptive Path on Vimeo.

Aurora (Part 3) from Adaptive Path on Vimeo.

Aurora (Part 4) from Adaptive Path on Vimeo.

Emerging trends | Design thinking | Service innovationAradhana Goel
When we look through the lenses of society (how we connect), mobility (how to move) and sustainability (how we consume), we realize that the world has changed dramatically in the last couple of years. Aradhana Goel, the Service Design Strategist at IDEO, discusses connections between these emerging trends, design thinking, and service innovation.
Download Aradhana’s presentation


Books and BrowsersDave Gray
The book as a form factor has been around for about 2,000 years, since Julius Caesar first decided to fold up a scroll, accordion-style, and mark the pages for later reference. In 1455, Aldus Manutius was the first to publish the portable paperback, and it has remained relatively unchanged since.

In an interactive format, XPLANE Founder and Chairman Dave Gray explores several questions about the future of the book and the web browser.


You are (Mostly) Here: Digital Space and the Context ProblemAndrew Hinton
Context. It’s everywhere. No, really, you can’t move without bumping into the stuff. But it used to be that we at least had a grasp of what context we were in at any given time. We were either here, or there. But technology has radically changed what it means to be “here” or “there,” and has brought some challenging design problems along with it.

Andrew Hinton, Lead Information Architect at Vanguard, discusses What does architecture even mean, when the walls are made of vapor? How do we map places that don’t behave like places anymore? And if you don’t know whether you’re here or there, then how do you know which version of yourself to be?
Download Andrew’s presentation


Digital Context CluesJason Kunesh
Experience design is evolving in both discipline and practice as more people communicate and engage with media. In this presentation Independent Design Professional Jason Kunesh examines working with patterns, diagramming and prototyping tools, code frameworks like Rails and Drupal and usability testing 8 year olds.

Jason also looks at the lessons learned and where he draws the boundaries between a firm’s design principles and the tenets of a particular.


Jdkunesh Idea2008

View SlideShare presentation or Upload your own. (tags: idea2008 ia)

Information in SpaceElliott Malkin
Artists and Information Architect Elliott Malkin discusses his new media projects installed in public space.

He covers several projects in this presentation including Eruv, a symbolic boundary erected around Jewish neighborhoods as part of the observation of the Sabbath completed in Lower Manhattan and New York city.

Elliott also talks about the research into the life of his great-grandfather, which led to his concept for Cemetery 2.0, an electronic device that connects gravestones to online genealogical databases.

Elliot also shares his most recent work, Graffiti for Butterflies, a technique for using ultraviolet light and street art to direct Monarch butterflies to food sources in urban areas.

Many thanks to Elliott for adding the audio from his presentation to the videos below. You can find the original source of these videos along with greater detail about each of these projects, on his web site.


The Eruv Projects, IDEA Talk, Part I from Elliott on Vimeo.

Cemetery 2.0, IDEA Talk, Part II from Elliott on Vimeo.

Graffiti for Butterflies, IDEA Talk, Part III from Elliott on Vimeo.

Mixing MessagesEdwina von Gal
The design of a park around a museum of biodiversity in Panama (designed by Frank Gehry) has inspired a number of collaborations and connections throughout Panama and, now the United States. The Park will be a living extension of the museum’s exhibits and the first step in an educational trail that will encourage visitors to explore Panama’s rich natural resources.

In this presentation, author and landscape designer, Edwina von Gal, discusses how this project has inspired her to become involved in other educational and applied projects in Panama, working with scientists, students, and local populations to explore sustainable alternatives in agriculture, architecture, and tourism.


IDEA 2008: An Interview with Andrew Hinton

by:   |  Posted on

As IDEA 2008 draws closer, the IA Institute is conducting a series of interviews with the speakers for the conference. As Event Coordinator for IDEA, I fill a variety of roles, including the Interviewer of IDEA Presenters (which I proudly share with Liz Danzico).

This is the second interview in the series, and this time I pulled the name of Andrew Hinton, Lead Information Architect at Vanguard, from the virtual hat. You may recognize Andrew as the presenter of the closing plenary for the IA Summit in Miami this year. Andrew’s blog is Inkblurt and don’t be surprised if you end up engrossed in it and feel as if you are getting a free education!

RU: How did you get your start in Interaction/Information Design?

AH: As far as technology-based work, I did some very rudimentary interface work when I was learning a bit of Apple BASIC & Pascal back in high school. But I’d say my first real challenge was when I had a job at a small medical office as their office manager, and all they had was a typewriter and a telephone. I talked them into getting a computer (a Mac Plus), and buying a database package (something called Double Helix), and letting me build a client accounts system for them.
Trouble was, I had to design it so that my exceedingly tech-phobic co- workers could use it, which forced me to think hard about interface design.
Of course, that was just a part-time job when I was in graduate school. My academic background (Philosophy, Literature & Creative Writing) taught me a lot about making difficult ideas understandable with language — and I think that’s at the core of any information- design challenge. That background continues to be a help for me.

RU: How did you get your start as a presenter?

AH: I’ve been doing stuff in front of crowds since I was a kid. Everything from playing music in a bluegrass band when I was about ten to oratory and debate in high school. Plus drama & choir and the band I had in college. Then there’s the teaching I did while in grad school, and I won’t even go into the preaching I did as a teenager in a big suburban Southern Baptist church.
As far as speaking at conferences, I started sending in proposals to the IA Summit and got one accepted, and sort of got on a roll.

RU: What should the audience take away from your talk?

AH: Well, I suppose details are still emerging. The topic is context, and what technology is doing to upset our deeply ingrained assumptions about context — socially and otherwise. But in general, I’d say I’m more interested in asking questions than answering them. That is, I hope it gets people talking.

RU: Who do you look to for inspiration?

AH: That’s tough. I’d have to say my major inspiration is my kid. She’s the future I’m designing for, in more ways than one.
In terms of people I read or look up to, for me it’s all over the place. I grab inspiration from wherever I can find it. Lately I’ve been really into watching presentations from the Long Now Foundation, for instance. The one by Will Wright & Brian Eno is especially amazing. But I also find my imagination-head needs input from things like movies, fiction, biographies, documentaries about almost anything.

RU: You’ve mentioned your daughter before–both in presentations and at least a couple of times in some of the post-IA Summit Y! Live sessions that we were both in. She seems like a really great kid, and as a daughter-daddy myself, I think it’s great when I hear others in our community really getting in to “the future as our children”. As crazy as our worlds can be with work and other obligations, the IA / IxD / UX world seems to be ripe with really great parents.
What’s your favorite way to communicate with people who aren’t in the same room with you?

AH: I like a lot of different methods — and one thing I love about this age we live in is the great variety we now have for communicating. There seems to be a whole new species of communication cropping up every few years, and they all seem to emerge from the nuanced needs we have for how we connect. So, really it’s very contextual for me. I like whatever tool feels most suited for the kind of communicating I’m trying to do at the moment.
It’s easier to say my least favorite — that’s the garden-variety conference call. So little context, so little sense of physical reaction. Plus the awful noise-reduction circuitry on most speaker phones makes it even harder to pick up on subtle verbal cues. I always come out of conference calls feeling anxious & exhausted.

RU: And now, a 2-parter. A lot of people know your name, have heard you speak in the past, quote your blog, and you’re thought highly of (this interviewer is included in that group). How has being a presenter and conference-attendee helped you improve upon your career?

AH: Presenting has been a big help, mainly in my own head. By that I mean … First, the pressure of presenting on a topic forces me to grapple with it in a rigorous way I’m too lazy to do otherwise, which results in having my ideas sorted out in my work a lot better as well.
Second, it’s a decent confidence boost that helps me stick up for the user with more authority than I might otherwise be able to in the daily grind.
Even just going to conferences has been very helpful though. The User Experience Design world is so distributed and virtual — we’re all in each other’s heads, mediated through electronics and words.

Periodically being able to look each other in the eye is incredibly important to keeping all that grounded.
And I don’t know how this “thought highly of” business got going, obviously you’ve never seen me after a conference call!

RU: Part 2. What would you recommend to people who are just getting started in the field and who are interested in becoming more active in the industry—or who just want to follow in your footsteps.

AH: It means a lot to get involved in your community of practice. You don’t realize what an impact it makes on people around you, but it’s huge. Find some problem that needs solving that tickles your fancy, some skill or service that the community could benefit from that you get a kick out of working on, and dive in. Lurking is fine at times, but if you want to be “active in the industry” you have to engage. You can engage the conversation at any level, as long as you have a sense
of humor & perspective about it. And read all kinds of stuff — don’t just read “design” crap all the time. We all breathe each other’s air way too much, and it’s important to get ideas from outside the UX bubble.
As for my footsteps, I don’t recommend them — mainly because I don’t know that I could’ve walked those steps on purpose if I’d tried. Which is to say, follow what obsesses and excites you, whatever crazy path that might take you down, and there’s probably somebody somewhere willing to pay you for doing it well.

RU: I’ve said to many people that a lot of us have not come by our current roles honestly. That is, almost everything that you stated above. I’m trying to say that I think your footsteps are fairly common for the more “seasoned” folks in the industry. Do you have an opinion on where the User Experience Designer of tomorrow will evolve from?

AH:There are already formal curricula out there that are bringing older practitioner skills and learning into the User Experience space, and from what I can tell they’re doing a great job. If I hadn’t burned out on graduate education long ago, I’d consider going to a program myself. That said, I think UX is inherently a hands-on practice, and has to be done to be understood. Doing the work is the only way to get better at it. So whether newer folks get a head start on that from internships or studio work in school, it’ll be necessary eventually anyway. The other thing is that, this field is evolving so quickly, I wouldn’t be surprised if we continue to see people from many other fields coming into the fold and showing us new, amazing things they know how to do that we hadn’t thought of. For example, I keep running across news items from the neuroscience world (which is exploding lately with amazing new knowledge) and finding it incredibly applicable to UX work. UX design will always need cross-disciplinary input, and practitioners who adapt and evolve with the work itself.


About Andrew Hinton

Since 1990, Andrew Hinton has worked as a designer, instructor, writer and consultant of various stripes in the healthcare, financial, consumer and manufacturing industries. Clients have been small and large, including Fortune 500s such as American Express, Shaw, Wachovia and Kimberly-Clark. Andrew is now a Lead Information Architect in mutual-fund giant Vanguard’s User Experience Group.

From his pre-Web education, Andrew holds a BA in Philosophy, an MA in Literature and an MFA in Writing. He’s a regular speaker at conferences like the IA Summit, and sometimes writes for publications like Boxes & Arrows. His current obsessions include Communities of Practice, social design factors, what games teach us about design, and the meaning of context in digital spaces.

A co-founder of the IA Institute, he serves on its Board of Advisors. He also keeps a home on the web at


About IDEA (Information Design Experience Access)

This conference addresses issues of design for an always-on, always-connected world. Where “cyberspace” is a meaningless term because the online and offline worlds cannot be made distinct. Where physical spaces are so complex that detailed wayfinding is necessary to navigate them. Where work processes have become so involved, and so digitized, that we need new processes to manage those processes.

This conference brings together people who are addressing these challenges head on. Speakers from a variety of backgrounds will discuss designing complex information spaces in the physical and virtual worlds.

Your New Excuse to Get an Xbox

by:   |  Posted on

Games are fun, addictive, beautiful, and immersive. Websites, for the most part, are not. Take a moment and think about what video games look like, what they sound like, the way you can move on the screen, what “you” can be. Think of how you feel when you play and who you play with. Consider the launch of Halo 3 on Xbox 360, with unprecedented graphics, sound, and interactivity that called “refined to the point where it delivers only pure unadulterated gaming bliss.”

People gaming on computers and consoles are having a blast and spending big. The result: elements of the game medium are drifting into other digital experiences. Video games have become sophisticated creations that can take years to develop, weeks to play, and days to go platinum. The $12.5 billion dollar market (NPD Group 2006) continues to grow as game franchises have extended into books, graphic novels, films, merchandise, and communities of devotees. The televised Video Game Awards is in its sixth year and the influence of gaming culture is increasingly appearing in the mainstream.

Jeopardy screen

World of Warcraft featured on the Jeopardy game show

Companies should create rich and immersive website experiences, drawing from some of the techniques for game design to build brand affinity and differentiate their sites.

Where did those three hours just go?

When considering whether elements of video game design could apply to a site, you might think the category of your site is your first question. At first glance, advertising sites, RIAs, and some transactional sites seem obvious candidates for engrossing their visitors in the world of the brand; enterprise solutions, not so much. As John Ferrara has demonstrated, games tackle similar tasks as web applications and the HCI considerations still apply. No category of site is therefore inappropriate for “game think.”

Ask yourself the following questions:

  • Are you looking to build brand affinity?
  • Do you have universal corporate messages that you would like to communicate to all visitors?
  • Do you need to create strong incentives for your users to complete a certain task or contribute in a certain way?
  • Do you want your informational site to be more compelling than a brochure?
  • Do you have a significant set of features that might overwhelm first-time users?
  • Does your brand welcome customer contributions and self-expression rather than requiring that all content and experiences be curated?
  • Are you leveraging a marketing campaign that already has audio, animation, and transition styles and a narrative associated with it?
  • Is social media and building an online community part of your strategy?

If you said “yes” to most of these questions, then “game think” could be applied to your site.

Successful video games get users to suspend disbelief, form a visceral connection, and invest themselves in the game world. Players can go into a zone and feel a sense of flow, described as “a feeling of energized focus, full involvement, and success in the process of the activity” 1. Imagine a website where visitors also feel and behave this way: they are engaged and focused, unaware of time, unselfconscious, and feeling rewarded. It would mean we could present brands in more complex environments and we could sustain interest in a site for longer. We could make time spent on a website more enjoyable to the visitor by touching them emotionally. Businesses could move beyond transactional interactions with visitors to mutually beneficial relationships, for long-term future rewards.

Websites don’t need to become more like video games in every way. The inherent purpose of a game is to have fun, and that is not the core motivator for most websites. Many of the most successful sites are able to incorporate fun into the experience, but the suggestion here is that the design of video games offers lessons, rather than a game’s defining attributes of fun, non-productivity, and uncertainty. Key elements of video game design are attractive to website designers because they remove some of the constraints we apply to solving design problems, and open up new opportunities for brand expression.

Such elements include:

  • the reliance on discovery
  • an expectedly steep learnability curve
  • explicitly graded levels of difficulty
  • expression of information using scenes rather than linear pages
  • the entertainment value and length of time engaged in a game title

Infusing websites with some of the attributes of games does not mean that we abandon the notion of utility either. Game players have goals—to kill enemies, to find treasures, to amass wealth—just as web visitors have goals. There exists a need to make progress, to accomplish something. Successful games induce a player to take on a goal, believe in it, obsess on it, and return to the game over multiple sessions, often spanning weeks, in pursuit of achieving it. Game designers plant a kernel that rages so strongly that a player will dedicate considerable time to it. How can we, as website designers, plant such a kernel in our users?

Attributes of websites vs. video games

 Websites  Video games
 Hand-eye coordination: digital  Total body coordination: physical
 Usable  Learnable, playful, discoverable
 One level of difficulty  Multiple levels of difficulty
 Social content   Social interaction
 Web development  Product development
 Wireframes  Storyboards
 Page  Scene
 2D  3D
 Needs are user-centric: satisfy the user  Needs are engendered: satisfy the player
 Free  Bought
 2 to 15 minutes  Hours to days
 Task, transaction and information  Entertainment
 Sticky, at best  Addictive
 Cheap to design and build  Expensive to design and build
 Superficial customization and personalization  Considerable customization and personalization

So how do you play this thing?

Nine approaches can put you on the path to creating differentiated website experiences.

1. Find a balance between challenging and rewarding the user

Gut reaction: who wants to be challenged? This is an area where “game think” is not suitable for every brand, company, and user goal. Conservatively positioned banking web application used by time-poor mom: “no thanks.” Progressive youth fashion brand frequented by surfing tween: “why not?”

Call of Duty 4's initial levels include tasks to familarize the player with weapons and actions

Call of Duty 4’s initial levels include tasks to familarize the player with weapons and actions

Another way to consider “challenge” is to recognize that games have rules and environmental constraints (e.g. materials, locations, physical spaces). Many websites and web applications also rely on rules and have other constraints that require users to interact with them in a certain way (e.g. travel booking forms, profile setup wizards, retirement benefit calculators).

Thinking about the way a game challenges a player is to think about:

  • Learnability. When you start a new game, you have to try buttons, actions, commands etc. to see what can be done. By the end of a few sessions you’ve worked out pretty much everything, and the game has probably guided you through most of it. Apple made the bet that people would be able to work out how to use an iPhone without the familiarity of the interactions from other phones. Users learned the gestures quickly and it has been hailed as an incredibly usable device. As the breadth of activities that can be performed online expands, the way we navigate and interact with those sites and web applications is also going to evolve. Usability will not be the key driver; it will be a given, and learnability will play a larger role.
  • Safe environments to explore and make mistakes. If you provide a way for a user to pleasantly explore and discover different things without irreversible consequences, then a website does not have to be immediately transparent in how it is used. Supporting rich undo, cancel, back, reset, and restart in appropriate ways contributes to the safety net where a user can experiment.
  • Swapping between easy and advanced modes. In video games, players who can handle it opt for more advanced game situations. If they find it too hard, they swap back. Crisis over. Some websites and applications ask users to select a version (standard, professional, custom, or other more complex) before they’ve even tried it out. And then once they’ve selected the more advanced version they’re stuck with it. Let them swap.
  • Progressive disclosure. Instead of overwhelming a player with all the modes of play (weapons, locations, moves etc.) from level one, the video game gradually introduces more sophistication and power. The most important options are offered initially, then more complexity is introduced as a player progresses, or specifically requests it. Tips, tutorials, and demonstrations from other game characters allow the player to learn as they go. Managing the learning curve of your website requires prioritizing features into primary, secondary and so on, knowing the technical and functional domains of your novice and expert users, and determining how many stages of disclosure are appropriate.

Usability is new to gaming; the focus has been on learnability and the visceral connection of the player with the game. Many websites aim to be intuitive. Video games show us that new paradigms can be learned.

2. Allow an ultimate fantasy experience that might actually be true to life

Fantasy experiences are not limited to creating an alter ego with a perfect body. Fantasy experiences incorporate:

  • Doing something in a game that is not actually possible (e.g. breathing underwater in a lost submarine city while shooting cyborgs, in BioShock)
  • Doing something in a game that is possible, just not as you (e.g. bashing out a guitar solo of “Welcome to the Jungle” by Guns & Roses as Slash himself in Guitar Hero I).

Plan your dream kitchen at Ikea with your kitchen’s dimensions

Plan your dream kitchen at Ikea with your kitchen’s dimensions

For some games (e.g. Gran Turismo), representing the details of real life as closely as possible is important. Players can dream that the skills they use in the game compare in a minute way to the skills they would need in the real situation. In other games (e.g. Legend of Zelda), the sense of freedom that comes with doing the improbable is intoxicating. Who doesn’t dream of flying?

For a website, supporting both of these extremes might be worthwhile. In a shopping scenario, some users may want to see what certain apparel looks like on their exact body, while others will want to experience how a minor member of a royal family, feted with personal shoppers, is treated. Probe whether the fantasy experience that your users say they want, or your client would like to offer, is the type of thing only celebrities get up to or is not actually done on Earth. Both offer enormous opportunities for originality and usefulness.

3. Give users control of audio, colors, environment, characters

Let the user’s DNA mix with the site. In games such as Grand Theft Auto, the user can select genres of music to play in the background as well as the volume of the sound effects relative to the music. Users set preferences such as gun cross-hair positioning, colors of environmental elements (e.g. make the racing car red so it stands out more and can be recognized more quickly in the pack), and other elements. The aim here is not to make the game prettier or set arbitrary preferences but to make gameplay more efficient.

Avoid encouraging users to play around with design features that don’t make sense. For websites, the modifiable controls should encourage more effective interaction with the site. For example if, on a banking site, a customer wants to be alerted to all transactions over $100, enable them to red flag these line items in online statements. If a traveler is on a travel planning website coordinating a ski trip, let them use images of snowy landscapes to immediately visually differentiate this trip from the summer vacation that’s also in progress. If a user has the desktop email program configured so that an audible ping gets their attention, chances are they would like the same for their web-based email. Give users who value this customization the options, so they can tweak for added user-friendliness.

Design control of Second Life avatars offers unprecedented detail

Design control of Second Life avatars offers unprecedented detail

Most games enable users to customize, and thus emotionally invest in, their characters. Second Life takes character creation to a level that invites the user to design anything from a facsimile of herself to something genetically impossible. Forget about shirt color, heels or sneakers, brown hair or blond—you can tweak freckle distribution, eye socket depth, lip pout, hand shape and other micro details along a continuum. Such advanced customization options enable the player to design someone unique and nuanced, and enjoy the sense of pride or accomplishment that goes with it. Once you’ve spent serious time perfecting the tip of your avatar’s nose, the bluntness of their profile and the hue of their cornea, you can bet that you’re not going to throw that work away lightly. You’re going to fall in love with your creation and show it off. What’s more, your handiwork and use of customization options impact the way other players or visitors to a social media site interact with you.

Make the character customization options on a website substantial enough, and give the options consequences, and you’ve won a degree of user loyalty. Yahoo, for example, enables visitors to create avatars that represent them as they move around the site. Users can express parts of themselves in Answers, chat, and other web applications without having to reveal their real identities. This way, visitors can avoid the proliferation of recognizable online identities and mitigate privacy concerns.

4. Wrap narratives around the action and functionality

Exactly how did Lara Craft become a tomb raider? How does this impact what “you” can do in the game? The back stories on games are well thought out narratives that drive the design of characters, scenarios, dialogue, levels and more. When new versions of games are released, the storyline develops further and players continue on the journey. Stories put everything in context.

The site reveals its functionality through a conversation, which tells the story of the firm

The site reveals its functionality through a conversation, which tells the story of the firm

The narrative for a website might stem from a number of different ideas and constructs, including personas, how the site fits into the organization’s processes and business model, the company’s history, corporate values, and its brand attributes. More likely it will come from medium- to long-term communication messages already evident in offline marketing activities, especially television commercials. If the company advertises, then the company’s story is already out there.

Bjorn Borg clothing store tells 'heritage' stories as video montages and invites visitor stories too

Bjorn Borg clothing store tells “heritage” stories as video montages and invites visitor stories too

Characters, locations, and storylines can evolve online. In fact arriving at a site that doesn’t continue this story or resonate with what visitors have experienced elsewhere is jarring and disorienting. Site navigation, imagery, and messaging should tell a universal story to all visitors to the site, so that they all walk away knowing what this company stands for and what it’s about.

5. Build delightful transitions and animations

Design flourishes (or lack thereof) reveal a lot about brand and add a layer of quality that can be impressive. Games have pushed the technical and design boundaries of animation so that pretty much anything that can be imagined can be represented on the screen. The physics engines do the heavy lifting within the games themselves, but the designers have also labored over the animation and transitions for non-game screens.

All aspects of the Mercedes Benz AMG interactions- selections, deselections, transitions – have been given carefully considered behaviors

All aspects of the Mercedes Benz AMG interactions—selections, deselections, transitions—have been given carefully considered behaviors

With the emergence of Silverlight and Windows Presentation Foundation (WPF), the web is rapidly catching up with gaming technology. The challenge is to actually understand what the web is now capable of and dream up the designs to exploit it. For example, navigating through a video game menu is rarely a matter of point, click, see next screen. Every interaction with the non-game screens and in-game menus is an opportunity to reinforce a brand attribute, or pad out the world the player has entered, or let the user know they’re on a certain path. Every interaction.

Blue Moon Brewery makes the most of every click

Blue Moon Brewery makes the most of every click

6. Use loading screens to educate the user how to use the site better

There can be a lot of dead time playing a video game: loading, graduating to a new level, “dying,” cutscenes that relay the story and so on. Games make the most of this limbo by telling players more about the game. Hints, tips, factoids, instructions, and trivia are displayed while the player patiently waits for the fun to start. “Slow mo” scenes from previous games, spectacular gameplay sequences, acted scenes contributing to continuity and online player statistics—game designers are tapping their imaginations to come up with novel ways to make these loading screens not only palatable but valuable.

If you know the page that is loading, give the user a tip on how to use it, such as in Tony Hawk Proving Ground

If you know the page that is loading, give the user a tip on how to use it, such as in Tony Hawk Proving Ground

Online, users have the luxury of simply leaving a site if they have to spend too much time watching progress bars. Empower the user with something extra so that when the site or module finally loads they’re better prepared to use it effectively, better informed about the company, or at least amused.

7. Implement strong audio cues to provide feedback

Playing certain games with no sound is nigh impossible. You can’t hear things approaching, you’re not sure if your action was executed, you’re not sure where to go, you’re unclear about the results. Think of all the website usability tests you’ve witnessed where the participant is confused about whether their click registered with the site and whether something is happening. Further evidence of this confusion is the “only click once” message that some sites use to deter visitors from clicking again, when they think their action was not registered.

On the web, sound has been anathema. Websites that suddenly blare music at you during discreet workplace web surfing have destroyed the fun for all of us. But audio cues are common on computer operating systems and traditional applications. They’re such a simple, effective way to reinforce an action, alert you, or let you know whether something was successful or not.

Audio can add satisfaction by imitating real world sounds that we’re familiar with. The state of flow is supported because there is no need to translate the result. For example a falling two-note sound is instantly recognized as a negative result, whereas the cha-ching of a cash register is known to be a sign of money being exchanged.

On many clickable elements are indicated with an audio cue, with another sound to indicate when you have clicked and when a successful action is complete

On many clickable elements are indicated with an audio cue, with another sound to indicate when you have clicked and when a successful action is complete

Also, audio is another way to exercise brand muscle. Nothing quite lets a user know what your brand stands for than expressing it with a sonic branding device or giving it a literal voice. What sound would you expect to hear when visiting

8. Play with spatial cues

Flash, Silverlight, and WPF make working with spatial cues a more interesting proposition. Many games rely on recreating three dimensions so that a player can move through terrain or other environments. In fact, game design has been likened more to architecture than film-making (which is another popular comparison) because the designers need to signal to players that they should move from location A to location B.

Using 3D space on the web is easier to visualize now that Vista, Leopard, iPhones, and iPods have reimagined how items can be stacked, ordered, shuffled, zoomed in on, and previewed. The physicality that is innate with game playing is migrating to other digital technologies, such as the web, through touchscreens and gestures.

Adidas uses backgrounds and foregrounds forcefully to denote hierarchy

Adidas uses backgrounds and foregrounds forcefully to denote hierarchy

Designs using the “z space” are emerging, often targeting younger audiences who might more comfortably migrate their behaviors from other media to the web.

Nike's Jordan site features zoom controls to navigate the space

Nike’s Jordan site features zoom controls to navigate the space

Visitors are instructed to hold down mouse keys and drag, use mouse scrolls, or use keyboard and mouse combinations to move within all three axes. Website designers can now add “depth” to the design toolbox when considering hierarchy, prominence, information design and chronology, among other things. Any element closer to the user will be more prominent.

9. Sprinkle in a few surprising serendipitous moments

Serendipitous touches are the ones that you dream up in the heat of brainstorming and figure your client is never going to go for. They’re a little bit clever, or silly, or over the top, and that’s what makes them memorable and essential. Those “extra mile” details are the ones that get a site talked about and bookmarked. They’re the things that fans savor and brand advocates “get.” For example, when your character dies in The Sims 2, the Grim Reaper appears and looks over some paperwork potentially to do with the character’s soul. Who knows? It’s totally ridiculous, and the first-time reaction is likely to be laughter, even though the player is about to start the game all over again.

The Sims 2 injects unexpected humor into what is actually an annoying situation

The Sims 2 injects unexpected humor into what is actually an annoying situation’s multilingual greetings are often cited as a lovely unexpected gesture. The designers didn’t have to do it, but they did, and it is appreciated. How many other sites welcome you and you ignore it entirely? Is this an approach recommended for every brand? Such a gesture doesn’t imply childishness: rather, it acknowledges that a human is visiting this website. There’s usually an attribute within every brand that is related to being human: this is the attribute to exploit. Think about the emotional response you’d like to get from your website visitor and find one or two ways to elicit it in a playful way.

Steadyhand's CEO checks his phone while he waits for the user to interact with him, like a game character waiting for a player to start

Steadyhand’s CEO checks his phone while he waits for the user to interact with him, like a game character waiting for a player to start

Did the design stage just get longer?

Incorporating some of these ideas into the design phase of a project need not take extra time. Applying “game think” as a filter across activities you’re already doing will get you a lot of the way there.

Game designers adopt different methodologies, produce different deliverables, and follow different processes than website designers. It doesn’t make sense to take on many of these because ultimately you are creating different products. However, the fact that you’re working with the same medium—people access the internet through gaming consoles and play games on computers—should cause you to pause and consider how to make better use of the channel.

Energize a site and engage more of the user’s senses with animations, transitions, 3D, and audio. Then let the user bond with the site by having the site tell a story while incorporating their preferences, so that there is more “conversation” and less “messaging.” Encourage the user to explore and become an expert on the site through a choreographed dance of challenge, education, and reward. Finally, delight your visitors and get them hooked through unexpected, frivolous, and unique touches that your brand can own.

The payoff for using video game design elements is a memorable, distinguished, high-impact user experience that brings a brand to life, increases loyalty, and reaches out to new customers.

Your next step? Go play some video games and get inspired.


Enhancing Dashboard Value and User Experience

by:   |  Posted on

This article is the fifth in a series sharing a design framework for dashboards and portals.

Part 1 of this series, The Challenge of Dashboards and Portals, discussed the difficulties of creating effective information architectures for portals, dashboards and tile-based information environments using only flat portlets, and introduced the idea of a system of standardized building blocks that can effectively support growth in content, functionality, and users over time. In enterprise and other large scale social settings, using such standardized components allows for the creation of a library of tiles that can be shared across communities of users.

Part 2 of the series, Introduction to the Building Blocks, outlined the design principles underlying the building block system and the simple guidelines for combining blocks together to create any type of tile-based environment.

Part 3 of the series, Building Block Definitions (Containers), described the Container components of the Building Block system in detail.

Part 4 of the series, Connectors for Dashboards and Portals, described the Connector components of the Building Block system in detail.

In Part 5, we look at ways to enhance the long-term value and user experience quality of portals created with the building blocks by encouraging portability and natural patterns of dialog and interaction around aggregated content.

For the reader’s convenience, this article is divided into the following sections:

A Portal Design Vision: Two-Way Experiences



Presentation Standards and Recommendations

Manage Functionality By Creating Groups

Enterprise 2.0 and the Social Portal

A Portal Design Vision: Two-Way Experiences

Portals gather and present content from a wide variety of sources, making the assembled items and streams more valuable for users by reducing the costs of content discovery and acquisition. By placing diverse content into close proximity, specialized forms of portals, such as the dashboard, support knowledge workers in creative and interpretive activities including synthesis, strategy formulation, decision making, collaboration, knowledge production, and multi-dimensional analysis.

At heart, however, aggregation is a one-way flow. In the aggregation model common to many portals, content is collected, organized, and perhaps distributed for use elsewhere, but nothing returns via the same channels. Savvy users quickly see that the greatest value of aggregative experiences and tools lies in their potential contributions to two-way flows. They understand that experiences capable of engaging direct and indirect audiences transform portal and dashboard content into a broadly useful resource for communities of much greater scope and impact. Further, business staff and IT users comfortable in the new world of Enterprise 2.0, DIY / mashups and shadow IT now often create their own information technology solutions, assembling services and tools from many sources in new ways that meet their individual needs.

Accordingly, portal designers should create experiences that support increased discussion, conversation, dialog and interaction, and allow for the potential value of remixing content in innovative ways. We might summarize a broad design vision for two-way portals that synthesizes these audiences, environmental factors and imperatives as follows:

  • Provide users with rich contextual information about the origin and nature of dashboard or portal content; context is crucial, especially in a fragmented and rapidly moving enterprise environment.
  • Improve the quality and consistency of the user experience of aggregated content.
  • Improve the portability of content, making it useful outside the boundaries of the dashboard.
  • Allow dashboard users to take advantage of other tools available outside the immediate boundaries of the portal.

Operatively, this means providing two-way channels that make it easy to share content with others or even "take it with you" in some fashion. The building block framework is ideal as a robust foundation for the many kinds of tools and functionality – participatory, social, collaborative – that support the design vision of two-way flows within and outside portal boundaries.


Based on this vision and my experience with the long-term evolution and usage of many portals, I recommend five ways to enhance two-way capabilities and the overall quality of user experiences designed with the building blocks framework:

  1. Define standardized Convenience functionality that could apply to all blocks. This will provide a baseline set of common capabilities for individual blocks such as export of Container content and printing.
  2. Define Utility functionality offered at the Dashboard or Dashboard Suite level. This captures common productivity capabilities for knowledge workers, linking the dashboard to other enterprise resources such as calendars and document repositories.
  3. Define common metadata attributes for all Container blocks, to support administration and management needs.
  4. Define presentation standards that appropriately balance flexibility with consistency, both within Container blocks and across the user experience.
  5. Define user roles and types of blocks or content to allow quick management of items and functionality in groups.

As with the rest of the building blocks design framework, these recommendations are deliberately neutral in terms of business components and processes, technology platforms, and development frameworks (RUBY, AIR, Silverlight, etc.), and design methods. They describe capabilities and / or functionality that design, business, and technology decision-makers can rely on as a common language when deciding together what a given portal or dashboard must accomplish, and how it should do so. (Besides allowing extension and reuse of designs, neutrality is consistent with the principles of Openness, Independence, Layering, and Portability that run throughout the building blocks system.)

Convenience Functionality

Convenience functions make it easier for users to work with the content of individual Container blocks. Good examples of Convenience functionality include printing the contents of Containers for use outside the Dashboard, or subscribing to an RSS feed that syndicates a snapshot of the contents of a block. Convenience functionality is associated with a single Container, but is not part of the content of the Container.

This collection is a suggested set of Convenience functionality meant to help establish a baseline that you can adapt to the particular needs of your users. Assign Convenience functions to individual blocks as appropriate for circumstances and as endorsed by users, business sponsors, and technologists. Some of these features make sense at all levels of the block hierarchy, and some do not (how would one print an entire Dashboard in a way that is useful or readable?).

The collection is broken into five groups:

  1. Understanding Content Sources and Context
  2. Making Dashboard Content Portable
  3. Controlling the User Experience
  4. Staying Aware of Changes / Subscriptions
  5. Social and Collaborative Tools

The illustration below shows Convenience functionality associated with a Tile.


Figure 1: Tile Convenience Functionality (By Group)

Group 1: Understanding Content Sources and Context

Preserving accurate indication for the source of each block’s content is critical for the effective use of heterogeneous offerings. Dashboards that syndicate Tiles from a library of shared assets may contain conflicting information from different sources, so users must have an indication of the origin and context of each block.  (Wine connoisseurs use the term "terroir.")

Show detailed source information for a block. For business intelligence and data content, the source information commonly includes the origin of the displayed data in terms of operating unit, internal or external system (from partners or licensed feeds), its status (draft, partial, production, audited, etc.), the time and date stamp of the data displayed, the update or refresh cycle, and the time and date of the next expected refresh.

For widgets, web-based applications, and content that takes the form of transactional functionality such as productivity or self-service applications delivered via an intranet or web-service, source information commonly includes the originating system or application, its operating status (up, down, relevant error messages), and identifying information about the group, operator, or vendor providing the functionality.

Send email to source system owner / data owner. This allows portal users to directly contact the "owners" of a content source. In enterprises with large numbers of internal data and functionality sources that frequently contradict or qualify one another, the ability to ask clarifying questions and obtain additional or alternative content can be critical to making effective use of the content presented within the Dashboard.

Show performance data and metrics. If standard performance data and measurements such as key performance indicators (KPIs) or balanced score cards (which have risen and then fallen out of favor in the past five years) affect or determine the contents of a block, presenting them readily at hand is good practice. 

Such performance indicators might take the form of KPIs or other formally endorsed metrics, and require:

  • Showing displayed KPIs
  • Showing supporting KPIs (rolled up or included in the summary KPI on display)
  • Showing related KPIs (parallels by process, geography, industry, customer, etc.)
  • Showing dependent KPIs (to illuminate any "downstream" impact)

For performance indicators defined by number and name—perhaps they are recognized and used across the enterprise or operating unit as a comparative baseline, or for several different measurement and assessment goals—provide this important contextual information as well.

Show related documents or assets. Whether automated via sophisticated information management solutions or collected by hand, related documents and assets increase the range and applicability of dashboard content. Bear in mind that less is often more in a world drowning in electronic assets and information.

Show source reports or assets. If the contents of a block are based on an existing report, then providing direct access to that item—bypassing document repositories, collaboration spaces, or file shares, which often have terrible user experiences and searching functions—can be very valuable for dashboard users.

Show related blocks. In large portals or Dashboards that aggregate Tiles from many different sources—perhaps several Tile Libraries—providing navigable links to related Pages or Sections of the Dashboard increases the density and quality of the connections between pieces of content. Whether mapped by hand or automated, these links can further enhance the value of the dashboard by exposing new types of relationships between informational and functional content not commonly placed in proximity in source environments.

Search for related items and assets. If individual Container blocks carry attached metadata, or metadata is available from the contents of the block, search integration could take the form of pre-generated queries using terms from local or enterprise vocabularies, directed against specifically identified data stores.

Group 2: Making Dashboard Content Portable

These capabilities enhance the portability of content, supporting the two-way communication and social flows that make content so useful outside the boundaries of the dashboard. The items below include several of the most useful and commonly requested portability measures:

  • Print contents of block
  • Email contents of block (HTML / text)
  • Email a link to block
  • Create a .pdf of block contents
  • Create a screenshot / image of block contents
  • Download contents of block (choose format)
  • Save data used in block (choose format)
  • Download source report (choose format)

Group 3: Controlling the User Experience

Individual blocks may offer users the ability to change their on-screen layout, placement, or stacking order, collapse them to smaller sizes, or possibly activate or deactivate them entirely. If designers have defined standard display states for Containers (see Presentation Standards and Recommendations below), blocks may also allow users to customize the display state:

  • Change layout or position of block on screen
  • Collapse / minimize or expand block to full size
  • Change display state of block
  • Deactivate / shut off or activate / turn on block for display

Group 4: Staying Aware of Changes / Subscriptions

Aggregation models lower information discovery and acquisition costs, but do not obviate the costs of re-finding items, and do little to help users manage flows and streams of content that change frequently. Many portals and dashboards aim to enhance users’ awareness and make monitoring the status of complex organizations and processes simpler and easier. This group includes functionality allowing users to subscribe to content through delivery channels such as RSS or to receive notices when dashboard content changes:

  • Send email on block change (it is optional to include contents)
  • Subscribe to RSS feed of block changes (it is optional to include contents)
  • Subscribe to SMS message on block change
  • Send portal Page on block change

Group 5: Social and Collaborative Tools

This group includes social features and functions that engage colleagues and others using social mechanisms. Introducing explicitly social mechanisms and capabilities into one-way dashboard and portal experiences can dramatically enhance the value and impact of dashboard content.

When designed properly and supported by adoption and usage incentives, social mechanisms can encourage rapid but nuanced and sophisticated interpretation of complex events in large distributed organizations. Social functions help preserve the insight and perspective of a diverse community of users, an intangible appreciated by many global enterprises.

Annotate block. Annotation allows contributors to add an interpretation or story to the contents of a block. Annotation is typically preserved when blocks are syndicated or shared because annotations come from the same source as the block content.

Comment on block. Commentators can provide a locally useful interpretation for a block originating from elsewhere. Comments are not always portable, or packaged with a block, as they do not necessarily originate from the same context, and their relevance will vary.

Tag blocks. Tagging with either open or predetermined tags can be very useful for discovering unrecognized audiences or purposes for block content, and quickly identifying patterns in usage that span organizational boundaries, functional roles, or social hierarchies.

Share / recommend blocks to person. Combined with presence features, sharing can speed decision-making and the growth of consensus.

Publish analysis / interpretation of block content. Analysis is a more thorough version of annotation and commenting, which could include footnoting, citations, and other scholarly mechanisms.

Publish contents of block. Publishing the contents of a block to a team or enterprise wiki, blog, collaboration site, or common destination can serve as a communication vehicle, and lower the opportunity costs of contributing to social or collaborative tools.

Rate block. Rating blocks and the ability to designate favorites is a good way to obtain quick feedback on the design / content of blocks across diverse sets of users. In environments where users can design and contribute blocks directly to a Tile Library, ratings allow collective assessment of these contributions.

Send contents of block to person (with comment). Sending the contents of a block – with or without accompanying commentary – to colleagues can increase the speed with which groups or teams reach common points of view.  This can also provide a useful shortcut to formal processes for sharing and understanding content when time is important, or individual action is sufficient.

Send link to block to person (with comment). Sending a link to a block – with or without accompanying commentary – to colleagues can increase the speed with which groups or teams reach common points of view.  This can also provide a useful shortcut to formal processes for sharing and understanding content when time is important, or individual action is sufficient.

Commenting and annotation, coupled with sharing the content that inspired the dialog as a complete package, were the most requested social capabilities among users of many of the large enterprise dashboards I have worked on.

Stacking Blocks

Some combinations of Convenience functionality will make more sense than others, depending on the contents of blocks, their purpose within the larger user experience, and the size of the blocks in the stacking hierarchy (outlined in Part 2). Figure 2 illustrates a Page composed of several sizes of Containers, each offering a distinct combination of Convenience functionality.


Figure 2: Combinations of Functionality

Convenience…or Connector Component?

Several of the Connector components (described in Part 4 of this series) – especially the Control Bar and the Geography Selector – began life as examples of Convenience functionality. Over the course of many design projects, these pieces were used so frequently that their forms standardized, and they merited independent recognition as defined building blocks. (The change is a bit like receiving a promotion.)

With sustained use of the blocks framework, it’s likely that designers will identify similar forms of Convenience functionality that deserve identification as formal building blocks, which can then be put into the library of reusable design assets. This is wholly consistent with the extensible nature of the blocks system, and I encourage you to share these extensions!

Utility Functionality

Utility functionality enhances the value of content by offering enterprise capabilities such as calendars, intranet or enterprise searching, and colleague directories, within the portal or dashboard setting. In practice, Utility functionality offers direct access to a mixed set of enterprise resources and applications commonly available outside portal boundaries in a stand-alone fashion (e.g. in MS Outlook for calendaring).

Common Utility functions include:

  • Team or colleague directories
  • Dashboard, intranet or enterprise searching
  • Dashboard personalization and customization
  • Calendars (individual, group, enterprise)
  • Alerting
  • Instant messaging
  • Corporate blogs and wikis
  • Licensed news and information feeds
  • RSS aggregators
  • Attention streams
  • Collaboration spaces and team sites
  • Profile management
  • Document repositories
  • Mapping and geolocation tools
  • Business intelligence tools
  • Supply Chain Management (SCM), Enterprise Resource Planning (ERP), and Customer Relationship Management (CRM) solutions

My Experience or Yours?

One important question designers must answer is where and how portal users will work with Utility functionality: within the portal experience itself or within the user experience of the originating tool? Or as a hybrid of these approaches?

Enterprise productivity tools and large software packages such as CRM and ERP solutions often provide consumable services via Service-Oriented Architecture (SOA) or Application Programming Interfaces (APIs), as well as their own user experiences (though they may be terrible). The needs and goals of users for your portal may clearly indicate that the best presentation of Utility functionality syndicated from elsewhere is to decompose the original experiences and then integrate these capabilities into your local portal user experience. Enterprise tools often come with design and administration teams dedicated to supporting them, teams which represent significant investments in spending and credibility. Carefully consider the wider political ramifications of local design decisions that affect branding and ownership indicators for syndicated Utility functionality.


Figure 3: Local vs. Source Experiences


In portals and dashboards, aggregation often obscures origins, and content may appear far outside the boundaries of its original context and audiences. The Convenience and Utility functionality suggested above is generally much easier to implement and manage with the assistance of metadata that addresses the dashboard or portal environment.

The attributes suggested here establish a starting set of metadata for Container blocks managed locally, or as part of a Tile Library syndicated across an enterprise. The goal of this initial collection is to meet common administrative and descriptive needs, and establish a baseline for future integration metadata needs. These attributes could be populated with carefully chosen values from a series of managed vocabularies or other metadata structures, or socially applied metadata provided by users as tags, keywords, facets, etc.

Administrative Attributes:

  • Security / access level needed for content
  • System / context of origin for content
  • System / context of origin contact
  • Data lifecycle / refresh cycle for content
  • Most recent refresh time-date
  • Effective date of data
  • Block version #
  • Block release date

 Structural Attributes:

  • Container blocks stacked in this block
  • Crosswalk Connectors present within block
  • Contextual Crosswalk Connectors present within block

 Descriptive Attributes:

  • Title
  • Subtitle
  • Subject
  • Audience
  • Format
  • Displayed KPIs (defined by number / name)
  • Supporting KPIs (defined by number / name)
  • Related KPIs (defined by number / name)
  • Related Documents / Assets
  • Source Report / Assets
  • Related Blocks
  • Location

Metadata Standards

The unique needs and organizational context that drive the design of many portals often necessitates the creation of custom metadata for each Tile Library or pool of assets. However, publicly available metadata standards could serve as the basis for dashboard metadata. Dublin Core, with a firm grounding in the management of published assets, offers one useful starting point. Depending on the industry and domain for the users of the dashboard, system-level integration with enterprise vocabularies or public dictionaries may be appropriate. Enterprise taxonomies and ontologies, as well as metadata repositories or registries, could supply many of the metadata attributes and values applied to building blocks.

Presentation Standards and Recommendations

Visual Design and Style Guidelines, Page Layouts, Grid Systems

The neutrality of the building blocks framework allows architects and designers tremendous flexibility in defining the user experience of a dashboard or portal. The system does not specify any rules for laying out Pages, defining grid systems, or applying design styles or guidelines. Responsibility for these design questions should devolve to the local level and context; the architects and designers working on a given user experience must make these critical decisions.

Standards for Containers and Connectors. One of the paramount goals for the building blocks system is to minimize the presence of unneeded user experience elements (no excess chrome for designers to polish!), and maintain the primacy of the content over all secondary parts of the dashboard experience. Even so, aspects of the building blocks themselves will be a direct part of the user experience. Thus setting and maintaining standards for those aspects of Containers and connectors that are part of the user experience is essential.

The many renderings and examples of Tiles and other components seen throughout this series of articles show a common set of standards that covers:

  • Location and relationship of Tile components (Tile Body, Tile Header, Tile Footer)
  • Placement of Convenience functionality
  • Placement of Utility functionality
  • Treatment of Connector components
  • Boundary indicators for Tiles and Containers
  • Boundary indicators for mixed content (block and free-form)

Figure 4 shows one set of standards created for the Container and Connector components of an enterprise dashboard.


Figure 4: Presentation Standards for Containers and Connectors

This is a starting set of elements that often require design standards. Architects and designers working with the building blocks will need to decide which block elements will be part of the user experience, and create appropriate standards. (If using lightweight and modular user experience development approaches, relying on standards and structured components, it’s possible to effect quick and easy design iteration and updates.)

Standards For Content Within Containers. Setting standards and defining best practices for layout, grid systems, and visual and information design for the contents of Container blocks will increase the perceived value of the dashboard or portal. In the long term, offering users a consistent and easy-to-understand visual language throughout the user experience helps brand and identify Tile-based assets that might be syndicated or shared widely. A strong and recognized brand reflects well on its originators. Figure 5 shows example standards for chart content in Container blocks.


Figure 5: Presentation Standards for Chart Content in Container Blocks

Standards For Mixed Building Block and Freeform Content. Setting standards for layouts, grid systems, and information design for the freeform content that appears mixed with or between Containers makes sense when the context is known. When the eventual context of use is unknown, decisions on presentation standards should devolve to those designers responsible for managing the local user experiences.

Container States

The core principles of openness and portability that run throughout the building blocks framework mean the exact context of use and display setting for any given block is difficult for designers to predict. Defining a few (three or four at the most) different but standardized presentation states for Containers in a Tile Library can help address the expected range of situations and user experiences from the beginning, rather than on an ad-hoc basis. This approach is much cheaper over the long-term, when considered for the entire pool of managed Tiles or assets.

Since the on-screen size of any element of the user experience is often a direct proxy for its anticipated value and the amount of attention designers expect it to receive, each standard display state should offer a different combination of more or less content, tuned to an expected context. Using a combination of business rules, presentation logic, and user preferences, these different display states may be invoked manually (as with Convenience functionality) or automatically (based on the display agent or surrounding Containers), allowing adjustment to a wide range of user experience needs and settings. In practice, states are most commonly offered for Tiles and Tile Groups, but could apply to the larger Containers with greater stacking sizes, such as Views, Pages, and Sections.

One of the most commonly used approaches is to assume that a Container will appear most often in a baseline or normal state in any user experience, and that all other states cover a sliding scale of display choices ranging from the greatest possible amount of content to the least. The four states described below represent gradations along this continuum.

Normal state is the customary presentation / display for a Container, the one users encounter most often.

Comprehensive state is the most inclusive state of a Container, offering a complete set of the contents, as well as all available reference and related information or Containers, and any socially generated content such as comments, annotations, and collective analyses. Figure 6 shows a Tile in comprehensive display state.


Figure 6: Tile: Comprehensive Display

Summary state condenses the block’s contents to the most essential items, for example showing a single chart or measurement. The summary state hides any reference and related information, and places any socially generated content such as annotation or comments in the background of the information landscape. Figure 7 shows a Tile in summary display state.


Figure 7: Tile: Summary Display

Snapshot state is the most compact form of a Container block, offering a thumbnail that might include only the block’s title and a single highly compressed metric or sparkline. Snapshot states often represent the Container in discovery and administrative settings, such as in search experiences, in catalogs of assets in a Tile Library, or in dashboard management interfaces. Figure 8 shows a Tile in snapshot display state.


Figure 8: Tile: Snapshot Display

Convenience and Utility Functionality

New platforms such as Adobe Integrated Runtime (AIR) and Microsoft Silverlight, and the freedom afforded by Asynchronous Javascript and XML (AJAX) and Rich Internet Application (RIA) based experiences in general, offer too many possible display and interaction behaviors to discuss in detail here.

Accordingly, I suggest designers keep the following principles in mind when defining the interactions and presentation of Convenience and Utility functionality:

  • Convenience functionality is meant to improve the value and experience of working with individual blocks.
  • Utility functionality addresses the value and experience of the portal as a whole.
  • Convenience functionality is less important than the content it enhances.
  • Convenience functionality is always available, but may be in the background.
  • Utility functionality is always available, and is generally in the background.
  • Convenience functionality does not replace Utility functionality, though some capabilities may overlap.
  • Usability and user experience best practices strongly recommend placing Convenience functionality in association with individual blocks.
  • Usability and user experience best practices strongly recommend presenting Utility functionality in a way that does not associate it with individual Container blocks.

Manage Functionality By Creating Groups

Most users will not need the full set of Convenience and Utility functionality at all times and across all Tiles and types of Container blocks. Usage contexts, security factors, or content formats often mean smaller subsets of functionality offer the greatest benefits to users. To keep the user experience free from the visual and cognitive clutter of un-needed functionality, and to make management easier, I recommend designers define groups of functionality, users, and content. Create groups during the design process, so these constructs are available for administrative use as soon as the portal is active and available to users.

Other recommendations include:

  • Define bundles of Convenience and Utility functionality appropriate for different operating units, business roles and titles, or access levels of users.
  • Allow individual users to select from bundles of Convenience and Utility functionality. Customization commonly appears in a profile management area.
  • Create roles or personas for dashboard users based on patterns in content usage, and match roles with relevant and appropriate functionality bundles.
  • Define types of user accounts based on personas, or usage patterns and manage functionality at the level of account type.
  • Define types of Tiles or Containers based on content (informational, functional, transactional, collaborative, etc.). Apply bundles of Convenience functionality to all the Tiles or Containers of a given type.
  • Define standard levels of access for social features and functionality based on sliding scales of participation or contribution: read, rate, comment, annotate, write, edit, etc. Manage access to all social functions using these pre-defined standard levels.

Larger portals may warrant the creation of a dedicated administrative interface. The building blocks make it easy to define an administrative console accessible via a Page or Section apparent only to administrators.

Enterprise 2.0 and the Social Portal

Portals and dashboards that augment one-way aggregation of information with Convenience and Utility functionality can offer diverse and valuable content to savyy users – customers who expect Enterprise 2.0, Web 2.0, and social software capabilities from all their experiences and tools. As these recommendations demonstrate, the building blocks can serve as an effective design framework for portals that serve as two-way destinations.

Many of these recommended Convenience and Utility capabilities now come "out of the box" in portal or dashboard platforms, and the interactions that make them available to users follow standard behaviors in the resulting user experiences.When first identified as valuable for users (almost five years ago), these capabilities almost universally required teams to invest considerable amounts of time and money into custom design, development, and integration efforts. Thankfully, that is no longer the case.

Part Six of this series will explore how the Building Blocks framework solved recurring problems of growth and change for a series of business intelligence and enterprise application portals.  We will review the evolution of a suite of enterprise portals constructed for users in different countries, operating units, and managerial levels of a major global corporation.