Quickly Explaining Tech in Plain English

A web site called Common Craft has been doing a nice service for us techie types by producing clever little videos that explain some rather arcane subjects like RSS:

And now they have a new video that explains the concept of Wikis and why you would use one:

They are well done, and charming the way that they employ old fashioned stop-motion technique to create a sort of animated white board. My only negative comment is that I wouldn’t mind them using a different voice without the twang (just a personal thing I have with accents). On the other hand, some would probably say that using an amateur voice helps to suggest a non-professional feel for the presentation, which makes the subject less threatening.

It’s only a matter of time before some advertising exec sees one of these and rips off the technique for a ‘hip’ spot about a car or razor. In the meantime, I’m pleased to be able to point people to these videos when they need a quick (and are done at breakneck speed) tutorial on a few new concepts and technologies that are very popular these days. If you don’t quite get the concept of each the first time through, try once more through. It won’t take long.

UIs in the Movies

Metropolis

Forbidden Planet

A recent paper by Michael Schmitz, a student at Saarland University (a fascinating institution near the borders of Germany, France, Luxembourg and Belgium), surveys several different user interfaces from science fiction movies throughout film history. Human Computer Interaction in Science Fiction Movies cites several films, including Metropolis, Johnny Mnemonic, The Matrix, Logan’s Run, Forbidden Planet, Gattaca, Minority Report, Total Recall, Star Trek: The Next Generation (one of the movies, I assume), X-Men, 2001: A Space Odyssey, Dark Star, the 2002 remake of The Time Machine, and even Galaxy Quest.

It is intriguing the way Schmitz has organized the UIs he is taking note of:

The movie clips in the main section of his survey are categorized according to their area of real-life applications and research:
Neuro Technology: Technologies that connect to brains are introduced here.
Identification: Electronical identification of individuals
Displays: Various kinds of displays as an output medium
Speech: Including speech synthesis and recognition as well as intelligent assistants/avatars as special subgroup.
Other I/O technologies: All technologies that are more specialised and that were difficult to categorize according to the fields above, for example gesture recognition or tangible user interfaces

I think these categories arose because of the scenes that he chose to include. There are perhaps some other movies that were not chosen that may have brought in other areas of classification (for instance, Tron, Blade Runner, Serenity, any of the Star Wars films, The Fifth Element, Ghost in the Shell, any of the James Bond films, 12 Monkeys or Contact).

The fact is, the UIs that we often see in the movies are not always accurate because they aren’t necessarily built for good usability, but instead for good dramatic effect. Sure, Tom Cruise could have done some of his research in Minority Report using a mouse and an LCD screen, but it was so much more dramatic for him to don VR gloves, and perform the exhausting 3D manipulation in virtual space in front of him. Even everyday, mundane events like receiving an email get full-screen 3D animations in the movie Disclosure with Michael Douglas and Demi Moore in 1994.

Nevertheless, movies do have a way of placing imagery and expectations in the mind of many movie viewers. In fact, because a surprisingly large number of people can’t tell the difference between movies and reality, some of these UI inventions may be adopted sooner after they are developed for real, everyday use. What James Bond sees on his computer screen may very well be built by some small startup determined to bring just such a tool to market, at whatever price the public wants to pay. They know they want it, though, because they saw it work just fine at the theatre.

Navigating Data Quickly and Easily

Infosthetics points out another great UI demo. Moritz Stefaner, a User Interface Design researcher at the University of Potsdam has created what he calls an ‘Elastic List’, which is a way of browsing data that has multiple facets or parts to it. In this example, you can quickly located winners of any Nobel Prize by zeroing in on the Prize type, the gender of the winner, their country, the decade they won the award, and once you’ve narrowed down to the decade, the year that they won. In a few clicks I was able to find the two Male Canadian winners in the 1990s. Not only does this demo have a nice way of showing the data (note that the ‘pay dirt’ for a search is photos of the people you are trying to find), but it also has a marvelous bit of Mac OS X-style animation that shows the lists expanding or contracting as you make choices:

Elastic List - Partial View

It’s done using Flash, but I bet with a little work it could be done in AJAX.

Besides allowing you to zoom in on the data quickly, it encourages you to explore it to look for what might be unusual aspects that you might not have known. For instance, I learned that Germany has not had a Nobel prize winner in Medicine since 1908, which indeed, surprised me.

Warning, Warning! Danger, Will Robinson!

At one of my favourite sites, Infosthetics (see my blogroll), they note that the UN has come up with a new Warning Sign for Radiation. Here it is:

New Radioactive Warning Sign

According to the report, this symbol is…

the result of a 5-year project conducted in 11 countries around the world. the new symbol, developed by human factor experts, graphic artists, & radiation protection experts, was tested on a total of 1,650 individuals in Brazil, Mexico, Morocco, Kenya, Saudi Arabia, China, India, Thailand, Poland, Ukraine & the United States to ensure that its message of “danger – stay away” was crystal clear & understood by all.

It’s interesting to note that this symbol follows a bunch of the ‘rules’ of UI design regarding warnings:

  1. It’s red. Red is the colour of blood and is often associated with danger. This is the reason that I am always upset by web sites (like Webnames.ca) who decided that their link colour should be red to match their colour scheme. Red should almost never be the colour for your links, people! I’d even go so far as to say that red should be reserved in most UIs for only warnings or errors.
  2. It uses a triangle shape, which is frequently used in warning signs because of the sharpness of the angles, connoting danger or at the very least, unpleasantness (if you got poked with it)
  3. Unlike the old Radiation symbol (which is the three-sided symbol at the apex of the 3 figures within the sign), it has a verb in it! The arrow with the person running, which looks very much like an imperative ‘Go!’
  4. It has some scary looking lines that show the radiation. Although this is not a rule per se, it does illustrate some activity, which is a good example of how an invisible force like radiation can be portrayed.
  5. It shows the Death symbol, (skull and crossbones), though this could be misread as ‘Radiation can cause Pirates and make you lose your left foot’ if you wanted to be thickheaded/silly about it. (For a whole series of misreadings of IKEA warnings for comic effect, my friend Matt made up a whole slew of hysterical examples ).

I’m glad that they tested the symbol in countries like Brazil, Mexico, Morocco, Kenya, and Saudi Arabia, etc.. So often ‘Universal’ signs or icons don’t take into account differences in other cultures. I remember some years back something about Men’s and Women’s room signs not working well in countries where pants vs. dresses or skirts were not necessarily the sole marker of secondary sex characteristics. Who knows, maybe some Kilt-wearers in Edinburgh had to think for a minute.