UI/UX Principles

What to consider 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 concept which is based on expert opinions and studies. In this article, we present a few basic principles of UI / UX design based on world’s best practices and researchers intended to design clear and user friendly interfaces and to avoid mistakes.

Accents

Opening a website or application, a user should be able to immediately 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 are equally weighted, attention is dissipated — this should be avoided.

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


Article “Design Principles: Dominance, Focal Points And Hierarchy” 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

Readable 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 to structure the page. There should not be too many text styles, while same elements should have the same text styles, so as to be less chaotic. And do not forget about the minimum size: a 16-pixel or lower font size for paragraph text puts serious pressure on readability.

Text Align. Authors 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 of the same size and alignment. The user must understand which elements form groups. Important information should not overlap


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 for users so that they can smoothly navigate through the pages without any confusion. A 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 is going to perform.. 

Hamburgers and kebabs in mobile are prevalent and annoying. Avoid more than five action options in a single screen, otherwise it would be hard to concentrate on appropriate action. Hamburger menu is a short way to go beyond this limit, for it allows hiding multiple functions behind a single icon.

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 create 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 to clarify results of actions.

In conclusion

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

To inspire you we present our favourite app - Guardian Glass Expert.