Comments on Visible Narratives: Understanding Visual Organization

Vitaly Friedman — Fri, 26 Jan 2007 14:50:58 GMT

Thanks for a fabulous article… I guess I have to reconsider color styles on my homepage… ;)

Thanks!

Eric — Fri, 26 Jan 2007 14:50:58 GMT

Nice introduction to principles of visual organization. But the example of the Amazon login form must me a joke! The Amazon form shown is one of the poorest examples of good visual organization I’ve seen on the web (except perhaps Jakob Nielsen’s website). I suspect the author’s web browser didn’t render the form correctly since there are some very obvious bugs…
-e

Steven — Fri, 26 Jan 2007 14:50:58 GMT

This is a terribly simplistic description of both visual communication and—more distressingly—visual narrative. But at least you’ve put these terms forward, and in a constructive manner. Hopefully this will spur others to delve deeper.

Leslie — Fri, 26 Jan 2007 14:50:58 GMT

This article sparked a related question for me. What is more important for a task oriented web page design (not a marketing site) & how do you choose:

1) The layout of the text & graphics shows the information hierarchy but putting the subordinate concepts below & perhaps indented indented under superordinate concepts (like in an outline or tree view).

2) The display be visually balanced (not to much optical weight on one side or the other)? For example, if you have a web page with a vertical nav area down the left and align all text and buttons to the left inside the content area, the page looks unbalances because there’s too much on the left.

Has anyone seen any research on support either idea or any research comparing these design goals?

Vaska — Fri, 26 Jan 2007 14:50:58 GMT

I’m using the term “typographic grid” and the principles that come with it much like you use the term “visual hierarchy” and “layout”. You even used typographic-grid-like images in your explanation. This could be a misappropriation of my terminology I will admit.

However, I don’t feel that typography is merely “look and feel” in general – rather, it is inherently structural. And I do think it is worthy of at least getting a mention in this discussion.

But we are talking about the differences in terminologies and I have found (from experience), it helps tremendously to sort through these differences. And I think this is where the article starts out – as you’ve cited “Usability experts are from Mars, graphic designers are from Venus.” But this would be an altogether different article…

LukeW — Fri, 26 Jan 2007 14:50:58 GMT

Type (in the context of visual organization) is simply another visual element. All the type within a layout needs to be considered part of the overall visual hierarchy. Type also has it’s own “internal” visual hierarchy within groups of text and even within individual letters and words. (this is why some faces are easier to read than others: contrast, white space, etc.) However, if by typography you mean selecting appropriate typefaces that communicate the proper message to your audience, you might be interested in what I call the “second part” of visual communication: look and feel (or personality). A brief discussion of personality can be found at: http://www.lukew.com/bio/design_philosophy/personality.ht…

vaska — Fri, 26 Jan 2007 14:50:58 GMT

I think this is a good article, however, you have completely left out Typography – I see no mention of it.

In your discussion concerning “principles of perception” or “visual hierarchy” you are discussing age-old techniques in typography. Why am I mentioning this? Too often, the design/code processes are separated and a common language between them is never found. Your article is a bridge, but typography is very important as well.

Many designers have taken up “code” as they possess this intuition whereas many code professionals sometimes do not even speak or know of typography. Unfortunately (and I know this from experience), they think that a term like “typography” means “design” – but it generally emobies the same principals your article explains.

The web is awash with so many with visually indecipherable websites because the most basic concepts which graphic/web designers employ (grid, typography) have been left out of the discussion far too often.

They are not merely tools for designs’ sake, they are important factors in common sense visual communiations – I think that this audience should recognize that designers and code people can speak similar languages.

Have no fear of design or typography or grids – they are coders friends as well…

I recommend Val Casey’s [http://www.valcasey.com] site for some solid information and examples of good web design.

Ben Chun — Fri, 26 Jan 2007 14:50:58 GMT

Great article. I would love to see something similar dealing with motion graphics and/or animated interfaces. Seems like this only gets tricker as the design elements start moving around in response to the user interactions in a more immediate and responsive way.

Paula Thornton — Tue, 28 Aug 2007 00:25:37 GMT

Fabulous seminal piece! You don’t know how many hours I looked for stuff like this in the early ‘90s. Short, concice and very full of core principles.

Mike Rowade — Tue, 28 Aug 2007 00:25:37 GMT

Visual contrast can also include varying degrees of image opacity / transparency. For example, I bet you’ll find Oprah before you will find Britney on this map… http://www.1-900-870-6235.com/SearchMap.htm

Michael tribone — Fri, 26 Jan 2007 14:50:57 GMT

Another great article at boxes and arrows. I am a graphics person that has recently been involved in IA and can both learn and share information and knowledge with my team learned from relevant articles. The article is digestible and to the point.

Christian Mogensen — Tue, 28 Aug 2007 00:25:36 GMT

Really nicely presented article. It condenses much of Mullet+Sano’s book Designing Visual Interfaces into a couple of pages.

Very handy for classwork or for handing out to other team members who don’t know too much about the ideas behind visual design.

Andrew Otwell — Tue, 28 Aug 2007 00:25:36 GMT

Nice. A lot of IAs still don’t know this kind of stuff. A really great explanation of basic visual principles is in Scott McCloud’s first book “Understanding Comics.”