UIEtips Article: Visible Narratives: Understanding Visual Organization

Jared Spool

October 31st, 2006

UIEtips 10/31/06: Visible Narratives: Understanding Visual Organization

In our current research at UIE, we frequently observe the ongoing debate between usability and visual design. Can an application become more usable just by changing its aesthetics? Do we really need to know the underlying code of an application? There is increasing pressure to make web applications more functional, while at the same time to make those web applications pleasing to the eye.

Our research has shown that the most successful teams all have something in common: they effectively communicate with each other. The key for team members to successfully communicate is to have a solid understanding of the fundamentals. Developers need to understand the essentials of graphic design, and designers need to understand the inner workings of web applications.

When everyone on the team understands the basic principles of graphic design, the importance of visual organization and visual hierarchy becomes apparent. Both play huge roles in attracting users to web sites, not to mention maintaining their interest. The interface of a web application is the first thing a user experiences, making its design critical to success.

In today’s UIEtips, we are reprinting a fascinating article written by Luke Wroblewski back in 2003. Luke is the principal of LukeW Interface Designs as well as a principal designer for Yahoo! He also recently spoke at UI11, where he received rave reviews. In this article, Luke discusses how the arrangement of visual elements in a web application can coerce users to evaluate the content and interactions you want them to see most.

If you would like to learn more about visual design, you can catch Luke Wroblewski at the UIE Web App Summit. Luke will present Best Practices for Form Design: Bridging the Gap with Your Customers, a comprehensive look at how web form design can influence user behavior on your web site. Luke will also explain how a well-structured visual hierarchy can steer users in the direction you want them to take on your web page in Web Application Page Hierarchy. I highly suggest you check them out.

Read today’s UIEtips article.

Are you struggling with the visual design of your web applications? Have you found a visual design that successfully communicates with your users? I’d love to hear about your experiences. Share your thoughts with us and join the conversation in the comments below.

[If you're working on web applications, you really want to sign up for the UIE Web App Summit we're holding in Monterey, CA this January. At this 3-day event, you'll meet the pioneers and world-class designers behind today's successful web applications. For more information about the summit, see the summit website.]

3 Responses to “UIEtips Article: Visible Narratives: Understanding Visual Organization”

  1. Chris Hawkins Says:

    Oy! As I read this, I am reminded how so often Visual Design means something different to everyone, even within UE circles. Conversations get pretty muddy when using this overloaded phrase. This creates problems, especially in promoting the UE process, design and the skills sets required. It’s a pet peeve, and one of the most aggravating growing pains as a UE discipline we have right now. It helps, in part, to perpetuate the lipstick-on-the- pig mentality.

    Ok, now that I’ve ranted – the deal is that any good UE person knows there are TWO VERY DIFFERENT components to Visual Design. And we need words around this to discuss it intelligently.

    Component 1 – Layout, alignment and use of color or shape to guide or inform users. This is about whether a button is green or yellow, or if information is aligned for easier scanning, or if a button is placed where a user will find it. It’s all about supporting the user interaction. THIS is VERY different than

    Component 2 – Aesthetics – how colors compliment each other and how pretty the buttons are.

    I suggest we cut to the chase in our discussions around Visual Design, and immediately define the context, before talking any further. I propose we start using these words/definitions based around these aspects:

    1) (Visual) Layout and Form, “user experience as function” and
    2) (Visual) Look and Feel “Aesthetics” – beauty.

    #1, Layout and Form is part of supporting the interaction design and subordinate to #2, prettying it up. Of course, there is conflict and overlap at times, but bottom line “Form follows function.” Doesn’t mean you should ignore aesthetics – I believe it is VERY important – but lets’ keep it in context, shall we?

    Without this granularity, we muddy things up, for example, in delegating proper resources. Layout & form decisions differ from aesthetic decisions. ANd interaction/workflow specialists are not always great at Layout & form. Graphic artists (primarily aestheticians) often do not understand how the presentation – layout, form, button placement – must work IN CONJUNCTION with a dynamically changing, often task-based situation – as they work with static screens and often do not have user experience training.

    My two cents,
    Chris Hawkins
    chris@usermatters.com
    designer :: manager :: rabble rouser

  2. Sleep2death.blog(); » 如何组织视觉内容(Understanding Visual Organization 翻译) Says:

    [...] UIEtips Article: Visible Narratives: Understanding Visual Organization” href=”http://www.uie.com/brainsparks/2006/10/31/uietips-article-visible-narratives-understanding-visual-organization/” rel=”bookmark”> Understanding Visual Organization [...]

  3. Todd O'Neill Says:

    I think the quote from Stanford (”We find that people quickly evaluate a site by visual design alone.” — Stanford Guidelines for Web Credibility, 2002″) needs to be interpreted correctly.
    DISCLAIMER: I have not read their study.
    I come to the web discipline from the film and video discipline. In that world we refer to what Stanford is referring to as “production value.”
    Think about channel surfing on cable. You hit the local public access channel then click again and hit one of the big networks. Chances are you won’t click back to the public access channel because the production values (the program look and feel) aren’t as good, therefore the programming has less credibility.
    Did I miss Luke’s reference to this effect? Only after your site’s “production value” captures an audience can you expose them to your message, credible or not.
    Int eh web world we so often discuss the “micro” design of web content that we often miss the “macro” design. I think the perceived difference between film/video and the web is that the former is a thought of as “broadcast” and the latter as “narrow-cast.”
    All web content/presentation/functionality is “broadcast” due the ubiquitous and border crossing nature of the Internet. No matter what, if it ain’t “ready for prime time” it ain’t ready, no matter how much thought went into the micro design.

Add a Comment