8 Great UI/ UX Design Tips & Tricks

Nirasha Wimalasooriya
4 min readMay 24, 2020

Practice makes perfect … In today’s article, I am going to cover a few tips and tricks which I use on a daily basis to make my user interfaces better and more user friendly … I hope you will learn something new today.

📌Why you should read this article?

Small details like paddings, buttons, or white space can make a significant impact on the overall user interface and user experience … Mastering those little details is going to help you to design more visually polished and also more user-friendly user interfaces.

1. Containers are overrated

A computer screen’s precious pixels are the world’s most valuable real estate. Normally, when something is extremely valuable, you try to conserve it. But screen space shouldn’t be hoarded, it should be spent. Do not waste valuable space by containers, try to utilize the entire screen.

2. Make the call to action clear

Make sure that the user understands what’s the primary secondary or tertiary action on the screen. The primary action is an action that allows the user to accomplish their most common or most important goal. Secondary actions are any actions that are less important. When in doubt, the default action is the primary one. Be sure to give prominence to the primary action button by making the secondary action appear secondary, visually.

You’ll notice on many Sign Up / Log In designs, the Sign-Up button is always primary. The reason is that if you’ve already signed up for an account, there is a good chance you’ll be automatically signed in. If not, you’re familiar with the site and will know where to go to log in. That primary Sign Up button is there to direct all the new visitors to the site.

3. Increase white space

White space is your friend.it will help the users to read and scan the entire design layout faster. Crowded websites are difficult to read. Complexity often makes users uncomfortable. White space is the way of giving your layouts extra room, by avoiding unnecessary space between elements.

4. Use inline input validation

Do not wait until the user submits the form. Ideally, give them validation prior to clicking the submit button. Auto Form validation helps the client to not keep waste time and can have a better impression of your website. When the users fill out forms in the correct format, making sure that submitted data will work successfully with our applications.

5. Empty, error states matters

Error and empty states are often overlooked. However they are source of frustration for users. Focus on them.

Few examples of empty states:

Searching for something in Gmail and getting no results, When you starting a new social media account and there are no connections, The resulting screen after completing all the tasks in a to-do list manager.

6. Dividers are not always needed

Dividers can make the layout unnecessary complex. Simplify it by removing repetitive visual dividers.

7. Visual Focus Matters

Users need to understand where to focus. The color change is not enough. Help them with more visual clues.

8. Try to use Skelton loadings

Skelton loadings are usually perceived as faster than normal loadings. Even if the loading time is the same.

📌Key takeaways

Remember every single little detail matters … Always try to critically question your design if some element needs to be on screen or not … Try to ask yourself if the user would benefit from it or if it is only visual noise … Design until there is anything on the screen which you will tweak or remove … Everything needs to have an intention.

Thank you! ✨

--

--