[Up: design lab] [Robot Wisdom home page]
"Documents are pretty much the most complicated type of data in existence." --Paul Prescod [source]
The challenge of information design is to find optimal ways of arranging separate bits of information on a page, so that each individual bit is easy to absorb.
The greatest enemy of good info-design is geekthink. Geekthink tries to fit information into the sorts of categories that computers like-- uniform hierarchies with everything in a standard place. [example] (XML is extreme geekthink [rant].)
The human mind works much more efficiently if information is presented with some degree of modulation or variation of tone and appearance-- preferably modulations that add extra layers of meaning.
Reading vs scanning
Pages should be both readable and scannable, but it's a bit of a trick to balance these. The scanning eye jumps from point to point, preferring the first words after whitespace, or the first word in an emphasized font-style, like bold or underlined blue.
Too many alternations between styled and regular text cause difficulties for the reading eye, however. Once you've gotten engaged in the flow of the reading, long blocks of 'grey' text are quite comfortable, while the scanning eye finds them impenetrable.
Safe strategies for adding scannability include: italics (which are less of a problem than bold, but much less scannable as well), whitespace of all kinds, indentation (especially indented pullquotes-- use HTML's BLOCKQUOTE tag), bulleted lists, and blocks of BIG or SMALL text (HTML tags again).
The only way to test readability is to read your own pages, over and over, many times.
All-in-one
There's something very satisfying, both to the author and to the reader, when you can manage to fit everything important about a given topic onto a single page. (If it goes over 100k, you should probably find a way to split off half onto a secondary page, though.) Example: jazz history
I have some reflections on building all-in-one 'resource pages' here, including many examples of resource pages for artists like novelist Iris Murdoch that try to integrate all the existing Web resources for each artist into a single page.
Every medium-sized website (say between 10 and 1000 pages) should include a page that indexes every page on the site. Here's mine and here's Lou Rosenfeld's thoughts on this topic.
Sorting
The first rule of info-sorting is to put similar bits close together-- then once the reader understands the context of any of them they can most easily grasp the rest. (A corollary to this is that each added bit that shares context can be shortened since the context doesn't need to be re-established.)
This principle allows my one-layer portal design to link 200+ James Joyce pages from one compact display.
If the bits of info vary widely in size, special efforts may be needed-- same-sized-bits sometimes takes priority over same-topic. One useful unit of scale is the one-liner, which before the Web used to mean less than 80 characters, in the days of monospaced etext [etext FAQ]. One of the immortal classics of pre-Web info-design was the original alt.folklore.urban FAQ, which used the one-liner trick to achieve a genuine miracle of info compression.
Best-first
Generally, you want to put the most important bits first in any group. Here's a fine example from Ameritech, spelling out a list of frequently searched terms live-linked prominently on their searchpage.
This bad-movies site zeroes in on the juiciest topics to feature: The Characters; The Plot; Things I Learned from this Movie; Stuff to Watch For; Sounds; Images; and Videos. Eg for Barbarella
On my resource pages I've started featuring the most engaging pullquotes from various pages that I link. Example; Joni Mitchell
Chronological timelines
A chronological arrangement like a one-liner timeline is very useful. My history portal-page offers one example. [nicely done]
Nathan Shedroff tells an interesting story [interview] about how the Vietnam War Memorial was almost redesigned by the bureaucrats to present the names in alphabetical rather than chronological order, which would have destroyed much of its poetic impact.
Historical index of online etexts
Best-of-class
A common variant on best-first is to survey the best bits in each of a range of categories. (The Oscars do this, for example.)
Here's a very interesting design offering an overview of the XML debate by choosing the best quote from each day for the year 1999.
Newest-first
Newest-first is important for pages that will be visited at irregular intervals. This is the primary distinguishing characteristic of weblogs. [weblogs FAQ] [example]
Condensed-version first
Starting a page with a very short, 'condensed' version of the whole page (with #-links) illustrates the general principle of 'zooming in', eg from a short abstract to greater and greater degrees of detail. This dull-looking bio of St Patrick draws people in via a short #-ToC (hash table-of-contents) that features the most interesting bits buried in the body.
Here's a rather unsuccessful attempt to add three layers of zoom to the Unabomber Manifesto.
Maps
On a wholly different note, the computer makes it almost trivially easy to create custom maps for a particular page, by rescaling an existing map, and tracing its outlines to emphasize only the important features. Examples: James Joyce's travels; Leopold Bloom's travels in Joyce's Ulysses; Finnegans Wake settings; and Jerusalem as seen in Robert Stone's Damascus Gate.
Webpage conventions
One of the most thought-provoking experiments I've seen on info-design is described in this Jakob Nielsen Alertbox essay. The experimenter tested how well people could identify these categories of info-bits on a webpage, even when the text itself was meaningless:
The Godfather of Info-Design
Misc
You can submit a new URL or any other suggestion for this page by typing it into the box below. It will instantly become visible to anyone at this comments page. I should get around to checking it out and updating it above within a week or three, at which point I'll delete it from the comments page.
If you want credit, include your name and email (otherwise it's anonymous). You can use HTML but you don't have to.
Web-design pages:
main :
academia :
info-design :
adding value :
resource-pages :
lessons-learned :
best-worst :
plugging leaks
Special topics:
surfing-skills :
url-hacking :
open content :
semantics :
pagelength :
linktext :
startpages :
bookmarklets :
weblogging :
colors :
autobiographical pages :
thumbnail-graphics :
web-video :
timeline of hypertext
Anti-XML/W3C/etc:
structure-myth :
page-parsing :
firstcut-parser :
html-history :
semantic web
Design prototypes:
topical portal :
dense-content faq :
annotated lit :
random-access lit-summary :
poetry sampler :
gossipy history :
author-resources :
hyperlinked-timeline :
horizontal-timeslice :
web-dossier
Website-resource pages:
RobotWisdom.com :
Altavista.com :
1911encyclopedia.com :
Google.com :
IMDb.com :
Perseus.org :
Salon.com :
Yahoo.com
Older stuff:
design-lab :
design-checklist :
HyperTerrorist :
design-theory :
design cog-sci
Hosting provided by instinct.org. Content may be copied under Open Web Content License.