Part 6 – A Look at the User Experience Component of Our E-Commerce Website

Please visit http://www.byobwebsite.com/05/video-tutorials/how-to-make-an-e-commerce-website/using-wordpress-and-thesis/the-user-experience/ for more.

Okay. Welcome back to Part 6 of the Build Your Own E-Commerce Web Site tutorial series. In this sixth and last part of the lesson we’re going to take a look at the User Experience component of the site.

Navigation and Search Functions

The User Experience component as I’ve said before comprises a number of elements. The first element is the ease of navigation, the ease of understanding where you are on the site. So we’re going to learn how to create navigation that is easily followed by our customers. As I’ve said before that includes not just the menu system but it also will include a system of creating these bread crumbs so that a customer can find out where they are in the system and can easily navigate around. You know, they can click on these things and then click back to the full product information. They can go back and take a look at other products and they can essentially maneuver their way around the site using this bread crumb system without ever getting lost.

Obviously there’s a Search element of this site too, so if we want to look for a book about “bananas”, the search results brings us back to both books about bananas and also an article from the blog about bananas. And then we have the site map which we’ve called “Important Links” here but it’s a site map that takes us to the main sections of the site so we can find our way around easily down here from the bottom as well as little sort of little teaser navigation elements like Recent Posts for example.

Customer Support

The second part of this system is customer support. In my opinion customer support should be as plain as the nose on your face especially when you’re purchasing something like that. Not only is it going to reside up here in the top level so we can see what’s going on, but also so is Company Information, About us and our Contact Information (telephone, email and physical location) is going to be a very prominent element of this site. People feel a lot more comfortable if they know where the company that they’re dealing with is. So no post office boxes but physical addresses, real phone numbers, and real methods of obtaining support easily found on the site.

Use WordPress System of Comments to Create Customer Reviews

For products we will be converting the WordPress system of comments into Customer Reviews. So if a customer likes the book and wants to add a review to the book they can do so. And they can do so using the native WordPress functionality which means that there can be threaded comments and all the rest of those sorts of things that you can have in WordPress. And yet when you’re on a blog post and you want to comment on a blog post it’s not going to show up as a review of any of the products. So this gives our customers a way of participating in the site.

Clarity in Navigation and Page Location

And then finally we have clarity and clarity has three big elements. The first element is “where am I?” So if somebody is searching for something and Google returns the result that brings them to a post on your blog, they need to know where they are and we’re going to give them clues as to where they are. Say for example they end up on the Cherries blog post, we’re going to give them clues as to where they are. Clues first in the URL, it will tell them very clearly that they’re at this location and they’re looking in the category of “fruit” and they’re looking at an article called “cherries”. We’re going to show it in the bread crumbs, so again the bread crumb trail shows the same thing. We are going to show it in the titles so that our titles clearly identify what it is that the customer is looking at.

Graphic Elements as a Visual Guide to Elements of the Site

And then we’re going to have graphic elements. For example if we are over at the Books section we can tell that we are at a page that is below this catalog and if we hover over this we can see that we are at the Books and that’s because we’ve given it different colors. We also have set off the blog by having a different page format with the blog so there’s other information on the blog than there is, say at the Home page. And we’ll also use other kinds of styling so that it’s clear to a user that you’re looking at a catalog. Not only does it say “Catalog” but this also even looks like a catalog. So does this, this looks like a stacked product catalog. And our other catalog looks more like a vertically stacked catalog. So it’s clear from the visual cues what’s going on here – what it is that we’re looking at.

The second element of clarity is “where do I want to go from here?” and again not only do have clear navigation up here at the top but we also have this navigation which will allow them to step back into another place, perhaps even Home but allow them to maneuver their way through the site. And the Search function and the site map function will all contribute significantly to helping our customers understand where it is they want to go from wherever they are on the site.

And then finally we’re going to talk about “what is preventing me from either knowing where I am or knowing how to go where I want to go?” And so we’ll be looking at distracting elements that can draw your attention away from the critical part of the page. We’re going to look at avoiding the lack of coherent organization and different problems with navigation systems that make traveling through the Web site counterintuitive.

Okay, so that wraps up Lesson 1 of the Build Your Own E-Commerce Web Site tutorial series. There are 12 lessons in this series where we will be looking at all of the elements that we have overviewed here in depth including how to create this entire Web site. I hope you found this lesson valuable and I hope you’ll be successful in creating your own E-Commerce Web site.

1. By: byobwebsite
2. Categories How To
3. Views 15
4. Added :04-Jan-11
   Report This Video