RossOlson.com

What I learned at Macromedia's UCON99

Notes from Navigation and Information Design

I sat in the front row of the session. I figured I'm only there for a couple of days, I'd better make the most of it. The session was hosted by Norm Meyrowitz (President, Macromedia Products) and the two content presenter were 'Philip' from www.turntable.com, and 'Ammon' though I didn't catch his company.

Here is the outline of the sections below:

• What is the purpose of a User Interface?
• Fundamentals of UI
  • On Side-bar Menus and Navigation
  • Roll over feedback
  • Dimensions
• Devices
  • Orientation Elements
    • Titles and Subtitles
    • Path Routes
  • Navigation Elements
    • Menus
    • Hypertext
    • Other navigation
    • For "outside" of the page navigation
• The Development Process
  • Define
  • Design
  • Build

What is the purpose of a User Interface?

UI's purpose is, at it's heart, communication: exchanging information. It is both sides of input and output. It is systematic organization, providing clear choices, providing guidance in a context sensitive manner.

A good UI should provide easy answers to these questions: Where am I? Where did I go? What can I do?

Example Sites: commarts.com, mrnoodlebox.com

Fundamentals of UI:

A UI needs to be: logical, refined, hierarchial. The need to provide feedback, orientation, consistency, multiple ways to navigate, and instant gratification if possible.

On Side-bar Menus and Navigation: Open up submenus when in the subsection (Context sensitive menus which also provide an overview of where a person is in a site by having them appear inside the high level menu. (This is what my navigation bar does.)

Roll over feedback: By providing roll-over feedback you're keeping information tucked away and off of the screen until the user 'focuses' on that content by putting their mouse there. In many ways this parallels the real world because humans only truly 'see' what their eyes are looking directly at. Once that focus has been made then the detail is revealed.

Dimensions: UI elements have a number of different attributes, and by using them properly you can arrange a logical and easy to follow order of the information that's being presented. Try using one of the following to organize the information on a web page:

Each one of these can be the 'index', the method by which you have sorted information for your users. For example, at the library, the fiction works are usually laid out by author in alphabetical order. On a web site you could pick one of the above to organize the information.

Example Sites: FUSE98.com, nrg.be

Devices:

There are a number of different 'devices' or UI elements used in web design. Starting with this list, I was considering compiling an encyclopedia of UI elements. Here are the ones that he pointed out:

Orientation Elements:

Titles and Subtitles: Using consistent titles in a web site makes it easy for people to recognize the information they've already seen and what they still want to explore. (See useit.com's article on Microcontent.) Use subtitles (once a visitor has reached the page that is titled) in order to quickly let them know if what they were expecting is present. Titles and subtitles are the answers to 'Where am I at?'

Path Routes: Also known as breadcrumbs, these are ways by which a site lets the visitor know where they are in the context of the site and where they are in the structure of the site. At Yahoo, just under the main menu they provide a set of links like this: "Business > Companies > Technology > Computers > Macintosh > Software". These breadcrumbs give context to the location of the current page. (The battle of dividers: ">" vs. "|" vs. ":" has basically been won by ">") Other forms of providing path routes goes back to menus that expand to insert submenus.

Navigation Elements:

Menus: Menus are lists at their heart. They can be located at the left/top/bottom/right of a screen (page). The can expand when rolled-over, or drop down when clicked. They generally layout the way by which a site is organized, alphabetically, grouped by category, or by time (chronologically). I like putting them on the top of the screen, either on the very top in a thin strip, or down one of the margins. Take a look at the navigation at OMSI's site, particularly the inner pages: http://www.omsi.edu/geninfo/

Hypertext: Hypertext navigation is essentially navigation that is inside of the content. This is classically recognized as underlined words or phrases, but I would also include images that are part of the content, like diagrams and photos.

Other navigation: Buttons, Hotspots with in pictures (image maps), key commands (shortcuts like Ctrl-x to Cut in non-web applications and there are new ways of establishing these for web page elements), Cursors and context-aware cursors (arrows changing to pointing fingered hands.

For "outside" of the page navigation there are windows that can be pulled up like pop-ups, and remotes. Windows can opt to have scroll bars or not, and of course there's the ever popular frames.

Example Sites: moneymark.com, terrarium.nu

The Development Process:

These are the steps that were laid out concerning the process of developing a web site, or application. They are a good way, but not the only way of going about this business.

• Define: objective, content, audience
• Design: usability, scalability, flexibility
• Build: flowchart, prototype, test, modify

I've developed many different lists of 'The Process' and will likely make more. But these are mere guidelines. For me, nearly every site I've worked on has been completely different.