jump to navigation

Old and New Visuals for User Experience October 4, 2010

Posted by Edwin Ritter in User Experience.
Tags: , , ,
trackback

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

Comments»

1. Tweets that mention Old and New Visuals for User Experience « Ritter's Ruminations & Ramblings -- Topsy.com - October 4, 2010

[…] This post was mentioned on Twitter by Ben Shoemate, EdwinRitter. EdwinRitter said: New blog post on User Experience visuals, old and new. http://bit.ly/96Yw3c […]

Edwin Ritter - October 5, 2010

Ben, Thanks for the tweet on my blog post. Have a great day!

2. bet365 italia - October 6, 2010

hi!This was a really excellent theme!
I come from roma, I was fortunate to find your blog in bing
Also I get much in your theme really thank your very much i will come daily

3. Edwin Ritter - October 6, 2010

grazie, bet365 italia. I am glad you found and enjoy my blog. I look forward to you comments!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: