Introduction
Apologies, but no citations. Just unwarranted, unsupported nonsense.
These are boiled down, ablated discussions and explanations of
real design problems that I often find myself repeating to programmers,
product managers, and web managers. Some of this may sound pretty rough;
as with eMail and messaging, when you take out all the redundant human communication channels -
facial expressions, tone and pacing, body language - people take things differently.
Reading through these pages in 2022 I want to rewrite all of it.
Seven years in marketing made it clear that tone and story matter more than I ever realized.
Practice and feedback have made me a better writer and a better person.
When I started this section of the site it was 1996... pre-blog.
I was obsessed with customers and how we made things so much more difficult online than it had to be.
I was outraged on their behalf and it showed. It's certainly is not my intent to offend anyone.
In This Page
Other Design Pages
Three decades of HTML 
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.
How did we get here?
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.
Design can be 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.
That comes from careful use of sound design principals and understanding the context.
The original developers of HTML were extremely smart people, but they didn't think "design" was as important.
Once they could publish their papers, they were done ("It works, it must be finished").
As graphic designers started using the web, they brought
with them centuries of printing lessons and principles of visual design, for instance:
- Whitespace organizes information better than boxes and lines - including indentation
- Humans reject information as they read it*
- Contrast = better readability
- There are cultural meanings to colors
*Marshall MacLuhan wrote an entire book on this phenomenon.
When we look at
a list of information, our brains evaluate each piece of data, then rejects
the unimportant/uninteresting ones so that we can focus on the important parts
of the list. This usually happens at such a low level that most people are not aware
they do it. An example is reading a map, 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.
[Editor note: In 2002 CSS was starting to mature but browser support was still inconsistent.
Here's a look back at how we handled it in the US Banking space - where we could not exclude access to anyone based on slow speeds, old browsers, or disabilities]
Ten years of HTML - Modern browsers, better CSS and DOM (Document Object Model) support, but some things remain.
By the late 1990s we had 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.
One thing is certain - if you use the older HTML tags with their default
behaviors, you *will* have an ugly page.
- 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
56k dialup modems to load a page, only to find it doesn't have what they want.
And please use alt= argument too for reader browsers.
And a new thing, please use title= arguments in your hyperlinks and imagemaps to
support the rollover/tooltips behavior in most browsers and some of the cool hyperlink
shortcuts in reader-browsers.
- Avoid the <p> tag...
Use <br> <br> instead, unless you are an advanced CSS jockey.
The <p> tag will break inline font formatting when it's properly read per the HTML standards. Urg.
[ By 2004 this is was wrong - Huzzah to browser coders!
CSS makes the <p> tag very well-behaved, but please close (<p> </p>) them. ]
- 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.
Current best thinking on this is to
use percentage arguments for font sizing and em arguments for widths and heights in CSS formatting
- Avoid bad backgrounds with poor text contrast...
Also remember to set the body bgcolor to be a similar color.
[ 2022 - Still very important ]
- 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.
[ 2022 - Still very important ]
- 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.
[ 2022 - Still very important, still seeing some horrible link naming and placement on many websites.
A few walkthroughs with real users will find these issues without much pain other than some ego bruising.
- 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.
[ By 2004 - Since MSIE is the most forgiving of poor code,
We usually develop pages in Firefox or Opera, then check them in the other browsers before release...
In 2022 - Yow, IE is still going their own way. ]
General Design Principles [2002]
- Metaphors from the real world
Use metaphors based on real-world counterparts and make them plain, so that users have a set of expectations to apply to the computer environment.
Carefully craft a visual, aural, behavioral illusion to support the metaphor, so the user can operate in a stable artificial reality.
- Direct manipulation
Users want to feel that they are in charge of the computer's activities.
They expect their physical actions to have physical results, and want their tools to provide feedback.
- See-and-point (instead of remember-and-type)
Users select actions from alternatives presented on the screen.
They rely on recognition, not recall; they shouldn't have to remember anything the computer already knows.
Most programmers have no trouble working with Boolean logic and with a command-line interface that requires memorization, but the average user is not a programmer.
The general form of user actions is noun-then-verb, or "Hey, you; do this."
Examples: "Confirm Order"; "Add to Cart"; "Update Info"
- Consistency
Effective applications are both consistent within themselves and consistent with one another.
Users like to rely on familiar ways to get things done.
- WYSIWYG (what you see is what you get)
There should be no secrets from the user, no abstract commands that only promise future results.
There should also be no significant difference between what the user sees on the screen and what eventually gets printed.
- User-initiated actions
The user, not the computer, initiates and controls all actions. People learn best when they're actively engaged.
This is different from the traditional command-line model, in which the computer acts and the user responds with a limited set of options.
- Feedback and dialog
Users appreciate immediate feedback on the progress of an operation.
Communication should be brief, direct, and expressed in terms of the user's point of view.
- Forgiveness
Users make mistakes; forgive them.
Forgiveness means letting users do anything reasonable, letting them know they won't break anything, and always warning them (but not restricting them) when they're entering risky territory.
Even actions that are risky should be reversible; let users know about any that aren't.
- Perceived stability
Users feel comfortable in a computer environment that remains understandable and familiar rather than one that changes randomly.
Consistent graphic elements provide visual stability; a finite set of objects and actions to perform on them provide conceptual stability.
- Aesthetic integrity
Visually confusing or unattractive displays detract from the effectiveness of human-computer interactions.
Messes are acceptable only if the user makes them - applications aren't allowed this freedom.
Users should be able to control the superficial appearance of their computer workplace to display their own style and individuality.
< Hide 2002 Version
