I wrote this post initially as a description to my portfolio project: Rusty Wood Trading Co. It became much longer so I decided to convert it into a How-to blog post instead.
For an online business, a reliable order form is crucial for sales revenues. What’s more is making it easy for users to get to that order page. As part of redesigning Rusty Wood Trading Co’s website to improve their order form, I also re-evaluate the website’s architecture. That is, the elements that form the foundation of the website.
In this post, I will focus on 3 areas:
- Global Navigation
- Home Page
Global navigation refers to links that are consistent across all the pages on the website. It’s important because not all your users are going to land on your home page first. They may have landed on your post on past cowboy event or a product page that has gained traction. Either way, a global navigation will give your website consistency, and help users navigate to other main pages.
1. Avoid duplicating menus
On the old Rusty Wood website, there is a vertical and horizontal menu. They both appear prominent and are actually duplicates. This creates a visual conflict: neither of them appear more important than the other. For the new design, one of them needs to go.
2. Sort by Importance
As the site grew, the number of links on these menus also grew. To avoid information overload, we sort them by importance. We call this giving elements hierarchy. Menus are best between 5-9 links. If there are more, we can group them.
3. Group Links
Because there are so many important links, grouping allows more to be shown at the same time. Here’s how I’ve grouped Rusty Wood’s navigation links:
- Frequently accessed information is allotted to the utility menu. These include links that we want users to have easy access to, but is not the main goal. To make the contact information more apparent, I include the email and phone number near the utility menu, also globally available.
- Products and services is allotted to the main menu, the most prominent. The main menu is often horizontal near the top, with larger font size.
- Secondary information related to ordering is allotted to the footer. This includes About Rusty Wood, Testimonials, FAQ, and Shipping & Payment.
A search bar/functionality is almost a must on all websites. If users can’t find information from your genius tree of navigation, then a simple search bar will definitely help.
Once you have the global navigation sorted out, how you sort the rest of the website follows pretty much the same method.
On the home page, we re-emphasize hierarchy by grouping elements in different sections.
- First, a large banner image – serves to define Rusty Wood as an enthusiast about enjoying the cowboy experience
- Then, products and services – serve as call-to-actions
- Lastly, logos of distributed brands – serve as stamp of credibility
In contrast to the old website, these elements all rely on images to make them easier to process. Notice the different sizes of the images used on this page. Each section is also distinct from one another with their different background colours, and use of negative space around them.
To make shopping easier, there are cues throughout to show users where they are on the website as well as where they can navigate to.
- The breadcrumb tells them how deep into the site they have gone.
- The sidebar menu tells them where they can go.
- Repeat images tell users they are on the correct page. Ie. when you click on Firearms on the home page, you see the same firearms photo on the category page.
On every product page, there is a prominent “Order / Request” button that takes them to the order form.
Most importantly, the order form works and can be easily managed without writing complicated code!