Michael Gaigg: Über UI/UX Design


Proposing: Spatial Dashboard

Posted by Michael Gaigg

Dashboards are everywhere, they can be found in business apps, management information systems, administration tools. They all have the following in common, they show summaries, key trends, comparisons, and exceptions. Usually all of above relate to key performance indicators or to derived (rolled up) data.

The "traditional" Dashboard

Traditional Dashboard (published by directionsmag)

Traditional Dashboard (published by directionsmag)

In the spatial space the data is rolled up to geographical (mostly political) units like continents, countries, or states and therefore provide a graphical presentation of the current status (temporal) in relation to its geographical location. This is typically displayed as a thematic map side by side with summaries, charts, gauges, graphics, or tables.

While this approach is completely valid its biggest weakness is the disconnect of visual perception to visual presentation of information, i.e. the intent of communicating geographical information isn't clear or at a minimum ambiguous. How do the data charts relate to the data shown on the map?

The proposed "new" Dashboard

that outlines considerations about your target audience, domain, data, and visuals to be used.

I hope this article inspired you so please let me know what you think and anything else that comes to mind after reading this article.


ArcGIS Silverlight App: World Bank Data Mapper

Posted by Michael Gaigg

World Bank Data Mapper

World Bank Data Mapper

The World Bank Data Mapper is the latest mapping application published by the Esri Applications Prototype Lab (thanks Richie).

The app is built using Esri's ArcGIS API for Microsoft Silverlight and the recently published (free) web API of the World Bank that provides access to up to 50 years of economic, financial and health data.

Besides mastering some technical challenges (missing cross-domain access file, amount of web requests) the map viewer looks sharp and straight forward without the usual template-related overkill of functionality - great job visualizing all this economic data. Let's see which other - maybe analytical? - mapping tools will follow...

Oh, of course, have a look at the working app and download the full source if you are interested to see how the pros did it.


Redundancy is NOT bad!

Posted by Michael Gaigg

Traffic light hell

Traffic light hell

The original motivation for this article stems from a recent discussion with a customer who argued that UI elements must not be redundant, i.e. there must not be two links on any single page pointing to the same target.

His argument was that the link to the contact form - which was embedded in the content - already exists in the header, thus replicating the other link.

To me it seemed clear that this "redundancy is bad" theorem doesn't make sense. But how could I argue the opposite?

Be aware of the "Rule"

Over the time I've seen many so-called "rules" appear, most of them are really hard to counter and battle or even detect in the first place. Remember the "Everything-needs-to-be-reached-within-three-clicks" rule? Says who? Why? So the user can reach any target without dropping off? It's not about the amount, it's about the motivation to get there, it's like a bicyclist that needs more strokes uphill but still has enough motivation to get there.

I call those rules Lazy-Designer rule, or should I say, don't know better designer?

What is Redundancy?

Redundancy is the amount of information used to transmit a message minus the amount of information of the actual message. One might call this "wasted space" or "overhead".

Unwanted Redundancy

In information theory the amount of information is described in number of bits and data compression is used to reduce or eliminate unwanted redundancy.

Desired Redundancy

But communication over noisy channels with limited capacity pose possibilities of data loss and that's why checksums are added for the purpose of error detection.

Error Detection

Simply put, the basis of communication is sending and receiving a message from a sender over a channel to a recipient. Error detection is the detection of errors caused by noise or other impairments during transmission from the transmitter to the receiver.

Error Correction

Error correction is the detection of errors and reconstruction of the original data. This reconstruction can happen in either of two ways:

  • Automatic repeat request (ARQ), sometimes also referred to as backward error correction, basically a request for retransmission of data until the correct receipt can be verified.
  • Forward error correction (FEC), where the additional data (redundant data) that was added is used by the receiver to reconstruct the original information.

Translation into UI Design

The objective of user interface design (=sender) is to communicate a message via the internet (=channel) to the user (=recipient).

Importance of the Message

Without going into details of quantity (information theory and entropy) or quality (importance of a message) it can be said in general that the better message (=content) follows the lesser is more and more precise is better recommendations.

Methods of Error Detection

But how can one assure that the message has actually arrived? That the user found what the designer has intended to present? Or in other words, how can I (=designer) detect that a user has NOT received the message (=error detection) and what can be done to correct (=error correction) it?

  • Traffic Log Analysis can help finding patterns in user behavior purely based on click-through rates and times.
  • User Testing helps finding qualitative answers.
  • A/B Tests compare alternative design choices and their effectiveness.

Methods of Error Correction

More important is how the UI can handle errors in data reception, i.e. the user "didn't get it".

  • ARQ is almost impossible to implement. How would I know that the user missed our message? Maybe he/she simply wasn't interested (e.g. in clicking the 'contact us' link).
  • FEC on the other hand seems to be a real alternative. Adding redundancy may help the recipient to overcome the missed message and despite having noise (ads, other UI elements, etc.) being able to continue the task in the most likely way the designer had intended to.

Right Balance

Like mentioned above, it seems natural to enhance the quality of content and balance the quantity between removing content (=data compression or unwanted redundancy) and adding content (=desired redundancy). It's like an intersection having two or more traffic lights (desired redundancy) but surely not traffic light hell like on the satiric image.

On a personal note

I wish Directv would ship all their receiver units with two remote controls. You can't imagine the sudden peace in our house since we ordered a second one. "Babe, where is f...in remote again?", "Will you finally shut down the volume honey?", "Come on, skip the commercials, or are you sleeping already?"


Highlights of Week 11/2010

Posted by Michael Gaigg