Tag Archives: mobile app

tubik free podcast design business terms

Tubik Podcast #4. Business Terms for Designers: Sales Basics.

Working on projects and concepts, designers often have to combine creative approaches and solutions with business goals. Effective outcome is based on not only design techniques and knowledge of user psychology but also awareness of sales flows and processes. Today we have prepared a new episode for the listeners of Tubik Podcast, the series of free audio talks devoted to various aspects of design. The fourth track presented here continues the set called «Business Terms for Designers» and considers basic notions from business vocabulary like conversion, niche, sales channel and sales funnel. On the ground of practical experience, we review them in design perspective for the sake of usable and useful digital products. Welcome to listen and follow the updates!

 

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

 

 

To learn more and see practical case studies, welcome to read or download our free ebooks. Stay tuned!

human memory tips on ux design

How Human Memory Works: Tips for UX Designers.

One of the greatest information processors we deal with in our everyday life cannot be seen or touched. It cannot be bought or sold as well as taken from other people; however, it can be developed and strengthened by many ways. It cannot be easily described but belongs to the most precious features of human life and determines perhaps any step we take and any decision we make. It is a wonder we rarely think about that way. It’s human memory.

 

Memory presents an amazing natural complex of data storage and processing. It keeps great loads of information through life and is even able to organize it for the sake of the holder. Moreover, it takes responsibility of setting priorities and keeping some details which could be remembered just off the top of our heads while erasing others which seem not necessary or haven’t been used for a long time. Human memory is one of the mechanisms determining person’s interaction with the outer world.

 

Obviously, this aspect needs to be studied and considered in the sphere of UX design responsible for interfaces of all kinds. Knowing how memory works, designers can create human-centered interfaces which correspond to the natural abilities of the users, save their effort and boost usability.

 

Ui design trends by Tubik Blog

Healthy Food App

 

Basic points about memory

 

In general terms, human memory is the natural storage for the data right in the human brain. It reacts to the outer stimuli, collects the data, processes it and organizes in different ways. Also, it enables a person to access the needed data collected in the memory when it’s needed. However, it doesn’t present the perfect mechanism as it’s influenced by a big number of factors of physical and emotional nature.

 

Basically, psychologists mention three types of memory:

sensory memory holds the data for a short moment when we perceive it with our physical senses like hearing, vision or touch;

— short-term memory (working memory) allows a person to keep some data remembered for a short period of time without repetitions;

— long-term memory presents the storage for big quantities of diverse data which could be saved for long periods of time, potentially up to the whole lifetime.

 

The effective methods of getting the information kept in long-term memory are repetitions and associations. Taking a look at the scheme below, which was provided in the article by Learning Solutions Magazine, we can see the basic flow of data from the first outer stimulus to the long-term memory.

 

memory work

 

Creating the flow of interactions with a website or a mobile application, UX designers have to take this factor into account. Surely, they aim at long-term memory which will keep the core data about the app and will allow using the interface easily again and again. Knowing the steps moving the data to this storage enables designers to set the effective strategy of data perception and necessary repetitions. Also, it helps to organize the data on the screen properly and strengthen information architecture of the product.

 

Basic laws of memory

 

Three core aspects of memorizing which are mentioned by specialists in psychology are very simple:

 

1. Concentration. To remember a thing or chunk of data, a person needs to concentrate on it. Otherwise, the chances are high that the data will be discarded on the level of short-term memory.

2. Association. The memory presents the huge network of links connecting different data. If a person builds the association which links the new data or object with something well-known or kept in long-term memory, the chances of memorizing get higher.

3. Repetition. It is one of the effective ways to activate the data in working memory several times until it moves to the long-term memory storage.

 

Organization of the interface content based on these three points performs with visual hierarchy and perception which can mark important layout elements that should be remembered and make the interaction easier.

 

cinema app interaction ui animation

Cinema App

 

Expert explorations of memory

 

There are also some laws and rules which were concluded from various research, experiments and practical testing. Among them, we would mention Miller’s Law and Hick’s Law.

 

Miller’s Law

 

The number of objects an average person can hold in working memory is about seven.

 

This exploration was offered on the basis of scientific research by George Miller in 1956 psychological review «The magical number seven, plus or minus two: Some limits on our capacity for processing information». In general terms, it states that short-term memory of an average human is able to keep and process about seven objects or chunks of data plus/minus two at once. Obviously, the formulation given here is generalized as the real flow depends on many factors, including the nature of information.

 

Later studies, for example, the review by Richard Shiffrin and Robert Nosofsky called «Seven plus or minus two: A commentary on capacity limitations» provided deeper insights into the work of working memory. In particular, the authors mention that the number of objects which a person can remember at once after they were presented is dependent on the nature of the objects, on average with seven for digits, six for letters and about five for words. It gives the brain abilities to quickly process information, recognize its character and connection to the objects already existing in long-term memory and finalize memorizing.

 

In design perspective, this information plays the vital role in building up the usable and clear layout. Interfaces, which demand to remember too many options at once, can create the tension and get users irritated even if they aren’t able to describe the reason of unpleasant emotions.

 

landing page animation Tubik studio

Magic.co landing page

 

Hick’s Law

 

The more elements people get, the harder it is to make a choice.

 

At the first glance, it seems that this law is not about memory, still, the connection exists. Memory is one of the mechanisms that protects people from negative experience. The more options people get at once, the more distracted they get with numerous associations which can be called — and that’s impossible to predict how good or bad they can be in this particular case. In addition, giving many options for the choice at once, again we can overload users memory with the bigger number then the working memory can process. In particular, this factor needs special attention in cases of platforms for e-commerce, which should keep the hard balance between giving the user all the necessary information and overwhelming him or her with too many options. Finding this harmony is one of the major challenges for UX designers.

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Tips for memory-friendly UX

 

On the basis of the factors and explorations given above, let’s consider a set of tips applying this knowledge for the sake of usability.

 

1. Don’t make users memorize many items at once.

 

Definitely, it doesn’t mean that all the screens or pages should be limited to 5-9 elements. Still, the number of elements that present core interaction points would rather be considered in these terms. Making several objects in the layout prominent and attractive, designers can follow the law of concentration which will catch the key zones like menu, call-to-action, an image presenting the product etc. Visual hierarchy is one of the vital strategies that enables to create an interface containing many elements visually grouped and divided in a way which is digestible for human memory.

 

It is also effectively applied to the copy content in the interfaces. In the article, devoted to this issue, we mentioned some investigations: according to the research published by one of the popular social media sharing platforms Buffer, the ideal length of the headline is 6 words; Jacob Nielsen provides the study at which shows that headlines of 5-6 words work effectively, not less than extensive headlines presenting a full sentence. One of the reasons for that is obviously connected with the ability of the working memory to process such chunks of data faster and more effectively.

website design for photographers

Photography workshops

 

2. Don’t present too many elements for the choice together.

 

It’s important to care about the concentration ratio. If you present several choices, buttons, options at once, you should be ready that it will take more time and effort for user’s short-term memory to work them over and this can distract him or her from making the final decision or interaction. This can be the reason of inefficient landing pages or sales funnels: even if they are stunningly designed, the over-distracted user can go away before the conversion happens. Apply scrolling and transitions based on careful prioritization, dividing the objects on the screen or page into groups of primary, secondary and tertiary importance — this will help users and make navigation through the interface more natural.

 

book swap app tubik studio

Book Swap App

 

3. Save memory effort with recognizable patterns and symbols

 

No secret, people are visually driven creatures, so designers usually master the art of applying images that not only attract attention but also inform users and organize the content. In one of our articles, we gave the details on how users recognize icons and copy. It shows that pictorial elements such as icons and illustrations are perceived faster while copy can be more informative. This can be useful in interface design to apply diverse models and markers which are widely recognizable not only in this particular interface but generally in a variety of them. Magnifier icons for search, shopping cart for the page collecting orders, plus button for creating a new item, flags marking the buttons changing the language — all of them present the elements existing in human memory for a long time and bringing up correct associations without the need to keep and process new information.

 

Moreover, going to a broader perspective, most users expect to see the sign of the brand and the links to core sections of the website in the header while the contacts, privacy policy, terms of use and credits in the footer. Knowing these and other similar patterns of user behavior, designers can save users’ effort making basic operations simple and intuitive. This way it’s easier to focus user’s attention on new data and make its perception quick.

 

tubik studio behance weather app

Weather App

 

4. Apply consistent markers in navigation

 

Navigation is the crucial factor of usability. Enabling to move through the interfaces, it also presents the data which should be kept by users’ memory; therefore, designers apply a variety of techniques making transitions and interactions consistent and clear. For example, color or shape markers sorting out particular sections, icons defining specific groups of items, fonts used consistently for specific names or types of copy, illustrations and mascots uniting different screens — these and similar tricks boost memorability of the layout and often support user in processing new data.

 

Homey app smart home UI

Homey App

 

5. Don’t hide the core elements of navigation

 

The discussions about various menus showing or hiding blocks of content are still hot and popular. It’s vital to remember that the key aim of the interface should be the user clearly understanding what’s going on. So, the decision about hamburger menus, sliders, hidden layers of navigation and content should be based on the careful analysis of the target audience. In most cases, especially for the complex interfaces used by the diverse target audience, hiding core navigation elements can serve badly: users need to find and memorize the patterns of reaching them. Some users can appreciate the techniques saving space for other elements, while the others will be annoyed with the necessity to remember how to find the necessary section. Again, prioritization plays the great role: hiding secondary elements while leaving primary ones always visible, designers focus users’ attention on what is the core for them. User testing helps to evaluate the efficiency of the navigation flow and its impact on conversion rate.

 

bookshop website animation

Bookshop Website

 

6. Stimulate different types of memory

 

Remember the scheme given above? You could see that the first and the quickest stage of absorbing data is the sensory memory. Basically, it is divided into several types of memory which depend on the sensor: it can be visual, audio, kinesthetic, verbal, mechanical etc. Activating them, not only do designers create more memorable interaction flows, but also support broader circles of users. Research and experiments show that different people have different types of memory as the most effective for them. That’s why, for example, icons given with copy in the names of core categories of the menu can boost usability supporting users via both visual and verbal memory. Sounds accompanying interactions also create memorable flows and operations.

 

tubik studio application recipes and cooking

Recipe App

 

7. Remember about emotions

 

Make no mistake, emotional feedback from the interaction is the great factor in retaining or losing users. Bad experience stimulates quicker forgetting the details but tends to leave general negative feeling because in this way brain tries to protect the human. Vice versa, positive emotions, be it fun, aesthetic satisfaction, gratification for the quickly solved problem or accessible communication can bring the person back to feel it again and again. 

 

ui animation design tubik

Night in Berlin App

 

So, the bottom line is simple: creating interfaces for people, designers have to know how people interact with the world and what influences their behavior. Human memory is one of the essential features determining successful and positive user experience on both conscious and unconscious levels, so it needs to be studied, considered and tested for human-centered UX design.

 

Recommended reading

 

Here is a bunch of useful links which could provide further interesting explorations of the topic:

 

Short-Term Memory and Web Usability

 

UX and Memory: Present Information at Relevant Points

 

The Magical Number Seven, Plus or Minus Two: Some Limits on our Capacity for Processing Information

 

User Memory Design: How To Design For Experiences That Last

 

Visual Perception. Icons vs Copy in UI.

 

Total (Memory) Recall

 

The Properties of Human Memory and Their Importance for Information Visualization


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

information architecture for designers

6 Tips How to Apply Information Architecture in UX Design

Being a good designer means constant learning various sciences and methodologies helping to improve professional skills. One of the essential studies recommended to designers is information architecture. In our previous articles, we’ve defined the essence of IA and described the efficient techniques assisting designers in the workflow. We discovered that information architecture is believed to be a foundation of efficient UX and UI design. Moreover, the appropriate IA may become a compelling tool for designers when all its principles are considered. Today’s post continues this theme unveiling useful tips for designers on IA implementation.

 

Keep product goals in mind

 

Definition of product goals is a core stage which influences every team working on the project, be it developers or designers. So, before you start building information structure of the product, you need to learn what your client expects from the product. To achieve the product vision and see the whole picture, the product goals should be established. They should respond to the product strategy, be understandable to all the members of the creative team and achievable. Awareness of the goals gives a clear idea of what the tasks are and where to start. When the goals are set, designers can agree on the content elements and the purposes with the clients so that they could avoid possible misunderstandings resulting in additional work hours in the future.

 

copywriting tips

 

Conduct user research

 

IA experts consider the specifics of the target audience needs because IA puts user satisfaction as a priority. To learn more about the potential users, designers are recommended to conduct user research. It’s a process of collecting information about the consumers of the product via various techniques. When the data is gathered, the design team analyze it and work on the optimal solutions which will make the product user-friendly and attractive.

 

User research helps to dive deep into the details of core target audience to understand their needs and psychological peculiarities. Considering preferences of the users, designers are capable of creating a user-friendly product that will stand out of the crowd and draw potential customer’s attention.

 

design navigation UI UX tubik studio

 

Consider cognitive psychology principles

 

To comprehend the nature of the visual perception and the factors affecting users’ attention, designers learn the сognitive psychology principles. It is the science studying information processing that goes on inside people’s minds. Cognitive psychology experts state that there are various ways of data perception and different factors influencing people’s attention.

 

Based on the cognitive psychology studies and principles, designers developed many techniques helping to create powerful content. In article Psychology in Design, we described some effective psychological principles that are often applied in design including Gestalt principles and recognition patterns. The former theory explores users’ visual perception of elements in relation to each other. In other words, it shows how people tend to unify the visual elements into groups according to their similarity, continuation, or closure. Speaking of recognition patterns, people visiting a website or using an application are expecting to see certain features associated with the definite kind of product. That’s why designers apply various recognition patterns to help users be oriented in the structure.

 

tubik-design-books

 

Plan the navigation system

 

Information structure and navigation are two essential components of any digital product. In one of our UX Glossary articles, we’ve defined navigation 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 navigation system, in terms of IA, involves the ways how users move through content. 

 

Navigation of a digital product is based on the information architecture, so it’s vital to make sure it reflects and supports IA, otherwise the product may be unsolid. Therefore, designers are recommended to plan the navigation system while creating information architecture of the product.

 

Tubik Studio UI sketches

 

Don’t forget about visual hierarchy

 

To organize and prioritize content in interfaces clearly for users, designers apply a well-known technique called visual hierarchy. Its main goal is to present the content on the carrier, be it a book page or poster, web page or mobile screen, in such a way that users can understand the level of importance for each element. It activates the ability of the brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc. This allows users to see where the needed information is so that they could navigate easily.

 

web design UI concept tubik studio

 

Visual hierarchy plays a significant role in visual performance and readability of the copy content in digital products. Giving tips on applying copy content in UI, we distinguished core aspects helping to build powerful visual hierarchy. One of the essential points to consider for designers is scanning patterns. Lots of studies have shown that before reading a web page people scan it to get a sense of interest. According to different studies, including the publications by Nielsen Norman Group as one of the pioneers of this field, UXPin team, and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns. Detailed information about scanning patterns you can find here.

 

Knowing the principles of visual hierarchy, designers can create effective information architecture placing the key components of the content on the most scanned spots making users take expected actions.

 

wordpress theme design tubik

 

Things to consider

 

The science of information architecture may seem too complicated and demand much efforts but when you learn its basics and start applying them in design projects, you see how useful it is. Summing up the set of Tubik articles devoted to this theme, we’d like to single out a few main points.

 

— IA forms a skeleton of any design project for a digital product. Visual elements, functionality, interactions, and navigation are built according to the information architecture principles.

 

— Powerful IA is a guarantee of the high-quality product since it reduces possible problems of poor usability and navigation.

 

— Good information architecture is a foundation of efficient user experience.

 

— Information architecture is like a blueprint of the layout which needs to be generated by a visual scheme like a wireframe.

 

— Defining product goals is a core stage before IA creation.

 

— User research and cognitive psychology principles assist in predicting possible users’ reactions to the product and creating a user-friendly outcome.

 

— Clear visual hierarchy plays a significant role in the visual performance of the content.


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

ux designers tubik

10 Ways How User Experience Designers Bring Value to the World

What makes us feel happy at work? Choosing the career path or switch, we ask and answer tons of questions and try to analyze the variety of factors. No wonder: that choice determines our lifestyle, relations, personal and professional growth for the big part of everyday life. Recently, we’ve run into this sort of question at Quora which sounded like «How do User Experience designers (Mobile and Web) provide value to humanity?» and became the ground for today’s article.

 

The question is definitely great and the answer, in particular, can be important for the young specialists who are considering this career. Not only in terms of the humanity, but also in terms of yourself adding something to the global progress. Whatever people tell about money as the key point, in creative spheres there is a variety of research showing that designers need the feeling of creative growth and participation in global progress not less than a good salary. One of the articles in Harvard Business Blog mentions three big reasons that are common in making people happy at work: a meaningful vision of the future, a sense of purpose and great relationships. Specifying the sense of purpose, they state: «People want to feel as if their work matters, and that their contributions help to achieve something really important. And except for those at the tippy top, shareholder value isn’t a meaningful goal that excites and engages them. They want to know that they — and their organizations — are doing something big that matters to other people.» Being aware of the destinations and seeing themselves the part of globally important processes, people tend to make the choice of a particular career as good for them.

 

ux designers brainstorm tubik

 

Without getting dip into the sphere, you can see UX designers like people working out endless flows of screens. At the first sight for many people who don’t deal with all the aspects, this job looks neither interesting nor creative. And the aspect of its value for humanity also seems to be not so obvious. Here in Tubik, we’ve been lucky to see the sphere of UX design high and deep, in all its diversity, creating digital products for the companies worldwide. And what we’ve seen and taken part in, makes us certain to answer: UX designers do provide a considerable value for humanity.

 

Before starting the list of aspects for this value, let’s check the terminology. In one of the issues of UI/UX Design Glossary, we described UX in the following way: it is the general attitude and emotional feedback that user has at different stages of using the product. In terms of digital products, such as websites or applications, UX is a comprehensive term involving all the possible stages of user engagement. UX is based on several key factors such as usability, utility, desirability, attractiveness, the speed of work etc. If all the logic and possible issues of product implementation into real life are analyzed and designed properly, it forms positive user experience which means that users are able to satisfy their needs in a fast, easy and pleasant way. Positive user experience remains one of the strongest factors of retaining users.

 

Tubik-Studio ux design

 

Working on the UX for a digital product such as a website or mobile app, UX designers have to concentrate on such aspects as:

usability (the product is convenient, clear, logical and easy to use)
utility (the product provides useful content and solves users’ problems)
accessibility (the product is convenient for different categories of users)
desirability (the product is attractive and problem-solving, it retains users and creates the positive experience which they are ready to repeat).

 

All of the mentioned positions present the value for people in terms of particular operations done day in and day out as well as global processes in different spheres like commerce and business, education, management, housekeeping, communications and so on, and so forth. On the ground of everything above mentioned, we could assume several points of the value which UX designers provide to humanity creating a wide variety of digital products.

 

What are the values brought by UX designers?

 

1. They support fast, easy and productive communication worldwide via products like various messengers, social networks etc. Communication is one of the key reasons why people turn to websites and apps, and its flow has a great impact on user’s life, from personal chats with family and friends to professional online conferences and business negotiations. Creating user experience for this purpose, designers have to study the needs of the audience and offer the appropriate solutions which will make the product helpful for getting in touch with other people.

 

bikers website blog

StarDust Bikers Website

 

2. They support international collaboration working over successful experience for apps enabling productive work within a team scattered around. Today the world has a number of applications and tools enabling professionals to work effectively from different places. That creates new business contacts and supports a great variety of international projects. And by the way, sets the ground for creating new workplaces, raising profits and developing welfare which, no doubt, sound like credible value. The platforms, apps, tools and software enabling specialists from different cities, countries, and continents to operate in a big number of professional activities, all have user experience designers behind them.

 

3. They support everyday life of millions of people with digital products that solve actual problems (like to-do lists or apps for taking notes), inform (like news websites or different blogs), and entertain (like apps for listening to music and watching films as well as tons of games). Every day, using quite basic and simple things like alarms, news platforms, video apps or music players, most users don’t even imagine that simplicity of those interfaces and navigation which makes all the flow intuitive are the result of thorough work which takes many hours. User experience designers are the one who have to build these products helpful and pleasant-to-use on the balance of applied content, target audience and business goals.

 

upper app UI design case study

Upper App

 

4. They support and improve core spheres of human life like health care, education, commerce, and self-expression. In this aspect, UX designers are the contributors into different fields of human growth and development. They create the flows of interactions and layouts for educational websites, applications used in medical treatment and health care, data analysis, technical support and other directions. Add to it the variety of specialized platforms where people share their creative outcome like artworks, music or pieces of writing — all of them need experience and interactions appropriate for these needs.

 

health care app interactions tubik studio

Health Care App

 

5. They make technology more accessible which means closer to people of different ages and nationalities, levels of education and tech literacy, physical and mental abilities or disabilities. User research is one of the core parts of UX design, and one of the objectives is finding the solutions for problems, which could make using the product hard and tricky for some categories of users. Diligent UX designers aim at creating products which will be inclusive and accessible for users of different abilities.

 

6. They support the concept of non-stop learning through life via educational and information resources. Motion is life, and motion through the ocean of information around is not an easy part of it. People are born with natural curiosity, the wish of getting knowledge and being informed. UX designers contribute in this eternal human movement creating flows at which users, readers, learners will not get lost under the tons of data. They apply the techniques and methods of information architecture to make the interfaces organized and problem-solving for their readers.

 

tubik studio web ui design

Birds of Paradise Encyclopedia

 

7. They respond to the human need of harmony and aesthetic satisfaction finding the ways to make digital products both useful and beautiful. There are many people who support the idea that digital products of today should be minimalist and purely functional. However, life is not just like that: practice shows that people want to both solve the problems and feel aesthetic satisfaction using apps and websites. The balance of these things is included in responsibilities of UX designers.

 

calendar-app animation tubik

Calendar App 

 

8. They support the process of creating the products which will simplify and automate the decent mechanic processes saving time for activities applying creative human energy. More and more products nowadays, including chatbots, are able to automate simple things, for example, scheduling, computing, checking grammar in writing, analyzing and organizing received data etc. Those things allow to people to accomplish some tasks faster and easier and free their time for more creative tasks which machines cannot do. This is one more side of positive user experience.

ngin_app_car_statistics_animation_tubik

NGIN App

 

9. They keep the balance between the rational and irrational parts of human life and activity. UX designers work on the crossroads of rational and emotional sides of human life: creating apps and websites, they have to consider both logical thinking and typical interaction models as well as emotional background which can greatly influence user behavior.

 

cinema app interaction UI

Cinema App

 

10. They make beauty working and logical as well as they make simple operations beautified and pleasant to the human eye. No special comments are needed. UX designers know how to get the efficient combination of beauty and functionality, doing it in the way which the particular product and audience require.

 

home budget web interface

Home Budget app

 

Surely, this list is not full as well as the issue is not so purely positive. There are many aspects of the job of UX designers, some of which are inspiring while the others are challenging or confusing. Still, we suppose the given positions are a good ground to believe that the job of UX designer is the one creating real value which has plenty of shades and tones. On the other hand, this variety of values added by the representatives of the given professional field brings out the number of responsibilities for the job, which should be also considered and kept in mind.

 

ux designers tubik

 

Life of UX designers is not the life of a magician flying in silver clouds and saving the world with every move of a hand. No, it’s a flow of rigorous research and analysis, creative effort and review of the slightest details — and many other things to mention, as well as in any other job. However, that is definitely the job that brings something precious for the humanity of today and tomorrow.


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

Welcome to read us on Quora

information architecture for designers

Information Architecture: Effective Techniques For Designers.

Content is a constituent that can make any digital product valuable. Informative copy and well-thought visual elements of UI design are able to create the foundation for the successful product. However, even good content may fail in case it is structured badly. One of our previous articles was devoted to the basic points of information architecture and today’s post continues the topic.

 

In a nutshell, information architecture (IA) is a science of structuring content of the websites, web and mobile applications, and social media software. IA study aims at organizing content so that users would easily adjust to the functionality of the product and could find everything they need without big effort. Nowadays, when the user-centered approach in design is a top trend, many designers learn the principles of information architecture science which are believed to be a foundation of the powerful design. There are many experts working on IA development now, so loads of various techniques appear. Our article presents four efficient IA methodologies commonly used in design.

 

tubikstudio teamwork

 

Content inventory

 

Before you start constructing a layout of the product, you need to understand what elements your project will consist of. One of the first stages of building information architecture is called content inventory. The technique considers creating a list of the components for the future design project. The inventory list usually includes various elements such as title, author/provider, meta elements (keywords, description, tags), copy, images, audio, video, and document files.

 

A content inventory list assists designers at the different stages of the workflow. First of all, the list helps identify the essential content components in so that designers could plan the product structure. Knowing all the constituents, designers can place them properly. Furthermore, it’s an easy way to discuss the structure peculiarities of the project with your clients. It is much faster and easier to edit the list rather than modify the design project when it’s been started. Finally, the list of components can help designers deeply comprehend the content that results in creating appropriate connections between elements so that the design of the product would look integral.

 

tubik studio wireframing UI UX

 

Wireframing

 

Information architecture is something like a blueprint of the layout which needs to be generated by a visual scheme. The majority of designers constantly use the well-known technique called wireframing helping to create a simplified and schematic visual representation of a layout for digital products. Wireframes are similar to architectural blueprints: they are usually black and white illustrations, sometimes with bright marks or spots to outline specific areas or points, that give a clear vision of the project structure and connections between different parts.

 

Wireframing is a fast and cheap technique to plan the information architecture of the page or screen. Designers use wireframes to outline visual and typographic hierarchy of user interfaces, set the interactive zones and elements, plan transitions and interactions, organize the general layout markedly for the target audience. Since a wireframe is focused on the structure, not the visual and emotional perception of the details, designers try to keep it simple. They mostly limit it to monochromatic color schemes, with boxes and lines representing copy, pictures and all the interactive elements on the page.

 

tubik studio design process ux

 

Wireframing gives numerous advantageous opportunities not only for designers but for the whole development team and clients too. First of all, a wireframe is the first visual representation of a designer’s abstract idea. This step ensures that the developers and the clients get the full understanding of the project’s design. Furthermore, developers can clearly see the placement of the elements on the page. Some software for creating wireframes allows seeing all the sizes and spacing by clicking a single button that saves time for both design and development teams.

 

Organization structures and schemes

 

In our article “Information Architecture. Basics for Designers” we’ve defined four essential components of IA: organization systems, labeling systems, navigation systems, and search systems. The organization systems are the groups or the categories in which the information is divided. It helps users to predict where they can find certain information easily. To categorize the design components effectively, designers apply the technique of division into specific structures and schemes.

 

There are three main types of content structures: Hierarchical, Sequential, and Matrix.

 

Hierarchical. In one of our previous articles, we’ve mentioned well-known technique of content organization called visual hierarchy. It is initially based on Gestalt psychological theory and its main goal is to present content on the carrier, be it a book page or poster, web page or mobile screen, in such a way that users can understand the level of importance for each element. It activates the ability of the brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc.

 

Big City Guide tubik

Big City Guide

 

Sequential. This structure creates some kind of a path for the users. They go step-by-step through content to accomplish the task they needed. This type is often used for the retail websites or apps where people have to go from one task to another to make the purchase.

 

jewellery ecommerce app UI

Jewellery E-Commerce App

 

Matrix. This type is a bit more complicated for the users since they choose the way of navigation on their own. Users are given choices of content organization. For example, they can navigate through content which is ordered according to date, or some may prefer navigation along the topic.

 

health care app interactions tubik studio

HealthCare App

 

Content can be divided according to the organization schemes which are meant to classify the design components into certain groups. Here are some of the popular schemes:

 

Alphabetical. Content is organized in alphabetical order. This scheme works best when users know exactly what they’re looking for and know how to describe or name the object of search, so it can serve as a navigation tool for the users.

 

Audience. The type of content organization for separate groups of users. As an example, there are many educational resources which divide the information according to the skill level of the learners.

 

Chronological. This type organizes content by date and time. It’s often used on the news websites, event apps, and blogs.

 

Topic. Content is organized according to the specific subject. For instance, online book shops divide the products according to genres.

 

bookshop website animation

Bookshop Website

 

Content organization models

 

Designers have been working on the development of the information architecture field for a long time and so far they have established some efficient models of the content structure. Knowing them, designers can choose appropriate information structure for a product. Let’s take a look at the most common models.

 

Single page model

 

When the digital product requires a minimum of the content, the single page model is a perfect choice. Websites for a single product and with focused purpose often apply this type of data structure. As an example, we can consider design for the website promoting the brand new application. Its purpose is to make users upload the app, so generally, it provides a limited amount of copy with the focus on the button “Available on App Store”.

 

Upper App Animation

Upper App

 

Flat model

 

This model works best for the small websites or landing pages. In the flat structure, all the pages are equal and they are put at the same level of navigation, so they are interchangeably accessible for the users. This type of information structure is good for the websites which have a limited amount of the content and it’s not going to grow anytime soon. It may be a good idea to apply the flat model to the design of a startup company.

 

landing page design tubik studio

 

Index model

 

The index structure is one of the most commonly used. All the pages are equally similar to the flat model but the navigation system differs. Index model allows users to access pages via the page list which is available on every page of the product. This way, index model may contain more content and remain usable and simple for users since they can skip useless pages.

 

Bakery website design case study tubik

Vinny’s Bakery Website

 

Strict hierarchy model

 

The model received its name, not by chance. It’s called “strict” because it gives users only one way to access the subpages: from the main page. This structure is a good choice for the digital products that have a specific purpose. For example, e-commerce websites use the structure so that the users wouldn’t skip the important information about their new offers. Also, educational platforms may apply the model in order to make the educational process gradual.

 

Co-existing hierarchy model

 

This kind of information structure is probably the most difficult to apply. It combines the ideas of a few models. Similar to index model, it provides users with various ways to access the content still it aims at guiding people through the certain path so that they would take expected actions. That’s why to create such a structure, designers need to have a bit of experience in this area. However, it may be worth trying.

web design UI concept tubik studio

 

The Big Landscape

 

Daisy model

 

This type of content structure is common for educational websites and apps as well as the others which require users complete certain tasks. The daisy structure is built that way so users return to a homepage (sometimes other specific points) after they accomplish the tasks. For instance, many to-do apps automatically return the users to the main screen when they point the task as complete.

 

upper app UI design case study

Upper App

 

Information architecture is vital for the powerful design but it needs to be done right. The various IA techniques we’ve discussed above can be combined and applied depending on the product and the clients’ requirements. Moreover, they are constantly improved since the design field never stays still, so many new methodologies may appear soon. Our next article will continue the topic of IA so stay tuned!

 

Recommended reading

 

A Practical Guide to Information Architecture by Donna Spencer

 

The ultimate guide to information architecture

 

How to Make Sense of Any Mess: Information Architecture for Everybody

 

Information Architecture: For the Web and Beyond

 

Information Architecture Basics


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

information architecture for designers tubik

Information Architecture. Basics for Designers.

The World Wide Web contains a tremendous amount of information which is hard to imagine unstructured because a human brain wouldn’t be able to perceive any single thing. People got used to seeing content and functionality of the digital products as many of them are now: structured and easy to use. However, it doesn’t occur unintentionally. Designers and developers take a responsibility of constructing content and navigation system in the appropriate way for users perception. The science that assists experts in the content structuring is called information architecture. Today’s article is devoted to the essence of information architecture and presents the basic points every designer should know.

 

What’s information architecture?

 

Information architecture (IA) is a science of organizing and structuring content of the websites, web and mobile applications, and social media software. An American architect and graphic designer, Richard Saul Wurman, is considered to be a founder of the IA field. Today, there are many specialists working on IA development who have established the Information Architecture Institute. According to the IAI experts, information architecture is the practice of deciding how to arrange the parts of something to be understandable.

 

Information architecture aims at organizing content so that users would easily adjust to the functionality of the product and could find everything they need without big effort. The content structure depends on various factors. First of all, IA experts consider the specifics of the target audience needs because IA puts user satisfaction as a priority. Also, the structure depends on the type of the product and the offers companies have. For example, if we compare a retail website and a blog, we’ll see two absolutely different structures both efficient for accomplishing certain objectives. Information architecture has become the fundamental study in many spheres including design and software development.

 

UX design process tubik

 

The role of information architecture in design

 

Nowadays, when the user-centered approach in design is a top trend, many designers learn the principles of information architecture science which they believe is a foundation of efficient design. IA forms a skeleton of any design project. Visual elements, functionality, interaction, and navigation are built according to the information architecture principles. The thing is that even compelling content elements and powerful UI design can fail without appropriate IA. Unorganized content makes navigation difficult and inexplicit, so the users can easily get lost and feel annoyed. If the users face first bad interaction, they may not give the second chance to your product.

 

Many companies don’t see the importance of information architecture because they think it’s impractical. It’s hard to argue that IA takes some time to create it and requires specific skills to do it efficiently. However, powerful IA is a guarantee of the high-quality product since it reduces the possibility of the usability and navigation problems. This way, well-thought information architecture can save both time and money of the company which otherwise they would have spent on fixing and improvement.

 

IA and UX design

 

After reading everything written above, many people may have the question: “Isn’t IA the same as UX design?”. Technically, these terms relate to each other but they are far not the same. IA is a blueprint of the design structure which can be generated into wireframes and sitemaps of the project. UX designers use them as the basic materials so that they could plan navigation system.

 

UX design means much more than content structuring. In the first place, UX designers aim at making pleasant interaction model, so that users feel comfortable using the product. They encompass various aspects influencing users’ behavior and actions such as emotion and psychology when the IA experts stay focused on the user’s goals.

 

Let’s get this straight: good information architecture is a foundation of efficient user experience, so the IA skill is essential for the designers. Effective IA makes the product easy to use but only united with design thinking the product has the powerful user experience.

 

tubik studio design process ux

 

IA system components

 

If you want to build strong information architecture for the product, you need to understand what it consists of. Pioneers of the IA field, Lou Rosenfeld and Peter Morville in their book “Information Architecture for the World Wide Web” have distinguished four main components: organization systems, labeling systems, navigation systems and searching systems.

 

Organization systems

 

These are the groups or the categories in which the information is divided. Such system helps users to predict where they can find certain information easily. There are three main organizational structures: Hierarchical, Sequential, and Matrix.

 

Hierarchical. In one of our previous articles, we’ve mentioned a well-known technique of content organization which is called visual hierarchy. It is initially based on Gestalt psychological theory and its main goal is to present content on the carrier, be it a book page or poster, web page or mobile screen, in such a way that users can understand the level of importance for each element. It activates the ability of the brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc.

 

web ui design city guide

Big City Guide

 

Sequential. This structure creates some kind of a path for the users. They go step-by-step through content to accomplish the task they needed. This type is often used for the retail websites or apps, where people have to go from one task to another to make the purchase.

 

Bakery website design case study tubik

Vinny’s Bakery Website

 

Matrix. This type is a bit more complicated for the users since they choose the way of navigation on their own. Users are given choices of content organization. For example, they can navigate through content which is ordered according to date, or some may prefer navigation along the topic.

 

mobile app design tubik studio

MoneyWise App

 

In addition, content can be grouped according to the organization schemes. They are meant to categorize content the product. Here are some of the popular schemes:

 

Alphabetical schemes. Content is organized in alphabetical order. Also, they can serve as a navigation tool for the users.

 

Chronological schemes. This type organizes content by date.

 

Topic schemes. Content is organized according to the specific subject.

 

Audience schemes. The type of content organization for separate groups of users.

 

book swap app tubik studio

Book Swap App

 

Labeling systems

 

This system involves the ways of data representation. Design of the product requires simplicity, so a great amount of information can confuse users. That’s why designers create the labels which represent loads of data in few words. For example, when the designers give contact information of the company on the website, it usually includes the phone number, email, and social media contacts. However, designers can’t present all of this information on one page. The button “Contact” in the header of the page is a label that triggers the associations in the users’ heads without placing the whole data on the page. So, the labeling system aims at uniting the data effectively.

 

gym landing page concept by Tubik

 

Gym Landing Page

 

Navigation systems

 

In one of our UX Glossary articles, we’ve defined navigation 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 navigation system, in terms of IA, involves the ways how users move through content. It’s a complex system which employs many techniques and approaches, the reason why it’s wrong to describe it in a short paragraph. So, we’ll go back to the topic a bit later on our new blog’s article.

 

Searching systems

 

This system is used in information architecture to help users search for the data within the digital product like a website or an app. The searching system is effective only for the products with loads of information when the users risk getting lost there. In this case, the designers should consider a search engine, filters, and many other tools helping users find content and plan how the data will look after the search.

 

tubikstudio-ui-ux-design

 

To sum up, we can claim that information architecture is a core part of the powerful user experience design. Efficient IA helps users quickly and easily navigate through content and find everything they need without striking a blow. That’s why designers are recommended to learn the basics of the IA science.

 

The topic of information architecture is wide and there are more interesting and useful aspects. Our next article on this theme will be devoted to the various techniques and methodologies which designers employ to create efficient IA. Stay tuned!

 

Recommended reading

 

IA for the Web and Beyond

How to Make Sense of Any Mess: Information Architecture for Everybody

Information Architecture Basics

The Difference Between Information Architecture and UX Design


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

home budget app case study

Case Study: Home Budget App. UI for Finance.

Benjamin Franklin once said: “Beware of little expenses; a small leak will sink a great ship.” Management of finance and accounts has been an actual issue for a long time; still, for the recent decades, it has got a new perspective with the advent of modern technologies and the internet which is becoming more and more accessible. It presents a new challenge for designers and developers in terms of digital products which will help people to track and manage their money flows both professionally or just for themselves. 

 

This theme built up the foundations for a new UI design concept created in terms of Tubik UI Fridays: one of the creative sessions was devoted to Home Budget, the application for finance management. The creative team of UI/UX designers Ernest Asanov and Dima Panchenko and motion designers Kirill Erokhin and Andrey Pixy worked under art direction by Sergey Valiukh. Let’s review what design solutions were presented for the task.

 

Task

 

UI/UX design for the web and mobile versions of a personal budget manager

 

Process

 

Describing the functionality of the app in general terms, Home Budget allows users to manage their expenses and incomes, creating the extended database for tracking financial flows or changes and getting comprehensive stats. The app was planned to have two variants: the web version presented with an informative dashboard and the mobile version giving simpler information and enabling to add new data quickly and easily. 

 

For both variants of interfaces, the designers agreed about the dark background of the layout and the fonts which would have the high level of legibility for both letters and numbers. 

 

Dashboard

 

The web dashboard was aimed at presenting extended stats for the particular period. The choice of generally dark interface enabled the designer to create the attractive layout with prominently visible colored details drawing users’ attention to the interactive zones of key importance.

 

Dashboard_home_budget UI

 

With the dashboard, the users can get the data about their expenses and incomes processed and shown as a variety of statistics for a particular period. As we can see, different blocks of data are organized around cards. The presented page features the overview of the core blocks for the period of the recent week. The horizontal menu in the top part presents the navigation zone enabling the user to set the default periods of overview such as last week or last month as well as choose the custom period they are interested in. 

 

The cards present such information blocks of data:

— the menu with quick access to popular categories of expenses

— information on total expenses and frequency of transactions

— the list of popular transactions

— the cloud of expenses and weekly average rate in comparison to the previous period

— the line graphs of expenses and income for the chosen period graded by day on the horizontal axis and sums on the vertical axis

— the map with the pins marking the most frequent locations of spending money

— the block of recommendations based on financial operations of the period.

 

Another visual detail that could be mentioned is that for the graphs and markers presenting actual financial changes, the designer applied green and red colors which are widely recognized as signs of positive and negative financial balance. Also, the list of popular categories supports the presentation of each particular category with both name and icon to enhance navigation and make interactions intuitive. 

 

Home_budget_app_dashboard_animation_tubik

 

Here’s a piece of animated interactions with the dashboard. Slight unobtrusive motion of the layout elements supports natural microinteractions. When the graphs expand, the other blocks shrink naturally leaving the names of theme blocks visible and readable so that users could continue transitions easily.

 

Mobile UI

 

The other direction of the creative process was focused on the UI for a mobile app. While the dashboard is aimed at not only adding information but also presenting the results of its analysis, the mobile interface has the other core focus of functionality: first of all it is concentrated on having the user informed about the operation of the current day and enables to add new data in different environments and on the go.

 

home budget app mobile screen

 

Here is the feed of the latest financial operations, marked by categories shown via icons. The top part of the screen shows the tab of the users’ basic data and marks the credit card used currently. Also, you can see the graph reflecting the flow of finances during the day showed with vertical bars. To interact with it, users can apply horizontal scrolling. When the tab is active, the bottom shadow gives a prompt on that imitating interaction with physical objects.

 

home budget app mobile notifications

 

To get the access to the core zones of interaction, the users can press the hamburger button located in the bottom left corner which supports usability for those, who use devices with big screens. The application also shows the important notifications or recommendations to the user: they are shown in the top part of the screen, under the profile tab and over the bar chart zone. The notifications are presented in different colors that mark the nature of the message, for instance, applying orange for warnings and blue for reminders. 

 

Also, the user can interact with each particular position in the list. Left swipe opens the menu of options marked with icons: the entry can be quickly edited, shared or deleted.

 

Home Budget app interactions motion tubik

 

The mobile interface was also supported with animations. The one above shows the interaction with the hamburger menu divided into three sections.

 

home budget app interaction animation tubik

 

Another piece of animation shows interaction with the feed of financial operations for the current day. The warning notification adds more dynamic experience, attracting user’s attention with pulsing movement, and can be removed with a left swipe.

 

home budget app case study

 

This project has started the deeper immersion into the world of digital products for finance management for Tubik team and that was definitely the inspiring experience to be continued in further creative sessions. Follow the updates for new concepts and welcome to check the previous cases from Tubik UI Friday: landing page for Big City Guide and mobile interface for Night in Berlin app.


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

UX design process tubik

7 Key Motives to Invest Time and Effort in UX for Digital Product

Even if you are far from the design field, you must have heard of user experience (UX), since it has been a buzzword for the past few years. In a nutshell, it is the general attitude and emotional feedback that user has after interacting with the product. UX is based on several key factors such as usability, utility, desirability, attractiveness, the speed of work etc. Nowadays, user experience is thought to be as important as the visual identity. However, some companies still doubt if the UX design is a must-have or it’s just a trend which is a waste of time and money. Today we offer you to find out if UX design really matters and how it can help your business succeed.

 

Why does UX design matter?

 

Nowadays many companies say about the importance of effective UX spending money and time on its development. But what makes them think so? It is already proved that the success of the business heavily depends on how much users enjoy the product. UX design aims at enhancing user satisfaction by making products more useful and easy to use.

 

Some people may think that UX is based on the visual elements of the design but it’s much more than that. UX design is a complex process which consists of many stages including user research, wireframing, prototyping, visual and graphic design, animation and testing. It requires time and knowledge to create effective UX, the reason why it may involve additional innvestments not always expected by companies. However, UX design is beneficial for both startups and already existing products since it assists in many aspects which form the successful product including user engagement, usability, utility, and conversion rates.

 

If you have a complex website such as retail, it is crucial to have the effective UX design. It helps to organize content on the pages in the best way for the users’ perception and make navigation clear. Without appropriate UX design, there is a risk of losing users because they may find your product too complicated and useless.

 

The statistics collected in recent years show that 95% of mobile apps are quit within a month. That’s why to keep new users utilizing your app or website, the product should have pleasant experience which will make them stick around. Despite the given stats, according to User Experience Survey Report, only half of the companies invest time and effort in UX for the digital products.

 

Conducting the research for this article, we’ve distinguished seven key aspects of the successful product which can be managed via effective UX design.

 

UI design product management

 

Effective usability

 

Today the word “simple” isn’t associated with something boring. It is now the crucial aspect of the successful product. Don Norman in his book “The Design of Everyday Things” says that two of the most important characteristics of good design are discoverability and understanding. Users expect products to be simple and clear in use so that they could feel confident of what are they doing and don’t take much effort. This aspect heavily depends on UX design of the product.

 

UX designer’s objective is to create consistent experience for the digital products to keep users mind at ease. An effective UX design guides visitors through the websites and apps showing them what you can offer. UX designers can conduct deep user research and analysis and do some testing on few representatives in order to eliminate unnecessary, difficult and inexplicit options and make the digital product useful. What’s more, UX experts can create effective onboarding of the product which introduces people to the features of the app making users feel welcomed and not afraid.

 

 Tubik-Studio ux design

 

Driven user engagement

 

User engagement is a measurement of meaningful actions taken by the users and it’s one of the core aspects of the profitable products. Every company aims at creating the product with the high level of user engagement but not many of them know that good UX is a solution to this issue. Well-thought UX always includes various techniques that make users take the expected actions.

 

One of the trending methods in UX is gamification which is the technique of exerting game elements into the non-game environment, such as websites and mobile applications. Gamification brings the element of fun to the websites and applications. Moreover, game mechanics are the powerful motivators for the users. As the example, you can set the tasks for the users and give the awards to those who accomplish them. Curiosity and excitement drive people to continue performing various tasks and spend more time on the app or the website. UX experts are able to influence users’ behavior and motivate them as “players” to do the expected actions via game elements such as a challenge and rewards.

 

Unique product

 

It’s hard to say how many apps exist and how many of them have failed at the very beginning of their journey. There are loads of similar and even identical products on the market so businesses are looking for the answers of how to make users choose their products. UX experts can predict users’ reaction to your product by analyzing target audience needs and requirements. If you bring people the product with pleasant experience which is enjoyable and satisfying users’ needs, you may be sure they will distinguish your app from the others and give the preferences to it.

 

Tubik Studio UI UX designer

 

Saving money

 

UX design isn’t a free or cheap service still, it’s much cheaper than fixing usability problems when the product is on the market. Based on user research, UX designers accurately choose the set of features and plan the user interaction processes to exclude possible usability problems. In addition, UX experts carry out testing on some representatives of the target audience to analyze their reaction and improve the issues. UX design on the stage of product creation costs significantly less than making changes in your product after it’s been built.

 

Customer loyalty

 

Nowadays customers are extremely demanding and the unpleasant experience can make them annoyed in a second and they won’t return to the product again. Unhappy users will never be loyal to your product, so you have to make sure the people enjoy your product. UX design is a right way to your clients’ hearts. If your product is associated with the enjoyable experience, users will doubtfully change it to something else. What’s more, happy customers are more likely to recommend your brand to the others.

 

UI research web and app design tubik

 

High conversion rates

 

According to Nielsen Norman Group, the conversion rate is the percentage of users who take the desired action. The archetypical example of conversion rate is the percentage of website visitors who buy something on the site. UX designers master many techniques of the target audience analysis that allows them to influence on improving conversion rates. Deep user research and analysis help them defining the problems of usability and reasons making customers leave the product. Knowing the pain points of the product, you can solve them to increase conversion rates.

 

Positive brand experience

 

Brand recognition depends on not only the visual image but also the provided experience. Many users remember your product and form their opinion about it during the first time they’ve used the product. The first experience is vital and if it’s bad, your brand risks losing the customers. Good UX design can guarantee your brand positive experience. Providing product which users enjoy to use, you improve your brand recognition, because users don’t forget the things they have enjoyed.

 

UI design product management

 

Powerful UX design is obviously beneficial for businesses. It can be hard to see all its value but the fact remains: UX is an essential part of the successful product. It’s a tool which helps solve the problems of such aspects as usability, utility and user engagement. And finally, compelling UX design can save money and efforts which otherwise you would have invested in fixing and improvement of the low-quality product. What’s more, on this way you risk losing users who will not give your product the second chance after facing first bad interaction. Considering all the points said above, we may state that the companies get much more from UX design than they spend on it.

 

Recommended reading

 

Here are some articles providing further interesting explorations of the topic:

 

UI/UX Glossary. Steps to Usability.

 

The Business of User Experience

 

User Experience is Brand Experience

 

Good UX Is Good Business: How To Reap Its Benefits

 

The business value of User Experience (UX) Design

 

Conversion Rates


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

badges_illustration_tubik_design

Gamification in UX. Increasing User Engagement.

The user-centered approach, which strives for creating products highly responding to the user’s needs, has become the major philosophy behind many projects. Following this method designers constantly search for the new techniques improving user experience which depends on various aspects including emotions. The thing is that users expect a product to be simple and enjoyable in use, so the idea to add a “fun” element to the UX came as it is. But how to make the product fun and enjoyable in use? The technique called gamification was created to solve the problem. Let’s find out what’s the method of gamification in design and how it can improve UX.

 

What is gamification?

 

When we say word “gamification” in the context of design, it can be easily mistaken with the game design. Still, these terms hardly relate to each other, even more, they are opposite in many aspects. In the tech world, the word “gamification” stands for the technique of exerting game mechanics into the non-game environment, such as websites and mobile applications. For example, if you want to encourage the users to interact more with your application, you can add the game element such as a challenge. They can be challenged to check-in every day during a week and be rewarded if they do so.The thing is that people like having a clear goal and even more to be rewarded after it’s achieved, so such a challenge would doubtfully pass unnoticed among the users. This way, designers are able to influence users’ behavior and motivate them as “players” to do the expected actions via game elements such as a challenge and rewards.

 

toonie alarm stickers ios tubik

Toonie Alarm

 

Types of game mechanics for UX improvement

 

Gamification is a complicated design technique which requires using various game mechanics referring to the interactive UI elements. The main task for designers applying gamification is not to turn the product fully into a game. For this reason, there have been distinguished the effective game mechanics that are commonly used in design. Let’s see what they are.

 

Challenge

 

Human nature always makes us take the challenges and prove that we are able to handle them. So, a challenge is thought to be one of the most compelling game elements motivating people to take an action which can be a great tool on the way for UX improvement. In order to enhance the challenge effect, it may be a good idea to use some kind of rewards, so that users could feel even more motivated.

 

upper app UI design case study

Upper Streak Challenge in Upper App

 

Points

 

To measure the players’ success, many games use the points system. The gamified product can apply the same scheme that helps both users and stakeholders: the first sees their achievements and the others can estimate user engagement of the website or application. It is not necessary to make the count of points in the rating form. It may be just the number of check-ins or video views.

 

Badges and stickers

 

When users complete the challenge or gather a certain number of points, they can be awarded the badges or stickers. This kind of virtual rewards is often used in video games, so people are familiar with them. Stickers have gained people’s love long ago, therefore this kind of rewards will be appreciated. Besides, the badges and stickers give much room for the creative experimentations since they can be designed in various ways. Such rewards can become the additional drivers of motivation.

 

badges_illustration_tubik_design

PukaPal Badges

 

ui animation design tubik

Toonie Alarm Stickers

 

Leaderboards

 

The thing making the challenge even more interesting for people is the competition. Not many things can motivate users better than the desire to be the leader. The list of the “players” ranked in the order “Who’s got more badges” can increase users’ enthusiasm. However, in some cases, it may work contrarily demotivating people due to high ranks of the others. That’s why this game element is recommended to be applied carefully.

 

snake battle app UI design

Snake Battle

 

Journey

 

This game mechanic aims to make the process of interaction with the product as easy and understandable as possible. The user should feel as the real player starting the personal journey of the product usage. For example, on the onboarding page from which the user starts, they can be offered an introduction to the features, so that users won’t be afraid to make a mistake. When the journey continues, it is recommended to use the method of “scaffolding”. It means to disclose features progressively as the users become more experienced in using the product. Such an approach allows people to avoid errors and makes the product pleasing to use. Also, the journey element may be supplemented with the progress feature. Providing the information about the progress of the user’s journey, we can inspire them to continue.

 

graphic design tutorial tubik studio

Singify App Tutorial

 

Constraints

 

Many of us may think that it is not funny at all, still, there is a game element constraining players’ time. For example, the task in the games are often needed to be complete in the limited time, otherwise, players lose. The same approach can be applied to the gamified product. Users may be offered to do something which is available only today. The constraints make people react faster and somehow motivate them to take an action right here and now.

 

night in berlin tubik design case study

Night in Berlin App

 

These are some common examples of game elements in design but there is a room for the innovative game mechanics that can be applied in UX design. The major point to consider is that the product shouldn’t become too playful if it’s not expected according to general stylistic strategy and brand image.

 

The role of gamification in UX design

 

Today the method of gamification is widely used in design since it is thought to help to solve many problems in UX. The appropriate use of gamification and well-chosen game mechanics can become a valuable tool for UX designers on the way to increasing user engagement of the product as well as conversion rates. So how does it work? First of all, the gamification brings the element of fun to the websites and applications. People enjoy the interactive process full of fun, challenges, and competitive spirit similar to video games, so they are encouraged to go back. Furthermore, the game mechanics are the powerful motivators for the users. The game elements set the tasks and the awards are promised to those who accomplish them. The curiosity and excitement drive people to continue performing various the tasks and spend more time on the app or the website.

 

In addition, today gamification already goes as one of the major design approaches. Plenty of designers have caught the hype and actively apply this method in various projects. That’s why many users might already have an experience of interacting with the gamified products which mean they expect the same from yours.

 

Animated stickers mood messenger design tubik

Animated Stickers for Mood Messenger

 

Summing it up, gamification is quite a new technique which is now on the path of active proving its reliability as an effective design method. Nevertheless, its popularity is growing really fast so it has good chances to become the leading approach in a short time.

 

Recommended reading

 

Here are some more articles we could recommend for those who would like to get deeper into the topic:

 

Gamification And UX: Where Users Win Or Lose

Gamification: Designing for Motivation

5 examples of great gamification

Introducing Game Mechanics for Gamification


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

Night in Berlin app design case study

Case Study: Night in Berlin. UI for Event App.

Have you ever felt the urge to leave the planned and predictable routine and do something impulsive? Maybe go to the random concert of an unknown band, or visit the exhibition you are walking by? Certainly, you know that feeling. Nowadays, people move in the circle of the everyday drills and the desire to drop everything naturally appears from time to time. But when the moment comes, we often don’t know the places to go or where to find interesting events. Here is how we have come up with the idea for a new mobile app concept called Night in Berlin.

 

Night in Berlin is one of the design projects accomplished in terms of Tubik UI Fridays. In one of previous case studies, we told about our new tradition presenting the set of creative sessions when the designers have a day to work on the design concepts out of current projects. The concepts are created within a particular general idea of a digital product but with all the passion and freedom for the designers’ artistic souls. Today’s case study describes the creative process of the unusual mobile application design.

 

Task

 

UI\UX and motion design for a mobile event app.

 

UI Design

 

During UI Fridays the designers sometimes receive objectives far from ordinary. In this way, the team has an opportunity to create something absolutely unique. This time, the task given to the designers was to design a mobile application of the future. To specify the task, the art director gave them the background story. The designers had to imagine themselves in Berlin of 2019 where every night is extremely eventful. Their objective was to create the design concept for the mobile application that would come in handy to people who love hanging out at night. When the task was set, Tubik designers Ludmila Shevchenko, Eugene Cameel and Olga Popova started their work with art direction by Sergey Valiukh.

 

After active brainstorming, the designers’ team determined the concept of the app. It should be a simple application which enables people, who love socializing and visiting the latest events, to see the list of all the events, parties, exhibitions and the like taking place in Berlin. In order to add the effect of bright impulsive decisions, the list is shown at a particular time and only for the current day. The core thing the designers were supposed to keep in mind that the application is meant for the users of the future, so the design needs to be absolutely original and extraordinary. Let’s see what the team managed to create.

 

night_in_berlin_onboarding_tubik_ui

 

The first screen featured the onboarding with the countdown to the time when the list becomes available. The chosen gradient colors accurately convey the atmosphere of the night since they are associated with lights in night clubs. The illustration of the Fernsehturm, the famous television tower in central Berlin, is made in the corresponding colors, so the design of the screen looks solid. The app’s name is situated at the left bottom part of the screen. All the functionality is hidden behind the hamburger menu button placed in the top left corner allowing to make the focus on the countdown.

 

night_in_berlin_event_list_tubik

 

The screen above presents the list itself, informing the user about the variety of events. The data is organized along the cards for every event, which users can review scrolling vertically. Each card shows the key details about the event: its type, title and the time when it starts as well as the thematic image in the background. Being interested, the user can tap on the card and see more details about the offer.

 

Night in Berlin Event Details

 

When the users tap on the event card, they see the event screen. This concept features the exhibition in the art gallery, which is marked in the top right corner. The name of the artist and the exhibition are situated in the center of the page. The background image presents an actual artwork by the artists so the users are able to quickly catch the style and artistic manner, read the description and see the time when the event starts. All that combination provides the information to the user quickly, in clear and stylish manner.

 

night_in_berlin_app_event_screen_tubik

 

Motion Design

 

When the static variants of the screens were ready, motion designer Kirill Erokhin started working on the animations.

 

night_in_berlin_animation_tubik

 

Here is the animated version of the onboarding screen. The major element is the countdown numbers which are smoothly animated. The background is moving similar to haze changing the colors.

 

ui animation design tubik

 

This animation presents the screen with the list of events showing the user interactions. The data is organized along the cards for every event, which users can review scrolling vertically. The user can tap on the card and see more details about the event. The arrow button on the top of the screen brings the user back to the list.

 

Work over the design concepts of this kinds gives designers the prominent chances to think out of the box. It stimulates their creativity which beams brighter when given regular practice. Follow our blog and check out our Dribbble page not to miss the updates on the Tubik UI Fridays. More concepts and case studies are coming very soon. Meanwhile, you can be interested in reviewing another case study for the creative design concept called Big City Guide. Stay tuned!


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