Assessment 4 - Data Visualization

Skinning Cats

Many ways of representing data on the web and desktop

For my assessment task I thought I'd present a bit of a snapshot into the available tools for data visualization. Note the spelling of 'visualization'. I am using the US derivative as I'm tired of seeing the squiggly red line under the normal (AU) spelling of the word when I'm editing and I don't know where to change the settings. Cultural Imperialism at its finest!

My personal preference for data serialisation serialization is via XML (extensible markup language). Its clean, it self documents, you can open it in any text editor and it transforms really nicely through the application of the xml stylesheet language for transforms (xslt or just plain xsl).

XSL is itself an xml dialect, so you use xml to transform xml into xml (or something else). Its almost Zen.

When approaching this task, one of the main issues for me was how to present the content.

I looked at several options: Powerpoint Presentation, Google Presentation, using Eric Meyer's S5 or using something even more web 2.0 like Prezi.

Each option had its own pros and cons. Powerpoint is too unweildy and lends itself to cognitive obfuscation. Another issue with Powerpoint is its proprietary format. I am a firm believer in trying not to silo your information. The trouble with most office products today is that they encourage the corralling of information - making it difficult for information reuse and repurposing.

DITA (Darwin Information Typing Architecture) is an xml based framework that allows for and facilitates the reuse and repurposing of information. Trouble is, it is requires a bit of an investment in time and brain power and is a bit over the top for a one off publication. Its application in education offers a lot of potential, however.

I finally settled on using OPML as my data schema (Outline Processing Markup Language).

One advantage of OPML is that its a very lightweight document model that enforces a hierarchical structure. It was originally designed as a simple document and idea outliner but has gained widespread use as a format for the distribution and exchange of web feeds.

It has shortcomings and is a bit dated but being fairly popular there are a number of tools that assist in the creation and transformation of opml documents. The opml bookmark exporter add on for Firefox is one.

One if its main shortcomings is that it is not intended to store large tracts of textual data. I am mainly using it as an "ideas aggregator" in this instance. I also transform the opml into a mind map document for an alternative method of editing and presentation and I can then transform the mind map document (using FreeMind) back into OPML. Using XSL gives me round trip OPML to Freemind and back. Neat. 

I love xml.

PNG Export of the mindmap file

The rationale for my deliverable is to allow the casual observer to gain a bit of an insight into how to represent data that takes it beyond the Excel spreadsheet chart. 

There are some stunning examples out there especially newsmap.

My deliverable is actually 4 files:

• a raw xml file in OPML format;
• an interactive (clickable) html file exported from Freemind;
• a Freemind mindmap file (right click and save the link locally then open in Freemind);
• an xml file that gets rendered as a clickable tree courtesy of an embedded xsl transform.

http://members.optusnet.com.au/~anthonybedwards/edge903/data_vis.html

All of these outputs were generated from a single source. Did I say I love xml?

Word Cloud of my Gestalt Rant

Tooling around with the online Word Cloud generator Wordle.
I pasted my overblown response to the Gestalt Theory in Visual Design activity and here's what it came up with:
 

Week 9 Activity

Gestalt theory in visual screen design: a new look at an old subject.

• Principle 1: Using a distillation of Gestalt laws will improve the visual aspect of your instructional media
• Principle 2: Observance of the Rule of Thirds or Divine Proportion could offer as much aesthetic pleasantry without resorting to the Gestalt heavy handedness.

(For a half decent pictorial definition on what the Gestalt Principles are, look here.)

I've gone a bit overboard here but I just thought I'd share some of my personal experiences with regards to designing interfaces over the last 20 years.

Overall, the second principle/observation seems to take more prominence in my experience and opinion. I feel there is more to be gained from the application of simpler heuristics such as the Rule of thirds or the Golden Ratio.
As a former software and web application developer,  there is an easier way to address the needs of aesthetics and effective visual design and usability. The introduction of Gestalt principles seems to cloud the issue and in many ways serves to obfuscate the process.
There's just too much to take into consideration.

A Peek into the Past

When Windows development became really popular (with the advent of Visual Basic back in 1991) untold UI horrors were unleashed onto the world.
Prior to this, nearly every application was DOS based, with screen formatting and layout pretty much aping the appearance of mainframe applications as displayed on 3270 terminal emulators.
The biggest contention for the layout and visual appeal of DOS based applications in those days was the alignment of text and labels: right aligned, left aligned etc. You just tabbed through the fields and pressed 'Enter' at the end of the form. Job done.
When Visual Basic arrived on the development scene in the early 90's, it gave programmers much greater scope in terms of forms layout and presentation. Things were now event driven. You didn't have to start at the top and tab your way through the fields. You could click over them - ignore them completely.
Many mistakes were made.
Matters were made worse when 3D form controls were introduced.
Imagine a purple coloured command button with the word "Submit" written thereon in lurid 3d text. The horror, the horror.
Alan Cooper ("the father of Visual Basic") was one of the first pundits in the Windows world that advocated the benefits of correct layout and better visual representation. He makes no reference to Gestalt theory - not that I could find anyway. This was before Jakob Neilsen. This was before Netscape and the web.
The rules were simple: have functionally similar wdgets grouped together and surrounded by a frame control. The 'Enter' and 'Cancel' buttons were at the bottom of the form - Enter on the left, Cancel on the right.
We looked at the CUA (common user access) documents from IBM. They seemed to make sense. We even formed a committee where I worked to ensure that the transition from 3270 emulation based programs to desktop applications was a smooth one.
We'd buy "VB Developer" magazine to learn these things. Maybe graphic designers had some notion of the benefits of Gestalt theory as it applies to visual screen design but back in those days developers and graphic designers worked in separate departments. In separate buildings. Graphic designers did brochures and flyers for distribution by mail. They wore berets and used Macs. We wore jeans, ate pizza and used PCs.
Now we have the web and everyone's a designer. The horror continues and the law of the jungle reigns. Fortunately the LotJ (law of the jungle) dictates that only the strongest and most visually appealing web sites survive. Check out 37Signals. They are treated like rock stars in the web development world and are not fond of Jakob and Don and all their button down sensibilities. 37Signals' mantra is: If I (the developer) like it, the users will like it. Google "37Signals and Gestalt" and you'll find a reference to a website that no longer exists (http://weblogs.media.mit.edu/SIMPLICITY/archives/000113.html) - its from 2006 anyway , but it shows that even back then the enfants terrible of the web design world knew what Gestalt theory was. Dig a little deeper and Ryan Singer, one of the 37Signals software designers gives a pretty good example of what a Gestalt is as it applies to UI design:

"Elements with strong contrast catch our eyes as they scan the screen. When an area of strong contrast carries a pertinent message (like “Reservation dates”, or “Create a room key”, or “Balance “) a halo of attention settles on that area. With our attention landed, we notice smaller nearby elements that didn’t have enough contrast to stand on their own across the whole page. These elements are grouped together with proximity and contrast to make up a gestalt. The page is then made up of many of these gestalts with space in between them. That’s the second level of cohesion: the page elements are organized into groups that tie elements together and separate them from other groups."

And:

"...the browser’s rendering engine doesn’t care if elements are placed into coherent gestalts on a web page. ...it’s the reader who creates the requirement that things should be clearly grouped and separated."

"Cohesion" in code, interface and product design, February 5, 2011

Jakob Neilsen's website (ironically not that visually appealing) gives sound advice on usability and good design. He does make reference to the Gestalt proximity rule on one page  but he focuses his attention on this one aspect only. Curiously, given their public enmity, Neilsen's opinions seem to echo those of Ryan Singer's. To me, both of these advocates of design and usability seem to use just a subset of the eleven (count 'em: eleven) principles employed by Chang, Dooley and Tuovinen. Its a bit easier to manage and get your head around.