When creating designs, it is significant to think about whether lines and boxes are necessary for the content. Due to boxes and lines, the content can feel dense, making the UI feel cluttered. Taking outlines and boxes can possibly make the page seem less dense and give our elements more room to breathe.

San Jose State University

A mega list of aspects that designers should be looking into when designing for users to give them a better experience.

10 Rules of Thumb in UI Design

https://uxdesign.cc/10-rules-of-thumb-in-ui-design-aa5f91885444
The website to the article.

10 Rules of Thumb in UI Design Reference

Users like applications and products to be fast and quick, so any form of micro animations or micro-interactions that adds unnecessary time to the user's usage of the platform, it is best to take the interactions and animations out of the platform.


Don’t slow me down

Simplicity is key to designs. Less content and design on a page won't overwhelm the user with a lot of information. Having the interface be simple and minimalistic will help the user find the information better and faster, making it a better experience.
An example of two products, one with too much information and another that is simple, are Yahoo and Google. Yahoo has too much going on in the interface, making the user feel overwhelmed, whereas Google has a more simple design, in which the user will just have to search.

Less is More

Colors have a way to develop hierarchy among the content. With the use of lighter hues of color, there will be shown different levels of importance in elements. If an element is more important than another, there should be a higher visual weight. This makes it easier for a user to quickly skim through the pages and distinguish between the important and less important information.

Use Color Weight to Establish Hierarchy

Remove Lines and Boxes

Having elements be the standard helps users to expect similar experiences across the platform. If your website, app, or software functions differently than what users have grown accustomed to, then it won’t be intuitive, and they will likely become frustrated with the experience. It is best to create designs that are the norm.

As seen in the image below, the different icons for the text "next," makes it difficult for users to feel as the buttons will give similar experiences compared to the icons on the bottom.

Familiarity is Good

To keep the design of the work to be consistent, the interface should have the same typefaces. Having more than two typefaces will allow for distinction, but too many typefaces might make it difficult for readability. Using a font family will help with the design to have multiple hierarchies, such as using bold font will help with make the text more important compared to regular font. Finding a font family that has multiple styles will make it easier for the designer to use different style within a font family.

Avoid Using More than Two Typefaces

Having spacing be in 8 increments is a better way of designing because when the resolution is increased, an odd number won't render properly. Also, the vast majority of modern screen dimensions are divisible by 8, making it simple to align our designs appropriately on those devices. This helps with consistency of the interface throughout multiple devices.

Use 8dp Increments

Contrast draws the user’s eyes to relevant information on the page and improves the accessibility of the product. The design should be inclusive to those who are visually impaired, meaning the colors must be different enough.

As seen in the image below, the 2nd box with the text stands out more because the grey color between the text and the box is more contrasted and different from each other compared to the 1st box with text.

Pay Attention to Contrast

Design should allow users to recognize what actions they have taken or what actions are there available to take. This helps the users from having to retrieve the information from memory and instead see it on the design, so the user doesn't get frustrated with having to find the previous information.
An example of recognition, not recall is when we look at our history tab, where we can recognize what websites we have gone. Another example is on Gmail, when we have already read an email, the email will be grayed out and the emails we haven't read will be pop up with its white color.

Recognition, not Recall

Density (DP) is the number of pixels per inch of a screen, rather than have a single pixel given. When designing an interface, it's recommended to design for the pixel density of the device rather than just the pixels. This will ensure that the elements are scaled similarly to fit different device sizes. Some screens have more pixels per inch than others, so in order for the content to maintain its sizing across different devices with varying densities, DPS will help it be rendered at 2x, 3x, 4x their original size. Below are the screen sizes with different dp and px.

Learn Before

Related