If you missed the first half of this post check out 6 Steps of User Experience Part 1 here!

In this post I am going to outline steps 4-6 on how to design for user experience. Just to recap, in the previous post we covered Step 1: Strategy, Step 2: Scope, and Step 3: Structure. THese steps took into account a lot of planning and gathering of data. Moving forward is where we get to work and start creating the final product!

Step 4: Skeleton

This step is all about building out all the components of the site and how they connect to each other. The best way to go about this stage is to compile a list of pages and create a diagram or flow chart. In this step it is important to keep a hierarchy of pages so that you don’t assign equal weight and accessibility to all pages. Like in the step before it is important to identify the most common course the user will take on your site. For example, you are an e-commerce site so you probably want your navigation to focus on your products. But what if a user want to learn more about your company or investigate your career opportunities? These things need to be included but can be use din what Garrett refers to as a “supplemental navigation.”

The next portion of this step deals with the layout. At this stage it is important to create a wireframe. If your site is relatively simple, your wireframe may cascade to all of your pages. In all likelihood this will not be the case and you will have to identify multiple main wireframes that can be used across the site. It is important here to keep you brand language in line. For example if you have the nav in the upper left in one wireframe, it is probably important to keep that consistent throughout or else the user will be lost.

The skeleton phase puts together all of the previous steps and brings them to life.

Step 5: Surface

Step 5 is all about the look of the site. But don’t think this step is purely aesthetics. The goal of this step is to highlight and reinforce all of the goals from the previous stages. Garrett mentions in his book that reachers will use eyetracking software to learn what people instinctively look at first when they see a site. If the user isn’t looking at your most prominent feature first then there may be an issue with design. You also want the user to flow smoothly around the page. If they have to jump around to accomplish their goal then you may have had a misstep in the skeleton phase. How do we control where the user’s eyes go? There are some key design tools to impact how someone looks at your site including contrast, color pallets, grids and typography.

The last piece of this step is all about consistency. As you are designing there should be a clear cut set of rules for things such as headers, spacing, fonts, and color palette. A good way to make sure you have consistency here is to create a branding guide that lays all of this out.

Step 6: Testing

This step was not outlined in Garret’s 5 Elements but I think it is an important enough part of the process to warrant it’s own section. Once all of the 5 steps are complete, your work is hardly done. This is the point where you circle back and test how the site works. Something you may have come up with in the process may have failed miserably in the real life application and will have to be reconceptualized. Depending on the problems you encounter you may have to jump back to any one of the 5 stages. Be careful when doing this because you may cause what is know as a ripple effect which is where changes affect a wide variety of other parts of your site.

By: Blueprint