• Part I: Introduction and general tips
• Part II: Proper use of breadcrumbs

In this article I will talk about how to design links wisely and in such a manner that your visitors don’t get confused.

Stay with the trend

Don’t be overly innovative with your link stylesheet properties. Links should be blue (unless the color hurts your overall scheme) and underlining is a must. A very common practice is to have them do something (change color or get underlined) when you hover them. All these will help your visitors easily identify links and treat them as such. On the flip side, don’t stylize your non-linking text in such a way that it may be confused for a link. Underlined key phrases are a major no-no. Sidebar links should be clearly identifiable. Here is an example of a good practice on a recent CNN.com article:

You can easily spot the in-text link and the sidebar, right? Thought it could be improved by underlining the links.

Spacing

Make sure you use generous spacing between your links so that your visitors don’t accidentally click on the wrong one. Here’s a sample from eBay.com with plenty of space between the page numbers:

New tab or same window?

There are arguments for both alternatives. As a rule, always open external links in new tabs, unless you specifically want your users to leave your site completely (which might be the case for a squeeze or landing page meant only to capture a lead then forward to the final URL). PDF’s are best shown in new tabs (use PDF files with diligence though, Dave has a good take on this)

Indicate what you are linking to

I don’t advocate preview thumbnails, I find them extremely annoying as they clog up the browser on slower computers. If you are linking directly to resource-consuming content like non-embedded videos, MP3’s or PDF’s you should indicate it clearly with an icon placed before the link. Simply mentioning click here to download the report in PDF format won’t do, as some of your visitors might simply scan through the text rather than read the whole paragraph and simply miss the part where you mentioned the format.

URL shortening services

Stay away from such services, unless you have a truly valid reason to use them. A lot of people (myself included) would first hover a link to see where it points to. If you think that the remote URL is too long and it would be “nicer” if you used a 10-character one just don’t do it. I don’t like surprises, I want to know where I’m clicking to. Keep URL shortening for Twitter and services where space is limited.

Non-http links

Don’t use mailto:, ftp: or other protocols (anyone still using gopher?) inside links. Having my email client pop up when I click on a link is definitely something I don’t expect. Implement a contact form and link to it if you want to provide your visitors with means of emailing you directly.

What is a breadcrumb?

Breadcrumbs from a web design perspective are the series of links that tell you where you are on a page and the folder structure (i.e. Main category > Subcategory > Product name). On sites with lots of pages and a clear structure, breadcrumbs can consistently enhance the way visitors find their way around.

The term comes from the Grimm Brothers’ fairy tale “Hansel and Gretel” where two little children drop breadcrumbs across a forest to trace their path back home. Just like in the tale, breadcrumbs in a web application offer users the possibility to track their path back to the point where they landed on your website.

Amazon’s take on implementing breadcrumbs is one of the most conservative yet widely used ones. The breadcrumbs are placed at the top of the page and each crumb except for the last one is clickable and points to the corresponding category.

What you can learn from this approach:

Be consistent

All crumbs should be named the same throughout all corresponding pages. Following the example above, don’t use “Computers and Accessories” on one page and “Computers & Accessories” on another. The crumb name should match the page title – you shouldn’t name your crumb “Laptops” if the name of the page is “Notebooks”.

Aid navigation, don’t replace it

The sole purpose of the breadcrumbs structure is to let your visitors know where they are and should not be a substitute for navigation. For the sake of consistency, your navigation bars should be kept intact.

Don’t link to the current page

Based on the reasons above, it goes without saying that the last crumb should not be clickable. The last item is merely an indication of where you are within the site. Don’t link to the current page, not even for on-page SEO reasons – the added benefit is insignificant compared to the usability-wise confusions it creates.

Make the last crumb stand out

Since it’s not a link, common design knowledge says the last crumb should be of a different color (see the screen shot above). Don’t even underline it, an underlined phrase usually indicates a hyperlink.

An excellent place for using breadcrumb navigation is on e-commerce sites that have a hierarchical page structure. If your service is selling a wide variety of products grouped into logical categories, such navigation is recommended. On the other hand, you shouldn’t use it on single-level sites with less than than two levels of depth. A good way to assess if your site would benefit from a breadcrumb structure is to build a sitemap or a diagram representing your structure and then analyze if breadcrumb navigation would improve the users’ ability to navigate within and between categories.

Stick to the rules

Odds are that you, as an inexperienced designer, won’t be able to come up with a new type of interface that will shake your visitors and make them go wow, while remaining usable. Stick with the standard trends. Being unique and standing out in the crowd when it comes to interfaces isn’t always an advisable thing, unless you really know what you’re doing. Rules are meant to be broken, but only when you have the knowledge and experience to pull it off.

Focus on conventions

This is somewhat derived from the point above, but should be mentioned separately. The average web visitor is used to conventions (and they love them, whether they know it or not.) – so you, as a designer, should give them what they want. Titles at the top, sidebar with one or two columns at the right and the content next to the left border is a safe standard when you are learning the ropes.

Get inspired, but don’t steal

When having doubts, it’s okay to have a look at how the “big fish” have dealt with your problems. It’s okay to get inspired from a great site’s appearance and try to do something of the kind – just make sure you are putting a new work together, rather than copying exactly. The reason why I’m telling you to take a look at some of the bigger websites is that those companies have invested quite a lot of time and resources in developing them and should (Though not always) provide you with good inspiration.

Less is more

There are hundreds of millions of websites out there. Don’t simply assume that a new visitor has all the time in the world to read what you have to say and find spend minutes browsing through overly-complicated page structures. Don’t annoy your visitors, or you will lose them. Keep your interface simple, learn about basic usability principles and apply them thoroughly. You will find lots of insightful tips on this blog and more coming in future articles from this series.

Write with user experience in mind

Site usability isn’t all about the design. The content itself can make the overall browsing experience more pleasant. Break your ideas into paragraphs – no one likes to read chunks of text the size of a Dostoevsky novel. Use bullet points where applicable. Make use of headings.

Your visitors scan more than they read

… and there’s nothing you can do about it. Steve Krug explains in his great book “Don’t Make Me Think” how you must make things as intuitive as possible so you will minimize the required thought  from your visitors’ perspective. Have them find what they want as quickly as possible, or they will get bored and might eventually click away or hit the Back button.

This concludes the first episode on usability tips. In the next parts we will focus on several design-specific elements.

It’s your friend Dave here. I just wanted to let you know how much my wife and I appreciate you being there for us when we’ve both had a really long day, and/or week, and we don’t want to cook.  It’s been really helpful! I don’t want to seem ungrateful, but we’ve noticed something  that you frequently do which seemed like a cute quirk at first, but over the years it’s become a bit annoying.

Truth be told, we know we’re not the only ones… in fact a lot of your friends have been talking about it behind your back.  I know this may not be the easiest thing to talk about, but someone needs to tell you so that we can break the cycle. Please, I beg you, stop using PDF files for listing your menus on your websites! I’m not knocking the technology, it’s great when used in the proper context. This is certainly not it.

Why you might be using PDF Menus:

• It’s a lot easier, as you can usually just use your existing menu files to export a PDF
• You don’t know what a PDF is, and your webmaster did it. (If you click on the menu and it takes a while to load and you don’t see your website anymore, then it’s probably a PDF)
• You are far too busy, and would like less people to come eat at your restaurant
• ???

Why you shouldn’t be using PDF Menus:

• They take a lot longer to load than a menu set up in your website would. The Internet has made us all impatient. At best your potential customer will be annoyed by the wait, at worst they will give up and go on to the next site.
• They can be frustrating. If you don’t use it often, your pdf reader may need an update.  Even today the most popular browsers can have difficulty with pdf plug-ins, resulting in browser hangs or crashes.
• They are less useful.  Having an entire menu to look at, or multiple menus, may work when you’ve decided on a restaurant and blocked off the next hour to eat.  When you’re trying to find a place to eat, you want to compare options and prices.  Having to scroll through pdf menus in multiple tabs or windows to find the things you’re interested is time-consuming and frustrating.

I know what you’re thinking, “So what Dave? My regular customers love me, and will put up with the wait!”  You’re probably right about that, but your regular customers probably don’t even visit your website, as they already know all about you. The focus of your website should be on showing and telling new potential customers about your restaurant, how great it is and hopefully converting them into new regular customers.

The two most important pieces of information for a new potential customer are going to be the menu, followed by the location. If customers are irritated when loading the most basic information, and that’s the first experience they have with your business, you are starting off on the wrong foot. Despite what we want to tell ourselves, first impressions do matter and it’s difficult to overcome a poor first impression.

I know it’s not easy guys, it’s more time consuming and complicated and just all around harder to do it the right way, but let’s face it: the most worthwhile pursuits in life usually aren’t easy. Also, I just happen to work here at Lifeline, so we can help you if you’re stuck!

I have been working with Lifeline Design in various capacities for a while now, and am super excited to be joining on a full-time basis.  My official role is in programming and usability (which is what my posts will mostly focus on).

Background

I have a diploma as a Software Engineering Technologist (Conestoga College Institute of Technology), and have written software in more languages than I care to list.  While I enjoy working with web-based languages the most, I have learned a great deal by learning the lower-level technical languages.

I am also currently finishing off my bachelors degree of Business Administration in Marketing.  While programming and marketing may seem like an odd combination, they fit very well together in the area of usability;  I plan to go deeper into this relationship in my next post.

Sites and Books

To give you an idea as to what I like to read that is job related:

» Useit.com – Usability guru Jakob Neilson’s column
» 37signals.com/svn – Signals vs. Noise, the 37signals blog…they touch on a number of usability, programming, and business-related issues
» Smashingmagazine.com – a great resource to find design and development inspiration
» Sixrevisions.com – same idea as Smashing
» Book: “Don’t Make Me Think! A Common Sense Approach to Web Usability” by Steve Krug

What to Expect

As a developer who also does design and usability work, I believe it’s important to try and be aware of upcoming trends, advancements, and changes that impact a user’s online experience.  The Internet can change very quickly, and it can be easy to fall behind.

The goal of my posts will to be highlight some of these trends and advancements, as well as studying cases/sites where these are done either really poorly or really well.  It is always important to ask “how can we make this work better for our users?”.

I look forward to sharing the bits and pieces of interesting information I find along the way.