What Are Breadcrumbs

Breadcrumbs are navigation elements used mostly in web design and supporting users in a journey around the website. Due to breadcrumbs, users get aware of where they are on the website and can get used to the website structure easier, which means that breadcrumbs present a tool for better wayfinding. Yet, breadcrumbs don’t replace the primary navigation menu; they present the secondary level of navigation and increase website usability in case it has lots of pages.

Breadcrumbs on the product page on Amazon

Why such a funny name is used for this interactive element? If you think it resembles something from a fairytale rather than from design terminology, you are right. The term echoes Grimm Brothers’ tale about Hansel and Gretel: in it, the characters used breadcrumbs to mark the way home and not get lost. On the web, it works the same way: breadcrumbs visualize the path or the users’ journey from the perspective of the website hierarchy. That’s why they are also called a breadcrumb trail.

Types of Breadcrumbs

As for classification, there are three basic types of breadcrumbs:

Location-based: they show the visitors where they are according to a website hierarchy, usually applied to websites with complex navigation schemes consisting of multiple levels.

Image source

Attribute-based: they show the visitors the trail of attributes of the page they are on.

Image source

Path-based: these show the visitors the trail of steps they took to arrive on the page they are on. This type is often referred to as less effective compared to previous ones and is not recommended to apply.

Why Use Breadcrumbs

Among the benefits of breadcrumbs as a navigation element, we would mention the following.

• increased findability: the more complex is the website architecture, the more content it has, the better organized it should be to be found quickly. Breadcrumbs give users another touchpoint to the content and help to understand the structure of the website easier
• fewer clicks needed: with breadcrumbs, website visitors can jump from one level of the hierarchy to any previous step with no effort and no need to take all the way back, which means it takes fewer clicks and transitions to reach the page they want
• effective use of screen space: crafted well, breadcrumbs take a narrow horizontal line with plain-looking text elements that don’t need much space, so users get navigated but designers have no need to overload the page
• no misinterpretation: breadcrumbs present the element which is hardly ever misunderstood by users: the behavior pattern for them has solidified through years and people rarely mistake this element for anything else
• lower bounce rate: breadcrumbs are great support for first-time visitors or people that have no everyday experience of dealing with complex websites, so the more confident they feel the slimmer are the chances of them bouncing the page. What’s more, it’s an effective way of engagement for the users directed to a particular landing page: seeing it as a part of the bigger structure shown via breadcrumbs, users can get interested in jumping to other pages and seeing more.

Minimalist product page by tubik for an e-commerce website uses breadcrumbs to follow the typical mental model users expect and help them with quick navigation.

Design Practices for Breadcrumbs

Here’s a bunch of UX design tips and practices that can help to master breadcrumbs as a supportive and handy element of web navigation. Bear in mind that none of these practices is a cure-all to apply for any website: the examples below show you how different products approach this navigation element to cover their priorities.

Don’t use breadcrumbs as the primary navigation

The key rule of thumb for breadcrumbs is using them as an addition to major navigation. They shouldn’t be seen and used as a replacement for global navigation, usually found in the website header or menu. Instead, they support and amplify primary navigation.

Place breadcrumbs above the H1 heading

The most common place where users expect to find breadcrumbs and where they work effectively as a part of the general layout is above the H1 heading. It may be the name of the category, the product, the article’s title, etc. Sure, not all the pages have visually defined H1 headings; in this case, designers find the most appropriate place, typically in the top part of the layout.

For instance, on the George website, the product page features the classic approach to the breadcrumbs: they are placed right above the H1 heading, with a slight line used as a visual divider between them. However, on the category page, which doesn’t have an obvious H1 title, the breadcrumbs just keep at the same position at the layout, below the top navigation, and visual dividers help to clearly separate the trail from other navigation elements and filters.

Consider starting a breadcrumb trail with a link to the home page

Noticeable and easy-to-reach link to the home page that allows the user to jump to the website’s main page from any point of the journey is still an essential part of web navigation. Although more and more users are getting used to the pattern when the logo featured in the website header is clickable and helps to jump to the home page, there are still many those for whom this flow is not obvious. As the breadcrumbs let users quickly define the website hierarchy and their current position in it, it’s logical to start the trail from the main page of the website.

However, if there is a text link to the home page in the primary navigation, for instance, in the header, you don’t need to double it in the breadcrumbs.

As well, in the case of a polyhierarchical website, you may want to concentrate users’ attention on a particular level or category instead of sending them to the home page. For example, Uniqlo starts the trail from the name of the major category user is browsing at the moment, letting the logo in the top left corner do the job of moving visitors to the home page.

Make the current location look non-clickable (or don’t show it)

There are two different approaches to the last item of the breadcrumb trail: you may show the name of the current page or finish it with the previous step, which means that the current page’s name isn’t shown at all. Whatever your choice, make sure that all the elements cover a particular goal and help users. If you suppose that adding the current location to the breadcrumbs is necessary to support usability, make it clear that it’s not clickable and thus looks different from the interactive elements. For the mobile experience, it’s better not to show the current location at all, as the screen space is very limited.

On the contrary, for all the other elements of the breadcrumb trail, make it obvious that they look clickable and are clickable.

Example of a breadcrumb trail on the Walmart website

Clearly separate the elements

One of the most popular separating symbols for the elements of the breadcrumb trails is the symbol “greater than” (>), which typically defines hierarchy and features the movement from the parent category to the child category. Other frequently used symbols are slash (/), right-angle quotation mark (»), and arrow to the right (→). So, designers do have what to choose from, don’t they? Some also separate breadcrumbs with the color putting them into the colored tabs that imitate the line of elements, each colored in a different shade.

Mind readability and white space

As well as for any text element, the primary goal of breadcrumbs is to make the information packed in written form perceived and absorbed easily and in no time. So, take care of making them highly readable rather than decorative. And make sure there is enough space between the elements so that it is easy to read them, visually separate the pieces of text, and click.

A clear and unobtrusive breadcrumb trail on the Google Support website

Show the website hierarchy instead of the interaction history

Unlike the fairytale characters who used breadcrumbs to mark all their way, web designers would do much more effectively turning to show users the clear hierarchy of the pages instead of all the way they got through to reach this page. Such an approach will always look more logical and, furthermore, will clarify the clear and simple path back for the visitor who could get lost otherwise. What’s more, in this case, breadcrumbs don’t work at all for users who landed on a particular page and didn’t take any steps yet.

As Jacob Nielsen mentioned in his article, “a history trail can also be confusing: users often wander in circles or go to the wrong site sections. Having each point in a confusing progression at the top of the current page doesn’t offer much help.”

Don’t clutter the page with too many elements

What if the breadcrumb trail gets too long? Sure, it won’t be good to overload the page, especially at the secondary navigation level. In the case of the too long breadcrumb trail, some of them in the middle can be hidden behind the ellipsis. But never hide the first and the last element so as not to break the logic.

In his article about breadcrumbs, Alex Zlatkus recommends not to let breadcrumbs take more than half of the page and think about such a shortening with an ellipsis inside when the trails get more than 5 items.

Image source

Sure, the final decision is up to the designers of the particular project. It should be based on usability testing, as there can be different creative design solutions that allow for organizing longer breadcrumb trails effectively.

Don’t emphasize breadcrumbs visually in the webpage layout

If you feel the urge to find a super bright and catchy solution for the breadcrumbs, consider refocusing that on the other object of the web page layout. Breadcrumbs are not the primer violin in this show; that’s not the goal behind them, so keep them stylish but moderate. No need for bright accents, bigger sizes, and impressive fonts – breadcrumbs should just provide the secondary level of wayfinding, not scream into users’ faces distracting them from more important things that solve users’ problems.

For example, the OldNavy website uses super minimalist and non-distractive breadcrumbs placed in the top left corner right below the header with primary navigation, this way sticking to a common left-to-right reading and scanning pattern. That makes breadcrumbs almost unnoticed when you don’t need them but easily found when needed.

Don’t use multiple lines of breadcrumbs on mobile

The most precious asset of any mobile app screen is space. So, optimizing your website for mobile, take special care about that aspect: if the breadcrumbs trail is just copied from the website to mobile, it may take several lines, and this way snips off the big part of the limited screen space. So, by that, you get into the higher risk that some critical elements, for example, the name of the product on the product page or the introductory text, won’t be seen at once just due to the lack of space.

Don’t apply breadcrumbs to the websites with a flat or simple hierarchy

As well as with internal website search, breadcrumbs are needed and helpful in cases when the website has multiple pages and a complex hierarchy consisting of multiple layers. Breadcrumbs are common – and expected by users – in big e-commerce websites and platforms, media and news websites, blogs, and magazines covering a wide range of topics, etc. If that’s not your case and your website has a simple hierarchy, primary navigation will be enough to let the users effectively interact with it.

Example of a breadcrumb trail on the California State University website

Breadcrumbs present the perfect example of how much details matter in user experience design for the web. Being far from primary and critical functionality but approached thoughtfully and crafted well, this interaction element can contribute much to making interactions easier and user-centered. Nevertheless, think twice and test twice before deciding upon them, as there may be more effective secondary navigation options to solve a particular task for a certain project.

Useful Articles

Here’s a bunch of articles to dive deeper into the theme of web usability and user experience design.

5 Basic Types of Images for Web Content

The Anatomy of a Web Page: 14 Basic Elements

UX Design: How to Make Web Interface Scannable

How to Design Effective Search

Web Design: 16 Basic Types of Web Pages

Directional Cues in User Interfaces

Negative Space in Design: Tips and Best Practices

Error Screens and Messages: UX Design Practices

From Zero to Hero: Look at Hero Images in Web Design

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

Сообщение Web Design Usability: How To Use Breadcrumbs появились сначала на Design4Users.

What is crucial to keep in mind is that

• text is a part of design
• text is a part of user experience.

Education app screens featuring how text helps the digital product communicate with users

The term UX Writing is often replaced with Copywriting. Do they mean the same?

Basically, no, they define different types of activities. Copywriters’ main goal is creating texts that sell something, be it products, services, tools, intellectual and creative stuff, etc. UX writers’ task is to create texts that support and enhance users’ communication with interfaces, let them clearly understand what’s going on, and lighten the negative experience in case of errors or problems of interaction.

Nevertheless, coming from the advertising sphere, the term “copy” as a synonym of “text” quickly got a toehold in UI/UX design as well. Based on that, people creating texts for interfaces were also called copywriters, much before the term “UX writer” came into play. What’s more, in many companies, people writing marketing texts and interface texts are pretty much the same people. So, don’t be confused too much: although the terms define different tasks, they are still often used as synonyms, and text pieces in UI are usually called copy.

Booking Website home page

Is Text Needed for All Types of Interactions?

We have already touched on this issue in our article devoted to relations between icons and copy in user interfaces. Indeed, visuals are transmitted to the brain much faster than text, and important pieces of information are often fixed by the brain as images even if they were obtained via text perception. In user interfaces, where basic interactions should take seconds, this aspect is crucial, and it can be seen as the real reason to turn hell out of everything into the graphics. On the other hand, there is the aspect of meaning: users can perceive images super fast, but if the message they transfer is not clear and can have double-reading, this speed will not bring a positive user experience.

There are loads of widely recognized graphics and associations, such as a telephone receiver for a phone call, an envelope for mail, a magnifier for a search, and so on. Certainly, using them, you create a much faster perception of the UI functionality than using copy instead of an image. Nevertheless, in cases when the image of an icon is not so obvious, its usage should be thoughtfully contemplated. There are cases when text transfers the idea or data more clearly, so it is an effective solution to use the double scheme when the icon is supported by the text.

Travel Planner App doesn’t use text labels for icons in the tab bar

OtoZen application for save driving supports the icons in the tab bar with clarifying text labels

4 Basic Features of Effective UX Text

The copy content in any interface is based on 4 foundation stones: it has to be

• 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)

Now, let’s review some practices helping to create texts that support the positive user experience.

Perfect Bouquet App

Useful Tips on UX Writing

1. Integrate real copy in UI as early as possible

Working on early versions of a user interface, UX designers tend to use the so-called Lorem Ipsum. It’s a kind of popular placeholder text that looks like Latin but really doesn’t mean anything. It’s aimed at creating a natural-looking piece of text in the layout of a webpage, mobile screen, magazine or newspaper page, etc.

Onboarding screens for the Manuva app at the UI design stage, using Lorem Ipsum for placeholder copy blocks

When you are deep in the design process, it is really tempting to just copy-paste the nonsense text into the places planned for copy blocks. Why is it a not-so-good idea?

Firstly, the text is a part of the design. Various letter combinations look different. Words have different volumes and structures. It’s especially true for a tagline that presents one of the most important elements of webpage visual hierarchy and is scanned in the first seconds of interaction. So, what pleases your eye in Lorem Ipsum may not work with real text that will be used on the page or screen.

Secondly, by using the realistic text, you make a prototype feel genuine and natural. Let’s say, if you design a website selling cooking equipment, you won’t use photos or illustrations of agriculture machines for placeholders, even at the earliest stages of the design process, will you? Why? Because it won’t connect the design concept with the goals set for this product. The same happens with the text part of the layout. The copy you use should create a united image and experience with all the other elements of the layout. What’s more, you can spend hours working out the great looks for notification pop-ups, system messages, and webpage text blocks – and all that effort will be wasted when you realize that the real copy to be used in this UI is different in its length, structure and perhaps even message.

Onboarding screens for Bees and Honey app concept

Shipping company website

2. Build a solid text hierarchy allowing users to scan the page content

In our article devoted to web scannability, we have already mentioned the well-checked fact: users don’t start an interaction by reading every text element on the page or screen. They scan it in search of the hooks that can catch their attention: if they are convincing enough, the user makes a decision to give the resource a second look, attentive and diving into detail. Although pictures of any kind are much more catchy and faster perceived, in many cases, text becomes the element that plays a crucial part in decision-making. One of the reasons is that from one generation to another, we are traditionally accustomed to seeing a text as a main source of information.

Grounded on that, keep in mind that the main message presented in text form would better be quickly found in the first seconds of interaction. All the text elements should be organized according to the typographic hierarchy so that by scanning the page or screen, the user could quickly understand which part carries the core message and which is less important. Also, it’s advisable to make text harmonically work together with key images on the page or screen (illustration, photo, 3D rendered image, etc.)

Dance Classes platform website

Health Blog home page where all the copy elements are connected to the hero image

3. Catch attention with numbers and marked elements

One of the investigations of user behavior provided by Nielsen Norman Blog shared an interesting 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 they are hooked with the numbers included in the copy while words representing numerals can be missed in the bulk of the text. In addition, whatever numbers represent, they are more compact than their textual variant, which enables designers to make the content concise and time-saving for skimming the data.

Everything mentioned above can be a reason to break some rules and habits. Traditionally, we are recommended to spell the numbers at the beginning of the sentences, spell the numbers from zero to ten, etc., and you may follow all that successfully in articles and other types of copy content presented with a big amount of text. However, for the texts accompanying the interactions, you should be as focused as possible, and it’s a good idea to catch users’ attention with numbers.

Habit Builder mobile application

Dance Classes app

Also, don’t forget about the ways of marking out the specific information that came from book and magazine design: bold and italic fonts, word sizes, negative space, different colors, or highlighting – all that stuff worked many years ago and still works successfully today. Just don’t overact, don’t overwhelm users with too many elements trying to catch their attention. As Aarron Walter said, “If everything yells for your viewer’s attention, nothing is heard.”

Construction company website with a typography-based design that marks the keywords with different color.

4. Be focused and grammar-flexible

No doubt, clarity and grammar correctness build the foundation of a good experience when it comes to text. However, it may work differently if you write a microcopy for a button or the message is limited to a rather small number of characters on a pop-up screen. So, here you have to decide on being grammar-flexible, which means avoiding complicated constructions and reducing the elements that do not play a vital role.

For example, Material Design guide on writing advises avoiding unnecessary punctuation such as periods in copy for labels, hover text, bulleted lists, dialog body text, or colons after labels.

As well, for UX copy, they recommend using present tenses but in their simple forms.

Also, keep in mind that choosing Active Voice instead of Passive whenever it’s possible is a good idea. In most cases, it looks more natural and clear; in addition, it may be more user-friendly for users who are not advanced in English.

Just always remember that the main goal of the text in mobile or web interface is to inform. Daily overwhelmed with tons of information; users want to get it quickly and effortlessly – so give it to them. It’s not about breaking all the rules and communicating with unnatural phrases. It’s about the best expression of text minimalism, cutting off the stuff that’s not essential. It’s about using simple and direct language clear to various users.

Blog App

Nielsen Norman Group even posted the article sharing the list of cringe-worthy words and phrases that you would better avoid in UI texts, among which:

• very (and other intensifiers):
• utilize
• enable
• we understand (in today’s fast-paced world…) and other blah-blah stuff
• end-user

That’s especially true for mobile interfaces, which are strictly limited in space that can be used for copy content, and with them, you have to take into account that users often deal with apps on the go. The issue of being clear and readable directly influences user experience and conversion level. So, a question like “Save changes?” looks more effective here than “Would you like to save the changes?” or “Do you want to save the changes?” or “Please confirm that you would like to save the changes” and so on.

Delivery screens for Tasty Burger App

5. Do A/B testing for the copy of interactive elements

Buttons copy is one of the crucial parts of user experience: if you are not into UX design and writing, you could be surprised how much time and effort should be devoted to these small but impactful elements of the layout. What is written on the button should direct users to the action and let them understand what happens next. So, as well as you test design solutions such as color, placement, or the size of the button, you are recommended to make the text of the button label another object of A/B testing. Especially, if you are not a part of the core target audience: for instance, you create the product for elderly people with a low level of tech literacy while you yourself are a young advanced user of various software and gadgets. Testing will give you an understanding of how real users perceive the label and what kind of text is more convincing for them.

Home page for the web platform to find and hire artists

Buttons often offer the choices to a user: we can accept, delay or cancel something, Writing text for such elements, remember the idea shared in one of the recent explorations by Nielsen Norman Group: “The copy that you use in choices on your interface asks people to agree with a statement. That statement is often about themselves or the actions that they wish to take. It’s important from a user-experience standpoint and from a business perspective to write interface copy that supports rather than undermines the decision-making process. Trust, expectations, and positive self-image all shape the associations that users will have with a product. An honest, direct presentation of choices creates trust and positive emotion.”

Mobile screens for a cookbook app

6. Build natural and consistent dialogue

The best thing you can do for your user with the written content is to create a feeling of communication with a human. A human that has a clear style and voice of communication is helpful and doesn’t try to reinvent the wheel at every step just to emmarvel you. Decide upon the main terminology and names of operations – and use them throughout the messages and notifications: for example, use the word “delete” 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. Synonyms 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 to solve their problems.

Here’s another example from the Material Design guide on writing.

Music Learning application 

7. Make your text feel like the users’ friend

Supporting the previous idea, keep the style of the dialogue that corresponds to the target audience’s expectations. Being clear and friendly is more important here than being linguistically elaborate – the only exception is when target users do expect this kind of language. User research is your homework in this case: it allows both designers and writers to clarify a proper style choice for not only visual but also copy solutions.

Profile creation screens for Inspora, the virtual stylist

Onboarding screens of an app for hiring vintage cars

8. Avoid slang

By slang, we mean here any kind of specific and technical terms that can confuse users. For example, when you inform a user that the video is buffering, are you sure he or she knows what that means? If yes, that’s a good choice of text. If not, look for a simpler word. Don’t use “enable” instead of “turn on,” which is much clearer for most people. Here’s an example from Alfresco Writing Guide.

9. Don’t forget about capitalization

Basically, capitalization is writing or printing in capital letters or with an initial capital. There are three levels of capitalization:

• all-caps (all the letters are capital)
• title case (the first letter of each word is capitalized, excluding prepositions up to 4 letters and articles)
• sentence case (you only capitalize the first letter of the first word and proper nouns, as you would in a sentence).

Landing page design for security service

Now, there are hot discussions about using sentence case instead of title case as it feels more friendly and informal. However, for English speakers, it’s still a natural feature of the language that, apart from feeling the text as less or more formal, marks the levels of text hierarchy. So, the decision is up to you, of course, but 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), and avoid it in all the rest of the cases.

Whatever choice you make, what’s really important: be consistent. Make a decision once – and follow it through the whole interface. If you decide to use a title case for all the buttons, check that you keep that rule all the time. Inconsistency distracts and even annoys users.

Sign-up screen for a restaurant app

10. Start from the most important information

This advice seems to be super simple, so that’s surprising what a big number of people dealing with copy don’t follow it. In the case of short text, instruction, or message, focus only on valuable information, and don’t distract users with too much lead-in and warm-up text. Sure, it doesn’t mean that you have to come up with only dry, unemotional information-only texts, yet try to minimize the supportive part and maximize the active one. For longer texts, such as articles, guides, product descriptions, and the like, consider using the principle from journalism called the Inverted Pyramid Principle. It’s when you go from what’s needed to know to what’s nice to know, from the core message to the details which may be not that vital.

The home page for the Gin Scholl website uncovers the information gradually, from the core message to the details.

All the mentioned tips are not the cure-all: the decisions upon them have to be based on studies and analysis for each particular case. There are numerous factors that influence the creation of copy for interfaces, from purely design ones to a general brand strategy that defines the style of communication with users. Anyway, we hope that the list collected above will help you to come up with creative lines supporting a positive user experience. Sure, there are more points, cases, and examples to discuss and consider in the domain of UX writing, so we will continue the theme in our upcoming posts. Don’t miss it!

Useful Reading

Guide into Types of Copy for Mobile and Web Interfaces

Material Design: Writing

3C of UI Design: Color, Contrast, Content

Inverted Pyramid: Writing for Comprehension

Interface Copy Impacts Decision Making

Tips on Applying Copy Content in User Interfaces

User Experience: How to Make Web Interface Scannable

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

Сообщение How To Make Text Improve User Experience: Insights Into UX Writing появились сначала на Design4Users.

Modern UI buttons are really diverse and can serve plenty of purposes. Typical and frequently used buttons which present an interactive zone are usually clearly marked out for visibility, having a particular geometric shape, and often supported with the copy explaining what action will be fulfilled via this button. Designers have to apply considerable time and effort to create effective and noticeable buttons that are naturally integrated into the general stylistic concept but are contrast enough to stand out in the layout.

Let’s check the types of buttons widely used in mobile and web interfaces.

CTA Button

A call-to-action (CTA) button is an interactive element of a user interface that’s aimed at encouraging a user to take a certain action. This action presents a conversion for a particular page or screen (for example buy, contact, subscribe, etc.), in other words, it turns a passive user into an active one. So, technically it can be any type of button that is supported with a call to action text. What differentiates it from all the other buttons on the page or screen is its engaging nature: it has to catch attention and stimulate users to do the required action.

The home page for uMake website features instantly noticed contrast CTA button echoing the same style in the header and in the hero section.

The yacht hiring website uses the bright color contrast to make the CTA button instantly noticed and amplifies the effect with the smooth web animation.

Here’s the home page of an e-commerce website selling books for kids. In the featured slide, there is one core action set as a goal for the page: getting a user to subscribe to the mailing list sharing. So, the button is designed as one of the most noticeable elements of the layout so that the user could instantly see how to do the action as soon as he or she is willing to do it.

Text Button

Here the terminology is transparent: it’s a button presented with a piece of text. It means that the copy isn’t integrated into any shape, filled tab, or anything like that. So, it doesn’t look like a button in our standard understanding of this phenomenon in the physical world. The copy is its only visual presenter. Still, it’s a live control that allows users to interact with an interface. You can also see these buttons marked with color or underlined. Also, used in the website header, text buttons connect a user with the core content sections of the website – and in this case, they aren’t marked anyhow as all (or most) elements in the header zone are interactive by default. Text buttons are usually used to create secondary interactive zones without distracting from the main controls or CTA elements.

Here’s an elegant website design for a fashion store. As you can see, the interactive part of the layout is based on text buttons. Only the main CTA element is presented as an easily decoded button. All the others feature only copy in both header and tabs for offers. Such an approach supports the general light and minimalistic style of the webpage.

This product page for the e-commerce website selling neon signs features a set of text buttons in the header, marking the actual one with the underline.

One more effective way to use text buttons is various interactive menus, like this one featured on the e-commerce website selling egg products.

Dropdown Button

The dropdown button, when you click it, displays a drop-down list of mutually exclusive items. You can often come across this type in the settings button. When a user chooses one of the options in the list, it’s usually marked as active, for example by color.

HealthCare app interaction flow shows the buttons opening the lists of details a doctor can add to the particular bill: when the button is clicked, it opens the dropdown list of options. As soon as you choose one, the big button disappears leaving the option chosen and the small plus button in case you want to check the list once again.

Hamburger button

It is the button hiding the menu. When you click or tap it, the menu expands. This kind of menu (and button as well) got such a name due to its form made of three horizontal lines that look like a typical bread-meat-bread hamburger. Today it is a widely used interactive element of web and mobile layouts; still, debates about its pros and cons are still hot.

Active internet surfers visiting diverse websites on a regular basis know by default that this button hides the various categories of website content so this trick does not need additional explanations and prompts. What’s good, hamburger menus free the space making the interface more minimalist and airy; from the point of functionality, it saves a lot of space for other important layout elements. Additional benefits can be mentioned for responsive and adaptive design hiding navigation elements and making the interface look harmonic on different devices.

The arguments against the hamburger menu are based on the fact that this design element can be confusing for people who do not use websites regularly and can get misled by the sign that features a high level of abstraction. It may have a negative influence on navigation and can become the reason for poor user experience. So, the decision about applying the hamburger button should be made after user research and definition of the target audience’s abilities and needs.

Although hamburger menus still belong to controversial issues of modern web and app design, they are used frequently.

Here’s an example of a website using the functionality of a hamburger menu. It allows for hiding the extended menu of options to concentrate the user’s attention on impressive visuals and core information.

Plus Button

Being clicked or tapped, plus button enables a user to add some new content to the system. Depending on the type of an app, it can be a new post, contact, location, note, item in the list – anything that is a basic action for the digital product. Sometimes, by tapping this button, users are directly transferred to the modal window of creating content, in other cases, there is also a medium stage when they are given additional options to choose from and make adding content more focused.

The Task Manager app interface features plus button in the bottom right corner of the screen to make it accessible and easy to use.

The Event App features the plus button on top of the screen and opens the screen of creating a new event.

Expendable Button

This button opens a variety of options after being clicked or tapped. It is one more way to set the proper flow of interactions without overloading the screen, which is particularly important for mobile interfaces limited in screen space.

Here’s how the expandable button works in the Habit Builder application, allowing the user to create and tune the new habit to track.

In the Finance Management application, the expendable button is on top, integrated into the calendar stripe.

Here’s the Travel Planner application: the central interactive element of the tab bar is a plus button allowing a user to add a new trip or a new item to a particular trip. To make the experience simpler, the button is expanded into a set of buttons marking definite types of content, so that the user could make the choice at the start and reach the necessary screen.

Share Button

With the high popularity of social networks, chatting, and emailing, these buttons simplify the process of connecting an app or website content to a user’s social profile. The button of this type enables a user to share the content or achievement directly to social networking accounts. To make the connection clear, it is presented with icons that feature a brand sign of particular social networks and are easily recognizable. Quite often now, if sharing is not the key action expected from the user on the page, they aren’t marked anyway as buttons (no additional shapes, color marking, underlining, etc.) – you just see the icons, but they are interactive. Such an approach supports minimalism and the effective use of negative space. It also lets users concentrate on the main functionality but always see the signs of quick access to their social profiles.

The blog page for the Credentially website features a vertical set of share buttons on the right side of the screen.

Ghost Button

Ghost button is a transparent button that looks empty. That’s why it is also called “empty”, “hollow” or even “naked”. Its visual recognizability as a button is typically provided with a shape bordered by quite a thin line around the button copy. This kind of button helps to set the visual hierarchy in case there are several CTA elements: the core CTA is presented in a filled button while the secondary (still active) is given in a ghost button.

Here’s the sign-up screen for a restaurant app. It features buttons of three different types: the core CTA is presented with the filled button that offers the most popular and easy way to sign up quickly; the ghost button offers access to less popular option; the text button is integrated into the next line as an answer to a question and marked with color. Such an approach helps to build a solid visual hierarchy of the buttons on the screen.

Floating Action Button (FAB)

In Material Design, the floating action button (FAB in short) is the button that presents the primary action on the app screen. Typically, it’s a round icon button elevated above other page content. This button usually gives instant access to essential or popular actions users do with the app. Depending on the design and information architecture of the mobile application, FAB can:

• perform a typical core action (open the screen of a new email, open the screen for adding the photo or video content, search for the needed content in the gallery, etc.)
• show additional actions
• transform into other UI elements.

The position of FAB on the screen is usually determined by the factor of high visibility and may vary according to the general design concept of the app screens. The rule of thumb is to use only one FAB per screen, not more, to avoid loss in concentration.

Here’s a flow of interactions for travelers’ diary applying the bottom app bar, overlapping FAB, and woven image list.

Factors of Effective Button Design

Size. Size is one of the core ways to inform users about the importance of a layout element and build the hierarchy of components. An attractive and efficient call-to-action button needs to be big enough to be quickly found but not too big so that the layout structure wasn’t spoiled. Market leaders often provide recommendations on the proper 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. If you design for mobile, the requirements for different types of buttons may be quite strict so study the guidelines thoroughly to minimize the risks of app rejection due to poor UI design.

Color. To make some buttons easily noticeable and some secondary, it’s vital to choose a proper color. The thing is that human mood and behavior highly relate to the visual surroundings, and the color is one of the most powerful tools in this aspect. It is vital to keep in mind while choosing colors for CTA: buttons and background colors have to contrast well in order to make the button quickly stand out from the other UI components.

Shape. As for CTA buttons, they often look like horizontal rectangles. The reason is that you want to make it clear this button is clickable and interactive, and people are used to perceiving this shape as a button. In addition, it is recommended to design CTAs with rounded corners because they are thought of as they point inside of the button drawing attention to the copy. Sure, this decision is made in case the shape harmonically combines with the general stylistic concept chosen for a webpage or mobile app screen.

Placement. The placement of buttons is crucial to building up a solid visual hierarchy and clear navigation. 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. Designers have to learn the most scannable areas and place buttons of the core functionality within the user’s path.

Copy. The powerful button microcopy is usually short but consistent so that it could quickly catch users’ attention. It’s often performed in capital letters to make the copy even more attractive in the layout. Still, that’s not necessary, the decision is made according to the general design concept, typography, and mood of the text message.

Here’s the landing page design for a kindergarten. Let’s review all the buttons used on the page:

• the core CTA button inviting visitors to join is instantly noticeable: the designer used a rounded rectangular filled button of the color that contrasts with the background but sets the visual connection to the animated hero image, the most prominent visual element on the page. The CTA text is given in simple readable font featuring all capital letters
• the header features 4 text buttons that connect users to the important content sections on the website.
• the left part of the header features the secondary CTA button that is quickly scanned and allows already registered users to enter their accounts.
• the share buttons are placed into round shapes but aren’t given too much color contrast so that to be easily found but not to distract users from the main CTA.

Obviously, there are more types of buttons to discuss and check with UI design examples. So, we will continue the review in our next posts, don’t miss the updates.

UX Design Articles To Read More

If you want to check more creative sets of UX design concepts and articles on best design practices, here they are for you.

22 Impressive Web Design Concepts for Various Business Objectives

5 Basic Types of Images for Web Design

Negative Space in Design: What It Is and How To Use It

How to Make User Interface Readable: Tips and Practices

Hero Images in Web Design: When, Why, and How to Use

The Anatomy of a Web Page: 14 Basic Elements

Photo Content in User Interfaces: 7 Basic Ways to Use

Take My Money: UX Practices on Product Page Design

5 Pillars of Effective Landing Page Design

12 UI Design Trends for Web and Mobile We Started 2022 With

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

Сообщение Basic Types of Buttons in Web and Mobile User Interfaces появились сначала на Design4Users.

Illustration by Tubik Arts

What Is Negative Space in Design?

Basically, negative space – or white space, as it’s often 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. Not only does it define the limits of objects but it also creates the necessary bonds between them according to Gestalt principles and builds up effective visual performance. Due to that, white space is a rightful design element that has a big impact on positive user experience. “White space is like a canvas: it’s the background that holds the elements together in a design, enabling them to stand out” – says Mads Soegaard from Interaction Design Foundation.

Negative space in graphic design is often seen in logos, on illustrations, posters, and creative lettering where it becomes an active part of the visual presentation making key objects even more expressive. For example, in the blog illustration below we can see how the background element (moon) plays the role of contrasting negative space making the astronaut look more vivid and dynamic.

In UI design for websites and mobile apps, negative space is a big factor of high usability and navigability of the interface. The negative space around the layout elements is also called macro space whereas the space between them and inside (for letters and stroke elements) is also called micro space.

Health blog layout looks airy and readable due to the skilfully applied negative space

What Is the Difference Between White Space and Negative Space?

Short answer: no difference. These terms are fully interchangeable. Why is this phenomenon called in two different terms? It’s easy to answer if you trace the origins. The term “white space” comes from print design since the times when pages were mostly white, so white space was everything around, between, and inside the letters or symbols as well as around illustrations. Today, used in design, this term has nothing to do with white color: it’s all about empty space rather than color. The term “negative space” comes from photography: on a photo shot, they define positive space (objects attracting attention) and negative space (background).

What is important to remember is that negative space in web design doesn’t have to be only white. You can use any color, texture, even pattern, or background image.

Balloon rides website employs animated full-screen photos and videos which set the negative space for text content and navigation elements

Why Is Negative Space Important?

Imagine yourself coming into a room fully packed with various staff. Shelves, boxes, bags, piles of books and clothes, the desk cluttered with various things. Will you be able to concentrate on such conditions? Do you really need all those things right now? Will you be able to find what you need and how much time will it take? Well, that’s pretty the same as what users feel opening the page or screen without a vital air of negative space.

Both clients and some designers may want to put as many elements and features as possible on one page or screen thinking that it will save the game and will be helpful for clients. But that’s a mistake: in fact, users don’t need everything at once. Even more, too many elements without enough air significantly raise the level of distraction: overloaded with information and interactive elements most of which they DON’T need, users will have to make an effort to find what they DO need. As Aarron Walter mentioned, “if everything yells for your viewer’s attention, nothing is heard”.

Among the benefits of a thoughtful approach to negative space in design, we could mention the following:

• it supports scannability of the page
• it enhances visual hierarchy
• it makes the bonds between the elements visible and naturally perceived without additional means like tables, frames, arrows
• it provides enough air on the page so that it didn’t feel cluttered
• it sets the user’s focus on core elements and reduces the level of distraction
• it adds style and elegance to the page.

For example, let’s look at the landing page of the Big City Guide. Here the designer applies a background photo and it plays the role of negative space on a macro level. Even more, the elements of the photo and the lettering of the main copy element are interconnected: it makes negative space an active element of design and gives the page a united harmonic look.

Here’s another example: the website promoting winter holidays uses atmospheric and impressive video to make the negative space set the theme and awe the visitors from the first seconds.

Core Factors Influenced by Negative Space

Using negative space properly may have a considerable impact on the following factors of user experience.

Readability and legibility: 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.

Due to the big amount of negative space on the page of the horse riding club, visitors can enjoy photos and read the text easily

Branding: if you check any logo guideline, you will find that designers define the appropriate amount of negative space around it so that it was perceived correctly. Breaking these rules is harmful to visual performance.

Nature of the resource: negative space has an impact on the so-called design tone. For example, news resources will have less white space on the home page than blogs to set the mood and understanding that the platform is full of data that appears dynamically.

Attention ratio: enough negative space enhances visual hierarchy and allows users to focus on the key elements.

A good balance of content, navigation, and negative space on the screen makes the mobile application for setting personal challenges clear and easy-to-use

The yacht hiring website page looks airy and usable due to the negative space that helps to build a solid visual hierarchy with clear visual accents

Based on that, negative space has an impact on visual perception in such aspects as:

• copy content
• graphic content
• navigation
• identity.

Let’s check a couple of examples. Here’s a couple of pages for the online editorial devoted to different generations. Without any visual frames and tables, due to the balanced use of negative space, the designer builds up a strong visual hierarchy and lets the reader scan various blocks of content in split seconds. This way design looks organized but light and airy. Contrasting backgrounds and layout arrangement make the pages look similar to magazine pages which harmonically informs the reader about the nature of the online resource.

Another example is a mobile application Upper app: here the negative space is all black, creating a great contrast to the core elements of the interface. For the whole screen, only one straight line is used. Nevertheless, all the layout looks organized and highly readable due to enough air and no distractors. It also supports stylist minimalist elegance to favor aesthetic satisfaction.

Pitfalls to Consider

1. Confusing terminology. When you are talking to clients who may be not deeply familiar with design terms, make sure you explain the meaning of negative space before you describe the design solution. It may be hard for a non-designer to understand why “this screen needed more white space” looking at the totally black background as well as negative space may be associated with something bad – which it is not. So, don’t forget to dot all the i’s before using the terms.

2. Wish to reduce negative space to put more on the page or screen. It happens not only in UI design: you may hear how interior designer recommends saving some space to the client who wants 4 bookcases in one room instead of 2, or an architect explaining why there is the need for empty space around the building to make it look and serve better. Even more, sometimes re-planning the elements with the better use of negative space creates the illusion of the room or building being bigger than it really is – and the same happens with data you have to put on a mobile screen or web page. Decide what’s more important, what’s secondary, and what can be eliminated so that to navigate the user intuitively. Negative space will help to make the harmonic look of the screen or page even if it’s full of information and functions.

3. Poor prioritization. Negative space is not a cure-all if thought-out information architecture doesn’t stand behind an interface. Before you think about the design skin, you have to decide how the user will find the shortcut to his/her goal and solves his/her problem with an app or website. Plan this route before you make the looks presenting it in style; otherwise, even the best balance of visual elements including negative space won’t work effectively.

Useful Reading

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

How to Make User Interface Readable: Tips and Practices

10 Reasons to Apply Illustrations in User Interfaces

5 Basic Types of Images for Web Design

3C of Interface Design: Color, Contrast, Content

User Experience: How to Improve Web Scannability

Hero Images in Web Design: When, Why and How

Color Scheme for Interface: Light or Dark UI?

Visual Dividers in User Interfaces: Types and Design Tips

Web Design: 16 Basic Types of Web Pages

How to Design User Onboarding

Originally written for Tubik Blog, graphic content by tubik

Сообщение Negative Space in Design: What It Is and How To Use It появились сначала на 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.

Factors Influencing the Choice of Color Scheme

Be sure, there is no one particular choice which would work for all the aims. The solution heavily depends on numerous factors covering not only the user’s side but also business goals, market conditions, and current design trends. Let’s review the essential factors which have to be considered regarding the issue.

Readability and legibility

These terms are both directly connected to the perception of the content presented with text. Readability defines how easily people can read words, phrases, and blocks of copy. Legibility measures how quickly and intuitively users can distinguish the letters in a particular typeface.

These characteristics should be carefully considered, especially for the interfaces filled with a lot of text. Among many other factors, the color scheme chosen for the interface plays a crucial role in the effective process of text perception. For example, as well as with 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. Poor readability results in 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 may even miss the critical information.

Does it mean that interfaces with a light background are more readable? Not always. One of the famous gurus of user experience design Jacob Nielsen mentioned: «Use colors with high contrast between the text and the background. Optimal legibility requires black text on a white background (so-called positive text). White text on a black background (negative text) is almost as good. Although the contrast ratio is the same as for positive text, the inverted color scheme throws people off a little and slows their reading slightly. Legibility suffers much more in color schemes that make the text any lighter than pure black, especially if the background is made any darker than pure white.» So, 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.

Museu landing page

Hair beauty website design

However, some scientific studies dating back to the 1980s show that big bulks of text light background appear to be a more effective choice for the majority of users. Studying how advertising carriers worked, D. Bauer and C.R.Cavonius shared their explorations in the paper “Improving the legibility of visual display units through contrast reversal” (1980). In particular, they found that participants were 26% more accurate in reading text when it was featured with dark characters on a light background.

Why may that be so? Jason Harrison from Sensory Perception and Interaction Research Group (University of British Columbia) explains this phenomenon the following way. People with astigmatism (which according to various stats present about 50% of the population) feel it harder to perceive white text on black than black text on white. Part of this has to do with light levels.  With a bright display (white background) the iris closes a bit more, decreasing the effect of the “deformed” lens. With a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye. So, based on this, if the interface presents a lot of copy and suggests a long-reading experience, a light background may feel more user-friendly.

Accessibility

Accessibility is mostly defined as the ability of the web or mobile interface to reach as many people as possible and provide its functionality regardless of any discriminations. So, the decision “to use or not to use” has to be mostly grounded in users’ needs and preferences, not on their physical abilities. The color scheme is mentioned among the top factors affecting this aspect. Selecting the palette and color combinations, a designer needs to take into account the users of different ages, special needs, or disabilities which can also determine the choice of color for the background and layout elements. User research becomes a great help providing UX designers with data that helps to get closer to the target audience.

Landing page for a babysitting service uses the light background for all the parts with text content for a high level of readability

Clarity

Clarity defines the ability to see and distinguish all the core details on the screen or page. First of all, it deals with simplicity and intuitiveness of navigation: being able to scan the layout and find zones of information and elements of interaction, users don’t need to put much effort into getting what they need. If this aspect is not tested properly, it may lead to weak visual hierarchy and turn the screen into a complete mess. Contrast plays a big role here and color scheme becomes the foundation for it. To check, if the interface is clear and contrast enough, don’t forget about a good old trick of “blur effect” when you look at the screen or page in the blurred mode and check if everything vital is easily reached and noticeable.

Landing page for the digital agency

Responsiveness

Responsiveness of the interface means that users get it usable and functional whatever it the device they use it on. What looks stylish and appealing in Sketch in the high-res professional monitor may transform into a dirty stain on the small low-res screen. Therefore, some color schemes looking nice at the design stage may lose their beauty in a variety of everyday conditions they are applied in. As color scheme directly influences color, shape, and copy perceptions, it should be tested on diverse devices before making the final decision.

Responsive website design for the forest camping service

Environment

Web and mobile interfaces are used in environments that may be pre-supposed as typical if the target audience is researched carefully. For instance, concerning constant use under natural light, a dark background can literally create the effect of reflection, especially on glossy screens typical for tablets and smartphones. On the contrary, in conditions of the badly-lit environment, a dark background can take the light away from the screen which has a bad influence on navigation and readability. So, the issue of color combinations, contrast and shades draw big attention here.

Slumber mobile app 

Checklist for color scheme selection

With the factors mentioned above, we offer here a short checklist of basic steps to follow while selecting a general color scheme for web or mobile interface.

1. Define the purpose of the interface. Having determined the core points of the interface utility and problem-solving capacity, you make the choice of the color scheme more reasoned. If the UI is text-driven (a blog, news platform, e-reader, etc.), light background tends to be an effective choice. Light makes the screen airy and spacious and it will be easier to concentrate purely on the copy. On the other hand, if the interface is visually driven and moves around images rather than text, a color scheme with a dark or bright background may be a good solution as the colors of the images feel deeper and the general layout gets stylish or even luxury look.

2. Analyze your target audience. Definition and analysis of the target audience are the primary things a designer should do. Knowing who is your potential user and what they will want to get from the website or app sets the solid basis for a usable, useful and attractive interface. Middle-aged and older people tend to prefer interfaces with the light color scheme as they find them more intuitive and navigable. Younger people often find well-performed interfaces with a dark background more original and stylish so that can be the way to involve target users. Teenagers and children are attracted to interfaces using bright backgrounds and funny details. The choice of color obviously depends on the nature of the interface functionality and content. But the preferences of the target audience are always a good clue to user-centered decisions.

Nature Encyclopedia app based on dark background and contrast yellow and white for images and copy content

3. Research the competition. Another aspect to keep in mind is that your product isn’t going to appear one in a blue ocean. Vice versa, it will fight for user’s attention in conditions of great and dynamic competition. The choice of the color scheme also becomes the way to make an app or website outstand and lead to such a precious first wish of interaction from the user’s side. Time spent on exploration of the existing products in the segment saves time and effort otherwise wasted on the redesign of ineffective solutions.

4. Test, test, test. The points described above are convincing about a key thing to do: as the color belongs to the factors directly affecting usability and attractiveness of the interface, every design solution should be appropriately tested, in different resolutions, on various screens, and under diverse conditions. Testing reveals strong and weak sides of the color scheme before the product comes on the market, gets discussed and loses the chance of stunning first impression if the design solution is inefficient.

Compromise Solutions

Not wishing to stick to the strict color schemes, user interface designers sometimes find compromise solutions, like the following ones.

Dark interface, white tabs for copy

As we mentioned in the review of UX design trends, this trend got especially popular for interfaces based on the dark background scheme. It features one more approach to proper readability which is often the issue of debates: applying boxes or spaces with the light background for core data blocks, designers solve this problem and add elegant contrast to the screen or page. One of the cases, when it was applied efficiently, is Watering Tracker app designed by the Tubik team.

Giving the choice of color scheme to the user

Another approach is giving users a choice of modes. That is what we did for Upper, a to-do list app that offers the user a selection of color schemes. On the one hand, it makes the product really friendly to users and makes a choice more personalized according to not only usability issues but also aesthetic preferences. On the other hand, it takes additional work hours for designers and developers to work out all the schemes.

Useful Reading

Dark Side of UI: When Dark Is Good for Users
The Impact of Web Page Text-Background Color Combinations on Readability, Retention, Aesthetics, and Behavioral Intention
Visual Perception: An Introduction
Art and Visual Perception: A Psychology of the Creative Eye
Colour Choices on Web Pages: Contrast vs Readability
The Dos and Don’ts of Dark Web Design
Why light text on a dark background is a bad idea
When to Use White Text on a Dark Background
Design Glossary: Basic Color Terminology
How Color Influences User Behavior

Originally published in Tubik Blog

Сообщение UI Design: How to Choose Between Light and Dark Theme появились сначала на 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.

So, what makes a powerful visual hierarchy? Of course, different kinds of products require different methods of building it still there are some common solutions helpful for UI content organization. Today’s article provides useful tips on creating a compelling visual hierarchy for web and mobile products.

Keep business goals in mind

There are often business goals standing behind a digital product. To achieve them, the creative team needs to work out which UI elements are more important and prioritize them according to their roles. For example, all the elements on e-commerce websites perform the tasks of various levels. The item images are usually the main eye-catchers since they have to encourage customers to consider it. A heading goes after the image explaining what it is and the next important stage is a CTA button calling people to buy an item. By considering business and marketing goals set for the website or app, the creative team can effectively prioritize visual content and make a product stand out of the crowd.

Design Agency Landing Page

Consider scanning patterns

In our previous articles, we mentioned that before reading a web page people scan it to get a sense of whether they are interested. Different studies, including the ones by Nielsen Norman Group , have revealed several popular scanning patterns among which “F” and “Z”-shaped.

F-pattern appears mainly on digital pages or screens with a big amount of content such as blogs, news platforms, etc. Users’ eyes move in F-shape: first, they scan a horizontal line on the top of the screen, then move down the page a bit and read across the shorter horizontal line, finishing with the vertical line down on the left side of the copy where people look for keywords in the paragraphs’ initial sentences.

Z-shaped pattern takes place on the pages which are not so heavily concentrated on copy or those which don’t require scrolling down. The pattern is the following: people first scan across the head of the page starting from the top left corner, searching for core information, and then go down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page from its left to right.

Knowing these patterns designers organize content putting all the core UI elements on the most scanned spots to draw users’ attention.

Food Order Website Design

Functionality first

The visual hierarchy may seem to be oriented only to the aesthetic aspects but it’s not like that. First of all, by structuring and organizing visual elements designers need to make sure a product is clear to use and the navigation works right. The visual hierarchy which is built exceptionally on aesthetics can’t work effectively. User interface with the badly structured content leads to the bad UX. So, while building visual hierarchy designers need to consider functions of UI elements and a role they play in the navigation process.

Action Figures Ecommerce App

Remember that white space is a visual element

White space, or negative space, is not just an area between design elements, it is actually a core component of each visual composition. It is a tool able to make all the user interface elements noticeable to users’ eyes. Designers can group or separate UI components so that they could create an effective layout. Moreover, negative space helps to emphasize particular elements which require deep attention from users. White space is an effective instrument for creating a visual hierarchy so designers need to work on its balanced usage.

Scientific Web Platform Design

Apply the golden ratio

We devoted one of our latest articles to the golden ratio applied in design. It is a mathematical proportion of the elements of different sizes which is thought to be the most aesthetically pleasing for human eyes. The proportion equals 1:1.618 and it is often illustrated with seashell-shaped spirals which many of you could have probably seen.

Designers often apply the golden ratio at the stage of wireframing. It helps to plan a structure for the layout placing and sizing user interface elements in the right proportion which will be pleasant for users.

Tracking Widget

Use a grid

A grid is one of the key tools applied at the different stages of the creative process and visual hierarchy is not an exception. A grid helps to structure all the components and put them into the appropriate sizes and proportion. What’s more, designers can effectively work with the negative space since a grid shows if the elements are placed proportionally and even.

Add some colors

Color choice and combinations are essential for visual hierarchy as they help users to distinguish the core elements. The thing is that colors have their own hierarchy which is defined by the power of influence on users’ minds. There are bold colors such as red and orange as well as the weak ones like white and cream. Bold colors are easy to notice so designers often use them as the means of highlighting or setting contrast.

Moreover, applying one color to the several elements you can show that they are somehow connected. For example, you can choose a particular color for purchase buttons or buttons of adding content so that people could intuitively find them when they need to.

Travel Planner App Design

Pay attention to the fonts

Visual hierarchy includes a core subsection called typographic hierarchy which aims at modifying and combining fonts to build the contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The fonts can be transformed by regulating sizes, colors, and families as well as their alignment. Different fonts can divide the copy content into different levels so that users could perceive the information gradually. However, designers are recommended to keep the number of fonts within three since too many fonts look messy and make the design inconsistent.

Three levels for web, two for mobile

As we mentioned above, different fonts form typographic levels which consist of such elements as headlines, subheaders, body copy, call-to-action elements, and captions. There are three typographic levels: primary, secondary, and tertiary. The first one includes the biggest type and aims at drawing people’s attention to the core information on the screen. The next level provides copy elements which are easily scanned and help users navigate through the content. The tertiary level usually applies body text and some additional data which is presented via a relatively small type.

In many cases, web products include all three levels since they are more likely to provide a big amount of content. On the other hand, designers are recommended to keep the number of layers within two while creating typography for mobile. The small screens don’t provide enough space for three levels so the elements of a secondary level such as subheaders have to step aside to make mobile UI look clean.

WineYard App

Effective visual hierarchy is not only about aesthetics. It aims at providing problem-solving navigation and interaction systems as well as friendly user experience. To create a sufficient visual hierarchy, designers need to organize all UI elements considering the functionality and business goals.

Useful articles

The topic of visual hierarchy is wide and complex, so we gathered some helpful articles revealing various aspects.

Visual Hierarchy: How to Organize UI Content

How Golden Ratio Works in User Interfaces

How to Make Interface Effort-Saving

Copy Content in User Interfaces

Information Architecture. Techniques for Designers

Typography in UI: Guide for Beginners

Originally written for Tubik Blog

Сообщение User Experience: Best Practices on Effective Visual Hierarchy появились сначала на Design4Users.

Visual hierarchy in web and mobile interfaces belongs to the domain knowing which designers strengthen their creative potential. Exploring the ways how people perceive information and using them for building good navigation, digestible copy, and effective color choice has a great impact on the usability of the product – and scannability as its important part. So, today we are going back to basics: let’s start revising how Gestalt grouping principles can affect user interfaces positively.

What is Gestalt theory?

Basically, Gestalt is the term that comes from the German word Gestalt [ɡəˈʃtalt] meaning “shape, form”. It is used primarily in cognitive psychology for the field exploring the laws of meaningful perception of the data which people constantly get from the world that seems primarily chaotic. The basic idea behind this movement can be caught through the well-known phrase by Gestalt psychologist Kurt Koffka: “The whole is other than the sum of the parts”. When people perceive the complex objects consisting of many elements, they apply conscious or subconscious methods of arranging the parts into a whole organized system instead of just the set of simple objects. It works on different levels of perception, but the visual part seems to be the most interesting for designers creating interfaces.

Why could designers get interested in this issue? Because it helps understand the psychology of the app or website users better. When you know the factors influencing visual perception, it makes the process of UX design much more proficient giving higher rates of successful interactions and lowering the level of misunderstandings users could get on this way. Among the various levels of this approach, principles (or laws) of grouping are probably the most essential for designers to consider. These principles are based on the idea that people arrange what they see along with some patterns organized into five global categories: Proximity, Similarity, Continuity, Closure, and Connectedness. Here’s one of the infographics offered by Vertical Measures blog and visualizing the core description for some principles.

Source

In user interfaces, principles of grouping applied thoughtfully make the perception of layout elements quicker and easier as well as establish the priorities in different levels of interaction. Today we are going to consider the similarity principle of grouping widely used in design practice.

Similarity principle

The principle of similarity is grounded in the idea that things that share visual characteristics such as shape, size, color, texture, value or orientation will be seen as belonging together. It means that if a person perceives the set of elements, he or she tends to group the ones which have one or several features alike as the related items.  Therefore, giving different layout elements identic or similar visual features, designers stimulate users to set the appropriate connections and understand the whole scheme faster.

Similarity can be based on various visual parameters such as color, shape, size, and orientation. Let’s check some practical examples of interfaces designed by Tubik team.

Color

Bright Vibe Calendar

Here’s the common example of applying color similarity in the simple calendar app. The letters marking the days of the week on the calendar screen are visually grouped with one color which is different from the colors used for the numbers in the calendar grid. Therefore, the quick glance is enough to separate these types of symbols – color simplifies the process of the first scanning. The next level of color similarity takes place in the field of numbers: the dates on the week which the user has chosen look brighter while the other dates of the month look more faded. The key interactive zones are colored brightly and present the visual accent which is instantly noticeable and cannot be missed. So, color enables the designer to make the easy path of navigation for a user with an effective visual hierarchy via the principle of grouping.

To-Do App

One more example here shows how grouping by color can be applied effectively for the copy in graphical interfaces. You can see the screen of a to-do app where the position which is already marked as done is featured in different color compared to the tasks that are in progress. It enables the user to scan the list quickly and group the kinds of tasks in split seconds.

Blog App

More complex application of grouping principle by color is marking categories and blocks of content. It works very well in the interfaces full of various content organized on several levels such as, let’s say, blogs, e-commerce or educational resources, etc. Color markers simplify navigation and keep the consistency of design enabling users to remember the color prompts and find the content they want easily. The example above shows the blog app applying this principle: various posts are organized around global categories and marked with colors which you can see on icons, colored tabs on the posts and correspondent quick stats of posts in the user profile. The same principle is applied in the Moneywise App shown below.

Moneywise App

This is the educational app devoted to economics: the content is organized into four global categories. The color used to mark the category is used as the background color for all the cards belonging to it. So, in the process of interaction, it helps users to quickly get oriented where they are.

Surely, this way of color grouping goes further as it organizes not just the elements on one screen but different screens or pages within all the digital product. However, it also corresponds to the Gestalt principles: such an approach allows designers to create interfaces that look and feel consistent and support the general integrity of visual perception from screen to screen, from one interaction to the other.

Size

The principle of similarity grouping the elements by size is another cornerstone in creating intuitive and user-friendly interfaces as it establishes the basis for strong visual hierarchy supporting users. This approach helps to set priorities and make the most important content visible. Grouping the similar content elements by this principle arranges the connection between them, often faster than a user can read the copy or see all the details.

The good way to present this principle in action is checking the organization of copy content.

Architecture Firm Website

The example features the corporate website of an architecture company. The copy blocks presenting the benefits and approaches of the firm are supported with the keywords applying two grouping principles simultaneously: they use different size and different text orientation. In the process of interaction, they are obviously perceived as the related elements. Also, the extended menu page shows the typographic hierarchy grouping copy elements by size: keywords, categories, and subcategories.

Tab bar interaction concept

Here’s another example of grouping by size and color. We can see the concept of a tab bar in which interactive elements of equal importance are given in the same size and faded shade while the core interactive element – plus button –  is made prominent via bright color and bigger size. Moreover, trying to add the content via this button the user is offered three options for different types of content. And again, grouping the appearing three buttons which use the same color as the parent button but smaller size, the interface enables the user to set the connections and hierarchy of navigation elements easily based on typical operations of cognitive perception.

Shape

One more way to group the elements on the web page or screen is marking them by shape.

Green Spy app interactions

The example shows the app which uses cards of the same shape to simulate the interaction with the physical objects – the base of data cards. This approach allows the user to perceive the set of content blocks as related.

Homey App

The interface for the Homey app shown above also presents the example of grouping by shape consistently from one screen to another: the buttons marking the rooms use the rounded-square shape while the buttons of various indicators within a particular room screen use the round shape. It sets the clear connections between the related layout elements as well as global navigation in the app.

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

Recommended Reading

Design Principles: Visual Perception And The Principles Of Gestalt
Improve Your Designs With The Principles Of Similarity And Proximity
Gestalt Theory of Visual Perception
Gestalt Principles: How Are Your Designs Perceived?
Psychology in Design: Principles Helping to Understand Users

Originally written for Tubik Blog

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

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

What is minimalism?

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

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

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

Architecture Blog

Characteristics of minimalism

Main features of minimalism often mentioned by designers include:

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

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

Dance Academy landing page

Practices of minimalism in digital design

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

Flat design

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

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

Cafe Coupon App

Monochrome or limited color palette

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

Slopes Website

Bold and expressive typography

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

Upper App

Choice limitation

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

Birds of Paradise Encyclopedia

Prominent theme visual elements

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

Architecture Firm

Concise and intuitive navigation

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

Adding air and using negative space

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

Ice Website

Grids

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

The Big Landscape

Contrast

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

Bjorn Website

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

Recommended reading

The Characteristics of Minimalism in Web Design

The How and Why of Minimalism

6 Steps to Perfecting Minimalism in Web Design

Functional Minimalism for Web Design

Originally written for Tubik Blog

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