navigation bar
Brain graphic

DESIGN RANTS

Introduction
spacer
No citations, no gobbledygook.
(Well, maybe I'll add some gobbledygook references here and there)
Just unwarranted, unsupported opinions.
 
These are boiled down, ablated discussions and explanations of real design problems that I often find myself repeating to programmers, managers, and clients. Some of this may sound pretty rough; as with eMail, when you take out all the redundant human communication channels - facial expressions, tone and pacing, body language - and speak directly, some people will take it personally. It's certainly is not my intent to offend anyone, and over time I will try to improve the written tone of these pieces.
 
Oh, and when I started this section of the site it was 1996... pre-blog. So, this section has some of the aspects of a blog; a really, really infrequently updated blog.
spacer

 
Design Rants: Introduction
 + Life with HTML
 + Basic Text Design
 + Visual Chaos
 + Common Web Page Problems
UI Design for Bean-Counters
Modern Software Design, Part 1
Modern Software Design, Part 2
a Brief History of GUI
GUI Design Checklists
GUI References and Bibliography
Office Ergonomics

spacer
Life with HTML What happened here? Why are so many sites so ugly?
 
HTML was developed by a group of engineers and scientists who wanted to share reports and papers over a network. Over time, image tags and miscellaneous formatting was added, but until about four years ago, NONE of the authors were designers.
 
(A good information/interaction designer is concerned with all of the aspects of the interface, from the server and database used, to the transport layers, to the features and limitations of the delivery platform, to the industrial psychology of the computer/display system, to the cognitive psychology/knowledge base/usage patterns of the end user. Their focus is on improving the user's experience through applied expertise with programming, marketing, sociology, psychology, art and design history, economics, technology, engineering, research methodology, etc., etc. But I digress.)
 
Sure, design is about making things look better on the surface. But you CANNOT SEPARATE FORM FROM CONTENT; good design is about making things clearer to understand, and much more useful, and that comes from careful use of sound design principals (yes, there are rules for how to design something, for example: http://www.dsiegel.com/tips/tips_home.html ).
 
Now, the original developers of HTML were smart people, but they didn't think "design" was important. They felt that once they could publish their papers, they were done (unfortunately, an all too common engineering fallacy, "It works, it must be finished"). As graphic designers started using the web, they brought with them some 400 years of printing experience and the rules of graphic design, for instance:
  • Whitespace organizes information better than lines
  • Humans reject information to read it*
  • Contrast = better readability
  • There are cultural meanings to color

So now we have a lot of arguments and "hacks" added to HTML so that information can be presented in a more useful and effective way: tables, alignment tags, color control, frames, face commands for fonts, etc., etc. Sure, this makes the code more complicated, but isn't that what computers are good for? Taking mundane, repetitive tasks and making information easier for humans to understand and use. Or would you rather give back your color monitor, your menu interface, and your mouse? (I know I wouldn't).
 
One thing is for certain, if you use the older HTML tags with their default behaviors, you *will* have an ugly page.
 
*Marshall MacLuhan wrote an entire book on this phenomenon. When you look at a list of information, your brain evaluates each piece of data, then rejects the unimportant/uninteresting ones so that you can focus on the important part(s) of the list. This happens at such a low level that most people are not aware they do it. Think about reading a map, which is an extremely rich interface; if you could not reject information, you would never find the road or city or distance which is important, since your brain can only hold so much information at a time.
 
 
Text Design Have we learned anything in 400 years?
 
With 400 years of design history and 50 years of psychology research to digest on print what do we know?. When reading text, the following things WILL improve reading speed and retention:
  • Contrast between the font ink and the background color
  • Use Serif fonts for printing
    (but sans-serif fonts are marginally better for on-screen legibility)
  • 8 to 11 words per line (column layout)
  • Whitespace margins to the sides of the column (gutters)
  • Minimal use of changes in font inside text
    (minimize highlights, bold, italics for individual words)
  • Consistent text alignment (flush left preferred)

If you have to create wider columns, you really need to increase the leading (typographer's term for vertical space) between lines. Wide columns of text do not easily guide the reader's eye to the next line, resulting in confusion and slower speed. To use a wider column with small text, you must have more leading.
 
In CSS the argument to do this is:
line-height: normal | <number> | <length> | <percentage> | inherit
Preferred:
line-height: 1.5em;
 
When you set text in a page without using a table (or div with a width) to control maximum width, you create a bad situation for your users with large monitors. The HTML default leading is too narrow for full width windows.
 
Cascading Style sheets allow you to set the space between lines of text. Unfortunately, the continuing browser competition between Netscape and Microsoft, combined with multiple platforms and old versions hanging around on many computers, left us with inconsistent results for several years. It used to be that if you depended on this feature to allow use of wide columns, you could create an ugly situation for many users without it but in the past three years the web population has largely adopted CSS and DOM compatible browsers - woo!
 
I could go off about how chaotic page layouts consume your brain's concentration, since your brain is evolved to impose order on chaos, and why it's important to provide navigation cues for large text blocks, but that would take too long, and you probably aren't interested.
 
 
Visual Chaos Why is it important to have clean layout?
 
Well, maybe you are interested. Cognitive Psychologists like Conrad Lorenz in Switzerland began serious and methodical studies of children's brain development in the 1950's. Their theory was that physical and cognitive brain structures developed in childhood affected our perception and thinking throughout our lives. This has since been repeatedly proven correct.
 
The core findings and their effects:
 
1) The order that structures develop determines their importance and speed of utilization; the order is Visual, then Aural, then Sense of Self, and finally, Abstraction.
 
This is why scientists estimate that 80% of our brain is given over to processing visual stimuli. As an infant develops, the first sense which comes under control is vision; these are the deepest, fastest, and most sophisticated structures in our brains. Static images are powerful, but moving images are completely gripping. Think of the pressures on our vision in the environment where we evolved; the search for food and for threats made vision very important. That is how most people can determine whether they've seen an old movie, when flipping channels late at night, within 5 seconds of seeing the footage. No one told you there would be a test on this later, but still we have this incredible ability. And it makes a large percentage of the population very susceptible to television advertising, which speaks directly to many of these deepest brain structures.
 
Aural senses develop next, adding sound to the infant's world. This sense builds on the visual sense and the infant begins to associate sounds with visual objects. As yet, we use very little sound in interface design, but we will be using it...
 
The Sense of Self comes with kinesthetic (body movement) awareness and a new level of higher-order thinking. The infant begins to control their own body, then to know their own limits, and to realize that they can/cannot control other objects around them. So the sense of self is a two edged cognitive tool, balanced by the Sense of Not-self, or otherness. The sense of self builds on visual and aural cues; so we see that higher order functions are based on earlier, simpler structures.
 
The final key cognitive structure builds on all of the above. Abstraction is the growing ability to take childhood elements and manipulate them as symbols. Spoken language is the principal method for abstract concept manipulation, but we all use other systems as well, such as currency, mathematics, and body language. We continue to build and use systems of abstraction throughout our lives.
 
2) The Human brain has evolved to create/impose order on chaos, to allow manipulation of environment.
 
If you get philosophical about it, you can easily argue that we live in a sea of energy. Photons bounce off molecules and have some of their energy absorbed, air moves in waves and we hear sound, the molecules of our fingers interact with other molecules and we feel touch. Of course, a lot of chemical/physical/organic phenomena occur just to get that energy, or the effects of that energy into our brains. But we don't think about energy absorption every time we see the color red, in fact, it took thousands of years to devise the physics model which "is" absorption. The point is, without the brain's ability to take all this energy and assign meaning to it, and then create metaphorical handles to manipulate those meanings, we would not be able to complete the simplest tasks because we would be overwhelmed with detail. See MacLuhan above. Instead we develop internal hierarchies of meaning and symbol as we learn to allow us to move through our day to day tasks without spending too much attention on our environment -- we have imposed our own vision of order onto our universe.
 
This ordering by labeling and rejection, like any useful tool, has good and bad uses. When we walk down the aisle of the grocery store and are able to find the correct brand of tomato paste without reading every can or bottle or box or bag, that is a good use. When we refuse to re-evaluate past values and assumptions in the face of new and contradictory information, that is a lazy thinking.
 
3) Without apparent order, the brain will set about creating order, even if only subconsciously. This consumes "bandwidth".
 
When faced with a new terrain of seemingly chaotic organization (like some web pages) the brain will begin searching for meaning and organization. This occurs on many levels, with some processes occurring beneath the level of consciousness. The brain will waste processing power searching for these missing relationships; this has been proven in experiments with reaction time and complex visual environments, reaction time goes down as the brain is occupied processing a complex (read chaotic) environment. The solution to this is to simplify the interface design, making tables clearly aligned, creating consistent navigation, and using whitespace and lines to create clear groupings of like information.
 
4) Abstraction is costly in terms of processing, and layers of abstraction are more costly.
 
An example of the power of the visual structures of the brain and layers of abstraction is the "Rooms of Animals" exercise, which I first heard Alan Kay discuss in 1990. If you have two rooms, one with walls filled with pictures of animals, the other with walls filled with names of animals, and you ask a volunteer to enter a room and find a specific animal, that subject will always find the picture faster, usually by a factor of 2 to 3. This is because the user dealing with names must read the word, recall associations (reverse abstraction to recall meaning), determine whether there is a fit, and only then accept or deny the term. On the other hand, a volunteer in the picture room can let their faster visual brain structure accept or reject the representations directly (while abstractions, the pictures are sufficiently visual to allow the low level, nonverbal, visual brain to make the comparison).
 
Use of slang, mnemonics, TV or literary metaphors, poetic descriptions, riddles, etc., all slow down an interaction even further since the user is now dealing with layers of abstraction (but it can make the experience richer, or more fun).
 
5) Humans think in three dominant modes: Visual, Aural, and Kinesthetic.
 
We all use three structural modes to interpret our world, rooted in the three earliest cognitive structures. But humans tend to select and reinforce one of those modes over time, and become more sensitive to information which is presented in their dominant mode (This is actually a separate branch of behavioral study called Neuro-Linguistic Programming, or NLP). The GUI interface is successful, in part, because it communicates in all three modes:
 
The GUI is Graphic, using visual representations of data and programs, this appeals to people with a visual bias. The majority of the human population is/are visually dominant. A clue to listen for is "I see what you're saying..."
 
The use of language, and some sound, appeals to Aural mode dominant users. The menu structures and written instructions in GUIs work on this level, and the hyperlinked aspect added to language by the Web is very powerful. Note that Aural users include language (an abstraction layer) as a working skill. "I'm listening...","What did they say?"
 
Finally, kinesthetic users, who are sensitive to body position, emotions, and movement through space find the mouse movements and apparent spacial relationships of GUIs appealing. "What did you do?","Where is it?"
 
Regardless of an individual user's biases, it is important to communicate in multiple modes whenever possible. This ensures that the interface will be effective for different groups, and that most users (who actually use all the modes regularly) will have redundant information to help them better understand the interface.
 
 
Common Page Problems in HTML I've made all of these mistakes. And lived to tell the tale.
Hop into the wayback machine headed for 1998... note that many of these issues are still with us today
 
More than three years of HTML design experience has knocked me around pretty well. Many things have gotten much better, but HTML still has a steep learning curve. Here are things we should all know better about designing for the web.
  • Use arguments for images...
    Always use width and height tags so the browser can render the page before it finishes downloading the images. Yeah, it's a pain. But the pain is greater for users that wait and wait and wait for their modems to load a page, only to find it doesn't have what they want.
  • Avoid the <p> tag...
    Use <br>&nbsp;<br> instead, unless you are an advanced CSS jockey. The <p> tag will break any font formatting when it's properly read (per the HTML standards). Urg.
  • Use Relative font sizes...
    A surprising number of web users have altered their default font sizes so that they are larger and easier to read. When you choose an absolute size you foil their desire to view information at a legible size.
  • Avoid bad backgrounds with poor text contrast...
    Also remember to set the body bgcolor to be a similar color.
  • Check that spelling and grammar...
    Also a pain. People take the information seriously (or not) when you take the extra time to check this over.
  • Use redundant navigation...
    What do users want? To find related information? Sheesh. Sure, some viewers may get lost on large sites, but plan at least two ways to get to any page.
  • Check your pages in Netscape AND MSIE...
    Brrrr. They really do look different sometimes. I also recommend Opera, because it has stricter HTML compliance. While you are at it, visit a friend and walk through the site with them. They'll have great comments.

Show 2005 update on above >>

 
 
Contact Information eMail comments about this page to
Copyright 1995-2008, pRCarter.
This work is licensed under a Creative Commons License.
Some rights reserved.
Last Update: 14oct2008
Design Rants: Introduction
 + Life with HTML
 + Basic Text Design
 + Visual Chaos
 + Common Web Page Problems
UI Design for Bean-Counters
Modern Software Design, Part 1
Modern Software Design, Part 2
a Brief History of GUI
GUI Design Checklists
GUI References and Bibliography
Office Ergonomics

spacer