Design Guidelines
Best Practices
•Intuitive Placement for users’ expectations
Once we know what our goals are and the type of content that our visitors want, Now we can look at web design and put it to work to achieve our goals!
There are a few basic practices and general guidelines to keep in mind.
For the past 15 years of so, users have developed a specific set of expectations when browsing a website. You want to make sure that whatever design you implement incorporates these basic expectations.
If you Google this topic you will see the research that supports placement for key features on your website where users intuitively look for them: Example “Home” is usually in the upper left combined with your logo.
All navigational menus should run across the top and/or down the left side of the page Your site search should be in the upper right A link to your shopping cart basket should also be in the upper right.
Design Guidelines
Wire Frames
• Help you lay out the architecture of the page
• Easy to move things around before the design is built
• You can do it in Powerpoint
You can experiment with where content and features will go within the architecture of your site by using a wire frame. Whether your creating a new website from scratch, getting ready to undergo a full redesign of an existing site, or just creating a new landing page for a new campaign you’re launching, it’s very beneficial to use a wire frame as a way to organize your thoughts about how you want the page laid out.
Wire frames save you a lot of time in the design process, because they allow you to move key features around on the page easily. You can do this in a simple powerpoint presentation using text boxes to represent the features on a page. Once you’re happy with how the main blocks and features are laid out on the page, then you can work on “pretty-ing” it up with a design that works with your company colors and imagery.
In a typical example of a wireframe you can normally see the “home” logo in the upper left. Search is normally on the right and menu/ navigation links are commonly across the top and down the left.
Have a look at a few examples from your competitors to see how they have incorporated some of these basic user expectations we discussed. Here are some example observations:
Logo/home on the upper left
Search on upper right
Navigational links across the top and down the side
Menu highlighting content specific to the personas who visit a site.
Put their phone number and email in the header so it’s at the top of every page (at the ready for any visitor)!
Use relevant keywords throughout the content. This is important for the visitor and also for ranking well with Search Engines like Google, Bing & Yahoo.
Altered the top navigation concept a bit and placed 5 button images at the top geared towards the main topics their website visitors are looking for.
They placed more navigational links down the left side.
They also use relevant keywords related to their location and business. This is great for the visitor and also for Search Engines to rank you higher for those specific keywords like “builder in Essex”, etc.
They have placed the social icons on the home page & also a news feed from their Facebook page.
Highlight Important Actions – Next Steps
In addition to adapting user expectations into our design, we have to make sure all those goals we talked about earlier are translated onto the page as clear calls to action for the user. We should always place the call to action where the user doesn’t have to scroll. Typically this means towards the top, but you can repeat the call to action in other areas elsewhere on the page. It’s also good tohave the call to action repeated at the bottom of the page so that if the reader has read all the content they can click on the call to action at the bottom and not have to scroll back up the page.
Something you can build into your design on all your pages is an area for “Next Steps” . This givesthe user the actions you want them to take next after reading content on that page. So for example if it’s on a Course page, next steps might be something like: ‘Sign-up for the course’ or ’email us’
It’s a good idea to keep the ‘Next Steps’ area in the same spot on every page so the visitor begins to expect to look there for what to do next.
Important Actions
What is excellent is if the contact information, map, & your hours appear on every page. Also the contact forms is on all the pages. It’s a strong call to action to visit or call them.
Try to use a clean simple design and put the contact information at the top right of every page (above the search). This is a great strategy to always encourage visitors to contact your business.