Tag Archives: HCI

typography in UI design web mobile

Typography in UI: Guide for Beginners.

People read all the time. It’s not only books or magazines but various info on the Internet, adverts in the streets, in public transport or outside shops. However, only minority of readers may know how much time and effort often stand behind a single line. When we easily read a copy feeling comfortable and relaxed, many thanks go to a designer. Text arrangement and the aesthetic look of fonts are among designers’ top priorities. To create effective UI and clear UX designers learn basics of typography science. Today’s article covers basic points in typography which every professional designer should comprehend and apply in work.

 

What’s typography?

 

Typography is something bigger than just a design technique. A Canadian typographer, Robert Bringhurst, in his book The Elements of Typographic Style defines typography as the craft of endowing human language with a durable visual form. In addition, typography transforms language into a decorative visual element.

 

Typography has a much longer history than the design or the Internet itself. First, it appeared approximately in the 11-12 centuries when people invented movable type system. A real typography revolution started after the Gutenberg Bible, the first major book printed via movable metal type, which marked the beginning of the age of the printed book in the West. The style of type used in Gutenberg Bible is now known as Textualis (Textura) and Schwabacher.

 

Nowadays, it is more than just copy printing and organization. Commonly, typography is defined as the art and science of font style, appearance, and structure which aims at delivering the aesthetic and easily readable copy to readers. Not that long ago, it was a specialized study for editorial office workers but now the science is applied in different spheres and plays a significant role in design.

 

The role of typography in design

 

Can you think of at least one example of web or mobile design without copy elements? It’s difficult, right? Still, just a presence of copy in the interface is not enough for effective UI and positive UX. Copy and its appearance should be well-thought otherwise it may spoil the design. There are designers who ignore typography studies because they think it’s too difficult to understand so it isn’t worth spending much time. However, typography is an essential part of the effective design. Let’s see why.

 

People got used to receiving the majority of information in text form and designers need to make this process easy and productive. The basic knowledge of typography can help to comprehend the peculiarities of font visual presentation and its influence on users perception.

 

The effective copy is a key to the powerful design. Its effectiveness depends not only on its content but also on how it is presented. Font size, width, color, and text structure — all of that matter. Designers can transfer certain mood or message by choosing appropriate fonts and the ways of their presentation. This way typography helps design to communicate with people. Visual performance and readability of copy in digital products have the great impact on user experience. If fonts are badly legible, people can face problems with navigation or even worse can’t use it at all. Today poor user experience in digital products is unforgiven since users can easily find the better alternative.

 

In addition, bad typography significantly affects the first impression because even when users don’t read copy, they scan it. In case fonts look inappropriate people may not want to learn about your offer or use your product.

 

home page design strategy

 

Essential typography elements

 

To create profound typography, you need to learn its anatomy and the processes typography building requires. Let’s see.

 

Font and Typeface

 

Nowadays, many designers use terms “font” and “typeface” as the synonyms but that’s not quite right. Let’s straighten it out. A typeface is a style of type design which includes a complete scope of characters in all sizes and weight. On the other hand, a font is a graphical representation of text character usually introduced in one particular typeface, size, and weight. In other words, a typeface is something like a family and fonts are parts of it. These two are the main objects which designers and typographers change and transform to create readable and aesthetic typography. More about typeface styles will be presented here soon for our readers.

 

Mean line and baseline

 

Typically, type characters are placed in a straight line creating a neat visual presentation. Main tools assisting designers in the process are mean line and baseline. The first marks the top and the other bottom of a character body. Such lines allow creating fonts even. Of course, the lines are invisible in interfaces after designers finish their work.

 

tubik typography baseline

 

Character measurement (size, weight, and height)

 

To separate different types of information and highlight the vital points, designers apply fonts in different weight and size. The type weight is a measurement of how thick type character is. The sizes are usually measured in inches, millimeters, or pixels. The height of the character is also called “x-height” because the body of every character in one size is based on the letter “x”. This approach makes them look even. It’s easy to segregate copy elements such as heading, sub-heading and body copy by varying these parameters.

 

tubik typography x_height

 

Ascender and Descender

 

The ascender is a part of a letter that goes above the mean line like in a letter “b” or “d”. The descender is opposite to ascender. It’s a segment that extends below the baseline like in “q” or “g”.

 

tubik typography ascender

 

White space

 

White space, also known as negative space, is the area between elements in a design composition. Readers aren’t usually aware of the great role of the space, but designers pay a lot of attention to it. In case the white space is not balanced, copy will be hard to read. That’s why negative space matters as much as any other typography element.

 

tubik_typography_whitespace

 

Alignment

 

Creating effective typography is not that easy and it includes many processes. For example, alignment is an action of placing and justifying text. During the stage, designers aim at transforming randomly placed pieces of text into one unified composition.

 

tubik_typography_alignment

 

Tracking

 

The process of tracking involves adjustment of space for a group of type characters which form a word and text block. A designer set appropriate spacing for all letters, making copy feel airy and pleasant to the eye. The effective tracking makes letters in a word easily readable.

 

tubik_typography_tracking

 

Kerning

 

Kerning is a bit similar to tracking still they aren’t the same. Tracking means is spacing between all the characters of font while kerning is the process of adjusting the space between two type characters. It is usually applied for individual cases when a designer decides to change the spacing between two specific letters to make it feel more natural.

 

tubik_typography_kerning

 

Leading

 

Leading is the spacing between the baselines of copy. The appropriate leading helps readers easily go from one text line to another and makes big pieces of text legible. In design, the standard leading is 120% the point size of the font still it can vary according to the typeface peculiarities.

 

tubik_typography_leading

 

Typographic hierarchy

 

As any other design element, typography should be structured. 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 typefaces 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 typography elements including typefaces, fonts, sizes, and colors as well as their alignment.

 

web design UI tubik studio

The Gourmet Website

 

Typographic hierarchy is presented with common types of copy content used in UI design. They are headlines, subheaders, body copy, call-to-action elements, captions, and others. These copy elements create distinct layers in design: primary, secondary, and tertiary.

 

The primary level of copy content includes the biggest type like in headlines. It strives at drawing user’s attention to the product. The secondary level consists of copy elements which can be easily scanned. Those are subheaders and captions which allow users quickly navigate through the content. And the tertiary level of typography includes body text and the other information. It is often presented with the small type still it should be readable enough.The typography layers assist users to learn copy content gradually step by step without effort and get oriented in the digital product.

 

web design UI concept tubik studio

The Big Landscape

 

Typography cannot be learned in one day. It requires constant studying and persistence. Follow Tubik blog updates and learn more about typography in design.

 

Recommended reading

 

Robert Bringhurst “The Elements of Typographic Style Paperback”

 

Erik Spiekermann “FontBook”

 

Simon Garfield “Just My Type: A Book About Fonts”

 

Tips on Applying Copy Content in User Interfaces

 

Every Design Needs Three Levels of Typographic Hierarchy


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

upper app UI design case study

Lean and Mean: Power of Minimalism in UI Design.

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

 

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

 

web design tubik studio

 

What is minimalism?

 

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

 

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

 

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

 

Tubik studio UI design

Architecture Blog

 

Characteristics of minimalism

 

Main features of minimalism often mentioned by designers include:

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

 

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

 

dance academy landing page

Dance Academy landing page

 

Practices of minimalism in digital design

 

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

 

Flat design

 

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

 

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

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Monochrome or limited color palette

 

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

 

tubik studio web UI design

Slopes Website

 

Bold and expressive typography

 

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

 

upper app UI design case study

Upper App

 

Choice limitation

 

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

 

tubik studio web ui design

Birds of Paradise Encyclopedia

 

Prominent theme visual elements

 

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

 

website design UI

Architecture Firm

 

Concise and intuitive navigation

 

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

 

Adding air and using negative space

 

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

 

tubik studio ice ui website

Ice Website

 

Grids

 

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

 

web design UI concept tubik studio

The Big Landscape

 

Contrast

 

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

 

tubikstudio ui animation website design

Bjorn Website

 

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

 

Recommended reading

 

The Characteristics of Minimalism in Web Design

 

The How and Why of Minimalism

 

6 Steps to Perfecting Minimalism in Web Design

 

Functional Minimalism for Web Design


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

human memory tips on ux design

How Human Memory Works: Tips for UX Designers.

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

 

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

 

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

 

Ui design trends by Tubik Blog

Healthy Food App

 

Basic points about memory

 

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

 

Basically, psychologists mention three types of memory:

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

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

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

 

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

 

memory work

 

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

 

Basic laws of memory

 

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

 

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

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

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

 

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

 

cinema app interaction ui animation

Cinema App

 

Expert explorations of memory

 

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

 

Miller’s Law

 

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

 

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

 

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

 

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

 

landing page animation Tubik studio

Magic.co landing page

 

Hick’s Law

 

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

 

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

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Tips for memory-friendly UX

 

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

 

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

 

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

 

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

website design for photographers

Photography workshops

 

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

 

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

 

book swap app tubik studio

Book Swap App

 

3. Save memory effort with recognizable patterns and symbols

 

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

 

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

 

tubik studio behance weather app

Weather App

 

4. Apply consistent markers in navigation

 

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

 

Homey app smart home UI

Homey App

 

5. Don’t hide the core elements of navigation

 

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

 

bookshop website animation

Bookshop Website

 

6. Stimulate different types of memory

 

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

 

tubik studio application recipes and cooking

Recipe App

 

7. Remember about emotions

 

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

 

ui animation design tubik

Night in Berlin App

 

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

 

Recommended reading

 

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

 

Short-Term Memory and Web Usability

 

UX and Memory: Present Information at Relevant Points

 

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

 

User Memory Design: How To Design For Experiences That Last

 

Visual Perception. Icons vs Copy in UI.

 

Total (Memory) Recall

 

The Properties of Human Memory and Their Importance for Information Visualization


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

information architecture for designers

Information Architecture: Effective Techniques For Designers.

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

 

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

 

tubikstudio teamwork

 

Content inventory

 

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

 

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

 

tubik studio wireframing UI UX

 

Wireframing

 

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

 

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

 

tubik studio design process ux

 

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

 

Organization structures and schemes

 

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

 

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

 

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

 

Big City Guide tubik

Big City Guide

 

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

 

jewellery ecommerce app UI

Jewellery E-Commerce App

 

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

 

health care app interactions tubik studio

HealthCare App

 

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

 

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

 

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

 

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

 

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

 

bookshop website animation

Bookshop Website

 

Content organization models

 

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

 

Single page model

 

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

 

Upper App Animation

Upper App

 

Flat model

 

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

 

landing page design tubik studio

 

Index model

 

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

 

Bakery website design case study tubik

Vinny’s Bakery Website

 

Strict hierarchy model

 

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

 

Co-existing hierarchy model

 

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

web design UI concept tubik studio

 

The Big Landscape

 

Daisy model

 

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

 

upper app UI design case study

Upper App

 

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

 

Recommended reading

 

A Practical Guide to Information Architecture by Donna Spencer

 

The ultimate guide to information architecture

 

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

 

Information Architecture: For the Web and Beyond

 

Information Architecture Basics


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

home budget app case study

Case Study: Home Budget App. UI for Finance.

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

 

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

 

Task

 

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

 

Process

 

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

 

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

 

Dashboard

 

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

 

Dashboard_home_budget UI

 

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

 

The cards present such information blocks of data:

— the menu with quick access to popular categories of expenses

— information on total expenses and frequency of transactions

— the list of popular transactions

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

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

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

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

 

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

 

Home_budget_app_dashboard_animation_tubik

 

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

 

Mobile UI

 

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

 

home budget app mobile screen

 

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

 

home budget app mobile notifications

 

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

 

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

 

Home Budget app interactions motion tubik

 

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

 

home budget app interaction animation tubik

 

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

 

home budget app case study

 

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


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

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 set one 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

upper app UI design case study

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

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

 

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

 

Upper App to-do list tubik

 

Task

 

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

 

Process

 

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

 

 upper app UI design

 

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

 

Functionality

 

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

 

Functions and features provide the following:

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

 

upper app UI design case study

 

Design and Layout

 

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

 

upper app UI design case study

 

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

 

Upper App to-do list 7

 

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

 

upper app UI design case study

 

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

 

upper app UI design case study

 

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

 

upper app UI design case study

 

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


Welcome to see full presentation on Product Hunt

Welcome to download Upper App via App Store

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

design navigation UI UX tubik studio

UI/UX Design Glossary. Navigation Elements.

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

 

Dribbble shot Tubik Studio

 

Navigation

 

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

 

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

 

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

 

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

 

Tubik Studio UI sketches

 

Menu

 

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

 

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

 

tubikstudio ui app design

 

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

 

mobile app design tubik studio

 

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

 

CTA

 

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

 

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

 

Contact List Concept Scrolls Tubik

 

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

 

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

 

landing page UI design tubik studio

 

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

 

Bar

 

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

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

 

tubik studio tapbar ui

 

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

 

tubik studio motion design

 

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

 

juicy player UI Tubik Studio

 

Button

 

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

 

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

 

tubik studio page 404

 

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

 

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

 

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

 

tubik studio ice ui website

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

 

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

 

tubik studio button ui

 

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

 

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

 

Switch

 

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

toonie switch UI animation

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

 

Picker

 

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

 

toonie UI animation

 

Checkbox

 

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

 

todo list UI app tubik studio

 

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

 


 

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

 

Recommended reading

 

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

 

iOS Human Interface Guidelines

 

Navigation patterns for ten common types of websites

 

3 essential rules for effective navigation design

 

Perfecting navigation for the mobile web

 

Understanding Web UI Elements & Principles

 

User Interface Elements

 

The Most Creative Mobile Navigation Patterns

 

Basic Patterns for Mobile Navigation


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

Welcome to read us on Quora

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

Tubik Studio iOS development

Case Study: SqueezeOutSwitch. Animation in Code.

UI animation has been the subject of hot debates for a long time. Designers work over the sophisticated animations to make interfaces attractive, original and functional while developers often support the idea that slick and complex animation takes more effort in the process of development than necessary.

 

As you know from our previous posts devoted to the issues of interface animation, here in Tubik we support the position that wisely used animation is the powerful and multi-functional tool enhancing user experience. We checked that on numerous design projects of diverse purposes. Our complex motion design concepts have been used by developers who like challenges and want to present high-level skills in coding.

 

Broadening our professional horizons, we also started sharing our design concepts on GitHub, to show how design, even quite complex and specific, can be brought to life with code. Today we will look at more detail at SqueezeOut Switch animation of the interface interaction.

 

button animation tubik

 

The design concept Switch Control Animation was presented on Dribbble featuring animated switch control that can be used for accepting or declining the changes on any settings screen. The main motion design style the designer aimed at was adding some gum effect when the control is switched on and off. And this sort of design details can become a bit of challenge for developers.

 

The animation in code representation is made of two parts.

 

The first part works like that: when user makes a tap on the screen, the circle has to move to the opposite side until it is covered by the baffler. Then animation slightly slows down, the circle changes its appearance, goes up to final point and features bouncing. The baffler also shows the animated pulsing with the circle. The oscillations decay.

 

The second variant takes place when user tries to move the circle manually, like pressing it and pulls to the needed side and then can release. While the user pulls the circle, it changes its position within acceptable range, up to maximum stretching of the baffler. The baffler stretches only to one side in that case. If the user releases the circle not taking him to the middle of the switcher, it gets back to its initial position and pulses. The baffler will just get back to the initial point. If the user takes the circle further than the middle of the switch, it goes to the opposite side, both the circle and baffler pulsing, and the circle changing its image.

 

Animation of the circle movement doesn’t create any problems. This is the standard task which can be solved with UIView animation and CASpringAnimation. However, animation of the baffler is more challenging.

 

In case when animation is done with Core Animation, setting the initial and final path, then the arc performance is unpredictable. In addition, the form of animation can be inappropriate and the problems with color change can raise.

 

In animation, the change should be done discretely. When should it be done? If you do it in advance, then the good point is when path is at its initial stage, which means it features the straight line in the middle of switch. So, you have to create an array with the set of paths and colors and place it into CAKeyframeAnimation. The approach gives the working outcome, still the code will look messy and illegible. Moreover, the circle will need to be moved manually for synchronization.

 

In this case we can use CADisplayLink (timer of screen redrawing) and manipulate with presentationLayer (the copy of the layer which is visible on the screen at the moment). In the method launching CADisplayLink, we will change the path for the buffler. The points which form this path depend on the position of the circle in the switcher. The position of the circle is animated with UIView animation. Therefore, animation with UIView will smoothly change the bearings of the circle layer, while we are changing the path of the buffler on the basis of those bearings.

 

The path for the buffler feature two UIBeziePaths.

 

UI animation code

 

The first one goes from the point 1 to the middle of the circle edge at point 3. Control point for this curve is point 2, it proportionally depends on how far the circle moved out. The second line goes from point 3 to point 5 and its control point is point 4. In this way we can get the line of the buffler edge smoother.

 

The method of forming path for the particular extreme point

 

 

 

The method of animation on tap  

 

 

For reaction on pan we added UIPanGestureRecognizer. Here is the method that processes it

 

 

Welcome to review the GitHub source code for this animation. New cases are coming soon!


Welcome to see designs by Tubik Studio on Dribbble and Behance