One of the previous articles here has started the series of posts devoted to Gestalt theory and ways to effectively apply it in UX design. For a brief reminder, Gestalt theory is based on the following idea: when people perceive the complex objects consisting of many elements, they apply conscious or subconscious methods of arranging the parts into a whole organized system instead of just the set of simple objects. It works on different levels of perception, but the visual part seems to be the most interesting for designers creating interfaces. We have already presented the definition of Gestalt theory, the principles of grouping in particular, as well as looked into the principle of similarity for user interfaces. This time let’s discuss the principle of proximity for UX design.

Principle of Proximity

This principle is based on the cognitive tendency to perceive the objects close to each other as related, especially in comparison with those which are placed farther. Having the urge to organize a variety of data and objects around, people often group them this way automatically, much quicker than they start real thinking about it. So for designers, this is another good prompt for how to organize the interface along natural ways the brain absorbs and classifies data. The simple scheme by Andy Rutledge, given below, visualizes the principle of proximity.

Source

The important thing to bear in mind is that via research and experiments proximity proved itself more powerful than other distinctive features such as color or shape, for example. People tend to see elements as related if they are close to each other in comparison to other objects even if other features differ, like another simple scheme below shows.

In user interfaces, which are full of different content, the principle of proximity helps a designer to organize the layout to make it scannable and easily-perceived for users. It’s not a secret that users aren’t ready to spend much time learning how the complex interface works so intuitive screen which can be quickly scanned has much more chances to retain the users and give them the best features of the website or app.

In general, we could define two directions of applying proximity principle in user interfaces: for typography elements and copy content and for blocks of different content and controls. As well as in the previous article devoted to grouping principles, we will support them with examples by Tubik designers.

Typography and Copy

One of the domains in which proximity plays a crucial role is the organization of copy content in user interfaces. Scannability of the copy blocks in the layout is vital because readers don’t usually stay on the pages which look like a long homogenous thread of text. First, most users scan the page and check the hooks like headings, subheadings, highlights, and keywords, and only then read more if they got interested. That is the reason why the copy should be arranged according to the laws of both quick perception and aesthetic looks.

White space, also known as negative space, plays a great role in this process. It allows a designer to activate the power of nothing:  the space without any content not only adds the air to the general layout but can be also used to organize its elements as groups and unities where it’s needed.

For copy content, it can be used in different ways. For example, with white space, a designer can harmonically separate the paragraphs in a big bulk of text to make it more digestible and visually pleasant for readers: this approach is often applied in blog articles and big copy blocks on websites. In this case, the principle of proximity signals that the copy lines which are closer to each other present the unified idea or piece of information and in this way makes all the text structured.

Here’s the interface concept of architecture blog. The principle of proximity works in this UI on several levels. First, it unites the lines of one copy block to be decoded as one piece of information. Secondly, every copy block is placed close to the image it describes so even quick scanning lets the viewer understand that they belong to each other and present the single piece of content in general layout. The call-to-action element – link “See more” – also works according to the principle of proximity being placed a bit farther than the body copy content but close enough to show that it is included in this particular content block. So, we can see that in this case, the designer activated proximity both inside and outside every particular block of content making them harmonically arranged while the general layout structured. Pieces of copy are beautifully composed around the theme illustration and are scannable in split seconds.

This approach also works well for extended lists like menus and catalogs. Proximity applied thoughtfully becomes an effective tool to organize all the positions and group them effectively.

For example, let’s look at Slopes website. The links to the core interaction zones of the websites in the header are quickly perceived as one unified group as they are placed close enough to each other and far from other content. The same works for the extended menu hidden behind the hamburger button: the links are organized in groups that are visually defined due to their close placement. Negative space used according to the principle of proximity strengthens the general visual hierarchy of the page.

Blocks of Content and Controls

One more domain where proximity can have a positive impact on user experience is an organization of diverse content blocks in the layout: except copy, these can be images, links, icons, controls, CTA elements, products cards and loads of other stuff. The principle of proximity allows designers to arrange these blocks in a way which most naturally corresponds to natural human abilities of visual perception.

For example, here’s the e-commerce app for a jewelry store. The right screen shows the product card: we can see that the general data about the item – color, width, weight, and material –  is given in several lines which are close to each other and therefore are naturally perceived as a unified piece of content. At the same time, the detailed description of the item presenting quite a considerable piece of writing is placed further and in that way separated a bit from the data file. So, these content blocks don’t merge and users can easily differ key data from the detailed description.

Here’s another example, grounded heavily on the principle of proximity – a layout of an online magazine. All the content and control blocks are arranged on the basis of the broken grid and without any frames separating them from each other. The proximity of the elements allows users to quickly define core content zones: the set of links in the header, the list of the latest publications on the left, the field of the preview for the fresh article, and the block of social network links in the footer. Moreover, inside this global block, the principle of proximity continues to separate or unify the elements: according to it, the designer arranges the positions in the list of latest publications around different topics as well as separates the links to the web pages in the header from the controls of instant action such as search or subscription. This approach not only makes the layout elegant and scannable but also strengthens intuitive navigation for better usability.

Although we have just started revising Gestalt theory usage in design, it’s already obvious that knowing these simple yet effective principles can save much effort for users and support user-friendly interfaces with mechanisms that work according to human cognitive abilities and psychological patterns. Follow the updates to check the explanations and examples for other grouping principles: symmetry, continuation, closure, and others.

Recommended Reading

Gestalt Theory for Efficient UX: Principle of Similarity
Cognitive psychology for UX: 7 Gestalt principles of visual perception
Design Principles: Visual Perception And The Principles Of Gestalt
Improve Your Designs With The Principles Of Similarity And Proximity
Gestalt Theory of Visual Perception
Gestalt Principles: How Are Your Designs Perceived?

Originally written for Tubik Blog

Сообщение Gestalt Theory for UX Design: Principle of Proximity in Interfaces появились сначала на Design4Users.

What is information architecture in UX?

Information architecture in design can be defined as a science of structuring content of the websites, web and mobile applications, and social media software. The science aims at organizing content so that users would easily adjust to the functionality of the product and could find everything they need without big effort. This way you can form a skeleton of a layout ensuring the sufficient user experience. Information architecture is a guarantee of a high-quality product since it reduces the possibility of usability and navigation problems. IA skills are essential for professional designers since UX and information architecture go hand in hand on the way to create a user-friendly product with a clear navigation system.

Keep product goals in mind

Definition of product goals is a core stage that influences every team working on the project, be it developers or designers. So, before you start building the website information structure, you need to learn what your client expects from the website or mobile application. To achieve the product vision and see the whole picture, the product goals should be established. They should respond to the product strategy, be understandable to all the members of the creative team, and achievable. Awareness of the goals gives a clear idea of what the tasks are and where to start. When the goals are set, designers can agree on the content elements and the purposes with the clients so that they could avoid possible misunderstandings resulting in additional work hours in the future.

Conduct user research

IA experts consider the specifics of the target audience needs because IA puts user satisfaction as a priority. To learn more about potential users, designers are recommended to conduct user research. It’s a process of collecting information about the consumers of the product via various techniques. When the data is gathered, the design team analyzes it and works on the optimal solutions which will make the product user-friendly and attractive.

User research helps to dive deep into the details of the core target audience to understand their needs and psychological peculiarities. Considering the preferences of the users, designers are capable of creating a user-friendly product that will stand out from the crowd and draw potential customer’s attention.

Consider cognitive psychology principles

To comprehend the nature of the visual perception and the factors affecting users’ attention, designers learn the сognitive psychology principles. It is the science studying information processing that goes inside people’s minds. Cognitive psychology experts state that there are various ways of data perception and different factors influencing people’s attention.

Based on cognitive psychology studies and principles, designers developed many techniques helping to create powerful content. In article Psychology in Design, we described some effective psychological principles often applied in design including Gestalt principles and recognition patterns. The former theory explores users’ visual perception of elements in relation to each other. In other words, it shows how people tend to unify the visual elements into groups according to their similarity, continuation, or closure. Speaking of recognition patterns, people visiting a website or using an application are expecting to see certain features associated with the definite kind of product. That’s why designers apply various recognition patterns to help users be oriented in the structure.

Plan the navigation system

Information structure and navigation are two essential components of any digital product. In one of our UX Glossary articles, we’ve defined navigation as the set of actions and techniques guiding users throughout the app or website, enabling them to fulfil their goals and successfully interact with the product. The navigation system, in terms of IA, involves the ways how users move through content.

Navigation of a digital product is based on the information architecture, so it’s vital to make sure it reflects and supports IA, otherwise the product may be unsolid. Therefore, designers are recommended to plan the navigation system while creating the information architecture of the product.

Don’t forget about visual hierarchy

To organize and prioritize content in interfaces clearly for users, designers apply a well-known technique called visual hierarchy. Its main goal is to present the content on the carrier, be it a book page or poster, web page, or mobile screen, in such a way that users can understand the level of importance for each element. It activates the ability of the brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment, etc. This allows users to see where the needed information is so that they could navigate easily.

Visual hierarchy plays a significant role in the visual performance and readability of the copy content in digital products. Giving tips on applying copy content in UI, we distinguished core aspects helping to build powerful visual hierarchy. One of the essential points to consider for designers is scanning patterns. Lots of studies have shown that before reading a web page people scan it to get a sense of interest. According to different studies, including the publications by Nielsen Norman Group as one of the pioneers of this field, the UXPin team, and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns. Detailed information about scanning patterns you can find here.

Knowing the principles of visual hierarchy, designers can create effective information architecture placing the key components of the content on the most scanned spots making users take expected actions.

Things to consider

The science of information architecture may seem too complicated and demand much efforts but when you learn its basics and start applying them in design projects, you see how useful it is. Summing up the set of Tubik articles devoted to this theme, we’d like to single out a few main points.

• IA forms a skeleton of any design project for a digital product. Visual elements, functionality, interactions, and navigation are built according to the information architecture principles.
• Powerful IA is a guarantee of a high-quality product since it reduces possible problems of poor usability and navigation.
• Good information architecture is a foundation for efficient user experience.
• Information architecture is like a blueprint of the layout which needs to be generated by a visual scheme like a wireframe.
• Defining product goals is a core stage before IA creation.
• User research and cognitive psychology principles assist in predicting possible users’ reactions to the product and creating a user-friendly outcome.
• Clear visual hierarchy plays a significant role in the visual performance of the content.

Useful reading

Basics of Information Architecture for Designers

Information Architecture: Techniques for Designers

UI Design: How to Choose Between Light and Dark Theme

Best Practices on Effective Visual Hierarchy

Feel at Home. Tips on Effective Home Page Design

Originally written for Tubik Blog

Сообщение How to Apply Information Architecture in UX: Tips for Designers появились сначала на Design4Users.

In our earlier article we have already analyzed the factors that can influence the choice of general color scheme and basic background color as well as mentioned some important points to consider in the process. This time we will concentrate on more detail on the strong and weak sides of the dark-colored design for websites and mobile applications. Experience of practical work on creating and testing diverse user interfaces in Tubik Studio has proved that dark background can be powerful and appealing solution providing positive user experience. Let’s just take it for granted and discuss when and where we can make it work at maximum.

Visual perception of dark

One of the polls whose results were published rather long time time ago, in 2009, in ProBlogger already features some interesting points. The readers were asked what sort of background they prefer on blogs. Almost half of the readers answered that light background is preferable – and that is reasonable as blogs are traditionally text-driven, so the aspect of readability outweighs the others. However, 10% of respondents answered that they prefer dark backgrounds, and more than one-third mentioned that the choice should depend on the blog nature and content. Such a big proportion of users should not be neglected by designers in the process of looking for design solutions. Moreover, in the case of less text-driven content concentration in a digital product such as a website or application the proportion can become even bigger. This is a good example showing that user research and surveys should be an important part of the design process. Knowing what users want or at least what they are ready for can push the limits of traditional vision.

The scientific research provided around the issue by Richard H. Hall and Patrick Hanna highlights the important point about visual perception of the background color and its performance. Having analyzed practical experiments by different scientists done earlier in the sphere of web pages performance and readability, the authors sum up: “They found that combinations with positive polarity resulted in better performance (that is dark text on light background), and, as with studies mentioned previously, the greater the contrast between color combinations the better the performance.” Therefore, the dark-colored background can be as efficient as light-colored in the case when other aspects, in particular contrast and legibility of the layout elements, are designed and tested appropriately. The research contains a lot of interesting and useful information based on user testing in the perspective of different color combinations and their effectiveness, so it is highly recommended to designers.

Website on cooking seafood

The aspect of readability

One of the famous gurus of user experience design Jacob Nielsen mentioned: “Use colors with high contrast between the text and the background. Optimal legibility requires black text on white background (so-called positive text). White text on a black background (negative text) is almost as good. Although the contrast ratio is the same as for positive text, the inverted color scheme throws people off a little and slows their reading slightly. Legibility suffers much more for color schemes that make the text any lighter than pure black, especially if the background is made any darker than pure white.”

Indeed, readability is the vital aspect influencing the performance of the product and it deals not only with text. It goes beyond the limits of copy and means that all the meaningful symbols including letters, numbers, pictograms, and icons should be noticed and recognized easily in the interface. Thus, the designer choosing in favor of dark background should be prepared to especially thorough selection and testing fonts, icons, and images on different devices.

Website for a bakery

Best web and app design practices, for example, the collection of Best black websites on Awwwards feature loads of successful design solutions which, using the dark background as a basis of color scheme, still don’t suffer from low readability. To avoid this problem, during the design process it is important to remember:

– dark background absorbs some part of the light from the other elements so there should be enough empty space or “air” between the elements;

– length of the line can make copy bulks more readable and digestible for users;

– the issues of interlinear space design, as well as the length of the text line, can have a great impact on readability, especially on a dark background, so paragraph size, kerning and leading should be thought over carefully;

– dark doesn’t always mean black so in every particular case of design it is reasonable to take some time testing different sorts of dark backgrounds and colors presenting the content, being open to experiments;

– shades, gradients and glows can influence readability;

– sans-serif fonts are usually more legible while serif fonts look more elegant, applying this factor in practice can enhance the readability of the content.

BuonApp UI

The aspect of contrast

One more interesting thing to consider in the aspect of visual perception is the table presented by webdesign.about.com. The table demonstrating levels of contrast and performance of different color combinations features the interesting fact: black part of the table is the only one that provides good contrast with practically all the colors. Tested carefully in every particular case of design interface, this factor can be the reason to try dark background as a variant of design solution.

In the aspect of readability, contrast is also one of the factors able to make the content more recognizable and legible.

One of earlier investigations of the aspects of contrast and readability states such a tip: “With a dark background, ensure you do not have overly-bright lettering: tone down white lettering to a pale gray, or dull the color used to minimize extreme contrast and glare; this principle is used when doing slides, as well: at least 5% gray is used to cut the glare of bright white. Interestingly, this still “reads” as white. Also, make the text bold, so it has enough body not to be “eaten alive” by the darkness.” This test, as well as others, can provide new variants of toning in providing efficient and natural content on a webpage or app screen.

One more thing to mention is that dark background being somehow heavier and deeper usually provides great opportunities for presenting graphic content such as pictures, photos, illustrations, posters, and ads. Good composition and following the principles of the visual hierarchy can significantly enhance visual perception of this sort of layout elements. This factor makes dark background highly efficient and attractive in cases when the interface is based more on graphic material than on copy.

Recipe App

The aspect of emotional perception

Color psychology is another thing to consider choosing a background that will be not only the effective field of presentation but also the carrier of its own message. Dark colors are usually associated with elegance and mystery. Moreover, black is often associated with elegance, formality, prestige, and power. That is, perhaps, one of the reasons why many powerful brands build their visual presentation around the black-and-white scheme with dark dominating and light presenting and informing the recipient. Playing out this aspect in interface design can provide additional support to other design solutions and general presentation of the product.

Museu App

Benefits of dark background

According to all the points mentioned above, we can sum up that dark background applied in user interfaces can provide essential benefits, among which:

• style and elegance
• feel of mystery
• luxury and prestigious look
• broad field of using contrast
• support of visual hierarchy
• depth in reflection of presented content
• visual appeal

Architecture Firm Website

Points to consider

On the other hand, dark background requires thorough attention and analysis of the smallest details which can get lost in the layout if they are not presented properly. Among them we should consider:

• User research. Practical surveys, theoretic investigations and experiments are important sources of data about the target audience, its wishes and expectations that is the basis for choosing effective and attractive design schemes.
• Competition research. Market research of close competitors gives understanding which design solutions have already been applied by other players on the market and this factor influences choosing original design solutions to make product noticeable.
• User testing. Dark background being more vulnerable in the aspects of readability and legibility should be rigorously tested on all the sorts of devices and in diverse resolutions.
• Environment factor. Analysis of typical conditions in which the product will be used by target audience can provide additional reasons for or against the option of dark background.
• Amount of content. The number of elements and blocks which have to be featured on the screen or web page can influence the decision around the background: darker backgrounds leaving too little space between elements are extremely hard for perception.
• Nature of content. Dark background can feature better performance for interfaces based on graphic elements rather than big bulk of copy to read.

Social Network App

Recommended reading

The issues of applying dark background in user interfaces have been an object of professionals’ attention lately. In terms of design issues, we could recommend the following articles for those who would like to know more:

The Impact of Web Page Text-Background Color Combinations on Readability, Retention, Aesthetics, and Behavioral Intention

Visual Perception: An Introduction

Art and Visual Perception: A Psychology of the Creative Eye

Colour Choices on Web Pages: Contrast vs Readability

The Dos and Don’ts of Dark Web Design

Originally written for Tubik Blog

Сообщение Dark Side of UI: When Dark Is Good for Users появились сначала на Design4Users.