Team Update: 15 – 28 October

Here we are again with your fortnightly catch-up on the work of the web team.

Progress on the Go Mobile programme

The new Press Office website was launched, bringing phase one of the programme to a close.

We’re planning the next phase of Go Mobile developments: audits are starting, meetings are being arranged. We’re aiming to start properly in January 2016.

Steve has been working on rebuilding the websites for Digital Institute and Physics in the new content management system (CMS).

Lisa is busy carrying out an audit of Newcastle University’s Business School website.

Emma C finished the rebuild of the Newcastle University London website in the CMS. It went live in time for the official launch of the London campus on 21 October.

We are working with the undergraduate marketing team to get all final elements and design features into their new website. The undergraduate team are currently working on content and images.

Design and technical developments

We released our latest iteration of the external homepage and implemented a new ‘mega menu’ across the Go Mobile sites. This as an extension of the global navigation links at the top of each page. This includes direct links to the most popular sections of our website. It replaces the ‘mega footer’ from the old design.

Training and support

We’ve received 33 support requests through the NU Service Helpdesk and have resolved 16 of them.

Lisa has been making updates to the planning and writing web content training. We’re ready for the next round of training sessions in November and December.

Campaigns and web developments

Emma C’s been messing about in spreadsheets. Testing the Google Analytics add-on for Google Sheets and working out how we can combine analytics data into our content audits.

Steve has been working on the SAgE DTA website.

Lisa wrote a blog post about improving page titles and headlines.

Plans for the next few weeks

As we prepare for the next phase of Go Mobile there’s a number of opportunities to keep our skills up-to-date.

We’re sending a small contingent to Nielsen Norman’s Usability Training Week in London next month. Lisa and Jane will attend the content strategy workshop, while Emma C will be at the analytics and user experience workshop.

Peter and Catherine are attending an advanced JavaScript course on-site.

Using Design to Help Users Navigate Your Site

In our training for planning and writing for the web we talk a lot about user tasks. We use the core model to identify which pages on our websites provide the answers to our users’ tasks and also meet our business goals. These are known as the website’s core pages.

It’s incredibly important that we help our users get to these core pages, as they may sometimes be two or three levels down in the site’s structure. One thing we can do to help is to create inward paths to them from site homepages and section openers.

Top task driven homepages

Deciding what goes on to a site’s homepage can be a political battle. Everyone wants a link to their page. It’s also often done in isolation from planning the content on the rest of the site. Not anymore. We can use our core pages and users’ top tasks to determine what should go on a site’s homepage.

“the homepage is usually the last page we design. (How can you design the wrapping before you know what’s inside?)”
Ida Aalen, The Core Model: Designing Inside Out for Better Results

Take the new Information for Schools website, for example. Instead of having links to all of the main sections of the site (which can now be accessed from the menu on the left), there is a grid with links to the core pages: Events on Campus, Book a Visit and Support for Visits. There’s also a feature on the PARTNERS programme with links into the core pages within this section.

Screenshot of the Information for Schools and Colleges homepageDesign features for section openers

First off, let’s deal with the question of what exactly we mean by ‘section opener’. These are the top level pages below your homepage. You may find it easier to think of this in terms of a hierarchy diagram, with branches for the main sections of a site coming off the homepage.

Website hierarchy diagramThere are a couple of design features you can add to your section openers, depending on their purpose.

Like your homepage, you may choose to include a top task grid to help your users navigate to the core pages in the section.

Alternatively, you can choose to add a masthead which creates a visual opener for the section. This allows you to include some contextual information to answer users’ questions, as well as links to other pages in the section.

Screenshot of Research Support section opener with mastheadVisual hierarchy

Using grids and mastheads at the section opener level can help to create a visual hierarchy so your users know where they are in the site. If we have these features deeper in the site it can cause confusion. We want to create a clear distinction between the look of a section opener, and a standard content page.

Here you can see the difference visually of a section opener and a standard content page at the next level down.

Screenshot of the Business and Outreach section opener on the AFRD website

Top task grid on the AFRD Business and Outreach section opener

Screenshot of standard content page on the AFRD website

Standard content page for the AFRD Services to the Rural Economy page

With persistent use of grids there’s also another problem – where’s all your content? With grid after grid, you’re never actually providing the core content that will answer your users questions.

Conclusion

You can use top task grids on homepages and section openers to help your users navigate to your core pages.

Sometimes on a section opener you may want to provide some contextual content as well as links to core pages in the section. You can use a masthead in these cases.

Make sure you’re creating differentiation in the design of the section openers and your core pages. Only use grids and mastheads for your top level pages so they don’t lose their impact and so users know where they are in your site. Also remember that grid layouts are navigation rather than content so too many can create extra steps for users to find your core content.

 

Improving Page Titles and Headlines

Linda recently posted about how meaningful titles and descriptions engage site visitors. Her post covered the importance of micro content in enticing people to read your content – particularly since content is displayed differently depending on the device used.

In this post I’m going to focus on how you can improve page titles and headlines to help people find your page and encourage them to read it.

Page titles should be clear and descriptive

Page titles help convey your primary message; its important they are clear and descriptive. This is so that your reader can quickly see what your page is about.

As argued by Jakob Nielsen, online headlines are different to printed headlines because they are used in different ways.

In print a headline is tightly associated with photos, decks, subheads, and the full body of the article, all of which can be interpreted in a single glance.

Jakob Nielsen, NNg

The contextual information that accompanies a printed headline means that it can afford to be cleverer and less descriptive. However, as pointed out by Nielsen, online headlines can appear out of context. For example they could appear in search results, news feeds, social media or navigation.

Headline text has to stand on its own and make sense when the rest of the content is not available

Jakob Nielsen, NNg

Since your page title could be displayed in a number of different places, and on a number of different screen sizes which may reduce the amount of information displayed, it’s essential they make sense out of context.

It’s also best if headlines don’t contain jargon or wordplay. For example, take a look at this example headline:

‘Cutting-edge Research’

This is vague and could be about any topic and relate to any organisation. It’s meaningless on its own as it provides no indication of what the content will be about.

Now take a look at this title:

‘Newcastle Student Unearths Rare Roman Jewellery’

This title is much more descriptive and gives a clear idea of what the article will be about. The reader can then quickly decide whether the content will be useful or of interest to them.

You only have precious seconds to grab your reader’s attention and if you waste those seconds forcing them to fathom out what your title means, they’ll lose patience and leave without reading your content.

Begin with key words

To help with search engine optimisation (SEO) your page titles should contain keywords.

For example, it’s unlikely that a vague title like ‘Students’ Union’ will appear high in search results. It will be competing with other universities who will be using the same general phrase. If we tweak the title to ‘Newcastle University Students’ Union’ this will help with SEO because the title is more specific. People will be more likely to find your page if your title contains words used by your readers.

It’s better if keywords appear at the beginning of your titles if possible, as this will help with scan reading.

Moving keywords to the front of titles increases the likelihood that they get noticed

Hoa Loranger, NNg

Eye tracking research conducted by the Nielsen Norman group shows that people read differently online in an F shaped pattern, and tend to see the first two words in a sentence.

Keep page titles short

Keeping page titles concise will also help with scan reading. Our recommendation for page titles is 50 characters (including spaces). This might not sound like many words to play with, but remember that your page title could be viewed on a small screen. If it’s too long it will run over several lines; making it much harder to read and understand.

Headline Analyzer tool

In Corporate Web Development we use a free online tool called Headline Analyzer to help write headlines for blog posts.

As shown from the screenshot below you simply type your headline into the headline field and click the ‘Analyse Now’ button. You’ll then be given a score for your headline and tips on how to improve it.

Screenshot of Headline Analyzer tool

Admittedly this tool is more useful for writing headlines for blogs than webpages. However, what I find helpful is the chance to see how my page title will look in search results. This helps me decide whether it will make sense out of context:

Screenshot of a headline displayed in search results using the Headline Analyzer tool

Have a go and see what you think!

Summary

What you call your page is crucial in helping people find it. If you use keywords that your readers will be using and if a title is descriptive of your content this will help with SEO. Furthermore, the more descriptive a page title is, the more likely people will select and read your content. This is because they will be able to quickly see whether the content is relevant to them and will help answer their questions.

References

Jakob Nielsen, Microcontent: How to Write Headlines, Page Titles, and Subject Lines, Nielsen Norman Group (NNg), 6 September 1998

Hoa Loranger, Headings Are Pick-Up Lines: 5 Tips for Writing Headlines That Convert, Nielsen Norman Group (NNg), 9 August 2015

Related posts

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

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.