To organize content in UI clearly for users, designers apply a well-known technique called visual hierarchy. Today’s article gives a general insight into the essence of this approach and the tools helping to organize the content properly.

What’s visual hierarchy?

Visual hierarchy is one of the core techniques which are applied to the design process. It is initially based on Gestalt psychological theory which examines users’ visual perception of elements in relation to each other and shows how people tend to unify the visual elements into groups.

Visual hierarchy strives at presenting the content of a product that way so users could comprehend the level of importance for each element. It organizes UI components so that the brain could distinguish the objects on the basis of their physical differences, such as size, color, contrast, style, etc.

The visual presentation of UI elements has a great influence on the user experience of a product. If content components look like a mess, people can’t navigate within a product or interact with it properly. Moreover, unstructured copy content has a low level of legibility, so users can’t scan it quickly and they need to make a significant effort to distinguish the data they’ve been looking for. Such bad UX can lead to poor user satisfaction which means a product wouldn’t be much sought-after.

Typographic hierarchy

Copy content is a significant part of any UI design. That’s why visual hierarchy often highly depends on typography. Specialists decided to emphasize the importance of copy presentation by creating a separate system of visual hierarchy called the typographic hierarchy.

The system aims at organizing copy content in the best way for users’ perception. Designers modify and combine fonts to build the contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The fonts are modified by regulating sizes, colors, and families as well as their alignment.

Typographic hierarchy includes different elements of copy content which are headlines, subheaders, body copy, call-to-action elements, captions, and some others. To build an effective visual hierarchy, all the elements need to be segmented into different levels. Let’s see what they are.

The primary level. It includes the biggest type like in headlines. The primary level aims at providing users with the core information as well as drawing people’s attention to a product.

The secondary level. This is the type of copy elements which should be easily scanned. They usually involve subheaders and captions which help users quickly navigate through the content.

The tertiary level. Body text and some additional data build the tertiary level. Designers often apply relatively small type still it should remain readable enough.

As the copy content is usually a major source of information in UI, designers need to present the data gradually. By segmenting copy elements into different levels, designers help users easily go from one piece of copy to the other and perceive the information in the right order.

One more thing to mention is that while creating typography for mobile products, designers are recommended to keep the number of layers within two. The thing is that small mobile screens don’t provide enough space for three levels. That is why the elements of a secondary level such as subheaders step aside to make mobile UI look clean.

Vinny’s Bakery website

Visual hierarchy tools

When designers have already chosen all the content components, it’s time to create an order. Let’s find out what helps designers to set the effective visual hierarchy of UI components.

Size

One of the most powerful tools for visual material transformation is size. It is rooted in human’s mind that big things are somehow more important than the small ones. That’s why users’ attention automatically goes first to the large words or big pictures.
Designers need to distinguish the level of significance for each content element and based on this data transform the components into big and small.

Color

In our previous articles, we’ve mentioned that color has a great impact on the users’ perception the reason why it serves as an effective tool for visual hierarchy creation.

Colors have their own hierarchy which is defined by the power of influence on users’ minds. There are bold colors such as red, orange, and black which can easily draw attention. On the other hand, there are weak, or soft, colors like white and cream which work better as the background.

Using the different colors designers can support a slight hierarchy of the UI elements. For example, CTA buttons in bold colors will definitely be the first thing that users see if the other UI elements are created in a softer palette.

Contrast

Hierarchy is based on contrast itself. One element contrasts with the other and that’s how users can see the differences between the content elements. Contrast can be created via visual differences including size, color, and style. Still, it’s recommended to keep the contrast in balance so that one object wouldn’t completely obscure the others.

Negative space

There can be many components in a user interface and to make them all noticeable for users’ eyes designers need to give them some private space. Negative space, or white space, is the area between elements in a design composition. Some designers usually don’t think of the white space as a component of design still the experts apply it as a useful tool helping to build an appropriate composition. A right amount of negative space between the elements will help users to notice and perceive each of them to each of them.

Proximity

As we said above, visual hierarchy is built upon Gestalt principles, so designers pay deep attention to the proximity of UI elements. As people tend to unify the visual elements into groups, UI components need to be placed that way so users could categorize them. If some elements are placed in a certain proximity, users automatically perceive them as a group. Designers can use proximity as a tool which helps to divide the content into subcategories.

Repetition

If people notice that some elements look similar, they may automatically unify them into one group. That’s how repetition works. Designers repeat some patterns for different objects on purpose so that users could unify them. For example, a website with a great amount of body copy at a page can highlight the most important sentences with another color. Seeing the sentences in this color users can follow from one key point to another.

Visual hierarchy is a foundation of effective information architecture. When UI elements are structured and organized, people enjoy using a product and it will be more effective in solving their problems. Moreover, powerful visual hierarchy improves the navigation system since people can better orient within a product. Stay tuned and be ready for the next article about visual hierarchy.

Recommended reading

Copy Content in User Interface: Tips and Practices
Basics of Information Architecture for Designers
Information Architecture: Techniques For Designers
Gestalt Theory for Efficient UX: Principle of Similarity
Gestalt Theory for UX Design: Principle of Proximity

Originally written for Tubik Blog

Сообщение Visual Hierarchy: How to Organize UI Content появились сначала на Design4Users.

No matter how challenging it sounds, designers strive to build effective mobile design because smartphones are a huge part of our life. The article describes essential principles for compelling mobile typography.

High level of legibility

Legibility is called a level of how distinguishable and recognizable the words and characters are in a text. The major objective of powerful typography is clear text which users perceive without efforts. Small screens and ambient light of mobile devices may become a problem on the way to creating legible typography. To avoid problems with legibility, designers need to consider all the factors influencing clarity of text.

Font size

In terms of mobile typography, the size does really matter. Some may think that on small screens tiny fonts will work best. It’s a misbelief. Small fonts on a bright mobile screen can make user’s eyes hurt from tension and bring a headache. Of course, modern devices allow screen zooming still it’s not always convenient for users to spare an unnecessary effort. Fonts in mobile UI should be big enough for users to read easily but not too big to save typographic hierarchy. The appropriate font size is a key to pleasing UX.

Leading

As we’ve mentioned in our previous article, leading is the spacing between the baselines of copy. In a mobile interface, leading is usually smaller compared to a desktop version. Wide leading may ruin the visual unity of text while too short space makes it badly legible. If a leading is done right, readers go fast from one text line to another and big pieces of copy become legible.

To-Do List App

Line length

To make body copy comfortable for reading in mobile interface, designers consider all the parameters including length of text lines. Optimal line length for a desktop screen won’t work same for mobile. Too long lines would go beyond screen borders, that is why designers are recommended to keep the number of character per line within 30-40.

White space

When design elements are tightly gathered in a bunch, the user interface looks messy and navigation is rather difficult. Designers need to give elements space to breathe bringing a relief to users’ eyes and mind. The size of mobile screens doesn’t allow using much of white space that’s why a balance between the elements has to be found.

Wine Year App

Fewer levels of hierarchy

Visual hierarchy is applied to organize content in interfaces clearly so that users could distinguish layout objects on the basis of their physical differences, such as size, color, contrast, alignment etc. Hierarchy divides content into levels assisting users to learn copy content gradually step by step without effort and get oriented in the digital product.

Web design usually contains three levels of copy content which include such elements as headings, subheaders, body copy, CTA buttons, and captions. However, small mobile screens don’t provide enough space for three levels, so designers apply only two. Elements of a secondary level such as subheaders step aside to make UI look clean.

Moneywise App

Simplicity of fonts

A key feature of effective mobile UI is simplicity. Design should be clear and the navigation easy to use, so font choices have to be based on the requirements. First of all, it is recommended to keep a number of fonts within two or three to make text look solid. Designers often stop their choice on two types of fonts for mobile interfaces because it requires fewer levels of hierarchy than web design.

Moreover, kinds of fonts should also fit a simple and clean style. Novelty and decorative fonts may look illegible on small screens. Designers regularly combine a serif and sans-serif fonts to create enough contrast of copy elements in the layout. In addition, it’s good to reduce effects like a shadow for mobile fonts. On desktop screens, they may work nice but will make small mobile screens look overloaded.

Book Swap Interactions

Delicate contrast

Contrast is an efficient tool for designers. It helps highlight vital UI elements as well as contribute a desirable level of text legibility. However, speaking of mobile interfaces, contrast may play a bad joke. Small screens, ambient light, and short fonts make a contrast image look unpleasant for users’ eyes. Reducing contrast between the background and copy elements, designers help users feel comfortable while reading text on a mobile screen.

Contrast can be created not only via colors but with sizes of fonts to set visual hierarchy. Nevertheless, mobile interfaces are short of space for giant headings, that’s why size contrast should be also reduced.

Jewellery E-Commerce App

Responsive typography

People surf the Internet via all devices available today. That’s why responsive design is a key condition for a successful digital product. Typography is a vital part of design responsiveness. Wrong size, width, and placement of fonts have a big impact on a whole composition. Even the most insignificant changes may break the balance between all design elements.

Creating typography for a digital product, designers need to consider how it will look on different devices. Planning such things forehead helps to avoid unnecessary problems in the future.

Cinema App

Prioritized content

To make mobile interfaces simple and useful, designers need to take care of the wise content organization. Users want to have a fast access to information they are looking for and mobile screens can make the process complicated.

Mobile UI has no room for unnecessary copy elements. There should be only essential content thoughtfully prioritized. Based on users’ needs and preferences, designers set a structure assisting people to navigate within the product and find what they are searching for. Text elements are prioritized by size changes as well as different width or kind of font.

Book App

Clear text rags

Depending on the type of a product, designers apply appropriate alignment for text blocks. It can be placed on the left, on the right, centrally or it can be justified. However, speaking of mobile design many experts often stop their choice on left side alignment. This kind forms text where the beginning of each line is placed equally and the rags look similar to stairways. Such a structure helps users easily go from one text line to another and scan text fast and easily. If body copy alignment is justified (text lines placed equally), it has no rags either side. The text with such structure is difficult to scan on a mobile screen.

Healthy Food App

Functional typography

While computer users do the clicks and scrolling to interact with products, mobile screens should provide much more functionality. There are many text elements in mobile interfaces that allow users to accomplish certain actions like buying a product, making a call, going to a website and others.

Designers need to make sure users understand how the text elements work and enable them to complete the actions. Functional typography should be highlighted among the other and clickable elements should be big enough to tap on them.

Menu Interactions

Things to jot down

• Minimalism. Mobile screens are short of space, so try not to overload it. Simple fonts, clean style, and a minimum of elements will do their job.
• Test the smallest first. Mobile devices have various sizes but the biggest problem is the smallest. Create your design based on how it will look on the tiny screens first. When it’s ready, you can easily adapt it to the bigger sizes.
• Avoid decorative and cursive fonts. They don’t render properly on the small screens. Moreover, decorative fonts overload interface with unnecessary details.
• Legibility first. Of course, it’s good to make beautiful catchy UI but sometimes all the colors, contrast, original fonts may hurt the legibility of copy content. A good-looking text is not enough. Make sure it is legible otherwise users won’t be able to read information and use your product properly.

Jewellery App

Every mobile UI design project is an interesting challenge. Meet it with the knowledge and the results will please you.

Recommended reading

Meaningful Mobile Typography by UXPin group

Mobile UI Design: 15 Basic Types of Screens.

7 Simple Rules for Mobile Typography

Typography in UI: Guide for Beginners

Originally written for Tubik Blog

Сообщение Mobile Typography: 8 Practices for Powerful UI появились сначала на Design4Users.

Typographic hierarchy makes things work

To create a design pleasant for users’ perception, all its elements should be well organized and clear to navigate. Designers set a proper structure by establishing a visual hierarchy. It organizes all the visual elements so that users could easily perceive content.

Visual hierarchy can be divided into different parts. One of them related only to the copy elements is called the typographic hierarchy. It aims at organizing copy content by dividing it into various types such as headings, subheadings, body copy, captions, and others. The differences between the types of copy are set by regulation of family, sizes, width, and colors of fonts.

Clear typographic hierarchy makes text legible and easy to scan. Moreover, it’s simple to highlight key parts of the text to draw users’ attention and hitch them to the expected actions.

Mood Messenger Landing Page

Consider context and audience

When it comes to the choice of fonts, an essential thing to consider is a context of a copy and a potential audience. Each font brings its own mood to a layout. There are friendly, funny, serious, business, and many other fonts that will fit a certain design.

Before you choose a font, you need to learn your client’s goals as well as needs and preferences of a target audience. Visual performance of fonts influences the first impression users to get from the product. If the kind of font doesn’t fit the mood which the product aims at, there can be a misunderstanding with the audience. For example, if a designer chooses a font that looks too fun and silly for a business website, users will hesitate if the company is trustworthy. Or, if a product is meant for youngsters, too formal fonts may seem boring.

Florist E-Commerce Website

Deep attention to mobile typography

Designers often do experiments with typography to make a project original. However, when it comes to mobile UI design, typographers are literally short of space. Mobile screens are quite small which sets a new challenge for designers to cope with restrictions without loss of sense and functionality. Mobile typography requires deep attention to the details from the appropriate size of fonts to compelling tracking and line length.

Compared to web design, mobile typography is harder to reach good legibility. The font size shouldn’t be too small because on tiny screens it will look like an illegible mess. Moreover, if the text is too big, it won’t fit the small screen too. In addition, designers need to care about the level of contrast since a screen with ambient light and high contrast can hurt users’ eyes.

Furthermore, a designer should think of the typography functionality. Smartphone UI includes clickable text parts and designers need to make sure users manage to use them. If these parts are too small, people can’t press it with a finger and it’s rather annoying.

Considering all the tiny details in mobile typography, designers can bring valuable products for users.

WineYard App

Minimalism can’t hurt

Sometimes, when designers aim at showing all the facets of a digital product, they try to use lots of various styles and fonts all in a single design. As a result, they get a design overloaded with unnecessary distracting details and lacking a proper mood.

Experts usually try to keep a number of fonts within two or three for the same layout. It allows making an essential contrast between copy elements along with saving the balance and right message of design. Applying different styles (bold, italic) should also be minimal. They are good for emphasizing really important parts but the overuse of them can make the text look messy.

Also, copy content shouldn’t overwhelm users with unnecessary information. Of course, it’s a writer’s job to create appropriate text still designers need to collaborate with them to make sure the text will fit a design.

Upper App

Text needs to breath

Legibility level highly relies on how much space there is between letters, words, and text lines. Tracking, kerning and leading are the processes of white space adjustment between the typographic elements. White space is the area between elements in a design composition.

A lack of white space may end in the bad legibility of copy content because it is difficult to distinguish words that are placed too tight to each other. Appropriate white space brings a visual relief to users’ eyes and allows going easily from one word to another, from one line to the next. However, try not to overuse it otherwise it can ruin text unity.

Dance Academy landing page

Build typography like a scientist, revise like an artist

Typography is a complex science consisting of many rules and regulations. Those who covered them are able to create clean working typography. However, it’s is not enough. Clients always require originality and emotion but it can’t be done only by following the written instruction.

Designers should never bury their artistic souls. Imagination and the sense of beauty bring uniqueness into any project, even the most casual one. Find the balance between the strict rules and unordinary choices, and the results may surprise you and your customers.

The Gourmet Website

Colorful typography needs thoughtfulness

The topic is actively debated. Some think there is no room for color in typography and some claim it’s a must-have for good-looking design. There is no point in looking for the right side of the dispute because there is no accounting for taste. Nevertheless, colorful typography does exist and designers apply it quite often.

Among the advantages of colorful typography, let’s mention the element of emotion it adds to any UI as well as the ability to highlight points of interest for users. Moreover, each color may transfer a certain message since it has an influence on users’ minds and behavior.

To take all the benefits, colorful typography should be applied thoughtfully and carefully because it’s easy to turn UI into colorful chaos. Here is the useful checklist for this case:

Make it contrast. A big problem that colorful typography may bring is bad legibility. The proper contrast between the fonts and background will help to avoid it. However, make sure the contrast looks pleasant and doesn’t hurt the eyes.
Don’t use too many colors. Again, try not to turn UI into a mess. Too many colors look distractive and amateur.
Color harmony. Remember the basics of art lessons. Use the color wheel and schemes to choose the proper palette.
Be careful with effects. Fluorescent, luminescent, metallic, and glowing colors have their peculiarities and they may not always look good on a digital screen.

Book Swap App

Learn the basics of typography

It may sound too obvious still some designers ignore learning basics of typography science. They rely on modern tools which automatically choose the fonts or just hope aesthetic features of chosen fonts would be enough. Such an approach seems like learning to read without knowledge of the alphabet.

Designers who don’t know the concepts and the anatomy of typefaces can’t use the potential of typography at the full strength. Everyone decides for oneself if they need to learn the science in-depth but the basics are a foundation of every craft.

The experts working on the problem of harmonical usage of fonts gladly share their knowledge that’s why there are so many useful books on typography for designers. As the recommended reading we can name

• The Elements of Typographic Style by Robert Bringhurst
• Typographie: A Manual of Design by Emil Ruder
• Just My Type: A Book About Fonts by Simon Garfield.

Recommended reading

Here are some articles providing useful tips and tricks in typography.

How to Make User Interface Readable

Do’s and Don’Ts of Typography

The 8 biggest typography mistakes designers make

10 typography tricks every designer should know

Typography in UI: Guide for Beginners

Copy Content in User Interfaces

Originally written for Tubik Blog

Сообщение 8 Typography Tips For Designers: Make Fonts Speak появились сначала на Design4Users.

Just to briefly remind, 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, a key principle of minimalism was leaving only an 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.

So, welcome to get inspired with a fresh D4U collection devoted to elegant and sophisticated minimalism in design for books and editorials.

By Oscar Riera Ojeda Publishers

By Oscar Riera Ojeda Publishers

By Katharina Schwarz

By Katharina Schwarz

By Lucas Blat

By Serafim Mendes

By Julia Kuba

By Lucas Blat

By Tim Bisschop

By Tim Bisschop

By Fons Hickmann m23

By Naranjo — Etxeberria

For more inspiration, check other D4U Inspiration posts, for example:

• Drone Awards photos 2021
• examples of awesome wine packaging designs
• impressive food photography and food styling
• realistic 3D portraits, 
• logo design examples
• captivating 3D animation concepts
• funny 3D characters

Сообщение Less Is More: Elegant and Minimalist Editorial Designs появились сначала на Design4Users.

What’s typography?

Typography is something bigger than just a design technique. A Canadian typographer, Robert Bringhurst, in his book The Elements of Typographic Style defines typography as the craft of endowing human language with a durable visual form. In addition, typography transforms language into a decorative visual element.

Typography has a much longer history than the design or the Internet itself. First, it appeared approximately in the 11-12 centuries when people invented movable type system. A real typography revolution started after the Gutenberg Bible, the first major book printed via movable metal type, which marked the beginning of the age of the printed book in the West. The style of type used in Gutenberg Bible is now known as Textualis (Textura) and Schwabacher.

Nowadays, it is more than just copy printing and organization. Commonly, typography is defined as the art and science of font style, appearance, and structure which aims at delivering the aesthetic and easily readable copy to readers. Not that long ago, it was a specialized study for editorial office workers but now science is applied in different spheres and plays a significant role in the design.

The role of typography in design

Can you think of at least one example of web or mobile design without copy elements? It’s difficult, right? Still, just a presence of copy in the interface is not enough for effective UI and positive UX. Copy and its appearance should be well-thought otherwise it may spoil the design. There are designers who ignore typography studies because they think it’s too difficult to understand so it isn’t worth spending much time. However, typography is an essential part of effective design. Let’s see why.

People got used to receiving the majority of information in text form and designers need to make this process easy and productive. The basic knowledge of typography can help to comprehend the peculiarities of font visual presentation and its influence on users’ perception.

The effective copy is a key to the powerful design. Its effectiveness depends not only on its content but also on how it is presented. Font size, width, color, and text structure – all of that matter. Designers can transfer certain mood or message by choosing appropriate fonts and the ways of their presentation. This way typography helps the design to communicate with people. Visual performance and readability of copy in digital products have the great impact on user experience. If fonts are badly legible, people can face problems with navigation or even worse can’t use it at all. Today poor user experience in digital products is unforgiven since users can easily find a better alternative.

In addition, bad typography significantly affects the first impression because even when users don’t read copy, they scan it. In case fonts look inappropriate people may not want to learn about your offer or use your product.

Essential typography elements

To create profound typography, you need to learn its anatomy and the processes typography building requires. Let’s see.

Font and Typeface

Nowadays, many designers use terms “font” and “typeface” as the synonyms but that’s not quite right. Let’s straighten it out. A typeface is a style of type design which includes a complete scope of characters in all sizes and weight. On the other hand, a font is a graphical representation of text character usually introduced in one particular typeface, size, and weight. In other words, a typeface is something like a family and fonts are parts of it. These two are the main objects which designers and typographers change and transform to create readable and aesthetic typography. More about typeface styles will be presented here soon for our readers.

Mean line and baseline

Typically, type characters are placed in a straight line creating a neat visual presentation. The main tools assisting designers in the process are mean line and baseline. The first marks the top and the other bottom of a character body. Such lines allow creating fonts even. Of course, the lines are invisible in interfaces after designers finish their work.

Character measurement (size, weight, and height)

To separate different types of information and highlight the vital points, designers apply fonts in different weight and size. The type weight is a measurement of how thick type character is. The sizes are usually measured in inches, millimeters, or pixels. The height of the character is also called “x-height” because the body of every character in one size is based on the letter “x”. This approach makes them look even. It’s easy to segregate copy elements such as heading, sub-heading and body copy by varying these parameters.

Ascender and Descender

The ascender is a part of a letter that goes above the mean line like in a letter “b” or “d”. The descender is opposite to ascender. It’s a segment that extends below the baseline like in “q” or “g”.

White space

White space, also known as negative space, is the area between elements in a design composition. Readers aren’t usually aware of the great role of the space, but designers pay a lot of attention to it. In case the white space is not balanced, a copy will be hard to read. That’s why negative space matters as much as any other typography element.

Alignment

Creating effective typography is not that easy and it includes many processes. For example, alignment is an action of placing and justifying text. During the stage, designers aim at transforming randomly placed pieces of text into one unified composition.

Tracking

The process of tracking involves adjustment of space for a group of type characters which form a word and text block. A designer set appropriate spacing for all letters, making copy feel airy and pleasant to the eye. The effective tracking makes letters in a word easily readable.

Kerning

Kerning is a bit similar to tracking still they aren’t the same. Tracking means is spacing between all the characters of font while kerning is the process of adjusting the space between two type characters. It is usually applied for individual cases when a designer decides to change the spacing between two specific letters to make it feel more natural.

Leading

Leading is the spacing between the baselines of copy. The appropriate leading helps readers easily go from one text line to another and makes big pieces of text legible. In design, the standard leading is 120% the point size of the font still it can vary according to the typeface peculiarities.

Typographic hierarchy

As any other design element, typography should be structured. Typographic hierarchy is a system that organizes copy content in the best way for users’ perception first of all via modifications and the combination of typefaces and fonts. It is aimed at creating a contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The contrast is created by regulating typography elements including typefaces, fonts, sizes, and colors as well as their alignment.

The Gourmet Website

Typographic hierarchy is presented with common types of copy content used in UI design. They are headlines, subheaders, body copy, call-to-action elements, captions, and others. These copy elements create distinct layers in design: primary, secondary, and tertiary.

The primary level of copy content includes the biggest type like in headlines. It strives at drawing the user’s attention to the product. The secondary level consists of copy elements which can be easily scanned. Those are subheaders and captions which allow users to quickly navigate through the content. And the tertiary level of typography includes body text and the other information. It is often presented with the small type still it should be readable enough. The typography layers assist users to learn copy content gradually step by step without effort and get oriented in the digital product.

The Big Landscape

Typography cannot be learned in one day. It requires constant studying and persistence. Follow Tubik blog updates and learn more about typography in design.

Recommended reading

Robert Bringhurst “The Elements of Typographic Style Paperback”

Erik Spiekermann “FontBook”

Simon Garfield “Just My Type: A Book About Fonts”

Tips on Applying Copy Content in User Interfaces

Every Design Needs Three Levels of Typographic Hierarchy

Originally written for Tubik Blog

Сообщение Typography in UI: Guide for Beginners появились сначала на Design4Users.

The role of psychology in design

Today the tendency of user-centered design makes designers reconsider the approach to their work and go deeper into the understanding of the target audience. Donald A. Norman in his book “The Design of Everyday Things” defines design as an act of communication, which means having a deep understanding of the person with whom the designer is communicating. In order to get a better insight into people’s needs, designers are recommended to bear in mind the psychological principles of human behavior, aspirations, and motivations.

The outcome of the work can be even more positive if a designer applies psychology in the creative process since science gives a close understanding of the target audience. Psychology knowledge helps to create the design which will make users perform the actions they are expected to such as making a purchase or contacting the team.

Designers may see psychology as a complicated approach to improving the design and for that reason neglect this part of research and analysis. However, you don’t need to be a Ph.D. in psychology to use it at your work effectively. All you need to consider are the basic principles constantly presented in design. Based on our experience and the conducted research, we’ve defined six effective psychological principles often applied in the design process.

Gestalt Principles

This psychological theory is almost 100-year-old but it hasn’t lost its actuality. The word “gestalt” means “unified whole” so the 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. The principles, on which users form the groups, include:

Similarity. If a user sees objects that look somehow similar, they may automatically perceive them as the individual elements of one group. The similarity between elements is usually defined with shape, color, size, texture, or value. The similarity gives users a sense of coherence between the design elements.

Continuation. It is the principle according to which the human eye moves naturally from one object to the other. This often happens through the creation of curved lines allowing the eye to flow with the line.

Closure. It is a technique based on the human eye’s tendency to see closed shapes. Closure works where an object is incomplete but the user perceives it as a full shape by filling in the missing parts.

Proximity. When objects are placed in close proximity, the eye perceives them as a group rather than seen individually even if they aren’t similar.

Figure/Ground. This principle demonstrates the eye’s tendency to separate objects from their background. There are lots of examples of pictures that show two faces depending on where your eye is focused on the object or background.

Photography Workshops  website

The Gestalt principles confirm in practice that our brain tends to make tricks with us, so designers should consider that fact during the creation process to exclude the possibility of misunderstandings.

Visceral Reactions

Have you ever had that feeling when you fall in love with the website after the first second when you’ve opened it? Or maybe an application has made you sick only with the quick glance at it? If yes, then you’ve already known what’s a visceral reaction. This kind of reaction comes from the part of our head called “old brain” responsible for the instincts and it reacts much faster than our consciousness does. Visceral reactions are rooted in our DNA, so they can be easily predicted.

How do designers use this knowledge? They aim at creating a positive aesthetic impression with the design. It’s not that difficult to guess what looks nice to people and what doesn’t if you know your target audience and their needs. So, the tendency of using the high-resolution beautiful photos or the colorful pictures at landing pages, websites, or any other web and mobile products is not accidental.

Jewelry E-commerce Application

Psychology of Colors

A science studying the influence of colors on the human’s mind, behavior, and reactions is called the psychology of colors. Today we won’t go deep into the aspects of this study since it is complex so deserves to have a specialized post devoted to it (on which, besides, we’re already working). In a few words, the main idea of the study is that the colors have a great impact on the users’ perception. That’s why designers should choose the colors knowingly to make sure their work presents the right message and tune.

Here is the list of the basic colors and the meanings which they are typically associated with:
Red. The color usually associates with passionate, strong, or aggressive feelings. It symbolizes both good and bad feelings including love, confidence, passion, and anger.
Orange. An energetic and warm color bringing the feelings of excitement.
Yellow. This is the color of happiness. It symbolizes the sunlight, joy, and warmth.
Green. The color of nature. It brings calming and renewing feelings. Also, may signify inexperience.
Blue. It often represents some corporate images. It usually shows calm feelings but as a cool color, it also associates with distance and sadness.
Purple. Long associated with royalty and wealth since many kings wore purple clothes. It’s also a color of mystery and magic.
Black. The color has a great number of meanings. It associates with tragedy and death. It signifies a mystery. It can be traditional and modern. Everything depends on how you employ it and which colors go with it.
White. The color means purity and innocence, as well as wholeness and clarity.

Slopes Website

Recognition Patterns

You may have noticed that websites or applications united with one theme usually have common patterns in their design. The reason is the users’ psychology. The thing is that people visiting a website or using an application are expecting to see certain things associated with the definite kind of product.

For example, visiting a website of a barbershop, the users are not expecting to see bright colors or pictures with cats or anything like this because if they do see it, this will definitely make them think of a website as an untrustworthy resource.

However, not only the colors and pictures matter. Some obvious and common things such as a list of blog posts on the front page of a blog or the filters on the e-commerce website are also important for successful navigation. Users become accustomed to things quickly and their absence makes them feel uncomfortable.

To-do list concept

Scanning Patterns

In our article Tips on Applying Copy Content in User Interfaces, we’ve already mentioned that before reading a web page, people scan it to get a sense of whether they are interested. According to different studies, including the publications by Nielsen Norman Group, UXPin team, and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.

F-pattern is referred to as the most common eye-scanning pattern, especially for web pages with a big amount of content. A user first scans a horizontal line on the top of the screen, then moves down the page a bit and reads along the horizontal line which usually covers a shorter area. And the last one is a vertical line down on the left side of the copy where they look for keywords in the initial sentences of the paragraphs. It usually occurs on text-heavy pages like blogs, news platforms, thematic editorials, etc.

Z-pattern is applied to pages that are not so heavily concentrated on the copy. A user first scans across the top of the page starting from the top left corner, looking for important information, and then goes down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page, again from left to right. This is a typical model of scanning for landing pages or websites not loaded with copy and not requiring scrolling down the page, which means that all the core data is visible in the pre-scroll area.

Knowing these patterns, designers can place the elements in an effective way for users’ perception and help them perform expected actions.

Hick’s Law

The law states that the more options users are exposed to, the longer it takes them to make a decision. This means that the more options you give to users, be it products to choose or pictures to look at, the more time and energy it takes to make a decision about the next step of the interaction. The possible result here is that the users make the choices but get unpleasant feelings after using the product, or in the worst case, they may not want to take such a significant effort and just leave.

That’s why designers are recommended to keep any options including buttons, pictures, pages to a minimum. Removing unnecessary choices, you make the usability of the product more effective.

Cafe Coupon App

Psychology is an effective tool in design which makes the creative process more productive while the result is going to be more user-centered. We’ve told you about six useful principles but they are only the tip of the iceberg because there is much more to learn on the topic. Don’t miss our next blog posts continuing this useful theme!

Recommended reading:

Here are some more articles we could recommend for those who would like to get deeper into the topic:

• Gestalt principles
• The role of psychology as a design tool
• 5 psychology rules every UX designer must know
• Gestalt Theory for Efficient UX: Principle of Similarity.
• Emotional Design: Why We Love (or Hate) Everyday Things by Don Norman
• The 5 pillars of visual hierarchy in Web design
• 6 principles of visual hierarchy for designers
• On Visual Hierarchy
• F-Shaped Pattern For Reading Web Content

Originally written for Tubik Blog

Сообщение Psychology in Design: How to Understand Users появились сначала на Design4Users.

Words are a powerful weapon. They can bring both success and failure depending on how you put them together. They can motivate or confuse, strengthen or weaken, call or push away. That’s why designing a digital product, it’s vital to remember that high-quality copy is as essential as the details of visual performance.

In one of our previous articles, we’ve already considered the big role of textual content in UI design, covering the definition of copy and its functions in graphic user interfaces. The important point to remember from it here is the words cannot be fully replaced with the graphics whatever amazing, high-quality and professional they are going to be. Efficient and engaging copy content in user interfaces is defined by two equally significant basic criteria: the quality of writing and the appropriate look. Words and visual elements should mutually support each other, exist in harmony, and provide organic consistency. So, every single piece of copy should be thoughtfully analyzed and created in a way corresponding to the general design concept and enhancing positive user experience via successful interaction.

Could you imagine an interface containing badly-written copy with the same type sizes, fonts, and colors? The chances are big that it would cost users a great effort to solve their problems or get needed information with the product, so they would simply choose another product that is more user-friendly and less time-consuming. Let’s check what types of copy content designers and copywriters deal with creating websites or mobile applications, and think over the points needing special attention.

Visual hierarchy

To organize content in interfaces clearly for users, designers apply a well-known technique called visual hierarchy. It is initially based on Gestalt psychological theory and 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. In the aspect of creating copy content for web pages and mobile app screens, there are two aspects important to consider: page scanning patterns and typographic hierarchy.

Understanding the importance of visual performance and readability of copy in digital products and its impact on user experience, numerous usability experts explore this issue comprehensively and collect statistics providing valuable data for designers. Lots of studies have shown that before reading a web page people scan it to get a sense of whether they are interested. According to different studies, including the publications by Nielsen Norman Group as one of the pioneers of this field, UXPin team, and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.

F-pattern is referred to as the most common eye-scanning pattern, especially for web pages with a big amount of content. A user first scans a horizontal line on the top of the screen, then moves down the page a bit and reads across the horizontal line which usually covers a shorter area. And the last one is a vertical line down on the left side of the copy where they look for keywords in the paragraphs’ initial sentences. It usually occurs on text-heavy pages like blogs, news platforms, thematic editorials, etc. How could designers employ this knowledge? First of all, placing the information of key importance or core interest on the most scanned spots and trying to use short catching headlines and bold headers to draw users’ attention.

Z-pattern is applied to pages that are not so heavily concentrated on a copy. A user first scans across the top of the page starting from the top left corner, looking for important information, and then goes down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page, again from left to right. This is a typical model of scanning for landing pages or websites not loaded with copy and not requiring scrolling down the page, which means that all the core data is visible in the pre-scroll area. In this case, designers place core information in the spots of highest attention, such as top corners, and put the other points requiring attention along the top and bottom lines.

The Big Landscape

Here we can see the design concept for a website that presents the online magazine “The Big Landscape”. The interface is minimalist following the principles of clear visual hierarchy, good readability, intuitive navigation, and aesthetic pleasure from visual perception. The designer followed Z-scanning-pattern placing vital elements such as the logo and CTA button in the corners of the top line while the bottom line informs users about the website creators and provides the ability to contact via social networks instantly.

Typographic hierarchy

Typographic hierarchy is a system that organizes copy content in the best way for users’ perception first of all via modifications and the combination of types and fonts. It is aimed at creating a contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The contrast is created by regulating type fonts, sizes, and colors as well as their placement and alignment. Typographic hierarchy is presented with common types of copy content used in UI design.

Headlines

A headline is the first thing that users should see in any interface. It is a large, bold word or phrase which transfers and emphasizes the core informative message on the page. It’s essential for headlines to be catchy and short so that they could draw users’ attention and meaningful in order to inform users about the theme and benefits of the content of the page or screen. According to the research published by one of the popular social media sharing platforms Buffer, the ideal length of the headline is 6 words; Jacob Nielsen provides the study at which shows that headlines of 5-6 work effectively, not less than extensive headlines presenting a full sentence.

Another point to remember: it’s good when the headline is visually supported by other elements on the page or screen, still, it also should be understandable and meaningful without such context.

Photography Workshops 

Here is the landing page for a company organizing photo tours and workshops for photographers. Functional and stylish minimalism is the basic approach behind the web interface. The bold headline is placed on the left which makes it noticeable but the major accent still remains on the head picture.

Website on cooking seafood

Vinny’s Bakery

These are two examples of the websites concentrated on providing content around the same theme – food. They both have the minimalist design with centrally located headlines. However, the headlines differ with the message they send to the users as well as the nature of the websites differs in its core: one of them stimulates uniting users around the action (cooking seafood) while the other is focused on presenting the goods (bread and bakery). The first example presents a website collecting recipes of meals with seafood from all over the world, so its headline contains a CTA with a key element – action verb in imperative form “Let’s cook!”, which dynamically tunes users into the activity. On the other hand, we can see another concept – a website for a small bakery selling homemade bread. The lyrical headline makes users feel warm, sets strong positive emotional connection and lets them instantly imagine the smell of bakery products which are sold via the website.

Subheaders

It’s impossible to put all the significant information in a headline, that’s why you need subheaders. These are brief, concise, and catchy phrases that are similar to headlines, although they typically mark out the key points in separate sections while headlines summarize the theme or message of the whole page. Following the principles of visual hierarchy, fonts chosen for subheaders are usually smaller than for headlines but bigger than the rest of the copy. Traditionally, they are also bold and short.

Organic — landing page

Travel Gear Landing Page

Subheaders play a big role in landing page design. These two concepts for landing pages above are good examples of how subheaders inform users about the data provided in different sections. Bold subheaders point out the main idea of body copy helping users find the information they need easily and quickly.

Body copy

Body copy is usually a part of text presenting the description or some essential information placed in a compact block, usually under a subheader or a headline. Fonts are thinner and smaller than in headlines and subheaders, sometimes they are presented in italic for even more prominent visual contrast.

There is no unified opinion about the best length of body copy. Some content creators support the approach that long copy is more informative and serious-looking, while others claim that only short copy is effective because Internet users never want to read too much. Here in Tubik, we support the approach that the length of the effective and user-friendly copy depends directly on the target audience: users, as well as products, are incredibly different, they have diverse preferences, goals, and wishes when search for web resources or mobile apps. Both long and short copy have their own pros and cons, and each of them can be appropriate than depending on the target audience of the product and its conversion goals.

Short copy is often effective for mobile interfaces and landing pages: their users are usually keen to see concise and highly informative copy content. Moreover, mobile interfaces have limited amount of space, so too much copy won’t look nice and will demand additional effort for reading, which can be the reason for poor user experience. Long copy is good for web resources that provide users with complex information on specific topics as well as the presentation of the products which aren’t well-known for users and need additional informative support.

Architecture Firm

Here is the example of a web page where a long copy is useful. It’s a design concept featuring a website for the architectural bureau following minimalistic and functional approach in creative practice and demonstrating it via website visual performance. The aim of such websites is to tell the company’s story, present professional level, and achievements, so detailed copy works efficiently in this case.

Birds of Paradise Encyclopedia

This design concept also presents a website deeply based on the copy: it’s an educational project setting the online encyclopedia about the specific family of birds. Although it contains a great amount of information presented in text, this type of content is logically divided into many brief and concentrated copy blocks supported with prominent headlines as well as bright and catchy illustrations. This approach makes interaction with the website more dynamic which is especially effective for a teenage part of target readers that presumably often perceive encyclopedias as boring stuff.

Toonie Alarm tutorial

As we mentioned above, short copy is useful for mobile interfaces since they are limited in space. The interface of a brief tutorial for the Toonie Alarm app demonstrates how copy is divided into short blocks in order to leave enough “air” on the screen and make copy readable.

Call-to-action elements with copy

The core elements that make UI interactive are those which contain a call-to-action (CTA). Some call-to-action elements may be represented with icons that don’t require copy using widely and instantly recognized icons such as a telephone receiver for a phone call or the envelope for mail. However, in cases when the image of an icon is not so obvious or can be misleading, it is more effective to use the double scheme, when the icon, button, or link is supported with the copy.

The copy for call-to-action elements consists of one or two words or a linked phrase in a body copy. Verbs in the imperative form are one of the frequently applied mechanisms of engaging users.  Designers are recommended to use various techniques of creating contrast, first of all via color, in CTA elements, so that they could stand out in the layout and draw the user’s attention quickly.

Landing page for SwiftyBeaver

Travel Agency Website

The CTA buttons on these two landing pages are both centrally located, although they employ different types of copy. The first one consists of the four-word-phrase, while the other applies only one word. However, both look good and work effectively since they both contain the verb in the imperative form and inform the target audience about appropriate action solving their potential task on this website.

Good Sign App Concept 

This is a concept for an unusual Good Sign app that gives you a new sign to look for, and you make your wish every time you see it in real life. Such an extraordinary app has also unusual CTA buttons like “Make a wish”.

Book Swap App

There’s no need to create CTA buttons exceptionally in bright colors – their main task is to be easily noticeable in the general layout. If the interface is bright and colorful, why don’t you make the contrast with a light background which will make the bright copy even more prominent, like in a concept for the Book Swap app above?

Captions

Caption is the short text under a picture describing its content. In web interfaces fonts are usually small and often italic, and in mobile interfaces, the sizes of fonts depend on the size of a picture.

Gym Landing Page

Here is a concept for the landing page of a gym. The captions here have bold fonts that make them easy to read. They are shown only when the picture is hovered which makes interaction more engaging for the users.

Points to consider

All in all, creating a quality copy content isn’t that hard if you keep in mind the typographic hierarchy principles. And here are some basic tips on presenting the copy:

• Create catchy headlines. They draw users’ attention and often become the point of the decision whether the user continues interaction with the page or bounces it.
• Make headlines short, but keep them highly informative.
• Subheaders relate to separate sections, so they guide users through the content in the interface.
• Use brief concise copy for mobile interfaces and landing pages.
• Consider using the long copy of web resources aimed at providing informative content.
• Use verbs in the imperative form to encourage people to actions.
• Use contrast colors for call-to-action elements, so that they could draw the user’s attention more effectively. However, don’t forget to test the readability of the text on the CTA elements: it has a crucial impact on usability and conversion rates.
• A caption should preferably describe or add the data that isn’t obvious from the image.
• Give a strong preference to present tenses in captions.
• Always ground your solutions on preliminary user research and don’t neglect testing different options.

Recommended reading

Here is the collection of recommended articles for further reading in case you would like to read more about the theme.

The 5 pillars of visual hierarchy in Web design
6 principles of visual hierarchy for designers
F-Shaped Pattern For Reading Web Content
3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern
Effective Writing For Your UI: Things to Avoid
The Ideal Length of Everything Online, Backed by Research
Copywriting in UI. Words that Make Design Go Round

Our next publication will continue the comprehensive theme of visual hierarchy and its effective practices in web and mobile interfaces. Don’t miss!

Originally written for Tubik Blog

Сообщение Copy Content in User Interfaces: Tips and Practices появились сначала на Design4Users.

Flat design

Flat design has significantly grown its presence and diversity this year, both in interface design and branding. The design approach is known for its minimalist and concise use of visual expressive means and has established itself as a style favorable for enhancing usability and visual harmony of user interfaces. The most prominent feature which actually has inspired the name of this direction is applying flat 2-dimensional visual details as the opposite to highly realistic and detailed skeuomorphic images.

The features of flat design supporting its steady popularity in interface design include:

• simplicity of shapes and elements
• minimalism
• functionality
• bold and highly readable typography
• clear and strict visual hierarchy
• close attention to details
• thoughtful appliance of bright colors and contrast supporting quick visual perception
• avoiding textures, gradients and complex forms
• applying the principles of grids, geometric approach and visual balance.

Cafe Coupon App 

Thoughtful integration of flat design via diverse interface elements, including icons, illustrations, buttons, tabs, and the like, proved itself efficient for making UI bright, attractive, clear, intuitive, and easy-to-use.

Toonie Alarm

Moreover, this year flat design has set a strong link between branding and UI design, mutually supporting each other in digital products.  One of the fields broadly strengthening this trend was creating logos and app icons flat and simplified. This trend has featured itself not only in brand new projects but also for well-established websites, apps, companies, and products, which have presented new redesigned logos and corporate style visuals redesigned according to the principles of flat design.

Conversational UI

Another broadly discussed trend is conversational UI which has been the object for hot debates and themes for many speeches and case studies this year. Basically, the term “conversational UI” is connected with interfaces that enable users to communicate directly to the system in a way imitating conversation with people. In the vast majority of cases, this sort of UI involves voice manipulation and recognition as part of the interaction.

More and more products are featuring this sort of functionality: some want it just because it’s trendy and fashionable while others find real ways to engage it for problem-solving objectives. Most often it is realized by chat-bots providing a flair of talk to the users. In automated dialogues of this kind, depending on the nature of the product and style of talk which is seen appropriate for the target audience, conversational UI can effectively involve both verbal (language) and non-verbal (emoticons, pictograms, etc.) means of communication.

Among the advantages of conversational UIs, one of the frequently mentioned is the automation of some basic and repetitive operations saving people’s effort for more creative and complex tasks. It can enhance the usability of the product and even make it proactive, giving prompts to the user and improving interaction with the product. Still, there is the trap to overload the product with this sort of communication, based on standard situations and issues while missing non-typical cases or questions which need different solutions. Moreover, by far not all target users are ready to communicate in that way, so this design solution needs to be grounded on extensive user research and testing from the early stages of user experience design. Conversational UI can easily give zest to the user interface. Yet, if it’s not analyzed and tested well, conversational UI can do the opposite and spoil user experience by poor interaction.

Anyway, this year UI designers have thought over new perspectives of applying conversational UI, in particular in combination with AI technologies, and this trend will definitely grow to show new rays of creativity next year. Conversational UI isn’t just another fad: it is the trend providing total or partial changes to certain areas of interaction design and giving an alternative approach to problem-solving and decision-making processes.

Minimalism

This year has given a great bunch of applications and websites designed on the principles of minimalism. They support positive user experience by providing clear and simple interfaces, full of space and air, focused on content and navigation. Minimalist interfaces are characterized with thorough attention to visual elements, not numerous but always transferring a particular message. Minimalist interfaces, both for web and app, also feature sophisticated work with typography and visual hierarchy supporting instant scanning and skimming the content of the page or screen. Moreover, interfaces of this sort usually provide a high level of legibility and readability.

Björn

Custom graphics

The desire of originality sprung out in UI design in the area of custom graphic design of all kinds. More and more interfaces apply custom mascots, icons and illustrations that fulfill multiple goals: adding originality to the visual design concept, enhancing usability, strengthening navigation, and marking out the content depending on its nature and functions. Graphic details play a crucial role in the usability and accessibility of the product and even the slightest changes can bring significant results, speeding up visual perception and understanding interface elements or transitions.

Visual perception is one of the most productive and quick ways through which people are able to obtain information and get it processed by the brain. It influences so many aspects of life that neglecting the issue while creating products for users would be extremely unwise. That is why the aspect of applying visual elements of high functionality in interfaces such as icons and their impact on the general efficiency of the product has been an actual topic in the global design community for a long time. In addition, images push the limits of perception for users who have natural problems with text recognition such as, for instance, dyslexic or non-reading preschoolers.

As for custom illustrations or icons, created for specific products, made according to the preferences and needs of the particular target audience and with a view at certain business goals, they are able to make the product work more efficiently solving users’ pains and satisfying wishes. Perhaps, that is one of the most popular reasons why this trend got so popular in 2016 presenting interesting interfaces with custom graphics of diverse styles and performance.

Weather in UI Design

Another side of this trend is the evolving field of wallpapers for desktops and mobile devices featuring original graphic artworks on a variety of topics. It also can be characterized as a user-friendly trend giving users the choice of means for self-expression and satisfying personal aesthetic needs.

Animated microinteractions

Interface animation is one more hot and debatable topic of this year. Although there is a big army of those who find animation an unnecessary feature overloading user interface and making it more complicated, most users expect motion as an integral part of interaction experience. So, designers and developers work over more and more sophisticated methods to make animation pleasant-looking and problem-solving characteristics of modern apps and websites.

One of the frequent methods of adding motion to UI are animated details featuring microinteractions. Microinteractions supported by clear finalization via motion create fast feedback for the user and make the experience positive and efficient while navigation simple and intuitive. Animated buttons, switchers, toggles and other interactive elements inform users in split seconds activating all the potential of fast visual perception.

Tab Bar interaction

As we mentioned in the earlier article, animation in the interface can create a pleasant illusion close to natural interaction with physical objects which often doesn’t need too much cognitive process. For example, if you pull the object, press it, move out the tab, the movements should feel natural. Most users won’t be able to see this sophisticated work accomplished by designers: they will take it for granted and the fact it makes them comfortable will be the biggest praise for design solutions.

Scroll animation

Scroll animation also got new vibes and perspectives of artistic realization. Thought-out movement of layout elements while the webpage is scrolled enhances user experience significantly and creates the harmonic feeling of one integral smooth interaction rather than perceiving several separate parts or blocks of the page. Moreover, this sort of interaction is aesthetically pleasant and engaging, and these emotions are a good factor of retaining users. This year, full of new updates in design tools and software, showed great practices of sophisticated work on scroll animation.

Organic landing page

Animated tutorials

The tutorial is a vital part of onboarding users for most mobile applications. Certainly, a wide variety of means and techniques are applied to make it clear, engaging, and informative as it is a strategically important element of involving users into further interaction with a digital product. This year designers combined traditional techniques with new popular findings: in particular, custom illustrations and animation brought new vibes to app tutorials, making them more dynamic and enhancing their informative potential.

Social Network Tutorial

Diversity of landing pages

Surely, landing pages were discovered much earlier than 2016, still, this year has brought the new lap of their development and diversity. More and more businesses and social projects take advantage of using them for effective presentation of special services, sales, offers, or issues that need focused user’s attention. Landing pages have also grown their presence in the Net as an effective method of promotion for native mobile apps. Accomplished wisely and thoughtfully, grounded on user and market research and testing, broad usage of landing pages can be also seen as the other user-friendly trend, providing users with necessary information and interactions in a clear and accessible way saving their time and effort. From the business perspective, they also work well giving businesses a flexible tool for original and effective presentation.

Coffee Wings landing page

Brutalism

The trend of brutalism in digital design has rocketed this year getting more and more expressions and diversity. It is often characterized as a web design style aiming 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. Vice versa, brutalism is based on simple and raw appearance, in most cases not loaded with many visual details and sometimes even close to plain HTML page. Used wisely, for the appropriate goals and audience, this approach can bring a high level of originality to the website and make it really stand out of the crowd.

Contact List Concept 

Custom grid

According to Internet Live Stats, there are over 1 billion websites in the World Wide Web today. This milestone was first reached in September of 2014, as confirmed by NetCraft in its October 2014 Web Server Survey, and first estimated and announced by Internet Live Stats. The number had subsequently declined, reverting back to a level below 1 billion due to the monthly fluctuations in the count of inactive websites before reaching again and stabilizing above the 1 billion mark starting in March of 2016. With more and more websites coming into play, designers have to be more and more creative to not only make them attractive and harmonic but also give them a feeling of uniqueness and original appearance. That is one of the reasons, why experiments with the grid also won their place in the list of general design trends of the leaving year. A custom grid is a 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 experiment requires thorough research and in many cases, the final result comes via several iterations tested and analyzed in terms of usability and visual perception.

Slopes Website

Bold and catchy typography

2016 could also be mentioned as the year of further rigorous practice on typography in the global design community. It brought the world loads of new nice typefaces both universal and created with a view to particular objectives or products. Typography continued its progress as one of the crucial aspects of efficient web and app design, and one of the trends in this domain was practices of applying bold and outstanding typography for webpages, catching users’ attention, and instantly informing them about the core message. In particular, this approach got its development in the sector of landing pages whose quick and dynamic presentation of core data to users has a great influence on conversion rates.

Vinny’s Bakery

Large thematic image

One more trend often found in various designs for interfaces is applying prominent images, which could be either photos or illustrations, as the central visual element of the general composition. Important thing is that the image is never just a placeholder of nice looks: it presents a powerful way to strengthen the informative potential of the page or screen, set the theme instantly, and focus the user’s attention at the significant details. Needless to say, it takes much designer’s effort to choose the one successfully transferring the necessary message and supporting the general stylistic concept.

Healthy Food App 

Handwriting lettering

Custom handwriting lettering also got popular as a design trend and is often used for marking out significant details and images in an original way. Special lettering made by professional designers looks fresh and unique, refreshing the visual performance of the webpage or screen. On the other hand, applied in UI design, it demands additional effort to be tested in the layout as it can happen that hand-crafted lettering looks great separately, but doesn’t work effectively in combination with other elements of the interface.

Real content instead of Lorem Ipsum

This year has featured growing attention to content, its quality, and its performance. In user interfaces, content, and design and interconnected parts that should successfully support each other instead of fighting for users’ attention. That makes more and more designers prefer applying real content instead of well-known Lorem Ipsum, even in cases of creative stages or presentation of design concepts. It gets designers, clients, and users closer to real experience and a more natural feel of interactions.

Website on cooking seafood

Videos explaining or presenting products

Due to easy access to reviewing videos via YouTube, social networks, and other platforms of product presentation, video explainers have quickly established themselves as a popular trend. Naturally, it wouldn’t be logical to neglect such a powerful source of connection with clients and users, so 2016 has brought a great variety of videos presenting the products, companies and services, explaining their benefits and special offers, showing the engaging flow of interaction and connection. They took over the responsibilities of the picture which is worth a thousand words: video explainers quickly show the most important features of the product and let the users know what deserves their attention first of all.

Example of video explainer designed by Tubik Studio for Toonie Alarm

Example of promotional year-in-review video designed by Tubik Studio for Opera

Bright and dark color palettes

No secret, color is one of the most powerful and influential factors in UI design. One more trend in UI design deserving a place in the list of this year is a great variety of color palettes designers choose for applications and websites. Diversity of new fonts and typefaces, as well as research of usability studies, allow going beyond standards and trying new combinations which will take advantage of diverse colors but with it won’t lack in usability. More and more creatives are discovering new horizons combining traditional techniques with innovative approaches in the domain of work with color.

Recipe App

magic.co landing page

To sum up, we can certainly say that in the sphere of UI design 2016 has been the year of creative search and experiments, still, most of them were focused on usability and desirability of the final products. No doubt, 2017 will not lose its chance to polish these trends and open the new ones.

Originally written for Tubik Blog

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

One of the productive and highly professional ways to inspiration is TED. Perhaps you remember the collections we have already suggested watching: 20 TED talks for designers about diverse design issues and 10 TED-talks for creatives from different spheres. Today we’re going to recommend you a new set of informative and insightful TED and TEDx-talks presented by recognized international experts.

Here is the collection of 10 TED-talks all with the descriptions given on the TED website or YouTube presentations. This time they are focused on the issues of graphic design. Most of them are already classic, sometimes even could be called legendary, and that makes them even more precious as they have been successfully checked with time and practice. The ability to analyze take the best from the past usually broadens the creative horizons and becomes a solid foundation for innovative thinking. So, enjoy watching and feel the energy of great masters!

My life in typefaces by Matthew Carter

Pick up a book, magazine or screen, and more than likely you’ll come across some typography designed by Matthew Carter. In this charming talk, the man behind typefaces such as Verdana, Georgia and Bell Centennial (designed just for phone books — remember them?), takes us on a spin through a career focused on the very last pixel of each letter of a font.

Intricate beauty by design by Marian Bantjes

In graphic design, Marian Bantjes says, throwing your individuality into a project is heresy. She explains how she built her career doing just that, bringing her signature delicate illustrations to storefronts, valentines and even genetic diagrams.

The art of first impressions — in design and life by Chip Kidd

Book designer Chip Kidd knows all too well how often we judge things by first appearances. In this hilarious, fast-paced talk, he explains the two techniques designers use to communicate instantly — clarity and mystery — and when, why and how they work. He celebrates beautiful, useful pieces of design, skewers less successful work, and shares the thinking behind some of his own iconic book covers.

Designing books is no laughing matter. OK, it is. by Chip Kidd

Chip Kidd doesn’t judge books by their cover, he creates covers that embody the book — and he does it with a wicked sense of humor. In one of the funniest talks from TED2012, he shows the art and deep thought of his cover designs. This talk is from The Design Studio session at TED2012, guest-curated by Chee Pearlman and David Rockwell.

Can design save newspapers? by Jacek Utko

Jacek Utko is an extraordinary Polish newspaper designer whose redesigns for papers in Eastern Europe not only win awards, but increase circulation by up to 100%. Can good design save the newspaper? It just might.

Why write? Penmanship for the 21st Century by Jake Weidmann

What is the future of writing in the digital age, and why does it matter? In this surprising talk, Master Penman Jake Weidmann explores the connections between the pen and how we learn, think, and carry our cultural heritage at a time when the very act of writing is being dropped from school curricula across the country.

Jake Weidmann became the youngest person to receive his Master Penman certificate in July 2011. He works across several mediums including drawing in pencil and charcoal; pen and ink; painting in acrylic, airbrush, oil and gouache; sculpting in wood, bone, antler and clay; and is versed in numerous forms of calligraphy. He is best known for the integration of flourishing and hand- lettering in his art. Jake also designs his own hand-made pens. He, like his pens, travels the globe, reintroducing this Old World art form and cultivating its relevance in the world of today, of tomorrow, and forevermore.

The beauty of data visualization by David McCandless

David McCandless turns complex data sets (like worldwide military spending, media buzz, Facebook status updates) into beautiful, simple diagrams that tease out unseen patterns and connections. Good design, he suggests, is the best way to navigate information glut — and it may just change the way we see the world.

Wake up & smell the fonts by Sarah Hyndman

Sarah shares with us a story of type and invites us to consider our emotional response to the printed word. Each font/typeface has a personality that influences our interpretation of the words we read by evoking our emotions and setting the scene. We all understand this instinctively but it happens on a subconscious level. Sarah shows us that conscious awareness of the emotional life of fonts can be entertaining and ultimately give us more control over the decisions we make.

Designer Sarah Hyndman explores typography as we experience it in our every day lives under the banner of Type Tasting. Since the launch in 2013 she’s curated an exhibition at the V&A for the London Design Festival, been interviewed on Radio 4’s Today, taken Type Tasting to South by Southwest in Austin, Texas and has been commissioned to write a book.

Sarah has been a graphic designer for over 15 years, working in agencies before setting up design company With Relish. After studying an MA in Typo/Graphics at the London College of Communication she was invited back as a guest tutor.

Typography – now you see it by Shelley Gruendler

Dr Shelley Gruendler is a typographer, designer, and educator who teaches, lectures, and publishes internationally on typography and design. When she is not traveling the world as the founding director of Type Camp International, she is proud to live in the Canadian Typographic Archipelago.

The art of kinetic typography by Dan Boyarski

Dan Boyarski is professor and former head of the School of Design at Carnegie Mellon University, where he has been for thirty-two years. His interests lie in visualizing complex information, interface and interaction design, and how word, image, sound, and movement may be combined for effective communication. In the spring of 1999, the Design Management Institute awarded Dan the Muriel Cooper Prize for “outstanding achievement in advancing design, technology, and communications in the digital environment.”

Check out the updates here, new collections of wise creative thoughts are already around the corner!

Originally collected for Tubik Blog

Welcome to check 20 TED-talks for designers, video speeches for product designers, and a set of books for designers

Сообщение Inspiring TED-Talks for Graphic Designers появились сначала на Design4Users.

We have already shared our ideas about the role of icons in interfaces in the article describing their most important advantages. Today’s article deals with one of the aspects initiated by Quora question “In UIs, do people recognize icons faster than words?” Having shared our ideas in the answer, we decided to provide its extended version here for our readers.

The aspect of speed

Visual perception is one of the most productive and quick ways through which people are able to obtain information and get it processed by the brain. It influences so many aspects of life that neglecting the issue while creating products for users would be extremely unwise. That is why the aspect of applying visual elements of high functionality in the interfaces, such as icons and their impact on the general efficiency of the product, has been an actual topic in the global design community for a long time.

In the scientific research about visual perception, after theoretic analysis and a set of practical experiments,  A. Santella made a conclusion: “The fact that eye tracking is sufficient for some level of abstraction in our context makes an interesting point. It suggests that the understanding underlying abstraction, and perhaps other artistic judgments, is not some mysterious ability of a visionary few, but a basic visual competence. Though not everyone can draw, everyone it seems can control abstraction in a computer rendering.” People, in general, have incredibly broad abilities to perceive visual marks, recognize and proceed data even transformed in images of a high level of abstraction. That is an important fact designers widely use to improve the usability and navigability of their solutions.

If the only aspect a designer is interested in using icons is speed, then the idea in the original question will work positively. Yes, in the vast majority of cases, people fix and perceive pictorial elements like icons and illustrations faster than words. A great proportion of users are visually-driven creatures by nature, so the following mechanisms of visual perception often work and should be considered in the design process:

• the human eye fixes images much faster than written text
• as psychologists claim, people need about 1/10 of a second to get a general perception of a visual scene or element (that speed is indeed impossible for textual items)
• visuals are transmitted to the brain much faster, and important pieces of information are often fixed by the brain as visual images, even if they were obtained via text perception
• images are less vulnerable in combination with the background and surrounding elements, while text is highly dependent on the aspect of readability
• images have a tendency to stick better in long-term memory, which means that in interactions with the interface, people will not need to process and remember more data than it’s really necessary, so interactions get faster.

Moreover, icons and other sorts of visuals in the interface can make it more universal in cases when an app or a website is used by people from different countries. So, we can claim that using icons improves general comprehension. In addition, pictures push the limits of perception for users who have natural problems with text recognition, such as, for instance, the dyslexic or non-reading preschoolers.

GIF of the Tab Bar Interactions 

One of the popular elements of the layout where icons play highly practical value is a tab bar. Featuring interactive elements, it has limited space capacity; therefore, icons as the visual symbols of available interactions become an efficient design solution. The concept provided above shows that interface animation can liven up the visual elements and enhance microinteractions.

Weather Icons Presentation 

Here’s one more example showing how icons provide a user with the necessary information by visual means. Symbolic images of weather conditions are easy to understand, and at the same time they save a lot of space and give the opportunity to make the layout of the screen informative but not overloaded.

In user interfaces, where in many cases, basic interactions should take seconds, this aspect is highly important, and it is the essential reason to turn hell out of everything into graphic material. All the things mentioned above feature great advantages of visual elements of the layout, for example, icons, as a tool for fast and easy interaction with the product. However, there are some more aspects to analyze before making final design decisions.

The aspect of meaning

On the basis of diverse design projects and concepts designed in Tubik Studio, we deeply believe that speed should not be the only reason to consider and analyze in the process of creating a user interface layout. People can perceive icons super fast, but if the message they transfer is not clear and can have double-reading, this speed will not bring a positive user experience. Fast capturing of the icon bringing wrong understanding cannot be defined as recognition; it’s just fast noticing. Recognition means not only speed but also the right action or information, which this icon should bring to the user.

There are loads of widely-recognized icons, such as a telephone receiver for a phone call, an envelope for mail, a magnifier for search, and so on. Certainly, using these icons, you create a much faster perception of the UI functionality than using copy instead of them. Nevertheless, in cases when the image of an icon is not so obvious, its usage should be thoughtfully contemplated. If the icon doesn’t correspond with the goal and meaning it is assigned, the speed of recognition doesn’t matter. That’s why there are cases when text transfers the idea or data more clearly, and sometimes it is more effective to use a double scheme when the icon is supported by the text.

iPad App Interactions

Here is the concept showing mutual support of copy and icons. This technique activates several elements of perception during one interaction and provides a higher level of recognizability for call-to-action elements. People, who instantly understand the symbol transferred with the icon, won’t pay a big attention to the text. The same will happen to those who have problems with fast copy recognition. However, using the copy together with the icon decreases the risk of misunderstanding or wrong interactions for people who can possibly misinterpret the meaning of the image.

One more case when icons are often used together with copy is diverse side menus. Depending on the general stylistic concept of the interface, icons can imply a different level of complexity, from simple stroke icons to sophisticated and detailed ones.

Blog App

This design concept of the blog app shows how icons can become a multipurpose visual element. In the presented interface, they support the titles of the categories for blog posts. Textual presentation of the category is visually supported with a good-looking and memorable image. At the same time, copy removes the possibility that different users can see different meanings of the images. What is more, in this case, icons support another important function providing color markers for the categories. This technique makes interaction with the app faster and easier for users and at the same time, enhances usability and navigation.

Anyway, the decision on applying icons, text, or both in the layout should be based on thoughtful analysis of the target audience and understanding the goals and conversions which have to be obtained via the interaction.

Reasons for applying icons in the interface

Summing up the points mentioned above, we can define several popular reasons for using icons in the interface:

– speeding up data perception
– enhancing memorability of the element via visual images
– improving navigation with visual markers
– saving up space on the screen or page when the long words or phrases are replaced with icons
– supporting copy material and providing its additional visual explanation
– supporting the general stylistic concept and its harmonic expression in a broad perspective.

User interface design solutions for PassFold project

Points to consider

Obviously, it is impossible to satisfy any user and consider every existing cognitive scheme, but still, there are some general aspects that have to be thought out in the aspect of design with high visual perception:

• target audience (physical abilities, age, cultural background, general development, and education level)
• typical user’s reading skills
• typical environment of product use
• level of global or local product spread
• level of recognition for the chosen graphics
• level of distraction/concentration provided by the graphics

All the mentioned points deal with human cognitive abilities influencing the quality and efficiency of visual data perception. For designers, it’s important to bear in mind: it’s not enough to make users see the elements of the layout; it’s vital to make them recognize their meaning and quickly understand their message. Copy and icons should not fight against each other to see which one is stronger; they should support each other for the sake of a better user experience.

Restaurant Menu

Recommended materials

Diverse issues of visual perception have been an object of scientific and applied research for many decades. In terms of design issues, we could recommend the following articles for those who would like to know more :
What Designers Should Know About Visual Perception and Memory – the article by VanseoDesign analyzing basic aspects of visual perception in design perspective;

Design Principles: Visual Perception And The Principles Of Gestalt – the article by SmashingMagazine considering the principles of Gestalt theory essential for design practice;

Studies Confirm the Power of Visuals in eLearning – the set of ideas in Shift’s eLearning Blog based on the analysis of visual perception in interaction;

37 Visual Content Marketing Statistics You Should Know in 2016 – the article by HubSpot about trends on visual content with some stats;

From Icons Perception to Mobile Interaction – the scientific article about icons perception in mobile interfaces;

Visual Perception – the list of books on general aspects of visual perception which can possibly be helpful for those who are interested in the topic;

The Art of Seeing: Visual Perception in design and evaluation of non-photorealistic rendering – the theses of scientific research by Anthony Santella.

Useful Articles on UX Design

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

Error Screens and Messages: UX Design Practices

Visual Dividers in User Interfaces: Types and Design Tips

How to Design Search in User Interfaces

How to Design User Onboarding

Directional Cues in User Interfaces

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

Negative Space in Design: Practices and Tips

How to Make Web Interface Scannable

UI/UX Design Glossary: Navigation Elements

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

Сообщение Icons vs Copy. Visual Perception in UI появились сначала на Design4Users.