Moving on, we’re now going to talk about page element guidelines, which is a lot more prescriptive. So there probably be less discussion about them. So let's have a look at this. So you know, links, search box, your home link and breadcrumbs, et cetera, and et cetera. We’re going to go through each of these step by step, one by one. And there will be guidelines for each.
So, links, of course the most important thing is that the links on your site. A, they need to stand out, and B, need to look like links. The very simple of doing this is to made them blue and bold. If you want to add underlining in there, then go fish. Have yourself a party. But ordinarily it’s blue and underlines. It has to be at least of underlined, bold or colored. Just one, the one we done and talk about earlier, one of them is not enough. If all the text on your site is black and some of it is blue, that’s too subtle. That won't stand out enough. So you’ll have to be blue and bold to look like a link.
It has to behave like a link. When the cursor rolls over it, there should be some sort of state change. I don’t care what it is, blue to a color or bold to not bold or whatever it is. Interactive stuff changes when I put my cursor on it. That’s how I know I’m going to be able to click on it. Therefore by implication, you don’t want anything that I can't click on to change its state when I roll over it. It will confuse me. Also, links should have a visited/unvisited state which typically nowadays is bold blue for unvisited and not bold blue for visited. In the olden days, it used to be blue and purple. I still hanker off to the blue and purple days because that’s some old school fashion.
Language, this is a important one for search engine automatization and for accessibility reasons and for usability reasons. The words in your link text should seek to make sense out of context and some up the page or the fingers that is pointing to. So that if I only read the link text in isolation, knowing that it was a link I have some sort of idea what it was pointing to. Sort of information it’s pointing to. So what’s not good is click here, more info, full article, et cetera, et cetera. That’s like death for search engines, not very good for accessibility. People using screen readers and also of course for usability for regular audience, they see a link. They look at a link because it stands out, it’s blue and it’s bold and it says click here. You have to read a bit of text before or after it and try and piece together what it is you’re linking to. It’s obviously piece of work I don’t want to have to do because I’m lazy. And I have the right to be lazy because you’re trying to sell stuff to me. So, it’s your problem not mine.
Search boxes should be about 25 characters long. Again people have done Ph. D.s on this, it’s amazing but it’s true. Lucky they did and we don’t have to. So it’s about 25 characters long. It would ordinarily you need a action button to the right of the box, that action button says search. You have therefore provided something to click and you’ve provided the label for the whole box that says this is the search box. So you’ve done two jobs at one. That’s because you’re clever. And that should be located at the top right of every page. As we saw in our wire frame with eCommerce example, that’s where people expect search to be located. So unless you have particularly strong reasons for putting it somewhere else, top right is the only place to go with search. You can see what I was telling you. This are very prescriptive simple bit, just follow these rules, you’ll be fine. You don’t have to think about it.
Home, the logo which is normally top left of your design is a clickable link to your homepage. You’d be surprise not everybody realize this, the logo is a clickable link to the homepage. So your navigation should probably be also considered having a link called home. A textured link called home. Because I have seen, usually in the testing section, where people have been asked to go back to the homepage and haven’t clicked the logo but have hit back ten times, because they could see no other way of doing it. Just fine, this site wasn’t designed for them. So, have a text link that would be designed for that.
The breadcrumb normally appears on top of the screen and it’s a series of clickable links that tell you your location in the site. So if you imagine the site in a folder structure, you would be in website, forward slash services, forward slash project management, forward slash benefits, forward slash case study. And case study’s the page you’re on. All of these others are the hierarchy of where the page lives. And these other sections or named sections would be clickable text links back up the tree as it were the root, which is home. They are not the path you took to get there, you could have got to this page any old how. This is the way you define the page lives in your site in the site map sense of the word. So that’s the breadcrumb, named after Hansel and Gretel of course. And you can see how it’s very useful, because it tells you what the information it relates to in terms of the hierarchy. It provides you access, one click access, to lots of levels of the site hierarchy. Because they are links, and ordinarily it starts top left. So if this is the website, this would be the logo, it would start here. It would run left to right. So it would say home, services, project management, benefits, case study, et cetera, et cetera. That’s just the breadcrumb track, also good for search engines.
Representing choices, again, this is simple stuff. Let’s just say you don’t even have to think about it. A checkbox should be used if the audience can or cannot choose to check any number of the options. If there are six options and you can choose zero, one, anything from zero to six of them. Then use a checkbox for each of them. It’s quite simple. If however you can only choose one option of any number given, then you either use a radio button between all of the options and any one of them can never be turned on or you use a dropdown the list of all the options. And again you can only choose one. The advantages of dropdown are in the same space. Disadvantages, that it hides the options. So if it’s none see you and if it’s a question, you want a good answer to. It probably be better off using radio buttons so that you’re sure that people have at least cursory glance of all the options. It’s often why how did you hear about us, and there’s almost had a dropdown. So it place the assumption that’s it’s going to be random answers, it doesn’t really matter.
So, ordinarily you want a list choices vertically, because that’s the way people read a list of options, it’s the word list. Avoid dropdowns for important ones, the reason of it we just discuss. Where there is, say this is a check box and this is the label associated with it. For accessibility reasons, if I click the name this should state change. So the check box would tick or untick if I have clicked the name. That’s because you require quite a high level of motor skills, particularly if you think about physically disabled, elderly people having got the steadiest of hands to hit quite a small check box or quite a small radio button. It’s easier to hit the writing. So that’s why it’s a good practice to allow clicking the label to do the state change in here as well. And you want a confirm choice. Add a OK button or submit button or send button at the bottom of the form, obviously. What you do not want is a clear all button or a cancel button that clears everything. Because people will click it by mistake thinking it’s the confirm button and they have to fill the whole thing again. And if you’re lucky you’ll get someone filling in the form once even less lucky to fill in the second time because your stupid web design has maybe cleared everything. People bare grudges on stuff like that.
Transcription by:
Scribe4you Transcription Services