7 Foolproof Design Tactics to Improve Your UX & UI in 2021

Good UX and UI is like good underwear — if you don’t notice it constantly, it’s probably doing its job.

But avoiding the design equivalent of scratchy fabric and suffocating elastic is deceptively difficult. It requires a deep understanding of human psychology and behaviour, working within established expectations, and keeping up with constantly evolving trends.

So where do you start?

Since UX and UI are often lumped together and their meanings conflated, a good place to start is ensuring you understand the difference.

UX (user experience) is the experience of using a product, system or service, including usability, accessibility, flow, integrations, branding, and emotion.

UI (user interface) is the means by which people interact with a system, including all elements of visual design.

Put simply, UI is what your user sees and UX is how they feel about it.

To ensure that feeling can accurately be described as “elated” for your users, here are 7 vital things to keep in mind as you design, along with a few concrete tactics you can implement immediately.

Summary

1. Make it Human

2. Keep it Simple

3. Clarify at Every Opportunity

4. Be Consistent

5. Create a (Metaphorical or Actual) Sketch 

6. Know the Trends 

7. Know What’s Outdated

1. Make it Human

Even the most advanced software is only as good as its ability to serve the people who use it. To create something that resonates, you have to understand your users’ needs, wants, and goals.

Too many companies mistakenly rush their research phase in an attempt to get their project in-market as fast as possible. Some even operate under the misguided notion that they can tell users what to want instead of asking them.

You can’t.

Think of your audience as the ultimate picky eater.

If they’re craving chocolate and you try to feed them broccoli, it’s just going to go mouldy in the fridge. You may think you’re already serving chocolate, and that’s great. But the only way to know for sure is to get a few people to eat it and see if they spit it out.

Start by defining your user story. Who is your audience? What do they want to accomplish? What actions do you want them to take? What’s the best way to get them from where they are to where they want to be?

If you get stuck trying to answer these questions, open your favourite apps and take note of what you do and don’t like. This will help you actively understand rather than passively appreciate what makes certain designs work.

Use this to empathize with your users, but be careful not to confuse yourself for one. Assuming others think and behave like you do is called the false consensus effect.

Your target audience may not share your background or opinions. So keep any differences in mind as you make decisions.

One surefire way to break out of your assumptions is to seek feedback from real users. This may mean creating a minimum viable product (MVP) to collect reviews before adding all of the functions you’d like in the final version.

But communicate with your users. Let them know this is version one and that you'd like their help to improve. People love being heard.

And remember, you’re designing for different kinds of people with different needs, including vision, hearing, cognitive, or motor impairments. Making a concerted effort to design within accessibility guidelines will immensely improve everyone’s experience.

2. Keep it Simple

All too often, companies get lost in the fun and innovative features they can offer their customers. How do you stand out from the competition? Offer more than them, obviously!

Unfortunately, it doesn’t work like that.

While it feels helpful to shower people with bells, whistles, and an all you can consume buffet of information, it's actually a burden.

People have short attention spans, and they're only getting shorter. Added choice means added mental effort and time, ultimately leading to anxiety and confusion.

To streamline, start by coming up with a thesis statement for your software. Aim to do one thing and do it better than anyone else.

This doesn’t mean you have to stick to one function. But from the colours and images to the layout and copy, one primary function should stand out above the rest and everything else should support it.

Make your primary function clear with intentional design hierarchy. Larger items, top positions on screen, and the boldest colours should be reserved for the most important information.

More Ways to Simplify:

• Minimize the number of steps it takes a user to reach their goal

• Prioritize one action per screen whenever you can (e,g, logging in, choosing an item, etc.)

• Remove redundancies, clutter, or unnecessary design elements that could make it more difficult to take essential actions

• Minimize the number of forms users need to fill out

• Utilize white space to make the design look clean

3. Clarify at Every Opportunity

Imagine you’re trying to catch a train in a country where you don’t speak the language.

The signs mean nothing to you, there’s no one you can ask for help, and you’re just stuck watching people come and go, wondering if the train pulling out of the station is the one you were supposed to be on.

It’s a frustrating feeling — one you should avoid creating for your users at all costs.

Anyone should be able to look at your app or website and know what actions are possible and which have been completed through a combination of visual cues and written communication.

For example, if the user can see more information by scrolling sideways, add arrows to let them know. Use progress bars to indicate how far someone has made it through your content. Or, if a setting turns on and off with a toggle, use different colours to indicate whether or not it has been activated.

But know that despite your best efforts to provide clarity, your familiarity with the project will reduce your ability to judge when you've provided enough information.

Like an expert who forgets how to communicate the basics to a layperson, you can spend so much time with your software that it becomes impossible to put yourself in the mind of a new user.

Get fresh eyes on the project before it launches. You will no doubt be surprised how many roadblocks the uninitiated can find.

4. Be Consistent

Once you know who you’re serving and how to do it in a clear and simple way, it’s time to make sure you’re using the same clear and simple method on every screen.

Not only does design consistency reinforce your company branding — which I’m sure you already understand is important — it also ties together your UI elements with predictable actions.

Essentially, it’s the commitment you make to your users that when X appears, they should do Y. It also creates easy decision making for you and your team — if X type of content needs to be added to a page, it gets laid out in Y order.

You don’t need to invent your own secret sauce here.

Unless it’s someone’s first time using technology, people come preloaded with a well-defined set of expectations for symbols, navigation patterns, action indicators, etc.

Taking advantage of this knowledge by meeting established expectations in your own design allows you to minimize the learning curve and onboard people faster. In turn, this makes users more likely to stick with your product.

“BUT,” I can already hear you typing, “innovation is important, and I want to provide something fresh that excites people, not rehash what’s already been done.”

Excellent point.

However, great design balances the comfort of familiarity with the rush of discovering something new.

Meet your users’ core expectations for function and navigation, but find ways to add unexpected delight through custom illustrations, animations, colours, language or by using familiar functions in new ways.

Consistency Checklist

• Are your brand colours exact?

• Does your logo look right?

• Is the typeface the same on every page? Is it the same on your app, website and supplementary materials?

• Do you vary type sizes, fonts, and arrangement in an intentional way that improves readability and scanability?

• Do you have a pattern library that anyone on the team can reference to stay consistent?

• Do your images match in colour schemes and tone?

• Are your controls the same on every page?

• Does anything get lost from portrait to landscape?

5. Create a (Metaphorical or Actual) Sketch

There’s a popular myth among people who claim they can’t draw that “artists are born” — they just put pen to paper and create magic effortlessly.

Meanwhile, professional artists have drawers full of thumbnails, gesture drawings, and X’d out sketches of hands that look like rotten tree branches.

The point is, even experts can’t create a masterpiece in one attempt.

So plan for stages of wire-framing, mockups, prototypes, testing, and iteration. Fixing a mistake or making preference changes are relatively cheap and easy in the early stages if you start with a basic sketch and build up.

Conversely, if you try to change hard code in the 11th hour, expect to pay your weight in gold ingots to make it happen.

To make the most of your mockup and prototyping stages, use real content and design elements wherever possible. The size of a paragraph can completely change the flow and your images may not work with the colour scheme or tone as well as a placeholder.

6. Know the Trends

Go take a look at your high school yearbook.

What do you think of the clothes you’re wearing? Maybe you look fantastic, if so, congratulations! But most of us are bound to have a pit in our stomachs, trying to figure out what strange combination of naivety and hormones led us to get THAT haircut.

Remember that feeling of unease as you gaze into the past. It’s what your users will experience if you deliver outdated design.

Trends move fast, so you need to know what people expect right now.

However, this topic deserves its own article with a detailed discussion of how companies are implementing design trends in creative ways. That’s coming!

To keep you informed in the interim, here is a list of the biggest trends in UX/UI for 2021:

UI

• Illustration - especially hand-drawn

• Motion graphics

• Creative Scrolling

• Retro

• Bold Colours

• Creative/bold/oversized fonts

• Bauhaus

• Dark mode

• 3D graphics

• ‍Neumorphism

• Responsive colours

• Asymmetrical layouts

• Full screen visuals

UX

• Microinteractions

• Augmented reality

• Voice-based technology

• Storytelling

• Virtual reality

• Artificial intelligence

• Soft shadows, layers and floating elements

• Mixing typography and graphics

• Abstract data visualisation

• Unusual colour combos

• Texture

• UX writing/microcopy

• Passwordless login

7. Know What’s Outdated

If orange is the new black, it’s your job to know what the old black is...and burn it. Nothing screams, “I don’t actually know what I’m doing!” more than 10 year old design elements in brand new software.

Again, this topic deserves more detailed coverage in another article. But as of 2021, a few things you can strike from your design books include:

• Mixed typography

• Static images

• Stock images

• Flat, pixel perfect elements

• Homepage sliders

• Complex navigation

• Ultra corporate tone

• Basic or boring colour schemes

• Sidebars

• Infinite scrolling

And please, no matter how fun or whimsical it first appears, never subject your users to Comic Sans. You should value them more than that.

Conclusion

You don’t need to be perfect out of the gate. We’ve already mentioned it a few times, but once more for the people in the back — feedback and iteration are key to great design. Listen to your users and try new things to make their experience better.

That said, don’t shock users with too much change all at once. As much as we like to think of ourselves as rational beings, we all tend to panic when the tools we rely on every day suddenly feel unrecognizable.

Drastic changes also make it challenging to figure out what’s working or not working and why. If people suddenly start clicking a feature previously covered in cobwebs, is it because you changed the location of the element? The colour? The typeface? The font size?

Unless you have a good reason to believe that absolutely nothing about your design is working — in which case starting from scratch would be the best option — start with one or two small changes from our suggestions that you can test and adjust as needed.

Need help creating app and website designs that get noticed for the right reasons? Get in touch, we’re happy to help!

Iversoft