Accessibility – Digital Team Blog /blog/digitalteam Delivering exceptional online experience that meet people's needs Thu, 15 Dec 2022 20:33:14 +0000 en-US hourly 1 /blog/wp-content/uploads/sites/27/2017/12/official-150x150.jpg Accessibility – Digital Team Blog /blog/digitalteam 32 32 159074713 Opening up the University website to more users /blog/digitalteam/2022/12/15/opening-up-the-university-website-to-more-users/ /blog/digitalteam/2022/12/15/opening-up-the-university-website-to-more-users/#respond Thu, 15 Dec 2022 09:21:09 +0000 /blog/digitalteam/?p=1257 My first task as a content designer at the University of Southampton was to design our new accessibility statement. The challenge was to design something helpful and easy to follow for anybody having difficulties using our site.

Being clear about what access issues users will encounter

Experiencing issues to describe what users themselves face

Helping users find what they need, without making them think

Working in the open so we can be held to account and build trust

]]>
/blog/digitalteam/2022/12/15/opening-up-the-university-website-to-more-users/feed/ 0 1257
The principles behind the design of our new products /blog/digitalteam/2022/05/18/the-principles-behind-the-design-of-our-new-products/ /blog/digitalteam/2022/05/18/the-principles-behind-the-design-of-our-new-products/#respond Wed, 18 May 2022 16:46:27 +0000 /blog/digitalteam/?p=1237 When we talk about transformation, what we mean is changing how things work to make better use of the opportunities afforded by digital.

How this is done depends on the organisation, but it usually includes making services simpler to use and cheaper to run.

Transformations in the University, to date, existed in the OneWeb programme. This work spanned over a few years, and resulted in a lot of change for everyone involved.

OneWeb was a ‘user-centred transformation’. This means that improving users’ experience was our first priority.

As a university, our aim is to make the admission journey easier for people to apply for courses, and for other user groups such as researchers, funders, companies to be able to find information in the way that makes sense to them, in their own context.

Our design principles and standards

Our design principles and standards reflect how we think about design. They provide a way for us to look at the work we create, how we create it, building the right thing and more importantly, building it right.

No one should be prevented from interacting with us or using our services. We believe in removing barriers. To help us do this, we must meet these standards.

Our design standards help us create and maintain good digital products and services. They instruct our choices and the work we produce. We use them to assess whether we’re doing a good job. These standards are universal: we can apply them to everything we do regardless of channel or product.

Understand users and their needs

We’re finding out who the users are, including the less obvious users.

Design and build whole journeys

We don’t force users to understand how the university works; we design joined up end-to-end services based on what users need.

Make it simple to use

Remove complexity for users, even if this makes our work more challenging.

Make sure everyone can use it confidently

We remove barriers to services. We research and design with inclusion and diversity in mind. We put our designs in front of people with access needs to find out any barriers and issues.

Use the right content at the right time, in the right way

We use data and evidence to understand what content users need and when they need it. Create content that helps people achieve what they need to do.

Iterate and improve frequently

Make improvements throughout the lifetime of the product or service. Focus on improvements that add value for users.

Define what success looks like and measure performance

We define what we want to achieve from the start. We identify the right metrics, then baseline, then track performance against them.

What’s in scope for the July release?

The big services and journeys that are in scope for our July release are:

  1. Study pages
  2. Study highlights
  3. Study facilities
  4. Research facilities
  5. Staff profiles
  6. Research areas
  7. Research Projects
  8. Research Groups, Centres, Institutes
  9. Postgraduate Research (PGR) – how to apply
  10. About our university section to include representation of faculties, schools and departments

We will release a full roadmap, including planned releases and mechanism for feedback, soon.

]]>
/blog/digitalteam/2022/05/18/the-principles-behind-the-design-of-our-new-products/feed/ 0 1237
How to resolve issues with email dark mode /blog/digitalteam/2022/03/18/how-to-resolve-issues-with-email-dark-mode/ /blog/digitalteam/2022/03/18/how-to-resolve-issues-with-email-dark-mode/#respond Fri, 18 Mar 2022 10:57:41 +0000 http://www.southampton.ac.uk/blog/digitalteam/?p=1202 With the introduction of dark mode (night mode, dark theme), users can adopt a dark system-wide appearance

What is dark mode?

With the introduction of dark mode (night mode, dark theme), users can adopt a dark system-wide appearance. The dark mode inverts the device’s display to a light-coloured typography and UX elements on a dark background.

There are good reasons why users choose to set their devices to dark mode:

  • it’s easier on the eyes, reducing digital eye strain.
  • it reduces screen brightness, saving your battery life.
  • it can improve content legibility, making it easier to consume content.

Gen Z spend 5 hours per day on mobile, most mobile users adopt dark mode to combat eye strain
Caption: Gen Z use dark mode to combat eye strain

Gen Z, our target audience, are the first digital natives, constantly connected online and spending over 5 hours a day on their phones*. With so much time spent online, they use dark mode to relieve eye strain. It’s not just this age group adopting this setting, 82% of all mobile users now have the setting activated**.

The dark mode setting is available on mobile, tablet, and PC. All users can activate the setting system-wide or through an application. This includes:

  • PC and laptop operating systems – Windows and Apple macOS
  • Mobile devices – Android and Apple iOS
  • Email Clients – Gmail, Apple Mail, Outlook

With such high adoption of this setting, we need to ensure our email communications are readable, on-brand and error-free. Basically, we need to ensure we’re meeting user needs in their own context, in the right place, at the right time. So, we decided to look into it.

What are the challenges in fixing dark mode setting?

There are a few key challenges in implementing dark mode. These are:

  • each email client and the operating system will render emails differently.
  • even the age of the device can cause a problem.

To combat it, the best way to test and check emails, is through an email optimisation tool, like . This resource performs tests on over 70 email clients, including dark mode simulations.

An email may look great with the dark mode setting turned off, but tests using Litmus indicate that elements of the University email template are affected in dark mode.

When dark mode is turned on, colours seem to invert causing readability issues
Caption: The difference between dark mode on and off, colours invert

The image above details two screens with the dark mode off and on. The screen on the left displays the email with the dark mode setting turned off. The screen on the right depicts the same email in dark mode. Here key brand colours are inverted, causing the email to be displayed incorrectly.

Our university is not alone, brands are affected too. Logos, text and call-to-action buttons seem to disappear. This isn’t the outcome any brands wish for when the purpose of an email is to engage with our customers, community and so on.

So, what do we do? Develop a plan for success

A process improvement plan, Step 1 Recognise issue, Step 2 Identify Step, 3 Redesign, Step 4 Communicate Step, 5 Implement Step, 6 Review
Caption: A process improvement plan setting direction of work

Before any work is undertaken, we developed a process improvement plan to:

  • outline the purpose of the work,
  • set direction, and
  • break the workload into smaller, more manageable stages.

First, we need to recognise the main issues, understand their impact, and identify who could be affected.

Who is our audience and what mail platforms and devices do they use?

Our standard email template is at the heart of our digital communications. We use the template to build engaging emails to prospective students, to communicate with enrolled students and staff as well as other groups such as our alumni community. Each audience interacts with emails differently.

It is important to understand which email client, and platform our target audience uses. Otherwise, we could focus on the wrong technology.

Target audience - Enquiry use mobile devices to read emails, Enrolled students use mobile devices to read emails, Staff use a mixture of mobile and desktop
Caption: The University’s main target audiences and how they interact with emails

When analysing our target audience, we identified three email clients (Apple Mail, Gmail, and Outlook). Whilst younger recipients prefer mobile devices, staff and alumni prefer a mixture of mobile and desktop.

Pinpoint the crucial issues

To determine the source of the problem, we carried out extensive testing using Litmus to identify the problem.

Inconsistencies between email clients and operating systems provide different results in dark mode. Most notably colours render differently. Whilst most images are unaffected, Gmail inverts smaller images such as small social media logos.

The diagram below details which operating system and email client combinations experience problems.

Three email clients tested - Apple Mail has issues in dark mode, Gmail only iOS has an issue in dark mode, Outlook Windows and iOS has an issue in dark mode
Caption: The results from extensive testing to identify which email clients and operating systems experience a problem in dark mode

What is the biggest problem?

The dark mode function inverts colours. All colours coded in the email can be affected. Colours of banners, call-to-action buttons, and hyperlinks, shift in colour.

Like all brands, the University provides a range of colours to create a visual impact and to distinguish the brand. But would these colours be affected by the dark mode colour shift?

The answer is yes. The chart below depicts what happens to our brand colours in dark mode and across several email clients. The result looks like a piece of modern art.

A chart showing all brands colours and how dark mode affects their rendering in emails
Caption: This may look like modern art, but is the colour shift of our brand colours in dark mode

Where the brand colour Marine 1 is utilised in our campaign emails, the colour will become lighter in dark mode. Whilst the lighter Marine 2 will become darker. This colour shift will affect the effectiveness of any button or hyperlink.

The challenge is to choose colours less affected by the colour shift for each part of our email template. With the help of Steve Wise, another member of the Digital User Experience team, we reviewed the test results to identify how to resolve the issues.

Redesign of the email template

Our testing identified that simpler email template designs are the best for replication in dark mode. The areas of improvement included:

  • simplify the template design,
  • ensure template is accessible and renders through all email clients,
  • remove background colour in content blocks,
  • introduce a single image replacing the header banner and logo,
  • simplified footer,
  • develop different social media icons

Creating the code to target dark mode

The coding has been a challenge. Not all email clients work the same way. Each element needs specific code for each email client and operating system.

Using the Litmus system, each piece of code was tested. Some worked, most did not. We conducted a total of 3,000 email simulations before we created a stable working template.

We developed separate code to create the email style, CSS, to target specific operating systems and email clients:

@media (prefers-color-scheme:dark) controls elements for Apple Mail and iOS.

[data-ogsc] controls elements for Android and Outlook.

Specific code targeting Microsoft Outlook, ensures text inverts correctly and is readable on a dark background. Without this inclusion, Outlook may not invert text correctly.

The key with any development is to ensure that the email looks and renders the same through all email clients.

The new email template corrects dark mode issues
Caption: The new University email template renders correctly in dark mode, thanks to some extra code

Hyperlinks and accessibility

Hyperlinks provide a link to external content and are identifiable by underlined text. This underline can cause readability issues as it cuts through any text with a dropped tail (g, j, p, q, and y).

Through code, we can remove the underline and replace it with a padded borderline below the text.

During testing, we found that Outlook removes this border and would need more code to insert the underline to hyperlink text. More code is not better.

The decision here is to retain the standard underline to hyperlinks. It works through all email clients and is a simple solution.

Implementation

The email template will be used in a broad range of CRM applications (Microsoft Dynamics, Connect, Mailchimp), each requiring separate templates. Depending upon the system, we will implement new code to allow the template to function correctly in the CRM system.

In Summary

We are pleased with the progress to redevelop our template, to better address the challenges of dark mode compatibility.

We’re looking forward to seeing how our users will respond to the new template as we start to integrate it into our upcoming campaigns and wider communication.

Many thanks to all my contributors: Doug, Steve, Ayala and Jonny.

Links to articles and further resources:

  • by 99Content *
  • by Night Eye **
  • by Litmus
  • by Business of Apps
]]>
/blog/digitalteam/2022/03/18/how-to-resolve-issues-with-email-dark-mode/feed/ 0 1202
Pretty (but) vacant: good looking digital services aren’t enough /blog/digitalteam/2021/11/11/pretty-but-vacant-good-looking-digital-services-arent-enough/ /blog/digitalteam/2021/11/11/pretty-but-vacant-good-looking-digital-services-arent-enough/#respond Thu, 11 Nov 2021 14:09:52 +0000 http://www.southampton.ac.uk/blog/digitalteam/?p=1149 I’ve been planning to write this blog post for a good 6 months now, if not longer having just been through a significant digital transformation programme, OneWeb, within a large complex organisation. But I got slightly distracted when I read book .

His book is about the:

  • power of design to influence
  • lack of designers’ involvement within the design process
  • absence of ethical considerations within the design process of products and services

It’s essential reading for any designer (or indeed non-designer), and it inspired me to write about a topic that has been on my mind for some time: emotional connection with users, and the point at which creatives stop being cool.

I’m going to keep this blog post specific – it’s a thought piece with some tips and hints on how to avoid commonly held misconceptions, with some practical advice and guidance when it comes to designing experiences.

Make it pretty (and make it work)

In the digital user experience team we are committed to representing the voice of our users through the design of services that meet their needs. Having just been through a big digital transformation programme, we’ve learned how to take a user-centred design approach to our work, because we recognise that by solving users’ problems, we will also be able to meet business objectives.

Many organisations say they value the importance of good design and ‘putting our customers at the heart of all we do’, while their services and systems fail to back up that corporate promise.

On reflection, there is a good reason for this. Generally speaking, digital functions grew out of physical functions such as Marketing, Communications and IT. These were traditionally the ‘go-to’ areas that were commissioned by stakeholders to create stand-alone platforms, creative campaigns and innovative solutions. As a result, so many companies still focus on stand-alone innovations before people. There seems to be a shared mythology that pleasing aesthetics are all that is needed to capture attention, elicit engagement, and smoothly convert another happy customer. But the more difficult question, with more up-front effort, is does it DO what it’s SUPPOSED TO DO in the first place.

Pretty vacant street sign left on a pavement by a brick wall
Caption: ‘Pretty Vacant’ sign, courtesy of

You don’t go to the cinema to listen to the radio

We want people who visit us in an online or offline environment to have a seamless, frictionless experience, with very direct outcomes.

We want them, for example, to:

  • feel connected with us
  • remember us, even if just for a quick moment
  • become our advocate
  • tell their friends and family about the outstanding work we do
  • carry our message in a crowded and noisy world

So that…

  • they buy our goods and use our services,
  • we can reduce our support cost and burden
  • deliver against strategic outcomes… you get the idea!

We hope that in the longer term, it might even translate into a stronger brand advocacy, loyalty and eventually increased revenues. The ultimate utopia: users’ needs meeting business’ needs.

But emotional connection is about more than just pretty pictures and impressive-sounding vocabulary – it is about meaningful content that helps people achieve something they set out to do. In this scenario, a user walks away from their interaction with us feeling satisfied, and with an innate sense of the great care we took to meet their needs as easily and clearly as possible – now ٳ’s a recipe for brand loyalty.

The way we choose to share this content matters, and certain mediums (or channels) are better than others to get that impact. I’ll be the first to admit that a web page on its own is hardly ever enough.

We need to choose the right tools, or channels, for the right job. Just like we can’t expect people who go to the cinema to listen to the radio: select the best tool available for the task.

Let me explain.

Art vs Design

The basic is to create, fashion, execute, or construct according to plan.

as something that is created with imagination and skill and that is beautiful or that expresses important ideas or feelings.

, she talks about the similarities in the two concepts but also how they are different in their own ways. She says that design is a deliberate practice with intentions to create with a specific purpose and plan. Art is an expression of the artist for decoration, and meant to be interpreted in any number of ways.

Good art is always interpreted, leaving the observer to find the missing pieces dropped on purpose. Whereas, good design should never be open to interpretation; it should be easily understood. In fact, good design when done well is invisible to the user ().

My reflection of that is that in many organisations, ‘design’ is often mistakenly interpreted as indulgent frosting on a functional interface. The problem with this view is that if design and users’ needs are not considered from the start, it’s extremely hard and costly to do something about it later on.

There’s a good reason why many corporate portals or systems don’t function to meet requirements. They have not been designed from end-to-end with both a carefully considered user and outcome in mind. Factoring into your business case two weeks of UX design before the end of a project may meet the requirement of ‘doing some design’, but in reality won’t make the user experience any better!

You cannot fix a cake once it’s been baked. wise words – not mine. Mike says critique should be embraced at every stage of the design process, by the very people who’ll be using your service. That’s how you increase a project’s chances of success. Get feedback early and often to decrease the overall costs of maintenance, repairs and doing big projects time and time again!

The extent to which aesthetics matter

Aesthetics do matter. It is a simple fact that good-looking products and user interfaces are perceived as more valuable and having more positive qualities, even if it’s not true! This is referred to as . Users tend to perceive that things which look better, will work better, even if they are not actually more effective or efficient.

Really good design takes this into account. It makes sure that content is presented to users in a way that is aesthetically pleasing, both as a first impression and also consistently at all stages in the user journey. This elicits a sense of trust in users, and rewards that trust by maintaining it throughout their experience.

But…

Undirected or non-intentional aesthetic design carries its own risks. If this attempt at emotional engagement compromises basic functionality, reliability or usability of an interface, the positive experience you want to promote will mutate into a rant-inducing disaster for our users.

There is no point in presenting an attractive interface that doesn’t help users do what they came to do… or worse, gets in their way.

An example of a well-designed teapot with handle and spout on the right hand side. This tea pot is called "impossible teapot" by Jacques Carelman
Caption: Jacques Carelman’s “impossible teapot”. Image credit:

Real examples include social media posts without punctuation, which puts an added burden on people who use screen readers. Or the use of hashtags that don’t use capital letters to help distinguish words. Or the failure to add alt-text to images. Other examples from physical settings, are special signages in buildings or at events that are meant to help clarify how something works or is accessed. Without these signs, a user is left guessing, creating needless frustration.

It shows how design serves as the communication between object and user. We call this the “”: where design elements give you the wrong usability signals to the point that special signage is needed to clarify how they work.

An example of The Norman Door: the signs say 'push' but there are large handles implying the doors should be pulled.
Caption: Your sign says ‘push’ but your handles suggest otherwise. Image credit:

Examples and tips

Tip 1: how do we know what to design?

The answer is – always -your users know. The solution is firmly held by the people we’re designing the product or experience for. This is why we need to understand them better so we know what they need as well as what is aesthetically pleasing for them.

A OneWeb laptop sticker with the caption: 'The answer is always: the user knows statement'
Caption: a OneWeb end of programme sticker: ‘The answer is always: the user knows.’

Your answer is also to start viewing ‘design’ as a series of structured, systematic, intentional decisions. Some of these may not look much like “design” as it is traditionally (and mistakenly) understood (i.e. visual styling). It could be in the form of processes, or structured data, which are some of the layers we have to consider when we design services or interfaces.

For example, text messages from an organisation may not be designed as an official communication channel, therefore causing confusion and preventing users from taking an action resulting in not meeting users and business outcomes. Or say we want to add entry requirements, or related news in multiple areas within a website, rather than creating content multiple times across multiple pages, we can instead structure and manage it in one place, whether we’re publishing it for the first time or the thousandth.

Tip 2: keep things simple

The functionality of products, platforms, and websites must not be undermined. Without it, we are designing our products in the name of art and without a purpose.

Even basics like the photography brief for some new imagery, should always come back to the same principle of fulfilling an intentional purpose: meeting our users’ needs in their own context:

  • can I discern the image?
  • can I see myself in these spaces?
  • are the images authentic?
  • am I inspired by your work?

Fundamentally, this is an essential part of creating accessible images and therefore services. You should test what problems these images are there to solve. Your work should be going in front of users, your actual customers, to increase your chances of success and as already mentioned, de-risk issues when you eventually go live.

K.I.S.S. Keep It Simple Stupid.
Caption: K.I.S.S. Keep It Stupid Simple. Simplicity is a lot harder than complex, image credit:

Tip 3: persuasion does not happen at pixel level

As beautifully articulated by Mike Monterio, “a pixel is just a point of proof in the execution”. If we want to design the right way, we are going to have to do it by talking to people. Because designers get hired to solve business problems.

Design isn’t marketing. Both are important but different. Marketing is about persuading users that something is a good idea. Design is about making it self-evident. A product’s usability is often cheaper and easier to address than its persuasiveness, but in order to achieve this with good design, we should not just be feeding in at the beginning or the end of work – good design happens from the start and throughout.

Answering the question of what users want to achieve is done through user research. That is not the same as more traditional market research that has been carried out for years. User research focuses on understanding user needs and how to address them, rather than how to convince them to buy. The emphasis is on observing their behaviour, rather than canvassing their opinion.

As an example, we got insights from user research for some of our study products, which are around building emotional connection. It was all about:

  • being able to see the university’s places and spaces, the people (staff and students)
  • hearing students tell their stories about their experiences in their own words – all about getting a true insight into their possible future
  • being able to feel that this is a good choice for them

This then informed our content strategy in the selection of which content to show. In many cases this is content that hasn’t previously been published, or not published in a way that will meet these needs.A survey or focus group could have possibly suggested some of these insights, but they wouldn’t have allowed us to find, try out and validate the best ways to execute our design solutions.

Tip 4: solving the problem can’t happen until you understand the problem

That generally means talking to people who are experiencing the problem – not your colleagues, or your friend, or your next door neighbour – unless of course they are among the people who will be marginalised as a result of your product design.

There also had to be a socio-economic lens to the design decision making, similar to those in an article by . Basically any organisation has to consider the impact of change on users, especially the ones who could be excluded by any bad decisions.

Tip 5: not understanding the scope of your work is a problem

Generally speaking, organisations are not very good at articulating business outcomes, and this makes it much harder to understand the scope of the problem you are trying to solve.

Example: “we need more revenue” is not a problem, it is an observation. Because it is not a problem, it also doesn’t have an actual solution, and if you attempt to seek one, you’ll find yourself bogged down in endless speculation that produces few results.

“Our customers drop off during the onboarding experience, which lowers our conversion rate and is leading to lost revenue” is a problem. It is specific, informed and, perhaps most importantly: actionable. Armed with this, a digital user experience can begin the investigation that will eventually lead to a meaningful answer.

A big part of what design is about is to give us a problem to solve with some measurable outcomes that explain what metrics you are looking to move.

Tip 6: not doing research to understand the problem is a problem

Back to the cake metaphor, it’s always a good idea to make sure that the cake is baked with the right ingredients for the right person. And it’s always a good idea to have a good peek behind the curtains to get your assumptions tested. I am forever grateful for challengers who kicked the tyres during usability testing or prototyping. I’d much rather it happened at that point in time, before the team released something that people cannot use. The real value of user research comes from increasing our understanding of who our users are. With every study, every interview, every interaction, our team gets to know our users a little bit better, including the context in which the users work. Then design, test and iterate!

Gathering the right feedback to understand what will drive the connection with users is a gift. “I like it”, or “this looks good ” is not good feedback because it only gives us part of the picture. It doesn’t tell us if someone can use a service, or what frictions they encounter, and does it do what they need it to do. Data and metrics can’t fully answer these questions and they can’t steer you towards the best solutions. This is why we use both qualitative and quantitative research techniques. Data tells you what is happening, qualitative research tells you why and helps you figure out how to solve problems. We talk to people, we get under the surface of what is happening. Good feedback is done through observations in order to identify how to improve a service or a product. Start by outweighing the evidence. Learn what works, learn what doesn’t work ().

Frustration costs

When something is not designed it becomes messy. Not joined up. Annoying. Not user-centric. You make your users work extra hard. In a digital world, extra unnecessary work translates to users going elsewhere to get their needs met.

was developed by the in 2001 as a communicative model for illustrating the variation in companies’ use of design. It suggests that when an organisation adopts design as part of its business strategy, ٳ’s a positive link with higher revenue.

The Danish Design Centre’s Design Ladder lists four levels of design: 1. non-design, 2. form-giving, 3. process, 4. strategy
Caption: Design Ladder lists four levels of design.

We’re seeing many companies that understand this link. But the truth is large organisations are orientated around themselves, not the end-user.

As a design team, we’re in a position to help users make decisions, but also for our university. (Jared Spool). It creates frustrations, generates calls, and increases development costs through rework and waste. It also damages the environment (, Gerry McGovern).

We’re therefore in a unique position to research and test where poor design costs our organisation money.

In addition, try to ‘flip’ the perspective and see the choices you want to present from the outside. Avoid flooding with options, but bear in mind the balance between users’ time and comfort zones for handling options for a digital product. Guiding them to select between clear options that will get them somewhere quickly will take the work out of the user experience and reward the user and organisations alike.

Using common design tools and patterns, colour, line, contrast, help people consume information and make decisions more easily. “This is specifically the case for designing forms, or when you convince someone to take an action – the way typeface, colour and layout fit together says a lot about a brand and shapes new users’ perceptions.” (Aaron Walter, ).

Conclusion

Bear in mind that the aesthetic-usability effect has its limits. A pretty design can make users more forgiving of minor usability problems, but not of larger ones.

At the end of the day if:

  • the user can’t find the product, the user can’t buy the product.
  • the service has multiple interactions that aren’t consistent visually or that haven’t been designed for access, you end up failing those people you were meant to serve in the first place.

Even great-looking sites will have no revenue if they suffer from poor findability. The emotional connection is therefore derived from being able to complete the task efficiently.

From a pragmatic point of view, we need to master the right balance between the design, functionalities, and user experience, planning, thinking ahead, doing deep analysis and being careful and considered in constructing something that will be solid, reusable and stable. Form and function should work together. When interfaces suffer from severe usability issues, or when usability is sacrificed for aesthetics, users tend to lose patience. On the web, people are very quick to leave.

Final notes

There are many important points raised in this article. Many of them are underpinned by good standards and assurance check-points.

If you want to hear more about it, we will be hosting an Ask Me Anything session, and we will be happy to answer your questions then. To find out more first, .

Huge thanks go to Mark, Kate, Jonny and Claire for helping make this blog post better.

Links to articles and further resources:

  • (Ayesha Ambreen)
  • (NN Group)
  • (Don Norman)
  • , (Jared Spool)
  • (Jared Spool)
  • (Mike Monteiro)
  • (Danish Design Council, issuu document)
  • (Aaron Walter)
  • (Smashing Magazine)
  • (Jesse Russell Morgan, UX Collective)
  • (Ben Holliday)
  • (Gerry McGovern)
  • (Gareth Ford Williams)
]]>
/blog/digitalteam/2021/11/11/pretty-but-vacant-good-looking-digital-services-arent-enough/feed/ 0 1149
Why digital isn’t always greener or fairer /blog/digitalteam/2021/03/03/why-digital-isnt-always-greener-or-fairer/ /blog/digitalteam/2021/03/03/why-digital-isnt-always-greener-or-fairer/#respond Wed, 03 Mar 2021 12:50:39 +0000 http://www.southampton.ac.uk/blog/digitalteam/?p=1063 Over the past few years, and especially since the global pandemic where many physical activities have moved online, it has become more important than ever to ask ourselves how to make our web services more energy efficient and reduce their carbon footprint.

As someone who has always worked in digital roles, I thought for a long time that moving everything online would make me happy. But fresh insights bring fresh perspectives, and I’ve become more cautious about the ways in which we use digital tools to tackle real world challenges.

has brought a new sense of urgency to many digital practitioners, including myself, over the past decade. If this topic is new to you, then in essence the Internet – everything from data centres, to telecoms networks and end-user devices like phones and laptops – uses a lot of electricity. In fact, if you add it all together, the internet uses roughly the same amount of electricity as the entire United Kingdom, one of the world’s largest economies (Tom Greenwood, ).

In this blog post, I acknowledge what we are doing as a digital user experience team, some of our ongoing challenges as part of the OneWeb programme, and also what other steps we need to take, collectively and individually, to tackle this issue.

#1. Simple, small and effective content has a lower environmental burden

Simple, small and effective content is good for the environment and also better for your users, and you!

Design and content have a big impact on energy efficiency. From search engine optimisation (SEO), content design, and use of images, videos, fonts, to code and design choices. Running a popular digital service always has a cost associated with it, but we don’t tend to factor in the cost to the environment. The assumption is often that digital means green, but this is far from the truth.

In the words of Gerry McGovern, author of :
“Our ability to create stuff using digital tools far outstrips our ability (or willingness) to organize and manage what we have created. Dealing with the consequences of easy production and poor content management is a growing challenge”. –

To illustrate Gerry’s point I’ve included a snapshot from our 2018 content audit where we estimated our digital web estate to contain roughly 4 million web pages. Only 156,000 of these have been accessed in the last 3 years and just 8,000 pages account for 90% of all traffic to our digital estate.

Content audit circles
Caption: representation of access to our web content, 2018

COVID-19 may have reduced traffic emissions, but it exacted a toll elsewhere for this saving. Like many other academic institutions this past year, education had to be delivered online. The University’s daily contribution to global carbon emissions as a result of online lectures and staff meetings is likely equal to that of someone flying from London to New York¹. Given this additional burden, there is even more reason to consider how we make content that is designed to last, and how we focus on completing meaningful tasks rather than ‘vanity projects’ that needlessly consume time, energy and budgets…

Now – Southampton is not unique in this matter. This is a consistent problem for almost every large, complex organisation.

There are many reasons why an organisation’s digital estate becomes unnecessarily bloated and so much content goes unvisited. It might be that:

  • the content and underlying service are not designed to meet user needs
  • the content is inaccessible to a large number of users because of poor positioning or broader accessibility and user experience (UX) issues
  • constantly seeking the next new thing which makes it harder to argue for review and maintenance ahead of creation… a challenge we’ve already discussed in this blog post about digital governance

¹dzܲ if 20 people join a Microsoft Teams video call for 1 hour, all with their webcams broadcasting Standard Definition video. This doubles if everyone broadcasts HD video.If the University delivers 50 online lectures or virtual staff meetings like this every day, between 225GB and 550GB of data will be sent across the internet.It is estimated that . So, 225GB of data generates 675KG of carbon.A London to New York flight generates roughly .

#2. Whack-a-mole with platforms and systems

I’ve never said that OneWeb is the silver bullet to all our organisational problems. However, thanks to the boldness of our University in trying to deal with it, it is a step towards a better standing point, which includes the reduction in size and therefore cost of maintaining our web estate. We didn’t necessarily plan around adding to the green credentials of the University, but this will be one of the longer term outcomes of the programme as we pare back and simplify to only what’s needed to meet user needs and help them complete tasks.

We’re working as fast as we can, trying to address all the legacy issues around content creation and maintenance, which are only the tip of the iceberg. As we’re working our way through, however, we’re reducing and figuring out some of the answers to long-term maintenance and support, as more and more platforms and systems crop up all over the place.

Cartoon of 'whack-a-mole' game
Caption: Whack-a-mole with systems and platforms, image credit:

I do appreciate that some of these appear for very good reasons, for example, in response to urgent policies and compliance requirements. However, the lack of forward thinking and the burden this creates for users, as well as the impact to our planet, go against our best interests as a society, organisation and individuals with sustainability targets in mind. Platforms that do not meet people’s expectations undermine the credibility of the service and of the University.

And this is a good place to segue to the other side of digital sustainability ethos: fairer, more equitable design.

#3. JEDI is not just a force for good in galaxies far, far away

The Justice, Equity, Diversity, Inclusion (JEDI) framework supports creating digital products and services that are fair and open to all.

As mentioned at the start, it is important not only to promote these principles, but to fold them into the very fabric of our projects. A project ethos with JEDI at its core is less likely to alienate the people working on it as well as its potential audience (whether intended or unintended).

So, how do we incorporate these principles into our own design practice?

Equality and justice in digital design is a question of opening up opportunities for users by making our information and processes more transparent, and more available. Right now, we are employing design thinking around PhD level, where currently the information needed is scattered to the winds, the application process is opaque and specific opportunities are hidden. We’re bringing everything a potential candidate would need together and creating intuitive user journeys, while also adding guidance so that anyone from any background can easily gain an understanding of information they need.

Plain English layer

Embedding Plain English and accessibility principles in all our digital content is an exercise in inclusivity. We specifically aim not to exclude anyone, whether they:

  • don’t have English as a first language
  • have a disability
  • are looking at our content while multi-tasking, for example looking after family
  • are simply not initiated in the subject area yet

Our users are diverse people with diverse needs that change from journey to journey. We should design our services to reflect this.

There are obvious social equality issues that factor into our users’ backgrounds and circumstances. One way we aim to improve things is by applying a ‘plain English layer’ to things like research projects, which we expect will also help with discoverability through search.

Diverse communities

Our aim for the new subject areas pages (currently in prototyping stage) is to create a strong sense of place. We are assisting potential students in their desire to imagine themselves ‘there’. ‘There’ means physical spaces like facilities but it also means community – people. We need to reflect the diverse community and culture at Southampton, as we know that’s really important to all our users.

Part of Inclusive Design Toolkit (developed for ) reveals that we should be thinking about variations in access and inclusion when we think about user personas. It is a good reminder of situational inclusion. We think ٳ’s another layer (socio-economic) that would lead to some people having greater situational needs than others. Perhaps particularly when we’re talking about access to tertiary education. This could also be exacerbated by the global pandemic.


Image: Microsoft Design Toolkit by Kat Holmes

#4. With a great website comes great responsibility

“The world is working exactly as designed. And it’s not working very well. Which means we need to do a better job of designing it. Design is a craft with an amazing amount of power…Design is a craft with responsibility” – , Mike Monterio

Reduce, reuse, recycle…

Our evolving design system promotes a coherent, familiar and shared design language underpinned by design principles which support the principle of access for all. It ensures design patterns are reused, work isn’t repeated and user experience can be sustained.

Our university design system
Our evolving design system

As we redesign new services, we’re working with external accessibility organisations to independently assess our designs to ensure they meet accessibility standards so that people can easily access and use our services, regardless of any physical or mental disability.

Third-party supplier products are vetted as part of our procurement process to ensure they meet user needs, adhere to accessibility guidelines and provide an experience consistent with our existing products.

We work with existing suppliers to help improve the accessibility of their products with immediate fixes and feed into their product development roadmaps.

Our Student life section of the site has been redesigned for simplified journeys with more direct routes to completing key user goals. For example, applying for accommodation now follows patterns users are familiar with on commercial sites, allowing them to select rooms and locations which meet their individual needs. Users can now easily compare and save the key details of their accommodation options before applying.


Accommodation journey with key user goals

We have worked to harmonise the experience on the site and our third-party application system. Immediate changes included aligning and simplifying language and applying consistent design patterns. Changes to interactions and journeys require product development and have been fed into the supplier’s roadmap.

Journeys are supported by imagery and student stories showing the diverse community of people actively engaged in university life, but only when they meet user needs and add value. They help give users a feel for the place, what they can do, and what their lives might be like there.

Data, and being responsible with it

One of our principles is to, where useful, ingest existing data from various university systems to products and services. It’s then surfaced to users in focused locations in a familiar and accessible format. For example, staff profiles, which link staff to their research work, teaching activities and associations with organisations and people, now automatically base much of their structure on other reliable data sources.


Image: visualisation of staff profile product with key data sources

Ultimately this saves time for our internal users and allows our digital experts to concentrate on more involved tasks, as well as supporting a wide breadth of external user journeys. It also promotes one true source for structured data, accuracy and reduced maintenance overhead in the longer term. It will therefore be easier to sustain in the future, or innovate new solutions around user needs and have data that is used in a responsible and ethical way.

Conclusion: Behaviour change starts with the organisation

We have a lot more work to do. We’re at the start of a much bigger journey. As part of OneWeb, we are helping colleagues to streamline and organise our web estate, making it quicker for people to find the information they need. This in itself will help reduce our impact on the environment. But that’s not enough.

We have to change our behaviour, as individuals and organisations. Technology is rarely the key challenge:

  • organising content is key
  • focusing on quality over quantity is key
  • designing to last is key

For some people, web content, and ‘digital’ feel cheap, easy to create and store – rather like ‘fast-fashion’. Many are used to ‘print’ and are concerned with perfection and completeness before publishing so content isn’t working as hard to meet people’s expectations. Why is that? Our key problems are social, not technological.

If user centred design is all about understanding people’s needs and delivering services that meet them, then it follows that we should consider the impact of those services have on our users and, by extension, our planet.

In the next few months, we will deliver a new digital user experience strategy, which will include guiding principles and governance. We’d like to hear from you as we get round to introduce it.

. Thanks for reading.

My immense thanks to all my contributors: Mark, Dan, Steve, Kate, Jonny.

Resources we learn from:

  • by Gerry McGovern
  • by Tom Greenwood
  • by Smashing Magazine
  • from Kat Holmes for
  • by Snook
  • by Cennydd Bowles
  • by Lou Downe
]]>
/blog/digitalteam/2021/03/03/why-digital-isnt-always-greener-or-fairer/feed/ 0 1063
Going for Gold – how do you achieve digital accessibility excellence? /blog/digitalteam/2020/05/18/going-for-gold-how-do-you-achieve-digital-accessibility-excellence/ /blog/digitalteam/2020/05/18/going-for-gold-how-do-you-achieve-digital-accessibility-excellence/#respond Mon, 18 May 2020 21:57:00 +0000 http://www.southampton.ac.uk/blog/digitalteam/?p=887 In celebration of this year’s Ƭ Accessibility Awareness Day (#GAAD), let’s take a look at some of the challenges in defining excellence in digital accessibility on an organisational level.

Defining accessibility

The word ‘accessibility’ gets used a lot. Since 23 September 2019 the law around website accessibility has changed for public sector organisations.

As a university, we’re lucky to have some very dedicated expert colleagues in different parts of the organisation. They range from world-leading researchers to service providers, and dedicated digital and user experience practitioners. We’re also lucky to have access to students and other users, including disabled students and other advocates. They all work very hard to push the accessibility and inclusivity as high as possible on the University’s agenda. I’m always grateful to be working at a place that values and tries to do the right thing by the user.

Over a number of years, I have had lots of conversations about accessibility. One observation that I’ve had is that people often have very different lenses on the topic and what ‘good’ means. That in itself can occasionally make having effective conversations and agreeing on shared definitions difficult.

The digital services definition

I’ve been looking at a lot of different definitions, tested accessibility design patterns and . Often, the word ‘accessibility’ gets used to describe how many people can use something.

defines ‘accessibility’ as “more than putting things online. It means making your content and design clear and simple enough so that most people can use it without needing to adapt it, while supporting those who do need to adapt things”.

I like Good Services design principles, especially number #11: a good service is usable by everyone, equally. “The service must be used by everyone who needs to use it, regardless of their circumstances or abilities. No one should be able to use the service less than anyone else” (, Lou Downe). Lou makes a case for designing for inclusion, and this goes beyond accessibility.

A poster from Good Services book by Lou Down saying "Inclusion is a necessity not an enhancement". Inclusion is a necessity, not an enhancement poster. Lou Downe, .

Her point also helps set the scene a little for why it has been tricky for us as a programme, and for many other organisations, to be clear on what actually ‘gold’ (beyond the required minimum) accessibility standards are for our University.

So why is it so challenging? Here’s my non-exhaustive list:

Challenge 1: ٳ’s no A to Z guide for applying accessibility

The OneWeb programme was set up specifically to re-engineer digital services and products for our many end-users. Essentially the brief is to design every service around user needs. Accessibility can obviously affect the needs of every group we design for so ‘baking in accessibility’ has always been one of the guiding principles of the programme.

If the goal is to meet users’ needs, then surely we must try to make our services as inclusive as possible. We’re doing this by ensuring there are no barriers that make it impossible or difficult for anyone to use them. We want our services to be easy to use by everyone.

This isn’t always simple though.

Stakeholders and end-users often have conflicting requirements and there will be situations that are overlooked due to us being unaware of them.

So it is important to understand why someone might be more likely to be excluded from our service and tackle the underlying causes for it. For example, providing an alternative way of contacting us, or ensuring we represent diversity in our imagery.

In reality though when deadlines are short, budget is limited, there are legacy systems at play, and other challenges to work with – compromises do happen. This is not something that I think we should accept lightly, but I’m being honest about it.

Also as we’ve already established, inclusivity goes way beyond digital services. We need to consider other touch-points in the journey including when individuals may have a temporary or a permanent access issue. It goes all the way to physical access in buildings to HR policies.

Examples of permanent, temporary or situational impairment from Microsoft Design ToolkitMicrosoft Design Toolkit: Examples of permanent, temporary or situational impairment via

This is one of many reasons why diversity in teams and organisations is important. It’s why we must conduct regular user research with our audiences and test with as many users as possible to make sure our services truly work for everyone. It does beg the question – how much can you polish stuff that hasn’t been built with users in mind, let alone accessibility and inclusivity in mind?

This cannot be an after-thought. It has to be ‘baked-in’ right from the start to make sure our services are:

  • useful
  • usable
  • desirable
  • accessible
  • credible
  • findable
  • valuable
  • and inclusive

“Inclusion is like making blueberry muffins – it’s a lot easier to put the blueberries in at the start than in the end.” Cordelia McGee-Tubb ( ) in Good Services, Lou Downe.

So really, good accessibility design – is just good human-centred design. It is about accommodating 100% of your potential users.

“We treat disabled people as if they are different but that isn’t the case, as digital accessibility affects all of us. If nothing else, you should see it in a selfish way, as one day you will probably need this type of accessibility.” .

Challenge 2: evolving guidelines

Given that we design digital services, we refer to the (the body that produces many of the standards that the web relies on) . There are three conformance levels:

  • A,
  • AA,
  • AAA

‘A’ is the minimum level of accessibility. We aim as a minimum for AA level as a public sector institution.

Achieving ‘one best way’ for compliance with WCAG 2.1 can be challenging, fraught with complexity and might result in lack of clarity, which is time consuming and can be expensive when the clock is ticking on your project. In reality there could be different interpretations of accessibility standards, which can create natural tension between experts, such as content designers, user researchers, developers, UX designers, product owners and executives.

As far as I’m concerned, the standards were never intended to allow for multiple interpretations, but different interpretations serve different needs, and are not less or more valid than one another. As such, organisations should define the goals they are striving for, so that when designing, testing and auditing the work, everyone is working to the same interpretation. Easier said, than done – I know!

In terms of OneWeb, and eventually when the programme moves to Business-As-Usual, all new features we’ve shipped over the past year have been designed and tested to meet WCAG 2.1 AA guidelines to ensure our products are accessible.

At the same time, we’ve gone back and retrofitted existing features and interactions for better accessibility on live products. Examples of it will be changes to content following content design best practice from the – a universal content style guide, based on usability evidence. Other examples will be in development and prototyping of specific features such as navigation, forms and other components.

Challenge 3: stakeholders and strategies

This is probably one of the most challenging parts of all. In a large, complex organisation like a university that is inherently fragmented by its devolved nature, it can be difficult to find the right voice that can guide us with ease to the right strategy and outcomes.

The truth is that when accessibility is introduced as an organisation-wide practice, rather than just observed by a few people within specific teams, it will inevitably be more successful. If accessibility is the objective, inclusivity is surely the outcome. When everybody understands the importance of accessibility and the part they can play, we can make great (digital) services.

Accessibility is not a privilege Accessibility is a right – not a privilege

We’re aiming high, so if we’re to be bold and try to achieve a gold standard (uncharted territory for us right now) as an organisation, we need to define it for all areas, not just web accessibility. For the practice to succeed it cannot be seen just as a line item in the budget. It’s an underlying practice that affects every aspect of the physical and online services as an institution.

Striving for an ideal approach is also not always about meeting organisational needs as this may require additional funding. Not because accessible services are more expensive. Simply because it requires teams to be developed and trained, and because we have to ensure our users can use the service in the way that best suits them. That sometimes means providing alternative materials like translations, or transcripts to benefit all users.

And as standards evolve, what’s technically possible today, may be completely different in 12-months time (or even less) and therefore we should be thinking longer-term so we can optimise for advancements as they happen. For example, automated captioning for video has come a long way in the last 10 years.

Being transparent

From speaking with the finest minds about accessibility within our organisation and beyond, we’re still busy ‘baking it in’.

As a team, we’re still chasing the ultimate view of gold standards that we’re defining with our university. In the next few weeks, we’re hoping to start sharing with other colleagues some of our learning, the assets we’re currently developing such as improved reusable components and pattern libraries, and best practice content design examples. However, it takes time and practice – from inclusive user research, to product development, testing, and expertise, to consistently work at this level.

One thing’s for sure – the importance of a defined and accepted strategy is the first part of addressing the challenge of how we’re going to define, develop and meet a gold standard in accessibility and inclusivity.

Ƭ Accessibility Awareness Day takes place on 21 May 2020. Thank you for reading.

My thanks to , and Dr. Sarah Lewithwaite for their thoughts and suggestions on this post.

.

Resources we learn from:

  • from Content Design London
  • by Lou Downe
  • GOV.UK
  • by Laura Kalbag
  • by Cordelia McGee-Tubb
]]>
/blog/digitalteam/2020/05/18/going-for-gold-how-do-you-achieve-digital-accessibility-excellence/feed/ 0 887