Sean is a student on CareerFoundry’s UI Design Course.
A good user interface allows users to complete the task they came to the website to do with ease and without confusion. We’ve all encountered websites and applications that make us want to throw our devices across the room in frustration, or at least I hope it’s not just me. For a good starting point on evaluating if a UI is efficient, I always refer back to the usability characteristics defined by the research company Nielsen Norman Group.
Nielsen defines Usability through these 5 characteristics:
Learnability: Can the user complete their tasks with little difficulty?
Efficiency: Does the interface allow the user to complete tasks in a timely manner?
Memorability: After leaving a website, how likely will the user be able to remember how to use it the next time they visit?
Errors: What steps does the interface take to lessen the chance of user error, and how do they let the users correct an error?
Satisfaction: Does the user enjoy interacting with the design?
On top of those standards, a good UI should also reflect the personality of the brand in order to stand out from the competition and provide users with a delightful experience. Here are a few examples of websites that I think have gotten UI right:
Medium, an online reading and publishing platform, is just as gorgeous as it is functional. With minimal use of color, generous line spacing, and a well chosen combination of typography, this website gets everything right.
With Medium, content is king. Once a user is logged in, a box appears at the top of the article list with the text “Write here”, enabling and encouraging everyone to quickly get writing. When users click on the “Write a Story” link, they are presented with an almost empty white page, removing clutter and simply providing a clean space to focus on writing.
Articles are set up in a one column format, making content easy to digest. With little touches like estimated read time and the ability to highlight and respond directly to specific pieces of articles, Medium truly provides users with an amazing and effortless editorial experience.
The UI of Airbnb does two things very well, booking a place to stay and creating trust between two complete strangers.
Airbnb, like Virgin America, has prioritized making it easy to start booking a stay right from the home screen. Paired with the conversational copy of “Live There”, a user is invited to start planning their stay.
This conversational invite to searching is a delightful way of portraying the voice of the brand, as well as making the process of finding a place to stay simple. The only fields you need to specify during this initial search are: choosing a destination users would like to go, along with the duration of their stay and the number of guests. By leaving out the additional filters until the next step, the process is streamlined, friendly and approachable.
The listing pages are complete with a description of any additional fees that may be included. This is a very straightforward, easy process for just about any user. The ‘Request to Book’ button sits right under this, and being one of the brightest buttons on the page, invites users to click it in order to finalize their stay.
After a user has requested to book a location, they are taken to a new checkout page. The listing, pricing and booking information sits to the right of the page to reduce the need for the guest to retain the information from the previous page.
On the left, instead of getting right into the payment, the page prompts you to “say hello to your host and tell them why you’re coming”. By placing this prior to the payment information, it starts a conversation and connection between the guest and host. Airbnb takes pride in bringing people together and gives the conversation importance over the transaction.
Airbnb has cleverly thought out its copy and used engaging photos and videos to ensure that the interface conveys an emotional tone that helps create a sense of trust between strangers.
Now this is a website with personality. Upon arrival, users are immediately greeted with a video of the product in use.
The UI here gets out of the way to let the product take the spotlight. When a user clicks on the “Reserve for $100” button, instead of being directed to a new page, a checkout modal pops up. This allows users to quickly go ahead and reserve their product without ever leaving the home page.
After scrolling past the video, the website has a series of panels featuring bold grey typography and quick videos of the product in use. This gives users a unique way of seeing what the product has to offer instead of just listing out features. By greying out the text, the eye is drawn to the only two places of bold color: the product video and the “Reserve Now” call to action. The UI of Boosted Boards really helps to compliment the “cool” factor that the product has to offer.
Dropbox has one of the most easily understandable interfaces by far.
Having a folder and file organizational structure is easily recognizable to you know, anyone who’s ever used a computer before. In terms of learnability, there isn’t much that the average user won’t already know how to do from the start. It’s natural for most users to try dragging and dropping files from their desktops to the page without them even knowing if it’s possible or not just because it’s so familiar.
Dropbox’s friendly personality, created by lighthearted illustrations, helps the user feel comfortable when using the product. This addition to the interface makes the product feel like an old friend, ready to help users complete their file sharing tasks.
When it comes to helping users complete the process of booking a flight, no company makes it as clear as Virgin America.
Virgin America knows that the user is most likely here to do one thing, book their next flight. By removing all other content and leaving the question “Where would you like to go?”, the user can immediately start the booking process.
Throughout the entire process of booking, the user is reminded of their selection by a bar at the top of the screen showing their current choices. By keeping this information visible, Virgin is making it easy for users to constantly see and edit their choices instead of relying on them to recall the information themselves. The UI here is clearly designed to ensure that a user can focus on completing their goal as quickly and efficiently as possible.
Virgin also capitalizes on making sure that they stand out visually from the competition. The use of bright colors, gradients, and fun illustrations create a unique brand personality and experience that sets them apart from other competitor’s websites.
Operator, a chat based mobile application, has one goal in mind with their UI: get users to download their product.
Their home page has a clear headline and tagline that lets you know what the product is right away, and the largest element is a box that allows user to enter in their phone number to download the app. Once a user enters their phone number, the page automatically scrolls down to show off examples of how the application works.
Operator also uses its interface to show items that their concierges have found for their customers. They use copy to their advantage, emphasizing that there is an actual person on that a user is talking with to establish a more personal connection to the brand.
The UI of Operator’s website does a great job of walking the user through an example of what their journey would be like if they were actually using the application. By keeping the site to a single main page, the website itself really gets out of the way to make way for the user to download the app and start trying it out themselves.
Men’s clothing retailer, Frank and Oak, uses their UI to grab the attention of their users and their taste of style. While it is a fairly straightforward online shopping experience, the company uses bold photography and clean, sans-serif typography to capture the personality of the brand and their target audience. It also doesn’t hurt that they offer 25% off the first purchase.
After clicking on an item, the product page is focused on two things: the product photography, and the call to action button as they are the only colored elements on the page. With a nice touch, the ‘Add to Cart’ button won’t work until a size is selected. When a user tries to click the button first, the color is desaturated and the text switches to ‘Select Your Size’.
Filling out personal information during the checkout process for the first time is never an ideal experience. Frank and Oak help users out by breaking the form into smaller chunks of input fields to reduce the cognitive load on users.
In all, the underlying UI of Frank and Oak can be seen on many other websites, but they styling of it was definitely created with the ideal customer in mind.
One of my personal favorite examples of a gorgeous and functional UI can be found with Semplice Labs, a Wordpress portfolio created by designer Tobias Van Schneider.
Starting out on the home page, the color of the headline copy cleverly ties together the “secret” and the “Get Semplice” call to action button, encouraging users to purchase the product to see what they’ve been missing out on. The copy here really speaks to the audience, inviting them to find out more about Semplice.
The rest of the website UI is actually an example of what users of the product can achieve with their own websites. Fluid animations and smooth transitions between pages make this interface memorable and desirable to users.
These are just a few of my favorite examples of good interface design. Creating a usable, frictionless UI is an essential part of creating a positive connection with a user. When designing or evaluating an interface, it’s best to refer to the usability guidelines set forth by Nielsen in order to build a product that provides the best possible user experience. To get better at understanding first hand what goes into crafting a great UI, check out the Career Foundry User Interface Design course!