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

Designing the New University Homepage

As part of phase one of Go Mobile we redesigned the University homepage so that it works across all devices. Like the other sites going through Go Mobile it is managed in T4, the University’s content management system.

Features of the homepage

Our new homepage can be broken down into eight distinct sections.

  1. Global menu for quick access to key links
  2. Course finder for direct access to Undergraduate and Postgraduate courses
  3. Hero image slider to highlight key news, event and research stories
  4. Video content to support our key messages
  5. Seasonal message top task boxes
  6. Latest news from the Press Office
  7. Partner logos and awards carousel
  8. Social media links and directory
Newcastle University homepage features and layout

Homepage design features and desktop layout

On mobile devices these stack horizontally, one on top of the other.

We’ll look at a couple of these features in more detail.

Hero image slider

The old homepage image slider was full width. Although this created a strong visual impact, sourcing images to fit this area could be problematic.

Old full-width hero image slider

Old full-width hero image slider

The new hero image slider is smaller. It allows the Press team to source images that would fit a standard landscape 4 x 6 photo.

New hero image sliderOn mobile devices the caption drops below the image to avoid the image from being fully covered. The caption and image form a single clickable link. This is important on mobile devices as it creates a large hit target to increase successful touch interactions.

Video content

The new homepage layout has allowed the use of rich media content such as video. The analytics show that the external homepage is the most popular destination for video consumption. This has helped increase the profile of some key videos during the months of October to December 2015:

  • The Impact of a World-Class Civic University
  • How Smoking In Cars Can Affect Children
  • Dr Martin Luther King Jr Honorary Degree Ceremony
  • Our City
  • Our Campus

Related posts

Read more about the new responsive website template in our case studies:

Share this post:
Share

Streamlining Structure and Systems: Case Study of Academic Unit Sites

This is the second of our Go Mobile show and tell posts. Jane has already introduced some features of the new design using examples from central sites. Now, I’m going to look at some design changes on academic unit sites.

Tabbed pages

Our school sites are large. They’re complex and in some cases six or seven levels deep. Through Go Mobile we’re improving the structure of our sites and this includes making them shallower. One way of doing this is to introduce tabbed pages. Tabbed pages also allow us to split up long pages into shorter sections.

Take this example from the School of Agriculture, Food and Rural Development (AFRD).

Screenshot of cropped research group page on old Agriculture, Food and Rural Development website

Click on the image to display the full, uncropped version of the Food Quality and Health page on the old AFRD website.

Their research groups previously had a single page that included:

  • an overview of their research interests
  • a list of research themes
  • a staff list
  • a projects list
  • information about their teaching and learning activities

The new tabbed page allows this information to be split out into three or four much shorter pages with the tabs showing across the page on desktop.

Screenshot of tabbed research group page on new Agriculture, Food and Rural Development websiteOn mobile the tabs appear in a drop-down menu:

Screenshot of research group page on mobile with drop-down menu collapsed        Screenshot of research group page on mobile with drop-down menu expanded

Staff lists

In both the old and new design staff lists are generated from MyImpact data. The main difference, as you’ll see below in the example from the Schools of Architecture, Planning and Landscape (APL) is that profile images are now displayed in staff lists on desktop.

Screenshot of staff list on old Architecture, Planning and Landscape website

Old APL staff list

Screenshot of staff list on new Architecture, Planning and Landscape website

New APL staff list

On mobile the images disappear so that more information can be displayed on the smaller screen.

News

News lists appear in a very similar format in the old and new designs. The biggest change is behind the scenes. Previously our editors had to use a separate system to generate news for their site. News is now incorporated into the content management system (CMS) that we use to publish all content on a website.

Screenshot of latest news page on the new Institute of Sustainability websiteThe new CMS allows you to syndicate news into a feature news grid on your site’s homepage. This requires high quality imagery for every news item. As an alternative, some academic units have opted to display a simple news ticker on their homepage.

Screenshot of homepage news grid on the new Institute of Sustainability websiteTell us what you think

As always, we’re interested to hear your feedback. All the new sites have a link to our feedback form in their footer. You can also leave us a comment on this post.

Related posts

Share this post:
Share

A Brand New Mobile World: Case Study of Central Sites

Phase 1 of Go Mobile is now complete and we thought it timely to do a little show and tell of what we’ve been up to with this Go Mobile malarkey.

Two of our central sites to get the Go Mobile treatment were Research and About. These are clearly important sites for a research-intensive Russell group university, like Newcastle. These sites should showcase our achievements, but also need to explain some complex strategic content.

So they need to be able communicate effectively, but now with the added requirement of working just as well for smaller mobile devices.

We’ve posted previously about what Phase 1 of Go Mobile entailed and also talked about new ways we have of doing things, so here I’ll showcase some new layouts.

This post will focus on a core page on the Research website and the homepage for the About website. I’m going to include screen shots of the sites before and after Go Mobile, and explain why we’ve done these developments.

Research website

Take a look at the old Research Support section, one of the core pages of the research site:

Screenshot of old Research Support page on desktop The page is quite informative and clearly formatted (short paragraphs and a bulleted list of hyperlinks) but not really engaging. It’s also not visually impressive, with only a small image to the right of the content.

Now look at the new Research Support section:

Screenshot of new Research Support page on desktop.Note the:

  • new ‘masthead’ design for section landing pages
  • big impactful image to set the scene
  • new teaser text overlay on the image to help introduce the section
  • quote to substantiate our claims
  • use of bold to emphasise key messages in content
  • content written for mobile; direct, informative with relevant hyperlinks

Now, take a look at the new page on mobile:

Screenshot of Research Support page on mobile The page title clearly indicates the topic of this page and the teaser text is now used as an introduction to the page. This helps you quickly understand which page you are visiting.

The content is split into ‘blocks’ that can re-stack on mobile. The priority of content has been optimised; the image re-sizes and drops under the text.

About website

Here you can see the old About homepage:

Screenshot of the old About homepage on desktopYou can see that:

  • boxes are built for top tasks, so people can find the most popular pages quickly
  • there are links under each top task box to pages within that section
  • images are small
  • there are no key messages
  • the page is not very inspiring…

On mobile, this old page simply shrunk a bit to try to fit your mobile screen (but not very well) as it was not mobile responsive.

Now compare the new About homepage on desktop:

Screenshot of the new About homepage on desktopNote the:

  • top task boxes are still in use, to help people find what they are looking for
  • side menu is now visible to help with navigating the site
  • larger images are used to enhance the page
  • subheadings to help introduce content, and put it in context
  • use of video to help support our key messages

And see it on a mobile screen:
Screenshot of a section of the About website's homepage on mobile (showing website title and top task boxes)Screenshot of a section of the About website's homepage  on mobile (showing video and text)

The new page re-stacks all content for mobile, including video. All content, including images and video re-size to fit your mobile device.

We’ve improved section naming ‘About the University’ rather than ‘About’ helps give people more context of which site they are on and where they are in the site.

The hamburger menu at the top gives access to the secondary navigation (the side menu on desktop).

We’ll keep you posted!

Now, prepare yourself – as we move onto Go Mobile Phase 2 more things will change.

Not only will other websites get the Go Mobile deluxe treatment, but we are still developing the technology, how we do things – constantly testing and improving what we’ve already done.

You can always keep an eye on what we’re up next to with our fortnightly updates.

Share this post:
Share

Go Mobile: the Story So Far

Our Go Mobile programme is up and running: 17, yes 17 (!) sites went live in September.

Phase 1 (our ‘beta/test/is this even possible’ phase) was a success. And because of this, we’re going to carry on and put the rest of our external-facing website through the programme.

Go mobile explained

Go Mobile is a project to make our website mobile responsive. This means it works on desktop computers as well as tablets and mobile phones.

But we’re not making things easy for ourselves. As well as adding a responsive design we’re also:

  • improving content – rewriting for mobile
  • updating assets – our new design needs higher quality images to support content
  • moving to a new content management system (TerminalFour – T4)

You can see some examples in action:

Oh no! Why have they changed everything?

Some of our feedback, particularly from University staff, has been unhappiness that we’ve changed or moved things. Remember we’re doing this for the greater good!

Our websites now work just as well on mobile as on huge desktop screens. Go Mobile is about improving access for all.

Key developments cover navigation, design and content

NAVIGATION

How you move through pages needs to be simpler and easier for mobile (smaller screens). Navigation is improved for those using desktops too. We’ve made sites shallower and removed redundant content.

DESIGN

Design enhances your website but doesn’t rule it. We’re always thinking about what our users want from the web content. For example, we’ve made sure that images are impactful and support our messages. But we’ve made sure that our template prioritises for you: on mobile, images shrink and drop under content.

Content

Text for mobile is written in short, easy to read paragraphs.  This helps when it’s stacked for smaller mobile screens.

We’ve also introduced styles like the introduction which helps to focus the point of the content on the web page. It’s allowed us to firm up our content standards. A paragraph should be around 20 words because this works better on mobile.

Even though this is part of writing for the web/writing for mobile, a lot of our changes are just about good writing generally.

So, how did we do it?

By magic of course! Well actually, a whole lot of design, technical and word wizardry.

We worked closely with colleagues in our IT Service (NUIT) as well as those in schools, faculties and central services.

We developed a brand new suite of training for our web editors. This covers editing in the new system, writing for the web, defining site objectives and using media (images and videos). We also introduced various tools to help you evaluate and improve content.

Find out what our web editors thought of the Go Mobile process.

Next steps

There are exciting times ahead. We’re turning attention to Phase 2. This is where we take the rest of the external website through Go Mobile. We’re planning to do this between January and December 2016.

It’s going to mean a lot of change for the team:

  • Agile ways of working
  • focused, time-bound project cycles to get through all the sites
  • extra staff
  • new office space

It’s going to mean a lot of commitment from our faculties and services. We need staff dedicated to developing their websites working with us and giving time for training on writing best practice and the new content management system.

We’d love to hear your comments on what we’re doing. Either comment here or use our feedback form.

Share this post:
Share