Tag Archives: design for business

UI navigation design elements

UX Design Glossary: Interface Navigation Elements. Set 2.

Interface navigation belongs to the core issues of UX design. That’s not surprising: it’s hard to get to your destination if you can’t see the way. Being surrounded by more and more websites and applications every day, users are high-fed with the diversity of offers and expect intuitive navigation as a must-have. So, let’s continue our talk about the theme with a new issue of navigation glossary to learn more about this powerful booster of usability. Earlier we presented you the first set of UX glossary for navigation covering the definitions and examples for navigation, menu, button, CTA, bar, picker, switch etc.  Today let’s add the new ones to the list: check the details for icons, search field and tags.

 

information architecture for designers tubik

 

Icons

 

An icon can be defined as an image which has a high symbolic value and is used for the purpose of communication. Icons present signs which are informative and support data exchange between the informer and addressee alongside with words and sentences: while copy is served with letters or characters, icons communicate via the images showing pictorial resemblance with an object of the physical world. In computing and digital design, icons are pictograms or ideograms used in the web or mobile interface to support its usability and provide the successful flow of human-computer interaction.

 

One of the most valuable benefits of icons among is the ability to effectively replace the text. This feature is able to boost usability and strengthen navigation as most users tend to perceive and decode images faster than words. However, even the slightest misperception or double meaning can become the reason of poor UX so the solutions on the type of icons should be carefully tested to reach the good balance of icons and copy for a particular target audience. One of the effective variants is using both copy and icon so that different categories of users could feel good with that: this approach is particularly popular in various catalogues of e-commerce websites where different positions are presented by both words and pictures giving the user double support for quick and clear navigation.

UI icons in interface design tubik blog

 

Based on their functions, icons can be classified as: 

— interactive icons: icons which are directly involved into interaction process. They are clickable or tappable and respond to the users request doing the action symbolized by them. They inform users about the functions or features of the buttons, controls and other elements of interaction. In many cases, they are obvious and don’t need the copy support.

— clarifying icons: icons aimed at explanation, visual markers explaining particular features or marking out categories of content. They may be not the layout elements of direct interaction; also, they are often found in combination with copy supporting their meaning. 

— entertaining and decorative icons: icons aimed at aesthetic appeal rather than functionality, often used to present seasonal features and special offers. They present the effective way of attracting user’s attention and enhance the general stylistic concept of a digital product.

— app icons: interactive brand signs that present the application on different platforms supporting the original identity of the digital product.

— favicons: represents the product or brand in the URL-line of the browser as well as in the bookmark tab. It allows users to get a quick visual connection with it while they are browsing.

 

tubik studio tapbar ui

 

Read more about types and functions of icons here

 

Search Field

 

A search field, which is also called search box or search bar, presents the interface element enabling user to type in the keywords and this way find the pieces of content that are needed. It is one of the core navigation elements for the websites or apps with a big amount of content, in particular blogs, e-commerce and news websites etc. Well-designed and easily found search field enables the user jump to the necessary point without browsing through the numerous pages and menus: as this approach respects user’s time and effort, it is highly demanded in user-friendly interfaces.

 

In terms of design, this element can be presented in different ways, from the framed tab to the interactive input line, or even minimalist clickable icon. In the vast majority of cases, the search field is marked with the icon featuring a magnifying glass. This symbol is recognizable by a wide variety of users so it has proved itself effective for setting intuitive navigation. Experiments with this icons can influence badly on interactions and usability of the layout, so if other symbolic images are applied, they should be carefully tested. The flow of interaction can also be supported with the dropdown menu offering possible options or auto-filling functionality.

 

tubik studio ice ui website

Another important issue is the placement of the search graphic control in the interface. In web design, search field can be often found in a header of a website and this is a good choice: as we mentioned in the article devoted to design practices for website headers, for any website it is the zone of the highest visibility, so putting a search field there enables users to quickly get transferred to the pages they really need without wandering through the website and scrolling down. For example, it is actual for big e-commerce websites often visited by users who have a particular goal, a specific item they are looking for — if they can’t find it quickly and conveniently, the risk is high that they will leave decreasing the profitability of the resource. Moreover, the power of habit should also be taken into account: as numerous websites include search into their headers, users are accustomed to looking for it there when they need it.

 

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

 

tubik studio motion design ui

 

Tag

 

Tag is an interactive element presented with a keyword or phrase that enables the user to move quickly to the items marked up with it. Tags are actually pieces of metadata that provide quick access to specific categories of content so they support navigation with the additional way of content classification. Moreover, tags are often the elements which users create by themselves comparing to the names of categories that are fixed by the website and can’t be changed by users.

 

design for users website interface

 

Tags are widely used on the platforms based on user-generated content: when you upload the photo to the stock, post on the social networks or write on the blog, you can mark your content with the particular keywords which will then unite all the pieces of content marked with the tag. The screenshot above shows you the part of the home page of Design4Users Blog which actively uses a cloud of tags to enhance navigation around the blog content. In terms of interaction, click on a tag moves the user to the webpage collecting all the content marked with this tag. Also, tags are SEO-friendly technique increasing the chances that the content will be found via search engines.

example of tag in the interface

As another example, here’s the tagging offered by Unsplash, the well-known platform of free stock photos. When users download a photo, they are offered to type their own tags aka keywords which would describe this photo in the best way helping other users to find it. As we can see, the input field for adding tags also supports users with prompts for better usability. So, tags present user-generated elements of navigation that makes the interface closer and clearer to its target audience. 

 


 

Planning the navigation is the hard work which demands a good knowledge of psychology and interaction patterns, user testing and serious approach to information architecture from the earliest stages of an app or website design. However, it becomes the solid ground for positive user experience which will solve users’ problems and motivate them to get back to the product again and again.

 

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, buttons, and breadcrumbs. If there are any specific terms you would like to see explained, described and illustrated, feel free to contact viadirect message on our Facebook page , via Twitter or our Quora representative. 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 on the theme.

 

UI/UX Design Glossary. Navigation Elements.

iOS Human Interface Guidelines

Navigation patterns for ten common types of websites

Small Elements, Big Impact: Types and Functions of UI Icons.

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


Welcome to see the designs by Tubik Studio on Dribbble and Behance

Welcome to read us on Quora

tubik_quotes_design_for_emotion

Design for Emotion: Expert Tips by Aarron Walter.

The highest priority, which the designers set creating a website or mobile application, is functionality and usability of the interface — and for sure, that’s a right direction. However, it shouldn’t be forgotten that one of the crucial conditions of positive user experience is desirability. People aren’t only made of logic and action, they are also full of feelings, intuition, emotions, and memories. That’s what designers have to keep in mind aiming at user-friendly products.

 

Earlier we have already shared numerous expert quotes, tips, video talks and books worth reading to support our readers with useful resources. In particular, you could check the insights into Design Is a Job by Mike Monteiro — the book belongs to the series A Book Apart supporting designers with the diversity of expert tips, case studies, and resources. Today continuing this way, we would like to share a new set of quotes from the book highly recommended for UI/UX designers: Designing for Emotion by Aaron Walter, former Director of User Experience in MailChimp and now the VP of Design Education at InVision. The book offers the reasons why users’ emotional respond means much for setting positive user experience strengthening this idea with references to scientific research works and practical case studies of design for recognized websites. So, here we will save a bunch of 35 useful expert tips from the book for Tubik Quotes Collection — join in and let’s look into the design for emotion together. 

tubik_quotes_design_for_emotion
 

For a user’s needs to be met, an interface must be functional. If the user can’t complete a task, they certainly won’t spend much time with an application.

 

Many websites and applications are creating an even better experience. They’re redrawing the hierarchy of needs to include a new top tier with pleasure, fun, joy, and delight. What if an interface could help you complete a critical task and put a smile on your face? Well, that would be powerful indeed!That would be an experience you’d recommend to a friend; that would be an idea worth spreading.

 

We’ve been designing usable interfaces, which is like a chef cooking edible food. Certainly we all want to eat edible foods with nutritional value, but we also crave flavor. Why do we settle for usable when we can make interfaces both usable and pleasurable?

 

design_quotes_tubik 02

 

Emotional experiences make a profound imprint on our longterm memory. We generate emotion and record memories in the limbic system, a collection of glands and structures in the brain’s foldy gray matter.

 

When you start your next design project, keep this principle in mind: people will forgive shortcomings, follow your lead, and sing your praises if you reward them with positive emotion.

 

Certainly, emotional design has risks. If emotional engagement compromises the functionality, reliability, or usability of an interface, the positive experience you wanted will mutate into a rant-inducing disaster for your users. A friendly wager with an upset customer isn’t always going to turn the tide.

design_quotes_tubik 03

 

Our definition of beauty originates in our own image. The human mind is exceptionally skilled at scanning objects and information to discover meaning in abstract forms. We can find traces of ourselves in most anything we see, and we like that. Our ability to find signal and discern patterns in so much noise is a very important trait we use to navigate life, and as you might expect, this ability to recognize patterns greatly affects the way we design.

 

As you increase the number of high contrast elements on a page, you proportionally increase the time needed to perform a task, learn a system, and remember pathways. Adding stuff pushes the human brain to its limits. Have you ever been to a party where everyone is yelling to speak to the person next to them? As the volume increases, everyone must speak louder to be heard, but that makes it even harder to have a conversation. Design works in the same way. If everything yells for your viewer’s attention, nothing is heard.

design_quotes_tubik 04

 

 

Design is too often wrongly taken for the indulgent frosting on a functional interface. Have you ever overheard a colleague declare, “It would be nice if we could have a sexy interface, but people care more about what the site does than how it looks”? Would this person show up to a job interview in their pajamas because people only care about what they can do and not how they look? If they did, I’d bet they’d discover that thinking is flawed.

 

Through our personalities, we express the entire gamut of human emotion. Personality is the mysterious force that attracts us to certain people and repels us from others. Because personality greatly influences our decision-making process, it can be a powerful tool in design.

 

With personality as the foundation of your designs, you can layer more emotional engagement on top.

design_quotes_tubik 07

 

 

Emotional design’s primary goal is to facilitate human-to-human communication. If we’re doing our job well, the computer recedes into the background, and personalities rise to the surface. To achieve this goal, we must consider how we interact with one another in real life.

 

In modern web design, we research, plan, and create with our audience’s attitudes and motivations in mind. User experience designers interview their audience, then create personas—a dossier on an archetypal user who represents a larger group. Think of personas as the artifacts of user research. They help a web design team remain aware of their target audience and stay focused on their needs.

 

Following a structure similar to a user persona, you can flesh out your design’s personality by creating a design persona. Personality can manifest itself in an interface through visual design, copy, and interactions. A design persona describes how to channel personality in each of these areas and helps the web team to construct a unified and consistent result.

 

We know that people using websites and applications navigate and process content quickly and that their attention is limited. Introducing surprise into an interface can break a behavior pattern and force the brain to reassess the situation.

design_quotes_tubik 08

 

Aside from being the right thing to do, surprising people with kindness and individual attention can help a business achieve success.

 

Anticipation is what game designers call an open system. Games designed with an open structure, like The Sims, allow users to wander and shape game play on their own terms. Open systems encourage people to use their imagination to create a personalized experience.

 

Giving users the power to choose changes the tone of their response. When forced to change, people often react negatively. Allow people to change on their own schedule, and you empower them, diffusing animosity. We’d all rather hear “You may …” instead of “You must ….”

 

Surprise, delight, anticipation, elevating perceived status, and limiting access to elicit a feeling of exclusivity can all be effective in getting your audience to fall in love with your brand. But your tactics must be appropriate for your audience and brand experience.

design_quotes_tubik 09

 

As designers, we’re in a unique position to help users follow their gut instincts. Using common design tools like layout, color, line, typography, and contrast, we can help people more easily consume information and make a decision driven by instinct more than reason. Just as you chose the shirt you’re wearing because it felt right, we can help our audience sign up for a service or complete a task because their gut tells them it’s the right thing to do.

 

The way type, color, and layout fit together says a lot about a brand and shapes new users’ perceptions.

design_quotes_tubik 10

 

Appearance can greatly influence perceptions, and we carry that mental model with us when sizing up a website.

 

Skepticism is not the only obstacle we confront when trying to entice our audience to act. Laziness is just as big a hurdle. In truth, people really aren’t as lazy as we like to think they are. They’re just looking for the path of least resistance to their destination. When people are reluctant to act, sometimes a little incentive gets them moving.

 

Great design that uses cognitive and visual contrast not only makes you stand out, it can also influence the way people use your interface.

design_quotes_tubik 05

 

Users react apathetically to websites when the content is irrelevant to their interests, or when content is poorly presented. Content strategy will help you create the right content for your audience.

 

Great content delivered in an emotionally engaging manner is like kryptonite for apathy.

design_quotes_tubik 11

 

Emotional design is not just about creating positive experiences and overcoming obstacles. It can also help us deal with difficult situations like server downtime, lost data, or bugs that affect a user’s workflow. Mistakes happen. Things go wrong. But a well-crafted response, and the cache of trust you accrue with your audience through prolonged emotional engagement, can save you in times of trouble.

 

In fact, when you create a compelling experience, your audience will often forget about the inconveniences they’ve encountered over time and just remember the good things about your brand. So long as the good outweighs the bad, you win.

 

When people are deeply stressed by an outage or a mistake you’ve made, you must explain what happened swiftly, honestly, and clearly. Give people the facts of the event, communicate that you’re doing your best to resolve things, then update users regularly, even if not much has changed.

design_quotes_tubik 06

 

Updates let people know you’re still focusing all of your attention on resolving the problem. They give you another opportunity to apologize for the inconvenience and reassure your users that you’ll fix the problem as quickly as possible.

 

In high-stress situations, your top priority must be to tame negative emotions as best you can and, if possible, shift them back to the positive.

 

Emotional design is your insurance to maintain audience trust when things aren’t going your way. If you’ve ever been emotionally committed to someone who has hurt you, you know that the human response to such situations is driven by gut feeling more than by logic. You don’t add up the good and bad experiences in your mind and do a detailed comparison before deciding whether or not to maintain ties with the person. You simply respond based on the strength of your emotional commitment. We react similarly to products and services.

design_quotes_tubik 12

 

Emotional engagement can help us look past even the most serious infractions, leaving the good more prominent in our mind than the bad. Psychologists call this phenomenon of positive recollection the rosy effect. As time passes, memories of inconveniences and transgressions fade, leaving only positive memories to shape our perceptions. This is good news for designers, as it means that the inevitable imperfections in our work don’t necessarily lead to mass user exodus.

 

Emotional design does more than entice and keep your audience, it helps ensure you’re talking to the right people. Not every customer is right for your business. Some will be so high maintenance that they will cost you more than they contribute. That can be a real morale and financial drag.

 

We’re not just designing pages. We’re designing human experiences. Like the visionaries of the Arts and Crafts movement, we know that preserving the human touch and showing ourselves in our work isn’t optional: it’s essential.

design_quotes_tubik 01

As a bonus, we also add the video talk by Aarron Walter continuing the ideas from the book — it was included in the set of must-see expert speeches for UI/UX designers.

 


 

Welcome to check the quotes by Mike Monteiro from «Design Is a Job» for A Book Apart

Welcome to check issues of Tubik Quotes Collection on brandingusabilityuser-centered design and content strategy

Welcome to read or download Tubik Magazine free books on logo design, design for business and problem-solving web design

mood boards in UI design tubik article

Design Mood. 7 Motives to Create Mood Boards.

Just imagine you worked hard, spent plenty of time creating a detailed prototype, and then a client rejected it saying that it isn’t even close to what he wanted. Sounds familiar, doesn’t it? Every designer at least once has been through such an unpleasant situation. Probably right now everyone expects some relevant advice how to avoid this kind of situations but truly saying there is no a perfect decision.

 

However, there are several methods helping to reduce risks of clients’ rejects as well as save designers’ time and nerves. Today’s article is devoted to the technique called moodboarding. Let’s see what mood boards are and how they can help in the designer’s workflow.

 

What’s a mood board?

 

The technique of moodboarding is popular not only in design field but among many creative professionals. Mood boards are literally boards (digital or material) which people fill with different kinds of things from photos to various textures so that they could visualize ideas and concepts.

 

Unlike wireframes and prototypes, mood boards don’t show the detailed picture of a future project. They are meant to transfer the right mood and bring the emotions expected from a product.

 

Mood boards are a useful tool helping designers effectively collaborate with clients and team members. Boards can be easily created within a tight time frame and turn an abstract idea into a real one. This way designers can effectively share their ideas with the others because visual material always works better than fluent phrases.

 

mood board UI design

Mood board compiled by Tubik designer Ernest Asanov

 

How to create mood board?

 

Mood boards are a good way to experiment with a color palette, fonts, and style as well as plan visual hierarchy of a project. Everyone decides for themselves what components to include in a mood board. UI/UX designers usually use the various samples so that they could characterize interface elements. There are several common types of mood boards. Let’s see what they are.

 

Free collage

 

Designers often collect free high-resolution photos so that they could use the material in the future projects or elsewhere. These collections may come in handy for the mood board creation. A free collage consisting of beautiful photos is an effective way to transfer a mood of the design concept. Also, collages can be filled with illustrations, fonts, and color examples.

 

This type of mood boards is the fastest and the easiest among the others. However, if a client is detail-oriented, they may not be excited with a free collage as an example of a future project.

 

mood board graphic UI design

Mood board compiled by Tubik designer Ludmila Shevchenko

 

Reference collection

 

Another source of inspiration and a method for idea visualization is quality references. There are plenty resources such as Behance and Dribbble where designers can find inspiring concepts and real projects with a free access. Collection of design works united by a common style or any other feature can easily illustrate an idea for a new project. Moreover, such mood boards help clients effectively comprehend a concept because they can see similar references and imagine what their product will look like.

 

Template board

 

These mood boards are more like prototypes and wireframes. Their aim is to show the structure and visual hierarchy of a product. The difference is that UI elements on a template board are not detailed as in prototypes or schematic as in wireframes. Components are shown via random illustrations and photos presenting a layout of a digital product. In addition, images can be selected that way so it would be easy to recognize corresponding color palette. This method is faster than prototyping because it doesn’t require details.

 

ui moodboard design

 

Mood board compiled by Tubik designer Ludmila Shevchenko

 

Why should UI/UX designers create mood boards?

 

Many of us may notice that wireframing and prototyping are always described as essential stages in design workflow while moodboards are rarely mentioned. Some may consider them as the waste of time or just entertainment. Nevertheless, there are many people who include moodboarding as a part of every creative process. But why do they choose the technique? Here we’ve gathered the list of reasons for designers.

 

1. To save time and effort.

 

The first and a big advantage of moodboarding is that it doesn’t require much time to be done. It means that in a few hours, or maybe less, designers can create a visual guide for clients presenting a concept. A mood board can be easily edited so it saves both time and effort.

 

Such a guideline is a good foundation which allows quickly jumping to the next stage of prototyping. Moreover, designers save their nerves if a client is not satisfied with the outcome and demands a new concept because they don’t spend a whole day to create a detailed presentation.

 

2. To get inspired.

 

Of course, designers can’t always rely on inspiration because they have work to do, still, things are done more effectively if the creator is inspired. Moodboarding is a good way to find ideas and enthusiasm. Beautiful photos and illustrations help to find the right mood and style. In addition, if you can, try to create a material mood board via things surrounding you. It is said that handwork has a powerful impact on creative thinking. So, why don’t take a try?

 

3. To find a right color palette.

 

A collage can include photos, illustrations and color samples forming a compelling composition. By mixing images in different colors on a board designers can experiment with a color palette even if UI elements are not ready yet.

 

4. To enhance communication with customers.

 

When a product is at the stage of an abstract idea, it is sometimes difficult for a designer and a customer to understand each other while discussions. For example, both sides can see the certain style a bit differently so it can cause an argument. That’s why it is always a good idea to have some visual references such as a mood board.

 

5. To talk less and show more.

 

Continuing the point above, it should be said that any long report can’t explain your plans and ideas better than a visual presentation. Words can fail in shaping a picture in a client’s head but the visual material is a reliable guide helping customers to dive deeper into details and understand your ideas correctly.

 

Illustrate your ideas at the early stages so that clients could see what you plan and how their product is shaped up.

 

6. To find a style for a design.

 

If a creative team hasn’t received directives from clients about the style of the design, the task lays on a designer’s shoulders. To see how one or another style works, there is no need to build a detailed prototype for each of them. Add to a mood board different textures, experiment with types of illustration, test fonts, and change colors. It’s faster and more convenient to try options with a mood board than spend time changing prototypes one by one.

 

7. To involve clients in a process.

 

One of the ways of gaining clients’ trust is to let them feel they are deeply involved in a project. So, at this stage, if they wish, they can actively participate in the selection of styles and samples. Moodboarding is an easy technique which can be accomplished if you’re a non-designer.

 

Clients can be suggested to make a collage of photos and pictures, or maybe even references if they are not new at this. This way designers can easily learn clients’ tastes and preferences and see what they expect from the project.

 

Examples of mood boards for digital design projects

 

For more practical presentation of the issue, we would like to show you the set of extended mood board, compiled by Tubik designer Dima Panchenko for his projects on user interface design. He also practices adding the general notes presenting the mood board to the client which has a positive effect on the process of communication and choosing the concept for the project.

 

1. The mood board for setting the client’s preferences about the general stylistic concept of the screen.

 

moodboard for UI project

 

2. The mood board presenting the vision of the style corresponding to the project requirements.

 

moodboard for UI design project

 

3. The moodboard with a variety of concepts for a sport app with football theme.

 

moodboard sport app UI design

 

Moodboarding can become a useful habit for every creative person. Designers can create mood boards to find the inspiration or use them as an additional tool in their workflow. Stay tuned!

 

Recommended reading

 

24 pro tips for creating inspirational mood boards

Creating Better Moodboards for UX Projects

 


Welcome to see the designs by Tubik Studio on Dribbble and Behance

interface testing UI design tubik

Make the Right Choice. A/B Testing for UX Improvement.

To be or not to be? That is a question and a constantly repeating situation. People often have to face some choices which are hard to make. Designers’ job is also full of the situations when two solutions seem like right but you need to make a choice and not to stumble. When it happens, a creative team runs tests for both to find out which solution is the best. One of the popular methods is called A/B testing. The article describes the facets of A/B testing methodology and shows how designers apply it for UX improvement.

 

What is A/B testing?

 

A/B testing, also known as split testing, is a method of comparing two versions of a digital product in order to find out which one performs better. A creative team divides users into two groups and each of them is shown different variants. One half sees A version, the other — B. Such an approach helps to determine a more profitable solution.

 

The differences between A and B options can vary from the smallest to the big one. For example, it can be a color of a small element or different placement of all the components. The effectiveness can be measured by different criteria such as page views, clicks, number of subscriptions, or sale-leads. The choice of criteria for measurement depends on the goals a company or a creative team has established. In some cases, it may be good to combine these metrics to achieve deeper insights of all aspects.

 

How can designers use A/B testing?

 

UI and UX design for a product is always created to gain certain goals. Designers thoroughly choose all UI elements as well as plan clear and pleasant interaction and navigation system for effective user experience. However, what once worked well, may not have the same effect after a while. Business goals constantly change during the time a product functions, so the design requires some improvements.

 

A/B testing is an approach helping to make design changes carefully so that users wouldn’t feel inconvenient. Designers can collect the needed data and metrics while people continue to use an app or website.

 

So, what do designers get from A/B testing? First of all, it’s a good way to learn behavior patterns and peculiarities of the target audience. By testing different versions of UI, designers can see what kind of influence each solution has on users and which one performs more effectively. Moreover, A/B testing assists to remove bad design decisions if there were ones and replace them with something more profitable.

 

In addition, A/B testing can reduce conflicts between designers and the clients. It often happens that the opinions of both sides differ and no one wants to step aside. To solve such a kind of conflict, designers can run A/B testing for two variants which a creative team and a customer see as the best solution.

 

As we said above, differences between versions A and B can be either small or big. Here is a list of elements which designers often choose for A/B testing.

 

  • CTA buttons (their placement, size, color or copy);
  • Headings and subheaders;
  • Images on landing pages;
  • Presentation of clients’ form on websites;
  • Copy (length, placement and content);
  • Offer display;
  • Videos (presence or absence).

 

A/B testing is not a one-time operation. Designers can test different elements one by one and then combine gathered information to check which of their solutions is more user-friendly and goal-oriented.

 

usability testing for web and mobile

 

A/B testing process

 

If you never tried A/B testing before, it’s never too late to experiment. Besides, experimenting with new approaches can help to open new opportunities. Moreover, A/B testing is not a complicated method. It can be accomplished easily if you take the following steps.

 

Step 1. Gather data and rates.

The first aim of A/B testing is optimization. It can be revenue optimization, user experience improvements or just a product upgrade as a whole. That is why the first step before you run A/B testing should be data collecting. Analytics results can help to understand what aspect needs the optimization the most. Pages with low conversion rates or CTA buttons with a small amount of clicks can be the first targets.

 

Step 2. Set the goals.

To make the improvements work right, designers need to determine what they expect to gain from them. For example, it can be more subscribers for a blog, more time spent on a website, or more clicks on CTA buttons. Setting the goals you can track the effectiveness of your decisions.

 

Step 3. Build a hypothesis.

This step is needed so that designers could use the gathered information for the future improvements. After the goals are set, you need to think of the reasons why the new solutions will work better. A research on the target audience helps to generate some hypotheses about what can improve the current version. It will guide designers when the testing ends and will give deep insights on the target audience preferences.

 

Step 4. Create A and B versions.

When designers have decided what changes they want to implement, it’s time to bring them to life. There are many free and paid tools helping to divide the users’ stream into two groups. It may be a good idea to QA the testing at the beginning to make sure everything goes as it should be.

 

Step 5. Go testing.

It is the most pleasant part of A/B testing for a creative team because it’s time for users to work. People use an application or visit a website and everything they do is measured and transformed into useful data.

 

Step 6. Results analysis.

The experiment lasts for certain time and when it’s complete designers work on results. All the data and metrics from two versions are gathered and compared. Based on the results designers decide which variant performed better and is capable of accomplishing the goals that have been set at the start.

 

gamification in UX design

 

Benefits and limitations of A/B testing

 

There is no perfect methodology which would suit any situation. However, each approach is unique and brings certain advantages which others can’t. Let’s see what A/B testing can offer to designers and what are its limitations.

 

Benefits

 

It measures the actual user behavior. People use a product without knowing they are a part of the experiment now. That’s why they act naturally which helps to identify the model of their behavior quite accurately.

 

It is a cheap method. A/B testing doesn’t require applying expensive tools and hiring people who’d like to test a product. All you need is two versions of the experiment and a software which would randomly divide users into groups.

 

Quality content. A/B testing is a good way to find out what content is valuable and works best for a product.

 

User-centered design. A/B testing is absolutely oriented on users’ needs and their behavior patterns. After the experiment designers get the data helping to make a product even more user-friendly.

 

Fast and easy analysis. A/B testing is usually focused on a few certain metrics. So when the results are delivered, it’s not that hard to determine which version performed better.

 

Everything can be tested. Not all the approaches allow testing really small things such as buttons color, fonts or headings placement. However, even such little elements can have a great impact on users’ behavior and their perception of the design.

 

Reduced risks. Some mistakes may cost a lot if they are made at the important stages. A/B testing can reduce the risks of losing money because of the wrong design decisions. By testing several versions of design at the early stages, designers make sure UI elements work well.

 

Limitations

 

A/B testing works only for fully implemented design. You can’t test just CTA buttons in UI without copy content or any other component because the results won’t be the same. Everything should be as a fully accomplished product ready for the usage.

 

It doesn’t tell you why. A/B testing is an effective method of gathering certain data and metrics showing what works well or not. But if you are looking for the answers why it is so, you need to do user research which will go deeper into the peculiarities of the target audience.

 

It can’t tell you what is wrong. Continuing the point above, we need to add that A/B testing isn’t meant to identify the problems in design. It only can show which improvements work effectively.

 

If design goes into real usage without proper testing, there is a high risk of its low effectiveness. That’s why designers are recommended to make testing an essential part of UX process. The choice of approach is a matter of circumstances and designers’ preferences. Stay tuned!

 

Recommended reading

 

A/B Testing, Usability Engineering, Radical Innovation: What Pays Best?

Putting A/B Testing in Its Place

How to A/B test landing pages

Tests Go First. Usability Testing in Design


Welcome to see the designs by Tubik Studio on Dribbble and Behance

video design animation tubik

Step by Step Guide to Custom Promo Video Design.

We are living in the times when information is absorbed faster and faster via numerous ways and sources. Videos of all kinds are increasing their popularity in many spheres including education and entertainment. Surely, one of the fields where video production is rapidly growing its presence is marketing with the aim of promoting and selling products and services. It’s not surprising as videos are often faster and more expressive than other ways of sending the message to the potential buyers or customers. So, creative teams accept the challenges of making original video content which is not so easy under the conditions of tight competition and tons of already produced commercials and promos.

 

Watching a short promo video on web or TV, most viewers don’t even imagine how much time and effort those short seconds of animation take from their creators. In the vast majority of cases, the visual part of the video is made by the team of illustrators and motion designers. Today we would like to show you the creative flow of the design process we have for this kind of projects as well as answer the questions frequently asked by the clients who need the custom design of a promo video.

 

Types and benefits of promo videos

 

In one of our previous articles devoted to design of promo videos for websites, we have given a classification. Let’s just briefly review the frequently used types:

introduction video usually gives the first insights about the company, product, or brand and shows what benefits the users can get

product presentation videos gives details about product’s features and advantages, informs about special steps of interactions and shows the problem-solving potential of the product

landing page videos strengthening the message driving users to a particular call-to-action offered on the page

video testimonials showing the reasons and signs of trust and loyalty to the company, brand or product

entertaining and educational videos rising emotional appeal and often presenting the material for viral marketing.

 

All the mentioned types can serve efficiently for marketing goals and increase brand awareness. A creative and catchy video is a good way of attracting customers’ attention and the proven method of informing them quickly and brightly. A video activates several channels of perception — audio, visual, sound — simultaneously and usually do it in a way of telling a story. All the mentioned combination of factors tend to make the presentation strong and memorable especially if based on high-quality graphic design and animation. People are daily overloaded with tons of information of all kinds, so most of them aren’t ready to devote much time learning about products or services, especially the new ones. In these conditions, video can become the way of communication which is dynamic, informative and attractive.

 

No doubt, technically design any sort of video is the complex multi-level process in terms of design. Promotional video adds its own specific aspects being focused on the particular business goals.

 

opera video graphic design case study tubik

 

Creative stages of video production

 

Generally, the process of video production includes the following steps:

research stage: target audience and market research

pre-production stage: script writing and storyboarding

production stage: creating the graphic assets and animation

post-production stage: video editing, adding sounds, music and voice-over etc.

 

Pre-production

 

Being a full-stack design team, Tubik is usually involved in the process at pre-production stage which means that the creative flow starts from discussing a video script we get from the client. Obviously, the most effective scripts are the ones based on the preliminary market research learning what kind of promos are used by the competitors on the market. Another important factor of making the idea behind the video appealing is the definition of the target audience. To make the final promo attractive and interesting, designers need to know who are its potential viewers, their age, preferences, and goals. So, if this information is not provided by default in the project brief, designers have to be ready to ask for all the missing data while the clients would better consider all these aspects beforehand.

 

Script and voice-over

 

The scripts for the future videos come to us in different forms: some of them are really basic, containing preferred timing of the video, general description of the scenes and their sequence while the others present the documentation with the full scenario of the scenes and even the audio with its voice-over. Is that essential to present the audio before the graphics for the video start to be done? Well, it really helps. Having the ready-made voice over, motion designer can achieve the best synchronization of the footage with the sound right from the start of the production process. 

 

As a tip for clients who are considering custom video design for their business projects, we would recommend ordering voice-over from professional voice-actors aka specialist voice talents. Be careful choosing the voice as it should correspond to the offer and mood of the video, all the words should be legible and the tone would better correspond to the preferences of the target audience. The same could be said about the music if the promo doesn’t apply speech: sound and imagery should harmonically support and strengthen each other instead of living their own lives. That is why if needed our team is always ready to take part in the process of choice and recommend possible types of voices or background music which could work well for the created type and style of the video. 

 

Is it possible to start working on the promo video before the voice-over or soundtrack is ready? Certainly, yes. However, the client should be ready that the additional time will be needed for alterations and editing combining the sound with the already created footage which wasn’t based on the given sound initially. This is really the matter of seconds when all movements and sounds have to feel like clockwork.

 

tubik studio teamwork designers managers

 

Storyboard

 

The other part of pre-production stage is fully done on the design team side: it’s a creation of a storyboard for a future short video. Storyboard is the set of organized graphic assets: these are the illustrations arranged in the sequence of their flow for the video. This technique is not a new thing: its early version is said to be invented by the Walt Disney Animation Studio in the 1930s and has been adopted by many animation studios around the world. Storyboard visualizes storytelling and gives the better idea on the flow of the video. It allows design team and the client to discuss the details about the visual part and the sequence of scenes before motion designer starts the actual animation. Depending on the requirements and urgency of the project, images applied for the storyboard can feature various level of fidelity, from simple sketches to sophisticated and detailed illustrations.

 

At this stage it’s vital to set a constructive dialogue between the design team and the client: every single image in the storyboard should be discussed and approved in terms of general idea and goals set for the video. This type of design has many specific features and motion designers have to be ready to explain them: it can happen that clients express ideas and wishes which technically can overload the footage or look bad in the limited timing. Getting deeper into the goals and results which the client expects, designers look for the optimal solutions which will make the video both good-looking and effective.

 

storyboard video design tubik

 

Sometimes the clients come with only the basic understanding of what they want to get not having strong visual preferences. In this case, moodboards compiled by motion designers can give the client a variety of possible styles and flows to feel better what they want to see. 

 

Production

 

When the storyboard is all agreed upon and every illustration in the footage is accomplished hi-res according to the approved style, graphic designers polish all the details and prepare all the necessary assets for the motion design stage. At the moment, the software used for these types of work here in Tubik is Adobe After Effects, so motion designer can work on some elements by himself on the basis of the existing functionality of the tool and without additional effort from the graphic designer side. However, most of the assets are prepared by illustrators and altered in the process if necessary: when it comes to motion, sometimes even slight changes measured in millimeters can have a big impact on the result. That is another advantage of our having graphic and motion designers in one team as they work together on all the details and assets and can consult with each other any moment it’s needed. It makes the workflow dynamic and productive enabling the client to get the video without wasting time on trying to bring several teams together.

 

After the animation of all the shots is done, it’s thoroughly checked along the required timing and harmonic combination with the voice-over. The final version of the video is then delivered to the client to be transferred to the professional sound designer — this service isn’t provided by our team. 

 

animation video production tubik

 

Case Studies

 

Here is the set of short promo videos designed by Tubik team: to check more about the project, follow the links.

 

Promo video for PassFold project

 

Year-in-review video for Opera

 

Promo video animated for Binned

The described creative flow is used here in the studio for not only promotional videos but also for educational videos and cartoons for various purposes. Productive work and effective result are always based on thorough research and tight collaboration with the client to satisfy the viewers and support the business goals at the same time.


Welcome to see the designs by Tubik Studio on Dribbble and Behance

Welcome to read or download free e-books about Design for Business and Problem-Solving Web Design

gourmet_herbs_website_design_tubik

Sell Like Hotcakes: UI Designs for E-Commerce.

In many cases when we are buying something, it’s not just about getting new things. It’s often about feeling and memories, dreams and achievements, changing ourselves inside and outside, sharing and giving, improving and learning… The advent of new technologies opened new perspectives for both shoppers and sellers, and the process of upgrading this type of relations is in active progress. A decade or two ago, buying something on the Internet was not included in a typical daily routine while now getting things and services in a couple of clicks cannot surprise anyone.

 

This state of things sets new challenges for the sellers, with efficient and appealing digital products for e-commerce ahead. “If you do build a great experience, customers tell each other about that. Word of mouth is very powerful,” said Jeff Bezos, the founder of Amazon, the biggest global online retailer. Today’s generation of shoppers is different in its vast majority: they are ready to buy almost everything online, they want to see the simple way to do it, they demand secure payment and fast delivery — and good design to present that all. That’s why websites and applications for e-commerce are so various: they have to attract their customers without getting lost in the ocean of the online competition. Well-designed user experience, based on research of the market and target audience as well as nice and effective visual performance, grows the chances of getting profits: in e-commerce sphere, the connection between design and profits is tighter than anywhere else.

 

Today we would like to offer you the set of interface concepts created by Tubik designers with the issue of e-commerce in mind. Here you’ll find the websites, mobile applications and landing pages aimed at selling products and services.

 

Website for a florist shop

 

web design florist store ecommerce

 

Flowers present the popular way to express various feelings and celebrate special occasions. Here’s the design concept for the online florist store: the general stylistic concept is light, minimalist and airy while prominent theme photos set the mood and inform users about the nature of the e-commerce offer. The home page sets the theme, establishes branding with the logo and slogan and shares some information about the service. The header gives the instant access to the extended menu of items hidden behind the hamburger button as well as provides the links to search, wishlist and shopping cart presented with minimalistic stroke icons. The footer includes the links to important service pages and accounts in social networks.

 

florist shop website design

 

Another page shows the catalog of items organized in cards: each presents the high-quality photo which is vital for this kind of business, price, and ability to add it to the cart or save to the wishlist right from the catalog page. There’s also the cloud of tags marking popular categories for better navigation.

 

florist shop website design

 

If the user wants to learn more about the particular offer, it can go to its product page, like the one shown above, and check the details.

 

Application for the e-commerce jewelry store

 

jewellery ecommerce app UI

 

Here’s a set of interactions for the app design concept of the online jewelry shop. The presented screens show the starting point of interaction with the app from the splash screen to the catalog showing categories of goods and special offers. The app provides theme photos setting the instant visual associations with the offered items while icons are stroke and minimalistic not to distract buyers’ attention. The color palette features pastel shades which look sophisticated on general layout full of light and air, and that feeling is supported with smooth and unobtrusive animation of the interface elements.

 

jewellery ecommerce app

 

The presented screens show the animated interactions with items: you can see how users can choose a product from the catalog, check its details and rating. They can also share the product cards to their social network accounts and open check out. Visually, the center of the visual composition is focused on the images presenting the items, while icons are stroke and minimalistic not to distract buyers’ attention.

 

Application for a cinema

 

cinema_app_ui_design_tubik

 

Despite the Internet, movie portals and super TV-sets we have in our homes, going to the cinema is still one of the most enjoyable and popular ways to spend free time either alone or together with friends and family. We follow the premiers, check the schedules, discuss acting and special effects afterward. And obviously, it is another perspective for e-commerce challenge. Here’s a sort of creative experiment — a mobile application for a cinema chain called Cinema App. The home screen shows the list of films presented with instantly recognizable posters. Tapping on the one among them, users see a screen of the particular film with all the necessary details: genre, trailer, description, rating, as well as the showings for the particular city for a particular date.

 

cinema app interaction ui animation

 

And this is the flow of choosing and booking the seat. Selecting a particular showing, users can see the available seats, choose the ones they like and book them, paying right from the app.

 

Landing page for dance academy

 

dance_academy_website_interactions_tubik

 

Here is the animated set of interactions for the landing page of the dance academy called HeartBeat. The elegant and minimalistic layout shows prominent theme images, gives short descriptions of the activities and links to core areas of information as well as provides the contact form to get in touch. The top section includes the horizontal slider which informs users about the upcoming workshops. Scrolling down, users can read brief descriptions about the academy and the types of classes it offers with buttons enabling to learn more, and they can use the simple contact form to get in touch. The designer was inspired by the photos of dancers by NYC Dance Project, Paul B. Goode, Andrew Eccles, Paul Kolnik, and rich animation of the dancers added a special experience to scrolling. This approach creates a sort of wow-effect to support aesthetic satisfaction which corresponds to the preferences of the target audience. This is the effective example of selling the original type of services with sophisticated design solutions and a good balance of beauty and simplicity.

 

Website for herbs and spices store

 

web design UI tubik studio

 

This is the design concept of The Gourmet, the online market for herbs, spices, seasonings and all that kind of stuff. Here you can see a product page presenting a particular item with the prominent theme image, description, price, and ability to add the item to the cart. The minimalist header provides the links to the core areas of the website while hamburger menu hides the extended catalog. Moreover, here designer tried a creative experiment: this concept applies design techniques traditional in e-commerce for fashion but the type of goods is very different – they are for eating and cooking.

 

Bookshop Website

 

online_bookshop_website_design_tubik

 

The famous author Stephen King once said: “Books are a uniquely portable magic” and numerous generations of readers prove it all the time. More and more people now use the Internet as the source to both learn about books and buy them. To support this direction of e-commerce, here’s the design concept for an online bookshop Book Pitch. The interface uses light and airy background and includes several theme blogs showing news, bestsellers, categories of items and reviews from readers. The visual presentation is strengthened with slight scroll animation.

 

bookshop website animation

 

Landing page for selling exhibition tickets

 

museum website

 

Although the sphere of art doesn’t look directly linked to e-commerce, the connection really exists: more and more users are buying and booking tickets online. Here’s the interface for this service — a landing page promoting an art exhibition. The idea behind it was to make this sort of informative promotion aesthetic and unobtrusive for the user as well as highly informative. It applies the horizontal scroll with the smooth animation of cards presenting key exhibits, shows the locations and dates and prominent call-to-action for buying a ticket.

 

Landing page for an online travel gear store

 

Travel Gear Landing page by TUBIK

 

Here is the layout of a landing page: the company presented by it sells gear for extreme sports and active traveling so images were selected to set immediate understanding of the main theme. The page includes the general description of the shop, presents the ability of transition to the catalog via the description of hot offers and also has testimonials part to provide users’ opinion about the service.

 

Website for a bakery

 

Bakery website design case study tubik

 

Another example the concept of a bakery website for which we presented the full design case study here before. Here is the animated version featuring interactions with the website: home page, catalog the f offers and the page presenting a particular position. The designer followed the philosophy of minimalism which is user-friendly, attractive and informative. Dark background supports the brand image with the idea of the elite and exclusive offer as well as set the ground for sophisticated presentation of the sold items.

 

Randomizer for the online furniture store

 

tubik studio design UI

 

Here’s the concept of a randomizer that allows users to choose between many options of designer chairs in this case. However, the idea can be applied to any e-commerce digital product. This is a helpful thing as usually we don’t know what we want until we see it. Minimal and bold color palette and prominent item images make the interface helpful and intuitive for users.

 

Landing page for online farm grocery

 

Landing Page Animation Tubik Studio

 

As a famous writer George Bernard Shaw once said, there is no sincerer love than the love of food. This one is a landing page whose aim is to promote the shop of organic food. It is composed of several blocks presenting the products, highlighting some important aspects of service, call to actions and testimonials.

 

Website for the fashionable clothes shop

 

fashion clothes ecommerce website

 

Another example of design for e-commerce presents the layout of a catalog page for the website of a company selling fashionable clothes for women. The header includes the links to the global categories of the clothes and the page features the fresh arrivals with photos on models, pricing, and brief item description.

 

Useful articles

 

If you want to go deeper into the theme of design for e-commerce and learn more about strategies, principles, terms and practical cases, this set of articles can be helpful

Hit the Spot: Design Strategies for Profitable Landing Pages.

UX Design for E-Commerce: Principles and Strategies.

Business-Oriented Design. Know Your Target.

Case Study: Vinny’s Bakery. UI Design for E-Commerce.

Short but Vital. Key Abbreviations in Design for Business.

Business Terms in Design for E-Commerce. Sales Basics

Landing Page. Direct Flight to High Conversion.

Case Study: Saily App. Designing C2C E-Commerce App.


Welcome to see the designs by Tubik Studio on Dribbble and Behance

Welcome to read or download free e-books about Design for Business and Problem-Solving Web Design

bright_vibe_calendar_app_ui_tubik

Mobile Typography: 8 Steps Toward Powerful UI.

Mobile design heavily depends on every detail it consists of. Screens are quite small so designers need to choose elements thoughtfully trying not to overload user interface. Such a peculiarity makes typography creation for a mobile rather tough task. Mobile typography requires deep attention to the details from an appropriate kind of fonts to compelling tracking and alignment.

 

No matter how challenging it sounds, designers strive to build effective mobile design because smartphones are a huge part of our life. The article describes essential principles for compelling mobile typography.

 

tubikstudio ui app design

 

High level of legibility

 

Legibility is called a level of how distinguishable and recognizable the words and characters are in a text. The major objective of powerful typography is clear text which users perceive without efforts. Small screens and ambient light of mobile devices may become a problem on the way to creating legible typography. To avoid problems with legibility, designers need to consider all the factors influencing clarity of text.

 

Font size

 

In terms of mobile typography, the size does really matter. Some may think that on small screens tiny fonts will work best. It’s a misbelief. Small fonts on a bright mobile screen can make user’s eyes hurt from tension and bring a headache. Of course, modern devices allow screen zooming still it’s not always convenient for users to spare an unnecessary effort. Fonts in mobile UI should be big enough for users to read easily but not too big to save typographic hierarchy. The appropriate font size is a key to pleasing UX.

 

Leading

 

As we’ve mentioned in our previous article, leading is the spacing between the baselines of copy. In a mobile interface, leading is usually smaller compared to a desktop version. Wide leading may ruin the visual unity of text while too short space makes it badly legible. If a leading is done right, readers go fast from one text line to another and big pieces of copy become legible.

 

todo list UI app tubik studio

To-Do List App

 

Line length

 

To make body copy comfortable for reading in mobile interface, designers consider all the parameters including length of text lines. Optimal line length for a desktop screen won’t work same for mobile. Too long lines would go beyond screen borders, that is why designers are recommended to keep the number of character per line within 30-40.

 

White space

 

When design elements are tightly gathered in a bunch, the user interface looks messy and navigation is rather difficult. Designers need to give elements space to breathe bringing a relief to users’ eyes and mind. The size of mobile screens doesn’t allow using much of white space that’s why a balance between the elements has to be found.

 

UI animation wine app

Wine Year App

 

Fewer levels of hierarchy

 

Visual hierarchy is applied to organize content in interfaces clearly so that users could distinguish layout objects on the basis of their physical differences, such as size, color, contrast, alignment etc. Hierarchy divides content into levels assisting users to learn copy content gradually step by step without effort and get oriented in the digital product.

 

Web design usually contains three levels of copy content which include such elements as headings, subheaders, body copy, CTA buttons, and captions. However, small mobile screens don’t provide enough space for three levels, so designers apply only two. Elements of a secondary level such as subheaders step aside to make UI look clean.

 

mobile app design tubik studio

Moneywise App

 

Simplicity of fonts

 

A key feature of effective mobile UI is simplicity. Design should be clear and the navigation easy to use, so font choices have to be based on the requirements. First of all, it is recommended to keep a number of fonts within two or three to make text look solid. Designers often stop their choice on two types of fonts for mobile interfaces because it requires fewer levels of hierarchy than web design.

 

Moreover, kinds of fonts should also fit a simple and clean style. Novelty and decorative fonts may look illegible on small screens. Designers regularly combine a serif and a sans-serif fonts to create enough contrast of copy elements in the layout. In addition, it’s good to reduce effects like a shadow for mobile fonts. On desktop screens, they may work nice but will make small mobile screens look overloaded.

 

book swap app interaction design

Book Swap Interactions

 

Delicate contrast

 

Contrast is an efficient tool for designers. It helps highlight vital UI elements as well as contribute a desirable level of text legibility. However, speaking of mobile interfaces, contrast may play a bad joke. Small screens, ambient light, and short fonts make a contrast image look unpleasant for users’ eyes. Reducing contrast between the background and copy elements, designers help users feel comfortable while reading text on a mobile screen.

 

Contrast can be created not only via colors but with sizes of fonts to set visual hierarchy. Nevertheless, mobile interfaces are short of space for giant headings, that’s why size contrast should be also reduced.

 

jewellery ecommerce app

Jewellery E-Commerce App

 

Responsive typography

 

People surf the Internet via all devices available today. That’s why responsive design is a key condition for a successful digital product. Typography is a vital part of design responsiveness. Wrong size, width, and placement of fonts have a big impact on a whole composition. Even the most insignificant changes may break the balance between all design elements.

 

Creating typography for a digital product, designers need to consider how it will look on different devices. Planning such things forehead helps to avoid unnecessary problems in the future.

 

cinema app interaction ui animation

Cinema App

 

Prioritized content

 

To make mobile interfaces simple and useful, designers need to take care of the wise content organization. Users want to have a fast access to information they are looking for and mobile screens can make the process complicated.

 

Mobile UI has no room for unnecessary copy elements. There should be only essential content thoughtfully prioritized. Based on users’ needs and preferences, designers set a structure assisting people to navigate within the product and find what they are searching for. Text elements are prioritized by size changes as well as different width or kind of font.

 

tubik_studio_book_swap

Book App

 

Clear text rags

 

Depending on the type of a product, designers apply appropriate alignment for text blocks. It can be placed on the left, on the right, centrally or it can be justified. However, speaking of mobile design many experts often stop their choice on left side alignment. This kind forms text where the beginning of each line is placed equally and the rags look similar to stairways. Such a structure helps users easily go from one text line to another and scan text fast and easily. If body copy alignment is justified (text lines placed equally), it has no rags either side. The text with such structure is difficult to scan on a mobile screen.

 

tubik studio healthy food animation

Healthy Food App

 

Functional typography

 

While computer users do the clicks and scrolling to interact with products, mobile screens should provide much more functionality. There are many text elements in mobile interfaces that allow users to accomplish certain actions like buying a product, making a call, going to a website and others.

 

Designers need to make sure users understand how the text elements work and enable them to complete the actions. Functional typography should be highlighted among the other and clickable elements should be big enough to tap on them.

 

menu_interactions_ui_animation_tubik

Menu Interactions

 

Things to jot down

 

Minimalism. Mobile screens are short of space, so try not to overload it. Simple fonts, clean style, and a minimum of elements will do their job.

Test the smallest first. Mobile devices have various sizes but the biggest problem is the smallest. Create your design based on how it will look on the tiny screens first. When it’s ready, you can easily adapt it for the bigger sizes.

Avoid decorative and cursive fonts. They don’t render properly on the small screens. Moreover, decorative fonts overload interface with unnecessary details.

Legibility first. Of course, it’s good to make beautiful catchy UI but sometimes all the colors, contrast, original fonts may hurt the legibility of copy content. A good looking text is not enough. Make sure it is legible otherwise users won’t be able to read information and use your product properly.
jewellery ecommerce app UI

Jewellery App

 

Every mobile UI design project is an interesting challenge. Meet it with the knowledge and the results will please you.

 

Recommended reading

 

Meaningful Mobile Typography by UXPin group

 

Mobile UI Design: 15 Basic Types of Screens.

 

7 Simple Rules for Mobile Typography

 

Typography in UI: Guide for Beginners


Welcome to see the designs by Tubik Studio on Dribbble and Behance

dance academy landing page design

Hit the Spot: Design Strategies for Profitable Landing Pages.

Every traveler knows it’s hard to find more annoying and upsetting experience than landing in the wrong place. It wastes the precious time and effort on looking for the needed spot right when you are full of nice expectations and ready for the best. No wonder, this story isn’t different when users go to the virtual journey around the Internet, especially having particular goals and destinations in mind. So, today let’s discuss how to make their landing soft and effective.

 

Definition of a landing page

 

In general terms, the phrase «landing page» was created by analogy with a landing spot in the physical world: in the web, it initially marked any page on which the user «landed» while surfing the Net and started their journey around the website. The phrase is still used in this meaning in terms of web analytics. However, more specific understanding of this term has become increasingly popular and widely used by not only designers but also marketing specialists. Today the term is used for a web page designed with a focus on specific relatively narrow goal and a quick way of accomplishing a particular action.

 

As for the goals, they can be different, still, the biggest diversity of landings is found in e-commerce sphere. This is the field in which they play the great role both for users and stakeholders, presenting the specific commercial offers without distraction in a helpful and attractive way. Creating special pages for every case means giving users directions, which is especially useful for big e-commerce platforms with hundreds or even thousands of items. Directing all the traffic to the home page in the case of such websites can open the big gate to poor user experience, especially when users come from particular marketing campaigns in outer resources. The risk is high that they will get lost immediately in the overwhelming amount of content and links on the home page or their attention will be driven away so the purchase won’t be finalized.

 

Furthermore, there are also many other cases beyond e-commerce when landing pages present a good point to consider: they can present the mobile applications or educational resources, promote events and meetings, make the announcements, introduce the communities or just share information. Anyway, the design process for any landing page starts from setting the clear and concise aim which should be achieved with its help.

 

tubikstudio ui design dark background

 

Conversion as a key metric

 

One of the core characteristics measuring the efficiency of a landing page is conversion. In basic terms, it is the outcome, the achieved goal which is set for the landing page. Conversion is the transformation of passive users into active, from reading, considering, watching and comparing to actual buying, downloading, trying, subscribing etc. Measuring conversions and improving landing pages to get this rate higher is the way to problem-solving design helping users and supporting business strategies.

 

As e-commerce presents the highest diversity of landing pages now, the most frequent way of conversion is the actual purchase while the most popular call to action is «Buy». However, the presence of the Internet in human life is growing constantly an plays a significant part in daily operations on professional and personal levels. On that ground, the variety of conversions also reflects diverse goals — except buying something, users can be called to:

 

— download the mobile application

— read more about the presented issue

— subscribe to updates

— download a free ebook, templates, graphics or other deliverables

— start the free or discounted trial of the product

— leave the comment or share the opinion

— share the information with friends and followers in social networks

— browse the educational or informational resource

— fill in the form or survey etc.

 

Obviously, conversion as the finalized action the user is navigated to is not the only function of a landing page: it is also effective as a general supporter of brand awareness and recognizability, due to the original design or special features it can even be a part of viral marketing campaign. Still, the most important outcome of all the effort invested into its creation and maintenance is ultimately measured via conversion rate, with the number of users who actually did the action they were called to.

 

UX design process tubik

 

Design strategies

 

No doubt, all the design projects are highly individual and require solutions based on the specific case. Nevertheless, on the basis of our diverse creative practice, we have collected the set of general ideas useful for work on efficient landing pages.

 

Clear goal and structure

 

The core difference between the home page of a website and the landing page with the specific offer is in their strategic use. The home page sets the global point of departure enabling the user to take a variety of routes around the website, while the landing page is focused on one particular aim which should be effectively presented and easily achievable. Therefore, the first step at designing converting page is setting this particular goal and building the page architecture which will navigate the users to the ways of achieving it.

 

Targeting

 

In the article about business-oriented design, we defined targeting as the strategy and techniques of researching the particular target audience to find the best and the shortest ways to attract their attention to the specific product or offer.  A landing page is the effective marketing tool when it’s based on the needs, preferences, and expectations of the target audience. Even more, these web pages allow companies to set multiple landing spots for various target users on the basis of:

— geographic targeting

— gender targeting

— psychographic targeting

— demographic targeting

— behavioral targeting.

 

There are many practical cases when companies changed some parts of the products, their names or even set the new brands to sell successfully in different countries with the diverse cultural background. The same can be done with landing pages:  for example, the page offering the same smartphone can look and talk differently to the users from different countries, taking into account their perception of colors, copy, priorities in product features and trends on the local markets.

 

gym landing page concept by Tubik

Gym Landing Page

 

Functional minimalism

Getting back to the metaphor with the physical landing of an aircraft, it’s hard to imagine how it could safely land on the place which is heavily stuffed. For soft landing, a clear spacious spot is a vital condition. For landing page, it works the same way: attempts to overload it with everything bring to a negative result. In most cases, minimalist design based on core functionality and visual elements easily navigating the user to the CTA proves itself a good approach.

 

Maximum attention ratio

Attention ratio is the level of concentration on a particular task or goal. No need to explain that for a landing page is should be as high as possible. Too many elements of interaction will provoke distraction lowering the chances of conversion: the more options users have simultaneously, the harder it is to make the choice.

 

Instantly visible call-to-action elements

CTA or call-to-action element presents the most valuable interaction element of a landing page as it is actually the spot where conversion happens. It should be instantly visible, which can be done via color or shape contrast, and informative, which is usually achieved with proper copy or icon, or both.

Tubik studio UI animation

Museu landing page 

 

Harmonic color palette

Colors and shades chosen for a landing page are not objects of designer’s creative self-expression: they are as much influencing the conversion rate as any other design element and sometimes even more than others. It’s not just aesthetic satisfaction which users can feel seeing the presentation but also the hidden message which can be transferred via traditional associations in color perception. So, colors should present the combination pleasant for user’s eye, emotionally appealing for the target audience and establishing the effective visual hierarchy of the layout.

 

Corresponding typography and good readability

As well as colors, fonts also tell much not only with the copy hidden behind them but also with associations and emotions they bring out. Typographic hierarchy and well-balanced font combinations have a big impact on the readability of the page which can directly influence the conversion rate. Landing page is not the spot on which users are ready to spend much time so poor readability can drive them away before they make a decision or understand if the offer corresponds to their needs. Being an integral part of the general stylistic concept, appropriate fonts can also contribute much into effective visual performance catching users’ attention.

 

Strong and consistent branding

Landing pages are widely used as the part of web marketing strategy so they should support the general scheme of brand promotion. Coming from outer resources, social networks, advertisements, users need to feel and see the consistency of brand image to be ready to trust it. So, identity elements like logo, slogan, mascots, corporate fonts and colors should be taken into account.

website design for photographers

Photography Workshops landing page

 

Prominent theme image

No secret, most users are visually driven and they scan the web page in a couple of seconds perceiving images much faster than copy. An appropriate theme image, be it a hero banner, original illustration, high-quality photo presenting a product or service, is a good way to attract users and get them interested as well as inform about the nature of the promoted offer. Images of this kind save users’ time, send them a quick and appealing message and add much into aesthetic side of the presentation.

 

Engaging and attractive scroll animation

Although there is a big army of those who find animation an unnecessary feature overloading user interface and making it more complicated, most users expect motion as an integral part of interaction experience. Scroll animation applied wisely can add life and style to the landing page and become another attractive feature stimulating positive emotions. Also, motion creates the feeling of one integral smooth interaction with a whole page rather than several separate parts. 

 

dance academy landing page animation

Dance Academy landing page

 

Visual hierarchy of copy content

Copy content is another aspect which has to be well-thought. A designer’s task here is to think about edible copy presentation framed into a clear visual hierarchy: sizes and placement of copy blocks, instantly scanned headlines and short concise call-to-action elements directly influence the level of conversions. The length of copy on landing pages is a debatable issue: focused goals behind the landing page doesn’t always mean that each time it should contain a minimal number of words. If it presents a famous company product or service or informs about special offers, short and strong copy can be enough to encourage users. However, if a new unknown product or service is presented, it is often useful to provide users with more information persuading them to follow the call to action. Anyway, the presentation of the copy has to be designed for good readability and scannability of the page.

 

No information overloading

Based on the previous points, creative team working on a landing page — designers, copywriters, marketing specialists etc. — should agree upon the priorities and define the core benefits users must see. Trying to overload the page with all the possible data about the offer, you risk overwhelming them so much that they can start hesitating or even get annoyed. Core information fields included in the landing page usually cover:

— the general introduction of the presented offer

— concise and informative description of the benefits solving user’s problems

— testimonials and signs of trust

— clear call to action.

 

If the offer is quite complex and it’s hard to describe all its benefits shortly, the good solution can be found in dividing the page into several theme blocks with separate interactive elements ( buttons, fields, links etc) enabling users to get further information or help quickly but on the other page.

landing page animation Tubik studio

magic.co landing page

 

Promotional video

In one of our recent posts, we have given insights on the benefits of short promotional videos for the presentation of products and services. The big advantage of this technique is the high speed of perception, emotional feedback and big informative potential of the video in comparison with copy. On the other hand, creating the video can be more time-consuming and require the bigger budget, so the efficiency of this element should be analyzed in business perspective to see if it’s really profitable for every particular case. 

 

High loading speed

None of the mentioned strategies will work properly if technical side of the interaction is neglected. Whatever stylish, sophisticated and informative is the landing page, it won’t make users put up with waiting while it’s loading. The matter here is really in short seconds, without any exaggeration. So, optimization of the images, thoughtful technical realization of motion effects, quickly loading video and fast transitions if they are applied — all of these and similar factors can have a crucial effect on conversion rates. Respect the users’ time otherwise they won’t be quick to trust you.

 

free design books landing page

Tubik Magazine landing page

 

Obviously, the presented list doesn’t mean that all the mentioned strategies should be applied together on every page. Each project demands individual approach based on rigorous analysis of the target user expectations, needs, and preferences combined with business goals. When the page is live, A/B testing and analysis of real interactions open the new perspectives and prove if designer’s initial decisions were appropriate for the established aim.

 

Landing page vs Home page

 

Should all the traffic from outer sources be directed to a home page or landing pages? We have already shared our ideas with the set of strategies for home page design. The answer considerably depends on the nature and complexity of the website. The issue to consider is the user attention and its concentration on definite areas of the websites in terms of solving a particular problem or satisfying particular needs.

 

For simple one-page websites this question is not actual: indeed, they represent only a home page which satisfies one or multiple functions and there is no other place where the traffic could be directed from the outer sources. The same happens if the website is not complex, home page in not overloaded with diverse links and navigation elements, so conversion can be reached right from the home page while other pages play secondary roles. In this case directing all the traffic to the most informative part of the site, which also enables a user to accomplish necessary action and get what they need, is a good idea.

 

However, for complex websites and platforms, especially if they satisfy multiple needs of broad target audience, this approach can be the step killing profitability and reducing conversion rates. The user can get scared, distracted or even annoyed with the tons of information they have to get through to find what they need, especially if the needs or wishes are focused on a particular narrow goal. Using landing pages in the case when you need to concentrate user’s attention on something important, to make it noticeable and easily available can be the efficient way of solving this problem. A landing page is a tool to emphasize one item, to make it quickly found and reduce delays in cases when target user seeks for specific operations, services or items. This is the issue of especially high importance in the case of e-commerce websites when unwise design solutions bring to poor user experience and financial losses. The choice of a profitable approach in every case should be based on user research and then thorough user testing.

 

big city guide web ui design

Big City Guide landing page

 

Recommended materials

 

Diverse issues of applying landing pages have been an object of professionals’ attention. In terms of design issues, here’s the bunch of articles for those who would like to continue the topic exploration:

 

Landing Page Optimization: The Definitive Guide to Testing and Tuning for Conversions

 

Landing Page Conversion Course (9 parts)

 

Classic landing page mistakes you’re probably still making

 

Landing Page. Direct Flight to High Conversion.

 

The ultimate guide to designing landing pages that convert

 

What Happens When You Analyze 100 Landing Page Examples?

 

10 Key Landing Page Features That Draw in Prospects

 

7 Landing Page Call-to-Action Formulas for Higher Conversions

 

Want Conversions? Start with User-Friendly, Useful Landing Pages


Welcome to see the designs by Tubik Studio on Dribbble and Behance

Welcome to read or download free e-books about Design for Business and Problem-Solving Web Design