Build Your Own Business Website header image

Lesson 1 – Part 6 The User Experience in our E-Commerce Website

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.

In this sixth and final part of the lesson we’re going to take a look at the User Experience component of a Thesis e-commerce website.

Navigation and Search Functions

The User Experience component comprises a number of elements. The first element is the ease of navigation, the ease of understanding where you are on the e-commerce website. 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 a system of creating these bread crumbs so that a customer can find out where they are in the website system and can easily navigate around. They can go back and take a look at other products and they can essentially maneuver their way around the e-commerce website using this bread crumb system without ever getting lost.

Obviously there’s a Search element of this Thesis e-commerce website too. If we 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. 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 e-commerce website so we can find our way around easily down here from the bottom as well.

Customer Support in the WordPress Site

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

Use WordPress System of Comments to Create Customer Reviews

For products we will be converting the WordPress system of comments into Customer Reviews. If a customer likes the book and wants to add a review to 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 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. If, 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 and 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. If we hover over this we can see that we are at the Books. We also have set off the blog by having a different page format 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 looks like a catalog. So it’s clear from the visual cues what’s going on here in our Thesis based e-commerce website.

The second element of clarity is “where do I want to go from here?” and again not only do we 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. The Search function and the site map will all contribute significantly to helping our customers understand where it is they want to go from wherever they are on the Thesis e-commerce website.

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?” 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 e-commerce website counter intuitive.

Okay, so that wraps up Lesson 1 of the Build Your Own E-Commerce Web Site tutorial series.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
8 Comments… add one
8 comments… add one
  • Jason Pugliese July 26, 2010, 5:50 am

    Hi Rick,
    I am wondering – is there a way to create printer friendly versions of the tutorial transcripts?

    • Rick Anderson July 26, 2010, 8:11 am

      Not yet, I am working on a PDF version but it will be a while before it is available.

  • Mado Reid August 21, 2010, 7:44 pm

    Hi Rick,

    Great tutorials. Question: Why do you prefer AWeber over ConstantContact?

    • Rick Anderson August 22, 2010, 11:13 am

      I’m not very familiar with Constant Contact. A year ago when I was deciding which email system to use Aweber had a great deal more functionality. Functionality I wanted. Although at first I used Mail Chimp because it was free. However, after working on a client’s Aweber account I liked the features of Aweber better than mail chimp so I switched.

  • Bryan January 11, 2011, 3:16 pm


    Re: That member who asked about a printer friendly version of the tutorials. He could simply highlight the text with his cursor, Ctl + C and then paste it into a Word document. Works great.


    • Rick Anderson January 11, 2011, 3:57 pm

      And what’s coming is even better. We’re in the process of turning our transcripts into written tutorials that will be available for download. They will be stand alone written instructions that follow the videos but are cogent without them.

      We’re starting with Customizing Thesis Like a Pro and I expect that we’ll be posting lesson 1 on the site within a week. It’ll take a few months to finish them all, and once the Thesis ones are completed well be making the new video lessons the priority. Anyway, stay tuned.

  • angie July 5, 2011, 6:26 pm

    WOW! great info here. Can’t wait to get through the other lessons. Thanks.

    • Rick Anderson July 6, 2011, 4:31 pm

      I’m glad you’ve found them useful. I hope you like the rest of what we offer.

Leave a Comment