Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Understanding links

From: User Experience Fundamentals for Web Design

Video: Understanding links

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.

Understanding links

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.

Show transcript

This video is part of

Image for User Experience Fundamentals for Web Design
User Experience Fundamentals for Web Design

52 video lessons · 25851 viewers

Chris Nodder
Author

 
Expand all | Collapse all
  1. 1m 7s
    1. Welcome
      1m 7s
  2. 4m 37s
    1. Building a site for your visitors
      1m 29s
    2. Understanding how people browse the web
      45s
    3. It's all about information
      48s
    4. What causes people to leave sites?
      1m 35s
  3. 3m 50s
    1. Simple design
      1m 9s
    2. Consistent design
      1m 11s
    3. Standard design
      1m 30s
  4. 20m 55s
    1. Elements of navigation
      1m 21s
    2. Content has a structure
      2m 18s
    3. Understanding menus
      3m 19s
    4. Reviewing some menu myths
      2m 4s
    5. Working with site maps
      1m 5s
    6. Adding search to your site
      2m 53s
    7. Understanding links
      3m 43s
    8. Exploring clickable elements
      1m 18s
    9. Understanding Fitts's Law
      2m 54s
  5. 11m 19s
    1. People can begin from any page on your site
      1m 24s
    2. Elements every web page should have
      3m 25s
    3. Creating progressive navigation
      3m 22s
    4. Arranging your content
      3m 8s
  6. 8m 7s
    1. How people read on the web
      2m 31s
    2. Writing for information exchange
      1m 43s
    3. Formatting pages for information exchange
      3m 53s
  7. 7m 21s
    1. Using your homepage as a site summary
      1m 50s
    2. Creating fresh content
      1m 20s
    3. Displaying navigation and search
      1m 25s
    4. The five-second test
      2m 46s
  8. 8m 8s
    1. Showing people what you've got
      3m 50s
    2. Making comparisons easy
      1m 24s
    3. Creating landing pages from ad campaigns
      2m 54s
  9. 11m 22s
    1. The real purpose of detail and product pages
      1m 16s
    2. Writing descriptive text
      2m 4s
    3. Using images to set context
      2m 17s
    4. Showing the price for products
      2m 27s
    5. Have a call to action
      1m 36s
    6. About Us: a special detail page
      1m 42s
  10. 10m 58s
    1. Ask for information in context
      2m 25s
    2. Making forms as painless as possible
      2m 34s
    3. Creating form fields
      3m 37s
    4. Handling errors gracefully
      2m 22s
  11. 9m 9s
    1. Using different types of media
      1m 55s
    2. Simple question: Does it enhance the experience?
      2m 15s
    3. Using graphics for explanation, not decoration
      1m 17s
    4. What is interactive content?
      1m 58s
    5. Laying out your page for media
      1m 44s
  12. 5m 3s
    1. Making money without selling out
      1m 37s
    2. Adding graphical ads
      2m 10s
    3. Creating text ads
      1m 16s
  13. 3m 42s
    1. Simple, consistent, and standard design
      2m 4s
    2. Consider your users and you'll be fine
      1m 38s
  14. 1m 31s
    1. More resources
      1m 31s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed User Experience Fundamentals for Web Design.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.