jump to navigation

Old and New Visuals for User Experience October 4, 2010

Posted by Edwin Ritter in User Experience.
Tags: , , ,
4 comments

When it comes to web design, User Experience (UX) is one area where I learned a lot and, came to appreciate the value of, early on in projects. Having a good UX design is a key success factor in a good web site.  As the web is a visual medium, using a simple graphic to describe the site design elements is a wonderful thing.

Having the UX defined is typically an early deliverable and is useful as the project goes along. It may be tempting to minimize the time spent on UX. If you skimp on the UX, as with other project fundamentals, you will revisit it later many times until you get it right. Pay early in the project and allot the proper time required to get this as complete as possible. In a visual medium, good design can be an intangible thing. You know a good design when you see it. Trying to articulate what makes a design work can be simplified by using these graphics.

Elements of User Experience

Classic UX from Jesse James Garrett

The classic image from Jesse James Garrett shows the elements involved in UX. This timeless visual is now 10 years old also and still relevant. I keep a copy of this with me constantly on web projects. When the discussion turns to UX, I often refer to this image to understand and help drive a solution.

===============================

Fast forward to our current gestalt with User Centered design and here is a great graphic that uses the familiar iceberg analogy.

Elements in user Centered Design

There is a lot of information conveyed in this visual and includes the elements from Garrett’s classic UX. I like the progression taking a strategy to concrete concepts, showing how planning drives design and results in launch taking while into account the personas, user testing (!) and observation. Last, I really dig the various ways the user goals are shown. It gets to the intent of the site and who will use it – instruct (tell me), inform (show me) and reveal (involve me).

This visual captures a lot of the current best practices for web design. Notice that the design is agnostic on platform delivery. This approach on basic design concepts works for the web, mobile and tablet platforms.

Both old and new visuals are useful for UX (and information architecture) discussions to convey the concepts for a site ‘look and feel’ . Each clearly shows what is required in UX and helps ground everyone on how the site will be used.

Have another useful visual? What is your favorite?

Advertisements