What to look for when designing interfaces.

When creating interfaces, designers have to defend their points of view in front of the team and customers. However, this should not be just a personal view, but a reasoned opinion, which is based on the opinions of experts and studies. In this article, we present a few basic principles of the UI / UX design based on the world best practices and researchers to design clear and user friendly interfaces, and avoid mistakes.

Accents

Opening a screen of a site or application, user immediately should understand what is important, and what is minor. If the accents are properly arranged and the hierarchy of elements is present on the screen, the user understands where to click and what to do at once. When the elements have equal weight, attention is dissipated — this should be avoided. 

It’s important to have only one focal point and make accents in ways that make the visual hierarchy clear. 

In article “Design Principles: Dominance, Focal Points And Hierarchy” author gives most common characteristics you can use to set different visual weights:

  • size;
  • shape;
  • color;
  • value;
  • depth;
  • texture;
  • local white space.

Accents in mobile application design

Typography

Reading content should be optimized. By optimizing typography, text division, order, and many more you can deliver the most pleasant experience to your users. 

Text Size. Use different text sizes for different types of headers as this creates a structure on the page. There should not be too many text styles while same elements should have same text styles, so as to be less chaotic. And do not forget about the minimum size. 16-pixel and less font size for paragraph text put serious pressure on readability 

Text Align. Autors of article “Why You Should Never Center Align Paragraph Text” explain in detail how to work with text alignment:

“Left aligned text is easier to read than centered text for paragraphs. This is because when you center your text, the starting place of each line changes. This forces your users to work harder to find where each line begins to continue reading. Without a straight left edge, there is no consistent place where users can move their eyes to when they complete each line.
Centered text is best used for headlines and short lines of text. Users can read them with ease because the lines are short, scannable and don’t need repeated eye movements. They can also give your layout a balanced look with its symmetrical format.”

Text styles in web and mobile design

Alignment and Organization

Organize the items on the screen correctly. The same types of elements must be the same size and alignment. The user must understand which elements form groups. Important information should not overlapped. 

For proper operation of this principle, white spacing is important. To separate objects from their neighbors, internal distances inside objects should be less than external, giving them independent significance.

Element and text align

Navigation

Design should look neat and easily understandable by users so that they can smoothly navigate through the pages without any confusion. The user must understand where he is, what he needs to do and what his action might entail. Thus, navigation should be placed in standard style using generic labels so that users can easily find and understand the actions it’s going to perform. 

Hamburgers and kebabs in mobile are prevalent and annoying. We will address this issue in details in our next article.

Hamburger menu and what you can do with it

Image sliders, carousels, and clickbaiting pagination are badly executed, causing confusion and misinformation. Because of that, people tend to skip them. 

While creating forms, order the labels logically, reflecting the natural flow of a conversation. Group related information. Sentence case is slightly easier  —  and thus faster  — to follow grammatically than title case. For more principles there is a big article about how to greate good forms.

greate good forms

Don’t forget about feedback. Always show results to keep people informed. Interactive elements are highlighted briefly when tapped, progress indicators communicate the status of long-running operations, and animation and sound help clarify the results of actions.

In conclusion

Be clear. Make sure that every item in your project has a purpose and that it communicates its purpose immediately.