Published on | Prototyping: From UX to Front End — Medium UX Boot Camp

#30dayUXchallenge [Day 17]

On day 15, we talked about different levels of fidelity, when & why we should choose each of them. Today we want to go a bit deeper and talk about tips that make our wireframes, flows & patterns usable — and, hopefully, delightful.❤

So let’s start with a “check list” of attributes and details we will need to cover, from a UX perspective, from now on:

Sitemaps and users flows helps us understanding and optimizing the structure and navigation of the website, and if there is one single rule in UX that applies to this stage this rule is definitely applicable here: “keep it simple, mate!” As soon as we represent the sitemap and/or user flow in a visual way, we can identify how complex it is and what can be optimized. Keep it simple, seriously!
As soon as the flow & structure is crystal clear, we can think about how to determine the navigation. How the flow determined above is going to happen? What are the most global actions the user can take on the main pages? Which categories belong to subcategories? Is there any value in exposing them on the global nav?
Content Strategy is often forgotten at this point, but having a solid content to work with at this stage is a huge win. We often get the final content really late in the process, which usually means just extra work and a messed-up flow. The copy and the imagery that will complement the experience will help ensuring the steps flow smoothly and naturally. Do reinforce how important it is to get the final content as early as possible!

We also talked about keeping your users mindsets and not changing a pattern they are already used to, so that’s why it’s so important to understand what are the common patterns in the industry and what is the expected behaviour on certain features.

To get started on this, think about the biggest players in your user’s routine: if we are talking about young users that are very tech savy, for example, we are talking about apps & websites like Google, Youtube, Facebook, Instagram, Uber, Airbnb, etc. It absolutely doesn’t mean what they are doing is perfect, but it does mean our users will be used to their patterns.

Ok. So, what is a pattern?

Patterns are well-estabilished solutions that different products evenutally started to use repeatdly, which made its users familiar to it. Think about yourself in a strange city: you don’t know the streets, you don’t know the shops and everything is new to you. It takes a lot more energy to absorb what is happening around you and to find a specific shop you may be looking for (you will probably use Google Maps for it, right?). Now think about yourself in your neighborhood: you probably know how many minutes will take you to go to your train stop or to your local market. It’s the same for users who come to our product for the first time.

Let’s use as an example a travel website who sells flights and hotels. The user will probably expect to start by searching flights to the desired destination and to filter down results by price or conections on the left side of the page, like the biggest players in the industry do:

That’s what we call an estabilished pattern. Goin back to our strange city analogy, if our users feel like they are in a strange city when they visit our website, they will be more likely to get lost, therefore they will be more likely to leave as they don’t have time to learn something new.

It doesn’t mean that every pattern needs exactly the same colors or exactly the same shapes. We don’t want to browse in a lifeless web afterall. However, it does mean that it’s easier for users if we keep the behavior similar. Users are more likely to remember the behavior than the look and feel itself.

Broken expectations are cumulative. As described in Consistency in UI Design, if a design deviates too far from expected conventions (externally inconsistent), designers face resistance to using the site. If a design deviates from itself (internally inconsistent), then it just becomes downright frustrating (by UXPin)

The adoption of patterns and conventions help designers reducing confusion, but have I mentioned that it also helps us saving time and sticking to a well tested solution that is less likely to need further validation? Or that our development team will implement it quickly because they probably also have it developed in their libraries? Or even that patterns also help us keeping our own product consistent within itself, making it even easier to our users to use it?

However, as Rian van der Merwe suggests, patterns aren’t excuses to blindly copy what others have done. Don’t be afraid to radically break a pattern, as long as we have a deep understanding of the rules of human-computer interaction, so that we know when breaking them is OK.

That said, think about patterns as starting points. The actual challenge is to make sure we are adopting patterns the right way and making them work within our products, based on our users needs. We can always add our own love to estabilished patterns, as long as we validate our assumptions through testing or analytics — and ensure it works.

… but, what about dark patterns?

“A dark pattern is a user interface that has been carefully crafted to trick users into doing things, such as buying insurance with their purchase or signing up for recurring bills. (https://darkpatterns.org/)”

I don’t know about you, but I have certainly spent a few minutes trying to find the “I don’t want extra luggage” option while booking a flight online and I have already accidentaly signed up for an annual subscription because the pricing table wasn’t clear enough. Don’t get me wrong, I understand companies need to make money at the end of the day, but I do believe it’s our duty as UX designers to fight against misleading flows.

The website https://darkpatterns.org/ exposes a few examples of thinsg we shouldn’t be doing:

Not cool, LinkedIn, not cool.

Ok. We talked a bit about how patterns can help us to keep well-estabilished conventions and when to break the rules, so do you want to know how Gestalt rules can be applied to our designs (to help our screens making sense), and what are the common conventions for patterns like search, carousels, breadcrumbs, forms, etc?

Stick around because that’s our topic for tomorrow! See you there?

<a href="https://medium.com/media/8d5e2c740a04faf463af9accfa7e3c31/href">https://medium.com/media/8d5e2c740a04faf463af9accfa7e3c31/href</a>Gabi Braga — UX Designer at Envato Elements, freelancer at Toptal & beer enthusiast in her spare time

This post is part of the #30dayUXchallenge: you can read more about why we started it here, and don’t forget to follow us on Twitter and Instagram!

UX Best practices (part 1) was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

UX Best practices (part 1)

Cool stuff, every week

More Articles