Fitness application design by tubik

Activity tracker by Sigma Software Design

Workout app design by Odama

Fitness app design by Musemind

Fitness and yoga application by Outcrowd

Fitness app concept by Anastasia Golovko

Workout application by Enver Studio

Workout planner app by ever

Fitness tracker application by One Week Wonders

Fitness tracker application by tubik

New design collections are coming soon; stay tuned!

For more inspiration, check the sets of other posts from our D4U Inspiration gallery, where we gather impressive creatives to share their art with you, for example:

• people illustration gallery
• a big of user-friendly mobile applications
• logo design collection for various business goals
• captivating 3D animation concepts
• creative web designs with 3D graphics
• web design examples on ecological issues
• inspiring mobile interactions design examples
• Procreate illustration tutorials

Сообщение UI Inspiration: App Design Concepts for Sports and Fitness появились сначала на Design4Users.

For videos that are accompanied by sound use sound volume control near the play bar to tune as you want

Audiobook app interactions by Khonok Lee (mind the sound in the video)

Fitness App interactions by tubik

Fanvest app prototype by PLATFORM

E-medicine application prototype by Outcrowd

Calendar app interactions by Khonok Lee

Personal Challenges app interactions by tubik

Music Player app interactions by Khonok Lee

QUAN app interactions design by PLATFORM

Finance tracker mobile interactions by tubik

Algorithm settings interactions for Investment App by Brave Wings

Fitness application prototype working in sync with smartwatch by PLATFORM

Banking app concept interactions by Khonok Lee (mind the sound in the video)

Mobile app interactions by Dimest (mind the sound in the video)

Quotes app interaction design by tubik

Neumorphic app prototype for the washing machine by Dimest (mind the sound in the video)

Savings app prototype by PLATFORM

Smart Home app concept interactions by Mammad Emin

More thematic design collections are coming soon for your inspiration, don’t miss them.

You may also like the big collections of e-commerce web design examples and ecommerce app designs, examples of web designs with 3D illustrations, neumorphic UI designs, web designs for events, user interfaces for finance management, creative logo designs, UI concepts for education, and other D4U Inspiration posts

Сообщение 17 Inspiring Examples of Mobile Interaction Design появились сначала на Design4Users.

Not only the number grows but also diversity, and that’s clearly seen from the variety of design projects. So, today we offer to review the most popular types of mobile applications, their functions, and benefits, in addition to the guide into types of websites and types of mobile screens we told about earlier. With plenty of examples by Tubik designers, of course.

There are two global perspectives to classify mobile apps: in the aspect of content they offer and the aspect of their technical realization. Let’s start with the content.

Content Perspective

Here we classify the applications according to the problems they solve and the functions they offer to users.

Utility Apps

This is the basic and perhaps the most widely used type of mobile applications. These apps let users solve a particular problem or accomplish a task, usually the one we face day in and day out. It’s all about basic problems which should be solved quickly – and this is what apps of this type do, saving our time and effort. Here you will find a variety of calculators from standard to financial and scientific ones, clock and alarm apps, flashlights, barcode scanners, tools for conversion and password management, screen locks, etc. They are little helpers of our everyday life.

Event App

Toonie Alarm

Homey App

Contact List App

Lifestyle Apps

These apps are connected to various spheres of our activities connected to lifestyle and life quality. Usually, they cover quite general themes, subjects, and services. These apps help users find and improve their homes and offices, take up hobbies, look good and feel good, etc. If your app is about real estate, fashion, parenting, or hobbies, that’s a category for it.

My Baby App

Watering Tracker App

Carfinder App

Navigation Apps

These mobile applications help users to find their way and plan their routes. These are driving and walking assistants, map applications, atlases, public transit maps and fuel finders, pilots and maritime assistance apps, and the like.

Dog Tracker App

Food and Drink Apps

These apps are all about tasty life as “there is no love sincerer than the love of food” according to George Bernard Shaw. Here you will find everything about eating and drinking, cooking, healthy food, eating out, and the like. So, diverse applications offering users recipes and menus, nutrition facts, reviews of meals, beverages, restaurants, and cafes, guides into cuisines of different countries, and all the stuff like that go to this category.

Restaurant App

Tasty Burger App

Vegan Recipes App

Drink Recipes App

Books Apps

Explanation won’t take long: these are apps for reading or listening to the stuff that was traditionally printed. Here this content becomes interactive and offers different functionality for user manipulations. Reader apps, interactive ebooks, and comics are found in this category.

ABUK, the mobile application for audiobook store

Education Apps

The mobile applications of this type are all about learning and teaching: the main objective behind them is to share knowledge in an interactive way. Here you’ll find the apps of different complexity and interactivity levels focused on educational purposes. They may be aimed at different target audiences that determine the approaches to graphics and general concepts of user interface design for every particular case. In this group, you’ll find stuff from basics like reading, writing, phonics, colors, alphabet, vocabulary training apps to specific narrow themes like nature and wildlife, geography and astronomy, languages, test preparation apps, school portals, and educational platforms.

Learn Chinese App

Nature Encyclopedia App

App for Moon Creative, an educational facility for children and teens studying design and animation.

Entertainment Apps

Who works well, has to rest well. Entertainment apps are usually aimed at adding fun to our life. These interactive applications are designed and developed to entertain users with audio, video, graphic, and other content. Here are TV and movie apps, ticketing apps, interfaces for art creation and fun clubs, etc.

Cinema App

Gallery App

Game Apps

One more group of apps which can serve both entertainment and education is games. Here you’ll get a variety of options, from highly useful intellectual or educational games to time-killers for waiting time. Game applications are perhaps the most diverse in visual styles and layout design.

Real Racing Mobile Game

Letter Bounce Game

Music Apps

For many users around the world, music is an integral part of life, so the domain of music apps offers a great variety of options to discover music, listen to it, record, or even compose music. These are not only music players and libraries, but also apps for music creation, education, watching videos and concerts, and even lyrics writing.

Business Apps

These mobile apps support people involved in business activities: they help to track and analyze data, provide functionality for collaboration, resource management, and planning. Here you’ll also find apps for hiring and job search, remote desktops, file sharing apps, and tools enhancing teamwork.

Finance Apps

The apps of this group are about money. They actually perform financial transactions and support the user about the company or personal financial stuff. So, here are financial management and budget apps, mobile banking applications, the ones about investment, insurance and stocks, taxes, and bill reminders.

Finance Management App

Finance App for collective finance management

Home Budget app for tracking and analysis of personal financial stuff

Bitex Stock Analysis App

Sports Apps

The apps of this category are related to sporting activities of all kinds such as professional, amateur, collegiate, or recreational ones. They may serve for teams, leagues and sporting events, feature info about athletes, track scores, provide instructions and sports news.

Personal Challenges App

Health and Fitness Apps

This type is aimed at the user’s healthy living. There can be apps that help to monitor health conditions, track and analyze this kind of data, lose or gain weight, manage stress, do fitness, have active rest, or relaxing recreation. Workout, running and cycling trackers, apps sharing programs for weight loss, pilates and yoga apps, pregnancy applications, and all this kind of useful helpers are found in this category.

Slumber App

Fitness Tracker App

Calorie Calculator App

Medical Apps

In comparison to the previous category, these apps are more professional in the aspect of healthcare and medical treatment. They are focused on medical education, management, and health reference for patients and doctors. So, here you’ll come across the apps informing about diseases and symptoms, helping to explore the anatomy and track health conditions deeper than the general health trackers, supporting medical records.

Magazines and Newspapers

The name says everything: this category usually features the apps that provide content we typically find in newspapers, magazines, or other periodicals. Usually, the content is automatically renewed and may cover a wide variety of topics. Also, these may be the apps providing the online version of print periodicals or the app may provide news and articles only online without any connection to a physically existing publication.

Blog App

News Apps

Very close to the previous category, these apps’ goal is to provide users with information about current events in diverse areas of interest from politics and entertainment to technology, business, science, and others. An app of this kind usually serves content in a newsreader or digest format, or it may be a digital-first media outlet with constant content updates. So, this category offers apps for TV and radio news, RSS readers, news programs, and outlets.

Photo and Video Apps

These apps help to create, manage, store, edit, and share photo and video content. Adding special effects, printing, creating custom greeting cards and social network posts, editing content with adding text, illustrations, masks, making collages, and so on – that’s what you find in this group.

Cuteen Photo Editor App

Productivity Apps

The apps here have an objective to organize specific processes and tasks to make them more efficient and save user’s time and effort. As well as utilities, they may be simple but very helpful on an everyday basis such as task managers and to-do lists, calendar and password managers, chart generators, apps for data viewing, emailing, note-taking, and cloud storage.

Task Manager App

Upper To-Do App

Task Tracker App

Cloud Storage App

Shopping (E-Commerce) Apps

More and more users are doing their shopping online, and a big proportion of them do it right from their smartphone or at least use an app as a way to get the data about the goods quickly and easily. Stats in this sphere are also impressive. According to Statista, In 2021, 72.9 percent of all retail e-commerce is expected to be generated via m-commerce, up from 58.9 percent in 2017. Emerging e-commerce markets in mobile-first economies are a large driver of this trend.

So, not surprisingly, the diversity of e-commerce applications is growing day by day with a variety of user interface design approaches and tricks. These apps support the full cycle of purchase or enhance the shopping experience at a physical point of sales, for example making a process of payment easier. Marketplaces, coupon apps, product review platforms are also found here.

Exotic Fruit Ecommerce App

Perfect Bouquet App

Vinyl Store App

Social Networking Apps

These mobile applications are all about communication. They connect people by means of different content such as text, photo, video, voice. These apps may be aimed at both personal and community connections. So, here you’ll see the apps for text and voice messaging, audio and video calls, photo and video sharing, blogs and communities, dating apps and social networks on special interests.

Dating App

Book Swap App, a social network for readers

Buon app, a social network for fans of cooking

Social networking application for photographers

Travel Apps

Everything devoted to traveling is found in this category: here are the apps that help users plan their journeys, book accommodation, find and buy tickets, and so on. These may be flight trackers, apps for hotel and car rentals, holiday planners and city guides, travel tips and rewards, clocks showing the time of different time zones, etc.

Travel Planner App

Lodging App

Museum App

Weather Apps

No need for long explanations: this type of apps informs users about weather conditions, from general forecasts to specific data about storms, tides, specific weather conditions in different locations, etc.

Weather App

Technical Perspective

In the aspect of technical realization, there are three global types of applications: native, hybrid, and web apps.

Native Apps

These applications are called that way because they are made exclusively for a particular mobile operating system so they are native for a device or platform such as iOS, Android, Blackberry, Windows Phone, Symbian. It means you can’t use this app on a different platform except for the one they are aimed for. The benefit of such apps is their high performance and high chances of positive user experience based on native device UI. They have access to different APIs and quickly reached from app stores. The pitfall is that if you want to reach your target audience from different platforms, you have to design and develop a native app for each so it may be rather expensive and time-consuming which in turn may increase the general product cost.

User interface designed for Android

User interface for Tasty Burger app designed for iOS

Hybrid App

These apps are built to be used across multiple platforms by means of web technologies such as HTML5, CSS, and Javascript. So, in basic terms, these are mostly web applications that look very close to native. They are quite fast in development which is a definite advantage: one code base is created for all platforms which makes the cost lower and updates easier. Basic APIs are also available for them, such as accelerometer or geolocation. However, compared to native apps, hybrid ones are worse in performance, speed, and general optimization. What’s more, there are some design requirements that can’t be accomplished for two or more platforms appropriately.

Web Apps

These are software applications that use a browser to run; they are mostly written in HTML5, CSS, and Javascript. Basically, they redirect a user to a URL, and “installation” is, in fact, creating a bookmark to the webpage. The biggest advantage is that in most cases they have minimal requirements as of the device memory and give users access from any device connected to the internet dut to saving personal databases on a server. As for the drawbacks, a bad internet connection leads to poor user experience and access to APIs is quite limited.

So, in any particular case, a client and a creative team make a decision on the type of the app based on budget, time, and numerous factors of target audience needs and behavior.

Useful Reading

If you want to learn more about the best practices of user experience and user interface design for mobile, here are handy articles on the topic.

How to Build a Strong Mobile App Brand

Mobile UI Design: 15 Basic Types of Screens

Mobile Design: 14 Stylish and User-Friendly App Design Concepts

7 Tips to Improve Mobile Interactions

Step-by-Step Guide to Creating a Mobile Application

Mobile Typography: 8 Practices For Powerful UI

UX Design: How to Use Animations in Mobile Apps

Copywriting for Mobile and Web Interfaces: Types of UI Copy

UI/UX Design Glossary. Interface Navigation

Originally written for Tubik Blog, graphic content by tubik

Сообщение Big Guide into Types of Mobile Applications появились сначала на Design4Users.

Project

UI design for a mobile application helping users sleep well.

Process

Slumber is a collection of stories and meditations for people that suffer from sleep or relax problems. The collection of slumber tracks is made to help users relax and sleep well through the night. The major tasks for the interface designer were:

• clear and intuitive navigation: users of such an app want to relax rather than spend hours surfing from one screen to another
• stylish visual performance of graphics setting the appropriate mood and atmosphere
• high readability and engaging animation to support easy interactions.

Home Screen

As for the choice of colors and background,  the mobile user interface is designed in accordance with app functionality: it is based on the dark color palette to transfer the atmosphere of the night and subdued lighting. The screens also feature corresponding graphics that look deep and stylish with dark skin.

The home screen featured new episodes and popular playlists. The tab bar linked the user to the core functionality zones of the app: home page, library, and profile. As the target audience of the application was quite broad and some users could be of the low or medium level of tech-literacy, the designer supported the icons with labels to make navigation clear for everyone.

Another nice and catchy point of the screen was a custom illustration that was animated together with a preloader and made the process of waiting not boring and aesthetically appealing.

Slumber Library

App library offered a big collection of relaxing tracks to choose from. To make the process of list skimming quick, each item was supported with a proper theme image.

The simple and clear system of filters allows a user to choose the most comforting settings and sound combinations to perfect the experience of meditation or sleep. Tuning background effects, users create personalized sounding. The background image is a consistent element that never disappears in the process of listening and tuning the sound this way uniting all the screens.

Unobtrusive animation adds style and natural looks to the interface in the process of transitions. The choice of fonts is based on high readability and clear typographic hierarchy so that users could scan the screen in short seconds.

High-quality images used for every item of huge Slumber Library create elegant visual support and set the necessary atmosphere for a harmonic combination of what users see and what they hear.

Profile Screen

The informative profile screen showed the user all the key information about streaks and sessions. It also enabled to set bedtime reminders, get Sleep Headphones and move to the settings screen to tune Slumber as needed. Pricing screen showed how users can reach Premium mode. Again, the UI design was based on dark color with brightly colored accents that immediately attracted users’ attention to the key elements of the layout.

This project was an interesting challenge, requiring the well-thought balance of clear and accessible functionality and stylish visual concept corresponding to the theme of healthy sleeping.

More Design Case Studies

If you are interested to see more practical case studies with creative flows for mobile UI design, here is the set of them from the Tubik team.

Nature Encyclopedia. UI Design for Education

Inspora. Brand and UI Design for Virtual Stylist

Bitex. UX Design for Stock Analysis App

Letter Bounce. UI Design for Mobile Game

Real Racing. UX and UI Design for Mobile Game

Cuteen. UI/UX Design for Mobile Photo Editor

Tasty Burger.UI Design for Food Ordering App

Watering Tracker. UI Design for Home Needs

Originally written for Tubik Blog

Сообщение Design Case Study: Slumber. Mobile UI for Healthy Sleeping появились сначала на Design4Users.

Digital technologies have come for a rescue. Nowadays, the cinema industry provides its customers with handy assistants – cinema apps. They are convenient helpers enabling people to find information about movies along with schedules and the seats available. Moreover, cinema apps are a tool that makes the process of booking and purchasing tickets much more comfortable than ever before. Today’s article describes UI screens and features that are common for cinema applications.

Profile screen

Nowadays every app aims at making the user experience more personalized and individual the reason why a profile is an essential part of any kind of application. As for cinema apps, profiles are tools which help users book and buy tickets within a few taps. What’s more, if a cinema contributes a loyalty program it’s easier to follow customers’ activities because everything is marked in the profile.

A profile should contain only necessary info otherwise the screen may look too complex. When a user creates their profile, a cinema app usually asks for the user’s name, email, location, and preferences in cinematography. Since ticket purchase is one of the major features, it may be good to add an option of credit card data. This way users will be able to make a convenient and fast purchase. In addition, by gathering and analyzing data about users’ tastes and location, an app can inform people about interesting movie premieres near them.

Home screen

Home screen is a base for any type of digital products that’s why it’s also known as the main page. It is a start point where users begin a journey within a product. The content of home screens varies depending on the type of app.

The main screen of cinema applications usually includes movie posters followed by captions with the name to show users what is on today. Films can be presented as a list or a feed so that users could quickly scan them and make their choice. The posters should be clickable and lead to the next screen with the schedule and movie info.

Also, the UI of a home page needs to provide the search field. People who have already chosen a film will be able to type a name and quickly find what they want. It may be a good idea to add some filters such as film genres to make the search process more pleasant.

Movie details screen

A poster and name can’t give a proper explanation of a movie plot. That’s why a cinema app needs to provide the movie details so that users would know what they choose.

UI design for a movie details screen is simple. It consists of a high-resolution poster, the name of a film, and a short text description. Mobile typography should be chosen properly so that the text would be legible and pleasant to users’ eyes.

In addition, some cinema apps show the rating of a movie. It can be IMDb ratings or assessments given by the users who already watched a film. This way people can see how popular a movie is and decide if they want to watch it.

One more additional feature is bookmarking. Users can fill their personal wish list or a list of favorites and go back to the selected movies later.

Player screen

It is known that video content is perceived better than copy that’s why it’s always a good idea to include movie trailers to the movie info.

The video player allows users to watch various trailers right in the app. A player can be a part of a movie details screen as well as an app can have a separate screen with the list of movie trailers. This feature is not a key for cinema apps still there are many of them which have already included it.

Schedule screen

A schedule is a vital part of the information which users receive from cinema apps. Designers should pay deep attention to its presentation as it needs to be compact and easy to find.

The schedule usually relates to one certain movie and shows the time when different film showings start. The time is often presented as a button so that users could tap or click it to continue their journey on booking or buying tickets.

Choosing seats

When the movie and the time are chosen, people need to see where they can sit. There are two types of UI for the seats choice screen – the list and visual representation of a cinema hall.

A list includes two main options to choose – a row and a number of a seat. The list is a light variant that doesn’t take much time to be created and the UI looks nice on various devices even with the small screens.

Today UI with the visual representation of a cinema hall gains more and more popularity. This type allows users to see exactly where the seats are located and make a proper choice. However, designers have to concentrate on the details while creating the visual representation of a cinema hall for UI. Seats should be big enough so that users could easily tap the right one from the first try. Moreover, it’s vital to make sure a visual cinema hall looks good on different screens.

Purchase screen

The opportunity to buy tickets earlier and choose the best seats is one of the biggest profits which users receive from cinema apps. Designers’ big task is to make the process of purchase comfortable and secure.

The checkout screen usually includes a form where a buyer fills in specific personal data such as a name and a number of the credit card. As we said above, if users of a cinema app have their personal profiles, personal information can be taken from there automatically.

In addition, it’s vital to make sure people feel that their personal data is secure. Marks of security can be presented via visual including callouts in a copy as well as some icons of the famous brands that gave their approval or maybe even some certificate signs if there are such.

Tickets

Tickets are the documents which confirm the payment and allow entering a cinema hall. Some apps send the digital tickets to the email so that users could download them on a smartphone or print them to show at the entrance. However, some cinema applications reduce the number of actions. When a user buys a ticket, it is automatically saved in their personal account and all they need to do is to activate an app right before going into the cinema hall.

Tickets can be presented via custom illustrations which adds originality to an app. Also, if a client wants something more minimalistic, tickets can be represented with simple QR codes.

Map screen

Only small towns have a single movie theatre in the area. There are several cinemas from one company around cities so the map feature seems important here. If users set their location while creating a personal profile, an app can automatically choose the nearest cinema.

Watching films at home can’t be compared with feelings of watching it on the big screen. It means that the cinema industry is unlikely to lose its popularity anytime soon. Digital technology should help to improve cinema services so that more people would become loyal visitors. Cinema apps are effective tools for both the cinema industry and its clients. Designers need to learn how to make these tools user-friendly and maybe even improve them with their creative solutions. Stay tuned!

Recommended reading

Mobile UI Design: 15 Basic Types of Screens

Mobile App Design: Big Guide into Types of Mobile Applications

UI for Movies. Collection of Cinema App Designs

Design for Sport: Creating User Interfaces for Fitness Apps

Music in the Hearts. UI Designs for Music Apps

Originally written for Tubik Blog

Сообщение Mobile App Design: Elements of UI for Cinema Applications появились сначала на Design4Users.

Mobile apps are expected to be clear and easy to operate so that they could be effectively used anytime and anyplace. Designers’ task is to create an intuitive interface that will guide users within the app helping them operate its functionality without problems. In this article, we describe the essential aspects of the effective mobile interaction system along with the tips helping designers to create an intuitive design.

Increase Learnability

Every designer strives at creating a unique product with original interactions and navigation systems. Such an approach allows standing out a crowd and being noticeable on the market. However, creating absolutely new environment designers have to think how users will adjust to it.

If the interaction system of a mobile application has no logic and sequence or it doesn’t respond to the needs of the target audience, it may be frustrating and annoying. That condition is critical for UX, so people will simply give up on trying to decipher an app and quit it.

To avoid this kind of outcome, designers need to care about the learnability of the interactive elements. Learnability stands for how easy tasks can be attained during the first usage and how quickly users learn from the previous experience. To increase learnability, designers need to keep it simple and clear helping quickly adjust to it. Also, the system should be consistent and logical so that users could identify the repeating patterns and use a mobile app intuitively.

Consider Multiple Holds

We all are different in many ways, even how we hold smartphones. The way of holding smartphones depends on various factors including the situation and conditions in which the app is used as well as the task we need to accomplish.

There are three common types of holding a mobile. The first is when we take it with one hand and navigate it with a thumb. Another way is to hold a smartphone in one hand and interact with it with the forefinger of the other hand. Also, the type which is common for chatting people is holding a phone in two hands using both thumbs for actions. Of course, there are other types of holds but these three are thought to be the most common.

Source

Source

Considering this fact, designers have to figure out if the layout elements placed effectively for different holds. One-handed hold requires special attention since it has the most limited space of reach. To make the interaction process within a mobile app effortless it may be a good idea to put the key components at the bottom of the screen so that users would be able to reach tap areas easily. In addition, the interactive elements should be big enough so there would be no chance for a mistap.

Upper App

Apply Recognition Patterns

When a new app can be used intuitively it means that the designer did a good job. To provide intuitive interactions, UI design has to contain recognition patterns. They are the elements that users are already familiar with and those which give slight hints on how an app works. The thing is that using an application we are expecting to see certain things associated with the definite kind of product. For example, working with e-commerce apps we are used to seeing cart icons along with CTA buttons “Buy”. Familiar elements in a new app make people feel more confident in their actions.

Users become accustomed to things quickly and their absence makes them feel uncomfortable. That’s why, if you plan to use custom interactive elements, don’t forget to add some standard components. This way a new application won’t overwhelm with an absolutely unfamiliar environment and will help to learn quickly.

Make a Clean UI

A big pitfall of mobile UI design is small screens of the devices. Designers have to figure out how to include all content in a short space without turning user interface into clutter. Clean UI design helps effectively interact with a product since all the core elements can be easily reached.

To create neat mobile UI it is recommended to use icons as interactive components. Copy elements often can be too big for the small screen, so icons are a sufficient alternative. They can explain a function visualizing it with simple shapes and it helps to save the space on the screen. However, during usability testing, it should be thoroughly checked if the icons are perceived appropriately and transfer the right message.

Decrease the Number of Actions

Probably, many of us have the experience of using an annoying mobile app which made us take a long way before we could finally accomplish the task. It may often be caused by an ineffective interaction system that employs too many actions and unnecessary functionality.

Mobile apps usually serve as problem-solving assistants, so it’s vital for them to be designed ergonomically. It means that designers have to apply only core functional elements which will get the users right to the point they needed. The minimum of actions won’t make your product look primitive. It will help a mobile app be effective and pleasing in usage. Remember that people mostly rate the quality of an application not by extraordinary features but how helpful it is.

Add Game Mechanics

Based on the facts described above, we can say that an effective mobile interaction system should be simple and clear to use so that it could be operated without problems.

However, simplifying the interface it’s vital not make it boring. Apps that seem ordinary have fewer chances to gain users’ attention. That’s why it’s important to bring some emotional aspects into applications that look standard at first glance.

To make the process interesting and catchy, it may be a good idea to use gamification. It is the technique of exerting game mechanics into the non-game environment like mobile applications. Various challenges and leaderboards along with the awards and stickers motivate users to interact with a product more and come back to it constantly.

What’s more, implementing a game mechanic called a user journey is an effective way to create a clear layout and transitions. A journey is a user’s progression stages at the time of usage. Designers create UX that way so that people could go step-by-step through the various features which gradually change depending on the needs of the target audience. An approach helps to avoid problems with incomprehensible interactions and functions.

Last but not least, gamification adds the element of fun. Users enjoy entertainment, challenges, and competitive spirit similar to video games, so they are encouraged to go back. People always need some kind of recreational activity so that they could escape from everyday routine for a bit. By adding the fun element into a casual application, you help to reduce some stress and relax for a moment.

Toonie Alarm

Don’t Forget About Testing

Mobile interaction design aims at creating a user-friendly product that will be pleasant to use under different circumstances. But how can a designer define if an app is usable enough and distinguish possible problems in UX? This is when usability testing comes into play.

Usability testing is an essential stage in creating mobile apps helping to evaluate it by testing with the potential audience. It is usually conducted at the UX building stage before a project goes to the development team so that inefficient solutions could be changed easier and faster.

Various usability testing methods allow identifying problems and bugs and quickly eliminate them. This way designers can improve all the aspects of UX ensuring user satisfaction.

So, before you deliver a project to the development team remember to handle testing. Test it by yourself, on your colleagues, on the potential users and then you’ll get the desired outcome.

A simple mobile interaction system is not that easy to create. It requires hard work, concentration, and lots of practice before you receive sufficient results. Stay tuned!

Recommended reading

How to Make User Interface Effort-Saving
Gamification in UX. Increasing User Engagement
How to Choose Color for Interface
Mobile Typography: 8 Practices for Powerful UI
Small Item, Big Impact: Types of UI Icons
Usability Testing in Design: Types and Benefits
Gamification Mechanics in UX: Smart User Journey
Mobile UI Design: 15 Basic Types of Screens.

Originally written for Tubik Blog

Сообщение 7 Effective Tips to Improve Mobile Interactions появились сначала на Design4Users.

Project

User interface and interaction design for an iOS application tracking plant watering.

Process

Have you ever forgotten to water plants at home? Being busy with hundreds of tasks, we sometimes miss very basic things and then regret not doing them on time. With pieces of nature, the effect may be even more crucial as they can get sick or even die without proper care. The task for the interface concept of a mobile app was aimed at helping users having plants at homes or offices: first of all, it had to remind users of watering when it’s needed as well as keep the data about watering.

As we mentioned in diverse articles devoted to UX design, high-quality user interfaces should harmonically satisfy four basic aspects:

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

Based on that, Tubik designer Anton Morozov under art-direction by Ernest Asanov set the goal to make the application not only problem-solving but also informative to broaden its utility. Also, the appearance of the app was an object of thorough attention: as that was definitely the app for daily use, why wouldn’t designers add a pinch of elegance and sophistication to grow desirability and aesthetic satisfaction?

After the flow of UX wireframing, the designer planned the following set of basic functionality for the app:

• adding plants to the app
• reminders and notifications about watering
• getting information and recommendations about conditions and care for particular kinds of plants
• tracking stats of watering and plans for next week.

Let’s check how the layout was designed and what flows of interactions were planned for the mentioned goals.

Adding items to the app, a user gets his/her own directory of the plants which need to be watered now and then. The left screen on the picture below shows the collection of items that were added by the user: it is shown as a set of tabs. The title above the tab gives the name of the plant while on the tab users can instantly see the notification when the next watering is expected for this position. The icon of drops in the top right corner of the tab helps to set the visual association with water and informs a user that the plant on this tab will need watering soon. In contrast, the lowest tab on the presented screen shows the icon of a tick which means that this item has been recently watered.

This way of data organization lets the user quickly scan the state of things right from this screen if there’s no time or need to move to the screens of every particular plant. The background of each tab features an easily recognizable photo of a natural object. And to add a new item, users need just to take a photo, as it’s seen on the right screen below.

The tab bar is highly functional and simple: it includes three most demanded zones of interactions. “My Plants” opens the directory of the ones tracked for watering, “Add New” allows to create a new item and “My Profile” goes to all the history and stats data.

Adding a plant takes just short seconds. When a user has taken a photo with a smartphone camera, the application recognizes it and offers the data from the app catalog of plants: it includes the name, the background picture and the data of care conditions like temperature, humidity and light rates comfortable for this type. The user may add it to his/her set of tracked plants and it will get seen on the screen with the user’s collection. In case there is no data about a particular plant in the app database, the user can create a new item and add it to the app catalog. This approach has two big benefits: firstly, it will strengthen the app with the ability to add user-generated content; secondly, it will inform app creators and support which types of objects have to enlarge the original app database.

Here’s the animation showing the interactions described above.

Now let’s look into some details of watering tracking itself. When the date comes, the user gets a notification that the item needs to be watered. Opening the screen of that plant, users see:

• the name and the background picture of the plant in the upper part of the screen,
• the interactive zone with the tabs of other plants ready for watering,
• the contrast light tab in the lower part of the screen including information about the plant which can be pulled up to open.

The interactive zone with the tabs of other plants ready for the watering can also be extended. In this case, it opens the graph showing the progress – aka watering workload – for the current week. This zone is presented on the dark background which makes the graph look stylish and deep and also sets the good level of contrast with the information tab below presented on the light background. The information tab is grounded on light and airy solution: in combination with bold sans-serif fonts in the interface, it provides a high readability level and contributes much to the effective visual hierarchy of the layout.

When the plant is watered, the user just needs to tap on the icon with drops and it will transform into a tick.

Slight unobtrusive animation makes the interactions live and enhances the general usability of the user interface.

Working on the concept of mobile user interface aimed at solving simple but everlasting problems of everyday life, the designer made the screens informative, efficient, and stylish. First of all, the app of this kind could be helpful at home, taking over the responsibility of a reminder and tracker. Moreover, it could effectively help workers of the offices, public and private gardens or parks, landscape firms, and services – all those who are in charge of taking care of plants and supporting the beauty of nature around us.

Recommended Reading

If you are interested to see more practical case studies with creative flows for UI/UX design, here is the set of them.

Slumber. Mobile UI Design for Healthy Sleeping
Letter Bounce. UI Design for Mobile Game
Real Racing. UX and UI Design for Mobile Game
Manuva. UI/UX Design for Gym Fitness App
Cuteen. UI/UX Design for Mobile Photo Editor
Tasty Burger.UI Design for Food Ordering App
Home Budget App. UI for Finance
Upper App. UI Design for To-Do List
Health Care App. UI for Doctors
Toonie Alarm. Mobile App UI Design

Originally written for Tubik Blog

Сообщение Design Case Study: Watering Tracker. Mobile UI for Home появились сначала на Design4Users.

One of the previous articles here has started the series of posts devoted to Gestalt theory and ways to effectively apply it in UX design. For a brief reminder, Gestalt theory is based on the following idea: when people perceive the complex objects consisting of many elements, they apply conscious or subconscious methods of arranging the parts into a whole organized system instead of just the set of simple objects. It works on different levels of perception, but the visual part seems to be the most interesting for designers creating interfaces. We have already presented the definition of Gestalt theory, the principles of grouping in particular, as well as looked into the principle of similarity for user interfaces. This time let’s discuss the principle of proximity for UX design.

Principle of Proximity

This principle is based on the cognitive tendency to perceive the objects close to each other as related, especially in comparison with those which are placed farther. Having the urge to organize a variety of data and objects around, people often group them this way automatically, much quicker than they start real thinking about it. So for designers, this is another good prompt for how to organize the interface along natural ways the brain absorbs and classifies data. The simple scheme by Andy Rutledge, given below, visualizes the principle of proximity.

Source

The important thing to bear in mind is that via research and experiments proximity proved itself more powerful than other distinctive features such as color or shape, for example. People tend to see elements as related if they are close to each other in comparison to other objects even if other features differ, like another simple scheme below shows.

In user interfaces, which are full of different content, the principle of proximity helps a designer to organize the layout to make it scannable and easily-perceived for users. It’s not a secret that users aren’t ready to spend much time learning how the complex interface works so intuitive screen which can be quickly scanned has much more chances to retain the users and give them the best features of the website or app.

In general, we could define two directions of applying proximity principle in user interfaces: for typography elements and copy content and for blocks of different content and controls. As well as in the previous article devoted to grouping principles, we will support them with examples by Tubik designers.

Typography and Copy

One of the domains in which proximity plays a crucial role is the organization of copy content in user interfaces. Scannability of the copy blocks in the layout is vital because readers don’t usually stay on the pages which look like a long homogenous thread of text. First, most users scan the page and check the hooks like headings, subheadings, highlights, and keywords, and only then read more if they got interested. That is the reason why the copy should be arranged according to the laws of both quick perception and aesthetic looks.

White space, also known as negative space, plays a great role in this process. It allows a designer to activate the power of nothing:  the space without any content not only adds the air to the general layout but can be also used to organize its elements as groups and unities where it’s needed.

For copy content, it can be used in different ways. For example, with white space, a designer can harmonically separate the paragraphs in a big bulk of text to make it more digestible and visually pleasant for readers: this approach is often applied in blog articles and big copy blocks on websites. In this case, the principle of proximity signals that the copy lines which are closer to each other present the unified idea or piece of information and in this way makes all the text structured.

Here’s the interface concept of architecture blog. The principle of proximity works in this UI on several levels. First, it unites the lines of one copy block to be decoded as one piece of information. Secondly, every copy block is placed close to the image it describes so even quick scanning lets the viewer understand that they belong to each other and present the single piece of content in general layout. The call-to-action element – link “See more” – also works according to the principle of proximity being placed a bit farther than the body copy content but close enough to show that it is included in this particular content block. So, we can see that in this case, the designer activated proximity both inside and outside every particular block of content making them harmonically arranged while the general layout structured. Pieces of copy are beautifully composed around the theme illustration and are scannable in split seconds.

This approach also works well for extended lists like menus and catalogs. Proximity applied thoughtfully becomes an effective tool to organize all the positions and group them effectively.

For example, let’s look at Slopes website. The links to the core interaction zones of the websites in the header are quickly perceived as one unified group as they are placed close enough to each other and far from other content. The same works for the extended menu hidden behind the hamburger button: the links are organized in groups that are visually defined due to their close placement. Negative space used according to the principle of proximity strengthens the general visual hierarchy of the page.

Blocks of Content and Controls

One more domain where proximity can have a positive impact on user experience is an organization of diverse content blocks in the layout: except copy, these can be images, links, icons, controls, CTA elements, products cards and loads of other stuff. The principle of proximity allows designers to arrange these blocks in a way which most naturally corresponds to natural human abilities of visual perception.

For example, here’s the e-commerce app for a jewelry store. The right screen shows the product card: we can see that the general data about the item – color, width, weight, and material –  is given in several lines which are close to each other and therefore are naturally perceived as a unified piece of content. At the same time, the detailed description of the item presenting quite a considerable piece of writing is placed further and in that way separated a bit from the data file. So, these content blocks don’t merge and users can easily differ key data from the detailed description.

Here’s another example, grounded heavily on the principle of proximity – a layout of an online magazine. All the content and control blocks are arranged on the basis of the broken grid and without any frames separating them from each other. The proximity of the elements allows users to quickly define core content zones: the set of links in the header, the list of the latest publications on the left, the field of the preview for the fresh article, and the block of social network links in the footer. Moreover, inside this global block, the principle of proximity continues to separate or unify the elements: according to it, the designer arranges the positions in the list of latest publications around different topics as well as separates the links to the web pages in the header from the controls of instant action such as search or subscription. This approach not only makes the layout elegant and scannable but also strengthens intuitive navigation for better usability.

Although we have just started revising Gestalt theory usage in design, it’s already obvious that knowing these simple yet effective principles can save much effort for users and support user-friendly interfaces with mechanisms that work according to human cognitive abilities and psychological patterns. Follow the updates to check the explanations and examples for other grouping principles: symmetry, continuation, closure, and others.

Recommended Reading

Gestalt Theory for Efficient UX: Principle of Similarity
Cognitive psychology for UX: 7 Gestalt principles of visual perception
Design Principles: Visual Perception And The Principles Of Gestalt
Improve Your Designs With The Principles Of Similarity And Proximity
Gestalt Theory of Visual Perception
Gestalt Principles: How Are Your Designs Perceived?

Originally written for Tubik Blog

Сообщение Gestalt Theory for UX Design: Principle of Proximity in Interfaces появились сначала на Design4Users.

No matter how challenging it sounds, designers strive to build effective mobile design because smartphones are a huge part of our life. The article describes essential principles for compelling mobile typography.

High level of legibility

Legibility is called a level of how distinguishable and recognizable the words and characters are in a text. The major objective of powerful typography is clear text which users perceive without efforts. Small screens and ambient light of mobile devices may become a problem on the way to creating legible typography. To avoid problems with legibility, designers need to consider all the factors influencing clarity of text.

Font size

In terms of mobile typography, the size does really matter. Some may think that on small screens tiny fonts will work best. It’s a misbelief. Small fonts on a bright mobile screen can make user’s eyes hurt from tension and bring a headache. Of course, modern devices allow screen zooming still it’s not always convenient for users to spare an unnecessary effort. Fonts in mobile UI should be big enough for users to read easily but not too big to save typographic hierarchy. The appropriate font size is a key to pleasing UX.

Leading

As we’ve mentioned in our previous article, leading is the spacing between the baselines of copy. In a mobile interface, leading is usually smaller compared to a desktop version. Wide leading may ruin the visual unity of text while too short space makes it badly legible. If a leading is done right, readers go fast from one text line to another and big pieces of copy become legible.

To-Do List App

Line length

To make body copy comfortable for reading in mobile interface, designers consider all the parameters including length of text lines. Optimal line length for a desktop screen won’t work same for mobile. Too long lines would go beyond screen borders, that is why designers are recommended to keep the number of character per line within 30-40.

White space

When design elements are tightly gathered in a bunch, the user interface looks messy and navigation is rather difficult. Designers need to give elements space to breathe bringing a relief to users’ eyes and mind. The size of mobile screens doesn’t allow using much of white space that’s why a balance between the elements has to be found.

Wine Year App

Fewer levels of hierarchy

Visual hierarchy is applied to organize content in interfaces clearly so that users could distinguish layout objects on the basis of their physical differences, such as size, color, contrast, alignment etc. Hierarchy divides content into levels assisting users to learn copy content gradually step by step without effort and get oriented in the digital product.

Web design usually contains three levels of copy content which include such elements as headings, subheaders, body copy, CTA buttons, and captions. However, small mobile screens don’t provide enough space for three levels, so designers apply only two. Elements of a secondary level such as subheaders step aside to make UI look clean.

Moneywise App

Simplicity of fonts

A key feature of effective mobile UI is simplicity. Design should be clear and the navigation easy to use, so font choices have to be based on the requirements. First of all, it is recommended to keep a number of fonts within two or three to make text look solid. Designers often stop their choice on two types of fonts for mobile interfaces because it requires fewer levels of hierarchy than web design.

Moreover, kinds of fonts should also fit a simple and clean style. Novelty and decorative fonts may look illegible on small screens. Designers regularly combine a serif and sans-serif fonts to create enough contrast of copy elements in the layout. In addition, it’s good to reduce effects like a shadow for mobile fonts. On desktop screens, they may work nice but will make small mobile screens look overloaded.

Book Swap Interactions

Delicate contrast

Contrast is an efficient tool for designers. It helps highlight vital UI elements as well as contribute a desirable level of text legibility. However, speaking of mobile interfaces, contrast may play a bad joke. Small screens, ambient light, and short fonts make a contrast image look unpleasant for users’ eyes. Reducing contrast between the background and copy elements, designers help users feel comfortable while reading text on a mobile screen.

Contrast can be created not only via colors but with sizes of fonts to set visual hierarchy. Nevertheless, mobile interfaces are short of space for giant headings, that’s why size contrast should be also reduced.

Jewellery E-Commerce App

Responsive typography

People surf the Internet via all devices available today. That’s why responsive design is a key condition for a successful digital product. Typography is a vital part of design responsiveness. Wrong size, width, and placement of fonts have a big impact on a whole composition. Even the most insignificant changes may break the balance between all design elements.

Creating typography for a digital product, designers need to consider how it will look on different devices. Planning such things forehead helps to avoid unnecessary problems in the future.

Cinema App

Prioritized content

To make mobile interfaces simple and useful, designers need to take care of the wise content organization. Users want to have a fast access to information they are looking for and mobile screens can make the process complicated.

Mobile UI has no room for unnecessary copy elements. There should be only essential content thoughtfully prioritized. Based on users’ needs and preferences, designers set a structure assisting people to navigate within the product and find what they are searching for. Text elements are prioritized by size changes as well as different width or kind of font.

Book App

Clear text rags

Depending on the type of a product, designers apply appropriate alignment for text blocks. It can be placed on the left, on the right, centrally or it can be justified. However, speaking of mobile design many experts often stop their choice on left side alignment. This kind forms text where the beginning of each line is placed equally and the rags look similar to stairways. Such a structure helps users easily go from one text line to another and scan text fast and easily. If body copy alignment is justified (text lines placed equally), it has no rags either side. The text with such structure is difficult to scan on a mobile screen.

Healthy Food App

Functional typography

While computer users do the clicks and scrolling to interact with products, mobile screens should provide much more functionality. There are many text elements in mobile interfaces that allow users to accomplish certain actions like buying a product, making a call, going to a website and others.

Designers need to make sure users understand how the text elements work and enable them to complete the actions. Functional typography should be highlighted among the other and clickable elements should be big enough to tap on them.

Menu Interactions

Things to jot down

• Minimalism. Mobile screens are short of space, so try not to overload it. Simple fonts, clean style, and a minimum of elements will do their job.
• Test the smallest first. Mobile devices have various sizes but the biggest problem is the smallest. Create your design based on how it will look on the tiny screens first. When it’s ready, you can easily adapt it to the bigger sizes.
• Avoid decorative and cursive fonts. They don’t render properly on the small screens. Moreover, decorative fonts overload interface with unnecessary details.
• Legibility first. Of course, it’s good to make beautiful catchy UI but sometimes all the colors, contrast, original fonts may hurt the legibility of copy content. A good-looking text is not enough. Make sure it is legible otherwise users won’t be able to read information and use your product properly.

Jewellery App

Every mobile UI design project is an interesting challenge. Meet it with the knowledge and the results will please you.

Recommended reading

Meaningful Mobile Typography by UXPin group

Mobile UI Design: 15 Basic Types of Screens.

7 Simple Rules for Mobile Typography

Typography in UI: Guide for Beginners

Originally written for Tubik Blog

Сообщение Mobile Typography: 8 Practices for Powerful UI появились сначала на Design4Users.

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 the design.

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 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 structural 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.

Wireframing

Information architecture is something like a blueprint of the layout that 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.

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 a 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 “Basics of Information Architecture 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 the 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

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 retail websites or apps where people have to go from one task to another to make the purchase.

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.

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 the 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 that 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 news websites, event apps, and blogs.

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

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

Flat model

This model works best for 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.

CalloSum Landing Page

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, the index model may contain more content and remain usable and simple for users since they can skip useless pages.

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 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 a 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.

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 to 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 users to the main screen when they point the task as complete.

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 Basics

Basics of Information Architecture for Designers

Originally written for Tubik Blog

Сообщение Information Architecture: Techniques for Designers появились сначала на Design4Users.