Website Inspiration Blog | SpicyWebDesigners.com by Luc Arnold

After writing one of my last articles “5 elements that can improve your website’s usability” I thought that it was time to let you in on some of the best plug-ins to help you accomplish better web usability in your own website.  A lot of web usability uses common sense and some things that may even seem dumb to the average web designer out there are considered by web usability experts as standards like labeling the search on your website “Search”.  In this article I am going to focus on breadcrumbs and the use of breadcrumbs in your website to help you enhance the usability of the website and also point you to some plug-ins that you can use to achieve this.  Jakob Nielsen, a web usability expert and author of UseIT.com defines breadcrumbs as…

“…a single line of text to show a page’s location in the site hierarchy…”

Source: UseIT.com; Jakob Nielsen

Now that we know what a breadcrumb is let’s explore them in a little more depth.

Breadcrumbs Explored

Many times (more than I’d like to count) you’ll see breadcrumbs on ecommerce websites, community based portals or other large sites but this doesn’t mean that you can’t or shouldn’t have this functionality on your own website.  Breadcrumbs, most notably the ones from the story of Hansel and Gretel and they act in the same manner allowing people to find their way back when they navigate back easily and they look like this…

When you think about improving your website’s usability regardless of whether you run it on WordPress, something custom or some other platform it’s important as web developers and web designers to understand that you don’t have the same knowledge of the web that your visitors do for the most part and it’s your job to make navigating the website easier to use.

Breadcrumbs are considered as secondary navigation on your website because they work similar to sitemaps in that they provide a site hierarchy breakdown and usually they only take up minimal space on the website.  They show users where they are currently in the grand scheme of things on your website and allow single-click access to higher levels of the website to help people go back without the use of the web browser’s back button.

So you may be sold on using breadcrumbs now but they aren’t included in your website’s current features.  No need to panic!  If you happen to be running WordPress, Magento, Durpal or some other pre-built website content management or ecommerce system here are some plug-ins that can help you get this functionality working on your website.

Adding Breadcrumbs in WordPress

Yoast Breadcrumbs – This great little plug-in allows you to all a breadcrumb trail to your website and gives you plenty of ways to tweak it.  It was designed by Joost De Valk to give people control in adding breadcrumbs to your website and also provides the ability to edit them in a wide range of ways with good SEO practices in mind.  Click here to read more about it and download it as well.

Breadcrumbs NavXT – This is a great plug-in for people looking for the ability to control their breadcrumbs specific to the Pages & Posts, Categories, Tags, Date Archives, Current and Miscellaneous web pages in your website.  In comparison to the Yoast Breadcrumbs plug-in if you are looking to be able to control your breadcrumbs specific to what is being accessed this will definitely help you out.  Click here to read more about this plug-in

Adding Breadcrumbs in Magento Commerce – Breadcrumbs are included in this ecommerce system by default under their “Catalog Browsing” features. Click here to read more about this

Adding Breadcrumbs in Joomla! – If your site runs on Joomla! They have some instructions on how you can go about adding breadcrumbs.  Click here for more information.

Adding Breadcrumbs in Drupal – If you run Drupal 7.x or later the ability to add breadcrumbs is included but if you run another version of Drupal before 7.x there are modules that Drupal specifies and that you can download to give your website this functionality.  Click here to get more information about this.

Adding Breadcrumbs in ExpressionEngine – If you run ExpressionEngine there is a simple piece of code that you can add to your website that allows you to display breadcrumb hierarchy.  Click here for this information.

As you can see the major CMS platforms and ecommerce systems have ways that are pretty easy to add this functionality to their web platform.  Even if you are developing your own custom solution adding a breadcrumb hierarchy will help your visitors get around your website quickly and keep them happy!

Luc Arnold

Remember “Follow the Breadcrumbs!”

Well its Christmas time and I don’t know about you but I’ve been busy visiting family, spending time with my wife (it’s our first Christmas in the new house) and also taking some time to relax over the holidays.  I enjoy reading and always find myself reading business books, technical manuals and those sorts of books.  I love digging into some new concept or principal whether it’s to do with web design or personal finance.

One of the gifts that I received for Christmas was Steve Krug’s book “Don’t Make Me Think”  It’s a quick little read, at around 200 pages that offers up some valuable thoughts for web design professionals from project managers to beginner web designers and everyone in between involved in the process of designing websites and it discusses the core concepts of web usability.

The book itself contains the interesting perspective that most web design professionals give users of their websites too much credit as to how they use the web and websites in general.  If you run your own website or you design websites for a living then you may have heard of the term “web usability” which is best defined by saying that…

“Web usability is the approach of making websites easy to use for end users.”

That is the plain and simple definition of web usability and the key to great web usability is that a website is “easy to use”.  This does not mean that it is easy to use for a web designer or web development professional but that it’s easy to use for the average visitor to your website who may not have the same technical abilities as the people who built it.  At the end of the day, most people don’t build websites in their spare time and can get lost easily if your website is not accommodating to the average website visitor.

The book “Don’t Make Me Think” contains hundreds of bite-sized chunks of valuable information about web usability but the true value of this information is in its application.  One such area that the book focuses on are the core elements that improve web usability specifically through how people use standard websites and their associated web pages.  The 5 key elements that help website visitors use a website more effectively are the “Site ID” also known as the Logo, the “Utilities” of a website, Sections and Subsections of a website, a way to search the website and Page Names.  So let’s explore each of these elements a little more in depth.

1. “Site ID” aka “Logo” – When users are on a website they usually identify where they are by being able to see the site name, branding and associated logo of the specific website they are surfing.  The Site ID allows them to make this distinction and allows them to trust in the website they are viewing.  The Site ID can and should be clickable allowing them to click and go to the Home page at any point in their journey on a website.
2. “Utilities” – Just like it sounds the utilities of a website are more about information or ways of getting to information that help you (the website visitor) when surfing a specific website.  Some examples of utilities are a sitemap, FAQs, Forums and an “About” page just to name a few.  As a general rule you should only include a few utilities because the more utilities you add to a website the busier it becomes and the more confusion it caused amongst your website’s visitors.
3. “Sections” and “Subsections” – The sections of a website are the main places you want people to go and are also referred to as the “primary navigation” of a website.  On an ecommerce website this would include sections like products, downloads, books and specials just to name a few.  These sections lead you to subsections of the website and if you have a section like Products some associated subsections would include Audio / Video, Computers, Gaming and other various related subsections.
4. A way to search the website – Not everyone that visits your website is interested in clicking and clicking some more to get where they are going.  Using search on a website allows you the freedom (if done correctly) to search and find things fast.  If the search is accurate then your visitors will be happy that they got what they are looking for in the first place and if it isn’t accurate then they will get frustrated and most likely leave.  The other thing that Steve Krug’s book states and something that I think most people forget is to name your search “Search” and not “Quick Search”, “Fast Search” or some other take on that because it confuses people and makes them think more then they need to.
5. Page Names – This particular element of a web page is important to website visitors like the ones visiting yours right now because it tells someone that clicks on a link that they’ve reached the correct page.  If your link is called “Store Hours” then the proceeding web page that is brought up should being called “Store Hours”.  Whenever you go into a store and look down the aisles what do you normally see?  Big signs that tell you what you are going to find in the aisle.  They are clear and you can see them from a mile away.  Page names should act in a similar way; easy to view and on a certain level easy to understand.  Put aside the styling and the color palettes for a while and draw attention to the page that the viewer is currently on because it builds trust and communicates clearly that they’ve found the correct page and no further thought is required.

Starting with these 5 key elements you can improve a website’s usability and its profits.  It’s all about clear and unified communication when maintaining, optimizing and designing websites that people actually want to use.  Without this your visitors can get lost, become frustrated and confused or simply give up and leave which raises that ever present “bounce rate” and stops people from coming back.  So give it a try and keep those “fans in the stands” so to speak.

Luc Arnold