User research allows us to move beyond assumptions to identify how we can best support our users. Great user research needs to be inclusive, non-biased and focused.
Why do we need user research?
The users of any given product or services could be internal or external. In most cases, it’s both.
When you understand your users, you are more likely to design products and services that work well for them.
Knowing your users better means you can:
allocate your resources more appropriately
provide digital tools that make background processes more efficient
improve accessibility
free human resources to focus on the most vulnerable citizens.
So how do we learn more about our users?
What do we mean by “user research”?
User research looks to unearth the buried treasure in a way that captures an individual’s experiences, motivations and struggles.
User researchers help their organisation empathise with the people they design for and build up a genuine understanding of their daily lives, routines and the tasks they wish to perform.
As researchers, we try to find the truth in amongst often conflicting stories from different people. We realise that people can be unreliable witnesses: they might not know why they are doing the things they are doing, especially in times of distress. There are also those who don’t want to tell you about their experience, or don’t tell you the whole truth.
Conducting user research helps us fill those gaps about our users and create services that meet their needs.
We use a range of techniques and approaches when we research.
Observational (ethnographic) research
Typically occurring early in the research process, this technique is all about observing how users behave. It helps us understand what they are trying to do and the context within which they experience our services.
User stories
User stories help to create a simplified description of a service by describing the type of user, what they want and why. User stories can help us understand some of the needs and aspirations we may have missed.
Here’s an example of a user story:
As a new dog owner
I want to find local parks
So that I can safely exercise my dog
User interviews
Having a guided, individual discussion with users helps us better understand their lived experience and the circumstances that led them to access our services.
Focus groups
During a focus group session, we ask a group of people about their perceptions, opinions, beliefs, and attitudes towards a service or concept.
Usability research
After we have developed an early prototype, usability testing helps us understand how users interact with the prototype, which allows us to refine it quickly and often.
How can we make user research inclusive?
To build a good service, we need to consider the experience of a wide range of users.
This includes people who:
are living with disabilities
are culturally and linguistically diverse
need support to use the service.
Being inclusive isn’t just about the service, but also about the way we conduct our research. This means that we need to think inclusively when recruiting participants, selecting locations and conducting our sessions.
What makes a good user researcher?
Good researchers need to be empathetic, curious, good listeners and able to put themselves in the shoes of the user. They should be able to probe sensitively, as sometimes users can be too polite or overwhelmed to tell us their stories.
Questions need to be open and curious so that we capture a range of different experiences and opinions. We need to ignore our own bias and ensure that we don’t design research that presents loaded questions to our users.
Understanding exactly how and why people are excluded can help us establish concrete steps towards being more inclusive. We can make things better for everyone by addressing accessibility.
All of us are going to have a disability at some point in our lives. These can be temporary like a broken arm, situational such as using a device in a dark room, or they can be natural such as progression of aging.
Looking for points of exclusion
vision, hearing, motor or speech impairments
cognitive impairments (for example, ADD, dyslexia or autism)
situational challenges (context in which users are interacting with the product such as a dark room or a public transport combined with ability-based impairments could result in further, overlapping pain points)
temporary impairments (for example, a broken arm)
How to design accessible websites?
Colour
Here is a fictional university website called Accessible University. It has been created to demonstrate a variety of common accessibility problems. Try to navigate the page to identify any links.
There are three links on the page that say, “click here”. They are not descriptive and informative and they do not meet contrast requirements, which makes them extremely difficult to spot. You can read more about contrast requirements on accessibility.digital.gov page.
Additionally, the links rely on colour to communicate information. Colour blind users would be unable to distinguish them from non-link text. Therefore, links should always have an underline.
People may have difficulty distinguishing red and green and blue and yellow.
Not relying on colour alone to convey important information was an essential element of the design of a symptom tracking app. Here is a prototype of the app:
On top of colours such as green representing low severity of symptoms, orange representing moderate severity and red representing severe symptoms, letters L for low severity, M for moderate and H for severe were added resulting in a system that users who can’t distinguish between colours can understand, without compromising the design for users who can see colours well and they usually associate green with low level, orange with moderate and red with severe/high level.
Text colour on white background
Many dyslexic users are sensitive to the brightness the high contrast colours cause. This is the reason why we don’t use pure black colour for text used on a white background. Our primary colour is: #0B0C0C. Our secondary colour is: #505A5F. Have a look at Hounslow Design systems to learn more about the colours, styles and components we use.
Apply background colour to input elements on all forms
Apply background colour to input elements on all forms, in case users change background colour to black so that users can still see the black text and input background colour does not go black. Learn more about how users change colour on websites.
Responsive design
The page should be readable and functional when the text size is doubled and viewed on any device or desktop.
When designing for mobile devices make sure that your interactive elements such as buttons or links have touch targets that are large enough and there is enough space/padding around them to make them easy to press without overlapping onto other elements. This is extremely helpful to everyone but especially anyone with a motor impairment.
Simple design
Here is a banner video used on a university website. What is your first impression of it? Functionality to stop the video is provided, which is great, but the video runs too fast. Users with cognitive impairments, for example autism, dyslexia, ADD, could find such a design particularly overwhelming.
We should always try to create simple, minimal design to reduce distraction and cognitive load. Simple doesn’t mean boring. Here are several design examples which embrace simplicity and accessibility without compromising the user experience.
Having different ways to engage with content provides better experience for everyone. Here is a prototype of the same symptom tracking app you saw earlier:
It shows a calendar page which presents all symptoms a user has experienced in a particular month; a user can view symptoms based on their severity or look at a particular day to check the symptoms experienced then.
In order to simplify a complex design users can view all symptoms or only one type of symptom, resulting in a system, that’s easier to understand, especially for people with autism spectrum disorder or cognitive impairments, who could get too overwhelmed with too much information presented at once.
Content
Plain language
To be digitally accessible, start with plain speaking. Don’t use buzz words or technical language.
Meaningful, descriptive link texts
The link text should give user enough information to decide whether they want to click it
Don’t use Create flexible layouts that work on any device. Learn more.
Use meaningful, descriptive headings and page titles. Headings communicate the organization of the content on the page. Nest headings by their rank or level. The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>).
Video
Use:
YouTube videos. YouTube auto-generates closed captions for your videos and is great for compression if your video is too large
captions – text recording of any speech that appears at the same time as audio
That’s why it’s better to use short paragraphs that express one idea. This is because dyslexic users need more breaks between ideas than non-dyslexic users. Breaking up your text to one idea per paragraph makes reading a lot easier for both dyslexic and non-dyslexic users.
Progressive disclosure
Show the least amount of information/functions necessary for a given task/purpose.
Users like to search and navigate
Users tend to use search boxes a lot on pages which have a lot of content. Some users will prefer to navigate the page while others will use a search box. Search boxes and navigation should go hand in hand in order to help users reach their goal.
Navigation repeated on multiple pages should appear in the same place in each time. Users can easily navigate, find content, determine where they are.
Accessible design leads to a better user experience
Accessible design does not only lead to better experience among users with disabilities but also among those who do not have disabilities or limitations. Many accessibility requirements improve user experience, particularly in limiting situations.
I also love the four principles established by the team at BBC:
Give users a choice.
Put users in control.
Design with familiarity in mind.
Prioritize features that add value.
These principles can be applied to any project to improve user experience for everyone.
How to develop accessible websites?
Keyboard navigation
Focus
Some users drive the computer entirely with the keyboard or other type of input device. For those users, focus is absolutely critical. It’s their primary mean of reaching interactive elements on the screen.
Colour yellow is used to indicate which element is focused on. For example, when a user tabs to an element with their keyboard.
We only add focus to interactive controls such as buttons, form inputs, links, dropdowns etc.
You can use tab button to navigate websites:
Pressing tab button moves focus forward
Pressing shift button plus tab moves focus backwards
Pressing arrow buttons moves focus within a component
Try to navigate www.gov.uk using only your keyboard.
As you can see it is very easy to navigate the page as the bright yellow coloured focus indicator is present on all interactive elements on the page such as links, buttons and a search box.
Here is a fictional university website called Accessible University. It has been created to demonstrate a variety of common accessibility problems. Try to navigate the website using only your keyboard.
As you can see the website is extremely difficult to navigate with tab buttons. There is no focus indication for keyboard users.
To add focus use tabindex. Remember to only add it to interactive elements on your page such as buttons, links, search input, form elements etc.
A tabindex = 0 will add the element in the natural tab order.
If you don’t want an element to appear in the natural tab order set tabindex to -1. You can programmatically focus it using javascript focus() method.
Here is an html code for a button without tabindex which doesn’t have a focus.
<div id=”dropdown”>Menu</div>
Here is an html code for a button with tabindex which has a focus.
<div id=”dropdown” tabindex=”0”>Menu</div>
Tabindex greater than 1, for example tabindex = 5, will jump the element to the front of the tab order regardless of where it is in the DOM.
Focus indicator can seem lost when navigating websites using offscreen content such as off-canvas menus. In order to fix it you can set its visibility to hidden or display none and make it visible again when users click on the menu.
The ARIA Authoring Practices doc (or “ARIA Design Patterns doc”) is a great resource for figuring out what kind of keyboard support your components should implement.
We can create a hidden link called skip link which gives keyboard/switch devices and screen reader users the option to bypass the top-level navigation links and jump to the main content on a page.
It is usually included in the header.
<a href=”#content” class=”govuk-skip-link“>Skip to main content</a>
HTML mark-up
Screen readers rely on a good HTML structure. The browser takes the DOM tree and modifies it to make it useful to assistive technology, therefore, correct HTML mark-up is essential for accessibility.
Have a look at Accessible University website again, and try to complete the “Apply now” form using only your keyboard.
As you can see, it is extremely difficult to complete the form. It lacks accessible form mark-up.
Provide text alternatives for any non-text content
Form labels
There are two ways to add labels to your HTML code:
We can use label as a wrapping element:
<label>
<input type=”checkbox” checked name=”jLetter”>
Receive promotional offers?
</label>
2. We can also use for and id attributes:
The label element has a for attribute whose value matches the id attribute of the associated form field.
Validation should be designed in a way that considers the needs of all users, including those who can’t see the error message visually, and those who are unable to use a mouse. A good design would be one in which:
the capabilities of HTML5 are fully utilized, including the required and pattern attributes, as well as <input> types such as type=”email” and type=”url”. Using these features enables browsers to provide their own validation, which is likely to be supported by assistive technologies
the error message includes enough detail so that all users know which fields have errors
the error message is written to a container that is marked up with role=”alert”. This is ARIA markup that results in screen readers announcing the message to users as soon as it appears, regardless of their current location on the page
the user’s focus can be sent automatically to the first field on which a correction is needed
Aria
Aria is a W3C specification that is designed to communicate roles, states, and properties of user interface elements to assistive technologies. ARIA is essential for accessibility of today’s modern web interfaces.
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorised as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyse and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. Opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checkbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.