Archive for the ‘Usability’ Category
If you visit an e-commerce site, a travel site, or any website where users are given multiple products to choose from, the chances are it will have some form of filtering and sorting function to help a user choose what they would like.
Every day, more and more people are choosing to shop online, and if they can’t use your site to find something they like or need, then there is a good chance they may not come back.
In this article, I will discuss the benefit of using filters and sorting, and highlight a few ways you can use these tools to help your users find what they are looking for. I have concentrated on fashion sites for the examples, but they can be applied to many more sectors.
> Read more
There is nothing more frustrating than having the task of filling out a badly designed online form. With there now being around 3.2 billion of us using the internet around the world, it’s becoming a more common experience for us all.
Form validation is essential as it ensures that data stored about a user is in the correct format, and hopefully correct as well. As UXers we want to make form entry as smooth as possible, while also ensuring the data is valid.
In this article, we look at different validation techniques and how they affect the users’ experience.
Real time validation
This type of validation, which is often referred to as ‘Premature inline validation’ gives users live feedback about their data as they type it into the form. This can often leave users looking for errors that aren’t there, as the form will automatically start validating data as soon as the first letter or digit is entered. This method criticizes the user for mistakes they haven’t made and prompts them to look for errors before completing the data entry. Often leaving users confused and unsure how to move forward. This, combined with a lack of help features, which allows users to see what format they need to enter the data in or an example of required details, such as capital letters and numbers in passwords can often lead users being uncertain how to proceed.
An example of this can be seen below.
Although real time validation can cause problems for users, it is also important to point out that when this is applied in the correct way, it can provide assistance and help guide users to resolve any errors.
The example below shows real time validation applied to a password field. By giving users the opportunity to view how strong (or weak) their password is as they type it, combined with listed requirements, allows the user to complete this and make adjustments in real time with confidence that what they are entering is correct.
Examples of how the different levels of passwords strengths can be displayed can be seen below.
Inline validation does a pretty good job of guiding users through the form, allowing users to finish the field before presenting them with any error messaging. This allows users to enter their details without being interrupted or distracted by an error message, or misinforming them their data is incorrect before they have finished inputting it.
This method seems to be the most commonly used across the web, and although it appears to be the most user friendly in the sense that it does not distract users with error messages while they are typing, it can also cause some confusion.
Below are two examples on how to and how to not implement inline validation and error messaging. Firstly, a good example:
Clear messaging that appears after the user has finished typing and has clicked or tabbed out of the field. The flyout message is bold and points direct to the field the error message relates to.
Now for a poor example:
Similiar to the example above, this form has no field labels but in this example the way the error messages are presented means it’s not clear which field the message relates to. If users are unsure which field the error message relates to, this can lead to users having to delete data in an attempt to try and see the field title again before being able to move forward successfully.
After submit validation
Although this method allows users to enter their details fully before presenting them with any validation messages, it also adds a step because users have to press the submit button before they can see if they have made any errors. This can make the process of completing a form more time consuming with only one error being shown at a time. The worst case being that users could have to re-enter their details and press submit several times to view the different error messages for different fields before they are successful in completing the form.
Having to select ‘Join now’ before being notified of any errors makes the users journey unnecessarily longwinded. Although, by having field titles visible at all times, users are able to make changes without confusion about which field to edit.
To summarise, there is no one clear technique to use to make a web form easy to complete, but by combining features from the different validation methods shown above, you can provide users with a clear and simple form to help guide them through with ease.
The steps below are collated from each of the different validation techniques discussed within the article, and when combined, provide a clear and smooth process for users.
Steps you can follow
- Help users by following best practice by using field labels or keeping field titles visible at all times.
- Only use real time validation for complex formatted fields such as emails or passwords.
- When using real time validation, show users what they need to do to complete the field with valid data.
- Show inline validation error messages aligned with the field in error. This allows users to clearly see which fields the error message relates to.
- Provide users with help text, to help them understand what format or specific requirements are needed.
The wireframe below shows an example of how to implement the four steps to make a web form with easy to follow form validation.
Help features are typically only used as a last resort. Whether it be an electronic appliance or a web application, most users will not read instructions until they feel stuck, and even then they might not. There are two key reasons for this:
- Firstly, due to prior experience users often regard help as unhelpful. Masses of text and pages of irrelevant FAQs have led them to simply ignore it.
- Secondly, as usability continues to improve, users are learning to rely on their own intuition. They expect to be able to self-serve and navigate through a website themselves, so requesting help seems to have become associated with ego depletion.
You might wonder if that makes help features redundant, but we know that users still need help. So the challenge is finding a better way, or ways, of providing it. In this article, we will discuss the helpfulness of some familiar help features from the perspective of how the user gets the help – is it pushed towards them or do they need to seek it out and pull it for themselves? We call this Push and Pull help:
> Read more
On Wednesday 24th May 2017, it was great to see the digital community come together to learn and be inspired by this year’s Camp Digital event in Manchester. Many great talks were given on topics of usability, design and accessibility, but the one session that stood out for me was the workshop I took part in, given by Molly Watt and Chris Bush, about using and understanding assistive technologies.
Chris Bush kicked the workshop off by giving us an insight into the vast number of people that suffer from a long-term illness or disability, equating to around 15% of the UK’s population. With this striking figure in mind, the question ‘Why design for inclusion?’ was proposed. To help us understand why, Chris introduced Molly Watt, who began by sharing her story on why she is so passionate about this subject.
> Read more
How do you describe what you do for a living?
Digital marketing executive? Ecommerce manager? UX/UI Designer? User researcher? Customer insight manager? User experience lead?
Does this change depending on who you’re talking to? Chances are, you have a different answer to this question whether you’re networking at a conference, catching up with old friends, or making small talk with your great aunt at a cousin’s wedding.
> Read more
UX Mentors, is an annual Manchester-based event for students who want to get started in a career in UX. It is organised in conjunction between Sigma and Manchester Metropolitan University (MMU). Last week I was delighted to join the team of mentors that included User Experience experts from Sigma, Mando, Autotrader and Shop Direct for the 2017 event.
This year the theme was the Google Sprint, and sprint we did, as we aimed to move through the 5-day process in around 6 hours! The process, as described in the book by Joel Knapp, is an end-to-end process from defining a key problem to solve, through rapid ideation and design to validation with users. Although we were not able to do every step, the Sprint model provided a great format for getting hands-on experience of a number of key UX techniques.
We kicked off the day with a brief, including objectives, scope and target audience, and drew up a user journey map. The brief was to design a mobile app to help low-income people with budgeting. My team drew on their experiences as students to develop a quick persona and draw up the journey of how such user would get started on the app, and then identified pain points and opportunities to design a solution.
> Read more
Onboarding screens are designed to introduce users to how the application works and what main functions it has, to help them understand how to use it. As a user experience practitioner, I have experience testing onboarding screens with users and often get asked by clients what is the best way to implement a good onboarding experience to introduce users to an app. Onboarding can be a challenge to get right, especially when trying to meet both business requirements and user needs. The business wants to show users the key features and unique aspects of an app but often in user testing we observe users simply moving through onboarding screens without paying attention to them.
So what to do? In this article, I’ll share learning from our experience testing onboarding screens with a review of the different ways which apps implement onboarding to engage and educate users on their app.
So, let’s start with the don’ts
- Don’t use too many words. We’ve seen in user testing that users find wordy onboarding screens unengaging and this often results in users not reading the information or forgetting this information when they arrive on to the app. Consider the amount of information you are presenting your users with and try not to overload them to avoid them looking for a way to exit or skip.
- Don’t include too many screens… or too few! Think about the length of your onboarding process, too many screens result in users swiping through without paying any attention to the content. On the contrary, although users want a short, snappy, engaging welcome to an app they still need enough information to understand how to use the app and what the benefits of using it are.
Six of the team at SimpleUsability attended #NUX5 on Friday 7th October at the Northern College of Music in Manchester, which featured seven inspirational speakers from around the world sharing a variety of different UX topics.
Instead of the usual note-taking, SimpleUsability decided to try a more creative approach to capture the key features of each talk: Sketchnoting. Sketchnoting involves taking notes in a visual form that helps bring the notes to life, and helps people to remember the talk afterwards. Sketchnotes are also fun to share. In this article we share our Sketchnotes that were taken at NUX5, with key summarised points to explain the take away message from each talk.
In our role as User Experience Practitioners we know a lot about the advantages of using eye-tracking in usability research, but we are always learning.
This article covers a few of the things we have observed during our usability research using eye-tracking, and shows just a few of the benefits that eye-tracking can bring to your user research.
1. Making things bigger and bolder doesn’t always work
You may have been to usability sessions and heard users say things like “Oh, I didn’t see that. If it was bigger I’d probably have noticed it.”, or you may have heard “It just needs to be bigger and bolder, make it flashy!” While feedback is useful, it’s important to remember that ultimately what people say they do, or what they say will influence them may not be true when they actually sit in front of a website. Feedback like this is opinion based, and shouldn’t be taken literally.
Instead, listen to the users’ feedback and consider it in context to what the observed behaviour shows. While users may say that making something bigger and bolder would grab their attention, our specialist eye-tracking has revealed, that this isn’t always the case. Sometimes it takes re-thinking the position or content of a call to action to get your users to engage with it, it doesn’t have to be a flashing neon sign.
The eye-tracking shows how the user missed the large banner at the top of the page, and instead was drawn to the content underneath.
2. Consider how buttons display visual hierarchy
While you may wish to try and incorporate company colours as much as possible on a website, it is important to consider the consequences of these actions.
> Read more