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
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
In their recent article ‘How to design ‘Applied filters’ (42% get it wrong)’ the Baymard Institute proposed essential features to make filters user friendly on desktop.
1. Ensure the user can easily find any currently applied filters
2. Make it clear which criteria the currently displayed product list is filtered by
3. Allow the user to easily deselect applied filters
4. Provide the user with additional context when selecting new filtering values
5. Help the user infer how much of a filter type’s ‘range’ is currently selected
As more customers are turning to mobile to browse and shop online, we think it is important to look at filters on mobile. In this article, we have looked at how filters are implemented on mobile across the e-commerce sector, considering if Baymard’s recommendations should be adopted for mobile.
This article will look at the following fashion websites: Topshop, Asos, Missguided, New Look and River Island, and compare them to the following grocery websites, Asda, Morrisons and Sainsbury’s.
SimpleUsability hosted a panel debate as part of the 2017 Leeds Digital Festival. Facilitated by Dr Lucy Buykx, one of our Senior UX Practitioners, and with a panel drawn from a variety of sectors, each at different UX adoption stages, the event drew a sizeable crowd keen to discuss, “Is UX research still too slow for agile?”
Shan Beerstecher, Digital Transformation Manager, Skipton Building Society
Adrian Berry, Product Owner, myhermes.co.uk, Hermes
Sophie Dennis, Lead User Researcher, NHS Digital
Phil Stevenson, Senior Digital Proposition Manager, TD Direct Investing
Lucy Buykx kicked off the event by explaining that at last year’s Leeds Digital Festival the same subject had proven incredibly popular, with attendees likening it to a therapy session for those trying to reconcile agile and user research. As agile is becoming more embedded in organisations, the topic is even more relevant hence the re-visit 12 months on.
The panellists got started by introducing themselves and sharing their experience and thoughts on whether UX research is too slow for agile.
First up was Sophie Dennis who has worked with the NHS since January 2017 and has a range of experience from previous roles within the public and private sectors. She’s had a variety of design research and delivery roles doing variations of agile. She said the challenge is introducing design and research together and how do to reduce the cycle time of design sprints.
Adrian Berry from Hermes stated his team are fairly mature in agile and that although UX is a relatively recent concept, they are now finding that UX and agile come together to help them with rapid prototyping. When testing, be open-minded as to what might come out, dismissing preconceptions is really important to eliminate any bias.
Shan Beerstecher from Skipton Building Society admitted they wouldn’t go as far as calling themselves agile yet and have only just brought in the concept of UX and UX design. She mentioned that agile can often jump a step and that sometimes you need to take a step back to pull out the user journey before making a prototype or an agile sprint plan.
Phil Stevenson from TD introduced the term ‘Agile revolution’ to the session but said he has been trained in traditional waterfall methods. They have only just started applying a UX function within the last 2 years with a “let’s see how you get on with this” approach. He went on to explain that often senior stakeholders or project owners think agile means ‘faster and cheaper” but actually, the experience of agile can be more like ‘frustration, confusion and anxiety.’
Tell us about a project where you have successfully integrated UX and what challenges you faced.
Adrian said Hermes are currently working on new functionality whereby labels can be printed in store as part of a ‘one parcel, one price’ simple proposition which Royal Mail don’t offer. To do this, they conducted rapid prototyping whereby they would spend 3 or 4 days coding, test and retain the learning. He emphasised the importance of being prepared to build something and be prepared to throw it away and retain the learning!
Phil has worked with his team at TD on the portfolio page, one of the most important pages in the TD user experience, critical for conversion success. He talked about his experience with agile whereby they followed a Google design sprint approach. They used every potential sort of data to get started creating personas, defining the user and identifying the problem to learn more out of the process. He said the real eureka moment for them is when you see someone going through a page they have designed, and getting stakeholders to view this research is critical.
However, he went on to say that the stage of testing and designing they did on the portfolio page took a long time and so did not meet stakeholder understandings of agile – “fast, iteration and cheap”. Despite this, he concluded that although the perception was that they were slow and that the work took a lot longer than anticipated, the end product was of an infinitely better quality than what might otherwise have been the case.
Shan then went on to talk about her experience of the ‘grid card problem’, whereby users need a grid card to log in to their account. She said the main challenge for her is communication within the team and having to go through 5 or 6 committees in order to get things approved, makes the length of a project far from agile. The challenge is to convince people to ‘STOP and think, does the customer even want this?’.
Sophie Dennis stated that she has experience with a “formalised agile” process, and that the aim was to bring research and design a lot closer. She supported Shan’s point that you need to ask the question ‘is there any value in this product’. The challenge is how to fit the ‘plan, do, analyse’ approach in a 2 week agile sprint window. She said a more efficient method may be to think ‘What do we need to learn now, and what do we need to learn within the next month or so?’
Where is agile and UX heading?
It appears that regardless of organisation, there are common themes regarding selling the value of agile and UX research within the team and with senior stakeholders.
As the session drew to a close, Lucy asked the panellists what their next steps are and where agile in UX is going. Shan said for them it’s about working out how to gather all of the data and customer insights they have and to make decisions more quickly and that the agile fight will continue!
At Hermes, Adrian believes it’s about bringing the connection between stakeholders and the customers closer because often stakeholders are aware of what customers do, but not why.
Sophie Dennis said at NHS Digital, the next step is to get methods spread more widely and scale up but the problem with healthcare is that everyone is a user, and therefore a highly subjective point of view.
Phil concluded the session by saying that UX isn’t the responsibility of one team, it’s about getting everyone to understand who the user is and all getting together to solve the problems.
In order to do this everyone, regardless of role, needs to see the benefit in it. But it’s sometimes hard to prove the value until you can say ‘look, here’s what we did, here’s the feedback, how about we do it again?’
Lucy concluded with a take home message that what we do in digital should not be about closing down choices but about opening them up.
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.
The anticipation for a new Nintendo console was long overdue, so when I heard the announcement in October 2016 about the release of the Nintendo Switch, I knew it was something I had to get my hands on. The Nintendo Switch is a gaming console with a new concept; allowing a quick transition from a home console system to a portable on-the-go gaming experience. The Flexibility of three different modes; TV, Handheld and Tabletop mode mean you can take the console anywhere, and play with anyone. Providing new gaming user experiences makes it stand-alone from other gaming consoles.
The user experience of playing the Switch in TV mode has a sense of familiarity. In order to play games in this mode, the console is put into the dock, and linked up to the TV via HDMI. The games appear as they would on an Xbox, but with the Switch you have the flexibility in choice of how to hold and use the controllers. The Joy-Con controllers for the Switch have a unique controller design; they detach from each side of the console to make either one game controller or two separate pieces that can be used independently. This allows users to configure controllers for the best experience for different games.
For example, as you can see in the pictures, when playing a game such as ‘Just Dance’, users can detach a controller and use it as an individual piece, allowing them to wave this around to follow the dance moves.
In contrast, ‘The Legend of Zelda: Breath of the Wild’, is a classic adventure game, and therefore the user experience is best with a one-piece game controller.
The Joy-Con controllers also have a feature called HD rumble, which offers users a haptic user experience, to feel different types of vibrations through the controllers. Games like ‘1-2 Switch’ have been specifically designed for the Switch, to incorporate these features into game-play. On a game called ‘ball count’ users estimate how many balls are in a box by tilting the controller and ‘feeling’ the balls move around in it. The closest player to guess the amount wins.
One downside of user experience on TV mode is that the games are designed for a smaller screen in Handheld and Tabletop mode, so switching to play the game to a larger screen such as a TV, causes the frame rate to noticeably drop and the game appears to lag compared to other modes. I found this can be off putting and for some may defeat the point of being able to play in different modes.
The unique feature about the Nintendo Switch is the new user experience element, that allows users to take this console anywhere and continue gaming on the move. by switching it into Handheld mode. To do this, you slot each Joy-Con controller into the side of the console to make, what appears like, a Wii U gamepad and then remove this from the dock. There is no need to shut down the console and reboot it to switch modes, as the game switches instantaneously, undisrupting the flow of gaming from one screen to another.
As a daily train commuter to and from work, it is great to be able to pick up from where I played the game the night before, and continue playing this on a journey. The Switch is also very quick to load, after turning the console on, no time is wasted waiting for the console to turn on and select a game, meaning users can get quickly engrossed in the user experience.
Another feature that enhances the user experience is the touch screen element that the Switch has on the user interface, which replicates a tablet like experience to navigate through the menu, select games and change profiles. Although most games on the Switch do not incorporate this touch element into the game itself, it is something I hope to see on games in the future.
A drawback of playing the game in Handheld mode on the move is that the Switch has a limited battery life and can’t be charged independently. The Switch can only be played for around 3-6 hours in Handheld mode, so users need to be wary about how many hours they can fit in gaming, without the console running out of battery.
Tabletop mode combines the mobility aspect offered by Handheld mode, as well as flexible controllers. What’s great about this mode is that you can take the Switch to a friend’s house or to family gatherings, and continue gaming together with multiplayer. This new user experience encourages multiple game play, as opposed to the familiar solo game play at home in the TV mode.
At the moment though, the kickback stand that props the console up on a surface is not very stable, especially when placed on an uneven surface. This limits where you can play in Tabletop mode, as standing the Switch on a surface like a bed or a sofa may cause this to fall over.
Overall, the new concept of the Nintendo Switch is something that is unique in design, and provides a fascinating new user experience for gaming. It has only been a couple of weeks since release date, and the advantages of being able to play games in various modes are evident. However, at the moment, there are a limited number of games available for the Switch, meaning we can’t see the full potential of the gaming user experience. Despite the drawbacks it currently has, we look forward to how Nintendo will fix these, as well as the games revealed in the coming months.
As a User Researcher, I often get to watch a product develop from an early stage low-fidelity paper prototype, to a final stage high-fidelity prototype, before the design gets developed into a live product. Therefore, I understand the importance of continually testing through the different stages of a product, and how valuable this can be for teams developing products.
Prototyping is a draft version of a product which allows users to explore ideas and the intention behind a design, before the designers invest time and money into further development. Prototypes allow us to show users what the experience will be like, from a ‘show’ don’t ‘tell’ perspective, presenting the opportunity for problems to be discovered early on, and therefore allowing time to change the design to ensure a good user experience.
> Read more