Articles &#8212; Design4Users

How to Make Web Interface Scannable

The Anatomy of a Web Page: Basic Elements

UX Design for E-Commerce: Principles and Strategies

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

Сообщение 10 Hot UI/UX Design Trends To Start 2024 появились сначала на Design4Users.

Product Page Design: Best Practices on UX for Ecommerce

Marina Yalanska — Fri, 20 Oct 2023 08:54:18 +0000

In e-commerce, the measurement of success is not the number of website visitors or clicks. It’s the number of finalized purchases. From that perspective, a product page is crucial as it is usually the spot where most decision-making on “to buy or not to buy” happens. So, when designing or improving an e-commerce website or application, UX designers have to think it over and test it up to the slightest detail. That’s what today’s article is about: let’s discuss what a product page is and how to design it effectively. Packed with plenty of examples from both known e-commerce websites and creative design concepts for niche or specific business goals.

What Is Product Page

The product page is a page of the e-commerce website that provides a customer with all the needed information about the particular item, allows them to check various options if they exist, and enables a customer to quickly proceed with the purchase process if they decide upon buying the item.

Unlike a real point-of-sale, an e-commerce website doesn’t provide physical contact with an item or assistance from shop staff. Product page becomes the major source of attraction, impression, information, and persuasion. That’s why its design, navigability, and usability play a crucial role in growing sales.

As we mentioned in our guide to the basic web pages, a badly designed product page may waste all the effort (usually massive and complex) taken to bring the buyer to the website and to this particular product. So, besides the attractive product presentation, focus on functionality, clarity, readability, and intuitive navigation.

Product page concept for a gardening e-commerce website

Typical Elements of Product Page

Basically, a product page:

shows the image of the product
gives all the needed information about the product
allows users to check different color/model options (if any)
enables visitors to see the reviews, comments, and ratings from earlier buyers
allows for adding the product to the cart or wish list
shows other relevant options.

Additionally, the product page may include such options as a comparison of different items, especially popular on websites selling different devices and appliances.

Product page interactions for Bennett, a tea brand e-commerce

Based on that, here’s a checklist of basic elements of the product page layout:

name/title of the item
photo
price
item availability
add to cart/add to bag/add to basket/buy button
add to favorites/save to wishlist button
description
social proof: rating, reviews, the number of previous buyers, the number of people looking at the item now, etc.
choice of color
choice of model
choice of the number of items to buy
size guide or calculator (for clothes and footwear)
extended details (materials, technical specifications, dimensions, weight, special features, etc.)

The list above doesn’t mean that all the points are obligatory for any product page. The choice will depend on analyzing multiple factors, understanding the target audience, and careful prioritization to see which points to include and which may be eliminated from the list for this particular type of goods or kind of customer.

Product page first-screen view on Walmart

Design Practices for Product Pages

Visual Demonstration

Ecommerce platforms are the best place to prove the saying that the picture is worth a thousand words. Not able to contact the item physically, visitors will count on the visuals of the product to make their first impression about the goods. What’s more, images are noticed and decoded faster than words; they will be the first element attracting the visitor’s attention. They present the part of the content which is both informative and emotionally appealing.

That’s why many e-commerce platforms:

use a set of images to present one item from different points and angles
apply zoom functionality to enable a visitor to look at some parts of the photo closer, see the textures and small details
combine the photos of the item with photos of it on a model or in the proper environment to give a better understanding of its looks and sizes

Product page first-screen view on Marks and Spencer: a combination of several photos shows the item separately and on the model

The approaches to photo content can be different and depend on both general brand strategy and particular campaign or collection style. However, what unites them all is:

originality: special shootings are organized to make custom photos that correspond to the style defined in a brand book or specific campaign guidelines
high-quality: no doubt, the quality of photos directly influences the impression about the particular item and the brand in general
optimization for the web: being quality, photos shouldn’t be too big as it can dramatically influence the loading time, which in turn has a great impact on SEO; also, pages loading slowly are the solid reason for high bounce rate – unless the website offers something absolutely unique and super exclusive, people will just go away instead of waiting.

Product page for the niche brand of underwear, using photo demonstration on model

Except for images, other media, more complex or interactive, can also be used. Among them, you can now find:

product videos, detailed video reviews, and instructions
360-degree view of the item
augmented reality technologies helping people to observe the item in their own environment or try it on virtually

The product page of GNO Blankets website uses video demonstration and graphics with detailed demonstration of product layers.

Obviously, these types of media are often more complicated, time-consuming, and expensive in production than photos. So, the decision on their worthwhileness is usually based on the type and price of the offered item. For example, to sell a 5-dollar T-shirt, photos may be enough, but for buying a massively more expensive fridge, smartphone, computer, or even a car, customers need more convincing in the decision-making way. And in this case, expenses on the more complex but more impressive, persuasive, and informative visuals and media could be a worthy investment.

A creative product page concept for a website selling niche accessories applies special realistic effects to the functionality of a model choice.

The pet shop website uses video demonstrations of the items as a convincing way to see how the product works in the environment and sets the needed emotional connection.

Informative but Simple Description

The saying that people don’t read anymore has nothing in common with the product page: when customers are deciding upon spending their money, they do read what they need to know about the product they are going to buy. Still, it’s not the reason to overload the description, as the attention span is quite limited. The description text should be concise, factual, simple, and talking in the language of the audience. It should answer the basic questions: what the product is, what it looks like, what it does, and how it does it. And better to do it from the first lines, which have the highest chances to be read, instead of filling them with standard marketing hooks shoppers are already sick and tired of.

Another rule of thumb here is connected to the previous point: show, don’t tell. Well, it’s better to say, tell, but also show! Don’t just describe in detail how the bag looks inside – show the photo. Don’t just tell how beautifully this neckerchief matches that jacket – show the photo. Don’t just mention the size of a toy – show the child playing it. Combine the power of words with proper images to make the experience much more effective.

Product page first-screen view on Uniqlo: the page features a concise and informative description of the item and puts the details on materials and care in another tab, both in the pre-scroll area of the page. Another good thing is a clear definition of model size on the photo, allowing the customers to instantly understand the proportions.

The product page for the cosmetics website uncovers the information about the product gradually, with the core data above the fold, supporting the prominent item visualization; the split-screen approach helps to divide visual and text zones to make them easily scanned.

Super Obvious Call to Action

Calls to action (CTA) should be instantly noticeable. In e-commerce interfaces, CTA elements are the core factor of effective interaction with the product; they play a crucial role in usability and navigability and, therefore, in getting profits. When all the path of interaction and transitions is built clearly for users, but the CTA element is not obvious, misplaced, or designed badly, the risk gets higher that users will get confused and need to make an additional effort to achieve their goals – which is annoying. Therefore, the risk of poor conversion rates and bad user experience grows.

ASOS product page first screen: the CTA button differs from everything else on the page due to color contrast and is instantly noticed in the light, airy layout.

Focus on the Item

No doubt, thinking about the layout and content of the product page, both stakeholders and designers feel the urge to fill it with everything possible, and even more, to make the page super informative. However, be careful as this strategy may do a dirty trick: in that flood of information, the focus gets blurred, and visitors can get too distracted to make a decision. How to find the balance?

On the one hand, it’s recommended not to overload the page with a great deal of information that will overwhelm customers and distract their attention from the major goal – to make the purchase. On the other hand, visitors aren’t ready to jump from one page to another to get different information about the item they are interested in. Therefore, the designer has to take the time for thorough research on the issue, prioritize carefully, and find the balance of data that needs to be provided on the product page.

Is there a golden rule for all e-commerce websites? No way, as different customers and markets have different needs, and the type of the product also influences the choice of core and secondary information to show. The analysis of the target audience and user testing can give clues on what information is required for the specific categories of items or services.

Creative product page design for a niche perfume website focuses on item presentation amplified with an atmospheric video background and special effects.

The more pricey, uncommon, or innovative the product, the more information the customers usually want to get about it. And even for common stuff, there may be tons of questions and hesitations. Sure, all the needed information should be accessible from the product page, and the challenge for UX designers here is to find a way to organize it properly. Technical details, materials, weight and size, size chart or calculator for clothing and footwear, functionality for comparing the item with a similar one, and so on and so forth – any of those details can play the premier violin in a story of a particular item.

Use the principle of the inverted pyramid and uncover information gradually, from the most important and demanded shown first to more and more specific details unveiled further.

Instead of creating intrigue, be open, direct, and clean in content presentation.

Try to put all core information in highly readable form on the above-the-fold part of the page.

And test, test, test again, analyze the time on the page, heatmaps, and clicks, ask and analyze to know what buyers really need and what makes shopping convenient for them.

The product page on Amazon is based on the principle of the inverted pyramid: this above-the-fold view shows the core information and functionality buyers want and need to know about this type of product first of all. Engaging social proof is marked by the label of #1 New Release and shows what other products are often bought together with this one.

The second screen uncovers more about the actions of other customers interested in this theme: two sections, visually attractive due to the focus on product images, uncover other items customers view or buy.

And only after that, when scrolling further, users can find extended information, editorial reviews, etc., based on text without visuals.

Intuitive Navigation

Every button, link, and card design can change the conversion rate significantly. It’s vital always to remember: in the intense competition we observe in e-commerce now, buyers aren’t ready to wait or waste their time on unnecessary operations or efforts to understand where’s what they need. What they do demand from e-commerce is an experience that is faster, easier, and more convenient compared to going to the actual store. If this website doesn’t give it to them, they will look for it somewhere else.

So, adding to obvious CTA, make sure that users can effortlessly do common steps, for example:

find search field
use breadcrumbs helping to quickly understand the current position in the website hierarchy and probably take a step or two back instead of just going away
be totally sure which elements on the page are clickable
see if the item is already in the cart
see the number of items in the shopping cart or bag (usually in the website header)
use the power of visual dividers and common directional cues to perceive the information faster
find the contact information and navigation links in the website footer

Product page first-screen view on Target: multiple photos of the item, both clean and integrated into the environment, clear and instantly noticeable controls for choice of color, the obvious search field in the header, breadcrumbs creating the secondary navigation level, social proof in the form of ratings and questions, and clear call-to-action element.

Consistency

Consistency means that the product communicates with the user in the same or similar way, whatever point or channel of communication. In terms of user experience, it means that similar elements look and function similarly, this way reducing the cognitive load and making interactions smoother and more intuitive.

In e-commerce interface, it touches both:

Internal consistency is about different parts of your interface or brand that look and behave as one clear system. For example, when you make all the CTA buttons on different pages or screens of your product colored and designed the same way, visitors can learn fast and will be able to quickly distinguish them at any step of their user journey.

External consistency is about parts of your interface that look and behave as typical patterns for most products of this kind. That’s, for example, when you use a shopping cart even on the website selling non-tangible products or underline the text links to give users a hint that they are clickable.

Sephora product page first-screen view: expected navigation in the website header, easily recognizable for e-commerce shoppers, super obvious call-to-action button, arrows used as the clearest directional cues for most users around the web, focus on the item presented in different visuals and highlights important and influencing decision-making for the target audience.

Power of Known Patterns

Adding to the previous point, UX designers would better never underestimate the power of habit. In UI for e-commerce, especially in the red-ocean spheres, the primary goal is not to shock and awe. Basically, UX designers become a friend or at least supportive shop assistant who greets visitor, guides them around the store, takes a right to the items they want, and make the checkout as fast and simple as possible. To make that all possible, designers should base their decisions on how actual customers behave.

There are many articles and videos calling creative people to hear their hearts, trust their guts, and think out of the box. However, design is not just pure creativity striving to show all the power of original solutions. First of all, it’s a way to solve the problem and make users happier. So, it’s vital to look at the interface from the user’s perspective and find a way to make interactions that will provide a smooth and easy way to purchase.

The power of habit plays a big role in the products of this kind. Choosing a layout, menus, or icons that stand too far from the ones users are generally accustomed to often brings confusion and frustration. For a simple example, the usage of any other image instead of a magnifying glass to mark the search field can result in a bad user experience as buyers know that visual symbol and will look for it. If you are ready for such experiments, take time to test them well and ensure that customers are ready for them, too.

H&M product page design is based on a minimalist approach: the first-screen view is designed around prominent images, model choice options, elegant and readable basics (product title, color name, and price), a heart icon as a well-recognized visual trigger of adding the item to favorites and a noticeable CTA button. Even the size options are hidden in the dropdown menu to put the number of controls to a minimum and focus all the attention on the visuals. Sure, it means additional clicks and scrolling; however, the approach may be reasonable and effective if the customers are used to this flow and appreciate this particular style, consistently reflecting the brand image in general.

In the article on home page design strategies, we mentioned that the website is made not for creative contests or galleries of fame but for real users. The positive impact of habit in terms of user experience can be stronger than the wish for revolution. No doubt, the dose of uniqueness is needed, but not so much to knock down the user. In e-commerce UI design, often aimed at quite a diverse target audience, too much of a revolution might scare and provoke hesitations: do I really need to buy this thing, a user may think, if it’s so hard to get it? Study the interaction patterns and typical products for that particular target audience to make their habits their power. And don’t forget to check that all the icons on the screen don’t have a double meaning; support them with text labels where needed. Strive for the balance between innovation and traditions.

Narrowing the focus, we may also talk about the power of habit for a particular e-commerce website. You could have read numerous reviews of the “poor UX design” of this or that e-commerce giant, breathing fire and brimstone into old-fashioned solutions or complex navigation. However, thinking deeper, it’s easy to understand that they activate the power of habit as a major approach of respect to their buyers, as plenty of their customers have been with them for many years. It’s not because they don’t know how to change; it’s because, at some stages of business development, the cost of change may be too high. It doesn’t mean that the changes are never made; they are just not as revolutionary and made in small steps.

Product page above-the-fold view on Etsy marketplace

Scannability and Skimmability

It’s already well-known that when coming to a website or app, users don’t usually read and observe all the content on the page or screen. Instead, they start with quick scanning to understand if it contains something they need or want. Knowing the eye-tracking models, Gestalt principles, and laws of visual hierarchy, designers and information architects can put the core data and interactive elements into the zones of high and natural visibility. Other factors making product pages scannable are readable typography and enough white space.

There are numerous things that have an impact on decision-making, and harmony is one of them. Eye-tensing color combinations, unreadable or not combining fonts, aggressive background, intrusive pop-ups or animations, annoying sounds, or pages loading for ages – any point of that stuff can spoil the experience quickly, distract users, and move them away, sometimes even without a clear explanation what they didn’t like. Details matter; think over them and organize them well.

First-screen view of the product page on George: due to the light, airy layout, the page looks clean and simple, but at the same time, it’s highly informative even at the stage of fast scanning.

Dark, elegant, and catchy product page for the neon signs shop, balanced and scannable

Fewer Clicks

If going from page to page or jumping from screen to screen is not a part of the journey into the sales funnel, save every user’s click possible. Too many operations are tiring and annoying, which is a kind of negative emotion. And emotions have a huge impact on user experience and make retaining users much harder. Minimize the number of clicks on the way of choosing and buying whenever it’s possible – this way, you respect the user’s time better than the politest words of thanks. For example, avoid dropdowns for a small number of choices in basic options such as color or model choice.

Product page first-screen view on Sportsdirect website: no information is hidden in dropdown menus, so it’s super easy to scan the availability of models and sizes, the CTA is seen immediately, the number of items is changed easily by typing or manipulating plus/minus controls, arrows show how to see more images, and breadcrumbs help to jump back to choosing other items easily.

Exotic Fruit e-commerce app uses a tab for adding the needed number of products with a simple tap.

The OldNavy product page integrates the section of offered combinations with other items from the website, and it is not just an image to get buyers inspired: on hover, the shopper gets the list of links to items with basic information, which enables them to easily get engaged in further shopping and makes the relevant product accessible quickly.

Social Proof

Social proof is a big factor of impact on the decision-making process in both the physical and digital worlds. It is a psychological and social phenomenon of people copying the actions of others to undertake behavior in a certain situation. This term was introduced by Robert Cialdini in his 1984 book Influence; the concept is also called informational social influence.

In e-commerce, the experience of the previous buyers influences the behavior of the next ones greatly; that’s why ratings, comments, and reviews are needed, especially on mass-market platforms. They help customers feel united with a group of similar buyers, which is easy to feel in the actual store among other shoppers but even more needed in the online shopping experience when you are shopping alone in front of a computer or mobile screen. What’s more, reviews can answer the questions the customer has and, this way, support the positive decision about buying – or prevent from buying the wrong item and having a negative experience.

Here’s the product page on OldNavy: the first screen view, among all other details, includes the social proof showing the rating of the item with the number of people that marked it. Scrolling down, buyers are getting even more engaged: except for relevant products to combine this item with for the perfect outfit, the page uncovers the relevant items other customers looked at and liked, and further customers’ photos and details on reviews.

Interactivity

With more and more buyers online, brands and retailers can analyze more data about their behavior, needs, and wishes and integrate new approaches on that basis. Interactivity that imitates seeing the item from different angles and manipulating it, trying on the clothing or footwear, testing the make-up options on your face, virtually placing the piece of furniture or decor into your room – all that and diversity of other innovations are becoming more and more accessible and affordable due to the creativity, customer experience care, and new technologies. And sure, they help customers to make a decision.

Another vital aspect of interactivity in e-commerce now is personalization and customization, when people can customize their purchase instead of just choosing it from the catalog. Choosing a custom combination of flowers for a bouquet, customizing the burger or pizza with favorite ingredients, collecting a personal outfit or family look instead of just buying ready-made ones – able to add their own personality to the offer, many shoppers feel ready to buy.

Tasty Burger app allowing for creating custom burgers to buy

Mobile Adaptation

Needless to say, there are many daily things people do with their smartphones nowadays, and shopping is becoming one of the top options. Besides, mobile adaptation is among the core web vitals of search engine optimization. If you want an e-commerce website to be googled successfully and let the visitors have a seamless shopping experience from any device, make the product page mobile-friendly and reconsider the layout to make the interface convenient and navigable for mobile devices. Some e-commerce platforms go even further and also invest in creating their native applications for iOS and Android, but for many small businesses, it may appear not affordable or even not reasonable. Anyway, the product page, as well as the rest of the website pages, should be responsive and mobile-friendly, no matter if the native app exists or not.

Minimalistic product page for a fashion brand e-commerce focused on photos, easy choice of color, and responsive to be used on any device

404 Error

With product pages intensively used and often updated, there are different cases of running into an error. People can accidentally mistype a letter in the URL, or the page they saved before may not already exist as the product is already out of stock. Make sure not to let customers come across an empty error page and go away. Connect them to other pages, offer relevant options or categories, and do everything to take advantage of the error page involving a customer to check something else.

404 error page for a fashion e-commerce website

Bottom Line

Sure, the decision on the design practices to choose for a particular e-commerce project is a matter of thorough thinking, and the solutions on what to use and what to leave will be based on many subjective factors, from the type of product and market segment to the company budget, employers’ skills, individual tastes and specific needs of the target audience. The approach to mass-market e-commerce differs from the approach to a narrow niche. The approach to various generations of customers will be different.

Yet, all the practices mentioned above won’t work properly if the major condition of the commercial world is not followed, which is: the product should be good above everything else. All the other steps, investments, and practices make sense if the website sells quality goods and makes a website or app its channel of sales, not the place of lies and tricks. Anyway, if the products you offer are good and the customer is already on the website, let the product page show the item in its best light and help the shopper to feel it like home, convenient, clear, and friendly.

Useful Articles

Here’s a bunch of articles to dive deeper into the themes of e-commerce, web usability, and user experience design.

11 Profitable Strategies for E-Commerce UI Design

The Role of Branding in UI Design

Business-Oriented Design. Know Your Target

Product Page Design Inspiration: 17 Ecommerce Web Designs

Design for Business: User-Friendly Way to Profits

Two Types of User Motivation: Design to Satisfy

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

Сообщение Product Page Design: Best Practices on UX for Ecommerce появились сначала на Design4Users.

Web Design Usability: How To Use Breadcrumbs

Marina Yalanska — Fri, 21 Jul 2023 10:07:06 +0000

Whatever beautiful and elegant a website is, whatever useful content, services, or products it offers, all the benefits may easily be ruined by only one factor: poor navigation. In this article, we continue the theme of web usability, this time to discuss breadcrumbs as an element of web navigation. Let’s learn what this term means, explore the types of breadcrumbs and best UX practices to make them work effectively.

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.

The Anatomy of a Web Page: 14 Basic Elements

UX Design: How to Make Web Interface Scannable

How to Design Effective Search

Negative Space in Design: Tips and Best 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.

UX Design Practices for Error Screens and Messages

Marina Yalanska — Fri, 19 May 2023 10:31:24 +0000

Any way to success is made of not only achievements but also failures and errors. With digital products, it works the same way: only in the perfect world do people and apps communicate with no mistakes, misunderstandings, technical faults, or unpredictable scenarios. Well, none of us is there; we are in the real world. Here diverse errors present an integral part of any user experience, so there is no chance for designers and developers to avoid dealing with them. Let’s get well-prepared: today, we’ve gathered a post devoted to various errors in web and mobile user interfaces. Here we’ll talk about types and reasons for errors as well as design strategies and practices for reducing the negative effect they may bring up.

What Is Interface Error

Interface error is the state or condition when the app cannot do what the user wants. It usually happens in three typical cases:

the app fails to do what’s requested (literally, like there is no such technical possibility or function)
the app cannot understand the input from the user (or the input is invalid)
the user tries to combine operations that cannot work together (that usually happens because the user isn’t aware of the processes inside the app)

Sure, errors present a kind of annoying or even frustrating part of the user experience. Yet, there is no way to avoid them, so designers, developers, and UX writers have to think about ways to make that kind of interaction more user-friendly and smooth. Why is that important? Because, as well as in real life, virtual mistakes make a significant psychological impact and form a negative emotional background. For example, the research measuring the psychological stress caused by smartphone interactions showed a direct connection between appearing error messages and the level of cortisol, a known biomarker of stress. It can increase anxiety feeling and provoke a user to stop trying to interact with the product before they even start analyzing what’s the reason. So, let’s see what to do with those situations.

This is what the error of filling out the subscription form on Tubik Blog website looks

Best UX Practices for Errors

Errors are like fights: the best one is the one that never happened. There are different strategies for error prevention, like tooltips, prompts, tutorials, directional cues, suggestions, highlights, limitations, and the like. Yet, what should you do with users that already experience the error? Let’s cover some points that are effective in designing errors that wouldn’t make the user instantly turn their back to your app.

Make the error instantly noticeable

It may seem obvious, but don’t get tricked by it: what seems obvious has to be thought about twice. The worst thing that may happen about the error is when the user is totally uninformed about what’s going on and gets lost in the process. Be always honest with the user, and don’t try to mask the error. Even if the interface is super minimalist and any alien inclusion hurts your perfectionist designer’s eye and soul. Beauty doesn’t matter if it doesn’t work.

For example, if the user is filling the form made of 10 different fields, don’t just inform them that the form is not filled correctly, don’t make them search from one field to another where they made a mistake, and don’t hope they will do it. Make the field with a mistake super visible and save users’ energy and time.

Use well-recognized visual markers

Knowing mental models and well-known patterns of user behavior, user experience designers can reduce the cognitive load. That’s particularly essential in error situations that are quite unpleasant by default. Error screens and messages may not be the best place for experiments, so consider markers that are quickly recognized by most users. The red color and exclamation marks are still among the most popular ways to attract users’ attention to errors. Yet, be careful using the color as the only way to mark the error: check if it works for color-blind users. Also, mind the high level of readability on different devices.

Here’s how the registration error is marked on ArtStation: the system marks the field with color and explains the issue with a text prompt.

Explain what happened

Whatever the reason for the error, you may feel the urge not to explain anything, just to proceed with solving the issue. And that’s a mistake. Firstly, you risk getting a user back in this error situation again and again as they don’t understand what is wrong with their actions or app response. Secondly, we’ve already mentioned that errors literally provoke a psychological state of anxiety, and you may not predict if this error becomes a part of the wrong interaction pattern. So, be sure to find a way to quickly explain the nature of the error and keep users informed. For instance, instead of just informing (“You cannot log in to the app”), make the message explanatory like (“The username or password do not match”).

Don’t add more actions than needed

Another thing you may feel like doing is putting all the errors on separate pages or pop-up windows to make them as catchy as possible. Don’t overplay with it: in most cases, it’s enough just to make a color contrast marker in the interactive zone instead of popping up the additional modal window with the message requiring another unnecessary click to get the user back to the same page. Imagine that you are filling in the registration form and get that kind of pop-up for errors; no doubt, you will hate it very fast. Don’t make your users experience that: aim at providing inline validation and keep the message close to the field in error.

Yet, a pop-up window will be helpful if the user needs to be redirected to another page because of the error. So, for each case, take into account all pros and cons and target your solutions well.

This is how the error is marked on the Tubik website when the user tries to complete sending the contact form without adding an email.

Write simply

It’s crucial to make the error message as simple and clear as possible. Clear for the target user, not for the designers or developers creating that product. Avoid special terminology and jargon which you may use with QA engineers, for example (Like “Error 4.7 occurred” or “syntax error happened”). Don’t use long, complex sentences. Don’t make long and ornate introductions; it’s not the best place for them. Go quick to the point and make it decent.

Don’t blame a user

There’s an easy way to make a bad situation even worse: just tell the users that they are not clever enough to interact with this app, and that is why the errors happen. Offensive, isn’t it? Whatever form you wrap this message in, it will hurt the user who is already worried about things going not the way they wanted. So, don’t blame a user, be polite, friendly, and helpful; that’s important for setting the right emotional background of the situation. Try using clear instructions instead of blaming: for example, say, “Enter the valid email address” instead of “You’ve entered the invalid email address.”

Be constructive

Informing the user about the error in the right way is not enough: whatever friendly information you got lost, it isn’t super worthy if you don’t know what to do next. So, be quick to let the user know how to solve the issue. Some of the popular practices are the following:

If that’s a web interface, give the options to move to other pages of the website, first of all, the home page
In the mobile interface, make it easy to take a step back or quickly connect to the spot of the error
In case of complex forms and processes, do it for each step instead of at the end of all the processes

This 404 page of the fashion brand’s e-commerce website gives the visitor various options to jump to, marking the ability to get back to the home page as the main call-to-action

Consider using images and icons

It’s not a secret that people perceive and decode images faster than words. So, thoughtful use of an icon or image on the error screen can make communication faster, saving the users’ energy and a good mood. What’s more, images have a big potential for emotional appeal, which can reduce the tension of dealing with an error.

404 error page for the ShipDaddy website uses funny mascot animation integrating brand graphics into the web interactions and making the error page smoothened with fun.

Test and analyze

Don’t have an illusion that work on error presentation is finished with the UI/UX design stage of the project. It never stops because feedback from real users is the best way to improve user flow. A/B test different options, analyze carefully what are the most vulnerable zones and interactions, and use the findings to prevent errors where possible and smoothen the process where mistakes are unavoidable.

Add fun if that’s appropriate

The page or screen of error messages can use gamification, interactive content, or other ways to add fun, and this way reduces the negative effect. One of the good examples is the 404 page on Dribbble: as its target audience is designers, the resource uses their natural creative curiosity to add fun to the error situation, so users can see the collection of popular designs organized along with a similar color palette. On the page, users can continue the game and try other colors or search for what they need using the search field integrated into the error page.

Well-Done Errors Checklist

So, to sum up, well-crafted errors would rather stick to the following points:

readable and clear
easily noticed
constructive
effort-saving
polite and friendly
reasonably emotional

Useful Articles

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

How To Use Visual Dividers in User Interfaces

How To Make Text Improve User Experience: Insights Into UX Writing

How to Design User Onboarding

Big Little Details: 7 Helpful Elements of Web Usability

Meaningful Error: 404 Page Design. Inspiration for Page Not Found

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

Сообщение UX Design Practices for Error Screens and Messages появились сначала на Design4Users.

UX Design: How Video Content Can Enhance User Experience

Marina Yalanska — Mon, 01 May 2023 19:06:58 +0000

Integration of video content into web pages and mobile screens has been a steady trend in user experience design for the last few years. In this article, let’s review how videos can be used as a part of the user interface, what types and design practices are popular, and how video content enhances UX design for web and mobile. Packed with various UI design examples by the tubik design team.

The niche e-commerce website for the water brand uses different atmospheric videos to make the user experience positive and emotional.

Types of Video Content in Interfaces

People are overloaded daily with tons of diverse information coming from various channels. So, make no mistake, most visitors to a website or users of a mobile application aren’t going to spend much time learning about products or services, especially the new ones. In these conditions, video can become another effective way of communication, informative, dynamic, and attractive.

A catchy video crafted with an understanding of the target audience is a tool for attracting customers’ attention as well as a well-checked method of informing them quickly and brightly. Video content activates several channels of perception – audio, visual, motion – simultaneously, and usually does that wrapped in telling a story. Such a combination of factors often makes a video presentation strong, emotional, and memorable.

Hero section video used as a part of the home page for the gardening company website

Content and Goals Perspective

From the perspective of the content packed in motion and the goals set behind it, there are several popular types of videos we can often come across on different websites and applications.

Welcome (introduction) video: these are videos mostly used on websites, especially company and portfolio websites. This video usually aims at welcoming and greeting visitors and introducing a company, service, or person in a friendly and lively manner. Another option is the “about” video created to tell more about the company, people working for it, mission, achievements, etc. Videos of this kind should be quite short, concise, and telling a visitor the core information that could engage them to see more.

Promotional (commercial) video: this type of video rooting in TV commercials and movie trailers. It’s created to inform people about a product, service, event, brand or company, new release or premiere, major updates of the product, and so on, and so forth, in a way that encourages people to learn more, buy, or join in. It’s a video playing a big part in increasing brand awareness and focused on getting the target audience aware of the offer and its benefits.

Promotional video presenting Carricare brand

Showcase (showreel) video: that’s another type of video coming from the movie industry. It’s a video showcasing a set of previous works by a person or company. This one is usually quite long, about 2-3 minutes, and is often used as an impressive addition to the portfolio of people representing various creative spheres like design, animation, filmmaking, acting, modeling, marketing, and the like.

Tubik showreel videos

Short showcase video giving a glance at the icon design project for HUAWEI EMUI 10

Showcase video for the case study about the design process for the Glup delivery application

Video testimonial: these videos share the feedback from buyers and users, show them describing their experience with the brand, product, or company, this way sharing the signs of trust and loyalty and contributing to positive brand image and reputation.

Background video: this kind of video is used as a part of website design when the background of a page is chosen not to be static. As technical improvements in web development don’t stop, video backgrounds and any other kind of video integration into web pages aren’t seen as a great challenge anymore. So, web designers often turn to full-screen videos as a way to capture people’s attention, create the needed atmosphere, and give an instant glance at the product or service.

Background videos on the landing page promoting the mindfulness application.

Mywony website design uses full-screen video setting the instant connection to the nature of the product

Website for the editorial about insomnia uses a background video to instantly set the mood

Product video: these pieces of video are widely used as a part of the e-commerce user experience, in particular on product pages and landing pages, to give details about the product’s features and advantages, and inform customers about the problem-solving potential of the product.

Pet Shop website uses video content to demonstrate the products they offer in the proper environment and the way to connect faster to buyer’s needs

Hero section video: that’s another kind of web page video that is used as a part of the hero section, which is the above-the-fold part of the web page, often the home page, that includes a prominent and attractive piece of content, be it an image, video, text, slider or other elements. Choosing a video for the hero section, designers often breathe life into it, make it dynamic and strengthen its emotional appeal.

Hero video for PointZero25 event agency website

Hero section video used on the confectionery website home page

Video guides and tutorials: these are classic how-to videos. They present video instructions of a different kind showing the step-by-step process of interacting with a product, a piece of information (for example, a recipe), etc.

Explainer video: basically, this video explains to the visitor what the website, app, product, company, or service is about, and often answers the most frequent questions that may arise about it. Being a part of branding strategy, it is focused on presenting the benefits of the product or service and explanation about how to. It often employs storytelling showing the flow of interaction or sharing particular cases and situations, and infographics helping to understand the effect quickly.

Explainer video for OffCents

Entertaining videos: these videos are more about fun rather than information. Their main goal is to encourage emotional feedback and make it connected to a particular product, brand, or company. What’s more, videos of this kind have a high virality potential as having fun; visitors may want to share it with their friends or audience in social networks, this way spreading a word about the brand.

Educational videos: these videos usually become a part of educational platforms and can present a diversity of content, from specially crafted models explaining the processes to videos of wildlife or people doing different jobs.

Educational videos about wildlife integrated into the Nature Encyclopedia app

Design and Technical Realization Perspective

From the perspective of how it’s made, we could mention such common types of video content for UI design:

Live-action videos: these videos are closest to the classic filming process and feature real people, objects, or locations. Their major benefit is a strong collection with real life that has the great power of setting associations and encouraging viewers’ empathy.

Atmospheric live-action video as a part of the home page hero section for the Lumen Museum website

Example of a live-action video combining human talk and visual demonstrations

Fitness application using video tutorials on how to do exercises

Screencast videos: this video type captures the screen this way, showing particular processes. It is especially effective for various tutorials and product videos presenting digital products and software.

Screencast video capturing the illustration process in Procreate

Live-action screencast videos: as it’s clear from the name, this type presents a combination of two previous types. In this case, viewers can simultaneously see what is going on the screen and the person giving explanations.

Animation (cartoon) videos: these videos are very close to cartoons, which means that they present the animated sequence of many still images that can be presented in a variety of visual styles: 2D (flat), 3D (having dimension and depth), and stop-motion (capturing individual frames and combining them in a sequence).

Animated video created as visual storytelling support for the article about gamification in UI design

Motion graphics videos: these ones are based on animated graphic elements, for example, shapes or text, aimed at catching attention, impressing, and setting the theme, but not employing storytelling. They also become a great help in cases when complex or abstract information should be visualized in a way that is easy to understand.

Motion graphics video background for digital transformation agency

Ecommerce website design using impressive motion graphics video for the home page hero section

Photomontage videos: this video type imitates a slideshow, combining a set of photos in an animated sequence that can be supported by special effects, voice-over, or music. This type can work effectively to present various events, charities, or social issues, tell about companies, mark achievements and milestones, and the like.

Whiteboard videos: this is a captivating type of video, where the story, guide, or information flow is unveiled as a picture drawn step-by-step on the whiteboard.

Typographic videos: this is a type of video based on moving text. It helps to make text content perform in a more dynamic and emotional way and engage users that are not keen on reading static text content not to miss core messages. In most cases, it is supported by the voice-over or sound accompaniment enhancing the message.

360-degree (immersive) videos: trendy and getting more and more popular, this type of video records a view in all directions at the same time, this way allowing the viewer to get the full panoramic view. These are, in particular, effectively used as a part of the shopping or booking user experience.

Functions of Video in UX Design

Being a type of content that is quite complex in production and often needing much effort for smooth integration, videos in user interfaces are often in question. However, there are different functions they can cover, often better and faster than other types of content. So, by analyzing the target audience and business goals and considering these functions, designers and creative teams make a decision if they need a video and, if yes, what type is better for their objectives and budget. Let’s take a quick glance at them.

Information

The core factor in making video content considered a part of the user interface is making the information flow clear and easier to perceive. In many cases, a short 1-minute piece of video can share a chunk of information that would take far more time from the visitor reading it in text or trying to understand it from screenshots, mockups, and the like. That is a basic reason why various explainers, tutorials, and guides work well in video format.

No doubt, background videos applied to many web pages or screens now make them visually and emotionally appealing as well as informative, as the image instantly captures users’ attention much faster this way. Also, it supports the feeling of the integrity of all the layout elements.

An explainer video on the home page of Credentially website is placed in the above-the-fold area and lets visitors quickly check the benefits of the service

Atmospheric video integrated into the museum website design concept quickly gives visitors a glance at it in a realistic and dynamic way

Demonstration and Presentation

One of the strongest points of video content is the ability to demonstrate products or services using all the channels of perception at the same time. If visitors are interested, watching the video, they can consume quite a lot of information in a very short time without the need to scroll, read, see the pictures, and keep all those different pieces of information in mind in the process. As the human attention span is quite short, video often allows for using it effectively and gets higher chances of visitors’ engagement and website conversions. For instance, explainer videos or product videos allow for catching how to deal with it while the visitor is on the wave of interest. As well, for services that are focused on visual outcomes like design, advertising, illustration, art, modeling, and so on, well-crafted showcase videos can become the fastest way to the future client’s heart.

Video demonstrating Fitness App interactions

Short videos used instead of static images to demonstrate the options of models on niche accessories website lets customers learn more about the product and get a positive impression

Video demonstration of the product in the Drink Recipe application helps to impress users and supports the atmosphere of a bar or restaurant

Storytelling

Another strong point of video content is its ability to tell a story in a smooth and engaging way, according to the laws and techniques of visual storytelling, supported with voice narration or music enhancing that effect. People like stories: they clarify things, illustrate situations, are often fun and aesthetic, they are often easier to perceive and remember. In most cases, videos based on storytelling feature a plot that moves through 3 basic phases: showing pain points, activating emotions, and offering the solution.

Promotional video for the cleaning service tells an illustrated story using cute characters and sharing positive vibes

The video version of the case study on design for the Annual Awwwards 2020 website

Atmosphere

As well as images, many videos integrated into UI are super powerful in setting the needed atmosphere, which is a part of customer experience with the offered service, product, place, or event. This way, it pushes demonstration to a higher level, letting the visitor catch the vibe in split seconds. That’s one of the reasons why immersive videos are getting more and more popular and demanded.

The background video for the home page of the agricultural holding website impresses with the atmosphere from the first minute

The hero section video of the website for forest camping creates the needed cozy atmosphere from the very start of interaction with the website

The atmospheric hero section video on the winter holiday website shares the views of the destinations users can travel to, and this way lets them get stunned and dive into the mood instantly

Emotion

Whatever logical and clever people are, many of our decisions are partly or fully based on emotions, not only facts. “I feel it,” “I like it,” “I want it” – aren’t these reasons often stronger than any logic, calculations, and analysis? Video content is often a good way to cover that point: as it employs multiple perception channels and can collect various factors of influence together in a time-saving concentrated piece, the chances it sets the emotional connection to the audience get much higher.

Hero section video for a horse riding club sets strong emotional appeal

Archive video added to the article devoted to the historical period strengthens the emotional appeal of the page

Points to Consider

Loading Time

This is a core thing to consider when you decide upon video integration into the website or application. This issue requires a thoughtful approach from developers and thorough testing. That’s especially vital for the web pages that are expected to attract much organic traffic but can be downgraded in search results just because the loading time of the page is too long while the bounce rate is high as some visitors won’t wait long to see the page and will just move away. Think twice, consider technical options, and do your best to test that aspect. Otherwise, there won’t be much effect from even a very well-crafted video if it’s not even got a chance to be seen.

Contrast Issue

Integration of video content, especially full-screen backgrounds well-spread these days, requires much skill and effort to find the right contrast and hierarchy of elements and integrate the navigation and text content properly so that the page wouldn’t turn into an illegible mess. Test the contrast on various screens, devices, and in different environments to make sure it doesn’t spoil general readability and doesn’t break navigation leaving users lost in all that beauty.

Other Ways to Communicate

Make no mistake; video content is not a cure-all or a magic wand, as it could seem from everything mentioned above. Not all people like videos. Not all of them, interacting with your website or app, find themselves in conditions that are convenient for watching a video. So, don’t make the video your only way of communicating with visitors or customers. Support it with other ways of communication, like text and images. Otherwise, you risk losing a part of the audience just because video as a way of getting information is not comfortable for them. The “Show, don’t tell” rule may work, but the “show and tell” works better in this case.

Manipulations

Take care of allowing a visitor to manipulate the video where it’s needed, especially if it’s long and heavy. Think twice about using autoplay, as it may appear less convenient for your audience than the ability to control if they want to watch a video or not. Make sure that the user can control the volume of the sound part as audio autoplay as soon as the web page or screen is loaded is reported to be one of the most annoying aspects of the user experience. Put shortly, consider all the basic manipulations that will allow users to feel more confident with the video content in your web or mobile product.

Mobile Adaptation

What looks well on a desktop or TV, may not work at all on a much smaller mobile screen. As more and more digital interactions of different kinds move to mobile these days, this aspect should also be well-considered and tested for all types of content, including videos. Make sure that it looks clear and legible and is well-adjusted to the mobile screen of any kind.

Mobile adaptation for a niche e-commerce website selling accessories

Sure, that’s only the tip of the iceberg in such a deep and diverse issue as video implementation into user experience design, so we’re going to share more examples, UX practices, and tips about it. Anyway, this article may help UX designers, marketing specialists, and businesses to take into account the different benefits and pitfalls of using video content on websites and mobile apps. Stay tuned, and don’t miss the updates!

Useful Reading

For those, who want to dive deeper into the topic, here’s a list of handy articles:

UX Design: Types of Interactive Content Amplifying Engagement

Photo Content in User Interfaces: When and How It Works

Aesthetic Usability: Beauty on Duty for User Experience

Motion in UX Design: 6 Effective Types of Web Animation

How to Improve Website Scannability

The Anatomy of a Web Page: Basic Elements

How to Design Effective Search

Videos as Instructional Content: User Behaviors and UX Guidelines

Step-by-Step Guide to Custom Promo Video Design

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

Сообщение UX Design: How Video Content Can Enhance User Experience появились сначала на Design4Users.

How to Design Search in User Interfaces: Tips and Practices

Marina Yalanska — Fri, 10 Mar 2023 08:22:34 +0000

Search usability is one of the crucial factors of positive user experience for websites and mobile apps. Especially, the ones that contain a lot of items to choose from, be it news, blog articles, ecommerce goods, pieces of art, or anything else. Our today’s article provides some handy insights and design practices for making internal search intuitive and easy to use.

What Is Internal Search

Internal search is the function of browsing the content inside the website or app and showing it to the user according to his or her search query. Tuned correctly, it shows the relevant content and this way provides the shortcut to what the user needs. Thus, the internal search saves the user’s time and effort, amplifies the usability and desirability of the digital product, supports user retention, and increases conversion rates. Easy to see that this element is vital.

The interactive element responsible for the internal search in the user interface is a search field. A search field, which is also called a search box or search bar, presents the interface element that enables a user to type in the search query and this way find the pieces of content that are needed.

Physica Magazine website features the search control in the header

When to Use Internal Search

Whatever great you find the navigation of your interface, if your website or app is made of 50+ pages, it’s high time you considered applying the internal search. Well-designed and easily found search field enables the user to jump to the necessary point without browsing through the numerous pages and menus. This approach is a common pattern of user behavior now, it respects the user’s time and effort, so it is highly demanded in user-friendly interfaces.

The home page of the BlockStock website features a big search field in the above-the-fold area to let users quickly find the Minecraft assets they want

Why is it important to have a search inside? Earlier the recommendations about applying the internal search started from 100-200 pages on the website, but now we find them outdated a bit. Modern users are spoilt with a variety of choices and options offered by a constantly growing number of resources on the Web and in the app stores. If a visitor has already come to your website, your task is to give them what they want as soon as possible. And in most cases, users (especially those led by external search engines) come to a resource with a specific goal or query and without the wish to spend much time looking for it. Search enables them to make their journey focused and effective.

The Crypto Blog makes a search control one of the core CTA elements on the page: placed in the website header, it features the form of a clickable button, uses the well-known search icon and the textual explanation together, so that it was super fast for users to find it.

In case you have a single-page website, if your app or website is concise and not heavily packed with content, an internal search is not needed. Well-thought navigation will be enough, for example, for a corporate or portfolio website highlighting core information and services.

However, designing search usability, don’t make the opposite mistake: don’t prioritize search over navigation in a user interface. Based on everything mentioned above, designers may think that search is the best and only interactive element worth their attention. And that’s a big mistake. Although many users do try getting closer to their aim via search, there are also others who may have problems with search interactions. For example, they don’t know a language well enough to form the correct query, it’s not convenient for them to type something in, or they just hate thinking over the textual queries and they would prefer to follow the already existing navigation and cues rather than the cognitive load of communicating to the system via the search.

Take that into account and strive for a good balance of navigation and search.

The ecommerce platform selling insects features the open search field in the header

Core Features of Effective Search

There are different nuances of making the search interactions clear and intuitive, yet the three features below are core points to consider for the internal search:

it should be instantly visible
it should be clear as a search functionality
it should show relevant content

The tea e-commerce website includes the search control in the header, which is sticky and easily reached from any point of interaction

UX Design Practices for Search

Place a search field in the most visible interactive zone

One of the key design issues is the placement of the search graphic control in the interface. In web design, the search field can be often found in a header of a website and this is a good choice: as we mentioned in the article devoted to design practices for website headers, for any website it is the zone of the highest visibility, so putting a search field there enables users to quickly get transferred to the pages they really need without wandering through the website and scrolling down.

For example, it is actual for big e-commerce websites often visited by users who have a particular goal, a specific item they are looking for – if they can’t find it quickly and conveniently, the risk is high that they will leave decreasing the profitability of the resource. Moreover, the power of habit and mental models should also be taken into account: as numerous websites include search into their headers, users are accustomed to looking for it there when they need it.

The blog devoted to dessert recipes features the search icon in the header

Hiding search field into the below-the-fold area (the part of the page visible only after scrolling down the page) or in the footer increases the risk that most users won’t see it at all. However, using a search control both in the header and footer can work effectively, especially if the website doesn’t use a sticky header. In this case, scrolling down to footer the users won’t need to get back to search for something.

Talking about the search field in mobile interfaces, the situation differs as the designer is much more limited in the usable space. If the app is based on a lot of content and search is one of the central elements of interaction, it can be found in the tab bar and easily reached. In case the search is not crucial for the user goals and usability of the app, it can be hidden in menus or shown only on the screen where it’s potentially needed.

The recipe app full of content features the search field in the top part of the screen, with both a search icon and a textual prompt to make its functionality super clear. Also, the tags below help to tune the search better.

The concept of search interactions for a mobile app

The Gallery App features the search icon in the tab bar allowing a user to reach it quickly

Use a clear recognizable icon and be careful about experiments

In terms of interaction design, the search field can be presented in different ways, from the framed tab to the interactive input line, or even a minimalist clickable icon. In the vast majority of cases, the search field is marked with the icon featuring a magnifying glass. This symbol is recognizable by a wide variety of users so it has proved itself effective for setting intuitive navigation and is quickly seen when users scan the webpage.

Daily Poetry website features the search icon in the header and makes it super visible due to the color contrast

Experiments with this icon can influence badly interactions and usability of the layout, so if other symbolic images are applied, they should be carefully tested. However, if you deliberately don’t want to concentrate users’ attention on search functionality, other design solutions may work, sure.

For example, the ecommerce website above features the search option in the header but makes it with a text link instead of a quickly visible search icon. There are two reasons for that: firstly, the design approach is built on sophisticated typography and irregular grid with minimal use of visuals such as icons; secondly, the shop doesn’t offer thousands of items so it wants to navigate users to goods and offers. Such an approach makes the only icon of the shopping bag more noticeable among the text links in the header; still, the search is easily available to users who want to reach it.

Give textual prompts and auto-filling

Textual prompts are a good way to give users a hint about the interactivity and functionality of a particular interface element. The classical example everyone knows is the Google search that offers you the options as soon as you are inputting your query. This way you reduce the time of filling in the search field and let the user start actual interaction with the content quicker. Of course, it is quite logical to tune auto-filling according to the most popular and relevant queries.

The search in Tubik Blog opens a minimalistic new page blurring the blog home page as a background. The user gets the big search field with a text prompt “Type to search” and pulsing cursor showing that the form is interactive. Also, there are clickable tags with popular queries.

Search screen of the education courses app

Offer the options immediately

The flow of interaction can also be supported with the dropdown menu offering possible options while the user is typing the query. Going further from auto-filling, these can be fully-featured preview snippets of the relevant shop items, news, blog articles, etc.

Search interactions for Calorie Calculator App

Use filters to tune search

In case of very high content intensity on the website (imagine Amazone with thousands of items), even a quite well-crafted search query may be not enough as it will bring out too many options in search results. In this case, filters can support the interaction flow and allow users to tune their search better: for example, on the e-commerce platform, the filters can narrow down the search results according to price range, specific brands, particular characteristics of the product, and so on.

Here’s what search filters look like on Walmart website: the page of search results has a sidebar on the left to allow users to narrow down the list of options with the fine-tuning

One more option is integrating additional tuning right in the search field. For example, the search field on Amazon uses the built-in dropdown menu of core categories of goods, so you can start searching inside a specific section right from the search.

Filters also work really well in mobile search interactions as they are easily tuned and save time and effort in finding the perfect item.

Here’s how Kaiten food marketplace website and application use filters to help users tune their search process

The flower store mobile application uses a noticeable search field on the top of the screen and makes the search process tuned with filters

Recipe app filters interaction designed to tune the search among the hundreds of recipe options in the mobile app.

So, internal search is an element of high importance to provide website visitors or app users with a good user experience. Make it intuitive, use the power of habits, consider the points above to improve the search experience of your user interface, and strive for a good balance of search and all the other navigation. And don’t forget to analyze the internal search result: they will tell you what the users need and look for on your resource.

Useful Articles

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

Visual Dividers in User Interfaces: Types and Design Tips

How to Design User Onboarding

How to Make Web Interface Scannable

UI/UX Design Glossary: Navigation Elements

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

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

Photo Content in User Interfaces: When and How It Works

Marina Yalanska — Tue, 14 Feb 2023 12:49:18 +0000

Photos are the classics of web and app design imagery. They catch attention, set the mood, show how things work, and cover many other essential objectives in cases when pictures work better than words or enhance the written message. Our today’s article is also devoted to photos used for websites and mobile applications: let’s look at the main goals that push UI/UX designers to search for the best shot and review plenty of UI design examples of how photos work in user interfaces.

Pottery website design

Product or Service Demonstration

Obviously, photos present the major tool for the visual presentation of goods on e-commerce websites where the principle “you get what you see” is a vital part of success. As long as you sell something physical, the customer expects to see it by default; that’s really the case when the picture is worth a thousand words. For shopping online, the quality and style of photos are crucial as they often become the main trigger capturing the customer’s eye as well as one of the key elements in the decision-making process under conditions you cannot see and touch the real goods.

Other vital aspects of using photos effectively as a part of e-commerce experience and brand presentation are originality and consistency. To stand out from the crowd of competitors, online stores need their photos to look unique, memorable, and instantly transfer the brand image. That’s why regular photo shootings are an integral part of e-commerce reality. Depending on the target audience, different stores choose different approaches to photo presentation: some make it friendly, informal, and as close to real-life as possible, while others present their goods in original surroundings or model-posing; some resources prefer studio shots others take photos in special environments. Whatever the approach, an essential aspect is staying consistent in it to make it recognizable and so that website or app visitors can feel it like a pattern and didn’t handle too much cognitive load. As well, a consistent approach to the cross-platform photo presentation of the brand photo content in different marketing channels, such as social networks, advertising banners, newsletters, etc., sets a strong visual connection and helps shoppers recognize the brand whenever they see it.

A consistent approach to a visual photo presentation of the items on the e-commerce website for a fashion brand

Anyway, the photos should demonstrate the stuff from different angles and perspectives, especially on product pages. Another thing to keep in mind is that items photographed on models or in the proper environments have more chances to draw customers’ attention and look more convincing. It doesn’t mean that object photography doesn’t work, yet in most cases, seeing an outfit on a model, a toy in the hands of a kid, or a set of dishes on the served table lets the buyer easily imagine it looks and see its benefits. So, quite often, e-commerce platforms combine both types of photo presentation: a clean object photo with no distractions as well as its photo on a model or in the surroundings of use.

Certainly, it works the same way to demonstrate the services that can be visualized with photos.

Website for a massage services company

Creative approach to using photo content for not only setting a visual connection to the provided services of a cleaning company but also as a part of scroll animation

One more popular case often demanding thorough attention to photo content is the situation when the person or company has to build an online portfolio website. The visitor’s attention span is very short, so works in the portfolio should be dressed to impress. In this case, photos often become the major visual attractor and help to build a consistent presentation.

Fashion models portfolio website

MYWONY wedding dresses brand website

Setting Atmosphere

One more point photos are highly effective at is the ability to instantly transfer the visitor to the needed atmosphere. Properly chosen quality photo creates the mood, and this way engages the users to not only see the content but also somehow feel it, connected to their own experience and imagination.

Gin School website design

Home page for the ballet company website concept

Due to that, in particular, atmospheric theme photos are quite popular to be used in hero sections of websites and landing pages. This way, designers activate the factor of emotion and delightfulness from the very start of interaction with the interface.

Website design concept inspired by Moesgaard Museum

One more popular UI design trend of a recent couple of years is using photos as background images. Not only does this approach make the screens visually and emotionally appealing, but it also supports the feeling of the integrity of all the layout elements. On the other hand, it demands deep attention to contrast and legibility of all the elements, which may be harder to achieve than in the case of monochrome background.

Website design concept inspired by Moesgaard Museum: the home page features an atmospheric full-screen background photo.

The impressive 404 error page for the website devoted to saving the oceans features an impressive full-screen background photo, instantly communicating the problem to the visitor.

Lumen Museum website pages

Humanized Connection

Consciously or unconsciously, people tend to be curious about other people. What’s even more important, in many cases, human photos look more convincing and trustworthy to us. No wonder one of the key goals behind the photos on websites or apps is making communication more human-like. Photos of teams working on a product, pictures of people to connect to, from founders and top managers to support personnel, photos of clients providing testimonials or reviews, authors of articles in the blog or media, and many other cases – all of them aim at making the user experience more human and trustworthy.

Nonconventional Show interview podcast website

Website of a fashion designer brand

Design concept for a website for a photography contest

Website design for Mayple, a fully-managed marketing services marketplace designed to help businesses work with experts.

Directional Cues

A directional cue is an element of the user interface giving a visual hint on a certain interaction or content and helps the visitor see it quicker and easier, just like road signs and signposts do in the physical world. Directional cues are an essential factor in enhancing digital product usability, as they:

enhance the page or screen scannability
strengthen the visual hierarchy
improve navigation
increase conversion rates.

Photos integrated into the interface can also cover that role. They mostly function as pointers (a photo of a human, animal, or object pointing at the needed element and this way attracting users’ eye to it) or gaze direction (a photo of a human, animal, or character whose eyes are directed to the needed element this way stimulating a natural urge of users’ curiosity to check what it is).

The hair beauty company website uses a hero image on the home page that works as a directional cue: the model’s eyes attract your attention to the zone of CTA elements.

Guides and Manuals

Being highly effective and common in setting a natural visual connection with the physical world, photos often become the primary demonstration tool in diverse manuals and guides. Be it a recipe, a guide on how to use a device, to knit a scarf, to tie a neckerchief in 20 trendy ways, or even how to take a photo – whatever kind of instructions is given to a visitor, supported with good photos it will work much more user-friendly and will be far handier than just a text.

Dessert recipes blog

Illustrative Article Images

One more goal efficiently covered with photos is illustrating articles and online editorials. Photos can add visual support to the topic of the article and strengthen the text.

The rule of thumb here is not to use photos as visual fillers. Both title images and photos included in the article have to work as visual helpers, not distractors, so make them meaningful, informative, or at least adding the necessary mood if the article is a piece of the emotional story. If you are telling a historical or retrospective story, find proper archive photos; if that’s the article about a specific place, don’t use stock photos to show something similar but get the ones from that particular location. Relevance is a key to successful photo usage in this case.

Online editorial about different generations

Bartending encyclopedia website

Web design concept for an online magazine

Creating Emotional Appeal

Another big reason to integrate photo content is the emotional appeal added to the user experience. Whatever logical and thought-out we try to make our actions, the emotional background of the situation plays a crucial role in engagement and decision-making. And that is the aspect where images in general and photos, in particular, are super helpful. They set strong associations and build up the necessary atmosphere, often even before a visitor starts reading, as images are perceived faster than words. With the properly chosen photo integrated into the web or mobile layout, designers are able to capture not only the user’s eye but also transfer the needed mood.

Confectionery website design setting strong emotional appeal

Online editorial about the history and development of skateboarding

Book festival website

Advantages of Photos in Interface Design

The significant advantage of photos is their ability to connect what users see on the web page with a real world of physical things and live people. Photos have been a part of human reality for many decades, much before the Internet’s advent, so this kind of visuals is fairly native, close, and clear for us. What’s more, with all those devices that let any of us capture something in a second, photography is really a part of everyday life for many people – so, being used on a website, it sets strong connections and associations.

What’s more, photography is also a kind of art. With them, you can set the balance of realism and aesthetics in your web user interface. You can keep the necessary style appealing to your target audience and creating the required emotional background. That is one of the reasons for choosing photos to support articles on blogs and media websites.

Website design for a horse-riding club

Points to Consider

Using photos in web design, consider the following tips:

download high-resolution photos
optimize them for the web/mobile so that too big images don’t overload the page or screen – loading speed is a crucial factor of positive user experience
give the images enough air to breathe – keep the balance of negative space
remember about responsiveness and test how the images look on different screens and devices
don’t use photos as just decor – let them speak to users, transfer a message and support all the other layouts.

Where Designers Get Photos

There are three several ways:

original photo production for the particular project: this is the most expensive option, but the photos will have the highest level of exclusiveness;
paid stock photos: you buy a photo you need from a photo stock that offers a variety of shots. This may be cheaper than custom photo shooting, but you may spend a lot of time searching for the photos corresponding to your tasks;
free stock photos: you take the photos from the communities or teams that share them for free. It is the cheapest option, but you have to be ready that other people may do the same so you’ll have to think well about how to make your design original under these conditions.

So, it’s easy to see that the way you choose depends on a specific project, its budget, and goals.

Anyway, even if you are the one who runs a blog or charity with no budget for visuals or if you are creating a design concept for your portfolio, free photo stock websites offer a lot of high-quality content now. As well, some stock photo banks offer a mixed scheme, with some content or formats available for free and more on subscription; as well, from some of them, you can also order unique photos for your goals or buy already available photos to be sure they belong only to you.

Among them, the following resources are often used for good photo content:

Unsplash: it’s a community of photographers from all over the world sharing their photos for free. Photos are featured under thorough curation, so you won’t find trash there
Pexels: a big bank of free stock photos on a variety of topics
Pixabay: a huge stock of free images, not only photos but also illustrations and vector graphics.
Shutterstock: a huge bank of stock images on different topics, most content is available with a paid subscription
Depositphotos: another massive library of stock images, especially for business and marketing goals, mostly available with a paid subscription

Useful Articles

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

User Experience Design: 7 Vital User Abilities

UX Design: Types of Interactive Content Amplifying Engagement

The Anatomy of a Web Page: 14 Basic Elements

10 Reasons to Apply Illustrations in UI Design

UX Design: How to Make Web Interface Scannable

Negative Space in Design: Tips and Best Practices

Motion in UX Design: 6 Effective Types of Web Animation

User Onboarding Design: Practices and Tips

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

Сообщение Photo Content in User Interfaces: When and How It Works появились сначала на Design4Users.

User Onboarding Design: Practices and Tips

Marina Yalanska — Wed, 11 Jan 2023 12:01:30 +0000

There is no second chance to make the first impression, and that gets even more crucial in the conditions of high competition. In the sphere of user interfaces, when you make the early interactions and product onboarding intuitive and engaging, it means higher chances of attracting and convincing the user to go further than just the first step. So, today we want to share a brief guide with tips on effective user onboarding for a positive user experience from the first step.

Onboarding tutorial screens for the Vertt application

What Is Onboarding?

Let’s start with the basic terminology. The concept of onboarding comes from the sphere of employment and HR. It marks special steps and techniques aimed at helping newcomers to adapt to the new conditions and get comfortable to bring out good results as soon as possible. For most people, a new job is a sort of stress which demands effort and consideration, so a little help can make the decision-making process easier, the emotional background smoother, and performance growth more harmonic. Special tactics enable to correct possible inconveniences and make people more confident in the new place, which means they become productive and socialize with their colleagues faster, bringing benefits to the company.

The sphere of user experience design for digital products quickly absorbed this idea together with the term. Here onboarding means the set of techniques and interactions whose objective is to comfort the user and give a concise introduction to the product.

Considering the fact that users, especially first-time ones, are not going to spend much time trying to understand how the product works, one of the vital issues in user onboarding is deciding upon clear priorities. Users have not only limited time they are ready to devote to learning about the new product, but also limited capacities of working memory. Even if there’s much to tell about the product, don’t focus on overwhelming visitors with everything at once. Setting the priorities, designers and stakeholders decide which dose of information is needed for a particular stage: tutorial, wizard, tooltips, instructions and the like should feature the most essential information first.

Onboarding screens for the app on bee-keeping

Onboarding Goals

There are three basic goals that UX designers strive to achieve with onboarding screens and functions.

Greeting: well-crafted onboarding process starts the communication of the product with the user in a natural, engaging way
Information: at that stage, it’s crucial to tell users how the app is going to help them or make their life better
Engagement: onboarding contributes much to set emotional appeal and encourage users to learn and try more

So, logically, you use onboarding screens and most elements for first-time users but not to annoy those who are already using it with the information they already know.

Flower Store application onboarding

Onboarding Elements

There are different elements and techniques of the general onboarding experience.

app tutorial, aka first-look tour: a set of screens that quickly introduces the product to a newcomer and convinces the user to try it
welcome messages: short messages on welcome/splash screens to greet the user and set the communication; quite a typical way to ignite the onboarding process; often feature a CTA element
progress bars and indicators: the trick based on the natural human urge to complete the tasks. Progress indicators (dots, dashes, etc.) included in the user interface stimulate a user to complete the onboarding and creates an understanding of what stage of it is currently active
explainer video: the video review of the product benefits and functionality explaining the major points to the user may work as a dynamic and effective way to quickly introduce the product.

The explainer video designed for OffCents App

in-context and action-driven tooltips: prompting messages tied to particular layout elements or user actions, usually appearing in modal windows rather than separate screens
empty state tips: these may appear in the zones which in the future will be filled with the content created by users, but while they are empty, space can be used for good and informative prompts
checklists: as well as progress bars, this onboarding technique motivates users to complete the initial set of steps. Even more, it may become the element of gamification (for example, you complete the full list of points and get an achievement or open more functions)

Behance uses a checklist strategy to guide users in completing their profile

hot spots: this onboarding element attracts attention to important zones or controls that risk being missed or unnoticed by an inexperienced user
personalized onboarding: the approach is built on setting user’s preferences from the very start and can often be found in products based on interaction with a lot of diverse content (like Behance or Pinterest)

Personalized onboarding experience for the Perfect Recipes app helps users to set goals and restrictions this way making the app performance tuned for their specific needs

Sure, this list doesn’t mean that all of them have to be integrated into any product. In each particular case, the user experience designer has to find the balance and pick the points that work for both users and the business goals behind the product. What’s more, to organize onboarding right, explore the mental models of your target users via user research and usability testing: this way, you will be able to predict more precisely when and where users need help and prompts.

Onboarding Design Practices

Use Images in App Tutorials

Most people perceive and decode images faster than words. It makes the usage of illustrations logical and rational for app tutorials that have to give information quickly. In the article devoted to the benefits of illustrations in UI, we mentioned that in the case of tutorials, illustrations, be they photos or originally drawn images, fully reveal their potential in explanation and clarification. The options can be totally diverse, from simple icon-like to artistic and sophisticated artworks. Illustrations of this kind become an excellent way to boost usability, minimizing the necessity of using the copy on the screens. They are particularly efficient in apps for kids and youngsters as they usually feel this sort of explanation is more user-friendly.

Cute and funny 3D animation created for the onboarding experience in the app for the studio for children holding classes on 3D modeling and animation.

3D animation for the Status App onboarding

Design trends demonstrate the increasing popularity of custom illustrations created for specific interfaces. App tutorials became the favorable ground featuring a variety of styles and approaches. In many cases, illustration becomes the center of the composition, and its aim is to present a specific feature or benefit in an attractive and easily decodable way. Another popular approach is applying a mascot, which is a character imitating the flow of real communication with the user and setting emotional bonds. What’s more, you can make the images work as directional cues helping a user to understand the navigation and layout easier.

The onboarding screen for the Finance Tracker application features a custom illustration that is not only trendy and eye-catching but also works as a directional cue together with an arrow to attract users’ attention to core interactive elements

Don’t Be Wordy

In writing for user interfaces, words are power. However, there are two simple rules to uncover that power in the best way: say words short and make them helpful. Here’s the time to realize that writing a short informative sentence is much more complicated than writing a long text. You have to find a proper way not to waste those precious seconds that the user is ready to devote to tutorial screens or tooltips. Some creative teams involve a professional copywriter for this task to create texts that make every single letter count. With the writer or not, anyway, take time and effort to create a concise, attractive and clear copy that applies language appealing to the target audience and corresponding to the objectives behind the product. As well as design solutions, the copy should be tested as much as possible to find short ways of informing users.

“The main thing you need to know about instructions is that no one is going to read them—at least not until after repeated attempts at ‘muddling through’ have failed.” Steve Krug once mentioned, and that’s the point to remember. When you are tempted to manifest your eloquence, just don’t overdo it here: tooltips, tutorials, and instructions are not the place for it.

Another thing to remember is that any text is not only an informative part but also a visual element of design. As well as the icons, fields, buttons, illustrations, toggles, and other layout elements, it literally occupies the part of the screen or webpage like any other graphic component and influences the general stylistic presentation. The success of the efficient copy directly depends on not only the message and content but also design solutions as the choice of types and fonts, background, and even placement of the text. All that affects the level of readability, so if these points aren’t thought-out well, the copy risks getting much weaker, even being highly meaningful.

The short tagline for the My Baby App onboarding screen expresses the essence of the problem it solves and leaves most of the screen space for the beautiful 3D illustration

Focus on User’s Needs

Have you ever dealt with parents introducing their children? When they start telling about the kid’s achievements, strong points, and features, it’s not that easy for them to stop. The same happens when you introduce your product to a new user. For you, it is the clot of ideas, iterations, effort, time, money, benefits, valuable functions, and much more else. No doubt, telling about it, you want to share that feeling, to unveil as much as possible. That’s a natural temptation, but sticking to it is a mistake. For a user, it’s just another app, tool, or website, a bit of a step into the unknown. So, decide what benefits and functions are the most needed by a target user and tell about them in a focused and effort-saving manner instead of trying to overwhelm the user with everything possible at once.

Even the quite concise textual content on the onboarding screens of the app devoted to bees and honey is organized with a clear visual hierarchy, with the most essential information in headings and a bit more details in the body copy

Add Life with Animation

One more way to add not only meaning but also fun and engagement is animation. Motion makes interaction more dynamic; it breathes life into the interface, creates wow effects, and catches the user’s attention. Even more significant point is that animation can make important details more noticeable. On the other hand, motion can increase the time and traffic needed to get it loaded, so it should apply it wisely and discuss with developers the aspect of its technical realization.

Emotional and eye-catching 3D animation designed for the onboarding interaction with the My Baby app

Allow for Skipping

Another thing to consider is the choice of skipping the tutorial. Not all users need it, even those using the product for the first time, so for most products, it could be reasonable to give them the ability to skip the tutorial. The decision on this function has to be made on the basis of testing and analysis.

Mind the Context

In-context tooltips are a good way to support the users in the process of trying the interface functionality. They appear in the process of interface exploration one after another, feature after feature, in one-time dismissible modal windows to explain the ways to use a particular function or highlight a specific benefit.

Amazon uses tooltips to drive the non-registered users to sign in, and in the same way, informs about the vital benefit (international shipping) that may have a great impact on decision-making

Use Empty States

For the products, where users interact with content actively, at the early stage, they quite often deal with the spaces that are empty because the user hasn’t filled them with personalized content yet. For example, these can be the screens of a wishlist, projects, collections, etc. While they are empty, using them for onboarding prompts and further engagement is a good idea.

The Dropbox empty page for starred items features a funny illustration and a short, well-written prompt on how and why to use this function

Mind the Emotion Level

Making a digital product emotional is an essential aspect of setting a solid connection with the target users, and design is one of the most flexible ways to do it. Yet, make sure you find the right way to set the needed emotion and learn what works for your audience: user research plays a super important role in this perspective. Don’t design onboarding and write the copy for it until you have a clear vision of the tone and voice of the product’s communication with its users. Don’t go too far with humor, especially with a product aimed at users from various countries: what sounds funny for you can be not funny or even offensive for your users. Make onboarding emotional but do it carefully.

Don’t Overplay

Honestly speaking, many users don’t need instructions or help all the time. So, don’t overplay in your trying to be helpful. Onboardings elements start playing on the wrong side when:

there are too many of them
they are too distractive
they are unclear
users aren’t able to skip them or dismiss them (like “don’t show me that anymore”)
they aren’t bearing any useful information.

So, keep a good balance of user support and never miss a chance to check it with user testing.

Summing up, it’s easy to see that well-crafted onboarding is the way to set the bridge between the product and the user, create the emotional background, quickly present the core benefits, and make a good first impression.

Useful Articles

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

UX Design: Types of Interactive Content Amplifying Engagement

Motion in UX Design: 6 Effective Types of Web Animation

Visual Dividers in User Interfaces: Types and Design Tips

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

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

Сообщение User Onboarding Design: Practices and Tips появились сначала на Design4Users.

Illustration Process: Creative Steps of Making Illustration Set

Marina Yalanska — Fri, 07 Oct 2022 17:21:43 +0000

The process of creating an illustration for a particular product or project is not only about visual expression. There’s much more behind it, as in any type of design process: apart from the illustrator’s knowledge, effort, and practical skills, it also includes research, analysis, idea and composition search, working out the best color solution, and many other aspects leading to a needed outcome. In the case of creating a consistent set of illustrations, the process gets even deeper and more extended to reach the systematic design approach. That’s what we are going to talk about today: Tubik illustrator Yaroslava Yatsuba is ready to unveil her creative approach to illustration sets and share a bunch of handy tips for illustrators. Join in!

Whatever is your artistic manner and workstyle, the major advice from our illustrator is like that: never stop where you are. Only the constant learning process can allow you to achieve creative development and not to get stuck on the sidelines of the information field.

But how to search for the needed data and process it properly?

These are the questions Yaroslava asked herself working on a new set of illustrations called Curious Cat. In addition, in this art project, she wanted to try new stylistic techniques that are often found in printed graphics but rarely in web illustrations.

Practical advice: If you want to reinforce and develop a certain stylistic skill, work on a consistent set of illustrations, not a single artwork. In this case, you get a hand in it, your creative approach is more systematic and complex. What’s more, you will tackle the difficulties which may not arise in one piece of art, and the customer, seeing a series of artworks, will catch the general style more accurately and understand that this artwork is not just accidental something taken out of thin air.

Stage 1: Color Palette

In this case, the artist proceeded from a style that was based on imitation of manual printing graphics. So, she chose 3 primary colors, the overlay of which would give her all the necessary palette and convey the spirit of screen printing. To reach that effect, she selected a brush in Procreate that creates the necessary texture. A more time-consuming but also the more effective method is creating your own brushes using textures from real materials. Yaroslava also added a neutral gray color and a couple of paper textures to the palette.

Stage 2: Theme

The artist was looking for an abstract theme that could have a logical sequence of illustrations and, at the same time, encourage her to search for new expressive techniques and compositions.

As a result, the choice was focused on the theme called Process, so the illustrations aimed at reflecting various stages of the research and creation process. Also, this series had a mascot character: the curious and clever Cat.

The illustrator took the basic and crucial stages of the creative process as themes for the illustrations in the set:

statement of a question
research
data systematization
analysis of the received data
hypotheses
solution

Stage 3: Process

It’s easy to see that the creative process starts much before the first line or word gets down on paper, canvas, or artboard. So, the set of artworks about the Curious Cat reflects will help us to define, describe, and illustrate the design flow for a series of digital illustrations. If you project this list of points onto the creative process for illustration, then it might flow in the following way.

Statement of the question

What goals do I set for myself?
What do I want to achieve?
Which illustrators do I like?
What is in their work that caught my attention?
What is my work missing?
What skills would I like to upgrade?
How can I reveal the topic?

It doesn’t mean to ask these questions all together at once, it’s enough to concentrate on a couple of aspects that are of interest at the moment since the tasks change and the entire analysis process needs to be done anew each time.

Research

This stage includes collecting references, selecting works of illustrators whose work inspires you, reading articles on the topic under study (in this case, about different kinds and approaches to the creative process), or perhaps even not this topic directly but the one that will really motivate you to work (for example, biographies of famous creative people you like), and creating a library or mood board of photo fragments you like.

Data systematization

It is a vital stage. It defines how you processed the information gathered at the previous stages and were able to structure it. For example:

The works of this group of illustrators catch my attention and emotions with the transfer of movement.
In this group of photographs, I adore a beautiful combination of colors.
The description I read in the article helps to convey the problem more precisely.

Data Analysis

Analysis of the obtained data in case of the illustration process lies in the:

creation of sketches
trying various color selections
thinking over the plot
considering a character image.

The artist realized that this particular project needed a character. It was the best was to reach the consistency and united look of the different artworks. What’s more, the character was effective in clarifying the terminology and actions as well as humanizing and personalizing quite abstract notions and phenomena.

Here you can see the search process for the character images that went through several iterations before the Curious Cat was found as the best choice.

Hypotheses

This stage goes in parallel with the analysis. And often, for illustrators, it looks like creating sketches and possible variations, ideas on how you can get the best for the required plot, which composition, angle, or shape is more advantageous for conveying the essence, which colors will emphasize the mood and set the needed atmosphere.

Solution

The solution is the sum of all the stages passed and implemented in the illustration. The final result may seem simple and uncomplicated at first glance, but only after deep processing and analyzing the information, this result will be not random or accidental but will be based on experience and practice. What’s more, the set of illustrations opens a broader perspective for visual storytelling.

Hopefully, the stages described above will motivate you to try such a systematic approach in your illustration experience. Also, welcome to check more practical tips and examples by Yaroslava: in our earlier articles, she shared guides on how to build up your original style of illustration and also, she shared the creative process step-by-step in the case studies on narrative illustration, interface illustration, and theme illustration devoted to the Olympic Games.

Illustration Collections and Digital Art Case Studies

If you want to see more collections of illustrations or discover how they work in particular design projects, here’s the set of posts for you.

Book Illustrations for Visual Storytelling

45 Inspiring Illustrations About Workspaces, Creativity and Art

20+ Atmospheric Digital Illustrations: From Landscapes to City Views

Digital Art: 40+ Inspiring Illustrations on Diverse Themes

Case Study: Fulfill. Illustrations and Web Design for 3PLs Marketplace

Case Study: Roebuck. Mobile Design and Illustrations for Educational App

Case Study: World Humanitarian Day. Illustrations and Video for United Nations

Case Study: ABUK. Custom Book Cover Design for Audiobook App

Case Study: Moonworkers. Digital Illustrations on Film Production

10 Reasons to Apply Illustrations in UI Design

Originally written for Tubik Blog, graphic content by tubik arts

Сообщение Illustration Process: Creative Steps of Making Illustration Set появились сначала на Design4Users.

How to Use Visual Dividers in User Interfaces

Marina Yalanska — Tue, 27 Sep 2022 08:39:30 +0000

The thoughtful design of content performance in web and mobile user interfaces means much for amplifying the utility and usability of the product. Our today’s article is devoted to visual dividers, the layout elements that help to organize content on the screen and separate its parts clearly. Let’s check how visual dividers work and what types of them are popular.

What Is Visual Divider?

The visual divider is a layout element that helps to separate pieces of content into clear groups, sections, options, or parts. This way, it helps a designer organize the page according to the typical patterns of visual perception and makes the layout clearer and more digestible for users.

Together with other elements on the page, dividers play a great role in setting up a solid visual hierarchy. For example, with them, users can easier define the relations of content, like if the pieces of content are the same, similar, or related; if any of them is subordinate to the others, etc.

Dividers are also important for usability: in many cases, they create visual containers that look clickable or tappable, which is particularly crucial for mobile interfaces.

Kinds of Visual Dividers

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

lines
color
negative space
shadows/volume
images.

Lines

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

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

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

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

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

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

Negative Space

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

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

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

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

Color Contrast

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

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

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

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

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

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

Shadows and Volume

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

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

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

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

Images

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

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

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

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

Functional Types

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

Full bleed dividers

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

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

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

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

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

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

Inset dividers

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

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

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

Dividers with subheaders

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

Middle dividers

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

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

Points to consider

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

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

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

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

Useful Articles

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

The Anatomy of a Web Page: Basic Elements

3C of Interface Design: Color, Contrast, Content