UX Design Tips & Tricks

Consistency

1. We only have 1 sun - keep your shades the same

Do not forget we only have one sun - in Interaction design, make sure all your shades are coming from the same light source.

2. Icons share the same visual style

Make sure all of your icons share the same visual style - they (should) have the same color, weight, edges are either sharp or rounded and icons are filled or outlined.

Do not mix!

3. Overcome choice paralysis

Have you noticed that Mark Zuckerberg wears only grey t-shirts?

"I really want to clear my life to make it so that I have to make as few decisions as possible".

In interface design, too many options make users so overwhelmed it can make them less likely to complete the action. Where possible, limit the options available or hide the options that are less relevant at that stage in the journey.

4. White space is your best friend

Whether you offset elements from the outside (margin) or the inside (padding), you should rely on the magic number of 8. Increase the offset by 8 pixels (4 for small elements). The larger the gap you want, the larger the increment will have to be. The white space creates emphasis on your content and it makes the content easier to spot. Imagine the ball in a room full of things and in an empty room. When is it easier to spot?

‍

5. Thumb rule

The thumb zone an important factor of mobile UX design. Thus, the principles of the so-called "thumb rule" help to prevent both bad usability and users' joints 'dislocation'.

Display the most important CTA’s in an easy reach of a thumb.

‍

Typography

1. Smaller the font size - bigger the height line

As your font size decreases, increase the line height for better, all-round legibility and vice versa.

2. Use All-caps on short titles only

All caps titles are perfect if they are short (very short), preferably one line. They are the most suitable for Overlines - short phases that appear above the title.

However, using all caps for longer titles - more than 1 line is a terrible idea.

3. The right voice for a Typeface

Every website/platform has a "personality". Does it suppose to be loud, calm, friendly or informative? Choose your typeface wisely so it matches the "personality"

4. Improve readability of your body text

Did you know that 66 characters (both letters and spaces) in one line are considered to be the best practice?

Of course, font and line-height matters as well but you should not overreach 77 characters in one line.

5. Font size increment

You want to make your 14px body text bigger, you try 16px and you are satisfied. Then, you want to make your 40px title bigger, would you change it only to 42px? Of course not, you would change it to 56/60px.

The bigger the font, the bigger the increment. Also works for the size of buttons, white space,  etc.

However, for typography, one proven scale is used with font sizes that you will want to stick with forever. The scale is 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, and 72 pixels.

Different

1. Make your Error messages flattering

People hate making mistakes but things sometimes go wrong. As designers, we should encourage positive action and sentiment rather than throwing unintelligible messages.

If possible, apologize for the error message reason so the user does not have to have any negative feeling.

2. Ask for as little information as possible

This is most suitable for a situation when the user creates his account. Ask for information that you necessarily need to make the account such as name, e-mail & passport, and give the user an opportunity to fill in the rest later in a profile settings.

There’s no way anyone would sign up to LinkedIn if they had to input their entire professional history just to sign in.

3. Show progress

In every situation when the user needs to go through more than 1 screen and do some action - show what step the user is at in the journey, assuring that they are making progress towards their end goal. This makes users less likely to become frustrated about not knowing when a process will end, and therefore less likely to abandon it altogether.

The best practice is to do it both visually(indicator) and in text?(Step1/3)

4. Use imagery to guide users

Small psychological trick. People instinctively look in the direction where other people look-both in real life and on the screen. So if you want to direct the user to a specific place - CTA, use a picture with a person looking at that place.

5. Use an extra visual aid

People make mistakes. When filling in the form of any kind, do not only visualize what is wrong but add an extra error message close to the action that the user has just taken. It is a small but helpful way to make the process of fixing the mistake easier.

6. Contrast

One of the most common mistakes designers do is a lack of contrast. Contrast and color use are key factors to consider when designing for accessibility. Users, including those with color vision deficiencies, must be able to easily view the content on a digital screen.

Use Contrast checker to make sure that the contrast is high enough.

7. Contrast - text on the image

To achieve a simple contrast between the text and the background image, use a gradient overlay. Depending on the position of the text, you can go for a subtle bottom, top or side overlay or you can even go for a full image overlay.

Bring happiness to your closet

8. Overlapping elements

If you are looking for ways to encourage users to scroll your page, the overlapping elements may help you. The element creates depth and makes the scroll more natural as the different sections seem to be connected.

9. Involve developers

This tip is proved right in GoodRequest on daily basis.

Including developers at the start of the project (even before the design) enhance the experience of the interface. Developers see beyond the visual aspect of the interface giving them the chance to offer more inputs to make the interface as effortless to use as possible.

10. Give prominence to the most important elements

Think about what is the most important element on your page and give it prominence by using a combination of different font sizes, weights, and colors.

Giving the prominence of the most important elements make the experience more user-friendly.