My Notes on David River’s Webinar: Visual Design for Web Applications

Today I had the good fortune of assisting a virtual session with David Rivers, from Two Rivers Consulting, and the topic was Visual Design for Web Applications.

I specially liked that he established the difference between designing for a web site (when you worry about your users leaving) and designing for a web app (when your users are pretty much stuck using your design). He made very clear points that made this kind of design very distinctive. But read for yourself to find out more.

These are my notes

  • The first consideration is the use of the stage, or the screen real estate.
    • One should invest more on making the main part of the screen call the user’s attention, since it is the part he/she will be using always.
    • Navigation, ads, branding, etc. are off-stage and users will only be using them some of the time.
    • Since there’s a tendency to ignore off-stage elements once the main destination is reached, they should be as small as possible.
  • For the time before this destination is reached, we use attention grabbers.
    • Attention grabbers direct users’ attention to the right things on the screen.
    • Color, contrast, and size are examples of what can be used to accomplish this.
    • When we have a lot of important things to deal with:
      • We can use positioning
      • There must be a balance between the elements – visual distinction of relevance
      • Should equally important things have look the same? Not necessarily, but they should look similar (if we have a lot of elements equally important and they all look the same, the interface will appear too cluttered)
  • Interaction planes – Make stuff look like it belongs to the place it is positioned in.
    • Looking at the elements as if they were positioned in three-dimensional layers – give different relevance to elements that are ‘on top’ (e.g. the selected tab).
  • Borders, boxes and alignment – Whitespace + alignment can eliminate the need for borders and boxes.
  • Color, lighting and branding – they don’t run the show, but they make it come alive
    • Color in a web app doesn’t need to ‘scream’ as much as in a website.
    • Light sources are important for shadow creation on objects (and should be coherent).
      • Gradients are also a common display of light source simulation.
      • The logo can dictate the light source
    • Branding - users of web apps don’t care to be reminded about the brand, they just want to get their jobs done.
  • Fonts
    • Problem #1 – Selection
      • Designers don’t always use all the fonts that are actually available
    • Problem #2 – Appearance
      • Dealing with antialiasing
      • A lot of contrast can be a problem (e.g. white screen, black text)
    • Problem #3 – Variation
      • Normal, bold, caps, and situations for correctly using each of them
    • Typekit? sIFR? – Flash issues, implementation issues – AVOID!
  • Affordances
    • Something that seems clickable but isn’t is very misleading
    • Links should be colored differently (uniquely) and underlined on hover
    • Buttons should have three-dimensionality and different styles among themselves to emphasize distinctive relevance.
    • No contrasting colors unless there is a good enough reason.
  • Mockups with real data and implementation in mind – Helps us determine whether the actual data will fit correctly or change the appearance of our layout.