This is the final version of a control dashboard for electricity supply I did the visual implementation for. The screen is for operators to look up customer data and is intended to be as unobtrusive as possible, something you could consult perhaps 100 times in a working day.  Calm layout, clear limits to data fields, feedback given to actions taken and high visibility of controls (no hidden panels etc.). Multiple iterations of this screen were generated in response to detailed user feedback and input from a small team comprising information architect, interaction designer and me on UI. The end result is visually lean, almost looks like a wireframe. The interesting thing about the process is that in some senses it was reversed.


Previous version. Main difference is that we’ve lost the colours in horizontal bar chart. This is because the potential number of energy types is unknown and could cover more colours than we can usefully use. Also it tends to give the energy type levels undue prominence in the screen drawing the eye away from equally important elements. Meter type for example is more commonly used and a more multi dimensional dataset. Also lower panel is narrower in this layout giving a false impression of visual submission to upper panel. To my mind the horizontal divisions are perhaps a bit laboured.


Again two distinct colour themes are used to describe energy and meter types. The doughnut pie chart fell victim to well known objections in usability for this kind of proportional display; they can often give false impressions of precision. Although in this case I would argue that because values are rounded to nearest integer that misconception is avoided. Another problem here is the need for a legend to interpret chart colours. Horizontal bar chart certainly gives a more instantly readable hierarchy of values compared to doughnut pie chart.


Not counting some early diagram-like versions, this is what I started with. I’ve tried to give a bit of depth to the page with drop shadows and the like and some bright colour treatments on the charts. Top navigation is confused and it’s not too clear where you are in the data structure and what you should do. Part of what I discovered on this job is my own tendency to sometimes hold on to design ideas for too long. I held out for the circular charts as a visual contrast to all that rectilinearity right up until the last moment. Sliders and scrollers are not prominent enough here although I would say the whole project is done  in a relatively old-school interactive environment, panels, divisions, drop downs, check boxes, zebra striped lists etc.

About johnfass

bringing you curiosities, rarities and marvels wherever we find them

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: