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.

Assessment 3

Here it is.
I dug around and found this somewhat contrary view that says that visualisation can be used to impede the interpretation of text - not enhance it. I thought is was quite a novel position to take. The author uses the nursery rhyme "Humpty Dumpty" to show that the ingrained collective vision of Humpty is that of an egg when there is no specific mention of an egg at all in the rhyme. Some say its about a cannon used in the defense of Colchester in 1648 during the English Civil War. I drove past the wall last year on a visit to my cousin and he retold the tale of the hapless ordnance which fell off the wall and couldn't be put back by the Royalists (King's men).

Javascript - Game changer or Distractor?

This started off as a response to a comment made by Sarah in response to a comment made by me on her blog. I started getting carried away so I thought instead I'd throw it up here and share it with the rest of the world, for what its worth.
In my opinion, javascript and its associated technologies has the potential to completely redefine whatever notions we have of the web.
Before returning to teaching I was a developer for the past 20 years and the last 8 years have seen me fooling around with web development. 
I'm either lazy or dumb or both but I like simple things - easy to grasp and easy to implement so I have gravitated towards less computationally onerous frameworks to render web applications. 
Like Apache Cocoon and XML and XSL. 
Cocoon especially has evolved into more of a Java heavy framework and seems to be retreating from its XML pipeline style of processing and is starting to give me headaches.
The XSL spec has a new version that I'm totally unfamiliar with but is a huge improvement on version 1 (which was wonderful and extremely powerful in itself) but has lost a bit of traction particularly in browser support. 


This brings me to javascript.


What does it do and how does it do it?
Javascript (developed by Brendon Eich of Netscape) is still primarily a browser based language originally intended to enhance the user interface and add a bit of zip to the user experience (alert boxes, mouse rollovers etc). 
Some clever individuals started using javascript to modify the browser's DOM (document object model) in real time instead of waiting for a web page to be refreshed or modified via a round trip to the server. 
This technique became known as 'AJAX' (asynchronous javascript and xml - a term coined by Jesse James Garrett in 2005). As a background, check out the Discussion tab on this wikipedia article.
Since then, javascript has emerged as more of a central programming interface that makes web pages behave and look more like desktop pages.
Think Google Maps and Gmail and, yes, Blogger. 


It kind of works like this:
Instead of requesting a complete page refresh (with new information added) by going to the server and having the new page constructed by a process running on the server (written in a language like PHP or Java or ASP), the web page makes an asynchronous call to the server process but only updates the required section of the local page (usually a <div>) with the new information.
The updated information is usually sent back as an xml document and converted on the browser into valid HTML and then inserted into the uniquely identified element in the document. More recently, programmers are using JSON (javascript object notation - devised by Douglas Crockford) which is faster to evaluate than XML and improves the performance of the whole round trip.
The result is a faster, more dynamic user experience that results in almost desktop application user interfaces and response times. The client to server lag is reduced as less data is being transmitted.
To this end, a lot of developers that used to view javascript as a bit of a 'toy' are now realising that the language has enormous potential.

Rapid advances in browser technology have seen further developments in web standards: HTML5, WebGL, H.264 video etc, which all contribute to the rise in web based applications. Browsers now have the capability of making calls directly to the computer's GPU (graphics processing unit) to speed up screen refreshes and updates.
The argument used to be that web based applications were fine but they would never replace Photoshop - that is now starting to change.
Check out Chrome Experiments. The web world is being turned on its head.


Where does this leave javascript as a 'back end' (server based) language? 
I'm glad you asked.
The server is where all the heavy lifting takes place. 
CRUD manipulation of a database (Create, Replace, Update, Delete). Security checks. All the behind the scenes stuff that web users don't get to see or appreciate :( .
Developers have complained that they need to know a back end language really well (like the aforementioned PHP, Java, Python, Perl, or ASP) and whereas they only needed a small amount of javascript knowledge and ability.
Nowadays the javascript takes more prominence and as such every developer worth his salt needs an indepth knowledge of at least 2 languages. 


Enter SSJS (Server Side Javascript).
Boffins have been toying with the idea of server side javascript for some years - Mozilla Rhino and Aptana Jaxer are two cases in point. These solutions appeared to be a bit cumbersome - Rhino is an implementation of javascript written in Java and doesn't appeal to non-java afficionados and Aptana seems to have dropped support of their Jaxer server product altogether.
But, when all seemed lost, in 2009 Ryan Dahl introduced Node.js to the world. 
Node.js (known as 'node') allows for the creation of server based javascript modules that can be called from a browser. Since its introduction it has gained a lot of traction in the web development world. Now developers can concentrate on one language only to satisfy both their browser and server based requirements. 
Coupled with the acceptance of HTML5, the <canvas> element and WebGL, javascript promises to be the one language that will unite both ends of the web development spectrum.

Assessment 2

Check out assessment 2 - finally finished.
I hope it makes sense. All this talk of gesture based interfaces has got me thinking about investing in a Kinect. Could be the way of the future!

Click the link or go to here:
https://docs.google.com/document/d/1FhMeoHe2xpFWiKmwWl5JKJZD56Mhb_TeWnaapXoAfa4/edit?hl=en_US

Activity 2 - the Accessible Accelerometer

The recognition of the orientation of a smartphone is facilitated by the accelerometer.

Looking at the Phonegap API (applications programming interface) reference we see that:

"The accelerometer is a motion sensor that detects the change (delta) in movement relative to the current device orientation. The accelerometer can detect 3D movement along the x, y, and z axis."

Phonegap is library of tools that enable the development of iPhone and Android apps using html, javascript and css. The advantage of referring to its API documents is that it abstracts the interface away from the lower native language specific function calls. It gives us a higher level overview of the common functionality of the components of the devices across several operating systems and platforms.

At its most simplistic level, in usability terms simply rotating the phone from the default portrait orientation to landscape affords the user a larger target area for interacting with the virtual keyboard.

That is, it makes the 'keys' easier to hit.

By taking advantage of the change in orientation, app designers can provide a more beneficial user experience by taking advantage of the wider screen real estate.

There are obviously far greater uses for this feature (games, remote control etc) but the simple act of providing a larger interactive surface by simply rotating the device is probably its most far reaching in the usability sense.

References:

• http://www.learnxpress.com/smartphone-accelerometer-enhancing-users-experience-in-using-smart-phone-applications.html
• http://docs.phonegap.com/phonegap_accelerometer_accelerometer.md.html

Interface: the Rise of the Machines

...or how we talk to our digital friends.

Ever since Doug Englebart invented the mouse in the '60s, the desktop metaphor for human-computer interaction has reigned supreme.

With advent of smartphones and the touch screen interface, are the desktop metaphor's days numbered?

Assessment Presentation

Products like the iPhone and the slew of tablets that are hitting the market have changed consumer expectation with regards to usability and functionality. Windows 8, to be released next year, has changed its look and feel to make the transition from keyboard and mouse based interaction to touchscreen interaction much simpler.

Javascript code libraries like jqTouch and Sencha have enabled web based applications to morph into touch based applications with minimal rewriting of the code. This leads some to question whether the hegemony of Microsoft will continue.

As we spend more time online, the 'pc' is rapidly becoming just a life support for a browser. The web is the ecosystem, the underlying operating system is becoming irrelevant.

How we interface with these devices is becoming more organic with gesture based interaction becoming easier to incorporate and develop.

For a pictorial overview of the evolution of the man-machine interface, look here.

Patty Maes and 6th Sense

The most impressive aspect - from my point of view - of the Patty Maes/Pranav Mistry device (apart from its capability) is the cost: $350! Talk about lowering the barriers of entry. Other major IT companies would make the system and software that ran it totally proprietary and sell it for $10,000. Yes, I'm looking at you Redmond, Washington.
It amazes me what people can produce with off the shelf components and open source software. Look at OLPC. Look at the $100 laptop project in India. Look at the programs founded by Nicholas Negroponte - also from MIT - in Uruguay.
Lower the barriers of entry, keep the software and componentry open and as non-proprietry as possible and things will start to happen.
From my perspective the biggest IT companies just don't get it. They'll laud the benefits of a project like Microsoft's Second Light device and overlook the benefits of work done by Maes and Mistry.
I've got no problem with major companies making a buck, but its when they hold the education sector to ransom by their drug dealer like behaviour that get me upset.

I'm particularly miffed at Microsoft. At my school we've had to factor an extra $100 on top of the cost of computers (pre DER) for the purchase of licences for Windows and Office. There are alternatives but the populace are tricked into thinking that the MS Office suite is an ersatz 'standard' that everybody must adhere to or else they'll fall by the wayside.

Its projects like Sixth Sense that give me hope that there are people out there who are genuine in their approach to the implementation of technology in education for the betterment of the learning process, not as a means to keep stockholders happy. Where's the altruism? The Sixth Sense project and those like it have it in spades!
To see what other wonders might be in the pipeline, have a look at this!