Tag Archives: ux/ui

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

user motivation design

Two Types of User Motivation: Design to Satisfy.

No doubt, every designer — as well as any creative person — wishes to make something desired by lots of users, preferably on a regular basis. There is a group of creators who claim that they are interested in the process or the fact of creation and don’t care about the further life of the product, still, it’s incredibly tiny if compared to the number of people who want to see the results of their creative work usable, useful and regularly used. One of the key factors to achieve this goal is knowing the final users and ways to motivate them. So, today let’s take another little journey to the psychology of users, this time concentrating on types of motivation and their influence on design solutions.

 

What is motivation?

 

Basically, motivation is the term coming from psychology and dealing with behavior. This concept describes something that makes people do particular actions giving specific reasons for these actions or needs. Motivation is the force that gives people motives, defined in Merriam-Webster dictionary as «something (as a need or desire) that causes a person to act». According to professor of psychology J. Nevid, «The term motivation refers to factors that activate, direct, and sustain goal-directed behavior… Motives are the «whys» of behavior — the needs or wants that drive behavior and explain what we do. We don’t actually observe a motive; rather, we infer that one exists based on the behavior we observe.» (Nevid J., Psychology: Concepts and applications. 2013)

 

Motivation appears on the crossroads of biological, cognitive, social and emotional factors, that all together influence its strength and behavior it stimulates. Three basic features which could describe the motivation of any kind are the following:

  • Activation — the decision to activate the particular type of behavior, often stimulated by formulating a particular goal or achievement
  • Persistence — the power of effort which is taken in short-term or long-term perspective to achieve a particular goal
  • Intensity — the level of concentration and desire applied by a person to achieve the goal

 

Why is it important for designers to understand the types and mechanisms of motivation? Because it shows the direct way how to make the product correspondent to users’ expectations and solving users’ pains. The product, which is designed, can be extremely helpful, but to learn that, the user should be motivated to try. And design, being the part of the product, which is both functionally and emotionally appealing, is the first and powerful way to give a user the reason to try the app or website.

 

UI design product management

 

Two basic types of motivation

 

There are two major directions of how motivation evolves and they deeply influence the decision-making process. In short, they are based on what is the source when «Why would I do that?» appears and encourages us to act: some of these reasons come from the outer world while the others are found inside ourselves. On that ground, psychologists define extrinsic and intrinsic motivation.

 

Extrinsic motivation

 

This term unites the group of factors that come from outer sources. These motives can come from family, professional environment, competitions, contests etc. The motives of this sort encourage the person to deal with the outer world of other people as there is no other way to achieve the particular goals. It means that they involve the diversity of social reasons as well as stereotypes. Cultural background, age and gender, level of education, country of residence, religion and family status — these and many other factors can form and correct the reasons coming from outside and motivating people to communicate and behave this or that way. In the vast majority of cases, extrinsic motivation is a seek of reward, which can be tangible (money, prizes, diplomas, certificates, trophies, medals etc.) and intangible (praise, support, recognition etc.). The situation of competition itself presents the strong extrinsic motive: some of us are more motivated with not the prize we get but purely with the understanding that we won the others. Moreover, this factor can become even stronger in the case when there is direct support from others like friends or followers.

 

These factors should be the object of thorough research for UX designers as they actually present the doors opening the digital products to the world. The motivation via rewards has been widely used in all the kinds of games — without it for many users, a game usually doesn’t make sense — it should present the real goal which is achievable and stimulates persistence in the process of getting it. The wide invasion of the internet technologies and social networking added the element of constant competition with others strengthening the power of outer sources of motivation.

 

However, this mechanism of attracting and retaining users is applied in the variety of digital products now, including those which are far from games in their traditional understanding. When you are marked as the most loyal customer or are promised to be given a discount in case of the particular purchase; when you get the certificate via the online educational platform of which you can boast to you friends via social networks; when you are marked as the top writer or top contributor on the blog platform, and so on so forth — all that stuff presents the signs of extrinsic motivation. And that’s not bad: that’s just the way to make specific activities reasoned, which is crucial for most users. The trick is to find which reason works for this particular audience.

 

snake battle app UI design

Snake Battle App based on the extrinsic motives of winning the battle and getting rewards

 

Intrinsic Motivation

 

This is another side of the coin: that set of motives and stimuli comes out from the inner world of the person. These are the motives which are formed by the wishes and needs the person has due to its intelligence, soul, and heart. These are the motives which can be much harder to find and understand, but much longer to work successfully.

 

Intrinsic motivation is the inner engine moving a person to self-improvement whatever it could mean. In fact, people are born with this need and wish, which gets the higher level of development when the person satisfies basic needs like food and shelter and goes to the next stages in the hierarchy of needs. It’s natural for us to wish trying new things, to accept new challenges, to try our own abilities and gifts, to feel satisfaction from getting new knowledge and mastering new skills. This type of motivation is often stronger than the previous as it comes from what nature the person has and what personal likes or dislikes move decision-making process. In everyday terms, we often call this type of motivation «interest» or «desire» which becomes a significant factor for retaining users. And it’s a well-known factor that the simple explanation: «I do it just because it’s interesting» is one of the strongest motives which can only exist. It moves the user to act because of the subject of the activity itself rather than reward or recognition.

 

underwater world encyclopedia design tubik

Underwater World Encyclopedia based on intrinsic motive of getting new knowledge

 

wedding planner app UI design

Wedding Planner based on the intrinsic motive to optimize personal effort in organization of the event 

 

toonie alarm UI design

Toonie Alarm combining intrinsic motive (getting up on time) and extrinsic motive (getting stickers as rewards)

 

Getting the knowledge about target audience at the stage of user research, designers can analyze which types of motives and which their combinations will work for the specific users.

 

Intrinsic_extinsic_motivation_by_IDF

 

The visual presentation of two major motivation types by experts from Interaction Design Foundation 

 

Building motivation with design

 

Knowledge on the mechanisms of motivation can become the great help for UI/UX designers and information architects. The advantage of providing appropriate motives for the target audience can be applied at the levels of:

— thinking over the clear application or website structure and organization of triggers and informational blocks supported with rigorous user research

— building navigation and call-to-action elements according to things which engage users motivating them to act

— creating appropriate layout demonstrating key benefits or rewards

— providing supportive onboarding process motivating to try the product and test its functions

— presenting visual design solutions appealing to the target audience and adding the motive of aesthetic satisfaction

— including the copy which stimulates users, describes the key benefits of the product, the achievements users can get and support available in the process of interaction

— adding the features of setting short-term and long-term goals

— enabling users to share their achievements via various social networks — approval and praise of virtual communities is the powerful extrinsic motive nowadays.

 

user motivation design

Upper App using the mechanism of intrinsic motivation to boost users’ productivity

 

The bottom line is simple here: if you want users to like and use your product, give them a reason to love it. They will start their journey with «Why?» and will repeat that question regularly at different levels of interaction — so get prepared to show them the answer.


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

big city guide web ui design

Case Study: Big City Guide. Landing Page Design.

People say the world is a book and those who do not travel read only one page. It’s hard to argue since traveling is always a chance to learn new things, meet new people and do something absolutely extraordinary. What’s more, a nice trip can become a source of life energy and inspiration. Today, travelers have more opportunities than ever before and the World Wide Web plays the significant role here. The Internet provides loads of information about various countries and their cultures helping travelers decide where to wend their way.

 

Tubik designer Tania Bashkatova loves traveling as much as design, so she often combines these passions to create sophisticated concepts devoted to travelings and nature. Today we present the case study on the design concept of the website for travelers called the Big City Guide.

 

tubik ui designer

 

Task

 

UI/UX design for onboarding landing page presenting a website about big cities all over the world.

 

Process

 

The Big City Guide (BCG) is one of the first works made in terms of Tubik UI Fridays. Those following Tubik team on Dribbble already know about our new tradition which is 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.

 

During one of these creative sessions, the task was given to design the landing page for the online resource providing the information about big cities around the world. Typically for the design of landing pages, the designer decided to apply expressive and informative potential of the background images. The objective set for the visual design was to convey the mood and the atmosphere via one photo for each city. The solution found for this aim was the animated widget with horizontal scrolling presenting three big cities in order to create the efficient visual perception of the information for the target readers. The three different capital cities were chosen to show how dissimilar styles can be united in one design.

 

The first page of the BCG concept presents Berlin. The city is filled with various sights so it was the difficult choice to make. The designer tested many pictures to find the one which would bring the right mood of the city. In the end, there were two variants.

 

Berlin big city guide ui

 

big city guide berlin tubik

 

Both pictures make an effective design but the second conveys the atmosphere of solid and futuristic Berlin better so the designer favored it. The name of the city becomes the center of the composition, bold and quickly readable in strong uppercase letters. The word sets the high perspective of the famous tower. The letters are arranged among the spires in the way which gives the feeling they always were there.

 

The second featured city is Madrid. It is often thought that Spanish capital city fully consists of medieval buildings but that’s not exactly true. Today Madrid is one of the modern European business centers, so the designer decided to present the modern side of the city. Here is one of the examples made while searching for the best fitting picture.

 

Madrid big city guide ui

 

Yet the priority has been given to the bridge in contemporary style. Keeping the consistent scheme with the previous page, the center of the composition remains the name of the city. The word shows the deep perspective with the modern construction echoing the form of the swirl or vortex. The subheading presents the motivating line gives the mood of the energetic and bright city. Here is the final result.

 

Big City Guide Madrid tubik

 

Every new day brings new knowledge. Searching for the perfect background photo the designer missed the fact that there is not only Madrid in Spain but also another one in Iowa, USA. The Internet played a joke with the designer mixing photos of two Madrids, so it’s impossible to distinguish them for those who haven’t visited all the corners of these places. Well, that’s good to take lessons from the errors, and this case gave us all the chance to learn something new.

 

The last city featured is Stockholm. It is full of magnificent ancient buildings and modern-styled places, so the designer experimented with various photos of the city places. Here is the example with the picture of the underground in Stockholm which presents the part of the creative search for the visual concept.

 

Stockholm big city guide ui

 

However, all the urban photos couldn’t convey the unique atmosphere of Stockholm. That’s why the designer comes from the other side. Stockholm is one of the biggest Scandinavian cities, so nothing can deliver the Nordic vibes better than its nature.

 

web ui design city guide

 

This is the final variant of the Stockholm page. The content elements on the page are placed similarly to the previous with the name of the city in the center. The word is harmonically inscribed into the thematic picture with deep and magnificent Nordic forest. The subheading presents the motivating line whose message naturally combines with the image and the associations set by the city.

 

The onboarding landing page applies simple structure recognizable for users. The left part of the header features a clickable logo BCG taking users to the home page. The header menu allows people to see the full list of cities, go to the blog or learn the maps. Also, the service provides the registration feature. The search icon completes the header.

 

The vital part of any city guide is the description copy. Since the pages are focused on the name of the city, short copy is placed at the left bottom part of the page. CTA button under the text provides users with an opportunity to read more if they are interested in detailed information. The users can also find social network links easily in the footer.

 

The final stage of work on the landing page was the animation of the presented layouts, accomplished by motion designer Kirill Erokhin.

 

Big City Guide animation tubik

 

The static variants of pages have different colors of the background, but in the final animated version, all pages are united with one color. Smooth animation adds the dynamic nature of traveling and supports the feeling of consistent interaction. Navigation through the pages can be accomplished in two ways: via navigation button and with the help of progress bar placed on the top of the page. They both use the same contrast color to keep the visual consistency and make all the ways of navigation clear.

 

As we can see, despite the fact that all cities differ by style and energy they bring, the designer managed to keep them in a single tone creating the feeling of the website unity. Moreover, such a construction of the landing page makes it flexible for further alterations, for example, adding more pages of the cities which are particularly popular with readers of the website.

 

Tubik UI Fridays go on for more concepts and case studies we will share with you soon. So, follow our blog and Dribbble not to miss the updates.


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

graphic design tutorial tubik studio

Onboarding Tutorial Design: Greet, Inform, Engage.

The well-known quote by Chinese philosopher Lao Tzu says: «A journey of a thousand miles begins with a single step». When applied to numerous digital products, this simple yet powerful truth works the same way: the story of dealing with the app or a website starts from the first impression through the decision on trying to the actual interaction. All this process usually takes a little time but it’s often crucial to set the bonds between the user and the product. So, today let’s look a bit closer at onboarding process, starting from the popular technique of introducing the app to the user — onboarding tutorial.

 

ui animation design tubik

Social Network Tutorial

 

What is onboarding?

 

First of all, let’s look through the basic terminology. The concept of onboarding basically comes from the sphere of employment and HR: it is used to mark the number of steps and techniques aimed at helping newcomers to adapt to the new conditions and get comfortable to bring out good results. It’s not a secret that for many people trying something new is a sort of stress which demands some effort and consideration, so a little help could make the decision-making process easier and more harmonic. Special tactics enable to correct possible inconveniences and make people more confident at the new place, which means they become productive and socialized with their colleagues faster, bringing benefits to the company.

 

The advent of digital products as an integral part of everyday life absorbed this idea together with the term immediately. In this sphere, onboarding is the number of techniques and interactions whose objective is to comfort user and give the first concise introduction of the product.

 

One of the important issues which should be made by a designer working on user onboarding is thinking over the clear priorities. Users have limited time which they are ready to devote to learning how the product works before starting actual interaction with it. Moreover, people have limited capacities of working memory, and setting the priorities, creators of the product decide which dose of information is needed for this or that stage instead of trying to give the big amount of data at once making the user confused or embarrassed. In one of the recent articles in Adobe Creative Cloud Blog, UX researcher and cognitive psychologist Rob Youmans, who is YouTube’s Head of UX Research Sciences, says “When it comes to design, the place that I see primacy and recency in particular is in terms of onboarding. When you start to learn about a new product there’s often a tutorial, wizard, instructions or something. It’s wise for designers to consider primacy and recency in this context because you’re going to want to put the most important information first or last if you’re hoping that someone is going to remember them later as they use your product or system.”

 

What is onboarding tutorial?

 

Onboarding tutorial is the set of screens which are shown to the user in case of the first interaction with the product. In the vast majority of cases, designers apply 3-4 screens telling the initial information about the product to the new user. App tutorial is the sign of respect to the user: it gives the quick insight into what problems the app solves, how it can help the user and what benefits it gives. Surely, it is a good technique of boosting usability from the first minutes of interaction if it’s informative and clear.

 

tutorial_design_tubik_studio

Shauts App Tutorial

 

Why do you need the tutorial for your app?

 
Three basic functions of an app tutorial for easy onboarding could be described as following.

 

Greeting

 

App tutorials set the first contact between the user and the app. It is an act of introduction, in most cases imitating real communication starting with a greeting like «Hi!». It is especially actual when the app has a mascot or character which becomes a direct subject of communication with a user. Still, it’s important to be extremely careful and make the greeting as short and quick as possible not to distract users too much from the essential information.

 

Information

 

This is perhaps the most precious part of the tutorial mission for the user. First of all, the tutorial is a tactic of user onboarding, so it should inform users about the benefits they get using this product or basic operations they are going to do. User research and clearly set USP of the product will help the designer and copywriter to find the ways of providing the vital points quickly to the users.

 

Engagement

 

Another benefit of the tutorial is making it a foundation laid for building solid desirability of the product. Tutorials can quickly show the user the most beneficial sides of the products engaging them to try and tolerate with possibly hard first steps into unknown. Moreover, designed nicely, the tutorial provides the first insight into the style and appearance of the product which is (should be) based on the target audience research and becomes another hook boosting interest to see more. In most cases, users are visually driven and even more — aesthetically driven creatures: we tend to get interested with what appeals to our ideas of beauty and harmony or sets particular emotions via visual performance. And tutorial becomes a favorable way to set this approach from the first seconds.

 

tubik toonie help screens interaction

Toonie Alarm tutorial

 

What are the points to consider for tutorial design?

 

The structure and content of the app tutorial are surely highly individual for every particular project. As we mentioned in the articles devoted to UX research and creative stages of app design, there are numerous factors influencing the design solutions depending on three major perspectives: user needs/ wishes/ expectations, product nature, and business goals. Being the initial site of introduction of the product to the user, the tutorial is also the point of analysis and creative approach to presenting the essential information in the way which is dynamic, edible and attractive to the target user.

 

Custom images or illustrations

 

Most people perceive and decode images faster than words. It makes usage of illustrations logical and rational for app tutorials which have to give the information quickly. In the article devoted to the benefits of illustrations in UI, we mentioned that in the case of tutorials, illustrations, be it photos or originally drawn images, fully reveal their potential in explanation and clarification. The options can be totally diverse from simple icon-like to artistic and sophisticated artworks. Illustrations of this kind become a good way to boost usability minimizing the necessity of using the copy on the screens. They are particularly efficient in apps for kids and youngsters as they usually feel this sort of explanations more user-friendly.

 

travel app tutorial tubik studio

Travel App Tutorial

 

Design trends of the recent year have demonstrated the increasing popularity of custom illustrations created for the specific interfaces. App tutorials became the favorable ground featuring the variety of styles and approaches. In many cases, illustration becomes the center of the composition and its aim is to present a specific feature or benefit in an attractive and easily decodable way. Another popular approach is applying a mascot, which is a character imitating the flow of real communication with the user and setting emotional bonds.

 

Illustration Saily Tubik Studio design

Saily App Tutorial

 

Copywriting and typography

 

In the case of tutorials, words are power. However, there are two simple rules to support this power: tell them short and make them helpful. No secret, that writing a short informative sentence is much harder than writing a long one: you have to find the effective way not to waste those precious seconds which user is ready to devote to reviewing tutorial screens. If it’s possible, involve the professional copywriter who will find the way of creating copy for the interface that makes every single letter count. Make your homework, take time and effort to create the concise, attractive and clear copy which applies the language appealing correctly to target audience and corresponding to the objectives set for the product. As well as designed solutions, the copy should be tested as much as possible to find the shortest ways of informing users.

 

One more aspect that designers should bear in mind is that copy is one more visual element of design. As well as the icons, fields, buttons, illustrations, toggles and the like, it literally occupies the part of the screen or webpage as any other graphic component and influences the general stylistic presentation of the app or website. Furthermore, the success of the efficient copy directly depends on such design solutions as the choice of types and fonts, background, placement of the copy. All the mentioned aspects greatly affect the level of readability, so when they are done inappropriately, the copy will lose the chance to get all its potential applied, even being highly meaningful.

 

graphic design tutorial tubik studio

Singify App Tutorial

 

Animation

 

One more method to make tutorial not only informative but also attractive and engaging is applying animation. Motion makes interaction more dynamic, it is able to breathe life into the interface, amaze and catch user’s attention. One more good point is that animation can make the important details more noticeable. On the other hand, motion can increase the time and traffic needed to get it loaded, so it should be wisely applied and discussed with developers in the aspect of its technical realization.

 

ui animation design tubik

WaykeApp Tutorial

 

Clear page/screen indicator

 

Usually, tutorials consist of several screens, each devoted to one point or benefit to present. It’s vital to remember that from this very start of interaction users should know where they are and how long is the path. Page/screen indicator is a good and simple way to inform users about the flow of the process, and it shouldn’t be neglected.

 

Ability to skip

 

Another thing to consider is the choice of skipping the tutorial. Not all the users need it, even using the product for the fist time, so for some products, it could be reasonable to give them the ability to skip the tutorial. The decision upon this function has to be done on the basis of testing and analysis of the target audience.

 

underwater world encyclopedia design tubik

Underwater World Encyclopedia — section tutorial

 

In the bottom line, it’s vital to remember: in the interface, all the details count. Well-known proverb checked by many generations says: a good dress is a card of invitation, a good mind is a letter of recommendation. Surely, if the presented product is nothing good or helpful for the user, whatever good the tutorial will be designed, it won’t save the situation. However, if the product is user-friendly and problem-solving, app tutorial gives another chance to make the introduction smooth and pleasant. Good dress helps to impress — and thought-out app tutorial can easily prove it.


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

color theory design tubik

Color Theory: Brief Guide For Designers.

Many people think the choice of colors for UI mostly depends on the designer’s taste and sense of beauty. However, the process of the color selection is more complicated than it seems and plays a significant role in design. In one of our previous articles devoted to color psychology, we’ve found out that colors have the great impact on our mood and behavior. That’s why the success of the product depends largely upon the colors chosen for the design. The research provided by Colorcom showed that it takes only 90 seconds for people to make a subconscious judgment about a product and between 62% and 90% of that assessment is based on color alone. So, the appropriately chosen colors can be useful on the way of improved conversion for your product as well as advance usability of the product.

 

To create good design and employ colors more effectively, you need to understand how colors are formed and how they relate to each other. That’s why students at art schools, colleges and universities study the science of color theory devoted to colors’ nature. Today, we offer you to remember (or maybe even learn) the basics of color theory about the color combination which can be effectively applied in your design creating process.

 

Color Wheel

 

If you had any lessons related to painting, you must have seen the circle consisting of different colors. It is called the color wheel which helps to understand how different colors relate to each other and how they can be combined. The color circle is usually built of primary, secondary and tertiary colors. The primary are those three pigment colors that can not be formed by any combination of other colors. Combining primary colors, we get the secondary ones, and the mix of the primary and secondary colors gives us the tertiary colors which usually have two-word names such as red-violet.

 

color-wheel-2

Source

 

The color circle was created in 1666 by Isaac Newton in a schematic way and since then it has gone through many transformations but still remains the main tool for color combination.The main idea is that the color wheel must be made that way so colors would be mixed appropriately.

 

Color models

 

Before you start mixing colors you need to understand that color has two different natures: the tangible colors which are the surface of objects and the others which are produced by light such as the beams of TV. These types create two color models by which color wheel is formed: additive and subtractive.

 

The additive color model considers red, blue, and green as primary colors so it’s also known as RGB color system. This model is the basis of all colors used on the screen. The combination of primary colors in equal proportions of this system produces secondary colors which are cyan, magenta and yellow, but you need to remember that the more light you add, the brighter and lighter the color becomes. Results obtained by mixing additive colors are often counterintuitive for people accustomed to the subtractive color system of paints, dyes, inks and other tangible objects.

 

The subtractive color model obtains colors by the subtraction of light. It consists of two color systems. The first is RYB (red, yellow, blue) also known as artistic system often used in art education, especially in painting. RYB was the basis for the modern scientific color theory which determined that cyan, magenta, and yellow are the most effective set of three colors to combine. This is how the color model CMY has been formed. It was mostly used in printing and when the photomechanical printing included black ink, the key component, the system was named CMYK (cyan, magenta, yellow, and black). Without this additional pigment, the shade closest to black would be muddy brown.

 

difference-between-RGB-and-CMYK

Source

 

Additive vs subtractive

 

You should remember the major difference between these two systems: additive is for computers and subtractive for digital screens. If the design project you are working on is meant to be printed, don’t forget the simple but crucial rule: colors you see on the screen never look the same in print. Additive color spectrum is wider than CMYK, which is the reason why designers are recommended to convert their projects to the subtractive system of colors before printing so that they could see the result close to what they would get. However, if you work with digital products, RGB color system is the wise choice because it allows creating amazing things with its wide color spectrum.

 

Color Harmony

 

The word “harmony” usually associates with something orderly and pleasing. The color harmony is about the arrangement of the colors in design in the most attractive and effective way for users’ perception. When colors are organized, viewers feel pleased and calm, while disharmony in design gives the feeling of chaos and disgust. The color balance is vital in design since users make their impression of the website or application by the first look, and colors have the big influence. Designers distinguished the basic color schemes that work effectively.

 

Monochromatic

 

It is based on one color with various tones and shades of it. The monochromatic harmony is always a winning choice since it’s hard to make a mistake and create the distasteful color scheme.

 

business cards design

Deetu Business Cards

 

Analogous

 

To create analogous harmony, you need to use colors located right next to each other on the color wheel. This type of color scheme is used for the design where no contrast is needed including the background of web pages or banners.

 

ui animation design tubik

Night in Berlin App

 

Complementary

 

The complementary scheme is the mix of colors placed in front of each other on the color wheel. This scheme is opposite to analogous and monochromatic since it aims to produce high contrast. For example, the orange button on the blue background is hard to miss in any interface.

 

buongiorno_roma_illustration_tubik

Rome Illustration

 

Split-Complementary

 

This scheme works similar to the previous one but it employs more colors. For instance, if you choose the blue color you need to take two others which are adjacent to its opposite color meaning yellow and red. The contrast here is less sharp than in complementary scheme but it allows using more colors.

 

bebright_app_animation_tubik_studio

Be Bright App

 

Triadic

 

When the design requires more colors you can try triadic scheme. It is based on three separate colors which are equidistant on the color wheel. To save the balance in with this scheme, it is recommended to use one color as a dominant, the other as accents.

 

halloween stickers toonie alarm

Toonie Halloween Stickers

 

Tetradic/Double-Complementary

 

The tetradic color scheme is for the experienced designers since it is the most difficult to balance. It employs four colors from the wheel which are complementary pairs. If you connect the points on the chosen colors they form the rectangle.The scheme is hard to harmonize but if you do everything right, the results may be stunning.

 

mobile app design tubik studio

MoneyWise App

 

Color theory is a complex science which requires more than one day to learn. However, it is vital to understand the basics so that you could create the effective design with the knowledge of what you’re doing.

 

Recommended reading

 

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

 

Color in Design: Influence on Users’ Actions

 

Digital colour mixing explained

 

Color Systems — RGB & CMYK

 

Why Color Matters

 

Responding To Color


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

UI research web and app design tubik

User Research. Empathy Is the Best UX Policy.

Starting any project, which is not their personal presentation but a product for users, designers should be deeply aware: they work primarily not for self-expression, not for showing their creativity to the world, not for creating something revolutionary new that will make the world go round in opposite direction. They work to solve users’ problems, satisfy their wishes and achieve business goals.

 

That is why it’s vital to establish who the potential users of the future product are and which their wishes and needs could be met. This is the time when the designer turns into the researcher to get as much information as possible and analyze it for the sake of user-friendly solutions in design and interactions. In our earlier articles, we have already mentioned the significant role of user research in creating problem-solving user-friendly designs, and today we suggest getting deeper into its definition, methods, techniques and benefits in the process of creating a digital product.

 

web design tubik studio

 

What is user research?

 

Generally, the word «research», being quite universal for the diverse spheres of professional activities, roots into the Old French word recercher meaning «seek out, search closely»; first, it was the verb and later transformed into the noun of the same semantics. The modern definition of the noun according to Cambridge Dictionary state the meaning as «a detailed study of a subject, especially in order to discover (new) information or reach a (new) understanding». This sort of activity is widely applied in a variety of sciences and practical fields, including informational architecture and user experience design.

 

Basically, user research is the comprehensive and multilayered activity whose aim is to collect information about the potential target audience of the product. Via a number of techniques, user researchers collect and then analyze the information obtained from real users, and this outcome usually allows the design team to work on the optimal solutions which will make the product user-friendly and attractive.

 

Therefore, user research means getting deeper into details of core target audience to understand their preferences and psychological peculiarities, the influence of different factors like colors, stylistic decisions, and logic of interaction on emotions and experience of the defined group, the sources of information and creative performance ways which could engage users and make them active. On this basis, visual design presumes to create the original and recognizable style that will make the product stand out of the crowd and draw potential customer’s attention.

 

User research is actually the way by which designer is able to step into the shoes of the user and go along his or her path feeling all the stones on the way. This is the way to create designs based on empathy — the ability to place yourself onto the place of the other person, to feel what they are feeling and see what they are seeing. This precious ability enables designers to create things which not only work well and look good but also do what the particular users need them to do.

 

web development

 

Why is user research needed?

 

Famous guru of advertising David Ogilvy emphasized the great importance of research for creating effective result: «Advertising people who ignore research are as dangerous as generals who ignore decodes of enemy signals.» Time has changed the means, goals and technologies, still, the vital role of research established even stronger. Neglecting the research stage and relying only on their creative intuition, experience and talent, designers risk failing this task as they will not know the conditions of the app functioning and will not be able to make it efficient, user-friendly and original.

 

As we mentioned before, designers who start creating a product just at once when they get the task are quite risky guys. There are plenty of things to do before the designing process itself. Ignoring those things can give the interesting but not viable result. It’s important to analyze the competition, to understand the target market, to find out the sources of traffic and potential expectations of the users before setting off. Otherwise, you can waste much more time on loads of inefficient variants.

 

Toonie Alarm UI design

 

When is user research applied?

 

Describing the typical stages of product creation process here in Tubik, we have mentioned the set of the following stages: setting the task and initial scope of works; estimation; user/market research; UX wireframing; prototyping; UI design; animation; software architecture planning; development; testing; release; updates. Still, it doesn’t mean that all these stages go one-by-one in this order — some of them are interconnected and some of them are spread around the whole creative process. User research is applied at several different levels of creation, somehow changing the perspective and the goals on the data which should be obtained and analyzed.

 

We would mark out three typical stages when user research is a must-do essential for creating the efficient design.

 

Pre-design research: this is actually the initial stage of the creative process when designer working over the project is exploring the requirements of the stakeholders and collects the maximum information about the target audience.  As well as in a scientific project, the scientist collects and analyzes the heritage of the previous specialists involved in the sphere to make the product actual, the UX designer needs to do the same to offer the solutions correspondent to what users need and want.  This is the time to talk, read and analyze a lot. This is when the designer needs to dive into psychology and behavior, together with the stakeholder set the goals of the product and investigate the factors which influence choices in this domain. Certainly, with every next project and each next dose of experience, the designer can get accustomed to user research techniques and needs less time for them. However, there never comes the day when the designer doesn’t need any time for research as long as every project has its unique requirements and its own USP which should be enlightened by design.

 

In-process research: it is applied at different stages of the actual design process when, having the chances to interact with users, discuss their wishes, watch their behavior and analyze the problems they have, designers explore the offered solutions in action and on that basis can alter some positions of their research and add more efficiency to the user interfaces.

 

Real product research: this is the another level of research applied to actually existing digital product users operate with. Applying various techniques of user testing, designers collect actual experience, analyze it and make improvements in terms of real cases of the product usage in different environments and conditions.

 

UI design Upper App

 

What are the dimensions of user research?

 

Certainly, there are numerous approaches to the process of research. Among them, we would like to draw your attention to the dimensions outlined by Nielsen Norman Group, highly experienced in the domain of research and analysis and regularly sharing their findings in this sphere. They offer to view the methods of user research along a 3-dimensional framework with the following axes:

  • Attitudinal vs. Behavioral
  • Qualitative vs. Quantitative
  • Context of Use

ux-landscape-questions

 

As we can see from the scheme, attitude is what people say while behavior is what people do. In real life, they are often different things and aspects, due to numerous reasons like individual traits of character, temper, education level, age, gender, beliefs and so on. Another opposition presents qualitative analysis, which is usually measured by definite numbers (like «how many clicks the user makes before accomplishing the payment») and qualitative analysis («why user can leave the page without registration and how this problem could be fixed»). And the context of use analyzes all the additional factors which can influence the outcome of interaction with the product, for example, is the user goes along the preliminary given script or interaction is full improvisation.

 

Analyzing the data in terms of different dimensions, designers are able to take the comprehensive outcome enabling to make solid decisions about the interactions and visual performance.

 

What are the methods of user research?

 

Today, user experience design has already grown into a sphere with the considerable background of project and research cases, which have resulted in the extensive set of different research methods. Some methods are used on a regular basis, some are more rare and specific, yet it’s good for designers to be aware of a variety of them. Let’s briefly review the popular ones.

 

Interviews. Perhaps the most widely spread method when, having set the target audience of the product, people involved into the creative process interact directly with potential users and ask them questions to collect information. The quality of questions is the issue of high importance here. It’s effective to apply both close (yes/no) and open (giving the detailed answer) questions to let users provide diverse information.

 

Personas. The technique which has been applied in marketing and sales for a long time with client/buyer personas and now has transformed into a new perspective of user personas. With this technique, designer collects the data about the potential target audience, its psychological and behavioral preferences and habits and creates a bunch of imaginary users with these characteristic. On the ground of this data, the designer models users’ interactions with the product and possible issues that can arise in the process.

 

Sorting cards. This technique is effectively applied in cases when designers deal with the products presenting complex interfaces and variety of diverse content. The users are asked to categorize the content and set the hierarchies. In this way, the designers obtain the data showing how users see this sort of content and what way of its organization would be efficient for quick and easy navigation around the app or website.

 

Surveys. Another traditional method of scientific and social explorations when users are offered the set of questions. Answering them, users give the actual information enabling designers to understand their preferences and wishes deeper.

 

Focus group. Popular method presenting the moderated discussion of the product, its features, benefits and drawbacks within the group of people potentially close to the target audience. Altering some characteristics of the group, for example, age, gender, education level, tech literacy, researchers can receive the variety of data and see how these features can influence user behavior.

 

Task analysis. The method exploring the tasks and goals which users have interacting with the product. Understanding what users want to do enables designer to consider the fast and effective ways to achieve these goals.

 

Eyetracking. Special devices enable the designer to review which zones of the website or app users interact with more actively and use these zones in the most efficient and informative way.

 

Participatory design. Users are offered the set of elements for the layout and can suggest their own vision of the construction.

 

Clickstream testing. The analysis of the most clickable parts of the layout with the aim of designing clear interactions and reveal the problems.

 

A/B Testing. The users deal with one variant of design (version A) for some time and then another variant (version B) while the researcher collects the information along the necessary metrics and makes the conclusion about the efficiency of the versions.

 

Daily Reports. The user is asked to interact with a product for a particular period providing the reports on a daily basis. This helps to check the usability of the product in the perspective of long-term use.

 

Desirability testing. The users are usually offered visually and stylistically different versions and provide the feedback which version they would prefer and why.

 

design navigation UI UX tubik studio

 

What are the important points to consider in user research?

 

Collecting the data about user behavior and preferences via diverse methods and techniques, the designer has to take into account the following factors:

 

— the environment of use (the factors of using the product indoors or outdoors, the level of light, noise, available time and tons of other things can have an impact on design solutions)

— factors of intrinsic motivation (the internal personal stimuli moving the person to act)

— factors of extrinsic motivation (the outer factors of getting a reward or avoiding punishment that encourage people’s behavior)

— longevity of the product (based on the period for which the product is planned for use: if it grows together with the user or is applicable only in a particular age).

 

It’s should be remembered that removing the mistakes in design, even if its already high-fidelity level, is faster, cheaper and less painful for users than fixing negative issues with already launched and operating product.

 

The bottom line is simple. Don’t be lazy to research vital points of the project before you start designing. Don’t fancy doing the research? No problem, go to duck and dive in loads of baseless concepts instead of going along the solid path of understanding the user’s needs and wishes. Just don’t forget: it’s not you who decides that the product is successful, it’s not even other designers or stakeholders. It’s users. So, empathy is the best policy.

 

Recommended reading

 

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

 

Complete Beginner’s Guide to UX Research

 

When to Use Which User-Experience Research Methods

 

User Research Basics

 

Pareto Principle-Based User Research

 

How To Conduct User Experience Research Like A Professional

 

Open-Ended vs. Closed-Ended Questions in User Research

 


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

Bakery website design case study tubik

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

Design for e-commerce platforms is a special field of knowledge and practice. On the one hand, there are more and more users with an average or high level of tech literacy, who trust this way of shopping and are open to buying online. On the other hand, the level of competition in the field is also becoming more diverse and comprehensive with the constantly increasing number of services and platforms for selling and buying via the Internet. 

 

In one of the chapters of our e-book «Design for Business», the success of e-commerce activity depends on several factors among which:

 

— the quality of the product or service offered

— the quality of the content presenting the offer to customers

— the quality of design for the electronic platform — website and/or mobile application — via which the sales are going to be delivered.

 

So, it’s easy to see that UI/UX design for digital products of this kind plays the vital role. Thoroughly thought-out logic and transitions, simple and clear microinteractions, fast feedback from the system, attractive product presentation, easy payment flow and plenty of other details and features can directly influence increasing profits for the business involved in such a popular e-commerce game. This is the field where designers and business experts can work as one team for good of everyone, first of all of the target user.

 

Today’s case study is all about this theme: it presents the UI concept for Vinny’s Bakery website. 

 

tubik studio landing page design

 

Task

 

UI/UX design of a website for a small elite bakery selling fresh hand-made bread.

 

Process

 

Designing e-commerce website or mobile app, designers should definitely consider the following aspects:

 

  • operational simplicity
  • strong branding
  • security of users’ data
  • effective use of visual elements
  • clear data presentation via menus, catalogs etc.
  • user’s ability to leave feedback about goods and services
  • easily available general and contact information about the business providing goods or services
  • design that supports the offer not overshadowing it.

 

Grounded on these general principles, Tubik designer Ernest Asanov studied the trends on the market and analyzed the potential target audience of customers who would actually buy the goods, not just watched the offers. On the basis of the obtained data, in UI design he followed the philosophy of minimalism which is user-friendly, attractive and informative.

 

tubik_studio_website_ui_bakery

 

The website promotes a small bakery selling homemade bread. The home page presents the service, providing the links giving more information about the company and the items it offers as well as links to social accounts. The designer was keen to activate different techniques of visual perception via headline, images, background and copy block so that users could get the basic information immediately and got the warm feeling of freshly baked bread. On the basis of the design solutions, it is easy to assume that this is the service positioning itself as a producer and seller of upmarket products which are exclusively hand-made and presumably because of that reason cost higher than average bread in the supermarket. Harmony is the style provided by the webpage: dark background, branding element as a central element of a header, strong and clear headline establishing positive emotional message, visual elements enabling immediate perception of the theme and setting strong visual association with tasty pastry, short text block describing basic benefits of the product and clear visible call to action.

 

Bakery website catalog design ui

 

The next webpage to look at is the catalog of the offered products: again, it supports the user with the prominent and high-quality photos of actual products with brief core information on every position. Users can also quickly review the rating of every item and its price. Horizontal scroll is applied for seeing more positions, that’s why the last item is shown not in a full view to let the user see that this is the direction of scrolling. Call-to-action button, via which the user can add the item to the cart, is designed with a different color comparing to all the other elements of the interface, and this technique allows making CTA prominent and seen immediately. Such an interface lets users add goods right from the catalog without the necessity to go to the page of this particular position. It’s a user-friendly way to go, especially for loyal customers who know well the quality and tastes of the presented bread and wouldn’t like to spend their time on additional transitions just to put the item into their cart. Still, if the user wants to know more about the particular item, it’s easy to do by just clicking or tapping on it in the list.

 

bakery website product page ui

 

Clicking on a particular item, users get the access to more detailed information about the bakery item, including the description, weight of the pack, nutritional rates, rating, price and CTA button. The photo of the item remains the only pictorial element of visual support which makes the interface concise and non-distracting. 

 

Bakery website animation

 

Here you can see the full set of the transitions: you can see that header and footer are fixed, the horizontal scrolling opens more positions in the catalog and strengthens the feeling of the minimalistic and focused interface. The interactions are supported with smooth and unobtrusive animation making the interface even more stylish via the imitation of interaction with physical objects in the real world.

 

Another aspect to mention generally about this web design concept is typography which presented on more object of the thorough creative search for the designer and resulted in the combination of fonts, that are effectively contrast and easily readable. Color applied for headings presented in bold and prominent font and applying uppercase letters echoes the color typical for the freshly baked bread, while the color of copy blocks sets the visual association with the flour on the baker’s table — the element which is used on the background imitating the cooking worktop. Therefore, all those elements get visually connected to each other and present the web interface which looks harmonic and consistent. These are the feelings playing the significant role in building up the positive user experience and attracting buyers to use the service again and again.

 

designers tubik teamwork

 

No doubt, new day will bring fresh challenges which will result in practical case studies for Tubik Blog readers. Stay tuned, have a tasty day and don’t miss the new posts!


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

psychology of design article tubik blog

Psychology in Design. Principles Helping to Understand Users.

Some people are used to thinking of design as a purely artistic job but there is much more standing behind it. The sense of beauty and inspiration are not enough to create the proficient design. That’s why designers should possess certain knowledge and skills of distinct sciences to do their job right. And it’s not only the art of design, it’s also about various fields of knowledge and practice which help them work efficiently and productively. One of the basic studies helping designers to understand users is psychology. Today, we will figure out what a big part psychology plays in design and what psychological principles are essential to remember during the design process.

 

tubikstudio ted-talks collection

 

The role of psychology in design

 

Today the tendency of user-centered design makes designers reconsider approach to their work and go deeper into the understanding of the target audience. Donald A. Norman in his book “The Design of Everyday Things” defines design as an act of communication, which means having the deep understanding of the person with whom the designer is communicating. In order to get better insight into people’s needs, designers are recommended to bear in mind the psychological principles of human behavior, aspirations and motivations.

 

The outcome of the work can be even more positive if a designer applies psychology in the creative process since the science gives the close understanding of the target audience. Psychology knowledge helps to create the design which will make users perform the actions they are expected to such as making a purchase or contacting the team.

 

Designers may see psychology as a complicated approach to improving the design and for that reason neglect this part of research and analysis. However, you don’t need to be a Ph.D. in psychology to use it at your work effectively. All you need to consider are the basic principles constantly presented in design. Based on our experience and the conducted research, we’ve defined six effective psychological principles often applied in the design process.

 

tubik studio quote collection

 

Gestalt Principles

 

This psychological theory is almost 100-year-old but it hasn’t lost its actuality. The word “gestalt” means «unified whole» so the 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. The principles, on which users form the groups, include:

 

Similarity. If a user sees objects that look somehow similar, they may automatically perceive them as the individual elements of one group. The similarity between elements is usually defined with shape, color, size, texture or value. The similarity gives users the sense of coherence between the design elements.

 

Continuation. It is the principle according to which the human eye moves naturally from one object to the other. This often happens through the creation of curved lines allowing the eye to flow with the line.

 

Closure. It is a technique based on the human eye’s tendency to see closed shapes. Closure works where an object is incomplete but the user perceives it as a full shape by filling in the missing parts.

 

Proximity. When objects are placed in close proximity, the eye perceives them as a group rather than seen individually even if they aren’t similar.

 

Figure/Ground. This principle demonstrates the eye’s tendency to separate objects from their background. There are lots of examples of pictures that shows two faces depending on where your eye is focused the object or background.

 

website design for photographers

Photography Workshops  website

 

The Gestalt principles confirm in practice that our brain tends to make tricks with us, so designers should consider that fact during the creation process to exclude the possibility of misunderstandings.

 

Visceral Reactions

 

Have you ever had that feeling when you fall in love with the website after the first second when you’ve opened it? Or maybe an application has made you sick only with the quick glance at it? If yes, then you’ve already known what’s a visceral reaction. This kind of reactions comes from the part of our head called “old brain” responsible for the instincts and it reacts much faster than our consciousness does. Visceral reactions are rooted in our DNA, so they can be easily predicted.

 

How do designers use this knowledge? They aim at creating a positive aesthetic impression with the design. It’s not that difficult to guess what looks nice to people and what doesn’t if you know your target audience and their needs. So, the tendency of using the high-resolution beautiful photos or the colorful pictures at landing pages, websites or any other web and mobile products is not accidental.

 

jewellery_e-commerce_app_concept_by_tubik

Jewelry E-commerce Application

 

Psychology of Colors

 

A science studying the influence of colors on the human’s mind, behavior, and reactions is called the psychology of colors. Today we won’t go deep into the aspects of this study since it is complex so deserves to have a specialized post devoted to it (on which, besides, we’re already working). In a few words, the main idea of the study is that the colors have a great impact on the users’ perception. That’s why designers should choose the colors knowingly to make sure their work presents the right message and tune.

 

Here is the list of the basic colors and the meanings which they are typically associated with:

Red. The color usually associates with passionate, strong, or aggressive feelings. It symbolizes both good and bad feelings including love, confidence, passion and anger.

Orange. An energetic and warm color bringing the feelings of excitement.

Yellow. This is the color of happiness. It symbolizes the sunlight, joy and warmth.

Green. The color of nature. It brings calming and renewing feelings. Also, may signify inexperience.

Blue. It often represents some corporate images. It usually shows calm feelings but as a cool color it also associates with distance and sadness.

Purple. Long associated with royalty and wealth since many kings wore purple clothes. It’s also a color of a mystery and magic.

Black. The color has a great number of the meanings. It associates with a tragedy and death. It signifies a mystery. It can be traditional and modern. Everything depends on how you employ it and which colors go with it.

White. The color means purity and innocence, as well as wholeness and clarity.

 

tubik studio web UI design

Slopes Website

 

Recognition Patterns

 

You may have noticed that website or applications united with one theme usually have common patterns in their design. The reason is the users’ psychology. The thing is that people visiting a website or using an application are expecting to see certain things associated with the definite kind of product.

 

For example, visiting a website of a barbershop, the users are not expecting to see bright colors or pictures with cats or anything like this because if they do see it, this will definitely make them think of a website as an untrustworthy resource.

 

However, not only the colors and pictures matter. Some obvious and common things such as a list of blog posts on the front page of a blog or the filters in the e-commerce website are also important for successful navigation. Users become accustomed to things quickly and their absence makes them feel uncomfortable.

 

todo list UI app tubik studio

To-do list concept

 

Scanning Patterns

 

In our article Tips on Applying Copy Content in User Interfaces, we’ve already mentioned that before reading a web page, people scan it to get a sense of whether they are interested. According to different studies, including the publications by Nielsen Norman Group, UXPin team and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.

 

F-pattern is referred to as the most common eye-scanning pattern, especially for web pages with the big amount of content. A user first scans a horizontal line on the top of the screen, then moves down the page a bit and reads along the horizontal line which usually covers a shorter area. And the last one is a vertical line down on the left side of the copy where they look for keywords in the initial sentences of the paragraphs. It usually occurs on text-heavy pages like blogs, news platforms, thematic editorials etc.

 

Z-pattern is applied to pages which are not so heavily concentrated on the copy. A user first scans across the top of the page starting from the top left corner, looking for important information, and then goes down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page, again from left to right. This is a typical model of scanning for landing pages or websites not loaded with copy and not requiring scrolling down the page, which means that all the core data is visible in the pre-scroll area.

 

Knowing these patterns, designers can place the elements in an effective way for users’ perception and help them perform expected actions.

 

Hick’s Law

 

The law states that the more options users are exposed to, the longer it takes them to make a decision. This means that the more options you give to users, be it products to choose or pictures to look at, the more time and energy it takes to make a decision about the next step of interaction. The possible result here is that the users make the choices but get unpleasant feelings after using the product, or in the worst case, they may not want to take such a significant effort and just leave.

 

That’s why designers are recommended to keep any options including buttons, pictures, pages to a minimum. Removing unnecessary choices, you make the usability of the product more effective.

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Psychology is an effective tool in design which makes the creative process more productive while the result is going to be more user-centered. We’ve told you about six useful principles but they are only the tip of the iceberg because there is much more to learn on the topic. Don’t miss our next blog posts continuing this useful theme!

 

Recommended reading:

 

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

 

Gestalt principles

 

The role of psychology as a design tool

 

5 psychology rules every UX designer must know

 

Emotional Design: Why We Love (or Hate) Everyday Things by Don Norman

 

The 5 pillars of visual hierarchy in Web design

 

6 principles of visual hierarchy for designers

 

On Visual Hierarchy

 

F-Shaped Pattern For Reading Web Content


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

upper app UI design case study

Case Study: Upper App. UI Design for To-Do List.

Famous author and motivational speaker Zig Ziglar once said: «You were born to win, but to be a winner, you must plan to win, prepare to win, and expect to win.» Planning our day and managing our tasks is the significant job we have to do regularly and devotedly in case we seek for success. Tons of books, articles and interviews from successful and productive people generally send the global message: to be productive you have to plan your day and tasks distributing your time and effort wisely. 

 

Would you like to have a reliable helping hand in the process of planning your days and setting goals effectively and without any distractions? Welcome to try Upper, simple and elegant free application for iPhones, designed and developed by Tubik team. Today this motivating to-do list is featured and spinning up at Product Hunt, so we’ve also decided to unveil some details of design and functionality with our readers.

 

Upper App to-do list tubik

 

Task

 

Full-cycle UI/UX design for the simple and motivational productivity app for iPhones.

 

Process

 

Creating the to-do list application, Tubik team realized the high scale of competition in this sphere of utilities: that was a step into the red ocean. Still, as it usually happens in the fields covering wide and diverse target audience, a variety of the products is another user-friendly feature: it allows choosing the styles and features every particular user likes. Continuing the theme of personal productivity, which was started with our previous app Toonie Alarm, we’ve established the goal to present the app of totally different look and functionality deeply focused on personal and professional motivation.

 

 upper app UI design

 

In UX perspective, the app interface was concentrated on extremely simple interactions and intuitive navigation, while in UI design the core concerns gathered around high readability level and visual hierarchy that would allow users to use the app easily in any environment and on the go. In addition, working over the visual performance of the app user interface, Tubik designer Ernest Asanov made a general stylistic concept choice in favor of minimalist and elegant solutions.

 

Functionality

 

The basic idea set behind Upper was creating helpful to-do list, deeply concentrating user’s attention on the tasks and deadline. That’s why it doesn’t include complex functionality, distractions or decorations. It presents only the features and elements needed for time and task management.

 

Functions and features provide the following:

  • All the features of the app are free for everyone
  • Upper Streak Challenge motivate users to complete all the tasks for the day
  • Statistics of tasks completion
  • Simple and clear navigation
  • Easy adding, deleting and marking tasks
  • Eye-pleasing slight animation
  • Instant sharing achievements with friends

 

upper app UI design case study

 

Design and Layout

 

Interactions: The basic functionality of the app is built around user’s ability to create the list of tasks which can be saved for the particular date and time, easily deleted or marked complete. In addition, Upper analyzes task completion progress and shows stats to keep users updated and motivated. The absence of distractions, simple screen design and thought-out typography make the content highly readable and allow using the app easily in any environment and on-the-go.

 

upper app UI design case study

 

Basic functional buttons are placed in the bottom of the screen, which supports usability for users with big devices. Different swipe gestures allow a user to mark the task complete or delete it from the list. Core information such as dates, the words for the closest days (tomorrow, today), the number of tasks and days in Upper Streak are presented in uppercase font, supporting both efficient visual hierarchy of the layout elements and the harmonic consistency in combination with the product brand name.

 

Upper App to-do list 7

 

Upper Streak: The original feature of Upper App is user motivation with special challenge of non-breaking plans and increasing productivity potential: the app motivates to complete all the planned tasks via Upper Streak Challenge. Streak is the period during which users don’t interrupt completing the tasks with Upper: it shows the achievement in being consistent and productive and encourages not to stop and break the progress. Seeing your determination, the app will challenge you with bigger number of tasks, so users are motivated to get organized and complete the plans with Upper without missing a day.

 

upper app UI design case study

 

Color and style: The app is designed in minimalist and elegant style of layout based deeply on quick functionality and intuitive navigation. What is more, users are provided with the variety of skins and can choose between dark, light and red skin depending on their personal taste and wishes. At the moment the app is presented in dark skin, but next update coming very soon will let users activate any of the three palettes.

 

upper app UI design case study

 

User-friendly navigation, supported with slight eye-pleasing animation, will help users to focus on their tasks.  No ads, no complications, no extra copy, interface motivating to create short concise notes for the tasks – nothing will distract from the goals. Application provides the simple calendar, allows saving notes conveniently, check stats and plan anything from everyday stuff to business objectives.

 

upper app UI design case study

 

To get more information on design and interactions, you can also review the full presentation of Upper App design or check full pack of the details via Upper Press Kit


Welcome to see full presentation on Product Hunt

Welcome to download Upper App via App Store

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