Photo by Karl Solano on Unsplash

User experience is a hot topic. The countless blogs, ebooks, and online classes you can take about UX design will fill your head to the brim with conceptual knowledge about the fundamental UX design principles. While a firm handle on the principles of UX design can help you figure out a starting point, it can be difficult to determine how to begin implementing these ideas into site improvements, refreshes, or brand-new designs.

There’s a lot to digest here. One of the best ways to wrap your mind around how the basic UX design principles work in the application is to see them in action. Let’s look at some of the industry leaders in user experience design and see how they implement basic principles in sometimes innovative and exciting ways.

Clear and intuitive site hierarchy

When a user lands on your site, your site visual hierarchy will determine where their eyes go. This principle is referred to as a site visual hierarchy in the UX world — but some designers might think of it as eye flow if they ever studied graphic design in a formal setting.

Most websites are laid out vertically — this is more common now because of the frequency of mobile and tablet use. So, when a user lands, where should their eyes go first?

That’s largely dependent on what your end goal is — after all, you’re determining a flow that is best for your users. What we can say for certain is that most users are going to scan your page in two ways: either in a Z-pattern or an F-pattern. The Z pattern will start in the upper left corner, then scan diagonally down to the next line, before going across again. An F pattern will read the top line, then a small portion of the next section, then scroll downward.

The F pattern is common with visually busy sites like news pages, while the Z pattern is common in less visually dense layouts like landing pages.

So, when you determine a visual hierarchy, you have to consider these eye movement patterns, all the while looking at how design elements play together and your end goal. Do you want them to see your call to action, current sales, or offerings? You need to place them in a clear line in the eye flow, without cluttering them with other elements.

Let’s look at an example:

Monday.com’s layout avoids visual clutter by using white space as a design element. Their eye flow begins at their branding, moves to their log-in button, and then leads the eye down to their heading and call to action. This page serves two functions: to give current users a simple place to sign-in and to give new users a quick rundown of their brand, services, and collect their information.

Do you see the elements that stand out? The bold logo, the rounded log in button, the large heading text, and finally the CTA button are all elements that grab your attention. The path from the logo through the navigation leads the eye right to the login, while the smaller font size on the navigation line serves to not distract from the main page goals.

Both of Monday’s customer goals are clearly defined on this page, and its simplicity leaves no question about what the user needs to do next.

Create consistency

In general, it’s not a great idea to reinvent the wheel when it comes to user interfaces. You may have noticed that many websites and apps take on similar layouts or interfaces. There are a couple of reasons for this — first, it’s easy to anticipate how they will look and interact on the plethora of screens out there if the layout has been done before — but more importantly because users require a level of predictability.

For example, Nike and Lime Crime are two extremely different companies. Yet, since they’re both eCommerce companies, they share similar goals and similar layouts. When determining a new layout or refresh for a product or service, it’s a good idea to look at sites that are in similar industries. Consistency in how a site is used allows your customers to easily understand how to search, interact, and purchase from your site. The more you can reduce the learning curve, the easier the experience is for your clients.

So, if you have to keep the layout similar, how do you define your site from another? That’s where branding comes in. The design of your logo, the fonts you choose, images that represent your product, and the written voice of your company all come together to define your brand. Look at Lime Crime and Nike again — you can see the difference in their brands immediately, even though their layouts are almost identical.

Branding is normally determined by a company’s marketing department, but it is crucial for UX designers and marketing management to work together and create a consistent brand within the parameters of your UX goals.

Both Lime Crime and Nike feature functional sites with simple visual hierarchies — yet their attention to branding gives you an immediate idea of what their company sells, does, and stands for.

Anticipate and meet the needs of your users

Anticipatory design is becoming more prominent, thanks to the growing prominence of AI. It doesn’t always require complicated algorithms to understand and anticipate the needs of your users. Anticipatory design is all about making transactions and site actions easier — not necessarily making a new sale. It’s about seeing your customer’s needs — often before they realize they’re a need in the first place.

Some great examples of anticipatory design are flexed by the big movers and shakers in the industry. For example, Amazon is great at suggesting products you might be interested in based on your previous searches. Also, the Android operating system uses Google Now to scan users’ emails and automatically remind them of appointments, plans, and reservations.

But most of us don’t have the budget for huge AI-powered projects. So, how else can you incorporate anticipatory design?

Allow users to try your product

One of the pitfalls of shopping online is that your users don’t have the benefit of interacting with your product like they would in a retail store. They can’t feel fabrics, try on items, or get a sense of scale. Anticipatory design means meeting this challenge head-on and finding ways to combat this issue.

Warby Parker does a great job of solving this dilemma. They sell eyeglasses, but since customers can’t try them on in person, they had to find a way to help people determine if the glasses would be a good fit. So, they allow customers to order up to 5 frames that are mailed to their home to try in person.

Zenni Optical does something similar — they’ve actually created an online trial interface. Using a webcam, they utilize AR to allow you to try on frames in real-time 3D. If no webcam is available, their site has a huge selection of photos in varying genders, sizes, and skin tones, to give users an accurate idea of what the glasses will look like.

How about digital products? SaaS and traditional software are risky purchases for some people. After all, how do they know it will work with their system, solve their problem, or have a learning curve they’ll understand? In the past, this issue was solved with shareware or limited demo software. This caused issues both because of piracy concerns and limiting the experience didn’t allow customers to truly evaluate the program.

So, companies like Adobe have started offering full trials that utilize an accounting system. The software must connect to the internet occasionally to determine if the license is still active. This protects Adobe from piracy while allowing the customers to try out their software and make informed buying decisions.

Accessibility

Site accessibility is a complicated and sorely overlooked topic. The basics of it are relatively easy to understand, though. If your focus is on user experience, of course, you want to create a great experience for every user. IF you’re building from scratch, it’s simple enough to incorporate accessibility principles, since you’ll design them from the get-go. However, if you’re updating an existing site, it can get a little hairy.

Basically, you want to take into consideration that you will have users with limited mobility, color blindness, or visual impairments. In order to create an accessible site, you want to clearly label all aspects of your site, including heading tags and image alt tags for screen readers to voice for the visually impaired. You’ll also want to make high-contrast color choices that don’t depend on color recognition for site decisions. Finally, you want to ensure that your site can be easily navigated using a keyboard and that the navigation is concise so your users won’t have to spend all day tabbing through links.

EasyJet gets high marks for its accessibility. The navigation is simple, which allows for quick tabbing between links and form fields. Their site has a simple color scheme that is easy to see, with headings that are a nice size. If you want to get more into the technical side of accessibility, take a gander at their source code as well. Their site contains a lot of screen reader-specific information that doesn’t clutter up their layout but offers extra usability to their visually impaired clientele.

UX design has a lot of moving parts and when you’re just dipping your toes into the principles, it can be easy to overthink how to implement it all. The best takeaway you can pull from these successful sites is to keep your experience simple and user-focused. The more you can anticipate customer needs and then meet or exceed them, the better your experience will be.

When planning your site, create clear goals you’d like to achieve, then find the simplest way to help your customers achieve them. UX is rarely the time to reinvent the wheel — instead, it’s simply time to improve upon it.