Tag Archives: tips

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. Coding UI Animation.

No doubt, animation of interfaces still belongs to the most debatable issues between designers and developers. Animated UI elements often set the challenge to developers, so to enhance usability of an app or a website, the motion should be grounded on user research and add its two cents to the positive user experience. Developers in Tubik are open to this sort challenges: earlier we have already shown the case on coding motion for Toonie Alarm, this time we are continuing the theme with a practical case of developing animated interactions for Upper App.

 

Back to Basics: Core Animation and UIViewPropertyAnimator

 

Supporting designers and developers in creating attractive and functional interfaces for iOS apps, in 2006 Apple presented Core Animation, a system for animating views and UI elements of the app. Basically, it is a graphics compositing framework used by MacOS, iOS, watchOS, and tvOS to produce user interfaces with motion. It is not a replacement for the app views: instead, it is a technology that integrates with views to provide support for animating their content. However, the animation is not the only part of this framework: Core Animation presents the infrastructure for compositing and manipulating visual content. The framework uses GPU to accelerate rendering screen objects. Core Animation divides the visual content into individual objects that are called layers and arranges them in a tree hierarchy known as the layer tree.

 

The fundamental class that represents these layout objects is the CALayer class. It looks similar to UIViews implementation. The CALayer class manages image-based content and allows performing animations on that content. The main task of the layer is to manage the visual content but it also has visual attributes that can be set such as a background color, border, and shadow. In addition to managing visual content, the layer maintains information about the geometry of its content (such as position, size, and transform) used to present it on the screen. Modifying the properties of the layer is the way to initiate animations on the layer content or geometry. The app runs an animation. Layout, Display, Prepare and Commit phases are performed once before the animation starts. At this time the model layer is updated. The animation itself is rendered in a separate process on the render server using the presentation layer.

 

iOS animation

 

Nevertheless, whenever developers would like to interact with the animation (for example, pause or restart), it most likely leads to a huge piece of work. iOS open source community offers 3rd party (HTML, CSS, JavaScript) frameworks that can take care of this problem, like Pop, Interpolate and other.

 

iOS 10 provides a new way to animate that is UIViewPropertyAnimator. UIViewPropertyAnimator was presented in 2016 and it provides more extensive functionality on operations with animated interfaces. Vital to mention, it can be accessed only via iOS 10+ and tvOS 10+. The class allows developers to animate changes to views and dynamically modify the animations before they finish. This means programmers can stop (pause) in-progress animation, restart it at a later date if they wish and even dynamically modify the animated properties, for example, change the animation end-point to the top-right of the screen when it was previously the bottom-left. Developers can simply call the startAnimation() function on this instance to start the animation or animations. Anything that can be animated by the previous UIView API is eligible to be used in a UIViewPropertyAnimator instance. Here are its options:

 

  • Frame
  • Bounds
  • Center
  • Alpha
  • Background color
  • Transform (as long as it is a transformation in the 2D space, for 3D only with CoreAnimation)

 

UIViewPropertyAnimator gives programmatic control over the timing and execution of the animations. Let’s sum up what are the core differences of UIViewPropertyAnimator from CAAnimation:
 

1. After the creation of the UIViewPropertyAnimator object, the object of CAAnimation isn’t created for the layer;

2. After starting UIViewPropertyAnimator (by calling method startAnimation()) CAAnimation is created and added to the layer for animated UIView

3. Animation exists until it’s completed or deleted

 

The big advantage of  UIViewPropertyAnimator is that it’s new and has been created on the basis of modern requirements and needs, taking into account the specific features of Swift.

 

runningPropertyAnimator

 

The comment in the API informs that Apple Company pushes this class as the default for creating animations on UIView. At the moment, it is recommended for creating animations in UIKit and it’s going to replace the methods UIView.animate(withDuration:)

 

Practical cases

 

Here is a simple example of using UIViewPropertyAnimator in practical case:

 

ball UI animation

 

 

 

For comparison, here’s an example of code for the same animation, but accomplished with CoreAnimation framework:  

 

 

Now let’s look closer how animation was created with UIViewPropertyAnimator for Upper App application, a simple and elegant to-do list for iPhones: here we present the case of interactions with the menu.

 

Sample 1

 

upper app ui animation development

 

 

Sample 2

 upper app ui animation development  

 

 

UIViewPropertyAnimaton is really helpful in the process of iOS development: it simplifies the way for creating quite complex animations saving time and effort. Keep and eye on new posts: they will present fresh practical cases.


Welcome to download Upper App via App Store

Welcome to read more articles on iOS and web development

design navigation UI UX tubik studio

UI/UX Design Glossary. Navigation Elements.

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

 

Dribbble shot Tubik Studio

 

Navigation

 

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

 

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

 

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

 

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

 

Tubik Studio UI sketches

 

Menu

 

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

 

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

 

tubikstudio ui app design

 

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

 

mobile app design tubik studio

 

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

 

CTA

 

Behind the widely used abbreviation CTA, designers and content creators mean call to action. This is actually the word of phrase which stimulates users to interact with a product in a way and for the aim it is designed for. CTA elements are the interactive controls which enable users to do the action they are called to. Typical types of such interactive elements in the layout are buttons, tabs, or links.

 

In the interfaces of all kinds, CTA elements are the core factor of effective interaction with the product, which plays the crucial role in usability and navigability. When all the path of interaction and transitions is built clearly for users but CTA element is not thought-out, placed or designed well, users can get confused and will need to take additional effort trying to achieve their goals. That sets the high risk for poor conversion rate and general user experience. That’s why this navigation element should draw particularly deep designers attention. In any interface, it should be one of the most prominent and quickly noticeable parts to inform users how the product can be helpful or useful for them.

 

Contact List Concept Scrolls Tubik

 

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

 

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

 

landing page UI design tubik studio

 

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

 

Bar

 

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

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

 

tubik studio tapbar ui

 

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

 

tubik studio motion design

 

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

 

juicy player UI Tubik Studio

 

Button

 

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

 

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

 

tubik studio page 404

 

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

 

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

 

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

 

tubik studio ice ui website

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

 

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

 

tubik studio button ui

 

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

 

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

 

Switch

 

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

toonie switch UI animation

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

 

Picker

 

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

 

toonie UI animation

 

Checkbox

 

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

 

todo list UI app tubik studio

 

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

 


 

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

 

Recommended reading

 

Here is the set of recommended materials for further reading for those who would like to get deeper into this topic and learn more on the theme.

 

iOS Human Interface Guidelines

 

Navigation patterns for ten common types of websites

 

3 essential rules for effective navigation design

 

Perfecting navigation for the mobile web

 

Understanding Web UI Elements & Principles

 

User Interface Elements

 

The Most Creative Mobile Navigation Patterns

 

Basic Patterns for Mobile Navigation


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

Welcome to read us on Quora

web design tubik studio

Tips on Applying Copy Content in User Interfaces

Words are a powerful weapon. They can bring both success and failure depending on how you put them together. They can motivate or confuse, strengthen or weaken, call or push away. That’s why designing a digital product, it’s vital to remember that high-quality copy is as essential as the details of visual performance.

 

In one of our previous articles, we’ve already considered the big role of textual content in UI design, covering the definition of copy and its functions in graphic user interfaces. The important point to remember from it here is the words cannot be fully replaced with the graphics whatever amazing, high-quality and professional they are going to be. Efficient and engaging copy content in user interfaces is defined by two equally significant basic criteria: the quality of writing and the appropriate look. Words and visual elements should mutually support each other, exist in harmony and provide organic consistency. So, every single piece of copy should be thoughtfully analyzed and created in a way corresponding to the general design concept and enhancing positive user experience via successful interaction. 

 

Could you imagine an interface containing badly-written copy with the same type sizes, fonts, and colors? The chances are big that it would cost users great effort to solve their problems or get needed information with the product, so they would simply choose other product that is more user-friendly and less time-consuming. Let’s check what types of copy content designers and copywriters deal with creating websites or mobile applications, and think over the points needing special attention.

 

copywriting tips

 

Visual hierarchy

 

To organize content in interfaces clearly for users, designers apply a well-known technique called visual hierarchy. It is initially based on Gestalt psychological theory and 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. In the aspect of creating copy content for web pages and mobile app screens, there are two aspects important to consider: page scanning patterns and typographic hierarchy. 

 

Understanding the importance of visual performance and readability of copy in digital products and its impact on user experience, numerous usability experts explore this issue comprehensively and collect statistics providing valuable data for designers. Lots of studies have shown 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 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.

 

F-pattern is referred to as the most common eye-scanning pattern, especially for web pages with 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 across 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 paragraphs’ initial sentences. It usually occurs on text-heavy pages like blogs, news platforms, thematic editorials etc. How could designers employ this knowledge? First of all, placing the information of key importance or core interest on the most scanned spots and trying to use short catching headlines and bold headers to draw users’ attention.

 

Z-pattern is applied to pages which are not so heavily concentrated on 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. In this case, designers place core information in the spots of highest attention, such as top corners, and put the other points requiring attention along the top and bottom lines.

 

website design tubik studio

The Big Landscape

 

Here we can see the design concept for a website which presents the online magazine «The Big Landscape». The interface is minimalist following the principles of clear visual hierarchy, good readability, intuitive navigation and aesthetic pleasure from visual perception. The designer followed Z-scanning-pattern placing vital elements such as the logo and CTA button in the corners of the top line while the bottom line informs users about the website creators and provides the ability to contact via social networks instantly. 

 

Typographic hierarchy

 

Typographic hierarchy is a system that organizes copy content in the best way for users’ perception first of all via modifications and the combination of types and fonts. It is aimed at creating the contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The contrast is created by regulating type fonts, sizes, and colors as well as their placement and alignment. Typographic hierarchy is presented with common types of copy content used in UI design.

 

Headlines

 

A headline is the first thing that users should see in any interface. It is a large, bold word or phrase which transfers and emphasizes the core informative message on the page. It’s essential for headlines to be catchy and short so that they could draw users’ attention, and meaningful in order to inform users about the theme and benefits of the content of the page or screen. 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 work effectively, not less than extensive headlines presenting a full sentence. 

 

Another point to remember: it’s good when headline is visually supported by other elements on the page or screen, still it also should be understandable and meaningful without such context.

 

website design for photographers

Photography Workshops 

 

Here is the landing page for a company organizing photo tours and workshops for photographers. Functional and stylish minimalism is the basic approach behind the web interface. The bold headline is placed on the left which makes it noticeable but the major accent still remains on the head picture.

 

landing page UI design tubik studio

Website on cooking seafood

 

tubik_studio_website_ui_bakery

Vinny’s Bakery

 

These are two examples of the websites concentrated on providing content around the same theme — food. They both have minimalist design with centrally located headlines. However, the headlines differ with the message they send to the users as well as nature of the websites differs in its core: one of them stimulates uniting users around the action (cooking seafood) while the other is focused in presenting the goods (bread and bakery). The first example presents a website collecting recipes of meals with seafood from all over the world, so its headline contains a CTA with a key element — action verb in imperative form “Let’s cook!”, which dynamically tunes users into the activity. On the other hand, we can see another concept — a website for a small bakery selling homemade bread. The lyrical headline makes users feel warm, sets strong positive emotional connection and lets them instantly imagine the smell of bakery products which are sold via the website.

 

Subheaders

 

It’s impossible to put all the significant information in a headline, that’s why you need subheaders. These are brief, concise and catchy phrases that are similar to headlines, although they typically mark out the key points in separate sections while headlines summarize the theme or message of the whole page. Following the principles of visual hierarchy, fonts chosen for subheaders are usually smaller than for headlines but bigger than the rest of the copy. Traditionally, they are also bold and short. 

 

Landing Page Animation Tubik Studio

Organic — landing page

 

tubikstudio travel gear landing

Travel Gear Landing Page

 

Subheaders play a big role in landing page design. These two concepts for landing pages above are good examples of how subheaders inform users about the data provided in different sections. Bold subheaders point out the main idea of body copy helping users find the information they need easily and quickly.

 

Body copy

 

Body copy is usually a part of text presenting the description or some essential information placed in a compact block, usually under a subheader or a headline. Fonts are thinner and smaller than in headlines and subheaders, sometimes they are presented in italic for even more prominent visual contrast.

 

There is no unified opinion about the best length of body copy. Some content creators support the approach that long copy is more informative and serious-looking, while the others claim that only short copy is effective because Internet users never want to read too much. Here in Tubik we support the approach that the length of the effective and user-friendly copy depends directly on target audience: users, as well as products, are incredibly different, they have diverse preferences, goals and wishes when search for web resources or mobile apps. Both long and short copy have their own pros and cons, and each of them can be appropriate than depending on target audience of the product and its conversion goals.

 

Short copy is often effective for mobile interfaces and landing pages: their users are usually keen to see concise and highly informative copy content. Moreover, mobile interfaces have limited amount of space, so too much copy won’t look nice and will demand additional effort for reading, which can be the reason for poor user experience. Long copy is good for web resources that provide users with complex information on specific topics as well as presentation of the products which aren’t well-known for users and need additional informative support.

 

website design UI

Architecture Firm

 

Here is the example of a web page where long copy is useful. It’s a design concept featuring a website for architectural bureau following minimalistic and functional approach in creative practice and demonstrating it via website visual performance. The aim of such websites is to tell the company’s story, present professional level and achievements, so detailed copy works efficiently in this case.

 

tubik studio web ui design

Birds of Paradise Encyclopedia

 

This design concept also presents a website deeply based on the copy: it’s an educational project setting the online encyclopedia about the specific family of birds. Although it contains a great amount of information presented in text, this type of content is logically divided into many brief and concentrated copy blocks supported with prominent headlines as well as bright and catchy illustrations. This approach makes interaction with the website more dynamic which is especially effective for a teenage part of target readers that presumably often perceive encyclopedias as boring stuff.

 

tubik toonie help screens interaction

Toonie Alarm tutorial

 

As we mentioned above, short copy is useful for mobile interfaces since they are limited in space. The interface of brief tutorial for Toonie Alarm app demonstrates how copy is divided into short blocks in order to leave enough «air» on the screen and make copy readable.

 

Call-to-action elements with copy

 

The core elements that make UI interactive are those which contain a call-to-action (CTA). Some call-to-action elements may be represented with icons that don’t require copy using widely and instantly recognized icons such as a telephone receiver for a phone call or the envelope for mail. However, in cases when the image of an icon is not so obvious or can be misleading, it is more effective to use double scheme, when the icon, button, or link is supported with the copy.

 

The copy for call-to-action elements consists of one or two words or a linked phrase in a body copy. Verbs in the imperative form are one of the frequently applied mechanisms of engaging users.  Designers are recommended to use various techniques of creating contrast, first of all via color, in CTA elements, so that they could stand out in the layout and draw user’s attention quickly.

 

tubikstudio swiftybeaver landing

Landing page for SwiftyBeaver

 

travel agency website UI

Travel Agency Website

 

The CTA buttons on these two landing pages are both centrally located, although they employ different types of copy. The first one consists of the four-word-phrase, while the other applies only one word. However, both look good and work effectively since they both contain the verb in the imperative form and inform target audience about appropriate action solving their potential task on this website.

 

good_sign_app_tubikstudio

Good Sign App Concept 

 

This is a concept for an unusual Good Sign app that gives you a new sign to look for, and you make your wish every time you see it in real life. Such an extraordinary app has also unusual CTA buttons like “Make a wish”.

 

book swap app tubik studio

Book Swap App

 

There’s no need to create CTA buttons exceptionally in bright colors — their main task is to be easily noticeable in the general layout. If the interface is bright and colorful, why don’t you make the contrast with light background which will make bright copy even more prominent, like in a concept for the Book Swap app above?

 

Captions

 

Caption is the short text under a picture describing its content. In web interfaces fonts are usually small and often italic, and in mobile interfaces, the sizes of fonts depend on a size of a picture.

 

gym landing page fragment

Gym Landing Page

 

Here is a concept for the landing page of a gym. The captions here have bold fonts that make them easy to read. They are shown only when the picture is hovered which makes interaction more engaging for the users.

 

Points to consider

 

All in all, creating a quality copy content isn’t that hard if you keep in mind the typographic hierarchy principles. And here are some basic tips on presenting the copy:

 

  • Create catchy headlines. They draw users’ attention and often become the point of decision whether user continues interaction with the page or bounces it.
  • Make headlines short, but keep them highly informative. 
  • Subheaders relate to separate section, so they guide users through the content in the interface.
  • Use brief concise copy for mobile interfaces and landing pages.
  • Consider using long copy for web resources aimed at providing informative content.
  • Use verbs in the imperative form to encourage people to actions.
  • Use contrast colors for call-to-action elements, so that they could draw user’s attention more effectively. However, don’t forget to test readability of the text on the CTA elements: it has a crucial impact on usability and conversion rates.
  • A caption should preferably describe or add the data that isn’t obvious from the image.
  • Give strong preference to present tenses in captions.
  • Always ground your solutions on preliminary user research and don’t neglect testing different options.

 

Recommended reading

 

Here is the collection of recommended articles for further reading in case you would like to read more on the theme.

 

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

3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern

Effective Writing For Your UI: Things to Avoid

The Ideal Length of Everything Online, Backed by Research

Copywriting in UI. Words that Make Design Go Round.

 

Our next publication will continue the comprehensive theme of visual hierarchy and its effective practices in web and mobile interfaces. Don’t miss!


 

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

video speeches for ui ux designers

15 Must-See Expert Speeches for UI/UX Designers

The year is counting its last days. As we could see in the article devoted to design trends in 2016, it’s been a bright, dynamic and diverse year for global design community. In addition to new trends and interesting digital products, it strengthened one of the core features of creative and career growth in the field of UI/UX design for digital products: to be highly professional and flexible for new challenges of the modern high technology, designers have to learn and improve themselves in non-stop mode. 

 

The domain of user experience and user interface design is so young, but already well-established: that’s amazing to see how many people, who started their career when the positions of UI and UX designers didn’t even exist in the list of specialities of higher educational institutions, now have grown into experts able to open the stunning area of knowledge and practice. And that’s a real luck for professionals all over the world to be able to share their findings via both real and online conferences with a view to getting the global design community stronger and more flexible for the sake of creating user-friendly problem-solving problems.

 

Today we would like to share and recommend you the collection of videos featuring deep and informative speeches from recognized experts in the sphere of creating digital products. They are devoted to different aspects of design for users and will definitely bring helpful and useful professional tips to UI/UX designers working over websites and mobile applications. So, enjoy watching, absorb knowledge and get inspired!

 

Hooked: How to Build Habit-Forming Products

by Nir Eyal

 

 

Designing Meaningful Animation

by Val Head

 

 

The Top 10 Things You Need to Know about Perception

by Susan Weinschenk

 

 

Designing Emotional Experiences

by Aarron Walter

 

 

Mind tricks & 7 Secrets of Behavioural Economics for UX Designer

by Lanny Geffen

 

 

How product design can change the world

by Christiaan Maats

 

 

How to manage for collective creativity

by Linda Hill

 

 

The complex relationship between data and design in UX

by Rochelle King

 

 

The art of innovation

by Guy Kawasaki

 

 

Why UX is not only the Responsibility of the UX’er

by Janne Jul Jensen

 

 

The Cognitive Abilities of Human Beings — Why Some Things are so Darn Hard!

by Janne Jul Jensen

 

 

Building a Winning UX Strategy Using the Kano Model

by Jared Spool

 

 

User eXperience

by Jesse James Garrett

 

 

Designing Better Conversations

by Justin Davis

 

 

Empathy: your secret weapon in designing for the web

by Nathalie Nahai

 


Originally collected for Design4Users

Welcome to check out 20 TED-talks for Designers

UI design trends

Review of Popular Design Trends for Interfaces in 2016

The year is going away so fast: seems each day just melts away like a snowflake. Traditionally, before the holidays start, it is the high time to turn away and revise what deserves to be remembered.

 

We have already reviewed the most popular trends and tools for developers in 2016, today the theme will be continued with significant design trends that couldn’t be left without attention. No doubt, this design year was globally dynamic, creative, full of news and events. Having worked over diverse design projects and tasks as well as in-house studio products here in Tubik Studio, we prepared our list of trends in design for web and app interfaces, which got popular this year, illustrating some of the mentioned points with works by studio designers. Let’s get started.

 

Flat design

 

Flat design has significantly grown its presence and diversity this year, both in interface design and branding. The design approach is known for its minimalist and concise use of visual expressive means and has established itself as a style favorable for enhancing usability and visual harmony of user interfaces. The most prominent feature which actually has inspired the name of this direction is applying flat 2-dimensional visual details as the opposite to highly realistic and detailed skeuomorphic images.

The features of flat design supporting its steady popularity in interface design include:

  • simplicity of shapes and elements
  • minimalism
  • functionality
  • bold and highly readable typography
  • clear and strict visual hierarchy
  • close attention to details
  • thoughtful appliance of bright colors and contrast supporting quick visual perception
  • avoiding textures, gradients and complex forms
  • applying the principles of grids, geometric approach and visual balance.

 

ui animation cafe app tubikstudio

 

Here in Tubik we have checked the high potential of flat design for interfaces on practice, with not only numerous outsource projects, but also the iOS app Toonie Alarm, designed and developed by studio team. Thoughtful integration of flat design via diverse interface elements, including icons, illustrations, buttons, tabs and the like, proved itself efficient for making UI bright, attractive, clear, intuitive and easy-to-use.

 

Toonie Alarm UI design

 

Moreover, this year flat design has set the strong link between branding and UI design, mutually supporting each other in digital products.  One of the fields broadly strengthening this trend was creating logos and app icons flat and simplified. This trend has featured itself not only in brand new projects, but also for well-established websites, apps, companies and products, which have presented new redesigned logos and corporate style visuals redesigned according to the principles of flat design.

 

Conversational UI

 

Another broadly discussed trend is conversational UI which has been the object for hot debates and theme for many speeches and case studies this year. Basically, the term «conversational UI» is connected with interfaces that enable users to communicate directly to the system in a way imitating conversation with people. In vast majority of cases, this sort of UI involves voice manipulation and recognition as the part of interaction.

 

More and more products are featuring this sort of functionality: some want it just because it’s trendy and fashionable while others find real ways to engage it for problem-solving objectives. Most often it is realized by chatbots providing a flair of talk to the users. In automated dialogues of this kind, depending on the nature of the product and style of talk which is seen appropriate for the target audience, conversational UI can effectively involve both verbal (language) and non-verbal (emoticons, pictograms etc.) means of communication.

 

Among the advantages of conversational UIs, one of the frequently mentioned is automation of some basic and repetitive operations saving people’s effort for more creative and complex task. It can enhance the usability of the product and even make it proactive, giving prompts to the user and improving interaction with the product. Still, there is the trap to overload the product with this sort of communication, based on standard situations and issues while missing non-typical cases or questions which need different solutions. Moreover, by far not all target users are ready to communicate in that way, so this design solution needs to be grounded on extensive user research and testing from the early stages of user experience design. Conversational UI can easily give zest to a user interface. Yet, if it’s not analyzed and tested well, conversational UI can do the opposite and spoil user experience by poor interaction.

 

Anyway, this year UI designers have thought over new perspectives of applying conversational UI, in particular in combination with AI technologies, and this trend will definitely grow showing new rays of creativity next year. Conversational UI isn’t just another fad: it is the trend providing total or partial changes to certain areas of interaction design and giving alternative approach to problem-solving and decision-making processes.

 

Minimalism

 

This year has given the great bunch of applications and websites designed on the principles of minimalism. They support positive user experience by providing clear and simple interfaces, full of space and air, focused on content and navigation. Minimalist interfaces are characterized with thorough attention to visual elements, not numerous but always transferring a particular message. Minimalist interfaces, both for web and app, also feature sophisticated work with typography and visual hierarchy supporting instant scanning and skimming the content of the page or screen. Moreover, interfaces of this sort usually provide high level of legibility and readability.

 

tubikstudio ui animation website design

 

Custom graphics

 

Desire of originality sprung out in UI design in the area of custom graphic design of all kinds. More and more interfaces apply custom mascots, icons and  illustrations that fulfill multiple goals: adding originality to the visual design concept, enhancing usability, strengthening navigation and marking out the content depending on its nature and functions. Graphic details play crucial role in usability and accessibility of the product and even the slightest changes can bring significant results, speeding up visual perception and understanding interface elements or transitions.

 

Visual perception is one of the most productive and quick ways through which people are able to obtain information and get it processed by the brain. It influences so many aspects of life that neglecting the issue while creating products for users would be extremely unwise. That is why the aspect of applying visual elements of high functionality in the interfaces such as icons and their impact on the general efficiency of the product has been an actual topic in the global design community for a long time. In addition, images push the limits of perception for users who have natural problems with text recognition such as, for instance, the dyslexic or non-reading preschoolers.

 

As for custom illustrations or icons, created for specific products, made according to the preferences and needs of the particular target audience and with a view at certain business goals, they are able to make the product work more efficiently solving users’ pains and satisfying wishes. Perhaps, that is one of the most popular reasons why this trend got so popular in 2016 presenting interesting interfaces with custom graphics of diverse styles and performance.

 

Tubik Studio Weather App

 

Another side of this trend is evolving field of wallpapers for desktops and mobile devices featuring original graphic artworks on a variety of topics. It also can be characterized as user-friendly trend giving users the choice of means for self-expression and satisfying personal aesthetic needs.

 

Animated microinteractions

 

Interface animation is one more hot and debatable topic of this year. Although there is a big army of those who find animation an unnecessary feature overloading user interface and making it more complicated, most users expect motion as an integral part of interaction experience. So, designers and developers work over more and more sophisticated methods to make animation pleasant-looking and problem-solving characteristic of modern apps and websites.

 

One of the frequent methods of adding motion to UI are animated details featuring microinteractions. Microinteractions supported by clear finalization via motion create fast feedback for the user and make the experience positive and efficient while navigation simple and intuitive. Animated buttons, switchers, toggles and other interactive elements inform user in split seconds activating all the potential of fast visual perception.

 

tubik studio button ui

 

As we mentioned in the earlier article, animation in the interface can create pleasant illusion close to natural interaction with physical objects which often doesn’t need too much cognitive process. For example, if you pull the object, press it, move out the tab, the movements should feel natural.  Most users won’t be able to see this sophisticated work accomplished by designers: they will take it for granted and the fact it makes them comfortable will be the biggest praise for design solutions.

toonie switch UI animation

Scroll animation

 

Scroll animation also got new vibes and perspectives of artistic realization. Thought-out movement of layout elements while the webpage is scrolled enhances user experience significantly and creates the harmonic feeling of one integral smooth interaction rather than perceiving several separate parts or blocks of the page. Moreover, this sort of interactions is aesthetically pleasant and engaging, and these emotions are a good factor of retaining users. This year, full of new updates in design tools and software, showed great practices of sophisticated work on scroll animation.

 

Landing Page Animation Tubik Studio

 

Animated tutorials

 

Tutorial is a vital part of onboarding users for most mobile applications. Certainly, a wide variety of means and techniques are applied to make it clear, engaging and informative as it is a strategically important element of involving users into further interaction with a digital product. This year designers combined traditional techniques with new popular findings: in particular, custom illustrations and animation brought new vibes to app tutorials, making them more dynamic and enhancing their informative potential.

 

tutorial interface animation tubik studio

 

Diversity of landing pages

 

Surely, landing pages were discovered much earlier than 2016, still this year has brought the new lap of their development and diversity. More and more businesses and social projects take advantage of using them for effective presentation of special services, sales, offers or issues that need focusing user’s attention. Landing pages have also grown their presence in the Net as the effective method of promotion for native mobile apps. Accomplished wisely and thoughtfully, grounded on user and market research and testing, broad usage of landing pages can be also seen as the other user-friendly trend, providing users with necessary information and interactions in clear and accessible way saving their time and effort. From the business perspective, they also work well, giving businesses the flexible tool for original and effective presentation.

 

web design UI tubik studio

 

Brutalism

 

The trend of brutalism in digital design has rocketed this year getting more and more expressions and diversity. It is often characterized as a webdesign style aiming at breaking standards and predictable design techniques. The websites created in this manner are a sort of rebellion to sophisticated designs with thought-out symmetry and harmony, complex layouts and accents of aesthetic visual performance. Vice versa, brutalism is based on simple and raw appearance, in most cases not loaded with many visual details and sometimes even close to a plain HTML page. Used wisely, for the appropriate goals and audience, this approach can bring high level of originality to the website and make it really stand out of the crowd.

 

Contact List Concept Scrolls Tubik

 

Custom grid

 

According to Internet Live Stats, there are over 1 billion websites in the World Wide Web today. This milestone was first reached in September of 2014, as confirmed by NetCraft in its October 2014 Web Server Survey, and first estimated and announced by Internet Live Stats. The number had subsequently declined, reverting back to a level below 1 billion due to the monthly fluctuations in the count of inactive websites before reaching again and stabilizing above the 1 billion mark starting in March of 2016. With more and more websites coming into play, designers have to be more and more creative to not only make them attractive and harmonic but also give them a feel of uniqueness and original appearance. That is one of the reasons, why experiments with grid also won their place in the list of general design trends of the leaving year. The custom grid is the way to save the feeling of harmonic layout and placement of the elements with a higher level of flexibility and originality. However, this sort of experiment requires thorough research and in many cases, the final result comes via several iterations tested and analyzed in terms of usability and visual perception.

 

 

web design UI concept tubik studio

 

Bold and catchy typography

 

2016 could also be mentioned as the year of further rigorous practice on typography in the global design community. It brought the world loads of new nice typefaces both universal and created with a view to particular objectives or products. Typography continued its progress as one of the crucial aspects of efficient web and app design, and one of the trends in this domain was practices of applying bold and outstanding typography for webpages, catching users’ attention and instantly informing them about the core message. In particular, this approach got its development in the sector of landing pages whose quick and dynamic presentation of core data to users has great influence on conversion rates.

 

tubik_studio_website_ui_bakery

 

Large thematic image

 

One more trend often found in various designs for interfaces is applying prominent images, which could be either photos or illustrations, as the central visual element of the general composition. Important thing is that the image is never just a placeholder of nice looks: it presents a powerful way to strengthen the informative potential of the page or screen, set the theme instantly and focus user’s attention on the significant details. Needless to say, it takes much designer’s effort to choose the one successfully transferring the necessary message and supporting general stylistic concept.

 

UI design trends

 

Handwriting lettering

 

Custom handwriting lettering also got popular as a design trend and is often used for marking out significant details and images in an original way. Special lettering made by professional designers looks fresh and unique, refreshing visual performance of the webpage or screen. On the other hand, being applied in UI design, it demands additional effort to be tested in the layout as it can happen that hand-crafted lettering looks great separately, but doesn’t work effectively in combination with other elements of the interface.

 

Real content instead of Lorem Ipsum

 

This year has featured growing attention to content, its quality and performance. In user interfaces, content and design and interconnected parts that should successfully support each other instead of fighting for users attention. That makes more and more designers prefer applying real content instead of well-known Lorem Ipsum, even in cases of creative stages or presentation of design concepts. It gets designers, clients and users closer to real experience and more natural feel of interactions.

 

landing page UI design tubik studio

 

Videos explaining or presenting products

 

Due to easy access to reviewing videos via YouTube, social networks and other platforms of product presentation, video explainers have quickly established themselves as a popular trend. Naturally, it wouldn’t be logical to neglect such a powerful source of connection with clients and users, so 2016 has brought a great variety of videos presenting the products, companies and services, explaining their benefits and special offers, showing the engaging flow of interaction and connection. They took over the responsibilities of the picture which is worth a thousand words: video explainers quickly show the most important features of the product and let the users know what deserves their attention first of all.

 

Example of video explainer designed by Tubik Studio for Toonie Alarm

 

Example of promotional year-in-review video designed by Tubik Studio for Opera

 

Bright and dark color palettes

 

No secret, color is one of the most powerful and influential factors in UI design. One more trend in UI design deserving a place in the list of this year is a great variety of color palettes designers choose for applications and websites. The diversity of new fonts and typefaces, as well as research of usability studies, allow going beyond standards and trying new combinations which will take advantage of diverse colors but with it won’t lack in usability. More and more creatives are discovering new horizons combining traditional techniques with innovative approaches in the domain of work with color.

 

tubik studio application recipes and cooking

 

To sum up, we can certainly say that in the sphere of UI design 2016 has been the year of creative search and experiments, still most of them were focused on usability and desirability of the final products. No doubt, 2017 will not lose its chance to polish these trends and open the new ones. 


Welcome to read the review of popular trends and tools for developers in 2016

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

tubik studio web development

Front-End Development. From UX Design to Code.

User interface serving the aims of positive and problem-solving user experience is one of the key aspects of creating digital product, still it’s web development that enables users to get real and live surfing experiences. With the course of time, more and more businesses are going online, so there appear some loose ends that need to be cured through user experience. In business struggle, everyone wants to please their customers and engage them to return again. Today, businesses realizing the value of thought-out and professionally built user experience are able to take the best from digital technologies and products. Full-cycle UX design gets its live version via web and mobile development transfroming step by step from subtle idea to real digital product.

 

Getting down to cases, online businesses are all about user experiences and of course the products and services they are selling. Have you seen websites like Amazon, eBay, AliExpress? They are convenient and helpful for their users even being huge websites that offer millions of products and thousands of services. The value of thought-out UX and efficient UI is irreplaceable. How could this result be achieved? This is the point when the power of front-end development comes into play to not just enhance the look and feel of website but also take the major role in increasing the level of user experience.

 

Tubik Studio design team

 

What is front-end?

 

All websites consist of structure, data, design, content, and functionality. Creating user-facing functionality is the task of front-end developer. Using a combination of markup languages, design, client-side scripts and frameworks, they create everything that users see and interact with: content, layout, and functional elements.

 

Three main parts of every website are: the client, the database, the server. The client is simply the web browser a person is using to load a site, and it’s where client-side technology is unpacked and processed. In a general way, a server is a computer, a device or a program that is dedicated to managing network resources and data. The server is at a remote location anywhere, it is holding data, running back-end of a website, processing requests, and sending response to the browser. The client is anywhere the users are loading a site: mobile devices, laptops, or desktop computers. Server-side scripting is executed by a web server; client-side scripting is executed by a web browser.

 

front end develoment tubik studio

 

Let’s have a closer look at this process.

 

The Server — this part of website is responsible for holding data, running the website’s back-end architecture, processing requests, and sending response to the browser.

 

The Client — requests pages from the Server, and displays them to the The User. In most cases, the client is a web browser.

 

The User — uses the Client in order to surf the web, fill in forms, watch videos online, in other words and interact with webpage.

 

web development server

 

To see how it works in practice, let’s take the flow of interactions with Tubik website for example.

 

The User opens his/her web browser (the Client), then loads http://tubikstudio.com/. The Client (on the behalf of the User) sends a request to http://tubikstudio.com/ (the Server), for our home page. The Server then acknowledges the request, and replies the client with some meta-data (called headers), followed by the page’s source. The Client receives the page’s source and renders it into a human viewable website. The User types «Case Study» into the search field, and presses ‘Enter’. The Client submits that data to the Server. The Server processes the data, and replies with a page matching the search results. The Client, once again, renders that page for the User to view.

 

Processes running in web browser are the following: when the page is in process of loading, scripts are embedded within and interact with the HTML of a site, selecting elements of it, then manipulating those elements to provide an interactive experience. Next, scripts interact with a CSS file that styles the way the page looks. It dictates what work the server-side code will accomplish and returns data that’s pulled from the site in a way that’s readable by the browser.

 

For example, when we open home page of Tubik Studio website, the back-end is built to pull specific data from the database to Client, while front-end scripts render this data into readable for human view webpage.

 

Front-end languages

 

Widespread client-side languages which front-end developers use regularly and have to know include:

 

JavaScript: With its frameworks and libraries, it’s the core of front-end development, and beyond. It is called the first client-side language and is still the most common client-side script on the web.

 

HTML: Every front-end developer has to know this language. It dictates a site’s organization and content and all interaction. HTML elements can annotate footers, headers, how text is displayed , how media and images are appeared, and more.

 

CSS: Cascading style sheets (CSS) is broken into modules and comprises the code for every graphic element—from backgrounds to font—that make up the look and feel of a website.

 

programming languages fron-end

 

Front-end frameworks

 

A framework is a hierarchical directory that encapsulates shared resources, such as a dynamic shared library, nib files, image files, localized strings, header files, and reference documentation in a single package. Here are some popular frameworks that are usually used.

 

AngularJS: This framework and several other JS frameworks, like Backbone.js, Ember.js, Express.js or ReactJS demonstrate the capabilities of JavaScript.

 

jQuery: It is a fast, small, JS object library that streamlines how JavaScript behaves across different browsers.

 

Bootstrap: This leading mobile-first framework includes HTML, CSS, and JavaScript to facilitate rapid responsive app development. With Bootstrap, website is compatible with all modern browsers and looks great on any size screen, from tablets to phones, from laptops to desktop computers.

 

Foundation: Responsive front-end framework is used by sites like Facebook, Yahoo!, and eBay.

 

Semantic UI: It is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

 

Yeoman: It is a generic scaffolding system allowing creating of any kind of app.

 

Pure.css: It is the set of small, responsive CSS modules that you can use in every web project.

 

Skeleton.css: As Skeleton’s developers stated: “A dead simple, responsive boilerplate.” It is the set of small and easy, responsive CSS modules that can be used in every web project.

 

web development framework

 

The next posts about web development are coming soon for those who are interested and in them we are going to tell you more details about different aspects of the job: the closest ones will tell about specific features and tools for back-end, web developers work flow, and trends for front-end development. Don’t miss!


Welcome to read the article about basic terms and tools of web development

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