The set up

In October 2007, GE Energy signed a memorandum to deploy advanced energy delivery and metering technologies that will give residential and industrial consumers greater control over their energy usage and costs.  November 2007, Google announces investment in energy technologies marking the tipping point of a new era on our energy experience.  Just this month, Google revealed the iceberg tip of their Smart Meter consumer solution, harnessing the power of their analytic tool set, Google has settled in the keystone position of the smart meter user experience.

Earlier this month, Limina had the privilege to compete against leading technology consulting firms for a contract to research, design, deploy and test a consumer facing portal that would empower consumers to make the smart consumption decisions and, in the future, play a key role in consumption based home automation.

Much of how this future scenario is already in the works as demonstrated by LucidDesignGroup’s Building Dashboard product for schools, companies and homes.  With this dashboard you will, not only monitor and your building’s usage, but chart it against your usage history and, if you have on-site renewable power generation such as wind and solar, you can make smart decisions on when to sell back to the grid to maximize your return.

This display panel was featured in a Michelle Kaughman home on an Episode of NextWorld on the Science Channel, where she discussed live scenarios for home and energy automation with the dashboard as the centerpiece.

The Challenge:

1) Getting the energy providers, homes and consumers ready: In October 2008 the Government in the UK announced a mandate to have every household outfitted with gas and electricity smart meters by the year 2020.  On March 19 2009, www.whitehouse.gov posted the recovery act with an $11billion dollar investment in a smart-grid.  While there are no mandates, one can predict action is imminent.

2) Ubiquity: Google is about as ubiquitous of a technology service provider as you can get, their interest and investment in this space is a key indicator that this challenge will be met.  LucidDesignGroup’s Dashboard has thought forward to live case for interfacing with consumers in an easy to use way making the information and more importantly calls to action accessible and elegant.

Limina is always looking forward to turnkey technological and experience innovations in any industry, but has a special interest in contributing to the global efforts to reduce energy waste and build awareness in renewable resources.

-Jon Fukuda

Submit your RFP’s to services at limina-ao dot com

At Limina we spend a lot of time working on complex information display where users are making critical decisions based off of key content, often displayed in tables.  Therefore, it is very important that the formatting of tables be as consistent and clear as possible. Tables should clarify and enhance the information they present, not obscure it.

I like to think that most of us involved in GUI design (be it on the interface design or development end) have either read Tufte’s books or heard about his useful guidelines for laying out and designing tabular data. Yet, one of the most common issues we run into when performing Expert UI Evaluations is poor table design.

Googling around the web I found few sites discussing the topic of table design other than those providing libraries of CSS table designs; however in many cases these reference libraries actually add to the proliferation of bad table design. Developers get excited when they figure out a way to code up a new table style or interaction method and post it for others to use. But there is little discussion on where and when (if ever) these solutions are appropriate. Remember, just because you can doesn’t mean you should.

Here are the three areas where we commonly see the most UI design and usability mistakes and some guidelines that should help you create more useful and usable tables:

Design Style:

Help users focus on what they can learn from table data; the data should stand out, not the design of the table.

Minimize visual clutter and avoid over styling

• Do you really need horizontal and vertical grid lines and an alternating row color?
• I can’t think of any good reason to ever use a patterned background

Avoid over use of color

• A basic table shell does not need more than 2 or 3 colors to differentiate column headers, a content/grid and a selection highlight
• When you use colors use them consistently. Users need to know they can count on the visual cues you provide them so they can act efficiently
• When using an alternating line color keep the contrast to a minimum and use soft colors that are easy on the eye
• Don’t make the alternating line color too similar to your line item selection color

Content alignment (left, right, center)

• Know your content alignment rules. Typically content is aligned left. But numerical content can only be revealing if the column is appropriately aligned and left alignment is not usually the best choice.


SOURCE: http://blog.editage.com/?q=Aligning-Columns

Use cell padding and spacing – cramped table cells are much harder to read, make sure you provide enough space to allow users to easily scan content

Interaction style:

Unless explicitly called out, a user will typically need to spend time “discovering” interaction features.  In the case of tables, there are a number of visual cues you can provide to direct their interactions.

• Define a set of table styles that lets users know how they can interact with table content; read-only, editable, selectable, etc
• Apply the styles consistently
• Consider revealing controls on-hover to decrease visual clutter for scanning, but enable the table for interaction when necessary
• When designing complex tables that have mixed content types (e.g. read only and editable and/or selectable) provide a visual style that illustrates these key differences
• Clearly indicate which columns are sortable and which is the default
• Indicate whether users can resize columns and rows
• Consider using mouse over text to display lengthy cell data when truncating
• Avoid using fixed tables inside panes or windows that horizontally resize. The reason for this is because it will be easy for users to accidentally lose some columns by resizing a table-containing pane to be horizontally smaller

Table usage:

Is a table the best format for displaying your content? Sometimes viewing data in a tabular format doesn’t help your users see trends in the data. Ask yourself if the information would be better displayed using a simple (or sometimes complex) visualization. Or, consider providing both a tabular and visualization view of the content.

This list of considerations is not meant to be the definitive guide for good table design but it should help you avoid the most obvious pitfalls and put you on the right track.

-Maria

Here’s an example of when form and function are held to their highest ideals.    The following images are from GridPlane from their recent collaboration with Instrument on a project with Google.

Read more at: http://www.gridplane.com/#/projects/all/data-vis

It’s always important to recognize quality work when you see it.  Big props to GridPlane and Instrument.

Hat tip: Jeff Wong.

-Jon