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.

UX Design for E-Commerce: Principles and Strategies

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

5 Basic Types of Images for Web Content

Web Design: 16 Basic Types of Web Pages

Error Screens and Messages: UX Design Practices

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

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

Crypto Blog

Cryptocurrencies present a hot and trendy theme to discuss and research these days, and this web design lets us also add two cents to it. Here are some pages for the blog about the crypto world. Stylish composition echoing traditional broadsheets layout, readable and elegant fonts, a minimalistic palette with cool color accents and trendy images — all that helps to transfer the idea of the quality and informative resource which is easy to use and stands out of the crowd.

Web Editorial About Insomnia

This web design was created for the online editorial to reflect the actual and globally known issue of insomnia, which significantly influences human health, both physical and mental. It’s easy to see that typography becomes the most prominent element of the design concept, not only sharing the information but also setting the atmosphere at once. Impressive manipulations with typographic elements become a part of the design approach and greatly impact setting of the mood and emotional background, which is also massively transferred by the thematic photo video content. Also, the trendy menu design, smooth and captivating, sometimes even hypnotic motion graphics, and color palette setting the visual connection with evening and night time contribute to the website’s elegance and visitors’ engagement.

Illuminating Radioactivity Educational Website

Illuminating Radioactivity is an educational web resource covering different aspects of radioactivity, designed by tubik and developed in partnership with the Bombshelltoe Arts and Policy Collective and the Stimson Center. The interactive home page, original typography, uncommon layouts, catchy images, thought-out data visualization ideas, and many other details helped present the topic from a much broader and more engaging perspective.

Read more about the design process and solutions in the web design case study.

Blog Layout Explorations

This web design concept demonstrates the layout exploration for the featured article based on a nuanced monochromatic palette, sophisticated typography, and photo content, creating the proper mood.

Art Institute Blog Design

Feel the power of sophistication as this web design project is literally made from it: that’s the look at the web page layout explorations for the blog devoted to art in its diverse manifestations. The airy layout, beautiful and prominent photo content, and elegant typography let the visitors catch the artistic vibes from the first second.

Geography and Ecology Blog

This is the user experience design concept for a niche blog devoted to topics connected with the environment, ecology, geography, and the modern state of nature. Here, the design impresses the visitor with spectacular photo and video content, illustrating informative and important text content and enhancing emotional communication with the readers.

Powerful Women Editorial

This design was created for the web editorial, telling the inspiring stories of amazing women who had the power to change the world. Close to design for printed media resources, the user experience is focused on text content elegantly presented with the following aspects:

• a well-thought-out choice of fonts
• stylish and moderate color palette
• prominent photo content, creating the needed atmosphere in split seconds and working in one harmonic composition with the text
• minimalistic and intuitive navigation
• smooth motion
• a solid visual hierarchy that allows for effective scanning and skimming.

Editorial About Generations

This eye-pleasing web design was created for an editorial devoted to different generations. Here, you will find the limited and contrasting color palette, sophisticated typography that makes even text-heavy pages beautiful and readable, airy web page layouts to let users quickly scan the content, and elegant use of imagery instantly creating the atmosphere.

Bartending Encyclopedia Website

This website is devoted to the theme of bartending, telling about various drinks and cocktails. Custom photo content, trendy split-screen structure, and dainty typography make the web pages beautiful and set a strong emotional appeal.

Stop Plastic Editorial

This web design project deals with a hot and important topic of today: our world is overloaded with plastic, and this issue shouts for global attention. Take a look at the original design for the editorial, telling people more about the problem, its influence on nature and our future, and the ways to solve it. Limited and contrast color palette, readable text blocks efficiently supported with negative space, impressive visual and video content, and smooth motion for interactions make the user experience emotional and engaging.

Skateboarding Culture Editorial

This design was done for the online editorial devoted to skateboarding culture and history. Minimalist layout, bold typography, monochrome color palette, irregular grid, prominent atmospheric images, and archive video content supported with smooth motion – all the mentioned immediately set the needed mood and engage the visitor to learn more.

Book Review Website

Here’s the web interface designed for a book review resource. The elegantly designed pages are based on color contrast, visually separating different content zones, typography ensuring a good level of readability and book cover presentation and smooth animation, making the user experience more lively and dynamic.

Culture Magazine Web Design

Online magazines are getting more and more online presence today, with people using the web to get both information and entertainment. So, for web designers, it raises the challenge to combine digital design trends with traditions of editorial design. Here’s the home page designed for a website of the online magazine about culture. Prominent photo content, trendy asymmetry, unobtrusive navigation, and well-checked readability make the layout elegant, attractive, and easy to use.

New web and mobile design collections and design case studies by our team are coming soon – don’t miss the updates!

Tubik Design Collections and Articles

If you want to check more creative sets and useful articles on UX design for web and mobile, here are some of them.

Web Design: 11 Diverse Functional and Awe-Inspiring Website Designs

Dainty UI Design Projects Inspired by Food and Drinks

10 Elegant and Handy User Interface Design Projects

App Design Ideas: 7 Nifty Mobile Application Design Projects

Product Page Design Inspiration: 17 Ecommerce Web Designs

UX Design for Traveling: Impressive Web Design Concepts

23 Impressive Web Design Concepts for Various Business Objectives

UX Design: Types of Interactive Content Amplifying Engagement

Motion in UX Design: 6 Effective Types of Web Animation

5 Pillars of Effective Landing Page Design

The Anatomy of a Web Page: Basic Elements

Originally written for Tubik Blog, graphic content by tubik

Сообщение Elegant and Informative Web Designs for Media and Editorials появились сначала на Design4Users.

Project

Landing page promoting the mobile application supporting convenient deliveries in Saudi Arabia.

Process

A well-designed landing page is a tool of great importance for building mobile app branding and amplifying its online presence. It plays a crucial role if the case is mobile-only and the app doesn’t correlate with a website. In general, it is a web page designed to focus on a specific, relatively narrow goal and a quick way of accomplishing a particular action. So, for a mobile app like the Pass-On application, the goal is app installation, and the landing page concisely covers its benefits and functions. In addition, creating a landing page based on geographic, gender, psychographic, demographic, and behavioral targeting is an effective way to reach potential app users and give them a quick presentation of the application, which will tell much more than just screenshots on the AppStore or PlayMarket and will make the brand communication more emotional and informative.

To uncover more about the essence of the app, Pass-On is a digital platform (native Android and iOS app) that aims to provide easy, economical, and fast courier service. It is positioned as a community marketplace that connects travelers with available boot space to the sender with a parcel to be delivered. The client wanted the web design to be vibrant and classy, simple and trustworthy.

Let us give you a glance at the design solution for the landing page design for Pass-On, clean, bold, and scannable in the best traditions of design for web marketing. One more point to mention is that it had to be adapted for two languages, English and Arabic, as the application is used in Saudi Arabia.

The main design features that determine the general design concept for the Pass-On landing page are the following:

• color palette based on bold contrast of clean basic colors – white, black, and red, echoing the main colors in the application; no gradients, no multicolored combinations
• background colors separating web page sections to make content more organized and clear
• readable typography with prominent catchy taglines
• custom illustrations and motion graphics
• mobile screens demonstrating the application’s user interface and functionality
• instantly noticeable call-to-action elements
• intuitive navigation based on well-established mental models of web interactions

One of the catchy features of the landing page is the animated map used as a hero image that visually connects the visitor to the core idea of the service. Scrolling down, users see the section uncovering three primary benefits in a sort of animated interactive slider based on corresponding mockups demonstrating the particular screens of the application, enhanced with minor graphics giving visual hints to the text explanations.

Another section also lets the visitor dive deeper into the benefits in a set of short, concise headlines. When the headline is clicked or hovered, the more detailed description is open, and theme photos also change to give it visual and emotional support. Due to such an approach, the page looks airy and uncluttered, although it contains a lot of information.

The landing page uses a diverse set of consistent illustrations. They support text information with visual hints and metaphors and make text content look neat, organized, and systematized. What’s more, the graphics add their two cents to make the whole landing page concept look more emotional and integral.

To make the landing page attractive and functional on any device users come from, the mobile version was also well-thought-out and designed with attention to detail.

One more big challenge of this project was to think over the Arabic version of the landing page, as this language uses a different text direction in writing, the general perception of both copy and graphic content had to be inverted, and the text itself looks absolutely different. It means that, in fact, the page needed not just localization but a sort of new design and layout to make the text content and images work properly in totally different conditions. Take a look at the result.

New design case studies from our team are coming soon. Stay tuned!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the tubik team.

Carricare. Identity and UX Design for Safe Delivery Service

Physica Magazine. Web Design and Graphics for Scientific Blog

ProAgenda. Identity and Website Design for Golf Management Service

Real Bitcoin. Creating Website Illustrations

Uplyfe. Identity Design for Health App

Devpost. Hero Illustrations for Hackathons Platform

ShipDaddy. Identity and Web Design for Shipping Service

Bennett. Identity and Website Design for Tea Brand

OtoZen. Designing Mobile Application for Safer Driving

GNO Blankets. Branding and Web Design for Ecommerce

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

Сообщение Web Design Case Study: Pass-On. Landing Page for Delivery App появились сначала на Design4Users.

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

Directional Cues in User Interfaces

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

Negative Space in Design: Practices and Tips

Big Little Details: 7 Helpful Elements of Web Usability

Types of Contrast in User Interface Design

5 Pillars of Effective Landing Page Design

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.

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

Types of Contrast in User Interface Design

5 Pillars of Effective Landing Page Design

Visual Dividers in User Interfaces: Types and Design Tips

Directional Cues in User Interfaces

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

Negative Space in Design: Practices and Tips

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.

As in most cases, you have only several seconds to convince users to interact with your product; making it clear while the core pieces of content and interactive zones instantly visible may be crucial for decision-making.

The web page for the furniture company website uses an arrow with the text prompt to let visitors know about more content down the page.

How Directional Cues Influence User Experience?

Directional cues:

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

Perhaps, one of the most well-known practical experiments showing the power of directional cues and the effectiveness of their types was accomplished by CXL Insitute. They created several versions of the same landing page that only differed with directional cues, and then collected data on user interactions and analyzed it. Here’s how the options looked:

The experiment showed that the directional cues had a great impact on user experience, content consumption, and conversion rate:

• the page with a hand-drawn arrow got the longest time on page and the attention directed to the contact form

• the version of a page with a man looking away from the form got the least attention and interaction from users.

So, wisely applying directional cues, the UX designer enhances the visual communication of the interface with the user. Clarifying the way, we make it easier to achieve the destination, which is a factor influencing usability.

Popular Types of Directional Cues

Arrows

One of the most popular direction cues comes directly from the physical world. Perhaps, there is no more obvious and universal way to show the direction than with an arrow. That is the reason why a variety of arrows turn up here and there in interfaces to help the user not get lost. It is the pattern of interaction that is clear for people of any age, culture, level of education and tech literacy – and the experiment described above proves it well.

The website about nature expeditions uses an arrow down the hero section of the home page to engage users to scroll and see more than the above-the-fold part

Pet shop website uses the round animated text hint with an arrow inside to show users that by scrolling down they can learn more about the product

The website on forest camping uses arrows prompting interactions with horizontal slides.

Home decor ecommerce website uses arrows as the visual prompts on interactive elements.

The webpage for the hot-dog delivery service that allows for creating custom hot dogs uses arrows to let users see the stage they are at.

The animated arrow in the bottom area of the website for travelers invites users to scroll to see more.

The page for the Momatu website concept uses a curvy arrow to connect the tagline with the list of benefits uncovering its sense.

Pointers

What if you don’t want to make the design look that direct and straightforward as arrows do? Then pointers can help. Again, it works as effectively as in real life: when someone wants to direct your attention to an object or person, it’s enough just to point at it. On the web pages and mobile screens, this trick works the same way, giving the reason for various visuals giving an elegant visual hint on the core information or interactive element.

The home page for uMake website features a catchy animated hero illustration in which hands play the role of pointers drawing visitors’ attention to the CTA button.

This landing page of the platform for hiring artists uses the hero illustration that not only transfers the idea and makes the page attractive. It also works as a pointer: the composition of characters points at the zone with information and CTA.

It may not look like a direct pointer, but if you look attentively, you’ll see that all the dynamic composition of the page leads you to the zone of the call-to-action button, even the details such as the paper plane.

The hero illustration on the website of the luggage delivery service also uses the power of pointers: not only people but even the plane direct your eyes to the CTA button.

Hero illustration on the landing page of a productivity service also uses the composition and a character posture to make it a directional cue focusing users’ attention on the tagline.

Eye Line (Gaze Direction)

Eye direction is another powerful directional cue built on natural human reactions. When people see that someone’s eye is focused on some point or object, they have a natural urge of curiosity to check what it is. That is why this trick is often used with visual content like photos or illustrations integrated into UI layout.

The hero image of the cosmetics e-commerce website features a photo of two women, one of whom is looking directly at the visitor, setting emotional contact, while the other is looking down and here gaze direction naturally draws the visitor’s eyes to the tagline presenting the major benefits of the brand.

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.

The landing page for a dating app uses the illustration with a character whose eye line is directed at the information copy block.

The ecommerce website selling exclusive hair accessories uses a sophisticated hero illustration that also plays the role of a directional cue as the eyes of a character are directed to the tagline.

The hero section of the e-commerce website uses the image not only to demonstrate the product but also to work as a directional cue focused on a tagline.

Visual Prompts

Not only arrows can give users a hint that interaction is possible. Other objects can provide some help, like icons or illustrations symbolizing the type of interaction. The mouse may mean that you can scroll, the hand animation will let you know that it’s possible to swipe, and so on. This way, the users don’t need to make additional effort to understand how the interface works.

The website for a design studio uses the icon of the computer mouse as a visual prompt to try scrolling down.

The home page for the FarmSense website uses the text prompt Scroll to inform users that they can see more content on the page.

Part of the Following Content

One of the issues that may arise in the interaction process is the illusion of completeness. It happens when the layout seems to be complete, and it’s not clear that by scrolling, you can open more content. So, showing the part of the content that will continue below the area visible on the screen works as a non-obvious but effective directional cue. This way, users avoid the feeling that they have seen everything, and the risk of missing important content gets lower.

The list of tracks in the music learning app shows the part of the last tab at the bottom of the screen to give a hint that the list is not over and can be scrolled for more.

The fashion model portfolio webpage features parts of the photos in the bottom area to give users a hint about scrolling to see more.

The home page of the food delivery service shows the part of the menu in the bottom part of the screen to show that there is more content in the below-the-fold area. Also, the layout uses arrows as a directional cue showing that horizontal interaction will open another information block.

So, it’s easy to see how differently directional cues may look. Whatever kind of dress and performance is chosen for them, the main thing is that they present another sign of respect for the users saving their precious time and effort and making interactions natural and easy.

Useful Articles

Welcome to check more articles devoted to the issues of user experience design for web and mobile.

Basic Types of Buttons in Web and Mobile User Interfaces

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

5 Basic Types of Images for Web Design

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

How to Make User Interface Readable: Tips and Practices

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

The Anatomy of a Web Page: 14 Basic Elements

Take My Money: UX Practices on Product Page Design

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

Сообщение UX Details: Directional Cues in User Interface Design появились сначала на Design4Users.

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

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

CTA Button

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

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

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

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

Text Button

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

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

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

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

Dropdown Button

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

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

Hamburger button

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

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

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

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

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

Plus Button

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

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

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

Expendable Button

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

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

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

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

Share Button

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

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

Ghost Button

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

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

Floating Action Button (FAB)

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

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

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

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

Factors of Effective Button Design

Size. Size is one of the core ways to inform users about the importance of a layout element and build the hierarchy of components. An attractive and efficient call-to-action button needs to be big enough to be quickly found but not too big so that the layout structure wasn’t spoiled. Market leaders often provide recommendations on the proper sizes of buttons in their guidelines. For example, Apple says that CTAs in mobile UI should be at least 44Х44 pixels, while Microsoft recommends 34Х26 pixels. If you design for mobile, the requirements for different types of buttons may be quite strict so study the guidelines thoroughly to minimize the risks of app rejection due to poor UI design.

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

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

Placement. The placement of buttons is crucial to building up a solid visual hierarchy and clear navigation. If they are located in the areas where users’ eyes can’t catch them, other visual aspects such as color and size might not work efficiently. Designers have to learn the most scannable areas and place buttons of the core functionality within the user’s path.

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

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

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

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

UX Design Articles To Read More

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

22 Impressive Web Design Concepts for Various Business Objectives

5 Basic Types of Images for Web Design

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

How to Make User Interface Readable: Tips and Practices

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

The Anatomy of a Web Page: 14 Basic Elements

Photo Content in User Interfaces: 7 Basic Ways to Use

Take My Money: UX Practices on Product Page Design

5 Pillars of Effective Landing Page Design

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

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

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

Illustration by Tubik Arts

What Is Negative Space in Design?

Basically, negative space – or white space, as it’s often called – is the area of the layout that is left empty. It may be not only around the objects you place in the layout but also between and inside them. Negative space is a kind of breathing room for all the objects on the page or screen. Not only does it define the limits of objects but it also creates the necessary bonds between them according to Gestalt principles and builds up effective visual performance. Due to that, white space is a rightful design element that has a big impact on positive user experience. “White space is like a canvas: it’s the background that holds the elements together in a design, enabling them to stand out” – says Mads Soegaard from Interaction Design Foundation.

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

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

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

What Is the Difference Between White Space and Negative Space?

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

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

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

Why Is Negative Space Important?

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

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

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

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

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

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

Core Factors Influenced by Negative Space

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

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

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

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

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

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

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

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

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

• copy content
• graphic content
• navigation
• identity.

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

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

Pitfalls to Consider

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

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

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

Useful Reading

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

How to Make User Interface Readable: Tips and Practices

10 Reasons to Apply Illustrations in User Interfaces

5 Basic Types of Images for Web Design

3C of Interface Design: Color, Contrast, Content

User Experience: How to Improve Web Scannability

Hero Images in Web Design: When, Why and How

Color Scheme for Interface: Light or Dark UI?

Visual Dividers in User Interfaces: Types and Design Tips

Web Design: 16 Basic Types of Web Pages

How to Design User Onboarding

Originally written for Tubik Blog, graphic content by tubik

Сообщение Negative Space in Design: What It Is and How To Use It появились сначала на Design4Users.

Ecotourism website using illustrations integrated into the web layout

What Is Illustration?

Basically, illustration is a visual interpretation of a particular concept, text, or process. It’s an image that aims at supporting, clarifying, or even extending the ideas that people get from the other source of information, most often given in the form of the text. The word itself means “throwing light on something” so its main purpose is to help the viewer understand or imagine something better.

Through the years, illustrations have been integrated into diverse print stuff like books, magazines, newspapers, posters, flyers, educational materials. Later, the field got a new breath with cartoons and video production. And quite recently, new technologies and tools pushed the limits opening the time of digital illustration.

Due to its beauty and creative flexibility, illustration rockets with a constantly growing number of websites and mobile apps as one of the ways to enhance usability, emotional and visual appeal of the interface. But what are the functions which can be covered with illustrations in UI design?

Ways to Use Illustration in User Interfaces

As well as any other part of an interface, illustration is a functional element rather than decoration. It should make the message and interactions easier and clearer – and more stylish, sure, why not? We can come across UI illustrations in:

• hero images
• theme images
• mascots and characters
• blog article images
• onboarding tutorials and tooltips
• rewards and other gamification graphics
• notifications and system messages
• stickers (especially popular for messenger apps)
• storytelling
• infographics
• marketing stuff and advertising banners
• visual markers of content categories
• social network pages supporting the website or app.

Let’s consider the top ten reasons why illustrations got so much popularity in interface design – and perhaps why you would consider using them in your next design project.

Title illustration for the blog article about web scannability practices

10 Reasons to Add Illustration to User Interfaces

1. Custom illustrations establish the solid foundation of originality and artistic harmony

Graphics add a pinch of style and creativity to an interface, printed item, or branded stuff. In the world of tight competition, it’s vital to stand out. Otherwise, people may not even try your product let alone understanding its benefits.

By the way, that’s the reason why many companies use illustrations as title images for their blog articles, reviews, and landing pages. In this case, designers can fine-tune the artworks taking into account the target audience’s preferences, and balance them with business goals or ideas behind a particular project or theme. That allows for finding interesting metaphors, color schemes, characters, and an environment that would appeal effectively to the specific pool of readers or viewers.

Look at the metaphoric title illustration of the article about UI animation. The smartphone plays the role of a curtain wall or screen, like the one used in a puppet theatre and designers reflect actors each of which shows a specific model of motion performance.

2. Illustration creates visual triggers that quickly transfer the necessary message

The vast majority of people perceive images faster than words. That’s neither good nor bad, it’s just a fact that designers can use to increase the visual performance of web or mobile layouts. People, in general, have incredibly broad abilities to perceive visual marks, recognize and proceed data even transformed into images of a high level of abstraction.

Here’s a bunch of useful facts:

• as psychologists claim, people need about 1/10 of a second to get a general perception of a visual scene or element (that speed is indeed impossible for textual items)
• visuals are transmitted to the brain much faster and important pieces of information are often fixed by the brain as visual images even if they were obtained via text perception
• images are less vulnerable in combination with the background and surrounding elements while the text is highly dependent on the aspect of readability
• images have a tendency to stick better in long-term memory which means that dealing with the interface users will not need to process and remember more data than it’s really necessary, so interactions get faster
• visuals in the interface can make it more universal in cases when an app or a website is used by people from different countries
• pictures push the limits of perception for users who have natural problems with text recognition such as, for instance, the dyslexic, or non-reading preschoolers.

All the above-mentioned builds a solid reason to create strong and fast visual associations with illustrations. Characters, colors, composition, recognizable details will quickly inform users and support the message given in the textual form.

Here’s the landing of a digital agency ready for the highest business challenges and goals – that’s the message quickly transferred by the bright hero image of a basketball player.

One more example features theme illustrations created for LunnScape, a company that specializes in landscape design and plant care. The artworks aim at being used for marketing campaigns, social networks, and on the website. After a bunch of experiments, the designer came up with graphics in an airy style applying soft pastel colors and light strokes. One of the illustrations features people busy with gardening while the second reflects the airy view on the public space with landscape design. Illustrations immediately set a precious connection with the theme of the landscaping.

3. Graphics provide effective support to the copy applied in the web or mobile interface

As it was mentioned before, in many cases pictures work as a more universal tool of communication than text. However, there are also some pitfalls to consider carefully. The speed of perception is not the only thing we need: people can perceive illustrations super fast but if the message they transfer is not clear or can be double-read, the speed will not bring a positive user experience. Fast capturing of the graphics that result in wrong understanding cannot be defined as recognition, it’s just fast noticing. Recognition means not only speed but also the right action or information which the visual element should bring to the user. So, in case you want to make the visual metaphor immediately clear and avoid misunderstandings or wrong associations.

Here’s the illustration for a website of financial service helping pensioners manage their money effectively and grow their savings. The artwork immediately transfers the message keeping it consistent in combination with the tagline and copy block. This way the webpage looks catchy while all the elements in the layout harmonically work together.

4. Illustrations are a well-checked tool of creative storytelling

Put simply, storytelling is the method of uniting different blocks of information into one story to make them more memorable and set the strong connection between the parts. This approach showed itself highly effective in both marketing and user experience design.

Here’s a glance at the set of illustrations designed for one of our recent projects Devpost. It is an international platform for hackathons. Illustrations in the hero section of the home page reflect the atmosphere and visual details of the event and change during the day to tell the story of hackathon stages.

5. Illustrations have significant power in setting the emotional appeal

No secret, we are all emotional creatures. Talking about design for emotion, Aarron Walter said: “Many websites and applications are creating an even better experience. They’re redrawing the hierarchy of needs to include a new top tier with pleasure, fun, joy, and delight. What if an interface could help you complete a critical task and put a smile on your face? Well, that would be powerful indeed! That would be an experience you’d recommend to a friend; that would be an idea worth spreading.” And that’s what you can effectively do with illustrations. Everything you put into them – lines, shapes, colors, facial expressions, dynamics of curves – has a significant impact on igniting emotions. Studying user behavior and factors that influence emotional appeal, designers can make illustrations a powerful tool connecting experience to user emotions from the first seconds of interactions.

This design concept presents a landing page for Kiddy, a platform that makes hiring a babysitter just a piece of cake. Isn’t it cute? The feeling of cuteness and positivity is supported by several factors, among which animated custom illustrations with funny characters play the key role. They transfer the message and the mood, create the needed atmosphere before the user starts reading about the service, and give the whole page a unique look.

6. Custom graphic design sets the ground for aesthetic satisfaction which grows the desirability of the project

With hundreds of discussions and arguments on the “functionality first” theme, the natural human desire for beauty and delight is still in force. Sure, utility and usability are the foundation of any interface. Still, desirability is an aesthetic and lovely facade that makes people notice your product, feel the pleasure of using it, and want to use it again. Illustrations are a well-checked way to reach this goal as they add beauty, style, elegance, or whatever you want to add to your interface.

Here’s a web design concept of a simple and bright booking service for travelers. It uses a 3D illustration that is the big theme image that harmonically takes the left part of the page, while the right part features the form to fill in for the first search of accommodation. Not only does the artwork set the theme but also makes the interface catchy and beautiful.

7. Illustrations are memorable and catchy, so they work well in growing brand awareness and recognizability

Comparing to text, images have a tendency to stick better in long-term memory. The impact will grow when the images are informative, designed according to the target audience’s expectations, and in consistency with a general stylistic concept of the layout.  This makes illustrations highly effective in making a UI design recognizable and supports the website or mobile app branding. That is one of the reasons why illustrations are widely used in onboarding.

These are onboarding screens for the Perfect Recipes app. At the start of the interaction, users set the goals they want to achieve such as losing or gaining weight, keeping a healthy diet, and the like. Also, users may mark the ingredients they don’t like so that the app didn’t show the recipes containing them. The illustrations are used to visualize the goals in a bright and original manner.

Here’s a custom atmospheric illustration used for pull-to-refresh animation in the Slumber app whose aim is to help people to relax and fall asleep effectively.

8. Digital illustration is effective in creating animated short videos and interactive elements to make the interactions live and elegant

More and more websites and apps apply animation in user interfaces. This way you can enhance not only usability but also the emotional appeal and elegance of UI looks. That’s why it happens regularly now that we come across animated logos, icons, or even complex animated illustrations. The motion allows for adding more power to the idea, message, and mood of the image. What’s more, one of the hot and effective trends is applying animated videos where illustrations get a new level of development and communication with users.

This is the example of the animated video by the Tubik team in support of the article devoted to gamification in UI.

9. Illustrations based on interesting visual metaphors make the design unique and engaging

As well as in art, in design metaphors are a powerful way to engage users and make them consider the offered ideas. Illustrations enable designers to work on unique metaphors corresponding to the specific goals and users.

Here’s the concept of a landing page for a dating app letting people find their perfect couple. The illustration presents the theme making a bright visual trigger and effectively combining the image of the device uniting people.

One of the crucial challenges for graphic designers is finding the original style – and that’s what inspired the metaphor for this artwork. In the article on flat illustration, the graphic designer shared practical tips on how to catch this golden fish and applied the same metaphor in the title illustration.

10. People notice and decode images quickly so illustrations used wisely can make the interactions simpler and faster

Custom graphics like icons and illustrations can become a great improvement to the clear and intuitive navigation of the interface. In user interfaces, where in many cases basic interactions should take seconds, this aspect is highly important and it is the essential reason to turn everything into the graphics marking categories of content with visual signs. However, bear in mind: if there is the risk that the images may be decoded wrongly or not decoded at all, they need additional support with copy content. User testing will be a great help to find out which elements are absolutely clear and which need to be explained with the text.

Here are original icons created for a mobile photo editor Cuteen: the elegant illustrations supported with textual prompts help users to deal with content quickly and easily.

Points to Consider

Sure, it is impossible to satisfy any user and satisfy every existing cognitive scheme, but there are some general aspects that have to be thought out in the aspect of graphic design:

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

All the mentioned points deal with human cognitive abilities and influence the quality of visual data perception. For designers, it’s important to bear in mind: it’s not enough to make users see the elements of the layout, it’s vital to make them recognize their meaning and quickly understand their message.

Useful Reading

Here’s a bunch of articles and case studies for more reading on graphic design and digital art:

5 Basic Types of Images for Web Design

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

How to Create Original Flat Illustrations: Designer’s Tips

Case Study: Brand Intro Cartoon for Wedding Dresses Brand

Winter Olympics Illustration. Step-by-Step Process

Creative Jobs: What Do Graphic Designers Do?

Tubik in Paris. Design Process for Narrative Illustration

Originally written for Tubik Blog, graphic content by tubik

Сообщение 10 Reasons to Apply Illustrations in User Interfaces появились сначала на Design4Users.

Project

UX and UI design for an admin panel and landing page of a finance management service.

Process

CashMetrics provides support for retailers, mainly in the fashion segment: it helps to organize their operations and monitor cash flows. It is aimed at simplifying operational processes, with a key focus on tracking profits, shipping costs, and fees. When it comes to financing, the first idea that immediately comes to mind is boring tables and complex calculations. So, the primary goal was to step away from dull, unclear, and overwhelming data presentation and make the service eye-pleasing and easy to use.

Dashboard

The first thing to focus the design effort on was a dashboard, the main page of the admin panel. That was one of the challenging pages as it had to consist of many statistics and graphics blocks. Besides those, a to-do list was also required on the dashboard.

So after the research was done, the creative team defined which stats would be the most useful and which of them required to be shown in charts for better perception. The designer ended up having 8 statistic blocks:

• Overview: the user can see general information about sales, orders, and profits for a selected period of time (year, month, or week) and watch the temps of growth.
• Inventory: the total quantity of items that the retailer has in the range and how many of them are in stock.
• Earnings: the chart that shows the positive and negative value of earnings.
• Sales & Expenses: the chart includes any costs incurred by the retailer and the number of goods sold
• Top-Selling Items: top 5 items ranged by the number of units sold. The user also can see how much profits he got from selling those items.
• Top-Selling Brands: shows which brands have more share in sales.
• Average Sales: average income and profit that the retailer make over a certain period of time.

To bring a little fun into charts and numbers, the designer chose a vibrant color palette that creates an appealing and clean look. For primary colors, deep blue and vibrant blue were chosen; for additional accents, the turquoise color was picked. The choice of background color turned on light to make the layout airy and easy to scan.

Also, one of the main requirements was to create a fee calculator to easily account for selling fees for marketplaces such as eBay, GOAT, StockX, and others. For marketplaces that are used most frequently by the user, it is possible to make a preset.

Inventory, Sales, Expenses

For tracking selling inventory and monitoring the status of the products, there is an Inventory page. It was important to make interaction with inventory and sales pages convenient and as clear as possible because these pages are the ones the retailer interacts with most often.

To create a new item, a user should specify a name, color, size, brand, quantity, retail price, and status. That helps to sort items and easily find one that is needed. The status of the item changes in one click in a dropdown with actions. When the last item has been sold, it is left in inventory with the status ‘Out of stock’. So when the item is in stock again, there is no need to put all the information down again; the retailer simply changes the status and quantity.

As there are a lot of properties that need to be filled to create a new item, the designer added a ‘Duplicate item’ feature. So, if retailers have similar items in different sizes and colors, they can just duplicate an existing item and change some of the properties.

In order to simplify the transition to the platform for new users, the ability to import sales information from Excel has been added. So, in general, there are three ways to add information to sales:

• Excel import
• quick transfer from inventory
• enter the information manually.

On the Expenses page, there are data supposed to be uploaded automatically and also could be added manually. When the retailer adds some item to inventory, the specified retail price of it also been shown in the Expenses. The retailer can also track expenses such as shipping boxes, software expenses, etc. Along with the sales data, expenses are visually represented in the chart on the dashboard.

Landing Page

For the landing page user interface design, the designer kept the clean and simple style as in the admin panel. Simple soft shapes on the background are consistent with a line chart in the header and also emphasize the simplicity and user-friendliness of the product. In the blocks with information about the product, there are CTA buttons “See more,” which redirect the user to sign up form, as well as “Join now” buttons.

Also, we added a perspective view of the dashboard page, focusing on the main blocks.

To sum up, based on its high practical value, the product itself and its landing page are based on the principles of user experience design consistency and a high level of usability to support users at every step with intuitive navigation as well as clear and concise data segmentation.

UX Design Case Studies

Welcome to review other case studies on UX design process and solutions for a variety of digital products:

Crezco. Brand Identity and UI/UX Design for Fintech Service

Uni. Landing Page Design for Fintech Service

Designer AI. Dashboard and Graphics for Service for Fashion Designers

Pazi. UX and UI Design for Vehicle Safety Mobile App

Bitex. UX Design for Stock Analysis App

Perfect Recipes App. UX Design for Cooking and Shopping

Tasty Burger. UI Design for Food Ordering App

Slumber. Mobile UI Design for Healthy Sleeping

Watering Tracker. UI Design for Home Needs

Home Budget App. UI for Finance

Originally written for Tubik Blog, graphic content by tubik

Сообщение Case Study: UX Design for Finance Management Service появились сначала на Design4Users.