Why would you want to read about all that stuff? The reason is simple but big: app users or website visitors won’t read the content if it doesn’t look clear and digestible to them.

Readability and Legibility of Digital Content

Let’s start with the basics and define the phenomena of legibility and readability. Although designers often use the terms as synonyms, in fact, they are about different sides of content perception by the user.

Legibility of content is focused on how people see it and distinguish elements one from another. So, from this perspective, you deal with how people see the content on the page or screen, distinguish its elements and recognize them (for example, characters, words, sentences, numbers, etc). Based on that, we can say that legibility is more about the visual presentation of content that makes it edible and lets users quickly understand what is what on the page or screen.

As for readability definition, it’s easily found right in the name of the phenomenon: readability is the ease of written content perception. In its classic understanding, readability is the next level going deeper into the comprehension of the text content. It deals with the simplicity of words and sentences, clarity of thoughts, ease of consuming information, and the understandable structure of the text blocks.

Anyway, these days UX designers often give readability a broader understanding that combines both visual performance and clarity of the text itself: the term is often used to define how easily people distinguish different elements of text while legibility is focused on distinguishing particular characters and symbols in the particular words for specific typefaces. Whatever meaning you use for the terms, they are always united with one thing: how users see, scan, and read your content.

Factors Influencing Readability and Legibility

There is a number of factors that have an impact on making content legible and readable. Let’s review the ones that are directly connected to the design process.

Background

As well as it happens with printed books and newspapers, in digital interfaces the background color has a great effect on the ability to read and distinguish both interactive elements and content. For example, similarly to physical objects perceived on different backgrounds, black copy shown on white or light background seems to be larger than the white copy on a dark background. The wrong color scheme may result in poor readability which in its turn leads to poor user experience: users aren’t able to scan the data, even more – even if the data is relevant but not readable, users feel the inexplicable tense struggling with the text or even miss some critical information.

Any color scheme may be readable enough if the designer studies the peculiarities of copy perception on different backgrounds and works carefully on the font choice. The nature of the content presented in the interface also plays its part: text-based interfaces aimed at reading as the core activity tend to use more color schemes based on light backgrounds while the image-based interfaces often apply dark backgrounds to amplify pictures performance and give them deeper look.

Travel Planner app uses a light background to make copy content readable even on the go

The webpage for the Tea Club website splits the screen with color and features copy content on the light background.

The page for a bookshop website is based on a dark background so the choice of fonts, their size, and contrast are different to ensure readability 

Typography

In basic terms, typography is the skin of the text content. The choice of fonts directly influences how quickly and easily users will perceive and decode the copy. Font size, width, color, and text structure – each particular point matters. What’s more, as well as images, fonts are able to add mood to the written message with their visual style. Typography in design is the art of balancing aesthetic text with the ability to read it quickly – and this game is not as easy as you may think.

In the aspect of making content clear, there are several impactful points such as:

• white space (negative space): the area between elements in a design composition
• alignment: placing and justifying text
• tracking: adjustment of space for a group of type characters which form a word and text block
• kerning: adjusting the space between two type characters
• leading: the spacing between the baselines of text
• line length: the number of characters used for one line in a block of text.

Working on the mentioned characteristics, designers tune the performance of text to make it not only eye-pleasing but also read easily. Not enough space between the words, too little distance between the lines or letters, too small font size or color that doesn’t create contrast with the background – all that stuff makes the text hard to read and creates tense for the user’s eye, although readers often can’t even explain what’s wrong. The balanced length of the line makes text bulks more readable and digestible for users. That is why designers pay much attention to typography issues in the creative process.

In the Nature Encyclopedia App the designer chooses readable sans-serif font to make the text easy to read; what’s more, for the charity pages, that feature more text, the background is changed to light. This contrast both enhances readability and marks the different nature and goals of the screens.

Visual Hierarchy

Visual hierarchy is an approach to content organization that makes the levels of content priority clear. It is based on Gestalt theory that deals with the psychology of visual perception of elements and shows how people tend to unify the visual elements. 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.

It’s not a secret that coming to webpage users don’t start reading all the content as it is, they start with scanning it. For example, when we see the article in the blog, we’ll get the headline first, then subheadings, and only then copy blocks. Does it mean that the information in the copy blocks has a low level of importance? No, not at all, but this way users will be able to scan the headline and subheadings to understand if the article is useful and interesting for them instead of trying to read all the text. And if the headline and subheadings are done properly and inform the user about the structure and contents of the article, this will be the factor convincing to read more. On the other hand, if users see the huge and long sheet of text, they will be literally scared as they won’t understand how long it takes to read the article and if it is worth investing their time and effort.

So, with text content, it’s vital to present information gradually. For a copy, we are talking about the typographic hierarchy which includes different elements such as headlines, subheaders, body copy, call-to-action elements, captions, and so on. To build an effective visual hierarchy, all the elements need to be segmented into different levels.

The primary level. It includes the biggest type like in headlines. It aims at providing core information or drawing attention to the key benefit.

The secondary level. This is the type of elements that supports scannability, such as subheaders or captions which help users quickly navigate through the content.

The tertiary level. This one is for body text and additional data. It features a relatively small type still it should stay readable.

Negative space

Negative space (or white space as it’s also called) is the area of the layout that is left empty. It may be not only around the objects you place in the layout but also between and inside them. Negative space is a kind of breathing room for all the objects on the page or screen. It was already mentioned above as one of the factors of effective typography, but it also important in general user interface layout to set the connection between the text and non-text elements. For example, the amount of negative space will help you to see if the text and photo are connected to one message like in the case of image caption.

The architecture blog uses negative space as one of the core solutions enhancing the perception of content in the web interface.

Writing

As we recently told in our article devoted to UX writing, the text content in an interface is based on 4 basic features:

• clear (users understand what you talk about, the core message isn’t blurred or complicated)
• concise (the piece of text is meaningful, laconic, and concentrated on the goal, no empty talk is included)
• useful (the copy gives users necessary information or helps with interactions)
• consistent (the copy within the interface of one digital product keeps the same style, tone, voice, and terminology).

The good thing you can do with the written content for users of the app, website visitors, and blog readers is creating an atmosphere of human-like communication. Make your interface, landing page, or email talk like a helpful and friendly human with a clear style and voice of communication, without trying to awe and shock the interlocutor.

Tips on Better Readability and Legibility

1. Be short and consistent in the interface copy

Decide upon the main terms and names of operations and use them throughout the messages and notifications. For instance, if you’ve selected the word “delete” to mark the specific action, use it every time when this action is meant to be done, and don’t replace it with “remove” for some screens if the action is the same. Ask users to “Pay” instead of “Make a payment” – that’s easier to scan, faster to read, and you can make one word look bigger than a phrase for the button microcopy. Synonyms and elaborate phrases are good for making language bright and vivid in articles or books, but they may ruin user experience making users find the connections between synonymic terms instead of just using the product for solving their problems.

2. Apply content personalization

One of the ways to personalize the user interface and make it closer to users’ preferences is by letting users change the color of the background and set a bigger or smaller size of letters. Such functionality has a great impact on making content even more readable as nobody knows better than users what is more convenient for them.

Upper App allows users to choose the theme color that is the most convenient for them

3. Consider split screen for different types of content

Split screens got especially popular for interfaces based on the dark or bright background scheme. It features one more approach to proper readability: applying boxes or spaces with the light background for core data blocks, designers make the content more readable and add elegant contrast to the screen or page.

Watering Tracker App

4. Put one idea into one block of text

Working on the content in the aspect of scannability, try not to make the text fragments too long. Short paragraphs look more digestible and can be easier skipped in case the information is not valuable for the reader. So, follow the rule when you present one idea in one paragraph and start another one for a new thought.

5. Use numbers

Nielsen Norman Blog shared an interesting research finding: based on eye-tracking studies while users scan web pages, numerals often stop the wandering eye and attract fixations, even when they’re embedded within a mass of words that users otherwise ignore. People subconsciously associate numbers with facts, stats, sizes, and distance – something potentially useful for them. So, using numbers instead of text numerals, you influence the legibility and scannability of the text.

Website design for the environment protection community uses numbers as a part of the design layout and this way attracts attention to important data.

6. Don’t forget about the lists

One more good trick to make the text more legible and easily scanned is applying lists with numbers or bullets. They help to organize information clearly. Also, they catch the user’s eye so the information won’t get lost in the general body of the text.

7. Visually mark the key information in the text

Bold, italics, and color highlighting words or phrases in the text are old school but they still work successfully. This way you may attract attention to the specific data included in the paragraph. What’s more, the clickable parts of the text (links to other pages) must be visually marked. We are used to seeing them underlined, still highlighting them additionally with color or bolder font is even more effective.

8. Check the contrast

Contrast has a direct influence on the ability to distinguish text elements and read them quickly. Too little contrast makes the text elements coalesce into illegible spots, too much contrast causes eye tension and makes reading physically hard. So, firstly, remember about color theory that will help you to choose the palette with good contrast, and secondly, test the interface on different screens to make sure the contrast works properly in different conditions.

9. Play with fonts using common sense

Choosing the fonts, designers often want to apply something original and elaborate. Make no mistake: readability shouldn’t suffer for the sake of beauty. Still, it doesn’t mean that you should pass up the beautiful and catchy fonts: the typographic hierarchy helps to make good use of them. Sans-serif fonts are usually more legible while serif fonts look more elegant. Using a sophisticated or experimental font for a short tagline featured in big letters won’t harm the ability to read it quickly due to the considerable size of copy content. But if you choose it for long fragments of copy, the impact on readability may lead to poor user experience. Also, mind the color scheme: for example, dark background absorbs some part of the light from the other elements so there should be enough empty space between the elements, differently than it would work on a light background.

And this landing page features the choice of a serif font Domaine for the tagline. It visually reflects the style of the hero illustration. Yet, for the description copy block, the designer chooses a sans-serif font that is highly readable. 

10. Give the text enough air

As we mentioned in the article about negative space in user interfaces, if there’s not enough space between the elements, they become hard to read and demand additional effort. It may be a strong reason for eye and brain tense although many users won’t be able to formulate the problem. A proper amount of negative space, especially micro space, solves this problem and makes the process more natural. So, negative space directly influences the efficiency of typography on the page or screen. In music, pauses play the same role as sounds. In reading it works the same way: empty spaces placed correctly make the text easier to read.

11. Divide the blocks of content

One of the natural ways to divide the blocks of content is using subheadings or traditional dividers using horizontal or vertical lines. This way you let readers or users easily separate different elements and understand their interconnection in one layout. The negative space mentioned before also effectively works as a divider. Another way is by using images. It may appear not logical at first glance, but images do help to make the content readable and legible. For example, used in articles, they work as elegant and informative dividers that both illustrate the text content and separate different parts of it. With an image, you give users a brief rest from reading and even a long article may look not that overwhelming as it would without pictures. Illustrations, photos, and 3D graphics catch users’ eyes much quicker and are faster decoded than text. So, the images can work as directional cues and navigate users to the messages or calls to action presented in text form. Also, it’s advisable to make text harmonically work together with key images on the page or screen: this way they amplify the effect of each other.

The landing page for the Dance Academy divides the copy content into scannable blocks supported with images

12. Use the power of title case

Although there are hot discussions about using sentence case instead of title case to make the text feel more informal, for English speakers, it’s still a natural feature of the language that marks the levels of text hierarchy. So, consider the following tips about capitalization:

• Use Title Style Caps to mark field labels, actions, menu items, and page titles
• Choose Sentence style caps for longer copy such as page or field descriptions and tooltips
• Apply ALL-CAPS moderately, only to super important items (short taglines, brand name, core navigation points in website header, short call-to-action text, and abbreviations like OK).

Whatever choice you make, what’s really important: be consistent. If you decided to use the title case for all the buttons, follow that rule through all the screens.

The landing page for the Health Blog uses all-caps for button microcopy and header elements, title case in the tagline, and sentence case in the description.

Sure, all the mentioned points can be discussed further and deeper and unveil more ways to enhance the clarity of the content on the page or screen. Still, hopefully, today’s article will become a helpful checklist that will help UX designers to make the interfaces not only beautiful but also easily readable.

Useful Design Articles

UX Writing: Handy Tips on Text Improving User Experience

3C of Interface Design: Color, Contrast, Content

Negative Space in Design: Practices and Tips

User Experience: How to Improve Web Scannability

Hero Images in Web Design: When, Why and How

Color Scheme for Interface: Light or Dark UI?

Originally written for Tubik Blog, graphic content by tubik

Сообщение How to Make User Interface Readable: Tips and Practices появились сначала на Design4Users.

What Is Affordance?

Affordance is a property or feature of an object which presents a prompt on what can be done with this object. In short, affordances are cues that give a hint of how users may interact with something, no matter physical or digital. For example, when you see a door handle, it is a prompt you can use it to open the door. When you see a receiver icon, it gives you a hint you may click it to make a call. Affordances make our life easier as they support our successful interactions with the world of physical things and virtual objects.

Check the screen of Watering Tracker below. In split seconds, you will understand that the needed action is done – the tick shows it. The icons in the tab bar will give you clues about what you can do with the app: check your set of plants (this tab is active as it’s colored while the others are not), add a new plant or check your profile. These are affordances in action.

History of the Terminology

The term was first introduced by the psychologist James Gibson who deeply researched visual perception. He first used the term in his book ‘The Senses Considered as Perceptual Systems‘ in 1966. In 1979 he clarifies the definition of his terminology in the book ‘The Ecological Approach to Visual Perception’: “The affordances of the environment are what it offers the animal, what it provides or furnishes, either for good or ill. The verb to afford is found in the dictionary, the noun affordance is not. I have made it up. I mean by it something that refers to both the environment and the animal in a way that no existing term does. It implies the complementarity of the animal and the environment.” According to Gibson, humans tend to modify their environment with a wish to make its affordances suit them better and make their life easier. Learning the affordances of the environment becomes an essential part of socialization.

Being applied to design, the term referred to only those physical action possibilities of which the user is aware of. In this perspective, the term got its further development in the explorations by Donald Norman in the 1988 book, ‘The Design of Everyday Things‘. According to the expert, “…the term affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used. […] Affordances provide strong clues to the operations of things. Plates are for pushing. Knobs are for turning. Slots are for inserting things into. Balls are for throwing or bouncing. When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed.”

With the advent of various user interfaces, affordances got a new vector of development. We did hundreds of operations with diverse actions, tools, and things. Now we also do tons of operations just clicking the mouse or tapping the screen. It makes UX designers work on the new ways of presenting affordances that accumulate patterns and knowledge people have from real life in digital interactions. This experience is dramatically different so the approaches change too.

Types of Affordances in UI

Affordances in UI can be classified according to their performance and presentation. Anyway, their main goal is to actualize the knowledge and experience people already have to simplify the interaction flow.

Explicit (obvious) and implicit (hidden) affordances

Based on their performance, we can find obvious and hidden hints in UI.

Explicit affordances are based on widely known and typical prompts that direct the user to a particular action. For example, when you see a button designed as an obviously clickable element, aka visually similar to the buttons in the physical world, you understand you can click or tap it to interact. If it is supported by a text or icons the affordance becomes even more clear: it informs you what will be the feedback from the system.

A CTA button of this e-commerce webpage is clear as a clickable element and the copy says what this button enables a user to do

Implicit affordances are not that obvious. They are hidden and may be revealed only in a particular flow of users’ actions. The cases when we get tooltips or explanations hovering on a layout element are the ones. Other examples are diverse multilayered elements of navigation such as drop-down menus or expandable buttons that aren’t seen all the time or from the first seconds of interaction but are unveiled after a particular operation. Perhaps, one of the most debatable points here is the hamburger menu that hides the access to functionality behind the special icon.

Hamburger button in the header hides the extended website menu

Graphic Affordances

Graphic affordances are presented with visuals applied to an interface and helping users to scan its functionality. Graphics of all kinds are perceived faster and memorized better than copy so their importance cannot be overestimated. Among them, we could mention the following.

Photos: theme photos, items photos, avatars, and title pictures present the visual support, from information that generally users can do with the app or website (buy, communicate, show, watch, study, write, etc.) to specific features. Let’s say, if an app enables a user to save and share recipes, it’s cool to set the immediate association using appropriate photos like in the example below.

Branding signs: logos, corporate signs, and colors applied to the website or app present an immediate hint about the connection of the UI to a particular brand which may be a strong affordance for its loyal customers.

The logo on the splash screen and in the header sets the link to the brand

Illustration: theme illustrations and mascots have a big potential of giving clear prompts to users. Below, you can see a popup informing users about Halloween stickers in Toonie Alarm with a well-known visual prompt – a Halloween pumpkin.

Icon: interface icons present perhaps the most diverse group of visual affordances. These pictograms are highly symbolic and mostly use the hints taken from the real world so that users could understand them quickly. Even more, after some icons lose the connection with the original physical objects they still present productive affordances if remembered by a big number of users: a floppy disk for “save” is a good example. A heart or a star will immediately link you to favorites, a magnifier will prompt it’s a search and a camera icon won’t take you long to understand that it’s for taking a photo.

Icons are also used as effective hints for classification of the content: categories and sections work much faster with the support of proper graphics.

Button: being among the core interactive elements, buttons came to interfaces as a well-recognized element. Before the era of GUI, it was used in a variety of physical things from simple calculators to complex dashboards. We all know well what to do with a button. The point is to make it visible and obviously seen as a button in UI. Shapes, contrast, colors, and copy all present a great help here.

Field: basically, fields present spaces in which users can input the necessary data. To make them effective, designers also activate the power of affordance: fields should look interactive such a way that people understand immediately they can type in the text inside. The interface of Recipes App below shows the search field: it’s clear that the field is an interactive element due to the shape and contrast and also it is supported with a search icon and the text prompt giving an instruction.

Notifications: there are numerous methods to hint the user that there is something missed or worth attention via notifications. Look at the cart icon in the interface for the Tasty Burger app below: a yellow dot on it gives a quick prompt that it isn’t empty.

Copy (Language) Affordances

Although users perceive images much faster than words, copy also doesn’t lose its positions having a great influence on an interaction flow. The point is that images sometimes need to be decoded with the help of the text so as to avoid misunderstandings. Another thing is that not everything may be shown in pictures. Finally, the copy has an incredibly diverse potential in transferring information, labeling the instructions and calls-to-action, explaining the functionality and supporting the efficiency of the layout with typographic hierarchy. However, the text should be given in a reasonable balance not to overload the interface.

Interactions with copy are very natural for people in their everyday life, for much longer than graphical user interfaces exist. Copy clues and prompts help to understand what to do or what to expect, what information to keep in mind: we read many of them, from signs, adverts, and instructions to newspapers, manuals, and books. In digital UI, it works the same way. It is a straightforward way to communicate with a user. For example, the сalendar screen of HealthCare app shows the variety of language affordances: except for major information about patients, we can see the copy prompt inside the search field, the call-to-action copy on the button and a textual clue given in empty fields of the calendar showing that a user can add an appointment for the day just tapping the space.

Pattern Affordances

Pattern affordances are based on the power of habit and present a huge factor in effective interaction design. Their biggest advantage is saving users’ effort to keeping many things in memory simultaneously. As we mentioned in an article presenting mechanisms of human memory to UX designers, the capacity of short-term memory is limited. So, the more patterns users learn, the clearer is the navigation for them and the better they deal with new input. There are many typical affordances of this kind: for example, we are all used to the clickable logos in website headers which usually open a home page. From one interface to the other, we know that underlined piece of copy is usually a clickable link, the information about contacts and privacy policy of the website is often found in a website footer, and three vertical points in the app layout mean “more” showing additional functions. Saving these patterns means making users feel they understand the interface. So, if there’s a need to break the pattern affordances, think twice and test it well: originality should be reasoned and clear for users.

Animated Affordances

Animation applied in user interfaces creates a strong connection between the physical and virtual world. In most cases, it imitates interaction with real things: pulling, pushing, swiping, dragging, etc. So, interface animations both basic and complex present a group of powerful affordances.

The example below shows the switch in Toonie Alarm app. When the switch is on, it changes several parameters together: the color of the tab, the color of the toggle and the animation of the sun activated. This way it immediately informs the user and also adds emotional appeal to the operation.

Another example shows the notification that appears in the flow of interaction in the Home Budget app and reminds the user about particular limitations. Its animation features pulsation and this way attracts user’s attention to the important warning.

Here’s one more case – pull-to-refresh animation. Appearing on the screen, it informs a user that the UI is being updated and adds some fun to the process of waiting.

Negative Affordances

Whatever strange it could sound, negative affordances also play a big role in positive user experience: they root in the fact that negative result is also a result. The purpose of a negative affordance is to give users a prompt that some elements or operations are inactive at the moment. For instance, the interface of the Homey app given below shows that the “Bedroom” button is active while the buttons of other rooms are inactive – so they present negative affordances. The security level also features that level 5 is totally inactive.

Here’s one more case: the tab bar shows the active button as colored while the others present negative affordances.

False Affordances

In a perspective of UX affordances, false and negative shouldn’t be seen as synonyms. No way. False affordance is what designers should avoid: these are the wrong prompts which lead users to the different action or result, not the one which is expected behind the prompt. Sometimes it’s done intentionally, but in most cases by mistake. For example, if the text in the web copy block is underlined, users automatically think it is clickable. So, they can be really annoyed to understand it doesn’t work – it means that they have been prompted the wrong way.

The brief introduction above lets us understand the significant role which affordances play in user experience design. We will continue this theme with more insights, tips and examples in our next posts, so don’t miss the updates.

Recommended Reading

6 Types of Digital Affordance that Impact Your UX

Affordances and Design

How to Perfect UX with Design Affordances

UX Design Glossary: Navigation Elements

UX Design Glossary: Interface Navigation Elements. Set 2

How Human Memory Works: Insights for UX Designers

Originally published in Tubik Blog

Сообщение UX Design: Types of Affordances in User Interfaces появились сначала на Design4Users.

Buttons are core interactive components of user interfaces which play a significant role in the quality UX as well as conversion rates of websites and applications. UI buttons vary according to their features and can be divided into different types. A new article is devoted to the type called call-to-action (CTA) buttons covering their essence, role in the intuitive navigation and the importance of business goals. Let’s see what makes a call-to-action design stand out from the crowd learning from the best practices.

What’s a CTA Button?

A call-to-action (CTA) button is an interactive element of any user interface both web and mobile: its major aim is to induce people to take certain actions that present a conversion for a particular page or screen, for example, purchase, contact, subscribe, etc.

Traditionally, effective call-to-action buttons are easy to notice, even more, designers intentionally create them that way so that people couldn’t resist clicking. That’s why they are usually bold buttons containing microcopy with a particular call-to-action (e.g. “Learn more” or “Buy it now”) which encourages us to push it.

Lead generation and purchase rise are the basic business goals which calls-to-action can be created for. When a button design is compelling enough to immediately attract the attention of potential clients, it can entice them to click and go to the next stage such as filling a short contact form or making a preorder of a product.

This way website visitors and app users can be led through a sales funnel from one stage to another helping them to learn the details about the product or service. Even professionally worked out content may not guarantee a high level of user engagement. Without CTA buttons people are more likely to scan content quickly and just leave it untouched.

Some may think that a sufficient call-to-action button design applies only a big size and bright color to accomplish all its objectives. Still, there are many more aspects ensuring the effectiveness of CTAs. Let’s see what they are along with the practical examples of their appropriate usage.

Tasty Burger mobile app screens

What Makes an Effective CTA Button Design?

Size

Size is one of the most common tools helping to divide UI components according to their importance. The bigger an element is, the more noticeable it becomes. Since CTAs’ prior goal is to draw users’ attention, designers usually try to make them stand out among the other buttons on the screen, especially via noticeable size.

Large buttons have high chances to be noticed and clicked still you have to keep some limits. A compelling call-to-action button is usually big enough to be quickly found but not too big so that the visual composition and hierarchy of the layout wouldn’t be spoiled. Market leaders often provide recommendations on the effective sizes of buttons in their guidelines. For example, Apple says that CTAs in mobile UI should be at least 44Х44 pixels, while Microsoft recommends 34Х26 pixels.

Tasty Burger mobile app interactions

Color and shape

Visually attractive size is only one aspect of a powerful call-to-action button design. To make the buttons even more noticeable it’s vital to choose sufficient color and shape. The thing is that human mood and behavior highly relates to the visual surroundings. Our mind reacts to colors and shapes while we usually do not notice it. The moment our eyes perceive color, they connect with the brain which gives signals to the endocrine system releasing hormones responsible for the shifts in mood and emotions. Psychology science has specific branches devoted to the influence of different colors and shapes on our consciousness. In our previous articles, we described the role of this impact on the design solution. Here are brief guides on the common meaning which colors and shapes have.

Color meanings:

• Red. Confidence, youth, and power.
• Orange. Friendly, warm, and energetic.
• Yellow. Happiness, optimism, and warmth.
• Green. Peace, growth, and health.
• Blue. Trust, security, and stability.
• Purple. Luxurious, creative, and wise.
• Black. Reliable, sophisticated, and experienced.
• White. Simple, calm, and clean.

Shape meanings:

• Squares and rectangles meanings: discipline, strength, courage, security, reliability.
• Triangles meanings: excitement, risk, danger, balance, stability.
• Circles, ovals, and ellipses meanings: eternity, female, universe, magic, mystery.
• Abstract shapes meanings: the duality of meaning, uniqueness, elaborate.

Traditionally, CTA buttons look like horizontal rectangles since people got used to perceiving this shape as clickable buttons. In addition, it is recommended to design CTAs with rounded corners because they are thought as they point inside of the button drawing attention to the copy.

Product card design for an eco-goods online store

Color choice depends on various aspects which make the process more complicated. Designers need to consider such factors as the basic color of the composition as well as potential preferences and psychological peculiarities of the target audience. There is one condition that is vital to keep in mind while choosing colors for CTA: buttons and background colors should be contrasting enough so that CTAs would stand out from the other UI components.

Website design for an AI-based marketing platform

Placement

The placement of CTA buttons is crucial for their capability. If they are located in the areas where users’ eyes can’t catch them, other visual aspects such as color and size might not work efficiently. But how to understand what placement is more prosperous?

Lots of studies have shown that before reading a web page people scan it to get a sense of whether they are interested. Considering this fact, designers may learn the most prominent scannable areas and place call-to-actions within the user’s path.

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 the most common for web pages with a big amount of content such as blogs, news platforms. 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.

Z-pattern 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. 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.

These patterns allow designers to place CTAs in the spots of highest attention, such as top corners and put the other points requiring attention along the top and bottom lines. Also, it is a good idea to place CTA buttons at the center of the layout, especially when it isn’t overloaded with other UI elements.

Ecommerce website design for selling herbs and spices

Microcopy

Microcopy plays a significant role in the efficiency of call-to-action. It is defined as the small components of text which serve as hints for users. To be more specific, microcopy includes buttons and menu copy, error messages, security notes, terms and conditions, as well as any kind of instructions on product usage.

CTA microcopy is actually a call which tells users what action they will take if they click the button. The powerful CTA microcopy is usually short but consistent so that it could quickly catch users’ attention.

Hair beauty company website

Perfect Recipes mobile app design

Call-to-action buttons are one of the most powerful sales tools in e-commerce and an influential factor of good conversion of a page or screen. Designers need to understand the importance of CTAs and pay deep attention to all the details having an impact on their performance.

Recommended Articles

UX Design Glossary: Interface Navigation
UX Design Glossary. Navigation Elements: Icons, Search, Tags
7 Tips to Improve Mobile Interactions
3C of UI Design: Color, Contrast, Content
9 Effective Tips on Visual Hierarchy
How to Make the Interface Effort-Saving

Originally written for Tubik Blog

Сообщение User Experience: How to Design Effective Call to Action появились сначала на Design4Users.

Tubik designers know how helpful the well-crafted animation can be for usability of digital products, especially for mobile applications. Adding to diverse design ideas and practical examples shown on our blog before, today a fresh set of concepts with sophisticated UI animations is ready for your attention. Let’s take a look at them.

Vegan Recipe App

This is a concept of Vegan Recipe app enabling users to choose the dishes based on vegetarian principles and add the necessary ingredients to the shopping list. Here you can see the basic set of interactions including choice of recipes with the horizontal swipe. When users tap on the specific recipe, they can see the detailed information on its ingredients and nutrition. The tab bar includes simple icons helping to navigate in the app.

Tasty Burger App

Another food concept is a fresh and juicy Tasty Burger App allowing users to order a traditional burger from the menu or customizing any option for themselves adding or removing the ingredients. The item screen is focused on the high-quality photo of the chosen burger making users want it even more. The ingredients are displayed at the bottom of the screen so users can add or remove them without efforts since it’s one of the easiest tap areas to reach. And finally a yellow CTA button “Add to Cart” helps to complete the purchase.

The menu screen includes brand name on the top to increase recognizability. Users can apply filters for the fast search or pick an item from “special offers”. All the UI elements in menu screen are structured due to the sufficient visual hierarchy allowing users to interact with the app.

Mobile Game App

This is the animated concept showing interactions for a mobile game Chicken Attack. It allows players to create their own networks via the set of random matches that can be skipped or added. The triadic color scheme makes UI look more playful and funny flat illustrations of chickens bring positive emotions. The animation shows how an egg breaks and one more chicken, presenting a player, joins a team. This way the basic operation of adding a player becomes lively and gets a strong association with the theme of the game.

Business Card App

Here’s the UI concept of Business Card App, an application for creating, keeping and sending contact data in a form of virtual business cards. For users working at multiple positions, it may save a set of cards as you can see in the animation. Cards in the user’s set appear by dragging the first one down.

Watering Tracker App

Here are two screens presenting some interactions for a watering tracker. It reminds users to water the plants as well as tracking the watering stats for every plant. When users accomplished watering they push a custom button with water drops and it changes into a check sign. In addition, there is the information showing when a plant needs to be watered next time, so when people confirm watering it changes the data immediately.

The second screen presents a feature of adding a new plant to the list. Users can take a photo of a plant and the app automatically defines what it is and how it should be watered.

Photo App

Here’s a UI concept for a photo app. It’s a social network that allows photographers to present their portfolios elegantly and connect to the world. The current view shows a profile screen with a photo gallery. Users can see view photos with a swipe and tap to open the full-sized versions.

Homey App

It is the UI concept for Homey, the app enabling users to apply the functionality of smart homes in their dwellings. The featured screens show that users can choose the room and see the basic data about them like temperature, humidity, and energy consumption. Also, people can tune the settings and see the expenses as well as turn saving mode and security of different levels. All the interactions are animated with the use of colors which looks especially deep on the dark background.

Loading Motion for iPhone X

Here’s a concept of a content loading animation shown in the status bar of iPhone X. When users drag it down the rainbow animation appears. This is a bright way to decrease the tense of waiting and entertain users for a moment.

Balance App

This is a concept of the Balance App, a mobile application for tracking finances. It helps users to check the balance of their bank cards easily, check the expenses along particular categories, and keep updated how much money left to the limits set by the user. The designer has chosen the green color as the basis as it is often associated with safety, confidence, and growth. The smooth animation demonstrates the transition from one screen to another.

Travel Brightly App

This is a user interface concept for Travel Brightly App. It’s a mobile application providing information about various destinations around the world. The app collects various offers on accommodation and tickets to them and enables users to share their reviews. The feature making the app really special is bright custom illustrations for every presented place. Graphics are followed by names of cities and both demonstrate the animation when users choose a city.

Mobile Menu Interactions

Here’s the concept presenting interactions with the menu of categories for a simple app enabling a user to collect and track all kinds of daily activities. Contrast colors and bold typography also contribute much to making navigation clear and intuitive. Smooth motion supports the usability and elegance of interactions.

Learn Chinese App

This is a UI concept of Learn Chinese application presenting the cards to learn Chinese characters and pronunciation. One side of a card shows the user a character and the other side allows for seeing its transliteration and translation as well as enables a user to hear it. Users can save the cards, mark them studied or non-studied and learn various thematic collections. The interesting motion makes the learning process brighter and more interactive.

Book Swap App

Here’s a UI concept of a book swapping application. It organizes the books by cards: each book card has a unique design that matches its cover. The animated concept shows the interactions with the feed showing books and their owners, and also the card of two books to be swapped. Moreover, the animation can be seen in the smallest details including the CTA button “Swap” with moving arrows.

WineYard App

This is WineYard, the application enabling users to learn about different kinds of wine, get tips on serving them and food to combine with. Also, the app gives information where the chosen wine can be bought based on the user’s location. When users push “View more”, the full data about an item appears in a smooth motion while other UI elements such as a photo and title fade away.

Cinema App

This is a UI design concept of a mobile application for the cinema chain. The first screen features interactions with the home screen showing the list of films. Films are presented via posters placed closely to each other so that users could see more options at once. Tapping on a poster people go to a screen of the particular film with all the necessary details.

The second screen shows the flow of choosing and booking the seat. Picking up a particular showing, users can see the available seats, pick the ones they like, and book them, paying right from the app.

Music News App

This is a creative concept for Music News App helping collects lyrics, news, and quizzes about music all in one place. UI is presented via a bright color scheme and custom illustrations which make an app look original. The background of a home page applies geometric shapes that change their place and colors when users swipe through the screen.

NGIN App

NGIN is the conceptual application for smart car control. The app automates the process of regular data collection informing users about the technical state of the vehicle and conditions of its exploitation. The presented screen gives the user basic current stats like average speed, distance, fuel consumption and useful notifications. The animation shows the interactions with the graph curve of the speed for the chosen period and the notification which features glitch effect to add a bit of fun and support the general stylistic concept.

Home Budget App

Home Budget application allows users to manage their expenses and incomes, creating the extended database for tracking financial flows and changes getting comprehensive stats. The animation makes interactions and navigation more intuitive despite a significant amount of data.

The second concept shows interaction with the feed of financial operations for the current day and the hamburger menu.

Recipe App

This is a mobile application providing users with database of recipes. It helps to find recipes on the basis of the supplies users currently have at home or create a shopping list to buy ingredients that are missing. The concept shows the process of interactions with recipe cards. Users can choose the right card with a side swipe. Unobtrusive and elegant animation during the first interaction can prompt about the additional functionality that is hidden under the card and available on swipe down.

As you can see, animation can become an effective solution for various problems in user interface design. Well-crafted motion components can improve navigation and make the interactive process even more user-friendly.

Recommended Reading

Interface Animation: Eye-Pleasing, Problem-Solving
Creative Motion: 12 Concepts of Interface Animation
UI in Action. 15 Animated Design Concepts of Mobile UI
Animated Interactions. Motion on Purpose
UI Animation. Microinteraction for Macroresult
Interface Animation. The Force of Motion
Case Study: Toonie. UI Animation Development

Originally written for Tubik Blog

Сообщение Mobile Motion: 20 Bright Concepts of UI Animation появились сначала на Design4Users.

You can’t build a great building on a weak foundation. You must have a solid foundation if you’re going to have a strong superstructure. Gordon B. Hinckley

Effective design always requires a stable foundation. Well-thought information architecture, as well as prudent interaction and navigation systems, are the base which forms positive user experience. It is recommended to plan the details from the very beginning of the creative process.

There are certain techniques which allow creating visual representations of layouts and sharing the ideas with everyone involved in a project. Two of these techniques called wireframing and prototyping have become a significant part of design process.

However, designers sometimes confuse a wireframe and prototype or talk about them as synonyms. Today’s D4U post discovers the differences between wireframing and prototyping and shows which objectives they help to accomplish.

What’s a wireframe?

A wireframe is a simple visual scheme which represents a layout of a screen or page of a digital product such as a website or application. They are often compared to architectural blueprints since a wireframe is usually a monochromatic illustration which shows the structure of a screen. Also, designers can use bright marks or spots to outline specific areas or design elements. There are three types of wireframes: low-fidelity, medium-fidelity, and high-fidelity.

Low-fidelity wireframes are black and white illustrations which aim at showing a “big picture” of a layout and often created manually with pencils or markers. UI elements are represented as boxes and lines followed by short captions. This type of wireframes may seem a bit abstract still it shows the basic structure of a user interface.

Medium-fidelity wireframes are similar to the previous type since they are also created in a monochrome palette. They are oriented to demonstrate more detailed and realistic layouts the reason why medium-fidelity wireframes can be created both manually or via digital tools. Another difference is that this type allows for distinguishing copy elements so that the typographic hierarchy could be set. In addition, designers provide more detailed comments on each element.

Example of UX wireframe for HealthCare App

High-fidelity wireframes (mockups) are created via digital tools. They are built in color and present the screens in the view close to the final visual performance which makes it differ from the previous. Designers pay deep attention to typography and UI elements presentation. This type can be called UI wireframes or mockups.

UI Mockups for PassFold

What’s a prototype?

A prototype is a sample model of a digital product. It is created for testing the efficiency of the solutions and decisions made about design for websites and applications. Designers think out interaction and navigation systems and try to make them as much similar to the final result as it is possible. Such an approach gives an opportunity to reduce possible problems before the development team starts their work. Making changes is much more time-consuming and expensive at the stage of development that’s why it’s vital to check the usability and navigation in advance.

Prototypes should not be seen as the analog of the final product. They are effective tools helping to improve UX design at the very first stages of the creative process. However, prototyping all the details on the final stage of UI in most cases is not so reasonable. It can be too time-consuming and in this perspective, it would be better to spend the same time coding a demo-version. Prototyping seems much more efficient and useful as the step between UX design and UI design.

Prototyping with InVision App

Wireframing vs Prototyping

High-fidelity wireframes and prototypes have been mistaken for a long time since they are quite similar in visual presentation. Nevertheless, they are different techniques which are applied at the different stages of a creative process. To find out the differences let’s see which objectives they aim at.
Wireframing objectives:

• Creating a fast visual representation of a layout.
• Visualizing an idea and share it with clients.
• Building effective information architecture of a product.
• Setting visual and typographic hierarchy.
• Making a pre-plan of a user journey.
• Thinking through UI elements placement.

Prototyping objectives:

• Giving a detailed view of the UI elements of a future product.
• Thinking through navigation and interaction systems.
• Testing design solutions.
• Reducing the possibility of UX problems and difficulty in navigation.
• Experimenting with the style and alignment of UI elements.
• Showing clients a clickable version of an interface.

As we can see wireframing and prototyping have different objectives. Wireframes are focused mostly on the structure of the page while prototypes are created to give a more detailed look at the UI elements, their style, and alignment. Moreover, prototypes have a great advantage as they give the opportunity to test the interactions similar to the final product.

We can’t say that one technique is better than the other. Even more, they can work better if they are applied together. Prototypes can be created on the basis of the static wireframes, making them clickable and interactive.

Everyone is free to determine for themselves which of these techniques to select or even maybe apply them in a combination. Everything lays in the situation and circumstances. Choose wisely!

Useful design articles

UX Design Glossary: Navigation Elements

UX Design Glossary: Interface Navigation Elements. Set 2

How Human Memory Works: Insights for UX Designers

Types of Affordances in User Interfaces

Сообщение Wireframing VS Prototyping: Specify UX Terminology появились сначала на 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.

Functional minimalism

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

Major features often mentioned in terms of minimalism approach include:

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

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

WineYard App

Brutalism

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

Typography integrated into images

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

Big City Guide

Animated hero banners

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

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

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

Dance Academy Landing Page

Custom theme illustrations

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

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

Financial Service Website

Unframed layout

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

Big City Guide

Variety of interface animation

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

Watering Tracker App

UI-friendly branding

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

Whizzly Logo Animation

Monochrome UI

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

Jewellery E-Commerce App

Progress of dark backgrounds

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

Cinema App

Light space for copy

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

Watering Tracker App

Sophistication and contrast in fonts choice

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

The Gourmet Website

Experiments with grids

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

Variety of landing pages

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

Digital Agency Landing Page

Creative parallax

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

Mood Messenger Landing Page

Promo videos for web marketing

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

Promo video design for Binned

Gamification mechanics supporting UX

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

Upper App

Boxes and cards as layout elements

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

StarDust Biker Website

Geometric elements as a part of style

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

Wedding Theme

Experimental color palettes and combinations

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

Book Swap App

No Lorem Ipsum

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

Dating App Landing Page

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

Originally written for Tubik Blog

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

We’ve already touched upon the topic of wireframing in our article about creating mobile applications, and since the topic remains actual and debatable, this time we want to devote the full article to the roots, nature, benefits and diverse issues of the wireframing process as well as the reasons why it’s advisable for designers to apply it.

What’s a wireframe?

Wireframe is a simplified and schematic visual representation of a layout for website pages or screens of an application interface. Wireframes are similar to architectural blueprints: they are usually black and white illustrations, sometimes with bright marks or spots to outline specific areas or points, that give a clear vision of the project structure and connections between different parts.

Wireframing is effective at the beginning of the design process when the main objective is to create the product’s structure. Designers use wireframes to outline visual and typographic hierarchy on user interfaces, set the interactive zones and elements, plan transitions and interactions, organize the general interface clearly for the target audience. Since a wireframe is focused on the structure, not the visual and emotional perception of the details, designers try to keep it simple. They mostly limit it to monochromatic color schemes, with boxes and lines representing copy, pictures, and all the interactive elements on the page.

Example of UX wireframe for HealthCare App

Earlier we presented the typical creative flow for the digital product we have here in Tubik by the example of creating mobile apps and mentioned the set of stages in this process:

• setting the task and initial scope of works
• estimation
• user/market research
• UX wireframing
• prototyping
• UI design
• animation
• software architecture planning
• iOS development
• testing
• release
• updates.

According to this list, it’s easy to see that UX wireframing is not the first stage of digital product creation, but it’s usually the initial phase of actual design when the future website or application gets its first visual presentation, the sketch of its face and figure. The chances are high that the actual participants in creating digital products would agree with the idea offered by UXPin team in their book on wireframing: “Whether you’re building the next hot startup or a solid website or mobile application, wireframes are invaluable in keeping everyone on the same page – not just product managers, designers, and engineers. And they can be changed really quickly to accommodate the collaborative and iterative nature of product design and development, especially in agile startups and enterprises.”

Why do you need wireframing?

Wireframing is a fast and cheap way to plan the structure of the page or screen design. What’s more, it gives numerous advantageous opportunities not only for designers but for the whole development team and for clients too. First of all, a wireframe is the first visual representation of a designer’s abstract idea. This step ensures that the developers and the clients get a clear understanding of the project’s design. Furthermore, in case the client wants to make some changes, a wireframe is much easier to reshape since it doesn’t take much efforts and time to create one.

The other benefit a team gets from the wireframes is that developers can clearly see the placement of the elements on the page. Some software for creating wireframes allows seeing all the sizes and spacing by clicking a single button that saves time for both the designer and the development team. In addition, wireframing is quite inspiring for designers. It is flexible and provides much room for experiments which makes the creative process more productive and presents the field for fresh outstanding solutions.

In one of our previous articles, we provided a bit of metaphor on the basic reasons why wireframing is always included in creative process here in Tubik. When we think about building the house, for example, we usually mean the process of the physical appearance of the construction rather than tons of projects, drawings and calculations made on paper. And yes, physically it’s possible to build the house without any project as well as it’s possible to create the interface out of thin air. However, in this case, you shouldn’t be surprised if one day the house will crack and collapse without any visible reasons as well as the app looking amazing and stylish won’t bring you any loyal users. If you want to have a reliable house, a durable mechanism, a powerful application or a highly-functional website, the recipe is the same – take your time for thorough planning and projecting. This is not going to waste your time: vice versa, it will save your time and effort you would otherwise have to spend on the redesign and attempts to find out why your product doesn’t work properly.

All in all, wireframing is an effective tool that can save time and money for both the team and the client. It helps organize development and design processes and reduce the chances of problems on future steps.

Types of wireframes

There is an opinion that a wireframe is exceptionally a low-fidelity paper sketch of the page structure with boxes and lines illustrating visual elements. Nevertheless, today modern technologies help designers create wireframes of different fidelity level within a short time and without great effort. Typically we can define 3 widely-used types of wireframes.

Low-fidelity wireframes. They are black and white illustrations focused on a “big picture” of the page. UI elements are shown as boxes and lines without detailed annotations. The wireframes of this kind are quite abstract, but they give a chance to see the basic structure of the user interface.

Medium-fidelity wireframes. This type is created in a monochrome palette, often gray-scale which makes it similar to the previous one. The wireframes can be created both manually or via digital tools so that the UI components are more detailed and realistic. Copy elements such as headlines and headers are distinguished that assists to establish typographic hierarchy. Placeholders are filled with images and the comments describing their destination.

The UX wireframes for SwiftyBeaver project

High-fidelity wireframes. These wireframes are created via digital tools. The core difference from the other types is that high-fidelity wireframes are built in color and present the screens in the view close to the final visual performance. The fonts are styled and visual elements are created with textures and shadows. The designer pays more attention to the sizes and alignment of UI components. It’s actually the static version of the app or website presented page-by-page or screen-by-screen. So, in distinction from the previous stage, they are called UI wireframes.

UI Wireframes for Saily App

Wireframing vs Prototyping

High-fidelity wireframes tend to be often confused with prototypes because they are created in colors and look realistic, similar to a fully accomplished project. Nevertheless, these concepts present different stages of the design process, have different aims and focuses. As we’ve already mentioned, wireframes are focused mostly on the structure of the page. On the other hand, prototypes are created to give a more detailed look at the UI elements, their style, and alignment: the biggest difference is that prototypes give the opportunity to test the interactions between the user and the interface similar to the final product. As we mentioned in UI/UX Glossary, the original concept behind the term ‘prototype’ is the sample model of the product that gives the ability to test it and see if the solutions and decisions made about the product are efficient. However, prototypes should not be seen as the analog of the final product as they aren’t those: their main aim is to enable a designer, a customer, and a user to check the correctness and appropriateness of the design solutions.

Interactions need to be thought out well and similar to the final result and checked thoroughly before the development team starts their work. Making alterations, adding elements, and changing transitions is much more time-consuming and expensive at the stage of development, that’s why it’s important to check the usability of the UI elements in advance. Prototyping is much more efficient and useful as the step between UX design and UI design. So, here in Tubik, we support the workflow having the sequence «UX – prototype – UI».

The prototypes on UI stage can be created for the presentation of application general looks rather than for testing and improving its functional features. And this is the trap in which it is easy to get confused. Prototyping all the details on the final stage of UI in most cases is not so reasonable as it could seem. It can be too time-consuming and in this perspective, it would be better to spend the same time on coding a demo-version. Moreover, usability should be thoroughly checked first of all at the UX stage, otherwise, it would be much harder to change inefficient solution after having accomplished a lot of work on UI. Certainly, it would be amazing to create prototypes both for UX and UI, but by far not all the designers and customers agree to spend so much time on design tasks and want to test and improve the design much faster and cheaper. Anyway, the solution of applying prototyping at different stages of UI process should be approached individually according to the requirements and goals of every particular case.

Prototypes are created on the basis of the static wireframes, making them clickable and interactive, so the designer can try out if the interface is clear and usable for a real user. This kind of testing is a key step in the design process because it allows identifying possible problems and difficulties with user interactions. There are various prototyping tools providing functionality on checking the usability of the design solutions, and research platforms which make the process even easier.

Efficient wireframing tools

Today, designers are not limited in the aspect of choosing tools for wireframing: there are plenty of them, free and paid, to set up the productive design flow. The number of tools is growing so fast that it’s easy to get lost among them.

Wireframing is an integral part of the design process here at Tubik, so our designers need a flexible and effective tool for creating wireframes that can be effective both for individual and complex team tasks. The long path of probes has led us to Sketch.

Sketch is a professional design software that allows creating the variety of art and design projects. The program is vector-based and gives the opportunity to work with layers and shapes which can be easily manipulated via the tools panel. Sketch is an effective tool for UI/UX designers because it can be applied at different stages of the design workflow starting from wireframing. The features which we see as advantages are quite convincing.

It’s vector-based. This means designers can use vector shapes and scale them without losing quality. Moreover, the artboard is still pixel aware which is a core thing for creating quality web and app design.

Effective guidelines. You can see dimensions of the components and spacing between them only by holding the alt key. This is helpful not only for designers but also for developers. When designer shares the wireframes with the development team, they can define the placement and details of UI components and layout without designer’s explanations.

Grids. Unlike many other tools, Sketch provides the inbuilt grid feature that saves designers’ time since they don’t need to create it beforehand.

Native font rendering. It often happens that fonts in a browser look absolutely different compared to the PSD and it ruins the whole picture. Nevertheless, Sketch uses native font rendering that makes fonts feel more natural and accurate in browsers.

It’s fast. Sketch is a tool oriented on web and app design, so the functionality is more concise compared to other software in the field. This makes it lighter, so it works much faster not overloading the computer which saves time (and nerve!) for designers.

Yet, there is one specific feature about Sketch: it works only on Mac and there are no exceptions. Nevertheless, if you don’t have one, you shouldn’t give up. There is still a classic option – Adobe Photoshop. Yes, it may work a bit slower but it is an efficient tool for creating wireframes, and many designers are sincerely linked to it as a multipurpose tool. Moreover, you should remember that not all the customers are ready to accept the assets in Sketch, so Photoshop will save the game in this case. It proved itself as an efficient tool. Among newer options, the star of Adobe Experience Design (XD) is also rising and winning its positions on the market and in design flows.

And, for the last point here, if you are keen on creating interactive high-fidelity wireframes, you’ll need additional tools to make them clickable prototypes. For this stage, we could single out InVision and UXPin: these tools help to add the interactivity to wireframes creating efficient samples for gathering feedback from the team and clients.

Tips on how to make your wireframing efficient

There are no big secrets about creating a quality wireframe still some tips on how to make it more productive can be mentioned for the bottom line:

Do thorough research beforehand. Do not start the wireframing process before you outline the goals, USP, target audience, and the problems which should be solved with the product.

Keep them simple. The aim of a wireframe is to create a structure of the page design, details go after.

Use a monochromatic palette for UX wireframes. Our experience proves that the design process is more productive if the designer leaves detalization for the next step.

Write annotation. If the designer plans to present a wireframe to the team, it would be good to include annotations. They help to catch and understand the ideas quicker and deeper.

Gather feedback. Try to ask the opinions of your team members and perhaps even potential users, if possible, at this stage. It is an effective way to improve your work and save your time for later stages needing a more sophisticated design.

Use a grid. It helps to place all the components in an efficient way for users’ perception.

Recommended reading

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

The Guide to Wireframing (E-book)
The Wireframe Perfectionist’s Guide
Using Wireframes to Streamline Your Development Process
What is a Wireframe: Designing Your UX Backbone
Jargonbuster: mockups, wireframes, prototypes
What’s the difference between wireframes and prototypes?
10 tips to improve your wireframes in the web design process
9 Free to Use Wireframing Tools

Originally written for Tubik Blog

Сообщение UX Wireframing: Foundation of Usability появились сначала на Design4Users.