Category Archives: Design

Academic Papers Artwork baby names Blog blogging democracy Design ethics Facebook firefox Flickr folksonomies Google Google Docs Google Spreadsheets how-to information-architecture information-retrieval information design internet iphone journalism listserv mailing list maps mass media Online News Papers Photography plugin poll social-bookmarking social networking social software spam tagging trust Twitter Usability web-development Web2.0 webspam web standards WordPress Writing

The information design and aesthics of five-year-old me

I recently came across something at my grandmother’s house – a drawing I made when I was five years old. Normally it would be more appropriate to post it on a refrigerator than a design and usability blog, but bear with me. The interesting thing about this crayon drawing is that it’s a representation of a real place – so we can see a little bit about how I saw my world at that age and how I tried to represent it.

Let’s look at this picture from three perspectives to find the good, the bad, and the ugly.

My house, according to 5-year-old me

The Good – Information Design

First, how well does this image convey information to the viewer?  Most of the time when we talk about information design we’re worried about accurate infographics, legible labels and structured documents.  Since this image was intended to represent a real-world place we can look at it the same way.

Young me apparently had an eye for color and texture. The red and black brick makes the house immediately recognizable – I bet that if I handed it to a stranger and lead them to the right street, they would pick out my parent’s house immediately. The barn to the right was my dad’s large shed, and the color scheme and pattern of the beams is pretty accurate.

My house, according to 5-year-old me When viewed as a thumbnail, it’s clear this image actually has a fair degree of information density – and this is years before I had read anything by Edward Tufte. The viewer gets a good number of identifying characteristics in a small space, including architectural style and building materials.  I had even included a bit of topography (the barn is uphill from the house and front yard).

The Bad – Artistic Aesthetics

Now let’s look at it from a more artistic point of view.  Aesthetics are subjective, so I like to take into account the intent of a piece if possible.  For this drawing, accuracy is the most immediate concern.  Not all art has to be photorealistic or even representative, but I have no doubt that young Jason was trying his hardest to draw the place exactly as it existed.

For an objective piece this has many errors and omissions.  For example, my parents’ house does indeed have a door, a number of additional windows, and a garage. The house is a ranch and my guess is that the shape shown here was influenced by the boxy, generic house shape that shows up in cartoons and childrens’ books.  The window in the barn was never actually there and the driveway shouldn’t reach all the way back to it, instead ending at the missing garage.

Note that everything is completely flat – there’s no notion of perspective. I can’t be too hard on kindergarten self on this point because even the Ancient Greeks and Romans never mastered linear perspective. It’s hard to believe, but the brilliant minds that designed and built the Parthenon did not understand that to accurately represent our three-dimensional world on a two-dimensional surface, parallel lines should converge toward one or more vanishing points.

Classic photo of the Parthenon

The two human figures represented in the windows are trite, generic stick figures.  They show no emotion or individuality, and are poorly executed compared to the house and barn.  The green grassy ground ends abruptly to the left of the house leaving an unbalanced, awkward composition.  Overall I would have to say that this work was a failure, with some consideration given for the limit of the medium and the spotty recall of my five-year-old brain.

The (Potentially) Ugly – Childhood Development

Now for the analysis that is a little too close to comfort – where does this artwork put young me on the timeline of childhood development?  I remember getting a lot of praise for my drawings when I was little, but lately I’ve begun to notice that adults praise any mark a child puts to paper.  Was the foundation of my self-worth built upon patronizing indulgence?

Psychology researcher Viktor Lowenfeld mapped out childhood drawing development into stages by age.  Here’s a page illustrating some of the stages and here’s a great comparison between his stages and those of Betty Edwards of Drawing on the Right Side of the Brain fame.

Lucky for my inflated ego, 5-year old me falls comfortably ahead of the curve.  The ground is defined as a flat line, and there’s a clear spacial relationship between objects.  Colors reflect the real world, especially when you take into account the limited Crayola palette.  This places 5-year-old me firmly in the Schematic stage of development, usually see at 7 to 9 years.

I should stop congratulating myself long enough to note that in this stage, size often reflects emphasis or importance.  The barn is much larger in this picture than in real life, and the stick figures are small and deemphasized.  Did the barn stand out in my mind simply because I spent most of my time in the back yard, or was it because that’s where my dad kept cool things like the sledge hammer and gas for the lawnmower?  Are the people small and anonymous to fit the window spaces, or do they reflect some lack of social development?

The Top Ten Best Things About HTML 5

html-source The Word Wide Web has grown at an astounding pace and is pretty ingrained in a lot of our daily lives – you’re reading it right now. Part of the reason it has been so successful has been the flexibility and ease of use of the basic language of web pages, HTML.

Most web sites are developed in HTML 4 (first released in 1997) or XHTML (from 2000). Considering the rapid change all around the web, why hasn’t there been a new version, and what’s next for the Web? One reason we haven’t seen new versions is the aforementioned flexibility. There have been plenty of developments, from blogging software and other content management systems on the server side to CSS, AJAX, and embedded Flash video on the front end.

Microformats are a part of this and will be a big part of the future too. But all the web developers in the house should get up to speed on HTML 5, which looks to be the future of the Web.

I’ve been watching what the Web Hypertext Application Technology Working Group (WHATWG) has been doing with HTML 5 ever since I took a gander at the W3C’s XHTML 2 spec and figured out that they were mostly adding annoyance and removing backwards compatibility. Guys I respect, like Eric Meyer, seemed to agree. The WHATWG decided to work on their own ideas and came up with HTML, which was eventually adopted by the W3C as well.

I haven’t taken a look in a while but Marcia Zeng mentioned the HTML 5 spec in an email recently and it got me interested in checking back in. I have to say, for the most part, it’s looking very interesting.

So I decided to put together a quick list of my top 10 new things in HTML 5:

  1. The <nav> element. This will be great for the billions of navbars we web developers have been coding up for the past 10 years. Things like this will help reduce the problem of div soup and make structure more apparent.
  2. The <header> and <footer> elements. See the last entry and add in the billions of page headers and footers we’ve produced as well. Semantically meaningful tags like these can only help browser plugin writers, search engine programmers, and other hackers to come up with cool new features.
  3. The death of the dreaded <font> tag. This should have been banished as soon as CSS was widely supported. It was a pain in the rear to use back in the 1990s when coding by hand, and was even worse when inserted by GUI tools like FrontPage.
  4. The continued usefulness of the <img> element. You may be wondering how we could make web pages without the image element, but XHTML2 only included it grudgingly, recommending everyone use <object> instead. The problem is that just about anything could be an object, the tag is almost meaningless. Why not replace all tags with <thing>?
  5. The <audio> and <video> elements. There’s been some controversy about this, because the W3C originally recommended use of the open source Ogg formats but later recanted. Still, it will be nice to embed audio and video as easily and consistently as images are used now.
  6. New <input> types for dates, urls, etc. When you have a form that requires a user input a date or some other specialized data, you choices have been to present a plain text input or jazz things up with JavaScript to make it a bit more usable. HTML 5 adds specific types for these cases.
  7. The conenteditable API. This will be really interesting if it’s fully supported. In Tim Berners-Lee’s original vision for the web, documents would be easily editable. Wikis get us almost there, but a standard editing API would be even better.
  8. A required attribute for form inputs. This won’t mean we can stop checking incoming data on the server side (users can still POST arbitrary data with the right tools) but it should remove the need for millions of little field-checking JavaScripts.
  9. The <figure> and <legend> elements. This will make it a little easier to associate captions and other text to images. Look for CMSs and image search engines to take advantage of these tags.
  10. An open development process. Want to keep an eye on development? Got an idea or concern about the spec? Hop on one of the mailing lists. Open standards are great for promoting compatibility and competition, so open development of the standards just makes sense.

When graphics lie

The Cleveland Plain Dealer ran a story today about the origin of guns used in crimes in the city. This is an issue that people are concerned about and it deserves coverage. Rather than present information about gun laws in various states and numbers of crime gun recovered as a boring list, the PD provided a helpful infographic.

Maps and bar charts can be really useful tools to help people make sense of information. But look closely and you’ll see a problem – the bar chart showing the relative number of crime guns recovered is wrong:

pd-chart-error

At first glance it looks like about as many guns are recovered from Cleveland as from Cincinatti and Columbus. But the Cleveland number is really about 65% of the Columbus number.

This is probably just an error, akin to misspelling someone’s name in an article. But it’s a good example of a bad graphic, sometimes called chartjunk. Ignoring the error, a bar chart like this might conceal more than it conveys. The top three cities are much larger than the rest, so wouldn’t we expect them to have more guns seized? Maybe a measure per 1000 persons would be better. We also need to think about what this chart implies to readers – is a higher number worse, because it correlates to more crimes, or better, because it means police departments are doing a good job of taking guns off the streets?

If you’re interested in reading more about how to design good graphics and communicate large amounts of data effectively, take a look at the books of Edward Tufte.