21 suggestions for UX/UI designers

Use the color weight to set up a hierarchy.

Each color has a visual weight that can help build content hierarchy. By using lighter shades of color, we can assign different levels of importance to elements.

The golden rule is that if one element is more important than another, it should carry more visual weight. This allows the user to quickly view the page and distinguish between important and non-essential information.

First, users pay attention to the information that is bigger and brighter, and then they move to the supporting information below.

If you want to quickly create weight with shades, try Shaderade. https://prowe214.github.io/color-shader

“Don’t slow me down”

When interacting with a product, the only thing that matters to the user is speed and efficiency. I use the app to do a specific job that needs to be done.

If the experience of depositing money into my bank account via the website is enjoyable but don’t let your creativity interfere with the user’s goal.

What is the golden rule for animations? If animations and micro-interactions add unnecessary time, then they don’t improve the experience. Careful use of animation can enhance the experience, but adding unnecessary distractions and movement to elements will not.

I often see landing page designs on Dribbble and Behance that animate as the user scrolls down the page. They are often over-animated, with everything fading and moving, with little attention paid to the experience itself. It can be difficult for the user to know what to pay attention to when there is so much going on on the screen. It also wastes the user’s precious time.

Conclusions: If you use animation, do it wisely. Also, if these animations are needed, don’t make me wait more than 500ms. In 2022, it only takes a millisecond to annoy your users and make them leave your website.

“NOTIFY ME”

Companies often rely on users to sign up for a free trial and then forget about it and they make them pay for a subscription they no longer need.

We must keep our users informed and allow them to cancel their subscription after a free trial if they no longer need the program. Or, even better, if you’re offering a free trial, don’t ask the user for a credit card number at all because it’s free – right?

Let your users know if you’re going to charge them for some services.

Highlight negative information.

Provide the user with information about the possible negative aspects of the decision he is about to make, this should be very clear.

I love how Airbnb says the accommodation I’m booking has no smoke detectors and no parties allowed. They can easily hide this information but highlight it to make sure you make a decision that is comfortable for you.

Stop spamming.

Provide the user with information about the possible negative aspects of the decision he is about to

Nothing will make me uninstall an app faster than spam notifications.

Respect your user’s time by only sending the most relevant notifications when needed. It’s also important that you allow users to customize notification settings quickly and easily.

And, if the notification is not received after a certain period of time, it does not do its job and should be automatically disabled. It doesn’t benefit anyone.

Make unsubscribing as easy as possible.

The roach motel is a dark UX pattern where it is very easy to get into a situation and then annoyingly difficult to get out of it.

If I have subscribed to your product, please make it as easy as possible to unsubscribe.

I don’t have to call support, send an email, read the FAQ, or talk to an agent. Just give me a cancel button and let me get on with my life.

Add dark mode option.

Depending on the app you’re developing, adding a dark theme option can be a boon for users like me who can’t live without a dark theme. A dark theme is easier for the eyes, and unlike a light theme, it doesn’t feel like I’m looking at a light bulb.

Designing for a dark theme is not much different from designing for a light theme. All it takes is a different color palette. I would recommend allowing the user to choose between a dark or light theme – being able to switch between these two modes will enhance your app user experience.

Make an error page interesting.

Look at any event in your application, even if it is not very exciting, as an opportunity to provide an unforgettable experience.

The error page is usually a negative experience, but you can turn it into a positive one by adding personality or fun.

My favorite example is the Google Chrome “No Internet” error screen. They not only provide users with all the necessary information about how to fix the error but also offer an endless running T-Rex dinosaur game. Brilliant!

Emptiness.

Usually, the screen filled with user data is blank because the user has opened your product for the first time. This could be a list of books, projects, tasks, clients, or songs but since the user hasn’t added anything yet, it’s empty.

Leaving a blank screen in place of future content is a missed opportunity to provide guidance and information about your program. You should use the empty screen to guide users. You can use blank screens to provide tips, recommendations, and an overview of possible actions, or you can simply replace the blank screen with a screen that allows users to enter missing information.

Whatever you decide to do, make sure you don’t say: “There’s nothing here yet…”

Size matters.

You have to make the controls big enough for a human finger. If you have a touch interface, then make clickable elements an adequate size. Trying to avoid one element to select another is frustrating, and users won’t get a pleasant experience if they accidentally click on the wrong element.

2mm padding between elements is a good rule of thumb to prevent accidental clicks.

Apple’s iPhone Human Interface Guidelines recommend a minimum target size of 44 pixels wide by 44 pixels high.

Microsoft’s “Windows Phone UI Design and Interaction Guide” suggests a touch object size of 34px, with a minimum size of 26px.

Show rather than tell.

The expression “don’t tell me, show me” is often attributed to playwright Anton Chekhov. This is a technique that allows the reader to experience the story not through the description of the author, but through the mood and feelings.

Users don’t want to read instructions to understand how a program works. Instead, show them the situation and let them understand it visually.

Showing users how to use your product is always better than telling them about it.

Demo videos are ideal for complex software and interfaces, but if you can’t use videos, on-screen tips are a great option. Be sure to make tooltips visually appealing and with the ability to close them.

Every message is a UX project.

When we send an email or a message to a colleague or a client, it’s important to phrase the message in such a way that it takes less work from the person on the other end.

Turning any communication into a trouble-less experience for the people we work with will make working with us more enjoyable and increase our reputation as UX designers.

Instead of sending messages that require the other person to do work, such as “I’m sure there is a product that we can use, “we should make it easy for him and say something like: “I did a little research and found products x, y, and z that can solve our problem.”

Spend a few extra minutes on your message – it can make a big difference in the experience that others have when working with you.

Autodidactism.

An autodidact is a self-taught person, a person with the willpower to become the driving force behind his success. The fields of UI and UX design are not dependent on fancy degrees or diplomas – success is based on work ethic and consistency.

Being an autodidact is an important skill because everyone in the design industry at some point encounters problems, unfamiliar jargon, new programs, etc. that they didn’t understand.

When this inevitable problem arises, we cannot go back to school to find out how it is done, and we cannot constantly harass our colleagues. Having the skills and willpower to figure things out on our own will allow us to grow creatively.

With the internet, we have no excuse for not being able to teach ourselves everything we want to know about UI and UX design. Everything we need is right in front of us, but only those with self-discipline will take advantage of it.

Adaptation.

It’s no secret that the digital and physical worlds are constantly evolving.

It is essential that designers become familiar with new technologies, products, trends, etc.

Not only do we risk being replaced by other designers but we also risk missing out on opportunities to improve our product experience.

If you adapt and take the initiative to learn about disruptive technologies, you will be able to come to the fore and make sure you still have a job despite the inevitable changes our industry will face.

Consider user context.

There are various contextual factors that influence user behavior when interacting with an interface. Consider where the user is when using our app, how much time they have, and what their emotional state is.

A perfect example of this is the Sleep cycle app. The app features a soothing dark display, perfect for those who set their alarms before bed.

You can see good and bad examples everywhere. Navigation apps require minimal reading or touch, the Kindle has no glare when reading outdoors, note-taking apps are available offline, and so on.

If our app is meant to be used while running, there are some limitations and design considerations that need to be taken into account.

The best way to make sure our interface and experience fit the user’s context is to test it in situations where it can be used and test it with users.

Shopify has a great article on a user-aware design that I recommend to anyone interested in learning more about this topic.

Focus on how it looks, not how it works.

One thing every UI designer hates is breaking their designs.

Content can ruin the layout or aesthetic appeal of an interface. This may be inconvenient for the designer, but it is an essential component for developing a flexible, scalable, and user-friendly product.

When the layout I sent to production has a six-letter name, it probably looks great, but what happens when Hubert Blaine Wolfeschlegelsteiusenberdorff Sr. tries to use the app?

Test the design and take a step back to make sure the interface can fit a wide range of use cases, not just perfect ones.

Postpone registration as long as possible.

“People often abandon apps when they have to sign up before doing something useful. Give them a chance to fall in love with your app before committing. In a shopping app, people can view your items as soon as they launch and only sign up when they’re ready to make a purchase. On a streaming app, people can explore your content and see what you have to offer before signing up to watch something.” – Apple Authentication Guidelines

Apple is urging us to re-evaluate the in-app sign-up experience. If possible, remove the registration and subscription altogether.

Unfortunately, the application that I am currently designing does not allow you to completely remove the registration. But I moved the registration screen to the end of the new user training process so that they can at least get a feel for the experience that awaits them after registration.

It is also a good idea to introduce various registration options to make the subscription convenient. The app I’m currently working on supports password autofill, Facebook, Google, Apple accounts, and email signup.

Show content as soon as possible.

Don’t confuse the launch screen with the splash screen. The launch screen introduces elements to the page. Design a launch screen that is almost identical to the first screen of your application.

“If you add different looking elements to the loading screen when the loading is complete, people may experience a nasty flash between the launch screen and the first screen of the app. Also, make sure the launch screen matches the device’s current display mode, see Dark theme”. – Launch Screen Guidelines

“Don’t make people wait for content to load before they see the expected screen. Share the screen immediately and use placeholder text, pictures, or animations to show where the content is not yet available. Replace these placeholder elements when loading content. Whenever possible, preload upcoming content in the background, such as during an animation playing or as the user navigates through a level or menu.” – Apple Loading Guidelines

Anticipate when help is needed.

“Determine in advance when people might get stuck. The game, for example, can show useful tips while paused or when the character is not moving. Let people revisit the tutorials in case they miss something the first time.” – Apple App Architecture Guidelines

Adding quick tips, service chat, chatbots, FAQs, help center, etc. will create a solid system for users who might get confused.

Safe exploration.

“When someone feels like they can explore an interface and not experience dire consequences, they are more likely to learn more – and feel more positive – than someone who doesn’t explore. Good software allows people to try new things, step back and try something else, all without stress.”

Unlike the real world, interfaces make it easy for users to correct their mistakes. If you spill coffee on your skirt, you’re screwed – you can’t press CTRL+Z. Interface designs, contrary, should encourage users to explore the various options available and then return to where they started or easily undo any actions.

Examples:

  • Back buttons to easily get back to where I started
  • Applying photo filters that can be easily reversed if I don’t like the result
  • Saving history
  • Cancel button for documents

Habituation.

“This gesture works everywhere, why it doesn’t work here?”

“When using the interface repeatedly, repetitive physical actions become reflexive: pressing Ctrl-S to save a document, pressing the back button to exit a web page, pressing Return to close a modal dialog box, using gestures to open and minimize windows – even pressing the brake pedal in the car. The user no longer needs to consciously think about these actions. They have become habitual.”

As someone who uses Figma, XD, and Sketch on a daily basis, I’m impressed with how unified most of the controls are, but still get annoyed by the differences.

If there is an industry-standard for interaction or interface, then it is best to stick to it – redesigning existing patterns will confuse the user. Save your creativity for other aspects of the product.

Examples:

  • CTRL+S, CTRL+Z
  • Swipe left or right to go to the next or previous screen
  • Pressing X to exit the dialog
  • Swipe down to refresh the screen on mobile

Contact me

    By clicking on the button, I agree to the privacy policy
    Reliability

    Hi 👋. Nice to meet you!
    Close icon