Digital Marketing & Communications

We've seen 1s and 0s you wouldn't believe

Topic: Style, content and design

Caption my caption

  , ,

📥  Show & Tell, Style, content and design

caption

 

I'm glad to say that my cohorts here in Digital are – like me – sticklers for style. Of course we all dress well, but punctuation, grammar, and spelling rules are what we work by.

That's not to say there's never room for improvement, though. Iteration and incremental enhancement is key. To this end, the Image Use Guide has been updated to include a passage on best-practice caption writing.

'Why?' you may ask. Well, many of the images we were seeing published included captions that read like alt text. They did little to deliver information, and this is a missed chance at elevating engagement.

A student daining experience in a professional placement

The good: this caption adds context and info to a Placements page

Why captions are important

Almost every image on the website needs a caption. Simple as that. There are exceptions of course: hero images and background images which are a part of the page design don't need a caption. Similarly, caption writing for staff profiles and Location pages is tough. But be creative and you can add information like when a building was opened, how many Learning Commons it has, or its opening hours, for instance.

Captions need to be 'added extras' to the image. They need to tie the image to the content. Captions are entry points. Like crossheads, pull quotes, summaries and headlines. These all offer users a place at which to enter and engage with the content we offer.

Users look at imagery first, then the caption under the image. If the caption intrigues them by providing context and information, they will look back at the image and see something new. This is a positive loop.

Writing a caption that describes the image misses an engagement opportunity.

Writing a caption that describes the image misses an engagement opportunity.

Captions, not Alt Text

It's important to know the difference between image captions and alt text descriptions.

Alt text descriptions need to describe the image. This helps visually-impaired users with screen readers, and in instances where the image doesn't load.

"A caption should normally explain what readers cannot see for themselves in the picture (_President Karista appealing for the education bill at a teachers' conference in Washington on Wednesday_) and should omit the obvious (_A man licking an ice cream cone_)." – The New York Times Style Guide.

Captions need to elaborate and add to a piece of content. Captions must quickly tell the viewer what the picture itself cannot say – people, places, dates, significance.

The Content Publisher makes it easy to define a Caption and an Alt Text description, and gives an example as default.

Use the Alt Text field to describe the image. Use the Caption field to add a relevant captio

Remember the 'Five W's and an H'

Writing a caption is like writing a headline:

What
Why
Where
Who
When
How

Use these prompts to add information otherwise missing from the image and you can't go far wrong.

Bad captions baffle the user and present a barrier to engaging further with content.

Bad captions baffle the user and present a barrier to engaging further with content.

Some dos and don'ts for best-practice caption writing:

Try to:
- use present tense to describe the image and any action
- keep your captions active (where possible)
- think in headlines – punchy and pithy is good
- explain the unknown and/or unshown - what's happening in the image that the reader can't see or know
- provide answers your user might have about the image: use the 'Five W's and an H'

Try and avoid:
- giving readers information they get from just looking at an image
- beginning with an indefinite or definite article e.g. 'she' 'it' 'a', 'an' or 'the'
- writing 'above' or 'pictured'
- repeating information contained in the title or summary

Some images on the website don't require captions. These might include:

- background images used in the page design
- banner images used at the top of a page
- logos

Finally, don't rely on bots to generate captions for you. They might be able to identify an image for you, but they remain pretty hit and miss...

captionbot.ai might claim to be able to recognise and caption an image for you, but it's still not as reliable as a human eye.

captionbot.ai might claim to be able to recognise and caption an image for you, but it's still not as reliable as a human eye.

 

Editorial style never goes out of fashion

📥  Communication, Style, content and design

Keeping it stylish

We editors like to keep ourselves in style. I'm not saying we're obsessed with the sartorial (although we do enjoy a nice cable-knit jumper), just that we like to make sure we're following and updating our Editorial style guide. These are the guidelines that help us, and other content creators, keep the website's content clear and consistent.

Clarity for us means making our content accessible to all (including those using screen readers and translation tools) and writing in plain English by avoiding jargon and idioms in our marketing, PR and informative content. This isn't 'dumbing down', it's writing so that everyone can understand it without losing the meaning.

Consistency is about giving the user a smooth journey through the site. The importance of this (or a warm wool jumper) should not be underestimated. If you visit a website and every page has a different colour scheme and layout, you'll probably be a bit confused. You might even think you've accidently jumped to a different site. In the same way, inconsistent writing styles can have a jarring effect on the user and make their experience confusing. Imagine thinking you're in cable knit only to look down and see a string vest. Not pleasant.

Having a consistent writing style also helps us create our online identity. When we consistently use the same words, and specifically the same meanings for words, users can recognise us more easily in a crowded internet. Our writing style is our identity, like a jumper you'd wear all the time that everyone agrees is 'very you'.

What we're wearing this season

The problem with our cable-knit jumper is that it's a bit bulky. A tad cumbersome. Also, it makes our neck itch, but that's nothing to do with the style guide. The jumper needs reknitting into one that's easier to wear, lighter, with detachable arms perhaps. And now I'm stretching it. The metaphor, not the jumper.

The Editorial style guide is similarly unwieldy. It's currently one page, arranged in sections like 'General style preferences' and 'University references'. As full of useful information as it is, you really have to know where to look to find what you want. In many cases, you have to search the page for a specific word, hoping it pulls up the right results.

From a maintenance point of view, this structure makes it difficult to add or amend the content. We have to fit it into one of the existing sections or create a new one, making it harder for users to work out where they should look for answers. Some things need more detailed explanations, which we can't add now without them clogging up the page.

Style gurus

We're fans of the Guardian and Observer style guide and the Gov.uk style guide as examples of good practice. Both are arranged alphabetically, rather than in thematic sections, so it's easier to guess what word to search for. Both provide short comments on points of style, but for some longer explanations, the Gov.uk style guide links to other guides.

Next season's styles

Based on these style guides, our plan is to rearrange our style guide into an A-Z of everything. Users will be able to search a single page for a point of style, but there will be aliases to make everything easier to find. For example, if you search 'lower case', you'll be told to see 'Capitalisation'. If you look for 'dot dot dot', you'll be pointed towards 'Ellipsis'.

In most cases, we'll give you a brief explanation of the point of style, how to use it, and examples of house style. Some things need a little (or a lot) more detail. For these, we'll link out to other Guide pages. These will cover things like:

  • apostrophes
  • inclusive language
  • academic terms
  • words to avoid

These points are all covered in the current style guide, but by giving them their own Guide pages we'll be able to go into them in much more detail. We'll be able to expand our explanations of inclusive language, for example, and give a much fuller list of words to avoid, a useful piece of content in the campaign for clarity.

We'll also link to our other writing guides, like 'Writing for the web' and 'Creating and writing blog posts'.

Keeping ahead of the trends

We'll continue to add to the style guide and improve it. The English language, like fashion, is constantly evolving. New words are always being invented and old words are always being misused, which means we always have plenty to add to the list of words to avoid. Here are a few of my current 'favourites':

  • toolkit
  • utilise
  • initiate
  • leverage
  • whilst

Style for everyone

Cable-knit jumpers are not for everyone, but the Editorial style guide certainly is. Anyone writing marketing, PR or informative content for the website should refer to it, not just the Digital Content team. It's also useful for people writing on the blog or even in print. Achieving consistency across all University communications is a big challenge, but having a single style guide to follow is a good step towards this.

The important thing is for everyone to keep the style guide in mind and use it as they write. This can be hard to do, even as an editor responsible for maintaining it. It takes a critical eye and an awareness of the types of things that you might need to check. Things like house style for quotation marks, bullet points or commas, whether 'biannual' means twice a year or every two years, how to write about currency, how to write the plural of 'master's degree', whether we hyphenate 'full-time', whether 'instalment' has one 'l' or two...

These are the things I dream about.

 

If you have any suggestions to improve the style guide, you can email web-support@bath.ac.uk.

 

Visual regression testing

📥  Communication, Design, Style, content and design, Tools

Our new site consists of 15 different layout templates. Each one of these is further broken down into numerous different design patterns for consistently displaying content. The rules that govern the presentation of these patterns (or elements, if you are familiar with atomic design) are generated from a combination of the Zurb Foundation framework and our own 'Origins' framework - all in all over 2000 rules spanning almost 6500 lines of css.

With this level of complexity it is extremely hard work to track the effect of any changes, almost certainly there is an unexpected knock-on effect of changing, re-specifying, or removing a rule.

Up until now, we have relied on our in-depth knowledge of the site to know where we expect changes to appear, and we use Browserstack to quickly check a representative sample set of our layout templates.

However, this requires a fair whack of time to run, and also needs a person to sit and look at each snapshot that's generated. And they need to know what to look for.

None of that is optimal, we needed a way to automate this process. Enter visual regression testing.

We followed this online guide by Kevin Lamping for setting up a prototype for a visual regression testing framework for Origins and the site templates.

Our prototype is in a repository here: https://github.bath.ac.uk/digital/visual-regression-testing/ (you will need a University of Bath login to view this). It contains a README with instructions on how to get it up and running.

Essentially, what it does is use some clever existing technology (WebDriverIO, WebDriverCSS, graphicsMagick, Selenium standalone and Node) to make a brower load a specific page, take a screenshot of a defined element, and then compare it to a baseline image. If there is any visual changes, it will then create a 'diff' file showing the change - and also alert us by throwing an error.

Snapshot of the website header

First we create a baseline image.

Snapshot of an updated website header

Then, when a change happens, another image is generated and compared against the first.

A diff file of changes to the header

If there are any visual changes, a third file is generated showing these changes.

Currently we are manually running these tests, but ultimately we will integrate into our continuous delivery framework so that the test run automatically whenever a new build of the css is pushed to our staging server.

Pretty neat.

 

New induction pages improve user experience

📥  Beta, International, Social media, Style, content and design

We’re working with colleagues across the University to make things better for our students online and to make it easier for staff to support students.

It’s been just over a month since we launched three new induction collections to help our new students settle into life at university: one for undergraduate students, one for taught postgraduate students and one for postgraduate research students. It is the first time we have created a specific area on the site for postgraduate research student induction.

Although it's still early days, we decided to look at the performance of the new pages we created for induction and compare it with the old content for the same period from last year.

A single source of truth

Our legacy content is often duplicated across various sections of the site. With so many variations of the same information, it's difficult to keep track of updates. There is often no single source of truth, which can lead to confusing user journeys.

Collections are pages of curated content from across different sections of the University website about a specific subject.

Our induction collections allow editors to feature specific information mapped against the student user journey, making sure that information is timely and relevant for the stage of the journey they are at.

It also means we can reuse relevant content rather than duplicate it, thanks to our new ‘labels’ functionality.

By transitioning our induction content, we have been able to retire 277 pages while creating only 89 new pages.

In addition to the content we’ve created, we’re using labels to pull in existing information from other sections of the site, like Accommodation and Student Services. At the moment, we have 146 pages labelled with ‘induction’.

Better user experience

All content we write is now based on users’ needs. We also make sure it’s written in plain English with an active voice.

This makes the content easier to find, and when users find it, they are able to complete their tasks more quickly.

Higher user engagement

We looked at pages where there was an equivalent page in last year’s induction content so that we could make comparisons on performance.

We chose:

Registering with the University

We found that 85.9% of users who landed on this page took the call to action, which was to actually register using our service page.

From the service page, we saw a 85.5% drop off. Although this is a large percentage, this is actually an expected behaviour at that particular stage of the user journey. This is because students were looking at the information before registration officially opened. The performance data suggests that we still have work to do to improve the student experience.

During the time period we checked, 8,283 users visited the new guide to register. Last year, the corresponding page had 4,600 users over the same period.

The higher number suggests that returning students are finding and using the page too.

In both years, Google was the biggest referrer to the registration page. This year, 41.5% visits came from Google – last year, this was 37.6%. This data supports our our previous findings that most users find the relevant content through search engines, not by using in-site navigation.

Moving into campus accommodation for the first time

The new page had a significantly lower bounce rate (50.2%) than the old one (69.3%), suggesting that people find the content more relevant.

Last year, 86% users dropped off after visiting the equivalent page. This year, 48.5% of the users who visited the new page continued onto other content which we had mapped as the next steps of their journey. This is an improvement on last year, but we clearly have more work to do to improve this journey.

Book a place on our coach collection service from Heathrow Airport

This year, we took a slightly different approach with the page for booking airport collection.

We created a simple, plain English video, translated it in Chinese and posted it on Sina Weibo. It had 3,200 views and as a result we have had more visitors to the page and more engagement with the content than ever before.

The new page had 1,109 unique visitors this year, which is 11 times more visits than the equivalent page got last year. That’s a huge increase for a single piece of content and confirms that we are creating content that better meets our users’ needs.

It’s also worth noting that over one-third of the users who visited the page went onto the next steps we had planned for them as part of the journey. We are now thinking more about user journeys than ever before, so we're able to make better connections between pieces of content and actions that need to be taken.

On the right track

Anecdotal evidence from colleagues so far tells us that there are already fewer misdirected enquiries about registration and accommodation. The new design of the website clearly shows contact details and people are finding it easier to reach the right service to get the help or information they need.

We’re happy to have seen an improvement in performance for this year’s induction information, but we haven’t finished yet. We’ll keep monitoring how the new content performs over the next couple of months to see how we can improve newly-arriving students’ experience as they continue to go through their induction journey.

 

The University of Bath's Digital Design Principles

  

📥  Communication, Design, Digital strategy, Style, content and design

Based on our current Digital Delivery Principles, I recently sat down and drafted a set of Design Principles. These were shared at one of our Show and Tells as a presentation, but I thought I'd reproduce it here on our blog for a wider audience.

1. Design for real people

”Remember who you are designing for”, is the most important thing we can do.

Every design decision we make should solve an actual problem that a site visitor has, or facilitate a real user need. Design should serve the content it presents, design in the absence of content is not design, it’s decoration. We always keep in mind that the end user of a page can be very different to us, with different needs, expectations, and abilities, and ensure that our design does not exclude them from getting the answers they need.

2. Design with data

Successful design starts from a clear and informed position.

Our approach is inclusive: we're building a site that will provide the optimal experience for a visitor whoever they are and whatever device they are using. To achieve this we conduct user research to better understand what people expect. We test changes, features and assumptions with users to get insight and feedback that ensures we are delivering on that expectation. It is as important to remove failing features as it is to add new features into our design, and the ability to know what works and what doesn't only comes from data.

3. Be simple, fast and effortless

Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.

We maintain a pattern library to ensure the design of elements is consistent, and this ensures that our interactions speak to users with a single voice, building trust.
We strive to ensure that our design affords our visitor with an experience that feels fast – they should be able to find what they need on the page without a delay. Images are optimised for the device they are viewed on, visual enhancements are loaded progressively, and do not disturb the flow of content on the page.
We minimise pain-points as much as possible with an awareness of good practice, to provide an effortless experience.

4. Make bold choices

We measure ourselves against the very best, and we should not come up short.

The success of the University of Bath is based on calculated risk-taking, knowing when to break from convention, and when to reprioritise your approach to better fulfil the requirements of the people who depend on you. Instead of simply matching what other institutions offer, we challenge them with innovative approaches and ideas that better serve users’ needs.

5. Always evolving

We believe that things can always be made better, and we know that good design is never finished.

It is pointless to sink 2 months into crafting the most beautiful interface if it does not allow the visitor to complete their task, or does not work on a mobile device. We release a design feature as soon as possible, and then iterate on that delivery to improve it.

 

Getting ready to go live

📥  CMS, Style, content and design, Tools

As you might have noticed from our latest sprint notes, we're getting pretty close to shipping some of our first full sections of the beta site.

We've had a handful of individual pages live for months now, all for new content. But soon it'll be the first time we replace an existing section with new content from our new CMS.

Before we ship anything, there are a few things we have to do to get these sections – and the beta site as a whole – ready to meet the world.

Our review process

All content in transition goes through a five-stage process:

  1. Substantive edit and review
  2. Copy edit
  3. Fact-checking
  4. Final proofread
  5. Sign-off and go live

We use Trello to manage this process. Every section has a board, every stage has a column, and every piece of content has a card. As the content goes through the stages, it moves across the board, and eventually into the final column: 'Complete'!

(more…)

Adopting an agile approach to content at Bath

📥  Style, content and design

I spoke at the Institutional Web Managers Workshop (IWMW) in July. At the event I talked about how Bath has adopted an agile approach to content and what we have learnt.

Watch the talk
Content has become increasingly important to universities to achieve their strategic goals. Find out what agile is and why we've adopted an agile approach to the creation, delivery and management of content online.

 

How to send a message to first year undergraduate students on bath.ac.uk and its supporting platforms

📥  Communication, Style, content and design

We manage first year undergraduate student communication on bath.ac.uk to make it simpler for content contributors to propose a message and find out what's been scheduled.

Scheduling a message

There are three ways to communicate with first year undergraduate students. You can use:

If you’d like to contribute a message you should complete the message request form.

The purpose of your message should be to equip first year undergraduate students for academic study or encourage their participation in student life or extra curricular activities. This guidance does not cover academic department communications (which are covered by alternative arrangements) or news stories. News stories should be emailed to comms@bath.ac.uk.

Deadlines for messages

To allow time for your message to be reviewed and scheduled you should complete the form 3 weeks before the start of the month when you’d like your message to be published. To avoid missing deadlines we’ve created a timetable of dates.

Messages scheduled for Deadline for submitting your message Deadline for Student experience Officer Review Schedule confirming messages sent to content contributors
September 2015 7 August 2015 14 August 2015 21 August 2015
October 2015 4 September 2015 11 September 2015 25 September 2015
November 2015 9 October 2015 16 October 2015 23 October 2015
December 2015 6 November 2015 20 November 2015 27 November 2015
January 2016 27 November 2015 11 December 2015 18 December 2015
 February 2016  6 January 2016  15 January 2016  22 January 2016
 March 2016  5 February 2016  12 February 2016  19 February 2016
 April 2016  4 March 2016  11 March 2016  18 March 2016
 May 2016  8 April 2016  15 April 2016  22 April 2016
 June 2016  6 May 2016  13 May 2016  20 May 2016
July 2016 Outside term time
August 2016 Outside term time

Message review process

To make sure your message is scheduled, you should include a clear title, description of no more than 117 characters, and the web address of the page you’d like us to link to. Your message should also follow the University’s digital style guide.

We will then share the monthly schedule of activity with the Student Experience Officers (SEOs) who'll review it and make sure that messages are timely, relevant and meet first year undergraduate student needs.

In the unlikely event that your message is not included, we’ll contact you and explain the reason why. If you don’t agree you should contact the Content Manager who will review the message with the Director of Marketing and Communications, on behalf of the Student Experience Board (Communications).

Publishing of messages

Unless a message is scheduled for a specific date, it will be published on the first year student landing page on the following Monday morning (or the next working day in the event of a University holiday). Messages sent using Twitter will be published at the time and date you specify.

Existing messages

If you’ve previously contributed a message you do not need to send it to us again. It will be scheduled using the same process.

Who does what

You(content contributors) Digital team SEOs Student Experience Board (Communications)
Provide a clear title, useful description and the web
address to relevant page on bath.ac.uk, bathstudent.com or teambath.com
Review messages title, description and web address and decide if it should be included in the calendar of scheduled activity Make sure that messages are timely relevant and meet first year undergraduate student needs Agree the overall objectives for first year undergraduate
messaging on bath.ac.uk
and shared platforms
Submit your message(s) before the specified deadline Add message to calendar of scheduled activity Consider the performance reports and how they can be used
to improve communication with first year
undergraduate student in Faculties
Agree the platforms which can be used to reach first year
undergraduate students on bath.ac.uk
Contact the Digital team and let them know about any
changes
Share monthly calendar of scheduled activity with SEOs Review performance reports and consider Digital team's
recommendations
 Share monthly calendar of scheduled activity with content
contributors
 Publish messages according to the agreed scheduled
activity
 Contact content contributors and explain why a message
hasn't been scheduled
 Report on the performance of messaging and suggestions for
improvements every quarter

Updating the guidance

This is the second iteration of these guidelines. We will roll out a third iteration in the future for taught undergraduate and postgraduate students who use www.bath.ac.uk/students based on feedback. If something isn’t clear or needs adding, then email web-support@bath.ac.uk.

 

bath.ac.uk content by the numbers and the next steps

📥  Beta, Development, Style, content and design, Tools

In March, the Digital team set out on an ambitious project to inventory bath.ac.uk.

Our purpose was to learn more about the content we create and the publishers who write it. Gathering this knowledge with a thorough inventory process is something that I have wanted to do ever since I joined Bath in 2011.

This is what we found, how we found it and what our findings mean for how we plan, govern and build better content.
(more…)

 

Improving the international country pages

📥  International, Style, content and design

We provide international applicants with specific information on entry requirements, funding and scholarships, university services for international students, how to contact an agent and forthcoming visits. All of this information is on our country pages.

As part of the development of the Beta site and the University's new International Strategy, we aim to improve the international content across the website. In June, we performed an audit of 51 country pages and discovered that:

  • content did not address specific user needs
  • there was duplicated information that also appeared in the prospectus
  • user journeys were fragmented making it difficult for applicants to find information
  • the layout of the information was not consistent.

As a result, we have made the following immediate improvements:

  • created tailored content to meet specific user needs for each country
  • removed duplicated content
  • updated the entry requirements, scholarships, agents and forthcoming visits information
  • re-ordered and re-named the tabs to improve user journeys.

For the next step, we will continue to monitor the external traffic to these pages and make iterative improvements based on the data.