Tag Archives: mobile screens

ui design for music apps

Feel the Beat. UI Design for Music Streaming Services.

People like listening to music. It’s an axiom and never a question. As Friedrich Nietzsche said: “Without music, life would be a mistake.” And who would argue? All of us listen to music daily. Some may prefer rock, others — classical compositions still no one misses a chance to enjoy their favorite tracks. Considering this fact, the need of having a twenty-four-hour access to music seems as a today’s must-have.

 

It’s hard to say how many music service products exist today but the industry constantly grows so designers have lots of work to do. We devote a new article to the peculiarities of UI design for music streaming services. Let’s see what screens are typical for this type of digital products and what elements their UI requires.

 

What do users expect from music streaming products?

 

Music streaming products aim at providing users with an access to the various musical tracks from all over the world. There are both free and paid services trending on the digital market and they are available for different devices including PCs and smartphones. Of course, all music streaming apps strive at uniqueness still they have a common base of tasks to accomplish. Let’s see what this kind of products usually offers to their users.

 

Online and offline music streaming. The majority of music players usually provide online streaming so that users could enjoy various tracks without downloading them on their devices. However, people can’t always have an access to the Internet so the feature enabling to download certain compositions and play them seems to be essential.

 

Playlists. Music streaming products contribute thousands of different tracks but even the biggest music lovers won’t listen to all of them. Playlists are a core part of music players. They allow users to choose and combine their favorite compositions for different mood and situations.

 

Music flow. Sometimes, people get bored of their playlists and want just some random tracks to play. Music flow is a list of tracks based on the users’ preferences which never repeats itself.

 

Radio channel. They say all new is well overlooked old. Even having a quick access to the favorite music, there are still many radio lovers. In-app radio channels are a nice alternative to the flow as well as an element of entertainment.

 

Music storage. Not all the tracks can be free to listen, which is why music players often give the possibility to buy paid tracks and add them to their playlists.

 

Equalizer. People perceive music differently so the need of sound settings is obvious. Equalizer helps to make music sound in the best way for a user by regulating music tones.

 

music streaming app design

BeatSync App

 

Screens for music service products

 

Based on the users’ needs designers have formed a standard set of screens (pages) which are typical for this kind of product. Let’s see what they are and which UI elements they usually include.

 

Home screen

 

Any digital product has a page or a screen where users start their journey within a product each time they launch it. A home screen is also known as the main page of a digital product. It received its name as it provides a starting point with many further directions for a user.

 

A home page of music streaming products often contains direct links to the most important areas of interaction with an application such as a personal profile, playlists, search field, and music store. Also, a home page provides an insight on music updates as well as the recommended music for a user.

 

Traditionally, UI of a home screen for a music app is made in minimalistic style. Recommendations and music novelties are presented via pictures of album covers or artists’ photos followed by captions saying the name. This way the search process becomes more intuitive and pleasant.

 

Profile screen

 

Profiles are a tool making interaction within a product more personalized. They allow operating with the information effectively and make user experience individual for everyone. As for music products, personal profiles assist developers to gather information about users’ tastes and preferences in music genres and artists. Based on the data, an app will provide listeners with recommended music as well as interesting fresh tracks.

 

In addition, a personal account is a good way to add features of a social app to a music streaming product. This way users can unite in a virtual community of a certain product and share the personal info with the others.

 

The principle of a profile page design remains similar for all types of products. First of all, a profile page should be clear in use. The amount of the information has to be limited otherwise a profile screen may look too complex. What’s more, it’s vital to make sure the navigation system is intuitive so that it wouldn’t have to take much effort to puzzle out the app.

 

UI Navigation menu and Profile screens v2 for Echo case study

Echo app

 

Search screen

 

Hunting for new songs is a daily routine for true music lovers. Designers need to make sure it goes easily and leaves only pleasant impressions. UX for search screen should be well-thought and intuitive so that users could quickly find what they need. An essential part of a search screen are filters helping to sort the received results. There are some typical filters for a music app which include genre, artists, songs albums and a year of release.

 

Playlist screen

 

Music lovers like creating their own playlist for every occasion. Obviously, every music app is obligated to provide their users with such a feature. Playlist screen looks similar on different apps: it’s a list of tracks showing the name of the song, singer or band, and the length of the soundtrack. Also, designers can add a small image of the album this track belongs to. In case a song has no image there still should be an icon, for example, with a music note.

 

Player screen

 

The page which people visit most of the time using a music app is a player. People can control what they listen and how they listen to it via the player. The feature allows switching, stopping and starting a track with standard buttons which are easily recognized. This set is usually placed centrally on the bottom of the screen. The major part of the screen is typically taken by the image attached. Also, sometimes instead of a picture, many designers apply music visualizer as a central part of the screen. Visualizer is a good opportunity to reveal the imagination and creativity which is always inspiring for designers.

 

tubik studio music_app

Music App

 

Music feed screen

 

If a music streaming service provides a possibility to add friends and follow other users, a music feed should also be considered. Feed is usually known as a constantly changing list of news and other data users choose to follow. Music feed includes the updates on the friends’ pages as well as news from the pages of particular artists they follow.

 

Designers make a simple clear UI for music feed which isn’t overloaded with visual details. It allows people to scan quickly through the feed not getting overwhelmed with tons of information.

 

ui design for music app feed screen

Echo app

 

Settings (equalizer screen)

 

Each app needs to have settings screen but a music app requires one specialized option. Besides other standard settings, they provide a possibility to tune the sound of the music. Depending on the music genre experienced listeners adjust the loudness of specific frequencies via an equalizer. Equalizers often look similar to vertical graphics responsible for certain frequencies which users can regulate with sliders. The designers often do experiments with equalizer UI to be certain it’s not boring to use.

 

Music store

 

As we said above, not all the music can be free so a music store comes in handy. UI design for music store usually borrows some principles of e-commerce design. First of all, paid music is presented in a catalog with relevant filters for the search. Clear visual elements support the product not overshadowing it.

 

app UI design Tubik Studio

Singify App

 

Music has always been a source of inspiration for people around the world. Trends may constantly change but music will never step aside as well as products providing us with our favorite tracks. So, possibly, sooner or later each designer will create their own new music product.

 

Recommended reading

 

Mobile UI Design: 15 Basic Types of Screens

 

Case Study: Echo. Designing User Experience and User Interface


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

wedding planner app UI design

Case Study: Wedding Planner. UI Design Concept.

Perhaps, everyone, who once tried to organize any public event, knows that this sort of job is no joke. Remember Mary Fiore, the main character of the well-known romantic comedy «The Wedding Planner»? She had to plan plenty of things and organize a crowd of people to make everything work like a clock and result in a perfect wedding. No wonder, people pay so much attention to this sacramental day: it marks one of the most important life decisions and events. Still, organization of this event is surely a big pain, especially for those who don’t know what to expect and how many aspects should be considered.

 

Obviously, technology taking over at least a part of effort could be a great help. After organizing her own wedding and moving through all the path, Tubik designer Olga Popova decided to think over the interface solutions for the Wedding Planner app, a virtual assistant for those who would like to have the perfectly organized wedding. Having felt all the problems and wishes of the target audience for this sort of a digital product, she didn’t want to waste the experience and transformed it into a simple and functional UI concept. 

 

tubik studio UI designer

 

Task

 

UI/UX design for a simple and multifunctional wedding planner and task manager.

 

Process

 

Organizing such a big and important event as a wedding, the participants of the process know that they should be ruled by cold and focused mind instead of romantic flare and butterflies in the stomach. Forgetting little details or planning the time wrongly can spoil all the celebration. That is the core idea behind the app user interface: its main aim is enabling users to plan the tasks and mark them easily and quickly. Moreover, the designer had to consider that the app could be used by people of different age, physical abilities and tech literacy, so the functionality and operability had to be based on simple and clear solutions.

 

wedding planner app UI design

 

As the content of the app is mostly presented with short copy blocks and readability is the core factor, the light background was chosen as a basis. Colored sections also were accomplished in a color palette using tender pastel colors and hues as well as applying gradients. This choice of color combinations set the appropriate mood of the general wedding theme usually associated with delicacy, softness and sophistication. Moreover, such a general palette enabled the designer to add prominent and easily visible contrast for call-to-action elements: this is particularly important as the approach supporting the fast visual perception of the core elements for the apps which are often used on-the-go.

 

The aspect of readability also determined the choice of clear and simple font instead of highly decorated and complex fonts that present a huge seduction for adding more romance. Still, looking proper and stylish on wedding cards or invitations, it could serve a dirty trick with the users of the app: the screens would perhaps look stylish and romantic, but copy blocks would transform into an unreadable mess which is intolerable for a task manager. This was the case when simplicity had the edge over sophistication and decoration.

 

Let’s check out the basic screens of the app. Here you see the main screen of the task manager. It presents the tasks and plans organized by days in chronological order. Having finished the task users can mark them as complete by a tick or put a negative mark if the task wasn’t accomplished. If the date already passed, the app marks the undone tasks by itself so that the user could easily see them scrolling the list. In the top right corner of the screen, users can see the easily recognized button that allows adding a new task to the list.

 

wedding planner app UI design

 

As you can see, time and date are not the only marker to organize the tasks along. Another important feature that makes this app different from general to-do lists and sets its link to the specific nature of planning weddings is the set of categories to classify the tasks and plans. Tapping the plus-button to add a new position, the user is offered to choose the category to which it sticks. Every category is marked with an icon, so reviewing the main screen with the list of tasks, a user can quickly scan what aspects they have to deal with that day, be it meeting a photographer, ordering flowers, making a menu etc. This approach enhances usability and sets the basis for positive user experience.

 

wedding planner app UI design

 

Setting the new task, users can add all the necessary details: locations, telephone numbers, special notes and simple memos. Then, reviewing the tasks, they can tap the icons and see the chronological schedule of all the positions planned for this particular category.

 

wedding planner app UI design

 

If the task includes involving responsible people, adding the contact, a user gets the ability to call or text this contact right from the task position in the planner. It helps to speed up the experience making all the needed operation without the necessity to move to other apps or contact list of the mobile phone.

 

wedding planner app UI design

 

Therefore, this clear and simple app can be a real cure and reliable helping hand for wedding organizers. Its usability is based on the non-distracting color palette, readable copy blocks, quick classification of the tasks and instant access to contacting people responsible for their accomplishment.

 
wedding planner app UI design
 

Don’t miss new case studies on UI/UX design, development, animation and branding here in Tubik Blog: lots of projects and processes are prepared to be unveiled for our readers very soon.


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

book swap app design

UI Animation: Eye-Pleasing, Problem-Solving.

Animation applied in user interfaces is the topic drawing high attention and provoking hot debates nowadays. 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.

 

Why do users love motion so much? Mostly, because animation supports the essence of actual and real interaction, it creates the level of feelings and perception close to what people have when they are interacting with a physical object in real life. This sort of feeling can boost user experience rate of positiveness really high as the more natural user feels, the less effort is needed to deal with the app or a website and the more clear it is how it works. Certainly, it makes users satisfied. No secret, satisfaction and pleasure are among top things encouraging people to use the product again.

 

Like everything that is put into the interface and process of interaction with it, animation must be a functional element, not just a decor. Considering motion elements while planning user journey around the digital product, designer should deeply analyze its potential for increasing usability, utility and desirability of the product before making a decision to apply it in the layout or transitions. Animation in UI requires thoughtful approach and always needs to have a clear purpose set behind. Advantages and utility of using it in the interaction process have to be obvious and outweighing possible disadvantages. Animation should become icing on the cake, not a fly in the ointment.

 

Tubik Studio

 

Define the problem

 

One of the best approaches to make animation functional not only attractive is to reveal the problems that it potentially can solve. It can be done at all the stages of design process:

 

user research will let you know who the target users are, what’s their age, preferences, level of tech literacy, environments and conditions at which the product will be used, and plenty of other factors from the users’ side that can influence user experience;

 

marketing research will give the insights of existing products, their strong and weak sides as well as methods of forming user loyalty, which is the good basis for defining USP solving particular users’ problems as well as original ways of the product presentation and performance;

 

UX wireframing stage will enable to think over the logic of interaction, layout and transitions and get the first assumptions of the points which can be strengthened with animation;

 

prototyping stage will reveal new aspects of live interaction with the screens;

 

UI design stage will provide the complex of visual presentation for the product scheme and system setting a new perspective of applying animation into the app or website;

 

 user testing will show if the decisions made about animated elements were correct and their benefits really outweigh possible pitfalls.

 

tubik studio work

 

At every stage, if designer sets the goal to reveal possible big or small problems users can have, animation, as well as any other design element, can take the role of problem-solver for the case.

 

Let’s review some typical problems that can be solved by means of interface animation.

 

Problem: I want to know the action is done.

 

This is one of the problems that can be easily and quickly solved by animated details applied in UI. 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, switches, toggles and other interactive elements inform user in split seconds activating all the potential of fast visual perception.

 

switch animation tubik studio

Switch Control Animation

 

hamburger_menu tubik studio

Hamburger Menu Animation

 

hamburger button tubik studio

Hamburger button interaction

 

tubik studio button ui

Tab Bar interaction

 

add button animation

Add Button interaction

 

pageindicator tubik studio

Rubber Indicator

 

Problem: I want to know that action is in progress.

 

This is also a huge area of application for diverse motion design potential. When users interact with a digital product, they want to know what is going on at every single step. Making users wait in uncertainty is the risk of losing those users. Still, when users are informed, waiting can be not so annoying and stressful. So, this aspect should always be taken into account and there are many ways to support it via interface animation. This is the high time for pull-to-refresh indicators to come into play and show their best.

 

pull_to_refresh tubik studio

Pull To Refresh

 

preloader animation tubik studio

Preloader

 

pull to refresh animation tubik

Pull to refresh

 

pull-down animation tubik studio

Pull Down — Hourglass

 

tubik studio pull down

Pull Down — Space Ship

 

Problem: I can’t see the progress and don’t understand how long it will take.

 

Quite often it’s not enough just to let users know that the process is going on. They often want more: to see how fast it is progressing and how long it will take. Again, interface animation can be a great helper here. Load bars and progress bars, animated timelines, and other dynamic elements can kill several birds with one stone:

 

— they inform user about the level of progress

 

— they can become the entertaining element blunting negative experience of waiting in the process of interaction

 

— designed and animated in an original way, they can become a viral feature which users will want to share with others and engage more users into action.

 

tubik studio motion design

GIF for the Timeline App

 

tubikstudio motion design

GIF of Dynamic Scroll

 

Problem: I don’t want to make my screen a mess.

 

That is really a vital thing to think over in the interface design. If the screen or page looks like mess overloaded with tons of data which is not clearly organized, it will require additional effort from the user to understand how it works and where the needed information can be found. The more effort, the higher chances are getting that users will go away in search of simpler solution. In vast majority of cases users wish to have apps and websites that will simplify and improve their life, perhaps even will do some job for them rather than will take additional effort and time on interaction. Animation can be a good way to enhance interaction with various data blocks and sections and make everything feel organized even in highly data-saturated and complex interfaces.

 

sport app motion ui tubik studio

GIF for Sport App

 

tubik studio motion design ui

Cards Animation

 

UI Design Interaction Tubik Studio

Boat Station App

 

tubikstudio blog app ui animation

Blog App

 

Problem: I want to see the key things first.

 

Visual hierarchy and clear navigation are always a great concern for designers creating interactive digital product. Users’ attention should be immediately drawn to the key element of interaction according to its goal and conditions. Animated interface elements present great supportive force for this aspect, enabling faster and more distinct visual marking of important elements in the layout.

 

tubik studio tapbar ui

Tapbar Interactions

 

tubik studio behance weather app

GIF for the Weather App

 

App screens by Tubik Studio

Resto App 

 

Problem: I want to feel the interaction natural.

 

This is the problem that most users will not be able to formulate, still it has a great influence on user experience. If users say something like «I’m not sure what’s wrong but there’s definitely a thing», try thinking over more natural interaction. 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.  Again, 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.

 

tubik studio_social_network

GIF For Social Network 

 

tubik_studio_book_swap

Book Swap App

 

Dribbble shot by Sergey Valiukh

GIF for Restaurant Menu

 

This sort of problem is also popular in interaction with web interfaces. Thought-out movement of layout elements while the webpage is scrolled can enhance user experience significantly and create the feeling of one integral smooth interaction rather than several separate parts or blocks of the page. All in all, it’s pleasant and engaging, and these emotions are a good factor of retaining users.

 

Landing Page Animation Tubik Studio

Landing page animation

 

landing page animation Tubik studio

Landing page animation

 

landing page for capitoledge by TUBIK

Capitoledge — Free Screensaver

 

tubikstudio ui animation website design

Bjorn Website

 

 

Problem: The screen/page is boring.

 

Obviously, talking about interfaces, people often move functional side and usability to the foreground, as key or sometimes even the only aspect requiring consideration. And that’s right and logical, still it cannot null the fact that people are driven not only by logic. There are also such big factors as emotional and aesthetic satisfaction able to influence user experience greatly. Thoughtful balance of utility and usability on the one hand with emotions and aesthetics on the other can bring user-friendly product. And animation is a great booster in this perspective of interface design. It can mark out the beauty of colors and gradients, breath life into layout, make movements dynamic or vise versa smooth, strengthen the power of UI elements with motion and original transitions.

 

calendar-app animation tubik

Calendar App Animation

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Contact List Concept Scrolls Tubik

Contact List Concept

 

tubik studio application recipes and cooking

Recipes App

 

juicy player UI Tubik Studio

Juicy Player

 

So, definitely, animation in user interfaces has massive potential in solving diverse problems of interaction. Still, even the slightest piece of motion added into UI requires thoughtful approach analyzing not only advantages but also possible drawbacks. Animation should support the user, that is its main goal in the interface.

 

Tubik quote UI animation

 

Recommended reading

 

Diverse issues of applying animation in UI design have been an object of professionals’ attention for a considerable period. Here is the collection of articles for those who would like to read more on the topic.

 

Interface Animation. The Force of Motion.

 

Animated Interactions. Motion on Purpose.

 

UI Animation. Microinteraction for Macroresult.

 

UI in Action. 15 Animated Design Concepts of Mobile UI.

 

How to Use Animation to Improve UX

 

Functional Animation In UX Design: What Makes a Good Transition?

 

Experience Design Essentials: Animated Microinteractions In Mobile Apps

 

The ultimate guide to Web animation


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

Tubik Studio Interface Animation

UI Animation. Microinteraction for Macroresult

Microinteraction is one of the key things to care about in UI/UX design. They are, perhaps, the best proof that attention to small details is able to give a big and powerful result. Most books and articles on UX/UI design are moving around one basic message: what you finally get when the design process is finished should be not only beautiful but also useful and usable. In our previous posts and case studies we also support the idea that UI/UX designers do not create just a piece of art: they create a product that solves the problem of the target audience, preferably in a fast and easy way. The solid ground of carefully thought-out microinteractions is able to give the designed product such key characteristics of the successful product as usability, utility and desirability.

ipad interaction tubik studio

GIF — Portrait vs Landscape 

 

The essence of microinteraction

 

Basically, microinteraction is one particular case of user’s interaction with the product completing one particular task. For example, when you press the “like” button (anyhow it looks like) and see that your like has been counted (the number has changed, the button changed the color or became inactive, the copy on the button informed you that you have done the action, the copy under the button or other interactive element informs that you are in the list of those who liked, and so on), that is the case of microinteraction. When you fill in the proper text field with the search request and send it to the system, that is one more case. Microinteractions happen when we follow or unfollow someone in a social network, rate the blog post or set the timer – hundreds of things we do, in most cases not willing to think over those simple steps too much. So, it’s easy to understand that user experience includes loads of microinteractions and they are those magic seeds that are able to grow into great usability, efficiency and popularity of the product if get looked after properly.

 

Perhaps, the best deeply-professional piece of writing on microinteractions, their idea, structure, mechanism of work, their kinds, features and role in creating effective UX design is the book “Microinteractions” by Dan Saffer. It is highly recommended to people working in the field of UI/UX design as it provides much better understanding of user-centered design solutions.

 

Microinteractions in most cases aren’t even consciously fixed by the user – and that is actually one of the important tasks for a designer to make them as natural, clear and fast as possible. There are many ways and methods in design how to enable and improve microinteractions, and interface animation is one of them. We have already started this topic in our earlier article Interface Animation. The Force of Motion, based on general ideas of animation use and purposes in interfaces according to practical experience of Tubik Studio design projects and concepts. There we mentioned that animation enabling and improving microinteractions is something like health: people do not notice it when it works properly but realize its importance when something goes wrong. Microinteractions naturally supported with motion are also hardly notable for users until the moment when they face the problem of their absence. So, today we would like to provide you with more detailed thoughts and examples about some kinds of this interface animation type.

 

tubik studio button ui

Tab Bar Concept 

 

Animated microinteractions

 

Animated buttons

Buttons of different kinds and sorts are, obviously, the most popular elements of interaction. What is more, they are easily perceived by users as the elements with which they can activate a screen or a webpage functionality, even for users with low level of computer literacy as buttons actually imitate interaction with common physical objects. So, buttons are among the elements actually influencing the nature of user experience, making it easy and positive or vise versa annoying and confusing. Buttons in a lot of cases are among the most frequently used triggers of the microinteractions and vital elements of navigation. So, they need thorough attention from the designer in deciding on not only color, shape, special effects, textures and placement but also necessity, appropriateness and nature of animation.

 

ipad interactions animation

iPad App Interactions 

 

ui concept animation tubik studio

UI Navigation Concept 

 

ui concept animation design

UI Animation Concept 

 

tubik studio tapbar ui

GIF of the Tapbar Interactions 

 

hamburger_menu tubik studio

Hamburger Menu Animation 

 

add button animation

GIF for the Add Button 

 

Pull-down-to-refresh animation

This type of animation for interfaces is among the most popular now and the customers often mention it from the very first stages of work on UI design for mobile applications. On the one hand, it simultaneously provides two steps of interaction with the app showing that the user has reached the upper limit of content scrolling and that the screen of the app is refreshed. On the other hand, it opens incredibly broad space for creativity at graphic UI design stage as the elements activated in this process could be not only informing but also stylish, good-looking and entertaining. Moreover, this type of interface animation can efficiently use specific branding elements supporting general brand awareness and making logo or mascot of the brand more memorable and recognizable.

pull_to_refresh tubik studio

Pull To Refresh 

 

tubik studio pull down

GIF for Pull Down — Space Ship 

 

pull-down animation tubik studio

GIF for Pull Down — Hourglass 

 

State of process animation

Some kinds of microinteractions happen immediately, the others need some time to finalize. Anyway, for positive experience users need to understand what is going on at every step they take. So, loading processes and the like should be shown to the user clearly and they are also the great space for designers’ creativity. As in the previous case, some standard solutions can be used as well as entertaining and funny details and effects or elements of branding can be promoted here. In this case, designers should analyze core target audience to decide what kind of animation can be supportive here and if it needs either a sort of loading bar or circle or also any additional data like the percentage with numbers shown or any explanatory copy.

preloader animation tubik studio

Preloader 

 

pageindicator tubik studio

Rubber Indicator 

 

pull to refresh animation tubik

Pull to refresh

 

One more thing to mention is the fact that using any kind of digital interactive product, what user really needs is communication via fast feedback from the system. Even if the user has to wait, he/she should be clearly informed about it. It is the basis for all the types of animation featured above. The most important and initial aim of animation is to clarify, ease and speed up the process of interaction, and only after this to beautify and create the so-called “WOW-effect”. Interface animation solutions should be accomplished on the basis of usability rather than pure decoration and entertainment.

 

However, as well as in the previous post on animation, we appeal to common sense in use of animation for microinteractions. Animation should support the users, help them, and be applied where it is really reasoned with usability increase, not distracting or overloading the screen.

 

Points to consider about animation for microinteractions

 

— It shouldn’t overload the page or screen too much causing long and annoying process of loading

— It should be thought-over in perspective of different devices and conditions in which target user can potentially use them

— It shouldn’t create high distraction from the most important features or content on the screen or web-page

— It should correspond with the general stylistic concept of the application or website to support general harmonic perception of the product

juicy player UI Tubik Studio

Juicy Player 

 

Designing solutions for efficient microinteractions, a designer has to act somehow on the crossroads of design, psychology, sometimes linguistics and other spheres of science and human activity. Thorough analysis of the target audience and testing ideas and concepts enabling microinteractions usually open the door to higher usability. Animation used wisely in the interfaces can become one of the ways to effectively speed up interaction and make it more natural when it’s needed at the same time creating pleasant and stylish visual design.


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

PassFold UI by Tubik Studio

Case Study: PassFold. Designing UI.

In our earlier case studies we have already presented some ideas and strategies for design and redesign of UX/UI (Echo project) and UI (Tracking App project). Today we want to add new case to this collection and present you one more project on UI design.

 

Most designers dream to work on the full cycle of a product creation and launch, from generating ideas to full UX cycle and then full UI cycle. However, in real life there are loads of projects in which a designer works only on UI stage based on existing or already made UX. Mostly, it happens in cases when the product already exists as real and operates successfully, but more trendy looks or more clear and intuitive UI is needed to renovate it and make even more efficient. Somebody might think that this scheme is even easier for a graphic designer as you don’t need to think through all the logic and user behavior, only visualize the given scheme and layout. Nevertheless, in practice it is totally different as efficient UI is always based on polished UX, therefore to keep the consistency, the designer needs to do a considerable job of getting dip into details of the given layout and transitions and sometimes solve some minor UX problems even in the process of UI design. It often happens because new solutions in user interface will not work on the basis of out-of-date UI.

 

And this was the issue which Tubik Studio designer Tamara faced working with UI design for the project called PassFold. Let’s get into some details together.

tubik studio designer

Tubik Studio designer Tamara working on the project

 

Task

Redesign of UI for a mobile application for tickets (passes) management on the basis of existing UX/UI.

 

Tools

Adobe Photoshop, Adobe Illustrator.

 

Process

The idea behind the application under design was basically very clear and practical: it presented the virtual storage for tickets and passes bought online and gave wide opportunities to manage them.

 

Although general UX was already given as the basis for UI solutions, the designer analyzed it deeply and discussed it with the customer so that they could make some minor changes or add some functions significant in order to increase general usability of the application. Among them, there were added notifications about the dates and events which could be set manually, so that users could decide and chose if they wanted to get notifications about all the events they have kept in the storage or only some of them which are, perhaps, the most important.

 

One more step to optimization of both UX and UI of the app was to move the items previously placed in side menu to the tap bar. The logic behind this was rather simple as basic menu doesn’t consist of many options, moving its content to the tapbar makes user experience more intuitive and comfortable. Previous projects and research prove that tapbar is a great solution for the small set of basic options.

 

Passfold by Tubik Studio

 

One of the essential requirements from the customer was to use basic color palette in purple shades therefore the designer carefully thought about the right range of colors and shades to make the application screens both bright and clear as well as smart-looking.

 

In the first version of UI for the application items in the feed they had no footer and the text with data about the particular event was placed right on the photo used as a background. In this version, the designer offered to change this part of layout and separate photo from the text making it placed in the footer with the light background. The reason for such solution was simple: the application used the photos automatically linked to the events from the resources where the tickets or other stuff was bought, therefore it was impossible to control the quality of those photos or to change them manually, so in some cases they could cause illegibility of the text if it was placed right on the photo or picture. This could have significant influence on users’ perception and make it negative. So, solution of creating footer was made to eliminate this risk.

 

PassFold by Tubik Studio

 

User interface in the given application also included some conventions used through all the app screens. Conventions are a very important part of positive user experience in the interaction with the product, especially in highly practical applications, whose operations need to be dynamic and not taking too much time or effort. In PassFold project the consistent element throughout the screens was the tab showing the number of the days left to the event visualized in the form of tickets of different colors as you can see in the image above. The colors corresponded to the color of the event category in the main menu of the app. They enabled user to get fast and easy when they need to define the category of any item in the feed. That is even more precious when the person uses the app on the go which often happens with highly practical apps and tools.

 

Certainly, one of the most important parts of such kind of app is the calendar which represents all the plans according to the tickets and other items stored by the user. The calendar was also solved in pleasant-looking and clean manner with light background so that colorful accents showing the dates with planned events were clear and easily seen. The notifications, as it has been usually mentioned, could be added manually by the user, and if he did it, the date on the calendar showed it with the special small round mark both in the calendar and the line with the event description, as you can see in the image below.

 

Calendar by Tubik Studio

 

It should also be said that one more element influencing on the general concept of UI for the application was its logo. It was also created by Tubik Studio designer Arthur Avakyan and it will take the separate case study to present you the full process of its creation, so it will be the next story in our blog coming soon. It was very reasonable to keep the general concept both for logo and UI, so it can be said that their interconnection and interrelation gave the entire unified design feeling. The logo was added the colors used in the color palette for UI, and UI kept some features and shapes used in logo, including the form of tickets it visualized.

 

Tubik Studio

Arthur Avakyan working on PassFold logo.

 

The designer also paid additional attention to such simple but significant elements of the interface as icons. The customer wanted that UI of the app didn’t look too serious or businesslike, so the icons were not only meaningful elements in the general navigation of the app, but also the flavor of entertainment and fun in also bright and colorful menu.

 

Icons by Tubik Studio

 

One more element of fun was added with the animated pull-to-refresh showing colorful tickets changing.

 

Tubik Studio design

 

The customer also wanted to enable users top obtain information about events via QR-code, therefore a special pop-up window was designed for this function which the user could see by swipe.

 

Ticket detail screen as well as the calendar screen, being one of the most informative parts of the app, was also solved in the color scheme with light background to provide high level of readability.

 

This version of the app also added sharing feature. With special buttons appearing on the long tap the user could share the information about the ticket which was gained with his friends via his social accounts. Moreover, the app also included the feature of sharing the ticket itself via sending it to a friend.

 

Screens by Tubik Studio

 

Every screen involved unobtrusive tutorial prompts in cases where some options or actions could be non-obvious for the user.

 

Here you can see the full scope of UI for PassFold project.

 

UI by Tubik Studio

 

After approving all the screens and UI elements of the app with the customer, the designer also took some time to work on adaptation of all the solutions to iPhone 6/6+ and Android that also demanded deep attention to details that have to look perfect in all the versions and resolutions.

 

Tubik Studio designer

Tamara working on the finalization and adaptation of general UI design

 

The work on the project was the process full of ideas and inspiration, so many that the project could not include them all. That’s why some of the ideas, inspired by this design task, became the basis for Dribbble shots by Tamara presenting her UI concepts.

 

tubik studio app ui

Time management app by Tamara

 

event app UI Tubik Studio

Event App by Tamara

 

This task has become one more proof to demonstrate how much effort, time and creative job should be done to create design of the interface that will look and feel simple and cute but at the same time will satisfy multiple needs of users.


Welcome to see other works by Tamara on Dribbble 

Welcome to see other works by Tubik Studio on Dribbble and Behance