Archive for the ‘UX Design’ 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.
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
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
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.
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.
In our roles as user experience practitioners, we are regularly asked to test with prototypes, ranging from low fidelity paper prototypes through to hi fidelity pre-launch fully interactive prototypes. Clients often ask how their prototype compares with others, and how different aspects will work with or affect the testing. So, here’s our top 5 tips for building a prototype to get the best out of the research.
Content and design
Let’s start with the content and design of the prototype. Although the level of detail that’s included in the prototype varies depending on the fidelity, at all fidelities the content and design needs to support what you are trying to find out.
> Read more
Whether you have or haven’t booked a seat reservation on a train, finding a seat is a frustration for many passengers. As a daily train commuter to and from work, this is something I, and many others around me, struggle with every day.
There are broadly two types of train passengers; one who has bought their train ticket in advance, along with a seat reservation on a specific train and one who has not got a reserved seat, or has been automatically given one in the booking process, but isn’t bothered about finding that specific seat.
Finding a seat should be a straight forward process for both types of passengers, either finding their reserved seat or finding an unreserved seat on the train, but it is not. And one of the key problems is the way reservations are displayed on trains. It may seem a small problem but with millions of passengers travelling by train every day the impact is huge, so how could current display methods be developed to improve the user experience?
In the article below we review the two main current display methods, electronic and paper, and consider ways to improve them.
With electronic displays, the users’ seat reservation along with their seat number is shown above the seat, for example, Fig. 1, displaying ‘Reserved from Sheffield- Newcastle’.
Payment option overload? How card payments and a digital selection process affects the usability of vending machines.
Most of us use vending machines and like the simplicity of popping a bit of loose change into a machine to get that much needed bottle of Coke.
But, we have all experienced that level of frustration when you fall short of change or the machine doesn’t accept the only pound coin left in your purse. Contactless payments and Apple Pay are becoming more widely used, for example on car parking ticket machines.
More recently, vending machines are now also being redesigned complete with a card reader to bring them into the 21st century. So how could the inclusion of card payments and a digital selection process on vending machines improve the user experience?
> Read more