These days, most websites respond well on mobile and in practice, do the job they're supposed to. But isn’t it wonderful when they seem to guess your next move and pre-empt your M.O? In other words - they’re smashing their User Experience (UX). We'd like to give these organisations a virtual high five by asking two members of our in-house UX team, Ali and Ben to cherry-pick their favourite stand-out UX experiences online.
First up is Ali -
Comical reassurance from Audience Project
A couple months ago I was testing our various online tools to acquire feedback on a new feature for our product. I was muddling around on Audience Project’s website and managed to encounter an error. Instead of being frustrated by not achieving the result I wanted I just couldn’t help but laugh when I was presented with this screen:
Despite failing my desired task, I was overall quite satisfied with the experience I had on the site. The page was tailored to reassure me that things were okay. Depicting a very human situation instantly conveys both the state of the site and the overall tone of the page. Parsing the right hand column, you are given a clear message about what is going on and a few options to resolve it.
Hassle free ordering with DeliverooDeliveroo has recently added a new feature to streamline the process of creating an order for multiple people. When viewing the menu of your chosen restaurant you can simply click “Start group order” which provides you with a link to send out to whomever you are dining with. The link directs your fellow diners to the same menu you are looking at, with the added bonus they can add items to your order directly. No longer do you have to crowd around the same screen, take turns browsing or even be in the room to compose an order together.
Albeit a great new feature in these modern times of social distancing, there is one drawback. The order only takes payment from one person, so you will still have to split the bill. Using a single payment method is understandable. It avoids things such as code complexity, refund confusion and reduces the personal data associated with an order. If there was a way to overcome these issues then it would be an A+ experience, but for now you’ll just have to split the bill the old fashioned way or use new banking methods such as Monzo.
Handy shortcuts in Google Chrome
Embedded directly in the Google Chrome browser is one of the simplest and sweet shortcuts for anyone who uses Google Docs. Say you started a new project and wanted to start recording some data in a spreadsheet. Your first port to call would probably be Google Drive, Google Docs, or an existing spreadsheet. You then have to parse the page, locate the “new spreadsheet” button and click it. Although it sounds like a relatively small task it can be slightly frustrating depending on where you are in Google’s domain. There are multiple ways of creating a new spreadsheet from different areas and they’re all slightly different.
The solution is a simple one, if you type any of the following in the address bar you will instantly receive your just rewards:
Doc.new - Creates a new document
Sheet.new - Creates a new spreadsheet
Form.new - Creates a new form
the same also applies for sites and slides if you’re into that kind of thing.
This all may sound entirely trivial to some, but it’s really simplified the Google Doc experience for me. I no longer have to remember the various pathways I can take in order to achieve my goal, I simply type what I’m looking for and it’s there. So next time you need to write something down in a hurry, save some paper and simply look to your browser.
Cutting the fat with Duolingo
Duolingo has spent a significant amount of time streamlining and tailoring all of the various workflows on their site. The language learning application really cuts the chaff when it comes to presenting the user with only what they need to see.
A great example of Duolingo’s approach to user experience is their sign up process. When you first visit the site you are presented with a simple splash screen there is no unnecessary information on the screen whatsoever. Practically the only message visible is the title, which both provides the user with what the site is about but also provokes that they take action.
Whichever button or link is clicked you are gently guided page by page through a sign up process. Each page is as minimal as possible, only presenting the user with one question and a few options, thus lightening cognitive load.
Typical sign up forms can be an absolute nightmare, requiring you to fill out lengthy forms with copious amounts of information at a time, heaven forbid you make a mistake and reset some of the fields. Breaking down forms into small bite size questions focuses you on the single decision at hand and can make long forms feel as if they are faster to complete.
Putting content first at Practical Typography
Butterick’s Practical Typography is a fantastic resource for learning about the A to Z’s of type, I’d highly recommend it to anyone who is any sort of design role.
At face value this site is very unassuming, there’s no flashy colour scheme or striking graphics. It’s just pure type. Without spoiling too much of the book here are a handful of ways in which this site has been engineered to be a great reading experience:
- Once you begin reading all other elements disappear, leaving only one neat column of content to read.
- The line length is short allowing you to breeze through without tiring your eyes out.
- The base font size is an ample 21.84px, much larger than your average website, making it easier to read.
- There’s an extremely distinct style between the hierarchy of type elements making it easy to parse headings and distinguish between sub elements.
- Once reading, the only navigation is found at the base of the page in order to prevent distraction. It also features next and previous page buttons so you can flip through like a book. The other bonus feature is that they can also be triggered by the side margins of the page. You could scroll and click through the entire book without moving your mouse.
Needless to say the typography on Butterick’s site is rock solid, with little to improve upon apart from purely aesthetic preference. My only issue that slightly irked me was that whilst reading on some pages the column of text was not perfectly centered. There is a very good reason for this, the title structure and summary occupy the top left part of the main column of content, the downside is that it leaves a column of white space below it.
The solution would be to offset the title and summary to the left allowing the main column of text to occupy the absolute centre of the screen. It has no impact whatsoever on the overall reading experience, just a slight visual discrepancy between the balance of white space either side of the main column of text.
And over to Ben!
Snap and save with Google Photos
I see Google Photos as a bit of a masterclass in a user experience that appears incredibly simple but is actually full of powerful capabilities. It completely gets out of your way and puts your photos front and centre, letting you get on with what you came to do. There are a few qualities that put it on another level from rivals:
- Speed. As with most things Google, it is clear how much they have prioritised performance. You can be scrolling through thousands of assets all on one page, grab the scrubber and jump back a couple of years and your photos always load almost instantly. Even when you’re looking at a full page photo, pressing left or right the next photo pops in instantly.
- Infinite scroll. To have all of your photos on a single web page and be able to effortlessly scroll back through years of memories is both a technical feat of engineering and a great user experience.
- Transitions. It’s so easy to overdo animation in modern web apps, but Google keeps it restrained, ensuring every transition in the app serves a purpose. Navigating between the list page and the detail page of an asset is done with an animation that reinforces your perception of your position in the list. Navigating left and right between photos is accompanied by a subtle transition which steps out the way when as soon as you speed up your clicks.
AirBnB make searching part of the journey
AirBnB obviously invests a lot in design and it shows. One thing they really excel at is delivering a great search experience. It starts with the initial search box (the style of which has since been copied by most competitors) split into the 3 most important facets of a holiday booking search: location, start and end date, and the number of guests. The user interface of this search box is excellent, with the help of the autosuggest and the date range picker I can search for stays in Bath for a specific week with 2 guests, and all I had to do was type 2 characters (“Ba”) and do 7 easy clicks.
The search results page is also chock full of clever design, cramming a lot in without it feeling cluttered or complicated. The google map lets you drill down to specific areas and find the most central properties. The big, good quality, photos give you enough of a glimpse to make a comparison and tempt you onto the details page.
The way they have done the search filters is also very clever, bringing the most frequently used filters to the surface (note the recent promotion of cancellation flexibility since the pandemic) whilst providing more detailed filters on a separate modal. This makes excellent use of the limited screen real estate caused by the inclusion of the map, which meant a more traditional left hand column of filters would not work.
If I were tasked with coming up with some improvements, then I would consider removing the heading on the results page - I don’t think it justifies the amount of space it takes up and the summary of the search is a duplication of what is shown in the search box itself. I would also be arguing to remove the line warning me about how many places are being booked. While it is a lot more restrained then similar anxiety inducing tricks on other sites (I’m looking at you Booking.com) I see it as an anti-pattern that doesn’t serve the users needs. With those changes in place, it would look something like this:
Never lose your phone with Google Home
I’ve had a google mini speaker at home for a while now, but the other week I discovered a feature that really impressed me. I had misplaced my phone somewhere in the house (which is a hobby of mine) and had spent a few minutes looking for it before I decided to try asking Google - “Ok Google, where’s my phone?”. I had assumed it would reply “I’m sorry, I don’t know how to help with that…” but was pleasantly surprised to hear “OK. I can help with that. Your phone should now be ringing on full volume”. So Google was able to recognise my voice, and make the phone that belongs to me override the silent mode that I usually keep it on and ring at full volume, which led me to find it instantly.
Simple actions on Gov.uk
This is inclusive design at its best.
Designing a website with a target audience of literally anybody in the country, is no small order. Government websites used to be a sprawling nightmare. Difficult to navigate, impossible to find what you wanted and any online forms were fiddly, prone to error and frustrating to use. The launch of the Gov.uk website in 2012 was a huge step forward. The combination of a well thought out information architecture, and a robust set of user-centered design principles led to a website that was fast, clean and easy to use. As a UX designer I frequently refer to the Gov.uk design system to see their ultra-accessible, and usable take on a user interface.
One of my favourite patterns of theirs is the principle of one question per page. Rather than a long, intimidating form for people to fill out, break each question down onto its own page. Let the user concentrate on one thing at a time and also get validation one answer at a time (rather than filling out an entire form before having to scroll back up to find any errors). It’s a great pattern that you see all over the web now, from getting an insurance quote to filling out customer feedback surveys on typeform.