Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Discover how to create a user experience that embodies utility, ease of use, and efficiency by identifying what people want from websites, how they search for information, and how to structure your content to take advantage of this. In this course, author Chris Nodder shows how to merge engineering, marketing, graphical and industrial design, and interface design to create a website that meets the needs of your customer, and is simple, elegant, and engaging. The course shows how to use graphics to help rather than hinder visitors, balance advertising and content, and integrate video, audio, and other media. Other tutorials consider the landing page experience and elements like contact forms from the visitor's perspective.
The oldest, in fact the defining feature of HTML is hypertext links. Back in the early days someone-it's not clear who-decided that link should be blue and underlined. That's become the standard ever since. Blue isn't necessarily the best color but the ideas we discussed earlier about using standard elements and being consistent suggested if blue fits with your site's color scheme, it's better to use it than other colors. Obviously on pages like the homepage that are normally covered in links, it doesn't always make sense to underline your links. In those situations the standard that has emerged is to have an on hover underline, just remember the more you deviate from blue underlined links the more likely it is that your visitors won't see or understand which things on the page can be clicked on and which a merely text.
One thing we have no excuse not to do is to make sure your visited links change color. This color change is a big clue to user to let them know where they have already been on your site. That way if they are looking for something they saw before they know which links is like to be behind. Likewise if they haven't found what they are looking for yet then showing them the places they have already been allows them to quickly discount those links. Links stand out from the body of the page. And that's not by accident, they are signposts to say, if you click me we will take you somewhere else. Because links stand out people's eyes are drawn to them on the page.
For that reason it makes sense to place the link on information rich text rather than cop-out words like click here. That way when people scan the page they can quickly work out both what the page is about also what topics have more information associated with them. Often you want to call out specific information either from the page or related to the page. Related links sections are only used to take people to other areas of the site to have similar content. These are really useful to redirect someone who got to the page via a search engine only to find it was almost but not quite what they were looking for.
More Information sections normally contain links to give deeper information on the same topic like white papers, case studies, brochures, related parts and accessories and so on. By putting these links in their own section to the side of the content it makes it easy for visitors to do the additional research they need to in order to feel confident about the topic you are discussing. You may also have these links interspersed in the content. But calling them out in one area helps visitors to see that you have considered their needs. For a very long pages of content that you don't want to split up, you might consider using in-page links. These navigate people within the page directly to the area they are interested in.
The only issue with in-page links is that your visitors might get confused and think they are navigating to a different page. When they read on beyond the linked section and then hit the Back button they go back to top the same page. If they click a subsequently link it could be something they have already read. That has a tendency to confuse people. You can reduce that confusion by labeling your in-page links well, which terms like "on this page" and by putting "back to top" links at the end of each section. Even if people don't follow the "back to top" links they will at least understand that they are moving on to the next section of the page.
Breadcrumbs are a type of navigation that always shows you the path back home. They get that name from the Hansel and Gretel fairy tale where the children put down crumbs of bread on the trail to guide them home. Whenever you have hierarchical content on your site a breadcrumb bar will help visitors work out where they are within the hierarchy, it will also let them easily move to a different level of the hierarchy. It's also good for keyword placement for search engines. Breadcrumbs never replace your main menu structure, they are a secondary navigation scheme. You need think carefully before adding them to your site. There is a lot to consider when you create your links, choosing a suitable graphical treatment with color, font- weight and underline, placing the link text of descriptive words, deciding even what supplemental items to link to from each page.
Once you start putting real thought into your links, you will to start to create a better scent of information for your visitors meaning that they can find what they've been looking for more easily and will stay around on your site for longer.
Find answers to the most frequently asked questions about User Experience Fundamentals for Web Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.