Four Elements of Design

My first real job was a co-op position with the Georgia Power Company back during my university days. The company bought us all Macintosh computers (Mac IIs), and I was introduced to desktop publishing with the Aldus PageMaker application (which, today, is known as Adobe InDesign).

I started using PageMaker and the office LaserWriter to prepare and print documents for school — reports, essays, anything really. Like most desktop publishing novices, my documents attempted to use every font, sizing, coloring and positioning option the program offered. The resulting documents were technically amazing (given the common technology of the day — monoface font editors and dot-matrix printers), but somehow were nauseating to look at.

I always wondered what was it that made professionally designed documents look so much better, and then I came to discover the realm of design. I bought two books by Robin Williams (the author, not the actor): “The Mac is not a Typewriter”, and “Design for Non-Designers”. These books changed my life! It’s amazing how simple concepts can have such powerful, dramatic effect.

After reading these two books, the aesthetic quality of my documents improved dramatically, and I soon discovered that a well designed document, even with weaker content, could achieve better marks than a difficult-to-read document, with stronger content!

Anyway, in the book “Design for Non-Desigers”, Robin introduces the reader to the four simple cornerstones of design — known as the “CRAP” principles — which, when applied, almost always produce a better looking document, layout or screen:

  1. Contrast. Strong/weak, big/small contrasts create emphasis and flow.
  2. Repetition. Repeating design elements supports consistency.
  3. Alignment. The eye likes to find lines of alignment.
  4. Proximity. Related things should be grouped together.

Today I was reading a book Alex ordered, “Designing Interfaces”, by an interface designer working at the Mathworks (makers of Matlab). It was very interesting to read about some of the psychology principles underlying UI design. In particular, the work of the Gestalt group theory psychologists, who concluded — interestingly enough — four principles:

  1. Closure.
  2. Similarity.
  3. Continuity.
  4. Proximity.

I find it interesting, and exciting, to see such common denominators between disciplines.

Live365, example of poor user interface design.

This, in my opinion, is an example of quite poor user interface design. The image on the right (click the image for a larger version) is a screenshot from Live365.com’s web page that users evaluating their Radio365 product are taken to when they click the “purchase” button. Notice that the only element that appears “clickable” is a button to “Try VIP for Five Days Free.”

Amazingly, there’s no “purchase now” link! (Turns out that you have to click the image of the credit card to be taken to the purchase screen.)

This kind of problem appears frequently these days (possibly in some of our sites as well, though I hope not). Links are being assigned to practically any visible element on the screen, leaving the poor user to explore the screen space waiting to see their mouse change shape (indicating that something’s clickable). What’s worse in this particular screen, is that a precedence is established through the presence of a button, that embossed elements are what the user should interpret as clickable — implying indirectly that non-embossed elements should not be clickable.

Tihs Mkeas Snese?

Aoccdrnig to rscheearch at an Elingsh uinervtisy, it deosn’t mttaer in waht oredr the ltteers in a wrod are, olny taht the frist and lsat ltteres are at the rghit pcleas. The rset can be a toatl mses and you can sitll raed it wouthit a porbelm. Tihs is bcuseae we do not raed ervey lteter by ilstef, but the wrod as a wlohe.

A Model of Usability

The plane arrives late. We wait 45 minutes for the baggage to arrive in the terminal. The airport staff try to place a living room table on the belt, and of course it jams up the whole thing. Ashtrays are logically installed under No-Smoking signs and everyone, even the airport staff, are smoking. (Rules in Spain, especially as regarding traffic, are to be interpreted as suggestions.)

And the final touch of the day, trying to figure out how to use the latest in industrial design and usability — the airport’s new and improved parking ticket machine. 🙂 Let’s have a look:

  • The icon of the parking ticket is located below the credit-card slot (right and down from the middle step 2), not the ticket slot (under the video screen). You can imagine the confusion this causes.

  • As my buddy Niall said, the layout was obviously designed by a lunatic on crack.

  • Not a single color or font was excluded.

  • There’s not a single axis of alienation.

  • There are three step 2s.

<

p>Welcome to Malaga, Spain! 🙂