Challenge and Client

To broaden its ways of reaching the audience and set an effective sales channel using mobile technology, Heineken Mexico strived to launch a mobile application that would allow users to buy beer and associated stuff like snacks, cups, and the like and get the orders delivered quickly. This is how the Glup application started.

The clients approached the tubik team with a range of design tasks: we worked on logo audit and tweaks, extended brand identity development, delivery application UI/UX design from scratch, website design, and creating custom 3D icons and 3D illustrations for marketing and user experience objectives.

Process

The creative process included two major directions: developing a flexible identity and creating a consistent functional UX design for the application.

Brand Identity Design

Firstly, it was essential to work on powerful branding that would be effectively applied to both marketing goals and mobile interactions, providing the integrity of the customer experience.

The brand already had a logo, but it had to be enhanced to get a more attractive and trendy look appealing to the target audience and become more pliable for a variety of brand advertising and marketing objectives.

Original logo color variations

Glup logo redesign

Certainly, the team took advantage of color power and its remarkable ability to set the needed mood in split seconds. The primary brand colors were yellow, setting the cheerful spirit and giving instant association to the beer theme, and deep purple, setting the effective contrast and playfulness and supporting the flexibility of the palette for the defined objectives. Also, an extended palette for different ways of product presentation was developed.

Another element of visual branding was the set of abstract geometric shapes to be consistently used across various branded items, advertising materials, delivery bags, social networking, and mobile application screens. What’s more, these shapes reflected the parts of the clock face setting a solid association with the speed of delivery as one of the key features. Take a look at the variety of branded items and advertising design.

Outdoor advertising

Social network posting templates

Billboard design

Delivery backpack design

Range of variants for delivery motorbike branding

Branded T-shirts design

Branded cap design

User Experience Design

The second direction of work was to think about the flawless and intuitive user experience for the mobile application. The interaction design was thoroughly thought-out to make the sales funnel work successfully and let the users move through the whole purchase flow smoothly.

The onboarding screens and categories use trendy and balanced 3D graphics presenting the products and setting friendly communication. Having a different visual style, these original graphics don’t distract users’ attention from the offered items.

The icons working as visual, illustrative markers for the different categories of items in the application also moved through several iterations and evolved from 2D graphics consistent with the general concept of visual branding and echoing its graphic elements to the big set of 3D icons following the style of 3D illustrations used across the app and in the onboarding process. Here’s a quick glance at the stages of the process.

Airy light screens of the application effectively show the products, while branded colors, graphics, and eye-pleasing gradients help to set attractive color accents for interactive elements, making navigation clear and intuitive. Custom icons in the interface also echo the brand palette, supporting both usability and consistency of brand performance. The customers are offered several ways to surf the range of provided items, including browsing the entire catalog, using filters to customize it, or using the internal search to find the needed item quickly. Plus, the button on each card on the catalog screens sets the shortcut to add the items directly to the basket without opening a card, which saves time and effort in cases when users have some faves and order the same items multiple times.

Here’s a quick look at the category screen. All categories are illustrated with stylish theme 3D graphics that instantly set the theme but do not overload the screen with too much detailing.

The shopping cart screen is informative and functional, based on the principles of external consistency and well-recognized mental models so that users can finalize their orders easily and effortlessly. A special progress bar with a text hint is used to visualize the ability to get free shipping for the order.

The home screen and promotions screen also feature sliders with banners for special offers or hot sales to attract more attention to them immediately.

One of the essential elements of building a solid mobile app brand and enhancing its online presence is supporting it on the web with a concise and informative landing page that uncovers the benefits and engages new users to try it. The landing page for the Glup application echoes the design approach of visual identity for the brand. It’s based on a bright background in primary brand colors separating different content sections, a solid visual hierarchy of text blocks, clear and visible call-to-action elements, and prominent visuals that present the balanced mixture of app screens and thematic 3D graphics to instantly set the connection with the essence of the offered service. Smooth web animation makes the user experience even more lively and dynamic.

So, as a result of the project, the Glup brand obtained a solid and effective sales channel via the easy-to-use mobile application, consistently reflecting brand identity and making the customer experience integral, engaging, and smooth.

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.

HP23. Website and 3D Animation for Prostheses Producer

Nova Post. Interactive Christmas Advent Calendar UI Design

FluxWear. Web Design and Development for Health Tech Product

Magma Math. Web Design for Educational Platform

HotelCard. Brand Identity for Hotel Offers Service

Nibble Health. Identity and UX Design for Healthcare Fintech Service

Physica Magazine. Web Design and Graphics for Scientific Blog

CSConnect. Website Design for Immersive Experience Marketing Platform

ProAgenda. Identity and Website Design for Golf Management Service

Kaiten. Identity and Product Design for Food Marketplace

THT. Website Design for Electrical Engineering Service

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

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

Сообщение Case Study: Glup. Branding and UX Design for Delivery Application появились сначала на Design4Users.

Lineart Animals

This illustration set is devoted to the world of animals and pets, created in the artistic style of line illustration based on smooth and elegant curves and bright color spots, adding even more emotion and expressiveness to artworks.

Dog line illustration

Fox line illustration

Rooster line illustration

Swan line illustration

Whale line illustration

Bull line illustration

Marketing Illustrations for Small Food Brands

Here’s the set of artistic outline illustrations for local food brands’ promotion both online and offline. There, you will find the bakery waking the town up with the irresistible flavor of freshly baked bread and airy croissants, winemakers adding a special taste to any celebration, cheese producers knowing the ins and outs of the best cheese tastes and textures, and beekeepers busy as a bee to make lives sweeter and healthier.

Each case included three line illustrations reflecting the food maker, the product, and the location where it’s produced. This type of graphics is flexible for a broad diversity of marketing goals like banners, posters, billboards, website or landing pages, printed brochures, leaflets, business or gift cards, letters, boxes, bags, etc. Take a closer look below.

Winemakers

Cheesemakers

Bakers

Beekeepers

People Illustrations

A couple more line artworks reflect different actual themes and use human characters to set a clear visual connection to the topic. This type of graphic content can be effectively used as a title image for a blog article, landing page, social media posts, or advertising banners.

To feel happy and stay productive, we all have to care about the physical and mental harmony reached via work-life balance. In the new reality of recent years, some of us have to find new ways to adapt, including working and training from home. But those who want will always find the way. That’s the story the line-art illustration below shares.

This illustration is up to reflect another bright day that will definitely be full of life colors and bright challenges, which yet are never the ones to be afraid of when you are focused and ready for the fight.

One more artwork reflects the growing world of cryptocurrencies, dynamic and deep, and the artist experiments with composition, details, and gradients to make the mood clear and the idea expressive.

New illustration sets are coming soon. Keep up with new posts.

Illustration Collections and Digital Art Case Studies

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

Real Bitcoin. Creating Website Illustrations

Digital Art: 50 Digital Illustrations To Please Your Eye and Soul

OK Boomer. Trivia Game Design and Branding

Art of Seasons: 30+ Bright Illustrations Inspired by Nature

45 Inspiring Illustrations About Workspaces, Creativity, and Art

Animal World: 4 Beautiful Illustration Sets About Wildlife and Pets

Book Illustrations for Visual Storytelling

In Search of Illustration: Design Process for Illustration Set

Picturesque Digital Illustrations Inspired by the Art of Architecture

Moonworkers. Digital Illustrations on Film Production

MYWONY. Storytelling with Brand Intro Design

Digital Art: 40+ Inspiring Illustrations on Diverse Themes

Originally written for Tubik Blog, graphic content by tubik

Сообщение Art of Lines: Sophisticated Line Art Illustrations by Tubik Arts появились сначала на Design4Users.

Project and Client

Crezco is a fintech product that employs technology to eliminate unnecessary expenses and frictions in trading for businesses, bringing suppliers and buyers together and supporting their growth. That is a creative and modern solution, especially for small businesses that focus on what matters most, while payment processes are all covered with Crezco. The service strived to set up a solid and trustworthy brand image and communication that would clearly transfer the idea of reliable and straightforward financial operations and business support.

Process

The creative team aimed to create an identity that would translate the key brand vision: to make inefficient markets efficient and speed up economic progress everywhere. Crezco’s identity becomes a communication tool that helps to address a broad and diverse community and conveys the product’s advantages.

The central idea that influenced the visual style of brand identity is the creative approach to the traditional bar charts usually used for financial reports and stats. They were transformed into a balanced and harmonic design system consistently used across all the brand touch-points with its customers, from logo design and animation to the diversity of both tangible branded items such as business cards, clothes, posters, billboards, and digital communication in social media.

The brand color palette is based on several shades of deep green and pale green with accent colors such as coral and beige. Such a combination is flexible for playing with color contrast and setting solid readability and legibility for different channels and spots of visual communication. The choice of typeface fell on the elegant and readable Object Sans.

And here’s a closer look at the logo design based on that approach. It is a combination made up of a solid square symbol based on the ideas of transformable bar charts and the typographic part unveiling the brand name. What’s more, based on shapes psychology, straight lines and right angles of a square give a sense of reliability and security, and people strongly associate squares and rectangles with buildings the reason why they bring a feeling of trust and authority, which also was a good association to set about the financial service.

The approach described above was developed into a set of branded and advertising items to grow brand awareness and recognizability via various customer touchpoints.

Outdoor advertising billboard design

Business cards design

Booklet/notebook design

Branded badges

Branded tote bag design

Advertising poster design

Branded video commercial concept

The design approach set for branding was also consistently stretched to the website, providing information on the problem-solving potential of the service, answering frequent questions, and engaging visitors to try its benefits to amplify their business. Light and airy web pages are built on wisely arranged content uncovered gradually, with easily reached CTA elements for each section. Also, the core navigation in the sticky header is easily reached from any point of interaction with a web page. Solid visual hierarchy and well-mastered negative space make the website balanced and easy to use while smooth and stylish web animation and vibrant visuals add emotional appeal to the user experience.

Obviously, being innovative, technological, and intangible, services like this need to use a lot of text content to introduce their benefits to the customers and convince them to try. So, the effective solution here was to divide content into small logical pieces that could be easily scanned and understood. The designers supported them with simple and clear graphics to make the content perceived and remembered even easier.

Two more small but important details to think over and design were the favicon and app icon, which play a significant role in setting the consistent visual connection across channels.

Considering the actual needs of such a fintech service, the team has also developed the concept of the mobile application, with functional and attractive screens, big noticeable numbers, neat icons, and intuitive interactions, keeping visual consistency with the branding and website design, this way making all the types of connection with the service feel like one integral customer experience.  Take a look at the mobile screens below.

Taking into account the impact of digital marketing via social media channels, it was also essential to think over the social posting templates that would keep up with the general brand approach. Below, you can see some of them, setting the general idea of what could Instagram posts and stories look like.

So, for our team, this project was a remarkable case of collaboration with progressive financial technologies, while the Crezco brand obtained a well-developed and practical design system that supports creating a clear and informative field sharing its positioning as a reputable service that makes direct bank transfers as convenient as card payments but without the fees.

New design case studies 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.

FarmSense. Identity and Web Design for Agricultural Technology

Carricare. Identity and UX Design for Safe Delivery Service

Otozen. Mobile App Design for Safe Driving

Uplyfe. Identity Design for Health App

Bennett. Identity and Website Design for Tea Brand

FluxWear. Web Design and Development for Health Tech Product

Magma Math. Web Design for Educational Platform

HotelCard. Brand Identity for Hotel Offers Service

Nibble Health. Identity and UX Design for Healthcare Fintech Service

CSConnect. Website Design for Immersive Experience Marketing Platform

ProAgenda. Identity and Website Design for Golf Management Service

THT. Website Design for Electrical Engineering Service

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

Сообщение Case Study: Crezco. Branding and UI/UX Design for Fintech Service появились сначала на Design4Users.

Project

OtoZen is an innovative technology for safe driving, operating via a hardware device connected to a mobile application. It helps users to turn any car into a smart, distraction-free vehicle. It is the all-in-one safe driving assistant that keeps drivers focused, organized, and connected to friends and family. Users can quickly pair the OtoZen device with their Apple or Android phones via Bluetooth and install the OtoZen Pod in split seconds, with no tools, wiring, or professional installation required.

In this project, tubik specialists were involved in auditing and improving UI and UX design for the mobile application, as well as creating custom graphics and a website that would strengthen the product’s web presence.

App Design

From the perspective of user experience design, the Otozen application was a complex project that included a diversity of manipulations with different data, some of which are changing in real-time mode and should be updated and distributed appropriately. Another concern was dealing with a lot of personal data security and privacy issues. So, the design process had to start with diving deep into the slightest details of functionality and user problems solved by the application. This is what the application looked like at the start of the process.

The client came to us with a prototype that had to be reviewed, discussed, and reconsidered. In general, the technology is built around the following primary directions:

• safe, distraction-free driving: texting-while-driving prevention, reduced audio distractors, high-speed alerts, feedback on driving safety level, autodial to call help for emergency
• well-used driving time and organized reminders: location/time-based reminders, audio calendar alerts, joining meetings hands-free, simplified expense reports with mileage tracking
• convenient connection and communication with other people, for example, family and friends: requesting live location and ETA of other drivers, getting easily updated with automated notifications, full control of privacy and visibility

So, having analyzed the diverse functionality and data the app had to process, considering the objectives behind the application, our team made a deep review of the pain points and blind spots in the existing prototype. That process of design audit was grounded on constant communication with clients to find out the slightest details that could have an effect on user experience and grew into tons of graphs, charts, tables, and schemes. That’s a good example demonstrating that a huge part of the user experience design process is not about visuals but about analyzing, structuring, connecting the dots, considering details, and building systems. Here’s a look at just a small part of the process.

A part of multiple systematic tables textually organizing different information about the product, questions and issues to discuss, and suggestions that could improve user experience, to support collaboration between the clients and the creative team and let them stay on the same page.

A glance at the process of analysis and structuring user interactions with the application and issues arising in the process

The process of building a particular piece of user scenario

So, the core tasks for the UX designer were to think over data organization, visualization, and navigation which would make complex flows of information and functions feel intuitive and straightforward and wouldn’t overwhelm users. Supporting that idea, the choice was made on a light and airy interface with contrasting but not overbright colors for critical visual elements and buttons and a highly-readable sans-serif font to make the screens scannable and easy to use on the go.

One of the significant points for the user experience design of the mobile application was effective onboarding and registration flow. The account creation process is divided into several simple steps, with a progress indicator keeping the user updated about the current stage.

My Trips section opens the feed and gives an opportunity to easily tune what the user wants to see. This application is a good example of how well-crafted icons support the usability and navigability of the mobile interface and help set instant visual connections with different types of information. The map screen shows the trip details. It also uses color marking for the various points, such as speeding or telephone usage, this way visualizing quickly how often the issue happened during a particular trip.

Opening the calendar, the user can see daily time stats in minutes. The drive score section opens the information on issues that influence driving safety.

The tab bar lets users switch between five core interactive zones: Alerts, My Trips, Buddies, Profile, and Notifications. To maximize the influence and make it clear for users, it combines elegant line icons and text labels to quickly inform what users will find in each tab.

And here’s a glance at the flow of interactions with the app.

The Alerts section organizes all types of incoming alerts and helps to switch between them smoothly.

Profile screen shows different data about settings and preferences, neatly organized in groups. Here users also can add, edit, and review their emergency contacts, vehicle details, and places.

One more important and valuable feature of the Otozen application is Buddies. This function allows users to connect, make their trips trackable, and notify their chosen buddy about the needed information, such as the current point on the route or arrival. It can be super helpful for various issues, for example, when the app user needs to know where the family member is but doesn’t want to distract them from driving with calls or messages.

One of the points the technology creators describe as the most essential and show deep care on is personal data security. So, in the Buddies functionality, this aspect had to be well-thought-out, and sharing/accepting access to tracking the other users’ trip, OtoZen users needed to be sure that they can control the level to which they open data to their buddy in the app. That resulted in another neatly organized set of settings in the application that had to be clear and straightforward.

The major challenge behind the application UX design was to get together all the multiple flows of information, notifications, alerts, macro and micro settings, and decide upon the most user-friendly way to organize them.

Web Design

One of the well-checked tools for building a solid mobile application brand and effective promotion is creating a landing page or website to present the benefits and connect users to the product in an efficient, informative, and captivating way. So, the website was another task for our team to allow the OtoZen product to cover this aspect of digital marketing and set another major channel of communication with its users, letting them catch the idea and uncovering the answers for all the questions that may arise. The general layout and website style echo basic color accents and the airy, light layout of the application. The information about the technology is divided into concise sections to be scannable and skimmable. The hero section presents the immediate visual connection to the technology via the prominent image demonstrating both the device and the app and giving the main idea about the product and its value for users via an informative tagline and short description. The call-to-action button in the hero section is instantly visible due to the color contrast. It works in pair with the ghost button, allowing visitors who want more information to watch the video.

For the last few years, original illustrations applied to user interfaces have been one of the most popular and solid UX design trends. Not only do original graphics contribute to the general brand image and enhance its recognizability and memorability, but also they set a solid emotional connection between the product and its user. What’s more, they add much to the usability and visual storytelling, especially when consistent photos cannot be obtained for all the necessary demonstration needs, especially in the cases of highly technological products. The Otozen website took advantage of the custom illustrations keeping a consistent style and effectively supporting information blocks. Also, many of the pictures feature people, adding a human element to the communication. A mobile adaptation of the website makes it look attractive and work effectively from any device.

“We are very pleased with the outcome. The app UI/UX is well received by our customers. There was a consistent app UI/UX theme that was maintained throughout the development, and having the same designer working with us helped us achieve this,” the client company’s CEO wrote in his review on Clutch, and what could be the better way to finish the design story?

New design case studies 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.

Nibble Health. Identity and UX Design for Healthcare Fintech Service

HotelCard. Brand Identity for Hotel Offers Service

Physica Magazine. Web Design and Graphics for Scientific Blog

CSConnect. Website Design for Immersive Experience Marketing Platform

Ready Set Recover. Web Design and Illustrations for Surgery Recovery Platform

ProAgenda. Identity and Website Design for Golf Management Service

BlockStock. Brand Identity and Website for Minecraft Models Resource

Kaiten. Identity and Product Design for Food Marketplace

Nonconventional Show. Website Design for Podcast

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

FarmSense. Identity and Web Design for Agricultural Technology

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

Сообщение Case Study: OtoZen. Designing Mobile Application for Safer Driving появились сначала на Design4Users.

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

Types of Video Content in Interfaces

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

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

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

Content and Goals Perspective

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

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

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

Promotional video presenting Carricare brand

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

Tubik showreel videos

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

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

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

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

Background videos on the landing page promoting the mindfulness application.

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

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

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

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

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

Hero video for PointZero25 event agency website

Hero section video used on the confectionery website home page

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

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

Explainer video for OffCents

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

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

Educational videos about wildlife integrated into the Nature Encyclopedia app

Design and Technical Realization Perspective

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

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

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

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

Fitness application using video tutorials on how to do exercises

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

Screencast video capturing the illustration process in Procreate

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

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

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

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

Motion graphics video background for digital transformation agency

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

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

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

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

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

Functions of Video in UX Design

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

Information

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

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

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

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

Demonstration and Presentation

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

Video demonstrating Fitness App interactions

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

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

Storytelling

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

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

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

Atmosphere

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

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

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

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

Emotion

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

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

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

Points to Consider

Loading Time

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

Contrast Issue

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

Other Ways to Communicate

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

Manipulations

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

Mobile Adaptation

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

Mobile adaptation for a niche e-commerce website selling accessories

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

Useful Reading

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

UX Design: Types of Interactive Content Amplifying Engagement

Photo Content in User Interfaces: When and How It Works

Aesthetic Usability: Beauty on Duty for User Experience

5 Basic Types of Images for Web Content

Motion in UX Design: 6 Effective Types of Web Animation

Types of Contrast in User Interface Design

5 Pillars of Effective Landing Page Design

How to Improve Website Scannability

The Anatomy of a Web Page: Basic Elements

How to Design Effective Search

Web Design: 16 Basic Types of Web Pages

Videos as Instructional Content: User Behaviors and UX Guidelines

Step-by-Step Guide to Custom Promo Video Design

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

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

Fitness application design by tubik

Activity tracker by Sigma Software Design

Workout app design by Odama

Fitness app design by Musemind

Fitness and yoga application by Outcrowd

Fitness app concept by Anastasia Golovko

Workout application by Enver Studio

Workout planner app by ever

Fitness tracker application by One Week Wonders

Fitness tracker application by tubik

New design collections are coming soon; stay tuned!

For more inspiration, check the sets of other posts from our D4U Inspiration gallery, where we gather impressive creatives to share their art with you, for example:

• people illustration gallery
• a big of user-friendly mobile applications
• logo design collection for various business goals
• captivating 3D animation concepts
• creative web designs with 3D graphics
• web design examples on ecological issues
• inspiring mobile interactions design examples
• Procreate illustration tutorials

Сообщение UI Inspiration: App Design Concepts for Sports and Fitness появились сначала на Design4Users.

Task Manager App

Having a life full of various things to do, we try to find the best way to organize them all neatly, and task manager apps become a great help. Here’s a glance at the design for one of them. With it, users can create multiple calendars, plan their tasks, and enjoy a simple aesthetic interface. Color marking helps to quickly monitor tasks from different calendars, while the dark theme supports the good balance of contrast to make text and bright color accents deep, scannable, and avoid eye strain in any environment of usage.

Calorie Tracker App

Those who care about being fit know what a big part healthy eating plays. Today, there are numerous apps helping people track their eating habits and analyze their influence on weight and well-being, yet we want to add our two cents to this theme. So, here’s the user interface designed for the app to calculate calories and give users a better understanding of the essence of the food they consume. An airy light interface with fresh green as the main color in the warm app palette, custom illustrations, and smooth animations make the app user-friendly, attractive, and engaging. But what UX designers put the most effort into is data visualization, allowing users to get confident about their stats and progress.

Exotic Fruit Ecommerce App

This mobile user interface design project is full of juicy colors and tasty looks. Take a look at the product screens designed for the e-commerce mobile application for buying various exotic fruit. Eye-pleasing, clear, and readable screens with prominent and attractive product images and contrasting call-to-action buttons are all aimed at making a choice and purchase process easy. The bright color marker gives the user a prompt that the shopping bag already has something added, special tab helps to choose the number of items quickly, just tapping on the slots and seeing the price changed immediately. An engaging and artistic main screen with custom illustrations of fruit allows for choosing a product right from there.

Cloud Storage App

Here you can take a glance at the design for a mobile app that offers a sort of cloud storage, nice and clean in the best traditions. The primary goal of design for such products is making them super intuitive and usable, with no distraction from content users interact with, but also aesthetic and eye-pleasing.

Drink Recipes App

This app design is filled with the vibes of a party or relaxation after a hard day. Here’s a mobile application with a big base of recipes and guides on how to make various soft and alcoholic drinks. The dark background sets the atmosphere of a bar or restaurant and adds depth and elegance to the photo and video content. Solid visual hierarchy, intuitive navigation, and data visualization help users feel confident.

Personal Challenges App

One of the interesting opportunities the modern world offers to us is various challenges that can be done remotely and supported by coaches from different corners of the world. Here’s a bit of app design devoted right to that theme. That’s a set of interactions for a mobile application helping people take various challenges online and boost their skills, knowledge, health, and fitness. It’s easy to see that elegance, readability, and usability were top priorities in the design process.

Quotes App

This UI design concept is about wisdom and inspiration packed together. Here’s the set of interactions for a minimalist and elegant Quotes App, the mobile application allowing users to collect wise thoughts and ideas from different sources.

Task Tracker App

Take a look at the user interface design for a task tracker that helps users to schedule and track various tasks, events, and things to do, this way increasing their productivity. An elegant and usable balance of dark and light backgrounds, lovely color accents, animated illustrations, onboarding, a variety of stats, clear transitions, and solid readability make the interface both handy and beautiful.

Finance Tracker App

This design project is devoted to money and finance. Here’s the finance tracker app that helps users to manage their incomes and expenses. Design solutions for this mobile application feature the dark theme, wise and balanced inclusions of custom catchy graphics, strong readability, and thought-out color accents for clear data visualization. Another thing worth attention is well-crafted and engaging UI animation.

Fitness Tracker App

Progress owes much to self-control, and in its turn, self-control is stronger when you are aware of what is going on. Here’s the design project whose aim is to help users keep their fingers on their health and fitness: that’s the Fitness App, with a personalized choice between a trendy dark theme and airy light theme, simple, clear, legible data visualization, highly intuitive navigation and eye-pleasing smooth UI animation for different states and clear communication between the app and its user.

Event App

Being sociable is not only fun and joy but also a challenge for your responsibility. Sometimes, it’s not that easy to keep everything in mind. Here’s the app solving that problem. That’s a simple mobile application for scheduling, keeping, and tracking events. It is aimed at young people as the core target audience, which determined the bright and trendy visual style as well as a catchy custom illustration used as loading animation.

Bees And Honey App

This app is about the sweetness and hard work combined together. It’s all about bees. Here’s a sneak peek at some mobile screens of the app that lets users buy and hire bee families as well as get some products and useful information connected to the theme. Another interesting design feature to attract the user’s attention is the playfully illustrated onboarding screens setting a friendly mood and tone of voice from the first contact with a user.

Gallery App

“Art is not a mirror held up to reality but a hammer with which to shape it,” Bertolt Brecht once said, and it doesn’t change with time and generations. Whatever progress is achieved, whatever technologies are invented, art still remains one of the biggest sources of inspiration, education, and motivation for mankind. More and more apps are rising to support it, and this app design continues showing you one of a kind.

This is a UI design concept for a gallery app performing the artworks by modern artists. The artists can sell their artworks here while visitors are able to choose the picture they would like to buy or just enjoy the variety of art. Sure, all the navigation and composition of the layout are built around visuals performed on the dark background to show them in the best light and supported with an asymmetric grid and smooth motion.

Bar Inventory App

This mobile user interface concept is about increasing the efficiency and productivity of bar workers. The app that is connected to the special scales quickly informs the users how much drink is left in the bottle opened before. This way, the process of inventory is made much faster, easier, and more intuitive. So, the interface is focused on clear navigation and the ability to use the app in a variety of environments.

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

UX Design Collections

If you want to check more creative sets of web, app, and graphic design examples, here are some of them.

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

App Design Ideas: 7 Nifty Mobile Application Design Projects

Product Page Design Inspiration: 17 Ecommerce Web Designs

Information Beautified: Media and Editorial Website Designs

UX Design for Traveling: Impressive Web Design Concepts

23 Impressive Web Design Concepts for Various Business Objectives

Design for Sales: 10 Creative UI Designs for Ecommerce

Save the Planet: Web Designs on Environment and Ecological Issues

Web Design: 26 Examples of Creative Landing Pages

UI in Volume: 3D Graphics in Creative UI Design Concepts

Logo Designs for Different Business Goals

Web Design: 16 Basic Types of Web Pages

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

Сообщение Mobile UX: 14 Cool and User-Friendly App Design Concepts появились сначала на Design4Users.

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.

Pottery website design

Product or Service Demonstration

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

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

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

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

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

Website for a massage services company

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

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

Fashion models portfolio website

MYWONY wedding dresses brand website

Setting Atmosphere

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

Gin School website design

Home page for the ballet company website concept

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

Website design concept inspired by Moesgaard Museum

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

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

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

Lumen Museum website pages

Humanized Connection

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

Nonconventional Show interview podcast website

Website of a fashion designer brand 

Design concept for a website for a photography contest

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

Directional Cues

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

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

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

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

Guides and Manuals

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

Dessert recipes blog

Illustrative Article Images

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

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

Online editorial about different generations

Bartending encyclopedia website

Web design concept for an online magazine

Creating Emotional Appeal

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

Confectionery website design setting strong emotional appeal

Online editorial about the history and development of skateboarding

Book festival website

Advantages of Photos in Interface Design

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

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

Website design for a horse-riding club

Points to Consider

Using photos in web design, consider the following tips:

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

Where Designers Get Photos

There are three several ways:

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

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

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

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

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

Useful Articles

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

User Experience Design: 7 Vital User Abilities

5 Basic Types of Images for Web Content

UX Design: Types of Interactive Content Amplifying Engagement

The Anatomy of a Web Page: 14 Basic Elements

 10 Reasons to Apply Illustrations in UI Design

UX Design: How to Make Web Interface Scannable

Negative Space in Design: Tips and Best Practices

Motion in UX Design: 6 Effective Types of Web Animation

Types of Contrast in User Interface Design

5 Pillars of Effective Landing Page Design

User Onboarding Design: Practices and Tips

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

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

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.