Tag Archives: interaction design

gamification in UX design

Gamification Mechanics in UX: Smart User Journey.

From the very childhood people start playing games and they never really stop. Game spirit follows us in every sphere of our life revealing its facets such as challenges, achievements, or rewards from time to time. Trying to transfer game features into everyday life is a habit helping people to deal with complicated situations. Such a tendency could possibly cause the appearance of the gamification concept.

 

The word “gamification” stands for the technique of exerting game mechanics into the non-game environment. Designers often use gamification to create effective digital products and secure high level of user engagement. In one of our previous articles, we’ve mentioned common game mechanics such as challenges, points, badges, leaderboards, and journey. Each gamification element serves for certain goals and has a different influence on users. Today’s article is devoted to one of the most commonly used game mechanics called user journey. We’ll define its essence and find out how it works for UX improvements.

 

badges illustration tubik studio

PukaPal Badges

 

What’s user journey?

 

To make pleasing UX design, it’s vital to think out all the stages of user interactions. The thing is that one person may use a product for accomplishing different goals each day, even more, they apprehend the product differently every time. Designers and researchers noticed that experience and user interactions gradually evolve as people gain more skills in using the product. Such characteristics make it similar to a journey which players go through in games.

 

Considering this fact, designers come up with the idea of applying a game mechanic called user (player) journey in digital products. User journey can be defined as user’s progression stages over the time of product usage. Designers create UX that way so that people could go step-by-step through the various features and interactions which gradually change depending on users needs.

 

mobile app design tubik studio

Moneywise App

 

Let’s look at the example. A standard video game always has different levels from the easiest to the most complicated one. This way a player can adapt and easily comprehend how the game works on the easy levels and then constantly learn and make a progress. By the end of the game, a player is usually a skilled competitor who can deal with more complex tasks. If people receive difficult tasks at the beginning, they aren’t able to handle them. Or in case a game only consists of easy challenges, players will soon be bored.

 

The same works with digital goods. A product which has a simple system of interactions often attracts users with its convenience. However, if people use it for a long time and there are no changes at all, they may get bored. In case a product has an enormous amount of features at the start, they may just get lost within it. To avoid such problems, designers need to think of UX as a user journey, guiding them step-by-step to the point of achievement.

 

Stages of a user journey

 

User journey is a game mechanic which aims at making the process of interaction with a product easier and more understandable. A user feels as a real player starting the personal journey of the product usage. Designers plan different stages which a player (user) will gradually go through. Let’s look at the common steps which a user journey includes.

 

Onboarding stage

 

People who only start their journey within a product need to be actually onboarded. It means that users should be offered an introduction to the features so that they wouldn’t be afraid to make a mistake. Also, it is good to present a navigation system if it has some peculiarities.

 

Designers use onboarding tutorials in various digital products. Tutorials appear to users who launch an app or a web product for the first time helping them get oriented within unfamiliar features and controls. One more task designers need to accomplish at the stage of onboarding is user motivation. The product should be presented that way so that people had a motivation to use it more than once. That’s why onboarding tutorials need to contain short but clear info describing the possibilities of a product helping users to understand if a product can be useful for them.

 

tubik_toonie_help_screens_interaction

Toonie Alarm

 

Scaffolding stage

 

When users continue their journey, they go to the next stage of interactions called scaffolding. The step includes disclosing features progressively as the users become more experienced in using the product. Unlike the onboarding stage, users don’t get long instruction. Scaffolding is more like practical part. Users are trained to use a product proficiently, and the more they learn, the more tools (features) they receive. This stage allows users gradually learn more about a product and receive more features as far as they need to use them. Users don’t get a great number of features at once, so the interactions system won’t seem too overloaded or complicated.

 

toonie alarm UI design

Toonie Alarm

 

Progress stage

 

No matter what tasks people do, they always want to know about their progress. Providing the feedback on the results of a user journey, we can inspire them to continue. It’s a core step since people lose the enthusiasm of a beginner pretty soon and they need to be motivated to stay.

 

Some may ask what progress can be in non-game digital products? For example, a social app can notify users when they gained a certain number of new followers or friends. Meanwhile, educational applications can inform users on how much they’ve learned from time to time. All small details matter. Just tell people they achieved something and they get a dose of enthusiasm to continue.

 

blog app design tubik studio

Blog App

 

Endgame stage

 

Designers usually stop at the stage of scaffolding and progress uniting them in the endless loop, where users constantly learn and receive feedback. However, sooner or later people get bored of such patterns and may quit the product. Here is why the endpoint of a journey is also important to be thought out.

 

Endgame stage doesn’t mean that users will receive the message “Thank you for being with us! Bye-bye.” At this stage, proficient users are recognized as experts or veterans and they are usually given some privileges for loyalty. People like to be valued and they often give it right back. It’s not a secret that loyal customers are the best marketing managers for a product. New users willingly follow satisfied users’ testimonials.

 

Why a user journey?

 

User journey is a complex game mechanic which requires deep attention to details. Each stage should be carefully planned and connected to the others. Moreover, it requires long-term plans for future updates, so the process of user journey development may take a long time. Of course, some may ask if it is worth the effort to bring it into a product. Let’s see what user journey can give you back.

 

Clear interaction system. Users receive features gradually at the stage of scaffolding and users learn to utilize a product step-by-step. An approach helps to avoid problems with incomprehensible interactions and functions.

 

Increased user engagement. One of gamification principles is to make users always motivated and involved in “game”. User journey is usually full of different tasks and achievements which people can gain, so users can’t resist game spirit.

 

Customer loyalty. If a product is constantly improved for its users, people really appreciate it. Moreover, if a product has some privileges for loyal customers, people trust it more.

 

Product recognizability. As we said above, satisfied customers are effective marketers for a product. Users willingly share their pleasant experience and it won’t stay unnoticed.

 

The element of fun. As any other game element, user journey is a good way to bring an emotional aspect to a product. People always need some kind of recreational activity so that they could escape from everyday routine for a bit. By adding the fun element into a casual product, you help people reduce some stress and relax for a moment.

 

Animated stickers mood messenger design tubik

Animated stickers for Mood Messenger

 

All in all, we can say that user journey is an effective method for UX improvement. However, a designer and a client should consider the fact that gamification works well not for every product. It depends on a type of an interface, its target audience, and business goals. For more detailed information, check our previous article where we’ve defined the tasks which gamification helps to accomplish and don’t miss the updates on gamification in UI coming soon.

Recommended reading

 

Gamification by Interaction Design Foundation

42 Rules for Engaging Members Through Gamification: Unlock the Secrets of Motivation, Community, and Fun

Gamification in UX. Increasing User Engagement.

Gamification: Designing for Motivation


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

typography tips for designers

8 Typography Tips For Designers: How to Make Fonts Speak.

Typography is a way of communication with users. Visual performance and readability of copy in digital products have the great impact on user experience. One of guru graphic designers, Hoon Kim, once said: » Typographic design is visible as well as audible. If you have a great scenario, now it is time to cast good actors.» Typography can become a voice of design. Appropriate typography speaks for itself setting the right mood and transferring a certain message to users. Today’s article presents tips which will assist you in creating of effective typography.

 

Typographic hierarchy makes things work

 

To create a design pleasant for users’ perception, all its elements should be well organized and clear to navigate. Designers set a proper structure by establishing a visual hierarchy. It organizes all the visual elements so that users could easily perceive content.

 

Visual hierarchy can be divided into different parts. One of them relates only to the copy elements is called typographic hierarchy. It aims at organizing copy content by dividing it into various types such as headings, subheadings, body copy, captions and others. The differences between the types of copy are set by regulation of family, sizes, width, and colors of fonts.

 

Clear typographic hierarchy makes text legible and easy to scan. Moreover, it’s simple to highlight key parts of the text to draw users’ attention and hitch them to the expected actions.

 

mood messenger landing page

Mood Messenger Landing Page

 

Consider context and audience

 

When it comes to the choice of fonts, an essential thing to consider is a context of a copy and a potential audience. Each font brings its own mood to a layout. There are friendly, funny, serious, business, and many other fonts that will fit a certain design.

 

Before you choose a font, you need to learn your client’s goals as well as needs and preferences of a target audience. Visual performance of fonts influences the first impression users get from the product. If the kind of font doesn’t fit the mood which the product aims at, there can be a misunderstanding with the audience. For example, if a designer chooses a font which looks too fun and silly for a business website, users will hesitate if the company is trustworthy. Or, if a product is meant for youngsters, too formal fonts may seem boring.

 

web design florist store ecommerce

Florist E-Commerce Website

 

Deep attention to mobile typography

 

Designers often do the experiments with typography to make a project original. However, when it comes to mobile UI design, typographers are literally short of space. Mobile screens are quite small which sets a new challenge for designers to cope with restrictions without loss of sense and functionality. Mobile typography requires deep attention to the details from an appropriate size of fonts to compelling tracking and line length.

 

Compared to web design, mobile typography is harder to reach a good legibility. The font size shouldn’t be too small because on tiny screens it will look like an illegible mess. Moreover, if the text is too big, it won’t fit the small screen too. In addition, designers need to care about the level of contrast since a screen with ambient light and high contrast can hurt users’ eyes.

 

Furthermore, a designer should think of the typography functionality. Smartphone UI includes clickable text parts and designers need to make sure users manage to use them. If these parts are too small, people can’t press it with a finger and it’s rather annoying.

 

Considering all the tiny details in mobile typography, designers can bring valuable products for users.

 

UI animation wine app

WineYard App

 

Minimalism can’t hurt

 

Sometimes, when designers aim at showing all the facets of a digital product, they try to use lots of various styles and fonts all in a single design. As a result, they get a design overloaded with unnecessary distracting details and lacking a proper mood.

 

Experts usually try to keep a number of fonts within two or three for the same layout. It allows making an essential contrast between copy elements along with saving the balance and right message of a design. Applying different styles (bold, italic) should also be minimal. They are good for emphasizing really important parts but the overuse of them can make the text look messy.

 

Also, copy content shouldn’t overwhelm users with the unnecessary information. Of course, it’s a writer’s job to create appropriate text still designers need to collaborate with them to make sure the text will fit a design.

 

upper app UI design case study

Upper App

 

Text needs to breath

 

Legibility level highly relies on how much space there is between letters, words, and text lines. Tracking, kerning and leading are the processes of white space adjustment between the typographic elements. White space is the area between elements in a design composition.

 

A lack of white space may end in the bad legibility of copy content because it is difficult to distinguish words which are placed too tight to each other. Appropriate white space brings a visual relief to users’ eyes and allows going easily from one word to another, from one line to the next. However, try not to overuse it otherwise it can ruin text unity.

 

dance_academy_website_interactions_tubik

Dance Academy landing page

 

Build typography like a scientist, revise like an artist

 

Typography is a complex science consisting of many rules and regulations. Those who covered them are able to create clean working typography. However, it’s is not enough. Clients always require originality and emotion but it can’t be done only by following the written instruction.

 

Designers should never bury their artistic souls. Imagination and the sense of beauty bring the uniqueness in any project, even the most casual one. Find the balance between the strict rules and unordinary choices, and the results may surprise you and your customers.

 

web design UI tubik studio

The Gourmet Website

 

Colorful typography needs thoughtfulness

 

The topic is actively debated. Some think there is no room for color in typography and some claim it’s a must-have for good-looking design. There is no point in looking for the right side of the dispute because there is no accounting for taste. Nevertheless, colorful typography does exist and designers apply it quite often.

 

Among the advantages of colorful typography, let’s mention the element of emotion it adds to any UI as well as the ability to highlight points of interests for users. Moreover, each color may transfer a certain message since it has an influence on users’ mind and behavior.

 

To take all the benefits, colorful typography should be applied thoughtfully and carefully because it’s easy to turn UI into a colorful chaos. Here is the useful checklist for this case:

 

Make it contrast. A big problem which colorful typography may bring is bad legibility. Proper contrast between the fonts and background will help to avoid it. However, make sure the contrast looks pleasant and doesn’t hurt the eyes.
 
Don’t use too many colors. Again, try not to turn UI into a mess. Too many colors look distractive and amateur.
 
Color harmony. Remember the basics of art lessons. Use the color wheel and schemes to choose the proper palette.
 
Be careful with effects. Fluorescent, luminescent, metallic, and glowing colors have their peculiarities and they may not always look good on a digital screen.

 

book swap app interaction design

Book Swap App

 

Learn the basics of typography

 

It may sound too obvious still some designers ignore learning basics of typography science. They rely on modern tools which automatically choose the fonts or just hope aesthetic features of chosen fonts would be enough. Such an approach seems like learning to read without knowledge of the alphabet.

 

Designers who don’t know the concepts and the anatomy of typefaces can’t use the potential of typography at the full strength. Everyone decides for oneself if they need to learn the science in depth but the basics is a foundation of every craft.

 

The experts working on the problem of harmonical usage of fonts gladly share their knowledge that’s why there are so many useful books on typography for designers. As the recommended reading we can name

 

tubik typography and design books

 

Recommended reading

 

Here are some articles providing useful tips and tricks in typography.

Do’s and Don’Ts of Typography

The 8 biggest typography mistakes designers make

10 typography tricks every designer should know

Typography in UI: Guide for Beginners.

Tips on Applying Copy Content in User Interfaces


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

upper app UI design case study

Lean and Mean: Power of Minimalism in UI Design.

Simple doesn’t mean primitive. Less isn’t vague. Short doesn’t say little. Air doesn’t equal emptiness. Today we are talking about minimalism.

 

In the book «The More of Less», Joshua Becker said: «You don’t need more space. You need less stuff.» Minimalism is often discussed nowadays in different spheres of life and work, and diverse directions of design are not the exception. Let’s see what are its benefits and points to consider.

 

web design tubik studio

 

What is minimalism?

 

Actually, minimalism is a word of broad meaning used in various spheres of human activity. Merriam-Webster dictionary defines it as «a style or technique (as in music, literature, or design) that is characterized by extreme spareness and simplicity». Being applied to more and more fields, it saves its core traits: meaningful and simple.

 

Minimalism as a direction of visual design got especially popular in the 1960s in New York when new and older artists moved toward geometric abstraction in painting and sculpture. The movement found its impression in the artworks associated with Bauhaus, De Stijl, Constructivism and so on. In diverse spheres of visual arts, key principle of minimalism was leaving only essential part of features to focus the recipient’s attention as well as support general elegance. Lines, shapes, dots, colors, spare space, composition — everything should serve its function being thoughtfully organized. Today we can meet minimalism in a variety of life spheres: architecture, arts, photography, all kinds of design, literature, music and even food presentation.

 

«A shape, a volume, a color, a surface is something itself. It shouldn’t be concealed as part of a fairly different whole. The shapes and materials shouldn’t be altered by their context», said Donald Judd, an American artist associated with minimalism. Working in this style, designers seek to make the interfaces simple but not empty, stylish but not overloaded. They tend to use negative space, bold color and font combinations, and multifunctional details making the simplicity elegant. The line dividing simple and primitive is very thin. That is why not all the designers take the risk of trying this direction: some may think it looks too decent, the others don’t find enough ways to show much with fewer elements.

 

Tubik studio UI design

Architecture Blog

 

Characteristics of minimalism

 

Main features of minimalism often mentioned by designers include:

  • Simplicity
  • Clarity
  • Expressive visual hierarchy
  • High attention to proportions and composition
  • Functionality of every element
  • Big amount of spare space
  • High attention ratio to core details
  • Typography as a significant design element
  • Eliminating non-functional decorative elements

 

Surely, the list can be continued but even the given positions show that minimalism in UI sounds like user-friendly trend. Applied wisely, it helps users to see the core elements of the interface and makes user journey intuitive and purposeful. Moreover, minimalist interfaces usually look sophisticated and uncluttered bringing aesthetic satisfaction as one of the factors of desirability in UX.

 

dance academy landing page

Dance Academy landing page

 

Practices of minimalism in digital design

 

Today minimalism is one of the wide-spread trends in the design of websites and mobile applications. Main points to consider can be described with the following practices.

 

Flat design

 

As we mentioned in one of our previous articles, flat design became a great supporter of minimalism in modern digital products. The most prominent feature of this direction is applying flat 2-dimensional visual details as the opposite to highly realistic and detailed skeuomorphic images. Flat images usually use fewer elements and curves, avoid highlights, shadows, gradients, or textures. This approach allows creating images, buttons, icons and illustrations which look neat in different resolutions and sizes. It lets designers enhance usability and visual harmony of user interfaces.

 

However, the terms «flat» and «minimalist» shouldn’t replace each other which often happens today. They are not the same. «Flat» deals with the style of icons, illustration, buttons and other visual elements of the interface in the aspect of gradients, textures, shadows etc. «Minimalist» has much broader meaning and deals with the layout in general, its composition, color palette, contrast and all the techniques of visual performance applied to it. So, flat can be described as one of the design techniques applied in the minimalist approach to creating interfaces.

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Monochrome or limited color palette

 

Color is a feature of a great potential in design of interfaces as it can set both informative and emotional links between the product and the user. Designers working in minimalism tend to take the maximum from color choices, and in most cases, they limit color palette to monochrome or minimal set of colors. This strengthens the chosen colors and doesn’t distract users with too much variety. Such an approach is efficient in interfaces concentrating users’ attention on particular actions like buying, subscribing, donating, starting to use etc. Moreover, in the psychological perspective, the colors usually transfer particular associations and emotions perceived by users, so limited palette makes chosen colors stronger in this aspect.

 

tubik studio web UI design

Slopes Website

 

Bold and expressive typography

 

Typography in minimalistic design is seen as one of the core visual elements of not only informing users about the content but also setting the style and enhancing visual performance. Choosing the way of concise use for graphics, designers usually pay much attention to the choice of typography and never hurry in testing the pairs, sizes and combinations. As well as color, fonts and typefaces are seen as a strong graphic element contributing into general elegance and the emotional message it sends. On the other hand, readability and legibility do not lose their leading positions in the matter of choice.

 

upper app UI design case study

Upper App

 

Choice limitation

 

One of the strong sides of minimalism in interfaces is enhanced user concentration. Being focused on functionality and simplicity, the pages and screens of this kind don’t usually overload users attention with decorative elements, shades, colors, details, motion, so in this way, they support high attention ratio and often let users quickly solve their problems and navigate through the website or app.

 

tubik studio web ui design

Birds of Paradise Encyclopedia

 

Prominent theme visual elements

 

Working on minimalist UI, designers do not apply many images, but those which are chosen to be used are really prominent, catchy and informative. This approach results in the long and thorough search of the «right» image which would cover all those functions and set the required mood instantly. The photo or illustration itself has to follow the principles of minimalism, otherwise, the choice of the wrong image can ruin all the layout integrity.

 

website design UI

Architecture Firm

 

Concise and intuitive navigation

 

Navigation in minimalist interfaces presents another challenge: designers have to prioritize the elements rigorously in order to show only the elements of the highest importance. There are different techniques to hide the part of navigation, but doing this, it’s vital to ensure that users will find what they need easily. That is one of the reasons why minimalist approach can be criticized: not being presented properly and tested enough, solutions like hamburger menus and hidden layout elements can leave some users lost in the journey around the website. Obviously, it is not the good ground for positive user experience, therefore every solution about navigation should follow the philosophy «measure thrice and cut once».

 

Adding air and using negative space

 

White space (also called negative) in digital design is the term which is more about space rather than color. In minimalism, it is one more effective way of adding elegance and marking out the core elements. Also, in terms of monochromatic or limited color palette, white or negative space plays the big role in creating enough contrast and supporting legibility.

 

tubik studio ice ui website

Ice Website

 

Grids

 

Grid system in minimalist interfaces can be effective for making the layout look highly-organized, especially if the website presents a lot of homogenous content. Another benefit is that grids are responsive-friendly.

 

web design UI concept tubik studio

The Big Landscape

 

Contrast

 

Following the philosophy of limits and simplicity, minimalism depends much on contrast as a tool of good visual performance. The choice of colors, shapes and placement are often based on the contrast as the key feature.

 

tubikstudio ui animation website design

Bjorn Website

 

Well, it’s easy to see that minimalism has a great number of benefits and presents a good approach in creating user-friendly interfaces. However, it doesn’t mean that minimalism should be applied everywhere: every goal should be achieved by the proper means. One thing is for sure: the more minimalistic is the interface, the more time and effort the designer should invest to make it clear and functional. Elegance and beauty of minimalism should support the global aim of providing positive user experience.

 

Recommended reading

 

The Characteristics of Minimalism in Web Design

 

The How and Why of Minimalism

 

6 Steps to Perfecting Minimalism in Web Design

 

Functional Minimalism for Web Design


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

design navigation UI UX tubik studio

UI/UX Design Glossary. Navigation Elements.

One of the basic features of product usability is thoughtfully created navigation. It doesn’t matter if the visual performance is creative, stylish, original, catchy and so on and so forth, in case the users don’t know where they are and how they could reach their goals with the website or app. Whatever is the reason that brings users to your digital product, the high level of respecting them means letting them know what is going on and where they are going at every step of interaction with it. Earlier we have already published the Glossary posts with key terms for the topics of usability and web design as well as business terms and abbreviations. This time the perspective will get focused on navigation aspect: let’s check out what parts and elements of the interface are responsible for this vital issue. 

 

Dribbble shot Tubik Studio

 

Navigation

 

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

 

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

 

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

 

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

 

Tubik Studio UI sketches

 

Menu

 

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

 

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

 

tubikstudio ui app design

 

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

 

mobile app design tubik studio

 

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

 

CTA

 

Behind the widely used abbreviation CTA, designers and content creators mean call to action. This is actually the word of phrase which stimulates users to interact with a product in a way and for the aim it is designed for. CTA elements are the interactive controls 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.

 

Contact List Concept Scrolls Tubik

 

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

 

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

 

landing page UI design tubik studio

 

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

 

Bar

 

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

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

 

tubik studio tapbar ui

 

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

 

tubik studio motion design

 

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

 

juicy player UI Tubik Studio

 

Button

 

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

 

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

 

tubik studio page 404

 

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

 

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

 

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

 

tubik studio ice ui website

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

 

Plus button — the button that being clicked or tapped presents the ability to add new content, be it a new contact, post, note, position in the list — anything user could do as the basic action with the digital product. Sometimes, tapping this button, users are directly transferred to the modal window of creating content, in other cases there is also a medium stage when they are given additional option to choose from and make adding the particular piece of data more focused.

 

tubik studio button ui

 

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

 

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

 

Switch

 

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

toonie switch UI animation

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

 

Picker

 

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

 

toonie UI animation

 

Checkbox

 

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

 

todo list UI app tubik studio

 

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

 


 

Today’s set of our glossary is ready for those who need it and we are going to continue this practice before long. Don’t miss the new sets — the next one will continue the issues of navigation with deeper insights into types of menus and buttons, tags, breadcrumbs and icons. If there are any specific terms you would like to see explained, described and illustrated, feel free to contact via direct message in our Facebook page or Twitter as well as 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.

 

iOS Human Interface Guidelines

 

Navigation patterns for ten common types of websites

 

3 essential rules for effective navigation design

 

Perfecting navigation for the mobile web

 

Understanding Web UI Elements & Principles

 

User Interface Elements

 

The Most Creative Mobile Navigation Patterns

 

Basic Patterns for Mobile Navigation


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

Welcome to read us on Quora