Tag Archives: web design

Articles about UI, UX, graphic design for websites, user interfaces, animation, design strategies for web pages and interactions, design tools, tips and resources.

tips on visual hierarchy in design

9 Effective Tips on Visual Hierarchy

Sufficient visual hierarchy is a foundation of a successful digital product. It helps to organize UI elements in an effective way so that content would be easy to comprehend and pleasant to see. The presentation of visual elements has a great impact on user experience. If the components are organized wisely, users navigate and interact with a product without efforts and enjoy the process.

 

So, what makes powerful visual hierarchy? Of course, different kinds of products require different methods of building it still there are some common solutions helpful for UI content organization. Today’s article provides useful tips on creating the compelling visual hierarchy for web and mobile products.

 

Keep business goals in mind

 

There are often business goals standing behind a digital product. To achieve them, creative team needs to work out which UI elements are more important and prioritize them according to their roles. For example, all the elements on e-commerce websites perform the tasks of various levels. The item images are usually the main eye-catchers since they have to encourage customers to consider it. A heading goes after the image explaining what it is and the next important stage is a CTA button calling people to buy an item. By considering business and marketing goals set for the website or app, the creative team can effectively prioritize visual content and make a product stand out the crowd.

 

design agency landing page

Design Agency Landing Page

 

Consider scanning patterns

 

In our previous articles, we mentioned that before reading a web page people scan it to get a sense of whether they are interested. Different studies, including the ones by Nielsen Norman Group , have revealed several popular scanning patterns among which “F” and “Z”-shaped.

 

F-pattern appears mainly on digital pages or screens with the big amount of content such as blogs, news platforms etc. Users’ eyes move in F-shape: first, they scan a horizontal line on the top of the screen, then move down the page a bit and read across the shorter horizontal line, finishing with the vertical line down on the left side of the copy where people look for keywords in the paragraphs’ initial sentences.

 

Z-shaped pattern takes place on the pages which are not so heavily concentrated on copy or those which don’t require scrolling down. The pattern is the following: people first scan across the head of the page starting from the top left corner, searching for core information, and then go down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page from its left to right.

 

Knowing these patterns designers organize content putting all the core UI elements on the most scanned spots to draw users’ attention.

 

Functionality first

 

The visual hierarchy may seem to be oriented only to the aesthetic aspects but it’s not like that. First of all, by structuring and organizing visual elements designers need to make sure a product is clear to use and the navigation works right. The visual hierarchy which is built exceptionally on aesthetics can’t work effectively. User interface with the badly structured content leads to the bad UX. So, while building visual hierarchy designers need to consider what functions of UI elements and a role they play in the navigation process.

 

landing page UI design tubik studio

Seafood Recipes Landing Page

 

White space is a visual element

 

White space, or negative space, is not just an area between design elements, it is actually a core component of each visual composition. It is a tool able to make all the user interface elements noticeable to users’ eyes. Designers can group or separate UI components so that they could create the effective layout. Moreover, negative space helps to emphasize particular elements which require deep attention from users. White space is an effective instrument for creating visual hierarchy so designers need to work on its balanced usage.

 

landing page web design

Colony Landing Page

 

Apply the golden ratio

 

We devoted one of our latest articles to the golden ratio applied in design. It is a mathematical proportion of the elements of different sizes which is thought to be the most aesthetically pleasing for human eyes. The proportion equals 1:1.618 and it is often illustrated with seashell-shaped spirals which many of you could have probably seen.

 

Designers often apply golden ratio at the stage of wireframing. It helps to plan a structure for the layout placing and sizing user interface elements in the right proportion which will be pleasant for users.

 

golden ratio in ui design

Tracking Widget

 

Use a grid

 

A grid is one of the key tools applied at the different stages of the creative process and visual hierarchy is not an exception. A grid helps to structure all the components and put them into the appropriate sizes and proportion. What’s more, designers can effectively work with the negative space since a grid shows if the elements are placed proportionally and even.

 

Add some colors

 

Color choice and combinations are essential for visual hierarchy as they help users to distinguish the core elements. The thing is that colors have their own hierarchy which is defined by the power of influence on users’ mind. There are bold colors such as red and orange as well as the weak ones like white and cream. Bold colors are easy to notice so designers often use them as the means of highlighting or setting contrast.

 

Moreover, applying one color to the several elements you can show that they are somehow connected. For example, you can choose a red color for purchase buttons so that people could intuitively find them when they need.

 

financial_service_website_tubik

Financial Service Website

 

Pay attention to the fonts

 

Visual hierarchy includes a core subsection called typographic hierarchy which aims at modifying and combining fonts to build the contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The fonts can be transformed by regulating sizes, colors, and families as well as their alignment. Different fonts can divide copy content into different levels so that users could perceive the information gradually. However, designers are recommended to keep the number of fonts within three since too many fonts look messy and make the design inconsistent.

 

Three levels for web, two for mobile

 

As we mentioned above, different fonts form typographic levels which consist of such elements as headlines, subheaders, body copy, call-to-action elements, and captions. There are three typographic levels: primary, secondary, and tertiary. The first one includes the biggest type and aims at drawing people’s attention to the core information on the screen. The next level provides copy elements which are easily scanned and help users navigate through the content. The tertiary level usually applies body text and some additional data which is presented via relatively small type.

 

In many cases, web products include all three levels since they are more likely to provide the big amount of content. On the other hand, designers are recommended to keep the number of layers within two while creating typography for mobile. The small screens don’t provide enough space for three levels so the elements of a secondary level such as subheaders have to step aside to make mobile UI look clean.

 

UI animation wine app

WineYard App

 

Effective visual hierarchy is not only about aesthetics. It aims at providing problem-solving navigation and interaction systems as well as friendly user experience. To create a sufficient visual hierarchy, designers need to organize all UI elements considering the functionality and business goals.

 

Useful articles

 

The topic of visual hierarchy is wide and complex, so we gathered some helpful articles revealing various aspects.

 

Visual Hierarchy: Effective UI Content Organization.

Golden Ratio. Bring Balance in UI Design.

Take It Easy: Tips for Effort-Saving User Interfaces.

Tips on Applying Copy Content in User Interfaces

Information Architecture. Basics for Designers.

Typography in UI: Guide for Beginners.

 


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

psychology of shapes in design tubik article

Knock Design Into Shape. Psychology of Shapes.

The success of any visual composition highly relates to how people perceive it. There are many factors influencing human perception and the significant part goes to psychology. In one of our articles, we’ve already discussed the role of psychological principles in design and described how useful they can be on the way to understanding users.

 

The aspect which we want to cover in today’s article is called the psychology of shapes. Let’s see what this direction studies and how it can help designers in the creative process.

 

Psychology of shapes

 

All the visual objects can be analyzed in terms of shape. For example, an average house may be perceived as a rectangle with a triangle on the top and the sun is often presented like a circle with lines around it. People may not always notice what figures and shapes surround them still they have a great impact on our consciousness and behavior. The science studying the influence of shapes on people is known as the psychology of shapes.

 

The study claims that each shape has its own meaning and influences our mind and reactions differently. There are many psychological tests which are used to define the personality or mental condition via shapes. For example, a favorite figure can tell about person’s character traits, a quickly chosen shape can show what’s on the mind.

 

Many years of research and tests have helped professionals to define what meaning each shape typically brings and how it can influence human perception. Let’s take a closer look.

 

animated tutorial

Social network tutorial animation

 

Geometric shapes meaning

 

Hearing the word shape most people think about geometric figures first. There are plenty of geometric shapes which people see daily including squares, circles, rectangles and others. But what do they mean? Let’s see.

 

Squares and Rectangles

 

These two shapes are thought to be the most commonly used. We see them many and many times per a day. The walls and furniture, books or monitors, cell phones and cameras as well as many other everyday things have square or rectangular shape. Straight lines and right angles of these two shapes give a sense of reliability and security. People strongly associate squares and rectangles with buildings the reason why they bring the feeling of trust and authority.

 

Common meanings:

  • discipline
  • strength
  • courage
  • security
  • reliability

 

tubik_photo_app

Photo App

 

Triangles

Triangle is an energetic and dynamic shape which is always associated with motion and direction. The lines are placed that way so our eyes automatically move to the top of a triangle or in the direction it is placed. Triangles can have different meanings. An upright triangle brings the feelings of stability and balance but the reversed one looks risky and ready to fall giving people a sense of tense.

 

Common meanings:

  • excitement
  • risk
  • danger
  • balance
  • stability

 

Circles, ovals, and ellipses

 

The first and foremost meaning of this shape is the eternity since they have no beginning or end. The circle has a long association with the sun and Earth as well as other cosmic objects while ellipse is similar to the whole universe. That’s why round shapes may give the feeling of magic and mystery. In addition, unlike the previous shapes circles don’t have angles so it makes them softer and milder.

 

Common meanings:

  • eternity
  • female
  • universe
  • magic
  • mystery

 

tubik_art_courses_app

Art Courses App

 

Spirals

 

These shapes can be often seen in nature, for example, shells and some flowers, the reason why it’s often associated with the circle of life and growth. Also, in some cultures, spirals may represent the knowledge or information. In modern society, they are seen as a sign of creativity and a fresh mind.

 

Common meanings:

  • growth
  • creativity
  • calmness
  • intelligence

 

Big City Guide Madrid tubik

Big City Guide

 

Natural shapes meaning

 

All the things created by mother nature have their unique shape. Leaves, flowers, trees, animals, and many other representatives of flora and fauna become the source of inspiration for artists and designers. Natural shapes have clear meanings of the plants and animals which they symbolize. They often bring the feeling of refreshment and unity with the natural environment. In addition, animals and plants can also have their own characteristics and symbols. For example, a rose is a flower of love and passion, while a lion is a symbol of pride and bravery but this is another topic to discuss.

 

Common meanings:

  • originality
  • organic
  • balance
  • refreshment

 

andre landscape tubik studio logo design

Andre landscape logo option

 

Abstract shapes meaning

 

They are usually visual symbols of abstract ideas or simplified versions of natural shapes. Some abstract shapes can be too difficult to recognize because they are stylized and only small details give a hint to what it is. One abstract shape often has both direct and figurative meanings.It is often used in graphic design, especially for logos and icons. Abstract shapes are an effective way to transfer a message quickly without text.

 

Common meanings:

  • the duality of meaning
  • uniqueness
  • elaborate.

 

wedding_theme_website_ui_design_tubik

Wedding theme

 

How designers use psychology of shapes

 

Shapes are essential elements in all design directions. They can serve as components of a visual composition as well as a content organizing tool which divides or connects design elements into groups. To make the sophisticated design, experts need to consider the meaning of shapes and the impact which they have on users’ mind.

 

Graphic designers often deal with small but meaningful elements such as logo and icons. A powerful logo needs to convey the right message which would serve as the brand voice. If the shapes are chosen appropriately for a logo, they will assist to convey the right mood without additional words. For example, in case of a logo for a financial company, one of the approaches can be applying to apply the shapes which convey the feeling of trust and balance such as square or triangle.

 

Various shapes are often found in user interfaces of digital products. They can be used as buttons or icons as well as applied to organize the content on the layout. For instance, text blocks are often gathered in a rectangular or square shape which allows users to quickly scan copy. Using different shapes designers can create effective information architecture for a product. The elements of the layout may be structured in certain shapes so that make users’ eyes easily find core information. For example, if we place the content in a triangular shape placing the vital component on its top, people’ eyes will automatically go to the peak.

web design UI concept tubik studio

The Big Landscape

 

Psychology of shapes plays a big role in typography. There is a great number of typefaces and all of them have their individual impact on visual perception. Some kinds apply round shapes as a dominant and they seem more feminine and mild unlike those with straight lines and sharp angles which are more formal and sometimes aggressive. That’s why it’s important to pay attention what shapes are dominant in a chosen font to avoid a conflict between the context and visual presentation.

 

The human mind is full of secrets and it’s often hard to predict possible reactions. However, the science of psychology helps designers be prepared and comprehend how our brain works, at least at some basic level. Knowing psychology of shapes designers are able to create proficient logos along with problem-solving user interfaces for web and mobile products.

 

Recommended reading

 

Color in Design: Influence on Users’ Actions.

Psychology in Design. Principles Helping to Understand Users.


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

ux writing tubik article

UX Writing. Let User Interface Speak.

During the last two years digital design community has been discussing a brand new trend called UX writing. The term appeared suddenly confusing many people, even some design professionals. Some think it’s a new name for UX design, others see it as copywriting related to the UX topic. In this article, we’ll figure out the meaning of UX writing and why tech world talks so much about it. Also, we’ll provide some practical tips on effective UX writing.

 

What’s UX writing?

 

The term may be new but the process has existed for a long time. UX writing is the practice of crafting copy which is directly used in user interfaces to guide users within a product and help them interact with it. The major aim of UX writing is to settle communication between users and a digital product.

 

Copy created by UX writers is also known as microcopy. The name tells for itself and stands for the small components of text which serve as hints for users. To be more specific, microcopy includes buttons and menu copy, error messages, security notes, terms and conditions, as well as any kind of instructions on product usage.

 

tubik studio page 404

Page 404

 

Why is UX writing needed?

 

Microcopy has always been a part of digital products, so why have people started to call the process of its creation UX writing? Let’s get it straight.

 

One of the first reasons leading to UX writing appearance is growing attention to the role of copy in UI. Marketing and design specialists have agreed that copy content is a significant element influencing both UI and UX. Bad-written copy can ruin even a really good-looking user interface. As for the microcopy, various user tests have shown that it affects user experience as well as the information architecture and navigation system do.

 

If we look at a product from users’ perspective, we’ll see how useful small copy hints are for them. When people start their journey in new software, short text tips make the process of adaptation fast and easy. Moreover, if menu copy is written professionally, the navigation system is much more clear to use.

 

Considering the positive impact of microcopy on user experience, the new direction appeared in copywriting. At this point, we can expand the essence of UX writing and say that it’s a process of building microcopy elements which aim at improving user experience of a website or app.

 

tutorial_design_tubik_studio

Shauts App Tutorial

 

Who has to do UX writing?

 

We defined the essence of UX writing still one question remains open. Whose duty is it?

 

The direction couldn’t be formed by itself, so, obviously, there are specialists standing behind it. A job of UX writer grows its potential and today we can see more and more offers from companies. They are writers specializing in creating microcopy which aims at boosting pleasant user experience and improving navigation system.

 

UX writing is still a green direction, the reason why the task of microcopy creation often lays upon marketers and copywriters. These professionals have been writing microcopy long before a term of UX writing appeared and they continue doing it as one of the parts of their work.

 

However, it’s not only writers who can create copy for UX. Designers also often try themselves in UX writing. They may not be the specialists in copy creation still they know everything about the information architecture and navigation system of a product. Moreover, UI/UX designers research the target audience peculiarities, so they know how to present visual information for user perception.

 

Copywriters and designers can do UX writing separately but to improve outcome it’s always a good idea to collaborate and share the experience. Together IA professionals, designers and copywriters can successfully create UX copy content and this is how it is often done by many companies today. However, if a company handles many projects which involve much of UX writing, it is reasonable to consider hiring a UX writer to gain maximum productivity for all the team.

 

gourmet_website_interactions_tubik

The Gourmet Website

 

What makes efficient UX writing

 

Some may think that UX writing takes a few minutes to be done since it includes only small pieces of text. However, creation of a powerful phrase for a CTA button sometimes can take much more time and effort than writing of a whole body copy.

 

Microcopy usually can vary from one word to short sentences which should perform numerous functions. So, if we say that in UX writing every word counts, it won’t be an hyperbola. A single word should both help users to get oriented as well as encourage them to stick around. Moreover, there is often a business goal standing behind CTA buttons, so this factor should also be considered during UX writing.

 

The sufficient UX copy needs to be clear and consistent. Users don’t have to figure out what you mean. Copy should be simple so that people could interact with product intuitively. If users don’t notice they’ve been guided, UX writing has been done well. In addition, UX writing, as any other copy content, should be based on the context and the target audience.

 

In addition, we need to say that copy is a design element the reason why its effectiveness highly depends on the visual presentation. UX writers need to make sure it looks good and fits the design composition. Such a condition creates constraints for a writer about the amount of copy and its appearance.

 

web_ui_design_tubik

Digital Agency Landing Page

 

Practical tips on UX writing

 

The experts are still working on developing the direction to set the best techniques and methods of the effective UX writing. However, there are some sufficient tips helping to make sure UX copy will work well.

 

Step into users’ shoes. If you want to create useful copy, you need to understand where users need help. User research assists to learn the target audience and knowing their specialties you can assume what hints people need.

 

Don’t use complicated vocabulary. As we said above, one of the major characteristics of effective UX writing is clarity and simplicity. Copy should be easy to perceive that’s why difficult words may not work well.

 

Write short and then cut it into half. Microcopy received its name not by coincidence. It has to be short but meaningful so that it wouldn’t draw too much attention, only slightly guiding people from one point to another.

 

Test the copy on various users. You can be a guru of writing and UX design still user testing never hurts. If you don’t have anyone who would match the target audience, at least test copy on your co-workers or friends and ask them what they feel about it.

 

Be creative. Microcopy typically includes only short informative messages but it doesn’t mean you have to make it boring. Try to be creative and bring some positive emotions. For example, writing an error message you can use some polite jokes. It breaks tension which may appear if users do something wrong and encourage them to stick around. Just remember to make sure your creativity doesn’t go too far and the target audience will react appropriately.

 

Add images. In case of error messages or onboarding instructions, it can be a good idea to supplement them with funny and pretty images. You can use photos as well as custom illustrations which will strengthen the right message of a copy.

 

Reflect brand voice. Don’t forget that instructions which a product gives to users are always perceived as a voice of a brand. So, before you write copy you need to learn about brand nature so that microcopy would sound accordingly to the brand image.

 

web design tubik studio

Page 404

 

UX writing is a new direction which is full of potential. UX professionals need to consider it as an another essential tool on the way to the improved user interaction and boosted satisfaction from a product.

 

Recommended reading

 

10 UX copywriting tips for designers

5 Ideas for Better UX Writing

UX Writing: How to do it like Google with this powerful checklist

Copywriting in UI. Words that Make Design Go Round.


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

golden ration for UI UX design article

Golden Ratio. Bring Balance in UI Design.

One of the major characteristics of effective design is a clear user interface. All the elements need to be well-balanced and placed in the harmony so that users could easily perceive the information on the screen and interact with a product without efforts.

 

To create an efficient design composition, professionals apply various techniques and methods from the art science as well as the basic mathematical theories. One of the common tools helping to build pleasing design compositions is a mathematical proportion called the golden ratio. In the article, we’ll define the essence of this technique and see how it can be used in design.

 

What’s the golden ratio?

 

Everything in the world strives to the harmony and balance. Even mother nature brings things in the forms close to the perfect. People enjoy everything which has natural touch and they always aim at implementing these patterns and forms into their outcome. In pursuit of discovering the secrets of creation, mathematicians calculated a formula which appears in the majority of things on the Earth.

 

The golden ratio is a mathematical proportion between the elements of different sizes which is thought to be the most aesthetically pleasing for human eyes. The golden ratio equals 1:1.618 and it is often illustrated with seashell-shaped spirals which you could have probably seen on the Internet.

 

golden ratio for designers

Source

 

So, how exactly the perfect asymmetry is calculated? First, you need to decide the length of the small element. Then multiply it by a golden ratio which is 1.618 and the result will be the perfect length of the bigger element.

 

Golden ratio formula for designers

Source

 

Golden ratio theory is believed to exist for more than 4000 years. Scientists discovered that the majority of the ancient buildings, as well as famous artworks, obey to the golden ratio. Leonardo Da Vinci and Salvador Dali were known as the followers of the golden ratio theory and they used it as a key tool for their amazing artworks. Today the golden ratio is applied in various fields including architecture, art, photography, and design.

 

Golden ratio in design

 

An effective composition is a core part of design. All the elements need to work together to maximize the pleasant experience. Moreover, each separate element, even the small one like an icon, has to be created in a harmony within itself. The golden ratio has a positive influence on the visual perception the reason why many graphic and UI designers apply it at their workflow.

 

Graphic designers are more keen to apply golden ratio. The thing is that the art teachers often explain the theory of golden ratio to help students figure out how to work with proportions. That’s why many designers continue to apply this tool while creating various graphics, especially for the small but meaningful design elements such as a logo.

 

Logo and icon design requires deep attention to the details. The golden ratio allows creating illustrations where each element is placed in a harmony and appropriate proportion to the others. Moreover, logo design is a heart of the brand so designers strive at presenting it in the most compelling way. Golden proportion can add aesthetic appeal to a logo and increase the popularity of the brand.

 

User interface needs to have the clear visual presentation of the components so that people could use a product without problems. The golden ratio is often applied to place UI elements effectively. First of all, it can be used at the stage of wireframing. This way you can plan a structure for the layout placing and sizing user interface components according to golden proportion. In addition, golden ratio scheme can help professionals to crop images for web design so that it could make sure the composition of the photo remains balanced.

 

graphic design golden ratio illustration

Graphic design for Opera Software promo video

 

How does golden ratio improve UI design?

 

Mathematical calculations may seem boring and time-consuming, so a question may arise if it’s worth the effort. Let’s see what golden ratio can bring into design.

 

Well-balanced content

 

Designers often face the situation when a product needs to contain a great amount of various content and each part of it is vital and cannot be replaced. To unite all the components in a pleasant composition, the golden ratio can be applied. Divide the layout into different sections using a proportion of 1:1.618 and put the content in the sectors according to their importance. Such a content composition is sufficient for users’ perception and it helps to organize all the components.

 

Effective visual hierarchy

 

Speaking of the content organization, we can’t forget about visual hierarchy. As we mentioned in our previous articles, it’s a technique of efficient structuring content components. Combining principles of these two techniques designers maximize chances of building a powerful design composition.

 

golden ratio in ui design

Tracking Widget

 

Powerful typography levels

 

To create efficient typography, designers need to divide copy content into different levels. They usually include various kinds of copy including headers, subheadings, body copy, caption etc. Applying golden ratio professionals can quickly define an appropriate proportion between the typographic levels, for example, you can choose a certain size for the header and then divide it by 1.618. The result will show you the most appropriate size for subheaders.

 

Pleasing first impression

 

When users try a product for the first time, they scan user interface to understand if they like it or not. The psychology principle known as a visceral reaction states that people decide whether they like something or not within a few seconds of looking at something. This reaction goes faster than our consciousness so we don’t even realize it. That’s is why it’s vital to make sure the first impression of a product will be pleasing. Design created by using the golden ratio has a positive influence on users’ mind and their visual perception and it works from the first sight at a product.

 

Appropriate white space

 

White space is the area between elements in a design composition. Designers always need to care about the amount of the white space in the UI since the unity of composition highly relies on it. The golden ratio can make the process of spacing much easier and faster. Applying golden proportions you will be able to define the right white space which will work well for the design.

 

golden ratio in web design

Digital Agency Landing Page

 

Design presenting the natural balance of the components cannot be unnoticed. The well-structured layout is one of the core parts of powerful UI. The golden ratio brings the harmony into design and makes the product pleasant for users. Don’t be afraid of the mathematical formula. It’s not that difficult as it may seem. Even more, the golden ratio can help creating user-friendly digital products which will combine utility and aesthetics.

 

Recommended reading

 

The Golden Ratio — Principles of form and layout

Golden Ratio in UI design

 


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

choice of color in UI design

Color Matters. 6 Tips on Choosing UI Colors.

User experience design involves many processes which need to be done thoughtfully so that an interface would meet the needs of the target audience. Each step requires deep attention to details, even if it doesn’t seem too complicated.

 

One of the time-consuming still vital stages in UI creation is color choice. Designers sometimes can spend hours to pick up the right color palette. In this article, we’ll describe six useful tips helping designers choose powerful colors for UI and make this process easier and more productive.

 

Tip 1. Learn 60–30–10 rule

 

This rule, or technique, came from the interior design, so it is often applied for house decorating. The idea is simple. To bring the balance into the composition, the colors should be combined in the proportion of 60%–30%–10%. The biggest part should go to the dominant hue, the third of the composition takes secondary color and 10% percent goes to the color which helps to make the accents.

 

Such a proportion is thought to be pleasant for human eyes since it allows perceiving all the visual elements gradually. Knowing the appropriate proportion designers can successfully combine the colors without risks of turning UI into a colorful mess.

 

web_ui_design_tubik

Digital Agency Landing Page

 

Tip 2. Contrast is a friend

 

Color contrast is a key part of any visual composition. It brings the individuality for each UI element and makes all of them noticeable. User interfaces containing only shades from the same color family have fewer chances to draw users’ attention. Moreover, copy content in this UI will look illegible which make the interactions with a product almost impossible.

 

Designers control the level of contrast depending on the goals it is supposed to accomplish. For example, if you need users to pay special attention to the specific UI elements, it’s a good idea to apply two highly contrasting colors such as blue and red. High contrast is often used for CTA buttons design.

 

However, speaking of UI as a whole composition, high level of color contrast may not always work well. If copy content and the background colors contrast each other too much, it will be difficult to read or scan the text. That’s why designers are recommended to create a mild level of contrast and apply high contrasting colors only for highlighting elements. User-testing on various devices can help designers to make sure of the effectiveness of their solutions.

 

choice of color in UI design

Urban Sketcher App

 

Tip 3. Consider psychology of colors

 

As we’ve mentioned in our previous articles, psychology is one of the basic studies helping in design workflow. There is a branch of psychology showing the influence of colors on human mood and behavior called color psychology. It states that our mind reacts on colors while we usually do not notice it. When human eyes perceive a color, our brain gives signals to the endocrine system releasing hormones responsible for the mood and emotions.

 

Each color has its own influence on our mind and the knowledge of the possible reactions can help designers to transfer the right message and call users to make the expected action. Here is a short list of color meanings.

 

Red. It symbolizes both good and bad feelings including love, confidence, passion, and anger.
Orange. An energetic and warm color bringing the feelings of excitement.
Yellow. This is the color of happiness, the sunlight, joy, and warmth.
Green. The color of nature which brings calming and renewing feelings.
Blue. It often represents some corporate images. May be associated with distance and sadness.
Purple. Long associated with royalty and wealth. It’s also a color of a mystery and magic.
Black. It associates with a tragedy and death and signifies a mystery. At the same time, it can be traditional and modern.
White. The color means purity and innocence, as well as wholeness and clarity.

 

In addition, designers need to remember that visual perception is quite individual for everyone. Such factors as age and gender have a great impact on color preferences, so it’s vital to know the target audience peculiarities. You can find the detailed description of color meanings and preferences in our previous article.

dance academy landing page

Dance Academy Website

 

Tip 4. Don’t forget cultural differences

 

Each culture has its own traditions and beliefs, so before you choose the colors, you need to make sure that they will be interpreted the way you mean. The thing is that sometimes one color may have absolutely opposite meanings in different countries. For example, in European countries white color signifies purity and it is often used at the weddings while in many Asian countries this color means death and sorrow. Incorrect usage may lead to misunderstandings which could be fatal for a product. By acknowledging the specialties of culture’s color perception designers decrease risks of being misconceived.

 

Tip 5. Strive to color harmony

 
Harmony is what UI design strives to. To make users feel pleased and comfortable, designers try to bring the balance into user interface design. The color harmony is about the arrangement of the colors in design in the most attractive and effective way for users’ perception. Harmonic colors contribute to a nice first impression from the website or application.

 

After years of searching, designers distinguished the basic color schemes that work effectively. Let’s see what they are.

Monochromatic. Color harmony is based on one color with various tones and shades of it.

Analogous. The scheme applies colors located right next to each other on the color wheel.

Complementary. It is the mix of colors placed in front of each other on the color wheel and it aims to produce high contrast.

Split-Complementary. This scheme works similar to the previous one but it employs more colors. For instance, if you choose the blue color you need to take two others which are adjacent to its opposite color meaning yellow and red.

Triadic. It is based on three separate colors which are equidistant on the color wheel. Professionals recommend to use one color as a dominant, the others as accents.

Tetradic/Double-Complementary. The tetradic color scheme employs four colors from the wheel which are complementary pairs. If you connect the points on the chosen colors they form the rectangle.

 

color theory design tubik

Source

 

Detailed information and examples of color harmony can be found in our article Color Theory: Brief Guide for Designers.

 

Tip 6. Steal ideas from nature

 

Mother nature is the best artist and designer in the world. Color combinations which we can see in the natural environment are always close to perfect. People enjoy watching sunsets and dawns, autumn forests and winter mountains since they are full of natural color combinations.

 

So, why don’t you try to borrow a few ideas? Go for a walk or search for beautiful nature photos and you will definitely find the inspiration.

 

web ui design city guide

Big City Guide

 

The success of a digital product depends largely upon the colors chosen for its UI. The right colors help users feel comfortable with a product. Designers can put people in the frame of mind that compels them to take action just by applying the appropriate color palette. Make your choices wisely.

 

Recommended reading

 

Color Theory: Brief Guide For Designers.

Color in Design: Influence on Users’ Actions.

Color in UI Design. Look on the Bright Side.

Dark Side of UI. Benefits of Dark Background.

3C of Interface Design: Color, Contrast, Content.


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

usability_interfaces_ux_design_tubik

Take It Easy: Tips for Effort-Saving User Interfaces.

«Simplicity is the ultimate sophistication,» said genius Leonardo da Vinci, and this eternal truth is as fair now as it was several centuries ago. Such an approach in design for web and mobile interfaces results in human-centred products which are pleasant and easy in use. Make no mistake, simple doesn’t mean empty, primitive or monofunctional. Instead, it means clear, intuitive and helpful. Really simple products not only solve user’s problems but also do it in an optimal way in the aspects of times and effort.

 

We aren’t often thinking in terms of love and respect when it comes to digital products. We can describe them in tons of other words featuring appearance (like beautiful, elegant, interesting etc.) or functionality (like intuitive, easy-to-use, confusing etc.) or content (like informative, consistent etc.) but you rarely can hear that someone names a website or app respectful. However, respect of user’s time and energy is one of the vital goals which designers should strive to achieve in the product they work on. This approach is the great factor of usability and desirability. Today we would like to share some advice and techniques which could become supportive in this aim. These tips aren’t reinventing the wheel but present a helpful checklist for design outcome. So, let’s check what designers can do to save time and effort for users.

visual hierarchy in UI design

 

1. Put the core data into header

 

Talking about websites, it is an extremely helpful idea for quick and easy navigation. The only problem is to decide on what core data is, especially for websites with a huge amount of various data, like big e-commerce websites, news platforms or multi-theme blogs. Header is a strategic part of a page as people see it before scrolling the page in the first seconds of introduction to the website. Being a sign of invitation, header should provide the key information about the digital product so that users could scan it in split seconds.

 

In our article telling about web headers design in detail, we provided the typical types of content which can be included into headers:

 

  • basic elements of brand identity: logo, brand name lettering, slogan or company statement, corporate mascot, photo presenting the company or its leader, corporate colors etc.
  • copy block setting the theme of the product or service presented
  • links to basic categories of website content
  • links to the most important social networks
  • basic contact information (telephone number, e-mail etc.)
  • switcher of the languages in case of multi-lingual interface
  • search field
  • subscription field
  • links to interaction with the product such as trial version, downloading from the AppStore etc.

 

It doesn’t mean that all the mentioned elements should be included in one web page header: in this case, the risk is high that the header section would be overloaded with information. The more objects attract user’s attention, the harder it is to concentrate on the vital ones. Here designers, preferably together with marketing specialists and stakeholders, need to decide on the strategically important options and pick them up from the list or add the others.

Why is header so essential? Eye-tracking investigations show that whichever scanning model a particular user follows, the scanning process will start in the top horizontal area of the webpage. Using it for showing the core information and branding is a strategy supporting both sides: readers scan the key data quickly while website gets the chance to retain them if it’s presented properly. That is the basic reason why header design is an essential issue for UI/UX designers as well as content and promotion specialists.

gourmet_website_interactions_tubik

 

2. Make branding highly visual

 

In terms of the discussed topic, brand means a sort of image created via a set of distinguishing features and promoting awareness and recognizability of the product or service on the market. This image can be created in tons of diverse ways — visual, verbal, touchable etc. In web and mobile design, branding supposedly means a set of visual elements defining the brand style, which can be applied in the interfaces such as logo, typography, brand colors and the like. All of them together are a powerful tool for creating visual recognizability of the product as well as its style. Being based on the analysis of target audience and marketing/ customer research, branding in this sense plays the vital role in product promotion as visual perception is very fast and easy for most people, much easier than reading the text and much more memorable than listening to speech. Moreover, if the brand is already well-established, it’s signs observed in the first seconds of seeing a website or app increase the level of trust.

Bakery website design case study tubik

 

3. Use numbers, not words

 

One of the investigations of user behavior provided by Nielsen Norman Blog shared an interesting finding: based on eye-tracking studies while users scan web pages, numerals often stop the wandering eye and attract fixations, even when they’re embedded within a mass of words that users otherwise ignore. People subconsciously associate numbers with facts, stats, sizes and distance — something potentially useful for them. So they are hooked with the numbers included into copy while words representing numerals can be misses in the bulk of text. Even more, whatever numbers represent, they are more compact than their textual variant, which enables to make the content more concise and time-saving for skimming the data.

 

4. Make the call-to-action (CTA) instantly noticeable

 

A call to action (CTA) is actually a word of phrase stimulating users to interact with a product in a way and for the aim it is designed for. CTA elements are the interactive controls which enable users to do the action they are called to. Typical types of such interactive elements in the layout are buttons, tabs, or links. In the interfaces of all kinds, CTA elements are the core factor of effective interaction with the product, which plays the crucial role in usability and navigability. When all the path of interaction and transitions is built clearly for users but CTA element is not thought-out, placed or designed well, users can get confused and will need to take additional effort trying to achieve their goals. That sets the high risk for poor conversion rate and general user experience. That’s why this navigation element should draw particularly deep designers attention. In any interface, it should be one of the most prominent and quickly noticeable parts to inform users how the product can be helpful or useful for them.

bookshop website animation

 

5. Care about general page scannability

 

As it was already mentioned, users don’t usually read and observe all the content on the page or screen from the starting point: instead, they start from quick scanning to understand if it contains something they need or want. This significant domain of user research is massively supported by Nielsen Norman Group and provides designers and usability specialists with the better understanding of user behavior and interactions. Different experiments collecting data on user eye-tracking have shown that there are several typical models along which visitors usually scan the website. In the article about 3 design layouts, the author Steven Bradley mentions the following common models: Gutenberg Diagram, Z-Pattern, And F-Pattern.

reading pattern

Gutenberg Diagram

 

reading pattern zig-zag

Z-Pattern

 

f_reading_pattern_eyetracking

F-Pattern

 

Knowing these models, designers and information architects can build navigation and important data in the points where they have the highest chances to be seen and get the user interested. The well-thought-out visual hierarchy will make the page easily skimmed saving users’ time and energy.

design for users copy in UI

 

6. Check the icons perception

 

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. It’s hard to overestimate their role in UI navigation: they make it much quicker as most users perceive images faster than words. Usage of recognizable and clear icons has a great potential in boosting usability. However, even the slightest misperception can become the reason of poor UX so the solutions on the type of icons should be carefully tested and if needed supported with the appropriate copy content.

 

7. Strengthen the message with theme images and hero banners

 

No secret, in many cases an image is worth a thousand words. In web and mobile UI it often works that way: images become highly supportive and effective in setting the mood or transferring the message. In addition, images present the part of the content which is both informative and emotionally appealing. Original illustration, prominent hero banners, engaging photos can satisfy multiple goals: they catch users’ attention, transfer the message visually, support the general stylistic concept,

  • catch users’ attention
  • transfer the message visually
  • support the general stylistic concept
  • set the needed theme, mood or atmosphere
  • demonstrate the core benefits or items effectively.

dance academy landing page animation

 

8. Talk to users in their language

 

Copy content plays the crucial role for communication with the user. Not only its effective visual presentation is significant for high page performance: the style, structure, and vocabulary should also correspond to user’s expectation from a page. Usage of too formal or business-like style in an entertainment app for teenagers, or vice versa too informal style on the luxury website selling elite real estate — there can be hundreds of cases when copy doesn’t follow business goals as well as habits and needs of a target audience. That kind of content inconsistency can be confusing and move the users away from the website or app. User research will be effective for this issue to see what way users want to communicate while a professional copywriter will help to strengthen design with the power of words.

web_ui_design_tubik

 

9. Use the power of Gestalt principles

 

Gestalt is the term meaning «shape, form». It is used primarily in cognitive psychology for the field exploring the laws of meaningful perception of the data which people constantly get from the world that seems primarily chaotic. It works on different levels of perception, but the visual part seems to be the most interesting for designers creating interfaces. It helps understand the psychology of the app or website users better. When designers know the factors influencing visual perception, it makes the process of UX design much more proficient giving higher rates of successful interactions and lowering the level of misunderstandings users could get on this way.

gestalt-theory-grouping_principles
 

For example, applying the principles of similarity and proximity, designers can group the layout elements according to  human cognitive abilities, so that users could perceive them in the most natural and convenient way.

bright_vibe_calendar_app_ui_tubik

 

10. Optimize visual content

 

Whatever interesting, attractive and informative is the interface, there is the invisible factor which can erase all the benefits — the loading speed. If the visual content — images, animations, video — applied to an interface is too heavy or doesn’t perform well on different devices, the risks are high to lose users before they will understand the strong points of the product. In terms of high competition, with loads of websites and application, be sure: users aren’t going to wait, they will head for the more convenient and quick alternative even if it loses in a number of points. Optimization and persistent testing of visual content is the real sign of respect to the user boosting less time-consuming flow of interaction.

website design UI

 

Hopefully, this list will be helpful for those who are aimed at creating positive user experience. Don’t miss the updates — new practical tips and inspiration are coming very soon.

 

Useful articles

 

This set of articles can be useful to dive deeper into the points mentioned above

 

Best Practices for Website Header Design

The Role of Branding in UI Design

Visual Hierarchy: Effective UI Content Organization.

Gestalt Theory for Efficient UX: Principle of Similarity.

Gestalt Theory for UX Design: Principle of Proximity.

Copywriting in UI. Words that Make Design Go Round.

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

Tips on Applying Copy Content in User Interfaces.


 
Welcome to see designs by Tubik Studio on Dribbble and Behance

Gestalt_Principles_in_UI_Proximity

Gestalt Theory for UX Design: Principle of Proximity.

Human brain is an amazing data processor whose broad capacity still hasn’t been explored at full. For designers dealing with user experience of any kind, knowledge of cognitive abilities and mechanisms is highly helpful in creating a user-friendly product. Today we offer you to continue our talk around this theme.

 

One of the previous articles here has started the series of posts devoted to Gestalt theory and ways to effectively apply it in UX design. For a brief reminder, Gestalt theory is based on the following idea: when people perceive the complex objects consisting of many elements, they apply conscious or subconscious methods of arranging the parts into a whole organized system instead of just the set of simple objects. It works on different levels of perception, but the visual part seems to be the most interesting for designers creating interfaces. We have already presented the definition of Gestalt theory, the principles of grouping in particular, as well as looked into the principle of similarity for user interfaces. This time let’s discuss the principle of proximity for UX design.

 

Principle of Proximity

 

This principle is based on the cognitive tendency to perceive the objects close to each other as related, especially in comparison with those which are placed farther. Having the urge to organize the variety of data and objects around, people often group them this way automatically, much quicker than they start real thinking about it. So for designers, this is another good prompt how to organize the interface along natural ways the brain absorbs and classifies data. The simple scheme by Andy Rutledge, given below, visualizes the principle of proximity.
proximity-group-gestalt

Source

 

The important thing to bear in mind is that via research and experiments proximity proved itself more powerful than other distinctive features such as color or shape, for example. People tend to see elements as related if they are close to each other in comparison to other objects even if other features differ, like another simple scheme below shows.

 

proximity principle in design

 

In user interfaces, which are full of different content, the principle of proximity helps a designer to organize the layout to make it scannable and easily-perceived for users. It’s not a secret that users aren’t ready to spend much time learning how the complex interface works so intuitive screen which can be quickly scanned has much more chances to retain the users and give them the best features of the website or app.

 

In general, we could define two directions of applying proximity principle in user interfaces: for typography elements and copy content and for blocks of different content and controls. As well as in the previous article devoted to grouping principles, we will support them with examples by Tubik designers.

 

Typography and copy

 

One of the domains in which proximity plays the crucial role is the organization of copy content in user interfaces. Scannability of the copy blocks in the layout is vital because readers don’t usually stay on the pages which look like a long homogenous thread of text. First, most users scan the page and check the hooks like headings, subheadings, highlights, and keywords, and only then read more if they got interested. That is the reason why copy should be arranged according to the laws of both quick perception and aesthetic looks. 

 

White space, also known as negative space, plays the great role in this process. It allows a designer to activate the power of nothing:  the space without any content not only adds the air to general layout but can be also used to organize its elements as groups and unities where it’s needed. 

 

typography in ui design

 

For copy content, it can be used in different ways. For example, with white space, a designer can harmonically separate the paragraphs in a big bulk of text to make it more digestible and visually pleasant for readers: this approach is often applied in blog articles and big copy blocks on websites. In this case, the principle of proximity signals that the copy lines which are closer to each other present the unified idea or piece of information and in this way makes all the text structured. 

 

tubik_studio_structure

 

Here’s the interface concept of architecture blog. The principle of proximity works in this UI on several levels. First, it unites the lines of one copy block to be decoded as one piece of information. Secondly, every copy block is placed close to the image it describes so even quick scanning lets the viewer understand that they belong to each other and present the single piece of content in general layout. The call-to-action element — link «See more» — also works according to the principle of proximity being placed a bit farther than the body copy content but close enough to show that it is included in this particular content block. So, we can see that in this case, the designer activated proximity both inside and outside every particular block of content making them harmonically arranged while the general layout structured. Pieces of copy are beautifully composed around the theme illustration and are scannable in split seconds.

 

This approach also works well for extended lists like menus and catalogs. Proximity applied thoughtfully becomes the effective tool to organize all the positions and group them effectively.

tubik studio web UI design

 

For example, let’s look at Slopes website. The links to the core interaction zones of the websites in the header are quickly perceived as one unified group as they are placed close enough to each other and far from other content. The same works for the extended menu hidden behind the hamburger button: the links are organized in groups which are visually defined due to their close placement. Negative space used according to the principle of proximity strengthens the general visual hierarchy of the page.

 

Blocks of content and controls

 

One more domain where proximity can have a positive impact on user experience is organization of diverse content blocks in the layout: except copy, these can be images, links, icons, controls, CTA elements, products cards and loads of other stuff. The principle of proximity allows designers to arrange these blocks in a way which most naturally corresponds to natural human abilities of visual perception.

 

ui animation design tubik

 

For example, here’s the e-commerce app for a jewelry store. The right screen shows the product card: we can see that the general data about the item — color, width, weight, and material —  is given in several lines which are close to each other and therefore are naturally perceived as a unified piece of content. At the same time, the detailed description of the item presenting quite a considerable piece of writing is placed further and in that way separated a bit from the data file. So, these content blocks don’t merge and users can easily differ key data from the detailed description.

 

website design tubik studio

 

Here’s another example, grounded heavily on the principle of proximity — a layout of an online magazine. All the content and control blocks are arranged on the basis of the broken grid and without any frames separating them from each other. Proximity of the elements allows users quickly define core content zones: the set of links in the header, the list of the latest publications on the left, the field of the preview for the fresh article and the block of social network links in the footer. Moreover, inside this global block the principle of proximity continues to separate or unify the elements: according to it, the designer arranges the positions in the list of latest publications around different topics as well as separates the links to the web pages in the header from the controls of instant action such as search or subscription. This approach not only makes the layout elegant and scannable but also strengthens intuitive navigation for better usability.

 

Although we have just started revising Gestalt theory usage in design, it’s already obvious that knowing these simple yet effective principles can save much effort for users and support user-friendly interfaces with mechanisms that work according to human cognitive abilities and psychological patterns. Follow the updates to check the explanations and examples for other grouping principles: symmetry, continuation, closure and others. 

 

Recommended Reading

 

Gestalt Theory for Efficient UX: Principle of Similarity.

Cognitive psychology for UX: 7 Gestalt principles of visual perception

Design Principles: Visual Perception And The Principles Of Gestalt

Improve Your Designs With The Principles Of Similarity And Proximity

Gestalt Theory of Visual Perception

Gestalt Principles: How Are Your Designs Perceived?


Welcome to see designs by Tubik Studio on Dribbble and Behance

Welcome to read online or download the free e-book «Problem-Solving Web Design»

gamification in UI UX tubik blog

Gamification in UX. Missions and Challenges.

A life is always full of challenges and that what makes us self-improve again and again. The same pattern works with digital products. When users have challenges to handle and missions to attain, they have reasons to come back to an app or website.

 

In our previous articles, we described the role of gamification (the technique of exerting game mechanics into the non-game environment) in UX. Also, we explored one of the game mechanics called user journey. Today’s article is devoted to a mission and a challenge as two effective gamification elements. Let’s see how they can be applied in a digital product and what solutions they can bring for the efficient UX.

 

Mission and challenge as game mechanics

 

Every game provides missions and challenges to the players so that their journey would be exciting and interesting. People go from one mission to another handling different challenges on their way. Accomplishing the levels players grow from beginners to professionals which helps them feel more confident in the world of this game. These game mechanics have the same effect on apps and websites.

 

Users need the motivation to return to a digital product every day. One of the most powerful motives which move people to do something is a desire to prove that we are able to handle any kind of challenges. So, why not to make a good use of it? Let’s see what mission and challenge are in terms of product UX.

 

upper app UI design case study

Upper App

 

Mission

 

A mission is basically a task which users need to complete. Missions serve as guidelines which help users adapt within a product. People learn how to use an app and improve their skills by accomplishing one mission after another. There are also repeatable missions which can return every day, week, month or any other interval. This kind of game mechanics keeps users motivated and engaged daily and makes them constantly go back to a product.

 

Challenge

 

Challenges can be compared to the stairways which lead users to the end of a mission. In other words, they are mini-tasks which people need to do to complete a major task. For example, users have a mission to gain a new level of user proficiency so that they could have an access to extra features of a product. To complete the task, users have to handle certain challenges such as visiting a website daily during a week.

 

A mission and a challenge are effective game elements motivating people to take an action which can be great tools on the way for UX improvement. To enhance their effect, it may be a good idea to use some kind of rewards, so that users could feel even more motivated.

 

Mission and challenge in digital products

 

To delve deeper into the topic, let’s see some practical examples of how and where missions and challenges can be applied as effective UX boosting tools.

 

home budget app case study

Home Budget app

 

First of all, we need to say that these game mechanics are widely used for educational applications. Learning itself is often a difficult process which requires persistence and motivation to get things done right. That’s why one of the main tasks of educational apps is to keep the learners interested and motivated all the time.

 

Various missions and challenges can work as powerful motivators for people. Game elements are able to make educational process more dynamic and exciting especially for young learners. What kind of a mission and challenges to choose depends on the type of educational material. For example, language learning apps can challenge the users in learning of a certain number of words per a day.

 

Another sphere of human life where people challenge themselves day by day is a sport. Fitness apps are useful helpers for both amateurs and professional sportsmen. They track our activities as well as show how a body reacts to physical exertion. So, why not to add the element of fun? Providing new missions and challenges, fitness apps help people self-improve their sports skills and reach greater heights.

 

fitness app UI design tubik

Fitness App

 

One more example of applying mission and challenges in digital products is alarm apps. To be more specific, let’s see a practical case of the app called Toonie. It’s is a simple alarm app for iOS which wakes people up whenever they need it. The thing that makes it stand out of the crowd is custom stickers which users receive as a reward for handling challenges such as waking up at the certain time. This way users turn into collectors and take one challenge after another to gather all the stickers available.

 

toonie alarm stickers ios tubik

Toonie Alarm app

 

These are only a few examples of how missions and challenges are applied in products. Designers can experiment with game mechanics and apply them to the most ordinary digital products. This way they may add the element of uniqueness.

 

When and why to apply mission and challenge

 

To define if missions and challenges suit your project, let’s see what solutions they may bring to UX.

  • Missions help to onboard users which only start their journey. They guide people assisting to adapt within a new interaction and navigation system.
  • When users accomplish tasks from applications, they achieve different life goals. For example, taking challenges such as doing squats every day, they move forward to their big life goal — getting fit.
  • Challenges are strong motivators which induce users to take the expected actions. They are the effective tools assisting to increase user engagement.
  • Game elements such as a mission and challenge add interactivity to digital products.
  • They can bring the element of fun to an ordinary product making it stand out of the crowd.
  • Missions and challenges make people return to an app or website more often because some tasks require constant actions within a product.

 

Animated stickers mood messenger design tubik

Animated stickers for Mood Messenger

 

Gamification may not work well for some products. Everything depends on the business goals which stand behind a product as well as the solutions which it brings to users. Before you start gamification process, you need to consider the peculiarities of a target audience and learn if the game elements respond to the users’ needs.

 

— Make sure if the potential users will have time and desire to take the challenges. In some cases, people just need to use a product quickly and leave it till the next.

— Missions and challenges should be optional to attain. Even if the target audience is inclined to challenges, there is still a part which would prefer to skip the tasks.

— Keep the level of gamification in balance. Depending on the type of a product choose the number of missions and challenges as well as their level of difficulty.

 

gamification in UI UX tubik blog

Night in Berlin App

 

Motivation is a powerful engine that makes people move forward. Challenges and missions are the game mechanics serving as motivators for users. The curiosity and excitement drive people to continue performing various the missions and handling and spend more time on an app or a website. Stay tuned!

 

Recommended reading

 

Gamification in UX. Increasing User Engagement.

Gamification Mechanics in UX: Smart User Journey.

Gamification

Challenge Accepted! The role of challenge for gameful design


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

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