BLOG


A Web Designers Guide to Buttons and Links

In this article I will be talking about why I believe it’s a bad idea to use the “MORE” and “Click Here” buttons on a website. Specifically when there is a group of product categories listed on a page, that have a button underneath each product category with the words “More Info”, “View More” or “Click Here”.

The Basics

Lets first start by looking at the basics, specifically raw HTML. Raw HTML has black text on a white background, links are blue text with an underline, images are their original size, list items have a number or a dot to the left of them while being underneath each other and everything is over to the left side of the page and underneath each other.

Now let’s look closely at a link, because that is where a “More” or “Click Here” button would be. When you hover over a link regardless of what the link text says, the mouse changes from an arrow pointer to a finger pointer. This basic yet intuitively design invites the user to interact with said link by clicking on it with their mouse. Now before any of this can take place, we need to invite the user to hover over the link, (yes even raw HTML does this in an intuitive way) by making the link itself different in its appearance from the rest of the text, in two ways. First is the difference in its colour to the rest of the text around it, which is blue. This difference in colour makes the link itself stand out, even if a link is in amongst black text. Second is the underline underneath the text. This has the effect of emphasising that text as being more important or a point of interest then the rest of the text around it.

Now that we have established the natural intuitiveness of a link with raw HTML. The next thing we need to look at, is what the link needs to say. The text of the link should be like a title in itself, and in most cases it is the name of the page title that the link is linked to. So if the user sees a link that says Our Blog, then it is safe to say that, that link will take the user to the website owners blog page and nowhere else.

Using the Correct Words

I believe the word “More” shouldn’t be used ever on buttons and links that will take you to another page. However, to display hidden text on the very same page the you are viewing I see no problem with, and what it should be reserved for. However even reveling hidden content on a page can still be done by have a plus sign at the bottom of the currently displayed content.

Think of how a screen reader will read a button or a link. First the screen reader will tell the user that they have selected a button or a link, then it will read out the URL of the button or link and/or just the displayed text (depending on the users settings of the screen reader) that everyone else would normally see. Now if the displayed text has the word “More” in it then that would seem very silly or even confusing to a user using a screen reader, because the user already knows that a link will take them to another page to view extra/more information about the category, product or post they are interested in. So why use the word “More” at all if that is the case and why not a more appropriate word like “View” or “Info”?

Braking Bad Habits

While it maybe faster and more efficient to use the word “More”, when trying to encourage or direct users to where you want them to go. However, that habit need to be broken if you want to your website designs to stand out for your clients.

What should you do if you can’t get away from using the word “More”? Try to describe what you want the user to do with the “More” button by adding the word into a sentence, for example; “I want you the user to read more information about this product”, or “Please view more products under this category”. Then start getting rid of the words that don’t have much use, like the joining words eg; is, the, at, of, in, etc. You will then be left with words like; read, info, view, product, etc. Now start mixing and matching the words that you have left, that will still get users to do what you want them to do eg; read info, view product, view info, etc. Sometimes it’s even easier then that because all you have to do is just drop the word “More” from “View More” or “More Info”. After all, buttons inherently look like they will show the user more information about something, so why do you need to spell out, what is already intuitive, in its raw HTML format.

Another way of braking the habit is to remove the button all together. What you will be left with is the title, an image (optional) and some text. The only problem you will be faced with is with how to encourage users to click on the categories to show them more about said items. The simplest way I found is to wrap the title, image and text all in a link. That way the whole thing becomes a button in itself, and it wont matter where the user clicks on the category it will still take them to the appropriate page. But make it inviting by having the elements have a different background colour to the body background colour or having a hover effect, when the user hovers over it with their mouse. After all when a user sees something that catches their eye, they will then use their mouse to investigate it.

I am Confused

The image below is an example screenshot from the same website, but on two different pages. For me this is just lazy design. Not only is using the words “Click Here” just as bad as the word “More” they are too lazy to keep their buttons consistent across all pages. Personally I would have just kept it simple (KISS) by removing all the buttons and keeping the background colour the same as the body colour and have a simple hover effect that highlights each section. However, if the client was really insisting on having a button underneath everything, then making each button say “View” or “View Info” across the entire site.

bad examples of more and click here buttons

The image below is an example screenshot of a website that is just bad on every level. A drop-down list, in main header navigation, is always going to take the user to a new page, because that’s what is expected of them in every other website. Therefore having a more button on what is already like a button, seems to be a waste of time, and a clear indication that this web designer (assuming they are a web designer) has no idea what they are doing.

bad examples of more buttons in a drop-down navigation

This for me this is adding confusion and clutter to something that should be already a very simple design. Here is how a screen reader might read the first link in the drop-down navigation in the above image “Link, URL www.blahblah.com/piled-pontoons, image, image name, piled-pontoons-nav-thumbnail.gif, displayed text, Piled Pontoons, button, button name, More, displayed text, More.” Now I know that screen readers settings can be configured to read different things and leave out different things, but no matter what the screen reader will let the user know that they have selected a link which will always go somewhere. So even if the screen reader just says “Link, displayed text, Piled Pontoons.” it will still say the word “More” because the button in this case could be wrapped in a div, p, button or a H1/2/3/4/5/6 tags. The web designer could use a before or after content CSS style which might stop the screen reader from reading the button. However, the more button is still not needed for users who don’t need screen readers, because they already know from using other websites that a drop-down navigation link will take them to a new page.