Tag Archives: branding

Articles about the design of brand identity for companies and product, integration of branding elements into web and mobile user interfaces, creating logos and mascots.

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 Aarron 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

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

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, homepage 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

UI icons in interface design tubik blog

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

Icons in user interfaces are the elements that cannot be overestimated. Small and meaningful, they solve numerous problems. They become little keys to usability and intuitive navigation. And only designers know how much time and effort is needed to make them simple, helpful and expressive.

 

Guru of user experience design Steve  Jobs said: «Details matter, it’s worth waiting to get it right.» Obviously, icons are on the top of details making interface usable and navigable. So, today let’s discuss what are their types and how they can be used in interfaces.

 

Definition

 

In general terms, 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.

 

Diving into the benefits of icons, one of the most important among them is the ability to replace the text. In one of our earlier articles, we gave details about the relations of copy and icons and their influence on usability. The process of the research showed that usage of recognizable and clear icons had a great potential in strengthening navigation as most people perceive images faster than words. However, even the slightest misperception 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.

 

weather app design UI

 

History

 

Obviously, icons weren’t invented by interface designers. As an object of communication, they have a long and diverse history rooting in ancient times. They are found in maps, signs, schemes, manuals and many other sources of information. However, with the advent of new technologies and graphical user interfaces, icons experienced the new twist of progress. Historically, Xerox is mentioned in credits for creating the first icons for a graphical UI in the early 1970s: the icons were implemented in a machine called Xerox Alto which was very expensive and didn’t really go to the wide masses. Still, that was a beginning of a long story: in 1981, Xerox Star was released and it’s referred to as the first consumer computer which used icons as a part of its interface. In particular, it applied the icons of folders and trash bins which have been used so far.

 

icons xerox star

Source

 

Another milestone easily remembered on this way is presented with the color icons Apple revealed first in 1991 and then later with their further updates for Macintosh. They featured another approach to the style when icons combined functionality and informative capacity with attractive and harmonic appearance.

 

icons apple machintosh

Source

 

These days icons are presented in digital design with numerous packs and sets in all the themes and styles possible. Although there are many ready-made packs, the database of icons is growing all the time in search of new solutions appealing to users.

 

Talking about the classification of icons, we can mark out several aspects of grouping them on types.

 

Types based on functions

 

Clarifying icons

These are the icons aimed at explanation. They are visual markers explaining particular features or marking out categories of content. In some cases, they are not the layout elements of direct interaction; also, you can often find them in combination with copy supporting their meaning. This trick activates multiple elements of perception in one interaction providing better recognizability for call-to-action elements. People, who instantly understand the symbol transferred with the icon, won’t pay big attention to the copy. The same will happen to those who have problems with fast copy recognition. However, using the copy together with the icon decreases the risk of misunderstanding or wrong interactions for people who can possibly misinterpret the meaning of the image.

 

Homey app smart home UI

Homey App

 

saily app UI design

Category icons for Saily app

 

Interactive icons

The icons of this type are directly involved into interaction process and are the core supporters of navigation. They are clickable or tappable and respond to the users request doing the action symbolized by them. Their main goal is to inform users about the functions or features behind the buttons, controls and any other elements of interaction.

 

tubik studio tapbar ui

Tab Bar interactions

 

ui concept animation tubik studio

Menu interaction concept

 

Decorative and entertaining icons

 

The icons of this type give more about aesthetic appeal than functionality. However, this aspect is also significant and needs to be considered as the style and appearance corresponding to the target audience preferences and expectations set the solid ground for high desirability. Applied wisely, it is one of the features that can not only attract but also retain users and add much to the positive user experience. Decorative icons are often used to present seasonal features and special offers.

easter icons tubik studio

Easter and spring themed icons 

 

App icons

 

App icons are the interactive brand signs that present the application on different platforms supporting the original identity of the digital product. In most cases, it features the logo of the app designed according to the requirements set for this kind of icons. However, it also can apply something else, for example, a mascot or an abstract combination of corporate colors. The effective solution is usually based on thorough market and competition research with the aim of creating an original icon which won’t get lost on the screen full of other app icons.

 

logo design by Tubik studio

Elephun App Icon

 

Favicon

 

Favicon, also known as URL icon or bookmark icon, is a special type of symbol which 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. This interface element proved itself effective for productive website promotion and good recognizability of its visual identity.

 

Types based on visual performance

 

Glyph icons

 
The term “glyph”[glif] has come to design from the field of typography. The word takes its roots from the Greek word which means “carving”. Originally, the term presents an elements symbols or pictogram which is included in the set of symbols agreed upon many users (readers, writers etc.): it presents a readable character enabling people to write it.

 

In the sphere of typography, it is a certain graphic representation of an element of written language within a particular system of writing or particular typeface: it can be a grapheme, or part of a grapheme, or sometimes several graphemes in combination (a composed glyph). Here’s the set of ancient Celtic glyphs, for example.

 

pictish_rune_meanings

Source

 
In modern digital design, the word “glyph” reinvented its meaning but not into a sort of revolution. It is used to define a graphic symbol that provides the appearance or form for a character: it can be an alphabetic or numeric font as well as a symbol picturing an encoded character. Talking about icons, glyph icons are first of all described as a typographic symbol that represents something else, not letter or number. Among popular examples, you will also find the «@» symbol representing the preposition «at». For example, here is the set of icons for material design from Google.

 

material icons

Material icons

 

Glyph icons use simplified and universal shapes and images to be recognizable and flexible in terms of responsive design. They play the big role in the issues of navigation for a digital product.

 

weather_icons tubik studio

Weather icons

 

Flat and semi-flat icons

 

Flat icons are usually a bit more complex than glyph: they can apply color combinations, filling of the elements and present a bit more complicated images. Nevertheless, they are also focused on simple and recognizable visual metaphors quickly transferring the required meaning. The most prominent feature which actually has inspired the name of this direction is applying flat 2-dimensional visual details as the opposite to highly realistic and detailed skeuomorphic images. Flat style allows designers to be more flexible in applying the expressive power of colors and shapes not losing in legibility of the presented items.

 

tubik studio blog app

Blog App

 

Skeuomorphic icons

 

Skeuomorphism is the design direction somehow opposite to flat. It is based on the idea of reflecting images in 3D look very close to the original natural look of the physical objects. It was popular for GUI of different types and functionality several years ago. But then it was gradually replaced with flat design in UI which is simpler and therefore more flexible and practical for the needs of digital interfaces. Nevertheless, the skeuomorphic icons are still widely used in game design and app icons in game sector.

 

SVG icons

 

SVG icons, decoded as Scalable Vector Graphics, are responsive icons built on XML-based 2D vector images. They are designed and integrated according to an open standard developed by the World Wide Web Consortium (W3C) since 1999, and supported by all major browsers. SVG icons are growing their popularity as today websites are used on the diversity of platforms and devices and need to be responsive to provide positive UX.

 

Types based on applied image metaphor

 

This direction of icons typology is based on the research provided by the famous expert in usability Jackob Nielsen and revealed in his article for Nielsen Norman Group. In this perspective, icons can be divided into three core types according to the type of the metaphor they reflect.

 

Resemblance icons are the symbols directly depicting a physical object the icon represents. These are, for example, the magnifier for search, the shopping cart, the envelope for mail etc.

 

Reference icons are the symbols depicting an object on the basis of analogy. For instance, a picture of a clamp representing a file-compression utility (because it squeezes) goes to this group.

 

Arbitrary icons are the symbols which currently do not set direct connections with the objects and their recognizability is based on convention and power of habit. This is when we should remember about floppy disc representing «Save» function: although initially it was a reference icon, for many users now it doesn’t work like that — they just know the meaning solidly connected to this image for many years.

 

multimedia icons tubik studio

Multimedia Icon Set

 

Key features of effective icons

 

In one of our previous articles devoted to the role of icons in user interfaces, we have already described all the essential features making the icons efficient, so today let’s just quickly recall them.

  • clear — the meaning of the icon is understandable and accessible to the target audience
  • meaningful — the icon transfers the informative value
  • recognizable — the visual symbol applied in the icon is presented in the form which can be recognized and decoded correctly by users
  • simple — the icon isn’t overloaded with non-essential graphic elements which allows it to be quickly perceived and understood without too much effort
  • original and noticeable — the icon stands out among other similar elements of the interface which is especially actual for the app icons
  • scalable and flexible — the icon saves its unity, integrity, and legibility in different sizes and resolutions
  • attractive — the icon satisfies aesthetic expectations and sets harmonic visual appeal
  • non-offensive — the icon doesn’t have hidden meanings or misperceptions which could feel offensive or rude for any part of the target audience
  • consistent — the icon corresponds to the general stylistic concept of the layout it is applied for.

 

Icons in UI tubikstudio

 

Recommended reading

 

Here is a bunch of articles for further exploration of the topic:

 

Icon Classification: Resemblance, Reference, and Arbitrary Icons

A Brief History of the Origin of the Computer Icon

Iconic Simplicity. The Vital Role of Icons.

Visual Perception: Icons VS Copy in UI.

How to Combine Icons from Different Sets in Your UI


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

tubik free podcast design business terms

Tubik Podcast #6. Design for E-Commerce.

These days e-commerce is evolving by leaps and bounds presenting new interesting challenges to designers of user interfaces. Websites and mobile applications enabling users to buy and sell need constant attention and improvement to correspond to the current concerns. Today we have prepared a new episode for the listeners of Tubik Podcast, the series of free audio talks devoted to various aspects of design. In this episode, we’ll consider the strategies and practices of UX design for e-commerce. Welcome to listen and follow the updates!

 

If you want to get the set of episodes devoted to the theme of business terms and processes in the design aspect, subscribe here and get them right into your inbox.

 

You can check more details in the article devoted to targeting applied in design projects. Also, to learn more and see practical case studies, welcome to read or download our free ebooks. Stay tuned!