Archive for the ‘Articles’ 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.
This week at NUX Leeds, Lee Duddell, UX director at WhatUsersDo kicked, off his talk by engaging the crowd with two simple questions: ‘Who has too much UX budget?’ and ‘Who does too much UX in their company?’
As expected, no one jumped to respond. Lee had hit the nail on the head and identified two of the biggest hurdles for most of us ‘UXers’: a limited UX budget and consequently, a substandard amount of UX taking place. This acted as a good opportunity for Lee to tell us his thoughts on the 10 biggest enemies of UX in reverse order and how they should be killed to overcome these two great hurdles.
> Read more
It seems almost everyone is on the Monzo hype at the moment, even Martin Lewis has jumped on the band wagon. So when we heard Monzo were coming to town last week, we were keen to go along and find out more about what they are getting up to! We learnt how they are shaking up the user experience of banking, guided by their 3 pillars of UX, innovative tech and customer service. They went on to explain that they are no longer focussing on their early adapters and trying to reach out to the wider community.
> Read more
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
A User Journey Walkthrough is a great way to put yourself in your users shoes, and using a persona is the ideal way to do this. A persona allows you to focus on your users, therefore keeping their goals and needs at the forefront of the Walkthrough. A persona is based on findings from user research, and can also combine analytics and other customer information. As the purpose of this article is to show you how to use the User Journey Walkthrough methodology, here is one I created earlier:
Running a successful solutions workshop isn’t something you can do off the cuff, and it’s not about standing in front of a group of people, and talking at them for a couple of hours. You need engagement, interaction, encouragement and creativity to come up with design ideas and solutions. But how can you try and achieve that? Here at SimpleUsability we run lots of workshops to help our clients, so here’s my five top tips to help you run a successful one!
> Read more
Rebecca began her talk by introducing herself as an ‘Accessibility and UX Research Consultant’. She works freelance now and she’s got lots of experience from working at ShopDirect UK alongside designers to help create accessible apps. She stated that “There’s always things to learn when it comes to accessibility.”
So, why should we make our apps inclusive?
Rebecca started by talking about her experience working with a blind lady, who uses a screen reader to help her use apps on a day to day basis and feels that apps are simpler and easier to use than websites. Despite this, she still sometimes struggles with apps.
> Read more
An in-page tab is a go-to method to categorise content on a page, without overwhelming users with too much information at once, however, this functionality is commonly misused on many websites and apps. As a UX practitioner, this UI element is something that I witness users struggling with when implemented poorly. So in this article I will review and give 8 examples of best practice regarding in-page tab design and guide you on how to implement these successfully.
1. Clearly indicate the active tab and ensure this is connected to the content below.
The talks and workshops at Camp Digital covered many different aspects of digital, but the talk I found the most thought-provoking was by Emer Coleman, who asked us to question the role of ethics within technology, and touched on the dark side of big tech corporations.
Emer kicked off the talk by giving us a little bit of history of what her life was like growing up in Ireland. Unable to get birth control or read women’s magazines, Emer was regularly reminded of a woman’s place in the world by The Irish Constitution. The arrival of the internet brought her freedom, in a world that had little before.
> Read more