Any design can be made better. But how? Where can you find clever tips and rules to improve a system's interface and increase the satisfaction of its users? That's the focus of this topic. It contains interesting facts about people's perceptions of information that are based on UX and human-computer interaction research. Learning about this subject will help you create applications that users want to return to again and again.
Patterns of perception
Where do you look when you open a new website for the first time? Or if you're reading an article? How can you make sure that people aren't confused when opening the page? That they don't get cognitive exhaustion and immediately close your service? Users perceive on-screen information in predictable ways, and understanding these patterns holds the key.
People scan information when they read books or articles — they don't usually read every single word. Instead, the eyes pass along the entire line, and the brain catches the main meaning of the sentence by analyzing the words that were seen. The same thing happens when you view pages on the internet or the screen of a mobile application.
Early human-computer interaction researchers Jakob Nielsen and Don Norman studied how users scan a page by tracking the movement of their eyes over an interface. In 2000, they identified a pattern of eye movement. It showed that when most users open a page, they first scan the content in a particular sequence and then proceed directly to reading the content that interests them. This sequence is called the F-shaped pattern.
Knowing about this pattern can help you place important information where it will be seen immediately. Otherwise, if you position it lower down the page, users might miss it entirely and open your competitor's site instead. If you're curious, you can read about this study in detail.
Depending on where screen elements are located, users may resort to an alternative route instead — the Z-shaped pattern. When there's a lot of text content on the page, the F-shape is used. But when the content is diluted with a large photo or diagram, the Z-shaped pattern comes into play. The Z-shape stems from the fact most people read from top to bottom and left to right. You can find more examples of the Z-shaped pattern on the material.io website.
These certainly aren't the only patterns, but they're the ones most commonly used when scanning a page. If you're interested in this subject, you can search for detailed research on the Nielsen and Norman Group website.
Text length and cognitive load
As you already know, users don't like cognitive load. It makes them strain and gradually causes exhaustion, leading to the closure of the service or application. Fortunately, various methods of placing and grouping elements on the screen come to the rescue. And there are also a variety of visual ways to simplify the perception of information.
Let's focus on the text. Or, more precisely, the length of sentences and how widely stretched the lines are. Of course, getting this right is less of a problem for mobile development. But if you create a service for large-screen phones or tablets, it's still something you need to think carefully about.
The width distribution of the text plays a vital role in the speed of reading and perception of information in general. If you make the paragraphs too narrow, the user will have to run their eyes back and forth very frequently, causing slight nausea. But if the lines are really wide, the user will need to make a long movement every time to return to the beginning of the following line. And at some point, they will completely lose track of where the next line starts. To tackle these issues, Robert Bringhurst came up with a method for calculating the optimal width of text on the screen.
To calculate the correct text length, you need to multiply the font size by 30. For example, if your font size is 14, this will give you 420 pixels, which is the ideal text width.
Accessible text
The Colors topic mentioned accessibility, but we're going to cover it again in this section because it's a really important subject. As you are aware, some people have visual impairments that prevent them from using applications and services as others do. Fortunately, many tools have been invented that make it possible to convey information about the screen in different ways. A screen reader is an example of one of these tools that you may have heard of before. The most popular are Google's TalkBack on Android, Apple's VoiceOver on iOS, or Freedom Scientific's JAWS and NVDA on desktop.
For this technology to work, alternative text (alt text) that isn't usually visible is required.
To increase your platform's accessibility, you need to describe what's happening on-screen in a simple but meaningful way. Following these rules will help you do this effectively:
- Use a small but informative phrase to describe a picture or diagram.
- The shorter the text, the faster the screen reader system will read it, so it's best to keep description lengths below 130 characters.
- Include keywords in the text that give the correct context to images, but don't just list them separated by commas.
You can find good examples of how to properly incorporate alternative text into your designs on the material.io website.
Pointer targets
When developing an interface, elements sometimes need to be reduced in size to fit in a particular position. But if the element is too small, it can be difficult for users to click on it using a mouse or touch screen. To solve this problem, you need to set the relevant parameters of the clickable fields, known as pointer targets.
In mobile development, a good rule is to create a pointer target space with a size of at least 48x48 dp. This will enable users to perform the action even if they click slightly to the side.
The same principle applies to elements whose size exceeds 48x48 dp. If there are no other clickable elements around the icon or button, you can make the field of interaction larger. That way, it will be easier for people to use the application.
Conclusion
Creating a good interface isn't difficult. But creating the ideal interface can be an endless process that requires you to immerse yourself in psychology and people's perception of information. There are scientific fields entirely devoted to this, such as HCI, UX studies, and many others. Today you have learned that:
- People follow various patterns when scanning websites and mobile application screens. Understanding these patterns can help you to create user-friendly designs and encourage users to take particular actions.
- Users experience cognitive load when interacting with interface elements and analyzing on-screen information. However, there are methods that can lighten this load and make text more convenient to read, such as ensuring line lengths are correct.
- It's important to design interfaces that are accessible to people with visual impairments. Including well-written alternative text is an essential part of this process.
- Small screens are handy, but they place greater limitations on the location and size of interface elements. You can make clicking on buttons, icons, and other elements easier by configuring pointer targets appropriately.