A Quick Guide to…Hyperlinks

Hyperlinks help with reading and navigating online content. They provide users with a next step/further information, support scan-reading and enhance search engine optimisation.

In the latest of our Quick Guide series, here’s a reminder of our best practice for hyperlinks:

Link text

Your link text should be short phrases – don’t link entire sentences.

Link text needs be descriptive of the content you’re linking to so the user has an idea of where they will be taken if they select the link. Phrases such as ‘click here’ or ‘download’ are unhelpful and not accessible – think about someone relying on a screen reader to navigate your content.

Generic phrases hinder search engine optimisation (SEO). Search engines, like users, take notice of link text. It’s therefore important that link text contains keywords and phrases that you want to rank highly for. No one wants to appear at the top of search results for ‘click here’!

Open in the same browser

Hyperlinks should always open in the same browser tab/window. We leave it up to the user to decide whether they want to open a new tab/window.

Links must work

It sounds obvious but hyperlinks must be checked regularly to make sure they work. My colleagues laugh at me as I often quote Kara Pernice (Nielsen Norman Group) that a broken link is like a broken promise. However, I personally feel disappointed and frustrated when I select a link on a website that turns out to be broken, or if takes me to an unexpected place.

Broken links can damage your credibility to users and won’t help search engine optimisation, as search engines respond to well linked sites.

Related posts

Share this post:
Share

To Link or Not to Link – When and Where to Use Hyperlinks

We’ve recently had a couple of questions from web editors about hyperlinks – particularly about whether to include the same link more than once on a webpage.

This post will focus on when, and when not, to use hyperlinks and where you should try and place them on a page.

Helpful content

When writing web content your aim should be to help your user find the answer to their question or complete a task.

Hyperlinks help with this because they:

  • give active instructions
  • support scan-reading
  • offer further information or a next step

It’s important to only link to relevant content that supports the messages on your page, or helps your user complete their task or answers their questions.

Careful placement

As well as thinking carefully about what you link to, you should also think carefully about where within your content you should link from.

Think about the primary message – what do you need to convey to your audience before they leave your page? If you add hyperlinks too early then you run the risk of your user leaving before they’ve had a chance to read your content.

Hit targets

Mobile has changed the placement of hyperlinks on a page as you now need to think about hit targets. Don’t have too many hyperlinks together as this will make it harder for the user to select them.

You should also try and add hyperlinks at the end of paragraphs and sentences. Again this helps with hit targets and increases the likelihood of your user reading your content before clicking a hyperlink and being taken elsewhere.

Avoid duplicating links on a page

It can be tempting to duplicate links on a page. Hoa Loranger (Nielsen Norman group) points out that people often think that duplicate links provide “alternative ways to access links” and “safety nets”.

However, too many calls to action on the same page can confuse users.

Each additional link places an extra load on users’ working memory because it causes people to have to remember whether they have seen the link before or if is a new link.

Hoa Loranger Nielsen Norman group (NNg)

In addition, duplicate links can be harmful to the user experience:

Extra links waste users time whenever users don’t realise that two links lead to the same place.”

Hoa Loranger Nielsen Norman group (NNg)

Loranger also points out that that “each additional link depletes users’ attention because it competes with all others.”

So rather than providing a safety net you’re potentially reducing the likelihood of the user spotting the link.

Instead of adding duplicate links on a page, Loranger argues that where you place the link is more important.

Making a link more noticeable by placing it prominently in an expected location on the page can yield better results than duplicating it elsewhere on the same page”

Hoa Loranger Nielsen Norman group (NNg)

Summary

To link or not to link? As always it depends on your content as to whether you should include a hyperlink on a webpage, and where on the page you should place it.

Think carefully about the purpose of your page to help decide whether to add a hyperlink to relevant content, and how early on you should include one.

However, try not to include more than one link to the same content on any webpage as this can be harmful to usability.

Related posts

References and further reading

Hoa Loranger, The Same Link Twice on the Same Page: Do Duplicates Help or Hurt? Nielsen Norman Group (NNg), 13 March 2016

Kathryn Whitenton, Minimize Cognitive Load to Maximize Usability, Nielsen Norman Group (NNg), 22 December 2013

Jennifer Cardello, Nielsen Norman Group (NNg), Four Dangerous Navigation Approaches that Can Increase Cognitive Strain, 28 September 2013

Share this post:
Share

A Quick Guide to… Bold

Bold text makes web pages easier to read and more SEO friendly.

You should use bold to highlight key phrases in your copy. There should be enough to help users scan the page, but not so much that it loses impact.

This quick guide will help to clarify why, when and how to use bold text.

Why to use bold

Nearly 80% of users will scan a web page before they read it; they’ll jump around the page, looking for things that catch their eye.

This means that content must communicate key messages at a glance, by drawing attention to important bits of information. One way to do this is to create visual pointers using bold text. The impression created by these visual pointers tells both humans and computers (like Google) what to expect from the rest of the content.

03geordi

To boldly go… Both humans and computers respond well to bold text.

When to use bold

You should bold text that:

  • communicates important information
  • emphasises key points
  • makes sense out of context
  • complements your titles and headings

You should avoid bolding:

  • entire sentences or paragraphs
  • too many individual words

Bold text can be used on pages and in news items.

How to use bold

Finish creating content for a page before you start adding bold to it. Then, pick out the most important pieces of information and make them bold.

An easy way to check if you’ve used bold effectively is to collect your bold phrases into one list. If you gave this list to a user, would they get the right impression about that page?

Share this post:
Share

10 Content Experts to Follow on Twitter

So, you’ve learned how to write for the web, manage media files and navigate T4. Now you’ve got the keys to your shiny new responsive website, you probably want to start creating some great new content to populate it with. This is a good time to delve a little deeper into the world of content design.

If you know where to look, social media can be a treasure trove of resources for those who write and design for the web. Following experts on Twitter is a great place to start, so we’ve rounded up 10 great accounts to share with you:

@katekiefer
As director of communications at Mail Chimp, Kate Kiefer Lee knows a thing or two about creating great content. She’s also co-author of one of our favourite books: Nicely Said, Writing for the Web with Style and Purpose.

@nicoleslaw
Nicole Fenton is a digital strategist, editor and a teacher at The School of Visual Arts in New York City. She’s the other half of the Nicely Said team.

@gerrymcgovern
If you’re wondering how to make your website users happy, Gerry McGovern is sure to have some good advice. He’s been consulting, speaking and writing about web content since 1994, and is widely regarded as a leading authority on customer experience.

@coschedule
The CoSchedule team produces a tonne of great resources for content managers (we love their handy Headline Analyzer). Follow them on Twitter to receive free guides, articles and tips.

@amythibodeau
Writer and strategist Amy Thibodeau is a pro when it comes to crafting great user interfaces. Ever thought about the tone and clarity of your error messages? How about the wording on your website’s nav buttons? Check out Amy’s Twitter feed and blog for some thought-provoking discussion.

@karenmcgrane
In her own words (and we certainly agree), Karen McGrane ‘makes the web more awesome’. She’s the author of Content Strategy for Mobile and Going Responsive, and co-host of the Responsive Web Design podcast.

@zeldman
Jeffrey Zeldman has been working on the web since 1995. His Twitter feed is a powerhouse of fascinating news and discussion. Aside from his own words of wisdom, Jeffrey shares articles from leading thinkers on the cutting edge of content strategy and web development.

@abby_the_IA
Struggling to make sense of a complex navigation system? Unsure where new information should go? Abby Covert is an expert when it comes to Information Architecture, and author of the book How to Make Sense of Any Mess. Follow her Twitter feed and blog for tips on how to improve the clarity and usability of your site.

@heydesigner
Hey Designer is a curated feed of resources for people who work on websites. From discussing the pros and cons of using icons instead of copy, to sharing top tips on writing words that SEO-bots will love – Hey Designer will populate your Twitter feed with an array of useful links.

@dlichaw
Writer, educator and consultant Donna Lichaw pioneers smart, simple methods that drive user engagement. She is the author of The User’s Journey: Storymapping Products That People Love. Follow her for advice on how to design digital content that’ll speak to your audience.

Anyone we missed out? Let us know in the comments below.

Share this post:
Share

A Quick Guide to…Expandable Content

Expandable content allows you to show and hide information on a webpage.

This content type can be useful to reduce page length; particularly if content is only relevant to a specific audience.

An example of this can be found on the Open Day website. Expandable boxes have been used on the travel page to allow users to quickly access information relevant to their chosen mode of transport. This saves them from reading information about all of the ways to travel to the University.

The biggest drawback with an expandable box is that it’s an extra click to see information so I’ve summarised our standards for using them in our quick guide to…

Expandable content

You should never hide essential information inside an expandable box as you can’t guarantee that users will click to see the content.

When adding expandable content to a page you should:

  • include a descriptive title – you need to encourage the user to expand the box
  • keep the title to a maximum of 30 characters
  • make sure content within the box is shorter than the main content of the page
  • include no more than 100 characters within an expandable box
  • make sure the content is written for the web

You should also try to use expandable boxes at the end of a page as they act as a visual break in the content. We found in user testing that people often don’t expect content to follow expandable boxes and so they stop scrolling.

Related posts

For more advice on when to use this content type see my post: Hide or not to Hide: When to use Expandable Content.

Share this post:
Share