Kinds of Visual Dividers

Talking about dividers, we can analyze them in two aspects: their appearance and their functions. Starting with the visual part, there are five basic and broadly used methods of dividing content in user interfaces:

• lines
• color
• negative space
• shadows/volume
• images.

Lines

Lines have belonged to the top methods of separating the pieces of content since time immemorial, both in print production and in digital interfaces. They are recognized easily in this role, so users won’t need to think twice.

On the other hand, this type seems to be super simple and far from original. So, quite often, designers strive to find other ways of content separation. What’s more, it is recommended to use lines only if the content cannot be effectively divided in another way. Too many lines can overload the screen with visual noise and create unnecessary visual tension.

The mobile version of the Nonconventional Show website uses lines to divide different sections in the menu.

The product page for a website devoted to zero-waste living uses horizontal lines as visual dividers to clearly organize different information about the item.

The webpage of the scientific platform uses horizontal lines to separate different content blocks and make their structure easily scanned.

The ecommerce website of a tea brand uses different levels of visual separation of the content, from the simple horizontal line to separate the pricing and CTA element to a kind of table with an irregular grid look for the information about the item, a regular table look for the items in the website header and color contrast to separate visual content from text content.

Negative Space

Negative space (aka white space) means empty space on the screen around and often inside the elements. Yet, empty doesn’t mean passive or wasted: as well as any other element of the screen, it works supporting a positive user experience. Negative space is one of the most popular kinds of visual dividers, especially in interfaces built on the idea of minimalism and simplicity. Spiced with the knowledge of Gestal principles of visual perception, for example, proximity and similarity principles, negative space turns into an effective and elegant visual divider that also lets the interface breathe and avoid clutter.

Education app design demonstrates the elegant approach to unit arrangement via a well-balanced negative space.

The travel planner app separates the items in the list without any additional visual elements, just with white space.

The Health Blog list of articles is based on typographic hierarchy and negative space to make them look like a clear set of items without stealing the air from the layout.

Color Contrast

Another effective type of visual divider is color contrast. Color choice and combinations in UI design have great psychological potential: they are able to strengthen the message and content of the website, creating the appropriate mood. Contrast is one of the key factors influencing the scannability and visual hierarchy of the page or screen. With all that, color contrast can effectively separate different options, items, or interactive zones, which means working as a visual divider. That is the reason why split screens have been so trendy in recent years. And that may explain the popular approach of organizing landing pages and single-page websites along the content blocks presented on contrasting color backgrounds.

The landing page concept for Momatu divides content with different color backgrounds.

The Nonconventional Show website design employs bold color contrast to arrange the content more engagingly and dynamically.

The mobile menu concept is based on color contrast to make the items clearly distinguished.

Even in pastel elements like this one, the power of color contrast is clear: it helps to divide the page on the hero section with the CTA and the active section of the menu. Also, pay attention to the vertical lines used as visual dividers for menu items: together with slightly seen images, here they also work as directional cues and help to avoid the illusion of completeness on the page.

In the website design for GNO blankets, the color contrast helps to divide the long webpage into digestible and elegant blocks of content.

Shadows and Volume

Shadows and volume, which are usually reached with the effect of visual elevation of a part of the content, may also work effectively as dividers. They create a feeling of depth and separate the page into several layers that often look natural and harmonic to the human eye. On the other hand, it looks less obvious and noticeable than lines, so this approach may be helpful in achieving balance and legibility of the particular items without too much visual noise or distraction.

Music Learning application uses the effect of volume to make items look clearly divided in a list of tracks.

The catalog screen presenting the items in stock uses drop shadows this way giving the layout more depth and clearly separating the cards from each other.

The mobile app for buying customized bouquets also divides the positions in the catalog with a card standing out from the background. This way the content looks clear and interactive in the interface that looks all light and airy.

Images

Images of all kinds present one more effective visual divider. In this role, they are especially popular in the interfaces with lots of text content, for example, blogs, online media, and text-based landing pages. Photos, illustrations, 3D graphics, as well as animated images, help to balance the text content, increase scannability and readability levels, effectively divide the visual blocks, as well as add fun and emotional appeal.

The university website uses images and videos not only to set the atmosphere but also to divide different blocks of content.

The landing page for the cryptocurrency report uses catchy blocks of 3D graphics with an animated Learn More call-to-action. This way, the theme blocks are also clearly separated.

The menu screen for the restaurant app uses images as a crucial element in dividing the options.

Functional Types

The functional types of visual dividers depend on the hierarchy levels they work at.

Full bleed dividers

Full bleed dividers are the ones that separate the sections and span the whole length of the screen layout.

Astrology website uses full-bleed dividers to separate blocks of content.

The gallery app uses horizontal lines as dividers in the catalog of artists.

The Perfect Recipe app uses full-bleed dividers to separate the recipes.

The finance app uses slight, barely seen full-bleed dividers to separate the items in the list of expenses.

The cinema app uses full-bleed dividers on the check-out screen.

Inset dividers

Inset dividers separate the items of related content, anchored by elements that align with the app bar title or adjust to the specific kind of text content on the page.

The website of the construction features the part with specs that uses horizontal lines as inset dividers.

The Spa Space website uses lines to organize the options on the menu page elegantly.

Dividers with subheaders

In some cases, you can pair dividers with subheaders to identify a block of grouped content. In this case, the divider should be placed above the subheader to make the subheader’s connection to content more obvious.

Middle dividers

These are usually dividers placed somewhere in the middle of a layout, for example, to separate related content, such as prices on a receipt.

The product page for the ecommerce website selling herbs features the middle divider to clearly separate the check-out interactive zone from the text content describing the product.

Points to consider

Choosing the type of visual divider for the layout you design, you’d rather consider two essential factors.

Subtlety: dividers shouldn’t yell for users’ attention and shouldn’t distract users from the content itself. The goal behind the divider is to support and make the layout clean, not to catch attention. So, make them noticeable but not annoying.

Moderate Frequency: as was mentioned above, too many visual dividers, especially if they present the additional element of the layout like lines do, can create visual noise and make the user interface tiring for users. So, thinking over the type, think twice or seven times more. Prefer negative space to lines where it’s possible; don’t overplay with colors; strive for harmony and consistency.

As the examples above show, designers tend to find an effective combination of visual dividers that would effectively organize the content on the webpage or mobile screen.

Useful Articles

Here’s the set of articles on more aspects and best practices of user experience design.

Directional Cues in User Interfaces

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

The Anatomy of a Web Page: Basic Elements

3C of Interface Design: Color, Contrast, Content

Negative Space in Design: Practices and Tips

How to Make Web Interface Scannable

How to Use Hero Images in Web Design

Light or Dark UI? Tips to Choose a Proper Color Scheme

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение How to Use Visual Dividers in User Interfaces появились сначала на Design4Users.

Functional minimalism

Quite a big number of mobile applications and websites continued and evolved design solutions based on the principles of minimalism. Minimalist interfaces are characterized with thorough attention to visual elements, not numerous but always transferring a particular message.

Major features often mentioned in terms of minimalism approach include:

• Simplicity
• Clarity
• Expressive visual hierarchy
• High attention to proportions and composition
• Functionality of every element
• Big amount of spare space
• High attention ratio to core details
• Typography as a significant design element
• Eliminating non-functional decorative elements

Surely, the list can be continued but even the given positions show that minimalism in UI appears to be a user-friendly trend. Applied wisely, it helps to see the core elements of the interface and makes user journey intuitive and purposeful. Moreover, minimalist interfaces usually look sophisticated and uncluttered bringing aesthetic satisfaction as one of the factors of desirability in UX.

WineYard App

Brutalism

The trend of brutalism in digital design started rocketing last year and got even brighter expressions in 2017. It is often described as a style that aims at breaking standards and predictable design techniques. The websites created in this manner are a sort of rebellion to sophisticated designs with thought-out symmetry and harmony, complex layouts, and accents of aesthetic visual performance. In contrast, brutalism is based on simple and raw appearance, in most cases not loaded with many visual details and sometimes even close to a plain HTML page. Being used thoughtfully for the appropriate goals and audience, it features a high level of originality and gives the unique look to a digital product. It may be liked or disliked, but it is never left unnoticed.

Typography integrated into images

Bold and catchy typography also kept its high presence both in web and mobile layouts. This year it got a new breath with a widely spread technique of cutting or inscribing the title keyword or a headline into the visual elements on the page. The approach strengthens the harmonic integrity of the layout elements and makes typography felt tightly united with everything in the interface.

Big City Guide

Animated hero banners

In web design, hero banners are big images catching user’s attention in the first seconds of interaction with a website. They usually contribute much to the attractive visual presentation of the main content. Hero banners proved themselves as highly effective in setting the mood or transferring the message. Moreover, as well as any other striking graphics on web pages, this is a kind of content which is both informative and emotionally appealing. Prominent hero banners can satisfy multiple goals such as:

• catch users’ attention
• transfer the message visually
• support the general stylistic concept
• set the needed theme, mood or atmosphere
• demonstrate the core benefits or items effectively.

This year they were often strengthened with original animation breathing life into images and making them even more engaging.

Dance Academy Landing Page

Custom theme illustrations

Accomplished in different styles and complexity level, custom illustrations are actively covering more and more space on web and mobile UI, adding the quick perception of the information and setting the solid ground for originality. Web and mobile interfaces apply custom mascots, icons and  illustrations to enhance the looks of a page or screen as well as boost usability and intuitive navigation. In addition, images improve the accessibility of UX design pushing the limits of perception for users who have natural problems with text recognition such as, for instance, the dyslexic or non-reading preschoolers.

The highest diversity here, perhaps, was featured in theme illustrations supporting websites and apps. They appeared to move to the next level, becoming more complex, sophisticated, stylish, and metaphorical.

Financial Service Website

Unframed layout

Big background images or patterns without any frames have been observed quite frequently in the web interfaces this year. It allowed users to feel the layouts more airy and spacious while the background image deeper and stronger not breaking the interaction with the feeling of boundaries or limits.

Big City Guide

Variety of interface animation

As well as in the previous year, 2017 didn’t experience any loss in the issue of interface animation. Not only does it add life and motion to the interaction process but also significantly improves usability. User experience becomes more informative and engaging while manipulations with the elements of interaction get more clear and respond to the user in an understandable way. So, this year designers worked well on a variety of buttons, tabs, charts, preloaders and scroll animations.

Watering Tracker App

UI-friendly branding

2017 could be definitely mentioned as the year of rebranding: a big number of global and local companies, products, and brands changed their logos mostly towards simplification of forms and details. One of the reasons for the trend was striving for better usability and navigability of brand elements as more and more businesses competed for the higher online presence. So, both new and redesigned logos were created to be more UI-friendly and effectively perceived on a variety of digital devices and layouts. Furthermore, animated logos became a trend making symbols more interactive and strengthening brand awareness.

Whizzly Logo Animation

Monochrome UI

Growing interest in minimalistic design for maximum functionality resulted in a considerable presence of monochrome UI solutions. These layouts usually look stylish, harmonic and non-distractive. However, designers have to invest much time and effort to make them not boring while the core elements of interaction instantly visible.

Jewellery E-Commerce App

Progress of dark backgrounds

Mobile and web interfaces applying color palette with dark background have not only saved but also grown their presence. In particular, they are often applied in digital products based on visuals rather than copy. Dark backgrounds are traditionally associated with grace and prestige, they deepen the perception of images and can make the interface less contrast and more natural to see in different environments. Moreover, this approach now corresponds to preferences and expectations for quite a broad target audience who like this style.

Cinema App

Light space for copy

Another trend got especially popular for interfaces based on the dark background scheme. It featured one more approach to proper readability in them which is often the issue of debates: applying boxes or spaces with a light background for core data blocks, designers solve this problem and add elegant contrast to the screen or page.

Watering Tracker App

Sophistication and contrast in fonts choice

With numerous new fonts created around, user interface designers have a broad field for creative experiments. Today typography is seen as not just the means of communication and sending a message to the user but also an integral part of all the design concepts. So, professionals pay much attention to the choice and combination of fonts. This year we experienced new approaches to setting contrast with serif and sans-serif fonts making them work for strong visual hierarchy and appealing beauty of the interface.

The Gourmet Website

Experiments with grids

With over a billion websites coming into play, designers have to be more and more creative to make them both attractive and original. So, experiments with grid also won their place in the list of general design trends of the leaving year. The custom grid is the way to save the feeling of harmonic layout and placement of the elements with a higher level of flexibility and originality. However, this sort of creativity requires thorough research while the effective result often comes via several iterations tested and analyzed in terms of usability and visual perception.

Variety of landing pages

No doubt, this year landing pages have witnessed the new lap of their development and diversity. Businesses and social projects tend to use them regularly for effective presentation of special services, sales, offers, or issues striving for focused user’s attention. Landing pages also have proved themselves as an effective method of promotion for native mobile apps. Based on user and market research as well as testing, they can be defined as a user-friendly trend, providing necessary information and interactions in clear and accessible way saving users’ time and effort. From the business perspective, they also work well, giving companies the flexible tool for original and effective communication with better targeting.

Digital Agency Landing Page

Creative parallax

With more accessible and improved tools for motion design,  scroll animation saved its positions of broadly applied technique both for in web and mobile. Creative and original parallax enhances scrolling experience making it natural for the human eye and adding grace for such a basic operation.

Mood Messenger Landing Page

Promo videos for web marketing

Different types of promotional videos were boosted to appear on screens and pages. No wonder as they serve efficiently for marketing goals and increase brand awareness. A creative and catchy video is a good way of attracting customers’ attention and the proven method of informing them quickly and brightly. A video activates several channels of perception — audio, visual, sound — simultaneously, and enhances them with the power of storytelling. All the mentioned factors tend to make the presentation via video strong and memorable especially if based on high-quality graphic design and animation. People are daily overloaded with tons of information of all kinds, so most of them aren’t ready to devote much time learning about products or services, especially the new ones. In these conditions, videos have become the way of communication which is dynamic, informative and attractive. However, the issue of loading speed for a webpage moves forward and should be tested carefully for on different devices.

Promo video design for Binned

Gamification mechanics supporting UX

This year has witnessed a growing interest in gamification applied in a variety of interfaces, not only for entertainment but also for utilities and business products. In the tech world, the word “gamification” stands for the technique of exerting game mechanics into the non-game environment, such as websites and mobile applications. Challenges, rewards, points, badges, leaderboards and other stuff of this kind help designers to think over the ways of effective user motivation and retaining.

Upper App

Boxes and cards as layout elements

One more trend in UX design of 2017 moved around the diversity of cards and boxes in web and mobile layouts. They played their essential role in setting visual hierarchy and making the pieces of information quickly scannable. Moreover, they successfully contributed to the general harmony and shapeliness of a page or screen.

StarDust Biker Website

Geometric elements as a part of style

Supporting the previous trend, geometry vibes got featured in many interfaces this year. Variety of simple and complex shapes, patterns, lines and curves has been found in numerous design solutions on both traditional and innovative combinations.

Wedding Theme

Experimental color palettes and combinations

The trend of color probes hasn’t lost its popularity, bringing out new original combinations. No wonder, color is one of the most powerful ways to add quickly perceived message and mood to an interface as well as make its looks original and attractive. Anyway, effective color experiments are not just pure creativity: even the most creative and surprising combinations are based on the knowledge of color theory, color psychology and virtuosity of user interface designers.

Book Swap App

No Lorem Ipsum

This year has continued the increasing attention to content quality and performance. In user interfaces, content and design and interconnected: creators have to make them successfully support each other instead of fight for users’ attention. That’s why today more and more designers prefer real content instead of well-known Lorem Ipsum, even in cases of initial ideation for design concepts. It gets designers, clients, and content makers closer to real experience and natural feel of interactions.

Dating App Landing Page

No doubt, 2017 was the year of diversity in interface design – and this can be called one of the most user-friendly trends. Every day millions of users, having different tastes and preferences, various favorite styles and characters, particular feelings of what is comfortable and looks nice for them, use simple and complex apps and websites as a part of their routine. The more variants of looks and features will be designed, the wider range of diverse options that endless global community of technology users will get to find the one which fits their specific needs and wishes. Anyway, soon we’ll see what the next year will bring out and what new creative challenges it will set for UX designers.

Originally written for Tubik Blog

Сообщение Review of Prominent UI Design Trends in 2017 появились сначала на Design4Users.

In the book “The More of Less”, Joshua Becker said: “You don’t need more space. You need less stuff.” Minimalism is often discussed nowadays in different spheres of life and work, and diverse directions of design are not the exception. Let’s see what are its benefits and points to consider.

What is minimalism?

Actually, minimalism is a word of broad meaning used in various spheres of human activity. Merriam-Webster dictionary defines it as “a style or technique (as in music, literature, or design) that is characterized by extreme spareness and simplicity”. Being applied to more and more fields, it saves its core traits: meaningful and simple.

Minimalism as a direction of visual design got especially popular in the 1960s in New York when new and older artists moved toward geometric abstraction in painting and sculpture. The movement found its impression in the artworks associated with Bauhaus, De Stijl, Constructivism and so on. In diverse spheres of visual arts, key principle of minimalism was leaving only essential part of features to focus the recipient’s attention as well as support general elegance. Lines, shapes, dots, colors, spare space, composition – everything should serve its function being thoughtfully organized. Today we can meet minimalism in a variety of life spheres: architecture, arts, photography, all kinds of design, literature, music and even food presentation.

“A shape, a volume, a color, a surface is something itself. It shouldn’t be concealed as part of a fairly different whole. The shapes and materials shouldn’t be altered by their context”, said Donald Judd, an American artist associated with minimalism. Working in this style, designers seek to make the interfaces simple but not empty, stylish but not overloaded. They tend to use negative space, bold color and font combinations, and multifunctional details making the simplicity elegant. The line dividing simple and primitive is very thin. That is why not all the designers take the risk of trying this direction: some may think it looks too decent, the others don’t find enough ways to show much with fewer elements.

Architecture Blog

Characteristics of minimalism

Main features of minimalism often mentioned by designers include:

• Simplicity
• Clarity
• Expressive visual hierarchy
• High attention to proportions and composition
• Functionality of every element
• Big amount of spare space
• High attention ratio to core details
• Typography as a significant design element
• Eliminating non-functional decorative elements

Surely, the list can be continued but even the given positions show that minimalism in UI sounds like user-friendly trend. Applied wisely, it helps users to see the core elements of the interface and makes user journey intuitive and purposeful. Moreover, minimalist interfaces usually look sophisticated and uncluttered bringing aesthetic satisfaction as one of the factors of desirability in UX.

Dance Academy landing page

Practices of minimalism in digital design

Today minimalism is one of the wide-spread trends in the design of websites and mobile applications. Main points to consider can be described in the following practices.

Flat design

As we mentioned in one of our previous articles, flat design became a great supporter of minimalism in modern digital products. The most prominent feature of this direction is applying flat 2-dimensional visual details as the opposite of highly realistic and detailed skeuomorphic images. Flat images usually use fewer elements and curves, avoid highlights, shadows, gradients, or textures. This approach allows creating images, buttons, icons, and illustrations which look neat in different resolutions and sizes. It lets designers enhance usability and visual harmony of user interfaces.

However, the terms “flat” and “minimalist” shouldn’t replace each other which often happens today. They are not the same. “Flat” deals with the style of icons, illustration, buttons, and other visual elements of the interface in the aspect of gradients, textures, shadows, etc. “Minimalist” has a much broader meaning and deals with the layout in general, its composition, color palette, contrast and all the techniques of visual performance applied to it. So, flat can be described as one of the design techniques applied in the minimalist approach to creating interfaces.

Cafe Coupon App

Monochrome or limited color palette

Color is a feature of great potential in the design of interfaces as it can set both informative and emotional links between the product and the user. Designers working in minimalism tend to take the maximum from color choices, and in most cases, they limit the color palette to monochrome or minimal set of colors. This strengthens the chosen colors and doesn’t distract users with too much variety. Such an approach is efficient in interfaces concentrating users’ attention on particular actions like buying, subscribing, donating, starting to use, etc. Moreover, from the psychological perspective, the colors usually transfer particular associations and emotions perceived by users, so limited palette makes chosen colors stronger in this aspect.

Slopes Website

Bold and expressive typography

Typography in minimalistic design is seen as one of the core visual elements of not only informing users about the content but also setting the style and enhancing visual performance. Choosing the way of concise use for graphics, designers usually pay much attention to the choice of typography and never hurry in testing the pairs, sizes and combinations. As well as color, fonts and typefaces are seen as a strong graphic element contributing to general elegance and the emotional message it sends. On the other hand, readability and legibility do not lose their leading positions in the matter of choice.

Upper App

Choice limitation

One of the strong sides of minimalism in interfaces is enhanced user concentration. Being focused on functionality and simplicity, the pages and screens of this kind don’t usually overload users attention with decorative elements, shades, colors, details, motion, so in this way, they support high attention ratio and often let users quickly solve their problems and navigate through the website or app.

Birds of Paradise Encyclopedia

Prominent theme visual elements

Working on minimalist UI, designers do not apply many images, but those which are chosen to be used are really prominent, catchy and informative. This approach results in the long and thorough search of the “right” image which would cover all those functions and set the required mood instantly. The photo or illustration itself has to follow the principles of minimalism, otherwise, the choice of the wrong image can ruin all the layout integrity.

Architecture Firm

Concise and intuitive navigation

Navigation in minimalist interfaces presents another challenge: designers have to prioritize the elements rigorously in order to show only the elements of the highest importance. There are different techniques to hide the part of navigation, but doing this, it’s vital to ensure that users will find what they need easily. That is one of the reasons why minimalist approach can be criticized: not being presented properly and tested enough, solutions like hamburger menus and hidden layout elements can leave some users lost in the journey around the website. Obviously, it is not the good ground for positive user experience, therefore every solution about navigation should follow the philosophy “measure thrice and cut once”.

Adding air and using negative space

White space (also called negative) in digital design is the term which is more about space rather than color. In minimalism, it is one more effective way of adding elegance and marking out the core elements. Also, in terms of monochromatic or limited color palette, white or negative space plays a big role in creating enough contrast and supporting legibility.

Ice Website

Grids

Grid system in minimalist interfaces can be effective for making the layout look highly-organized, especially if the website presents a lot of homogenous content. Another benefit is that grids are responsive-friendly.

The Big Landscape

Contrast

Following the philosophy of limits and simplicity, minimalism depends much on contrast as a tool of good visual performance. The choice of colors, shapes and placement are often based on the contrast as the key feature.

Bjorn Website

Well, it’s easy to see that minimalism has a great number of benefits and presents a good approach to creating user-friendly interfaces. However, it doesn’t mean that minimalism should be applied everywhere: every goal should be achieved by the proper means. One thing is for sure: the more minimalistic is the interface, the more time and effort the designer should invest to make it clear and functional. Elegance and beauty of minimalism should support the global aim of providing positive user experience.

Recommended reading

The Characteristics of Minimalism in Web Design

The How and Why of Minimalism

6 Steps to Perfecting Minimalism in Web Design

Functional Minimalism for Web Design

Originally written for Tubik Blog

Сообщение Lean and Mean: Power of Minimalism in UI Design появились сначала на Design4Users.

What’s information architecture?

Information architecture (IA) is a science of organizing and structuring the content of the websites, web and mobile applications, and social media software. An American architect and graphic designer, Richard Saul Wurman, is considered to be a founder of the IA field. Today, there are many specialists working on IA development who have established the Information Architecture Institute. According to the IAI experts, information architecture is the practice of deciding how to arrange the parts of something to be understandable.

Information architecture 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. The content structure depends on various factors. First of all, IA experts consider the specifics of the target audience’s needs because IA puts user satisfaction as a priority. Also, the structure depends on the type of the product and the offers companies have. For example, if we compare a retail website and a blog, we’ll see two absolutely different structures both efficient for accomplishing certain objectives. Information architecture has become a fundamental study in many spheres including design and software development.

The role of information architecture in design

Nowadays, when the user-centered approach in design is a top trend, many designers learn the principles of information architecture science which they believe is a foundation of efficient design. IA forms a skeleton of any design project. Visual elements, functionality, interaction, and navigation are built according to the information architecture principles. The thing is that even compelling content elements and powerful UI design can fail without appropriate IA. Unorganized content makes navigation difficult and inexplicit, so the users can easily get lost and feel annoyed. If the users face first bad interaction, they may not give the second chance to your product.

Many companies don’t see the importance of information architecture because they think it’s impractical. It’s hard to argue that IA takes some time to create it and requires specific skills to do it efficiently. However, powerful IA is a guarantee of a high-quality product since it reduces the possibility of usability and navigation problems. This way, well-thought information architecture can save both the time and money of the company which otherwise they would have spent on fixing and improving.

IA and UX design

After reading everything written above, many people may have the question: “Isn’t IA the same as UX design?”. Technically, these terms relate to each other but they are far not the same. IA is a blueprint of the design structure that can be generated into wireframes and sitemaps of the project. UX designers use them as the basic materials so that they could plan the navigation system.

UX design means much more than content structuring. In the first place, UX designers aim at making a pleasant interaction model, so that users feel comfortable using the product. They encompass various aspects influencing users’ behavior and actions such as emotion and psychology when the IA experts stay focused on the user’s goals.

Let’s get this straight: good information architecture is a foundation of efficient user experience, so the IA skill is essential for the designers. Effective IA makes the product easy to use but only united with design thinking the product has a powerful user experience.

IA system components

If you want to build strong information architecture for the product, you need to understand what it consists of. Pioneers of the IA field, Lou Rosenfeld and Peter Morville in their book “Information Architecture for the World Wide Web” have distinguished four main components: organization systems, labeling systems, navigation systems, and searching systems.

Organization systems

These are the groups or the categories in which the information is divided. Such a system helps users to predict where they can find certain information easily. There are three main organizational structures: Hierarchical, Sequential, and Matrix.

Hierarchical. In one of our previous articles, we’ve mentioned a well-known technique of content organization which is called visual hierarchy. It is initially based on Gestalt psychological theory and its main goal is to present 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.

Big City Guide

Sequential. This structure creates some kind of a path for the users. They go step-by-step through content to accomplish the task they needed. This type is often used for retail websites or apps, where people have to go from one task to another to make the purchase.

Vinny’s Bakery Website

Matrix. This type is a bit more complicated for the users since they choose the way of navigation on their own. Users are given choices of content organization. For example, they can navigate through content that is ordered according to date, or some may prefer navigation along the topic.

MoneyWise App

In addition, content can be grouped according to the organization schemes. They are meant to categorize the content of the product. Here are some of the popular schemes:

Alphabetical schemes. Content is organized in alphabetical order. Also, they can serve as a navigation tool for users.

Chronological schemes. This type organizes content by date.

Topic schemes. Content is organized according to the specific subject.

Audience schemes. The type of content organization for separate groups of users.

Book Swap App

Labeling systems

This system involves the ways of data representation. The design of the product requires simplicity, so a great amount of information can confuse users. That’s why designers create labels that represent loads of data in a few words. For example, when the designers give the contact information of the company on the website, it usually includes the phone number, email, and social media contacts. However, designers can’t present all of this information on one page. The button “Contact” in the header of the page is a label that triggers the associations in the users’ heads without placing the whole data on the page. So, the labeling system aims at uniting the data effectively.

Gym Landing Page

Navigation systems

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 fulfill their goals and successfully interact with the product. The navigation system, in terms of IA, involves the ways how users move through the content. It’s a complex system that employs many techniques and approaches, the reason why it’s wrong to describe it in a short paragraph. So, we’ll go back to the topic a bit later on our new blog’s article.

Searching systems

This system is used in information architecture to help users search for the data within the digital product like a website or an app. The searching system is effective only for the products with loads of information when the users risk getting lost there. In this case, the designers should consider a search engine, filters, and many other tools helping users find content and plan how the data will look after the search.

To sum up, we can claim that information architecture is a core part of the powerful user experience design. Efficient IA helps users quickly and easily navigate through content and find everything they need without striking a blow. That’s why designers are recommended to learn the basics of IA science.

The topic of information architecture is wide and there are more interesting and useful aspects. Our next article on this theme will be devoted to the various techniques and methodologies which designers employ to create efficient IA. Stay tuned!

Recommended reading

IA for the Web and Beyond
How to Make Sense of Any Mess: Information Architecture for Everybody
Information Architecture Basics
The Difference Between Information Architecture and UX Design

Originally written for Tubik Blog

Сообщение Basics of Information Architecture for Designers появились сначала на Design4Users.