What Is Internal Search

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

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

Physica Magazine website features the search control in the header

When to Use Internal Search

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

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

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

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

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

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

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

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

Core Features of Effective Search

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

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

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

UX Design Practices for Search

Give textual prompts and auto-filling

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

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

Search screen of the education courses app

Offer the options immediately

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

Search interactions for Calorie Calculator App

Use filters to tune search

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

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

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

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

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

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

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

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

Useful Articles

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

Error Screens and Messages: UX Design Practices

Visual Dividers in User Interfaces: Types and Design Tips

How to Design User Onboarding

Directional Cues in User Interfaces

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

Negative Space in Design: Practices and Tips

How to Make Web Interface Scannable

UI/UX Design Glossary: Navigation Elements

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

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

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

What’s a CTA Button?

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

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

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

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

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

Tasty Burger mobile app screens

What Makes an Effective CTA Button Design?

Size

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

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

Tasty Burger mobile app interactions

Color and shape

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

Color meanings:

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

Shape meanings:

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

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

Product card design for an eco-goods online store

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

Website design for an AI-based marketing platform

Placement

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

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

According to different studies, including the publications by Nielsen Norman Group, UXPin team, and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.

F-pattern is the most common for web pages with a big amount of content such as blogs, news platforms. A user first scans a horizontal line on the top of the screen, then moves down the page a bit and reads across the horizontal line which usually covers a shorter area. And the last one is a vertical line down on the left side of the copy where they look for keywords in the paragraphs’ initial sentences.

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

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

Ecommerce website design for selling herbs and spices

Microcopy

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

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

Hair beauty company website

Perfect Recipes mobile app design

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

Recommended Articles

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

Originally written for Tubik Blog

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

Navigation Design: Menu for PassFold app

Navigation

In its basic meaning, the word navigation names the sphere of the human activity responsible for enabling a vehicle to get from one place to the other, controlling and supporting this process. According to etymology dictionary, the term has deep roots and comes from the Latin word navigare “to sail, sail over, go by sea, steer a ship,” which in its turn is based on two words: navis“ship” and agere“to set in motion, drive, drive forward”. So, to navigate is to make possible for someone or something to cover the planned route. This is the foundation from which the numerous meanings of this word took the start and adjusted in many other spheres.

In terms of user experience design, the concept of navigation is one of the basic notions setting the usability. Navigation, in this case, could be generally defined as the set of actions and techniques guiding users throughout the app or website, enabling them to fulfill their goals and successfully interact with the product. The aspect of efficient navigation has a great impact on setting positive user experience: users start using apps or websites with particular aims and expectations, and that’s designers’ task to set the best and easiest route to solving users’ problems.

The aspect of helpful and seamless navigation in UI should be thought-out from the early stages of creating the user interface. Users are navigated via an interface with a number of interactive elements such as buttons, switches, links, tabs, bars, menus, fields, and the like, some of which will be described more in detail below.

Here in Tubik, we support the workflow in which all the basic navigation issues, such as layout, transitions, elements placement, and functionality, are set in the early phase of UX wireframing and then checked with the simple prototype to make sure all the important operations and options are clear for users. Neglecting this essential aspect sets high risks that all the other effort on design can be just wasted, so it’s much more user- and client-friendly to start with the basics.

Menu

Menu is one of the core navigation elements. It is a graphical control that presents the options of interactions with the interface. Basically, it can be the list of commands – in this case, options will be presented with verbs marking possible actions like, for example, “save”, “delete”, “buy”, “send” etc. The menu can also present the categories along which the content is organized in the given interface, and this can be the high time for using nouns marking them.

Menus can have different locations in the interface (side menus, header menus, footer menus, etc.) and different ways of appearance and interaction (drop-down menus, drop-up menus, sliding menus, etc.) Any solution, which designer makes about menu functionality, appearance, and placement in general layout, should be based on thoughtful user research, analyzing not only potential wishes and expectations of the target audience but also their tech literacy and possible environments in which the digital product could be used. The well-designed menu can significantly speed up the process of achieving goals and satisfying needs that lay a solid foundation for positive user experience.

Blog App

Here is the example of mobile blogging app interface which features a left-side menu presenting the categories of content. The copy describing positions in the menu is supported with icons presenting recognizable visual mark for the category.

Moneywise App

The presented app UI concept shows the type menu applying the effective technique of color marking: when users move to a particular category, the specific background color is used for all the content in it, which forms strong associations and quick perception of the nature and theme of data the user sees.

CTA

Behind the widely used abbreviation CTA, designers and content creators mean a call to action. This is actually the word of phrase which stimulates users to interact with a product in a way and for the aim it is designed for. CTA elements are the interactive controls that enable users to do the action they are called to. Typical types of such interactive elements in the layout are buttons, tabs, or links.

In the interfaces of all kinds, CTA elements are the core factor of effective interaction with the product, which plays a crucial role in usability and navigability. When all the path of interaction and transitions is built clearly for users but CTA element is not thought-out, placed or designed well, users can get confused and will need to take additional effort trying to achieve their goals. That sets the high risk for poor conversion rates and general user experience. That’s why this navigation element should draw particularly deep designers’ attention. In any interface, it should be one of the most prominent and quickly noticeable parts to inform users how the product can be helpful or useful for them.

Contact List Concept

As we mentioned in the article with tips on copy content in UI, some call-to-action elements may be represented with icons that don’t require copy using widely and instantly recognized images such as a telephone receiver for making a phone call or the envelope for opening received mail. The app interface presented above shows this case: the button with a receiver is the most prominent interactive element on the screen navigating the user to achieving their goals with the app quickly, and it doesn’t need the copy to let users understand what action can be done with it.

However, when the image of an icon is not so obvious or can be misleading, it is more effective to use the double scheme, when the icon, button, or link is supported with the copy.

Landing on Seafood Cooking

The example above features the landing page for a web platform devoted to cooking seafood. The headline of the page presents a call to action and immediately sets the theme by both verbal and visual means. Still, this call to action is not interactive. The active CTA elements are clickable buttons informing users that after clicking they can see more information on the particular topic or recipe. The bright color enhances the visual hierarchy on the page and draws users’ attention to the key interactive zone.

Bar

Bar is a section of user interface with clickable elements enabling the user to quickly take some core steps of interaction with the product or it can also inform the user on the current stage of the process. Among the basic types of bars, we could mention:

Tab bar – in mobile applications, it appears at the bottom of an app screen and provides the ability to quickly switch between different sections of an app.

Tab Bar Interactions

Loading bar – the control informing the user on the current stage of action when the process is in the active stage and user can see the flow via timing or percentage shown in progress.

Timeline App

Progress bar – provides feedback on a result of the current process so far, for example, showing how much of the planned activity has been done.

Juicy Player

Button

Button is, perhaps, one of the most popular elements of any interface. Button is the element that enables a user to get the appropriate interactive feedback from the system along with a particular command. Generally speaking, a button is a control with which user directly communicates to the digital product and sends the necessary command to achieve a particular goal, like, let’s say, send the email, buy a product, download the data, turn on the player and tons of other possible actions. One of the reasons why buttons are so popular and user-friendly is that they efficiently imitate interaction with the objects in the physical world.

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

404 Page

Besides, we could also mention several types of buttons with additional functionality, widely used in mobile and web interfaces.

Hamburger button – the button hiding the menu: clicking or tapping it, the user sees the menu expanding. It is called so as its form consisting of three horizontal lines looks like typical bread-meat-bread hamburger. Nowadays it is a typical element of interaction, still highly debatable due to the number of pros and cons.

Most users who visit and use websites on a regular basis know that this button hides the core categories of data so this trick does not need additional explanations and prompts. Hamburger menus free the space making the interface more minimalist and full of air as well as allow the massive saving place for other important layout elements. This design technique also provides additional benefits for responsive and adaptive design hiding navigation elements and making the interface look harmonic on different devices. Although hamburger menus still belong to highly debatable issues of modern web and app design, they are still widely used. 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 with the sign which features a high level of abstraction. So, the decision about applying the hamburger button should be made after user research and definition of the target audience’s abilities and needs.

Ice Website

The presented website concept uses a hamburger button to hide the menu and support the general minimalist approach to the visual performance of the layout.

Plus button – the button that being clicked or tapped presents the ability to add new content, be it a new contact, post, note, position in the list – anything user could do as the basic action with the digital product. Sometimes, 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 option to choose from and make adding the particular piece of data more focused.

Button Animation

Here is the concept showing that the plus button first enables a user to choose the category of the added content (image, video, text) and only then directs to the particular screen where it can be done. This practice takes seconds still makes the experience more user-friendly as designers can present users with modified options of adding content for every particular case.

Share button – the button enabling a user to share the content or achievement directly to social networking accounts. In the vast majority of cases, it is presented with icons that present a brand sign of particular social networks and are easily recognizable.

Switch

Switch is a control that enables users to switch the option on or off. Again, it is applied with a high level of efficiency and popularity in the modern interface because it presents the direct imitation of switches people are accustomed to in real life. The important point of consideration here is that states of the switch should be visibly clear and brightly different so that user could avoid applying effort to understand if the option is active or not. Various sorts of contrast and slight animation can make solve the problem making the experience simple and user-friendly.

Switch for Toonie Alarm

Here is the switch turning on and off the alarm in Toonie app. Animation makes the interaction smooth and natural, while changed color of the tab and the toggle transforming into spinning sun let users instantly understand whether the alarm is active. If you want to see the full case study on how this animated element was designed and developed, welcome to check the details here.

Picker

As it becomes clear from its name, the picker allows users to pick the point from the row of options. It usually includes one or several scrollable lists of distinct values, for example, hours, minutes, dates, measurements, currencies, etc. Scrolling the list, users choose and set the needed value. This type of interactive element is widely used in the interfaces which have the functionality of setting time and dates.

Time Picker for Toonie Alarm

Checkbox

Checkbox is a graphical UI element which is used to mark a particular piece of content, usually setting the choice for the binary options. It is another element setting the bridge with the real world as it looks really similar to the process of filling in tests, questionnaires and other stuff of this kind when you put a tick or color the box to mark the option. Checkboxes and switches can be found in any type of user interface, especially in the sections of user, screen, or page settings. Also, checkboxes present a common part of navigation in apps and websites with functionality of task managers, to-do lists, time trackers, and the like.

To-Do App

Here’s the example of the design concept for the mobile to-do app for complex tasks. Tapping the checkbox, users mark the task as done and it automatically gets faded, the copy is colored differently and the font gets bolder to support the contrast of this task with the one which is still in progress.

Today’s set of our glossary is ready for those who need it and we are going to continue this practice before long. Don’t miss the new sets – the next one will continue the issues of navigation with deeper insights into types of menus and buttons, tags, breadcrumbs, and icons. New definitions are coming soon!

Recommended reading

Here is the set of recommended materials for further reading for those who would like to get deeper into this topic and learn more about the theme.

iOS Human Interface Guidelines

Navigation patterns for ten common types of websites

3 essential rules for effective navigation design

Perfecting navigation for the mobile web

Understanding Web UI Elements & Principles

User Interface Elements

The Most Creative Mobile Navigation Patterns

Basic Patterns for Mobile Navigation

Originally written for Tubik Blog

Сообщение UX Design Glossary: Interface Navigation появились сначала на Design4Users.

The essence of illustration

According to the definition of Merriam-Webster dictionary, the verb “illustrate” in its wide-spread and most recognized meanings means “to clarify”; “to make clear by giving or by serving as an example or instance”; “to provide with visual features intended to explain or decorate”; “to show clearly”. However, it should be remembered that initially, it derived from Latin “illustrare” meaning “light up, enlighten, illuminate”. Although it is the obsolete meaning now, it really adds much to all the diverse potential of illustration in digital graphic design, in particular for UI/UX projects.

Historically, illustration has a long and amazing path and perhaps could be included in the list of the most diverse directions in art. On the basis of its progress in print production like books, comics, magazines and newspapers, advertising materials and so on, illustration as the sphere of visual art found the new lease of life with the development of technology. The design tasks got even more challenging and therefore interesting. Digital illustration, as well as the platforms for which it had to be created, brought new horizons in this sort of art.

Sketches for UI illustrations 

Anyway, no matter where illustrations appeared, how and for what purpose they were created, the basics were still the same: the aim of illustration was to enlighten, to clarify, to deliver the message by means of visual elements. In modern graphic design, therefore, illustration is an image that creates a visual message. To make the illustration functional, this image should be easily recognizable and preferably the information it transfers should be decoded similarly if not identically by different viewers.

Earlier we have already published the article about such small but highly meaningful visual elements as icons, their types, functions and vital role in creating efficient UI/UX solutions. As well as the icons, illustrations, mostly being more detailed and artistic images, also have important functions behind them and often become an effective way to boost usability and in the same way to present nice artistic elements.

Features

Illustration used as a part of the interface should become a working functional element. Making the decision in favor of using an illustration of any kind on the screen or a webpage, the designer has to think thoroughly how to make everything possible from its broad potential. Illustration in most cases becomes an efficient way to provide the user with a piece of information faster and easier than it could happen with the text. Using illustration in layout, it is possible to fulfill multiple user needs that is why it is so popular in user interfaces of different kinds.

So, to become an efficient element of a layout, illustration applied in user interface should be:
– meaningful
– recognizable
– preferably straightforward and unambiguous
– clarifying
– attractive
– harmonic and corresponding with the general stylistic concept of the interface
– improving usability and user experience in general
– not overloading the screen or page.

UI illustration for Toonie Alarm

Considering these positions, let’s look at some practices of using illustration in design.

Mascots and characters

Perhaps, one of the most efficient ways to apply illustration techniques in design both as a visual and functional element are mascots of different types. Mascots are images, usually personified, which in most cases represent the brand, product or service identity and therefore become its symbolic convention via the entire application or website.

Veggie App Concept 

Mascot as a graphic design object needs great attention as they have to represent the nature of the brand or product. Mascot becomes the element of identity and inter-connector between the user and the product. In many cases, the mascot is the basic element of communication and interaction, therefore in different states, it can become the basic way to deliver the message to the user.

Design version of Saily app mascot

Obviously, mascots are very helpful in interfaces: they liven up the general process, catch up user’s attention, become the memorable element, create important support for a stylistic concept and make the illusion of direct communication with the user. Also, wisely used in illustrations featuring actions or interactions, a mascot can become a good way to avoid using too much copy on the screen and in this way save space for other important elements of the layout or just more “air” also really needed to create a good perception of data on the screen or page.

Sheriff Foxx Character 

Astrocats

Tutorials and tool-tips

One of the good ways to use the illustration in UI is diverse tutorial screens and any kinds of tool-tips. In this case, they fully reveal their potential in explanation and clarification. The options can be totally diverse from simple icon-like to artistic and sophisticated ones. Illustrations of this kind become a good 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 more user-friendly.

Illustrated tool-tips for Saily App 

Singify Tutorial

Tour Guide App

Travel App Tutorial

Rewards

One more good case when a designer could consider the option of using illustration in the interface is the case of various awards and rewards, with which the user marks any kind of progress in the app or website, sort of stickers, medals, signs, coins and the like. Again, the options can be extremely diverse, from simple symbolic shapes to elaborately drawn detailed images, but anyway, used wisely and accomplished in accordance with the general stylistic decisions of the whole app or website, they become one more step towards user-friendly interactions and positive user experience.

Good Sign App Concept

Simple Blog App 

Snake Battle App

Theme and style illustrations

Illustrations of this kind are usually applied in a user interface basically to provide visual support of the general stylistic concept and perhaps the topic of the app or a website as well as events, seasonal features and so on. Their main purpose is to support all the functional elements of the layout with the general harmonic and attractive appearance of the screen or page. It should also be mentioned that in some cases illustration of this type can add the element of gamification or more artistic feel to the whole product. In one of our previous articles, considering the points of creating potentially viral UI/UX design, we mentioned that one of the ways is to add some unique, custom and stylish visual elements so that people wanted to share them with the others as well as satisfy their aesthetic needs. Illustrations have great potential at this perspective.

Underwater Explorer

Weather App

Page 404

Rio 2016 Olympics

Moneywise App

Obviously, this article is only the start for the discussion of multiple and diverse functions of illustration in UI design and we are going to continue it in further articles sharing our studio experience. However, even the general basics mentioned today are still the strong support of the most important position about UI design process: any elements of the interface should be purposeful and functional, supporting the user, enhancing usability and providing the solid basis of positive user experience and problem-solving. Illustrations are not the exception and their application in the interface should be thoroughly thought-out and accomplished with the target user in mind at every stage of the process.

Useful Reading and Inspiration

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

17 Trends in Illustration and Graphic Design to Meet 2020
Motion Design: 20 Inspiring Animated Illustrations
Winter Olympics Illustration. Step-by-Step Process
Moonworkers. Digital Illustrations on Film Production
Florence App. Illustrations for Healthcare Service
Digital Art: 40+ Inspiring Illustrations on Diverse Themes
26 Digital Artworks About Design Process

Originally written for Tubik Blog

Сообщение UI as Art. Illustration in Interfaces появились сначала на Design4Users.