Table of Contents
- 1 1. Careful page/screen scannability
- 2 2. Core navigation placed in a header
- 3 3. Highly visual branding
- 4 4. Numbers, not words
- 5 5. Instantly noticeable CTA
- 6 6. Testing UI icons perception
- 7 7. Theme images and hero banners for strong message
- 8 8. Speaking users’ language
- 9 9. Gestalt principles power
- 10 10. Visual content optimization
- 11 Bottom line
Talking about user-friendly interfaces, designers and users often put simplicity on top. Make no mistake, simple user interface design doesn’t equal to monofunctional, primitive or empty. It’s about being clear, intuitive and helpful. Really simple UI solves user’s pains in an optimal way saving time and effort. So, let’s discuss some tricks helping to make web or mobile UI easy-breezy.
Credits: Icons8 Photos
1. Careful page/screen scannability
People don’t open to strangers at once. And web or mobile users do the same. Instead of reading and exploring all the content at once, they start quickly scanning the page or screen to ensure it contains what they want. This domain of user research has been massively supported by Nielsen Norman Group for years: they provide designers and usability specialists with the better understanding of user behavior and interactions. The eye-tracking experiments show several typical models how visitors usually scan the website. Steven Bradley mentions the following common models in his article.
On the basis of these models, navigation and important data can be placed in the points of the highest visibility. The thought-out visual hierarchy will make the page easily skimmed saving users’ time and energy.
This tip continues the previous point as the header is the zone of high visibility on the webpage. The biggest issue here is to make a decision what links are core, in particular for super-informative websites like multi-topical blogs, large e-commerce websites, and news platforms. Header is a strategic area: users see it before scrolling the page at the earliest seconds of interaction. This way, header becomes a card of invitation and should connect users to the key points of interaction scanned in split seconds.
The content to consider for website header may include:
- basic elements of brand identity: logo, brand name lettering, slogan or company statement, corporate mascot etc
- short headline setting the website theme
- links to basic categories of website content
- links to social network accounts
- basic contact information
- switch of the languages in case of multi-lingual interface
- search field
- subscription field
- buttons or links to interaction such as trial version, downloading from the AppStore etc.
Obviously, not all the mentioned elements are meant for one web page header. If you do that, the header section will be overloaded with data and users won’t be able to focus. Decide on the options strategically important for the target audience and business goals, which may belong to the list above or add other positions.
3. Highly visual branding
In web and mobile interfaces, branding stands for a set of visual elements defining the brand or company style such as logo, typography, brand colors and the like. All together or separately, they may work as a powerful tool for supporting brand recognizability. That is because visual perception is fast and simple: for most people, it’s easier than reading and more memorable than listening to speech. What’s more, if the brand is well-known, its signs seen at the early stage of interaction increase the level of trust.
Sounds like it’s more about business than users, doesn’t it? Not really. Strong branding immediately informs users where they are and what they deal with, saving their time and effort.
Credits: Tubik Studio
4. Numbers, not words
In one of user behavior investigations, Nielsen Norman Blog shared an interesting finding. Eye-tracking studies proved that scanning web pages, user’s wandering eye often stops at numerals. They attract fixations even embedded within a mass of words that users otherwise ignore. We tend to associate numbers with stats, facts, sizes and distance — stuff that may be potentially useful. An eye is quickly hooked with the numbers included in copy while words representing numerals can be missed in the bulk of the text. In addition, numbers are visually smaller than their textual variant. It allows for making the content concise and saves time for skimming the data.
5. Instantly noticeable CTA
CTA (call-to-action) elements are the interactive controls for the action users are called to. Typically presented with buttons, tabs, or links, they are the core factor of conversion, high usability and navigability. In case all the flow of interaction and transitions is built clearly but CTA element isn’t placed or designed properly, users might get confused and will need to take additional effort to achieve their goals. That increases the risk of poor conversion rate and general user experience. Even more, it may lead to the sad situation when your website educates and convinces users but the purchase is done on the other site just because navigation there is simpler. Thus, CTA has to be the object of deep designers’ attention. In any interface, it should be one of the most prominent and quickly noticeable layout elements to inform users how they get what they want.
Credits: Tubik Studio
6. Testing UI icons perception
Icons are pictograms or ideograms supporting successful interaction with a web or mobile interface. Their role in UI navigation can’t be overestimated: they make it much quicker because most users perceive images faster than words. So, recognizable icons are crucial for boosting usability. Nevertheless, even the slightest misperception can have a bad impact on UX so the solutions on the types and performance of icons should be carefully tested and supported with the appropriate copy if it’s needed.
An image is worth a thousand words, isn’t it? In UI it often works that way: images are supportive in setting the mood or transferring the message. In addition, this type of content is not only informative but also emotionally appealing. Original illustrations, prominent hero banners, engaging photos can satisfy multiple goals:
- draw users’ attention
- transfer the message
- complement the general stylistic concept
- set the theme, mood or atmosphere
- demonstrate the core benefits or items.
Credits: Tubik Studio
8. Speaking users’ language
Copy content is vital in communication with users. Its effective visual presentation influences the page performance. As well, the style, structure, and vocabulary should correspond to user’s expectations. If you apply a formal or business-like style in an entertainment app for teenagers, or in contrast – informal style on the luxury website selling the elite real estate, there are chances the copy won’t follow business goals as well as habits and needs of the target audience. Such inconsistency can be confusing or irritating. For this issue, user research will help to set the way users want to communicate in order to strengthen design with the power of words.
9. Gestalt principles power
Gestalt is the term coming from cognitive psychology. It refers to the domain dealing with the laws of meaningful data perception. The information people obtain from the world around looks primarily chaotic, so they subconsciously try to systemize it. It works on different levels of perception, but the visual part is the most interesting for designers. Gestalt principles allow for understanding user’s psychology and behavior better. As a result, exploring the factors influencing visual perception, UX designers come closer to high rates of successful interactions. Also, they lower the level of misunderstandings users could face.
For example, applying the principles of similarity and proximity, you can group the layout elements according to human cognitive abilities and fill the interface with natural prompts. Therefore, it will strengthen convenience and intuitiveness of use.
10. Visual content optimization
There is a big factor which can erase all the benefits of well-crafted UI — the loading speed. Visual content (images, animations, video) which is too heavy or doesn’t perform well on different devices increases the risks to lose users before they feel or see the benefits. Tons of websites and application create high competition, so users won’t wait. They will probably make for the more convenient and quick alternative even if it’s not so attractive or beneficial. As a result, optimization of visual content is the real sign of respect to the user boosting the less time-consuming flow of interaction.
Care for user’s time and energy is one of the vital goals for designers to achieve in the interface they design. This approach is a reliable booster of usability and desirability. The tips given above aren’t reinventing the wheel but they might present a helpful checklist for problem-solving design solutions.
About the author: Marina Yalanska, content writer for Tubik Studio, tech/design blogger and researcher