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

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

Healthy Food App

Basic points about memory

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

Basically, psychologists mention three types of memory:
– sensory memory holds the data for a short moment when we perceive it with our physical senses like hearing, vision or touch;
– short-term memory (working memory) allows a person to keep some data remembered for a short period of time without repetitions;
– long-term memory presents the storage for big quantities of diverse data which could be saved for long periods of time, potentially up to the whole lifetime.

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

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

Basic laws of memory

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

1. Concentration. To remember a thing or chunk of data, a person needs to concentrate on it. Otherwise, the chances are high that the data will be discarded on the level of short-term memory.
2. Association. The memory presents a huge network of links connecting different data. If a person builds the association which links the new data or object with something well-known or kept in long-term memory, the chances of memorizing get higher.
3. Repetition. It is one of the effective ways to activate the data in working memory several times until it moves to long-term memory storage.

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

Cinema App

Expert explorations of memory

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

Miller’s Law

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

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

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

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

Magic.co landing page

Hick’s Law

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

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

Cafe Coupon App

Tips for memory-friendly UX

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

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

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

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

Photography workshops

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

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

Book Swap App

3. Save memory effort with recognizable patterns and symbols

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

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

Weather App

4. Apply consistent markers in navigation

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

Homey App

5. Don’t hide the core elements of navigation

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

Bookshop Website

6. Stimulate different types of memory

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

Recipe App

7. Remember about emotions

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

Night in Berlin App

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

Recommended reading

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

Short-Term Memory and Web Usability

UX and Memory: Present Information at Relevant Points

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

User Memory Design: How To Design For Experiences That Last

Visual Perception. Icons vs Copy in UI

Total (Memory) Recall

The Properties of Human Memory and Their Importance for Information Visualization

Originally written for Tubik Blog

Сообщение How Human Memory Works: Insights for UX Designers появились сначала на Design4Users.

Our today’s case study is devoted to this vitally actual theme and presents the design concept of the web application for doctors called HealthCare App. Having explored the specific nature of this type of digital product, Tubik designer Eugene Cameel thought over the solutions concentrated on fast and intuitive interaction for making communication between a doctor and a patient easy and fast while saving and looking for the data optimized and organized. Let’s look at the details of the concept closer.

Task

UI/UX design of a web application for doctors

Process

UX Wireframing

As we mentioned in our recent article about UX wireframing, this initial part of the creative process lays the foundation of future functionality before the aspects of visual performance and style are approached. Work over wireframes is based on the definition and analysis of the target audience and its potential pains which the future product is going to solve. The target audience of the HealthCare App was primarily doctors and the key objective of the product was set as optimization of the huge amount of data that doctors deal with on a regular basis. Every single piece of information about every patient is vital for making the right decision, so creating the interface, the designer was focused on making it organized, clear, and easy-to-use. Intuitive navigation was set as the biggest priority to make the app applicable even for people with a low or medium level of tech literacy.

Basically,  the app provides doctors with the functionality of saving and organizing data about patients with the ability to find it quickly in the database when it’s needed. Also, doctors can plan and save appointments in the calendar as well as the history of medical examinations for patients under supervision. The application also saves the history of diagnoses, prescribed medicines, personal data and complex medication plans with marking the stages. Another useful feature is that the users of the app get access to the stats and explorations on different issues at a different level of coverage, from local to general statistics and recommendations by WHO.

Let’s check UX solutions for three basic screens presenting appointments, calendars, and statistics.

The app features the sidebar with five tabs located on the left side of the screen and the header featuring the title of the information field (calendar, appointments, etc.), the current date and a search field, well-seen and easily accessible in case any data should be found quickly. The main field of the Calendar screen presented below organizes data about all the appointments in three modes along the period of time reviewed – month, week, and day switched via the top menu. This part also gives particular dates shown on the screen. All the data is organized in special cards while the timeline located on the left lets to catch the timing. The user can review all the planned appointments or things to do, getting more extensive data after tapping the necessary tab or add new appointments to the free spaces in the schedule. In the preview, notes show the full name of the patient, time of the planned appointment and mark of the visit nature (urgent, follow-up therapy, etc.)

The screen of a particular appointment shows the dynamic head menu which can be scrolled horizontally and presents the list of patients. Lower, we can see the tab presenting detailed information about the current patient, who is being examined, including name, gender, doctor’s name, ID number, address, and contacts. The biggest interactive field on the page shows three basic categories to organize data: medical background, lab results, insurance, and charges.

The third screen shows various stats that can be useful for the doctor in the exploration of a particular case or diagnosis. The tab below the header allows a user to switch between the categories of stats coverage and set a particular month or year for the required data.

UI design

The essential issues to consider about UI design, going deeper into a convenient and functional visual presentation of the data in the app, were color palette and typography. As you can see, the designer made his choice in contrast color palette with a deep blue general background including the sidebar and header part, that worked well for creating deep contrast with bright orange active icons and basic data in header written in white. Contrarily, the main operative field of the app uses a white background which looks natural for the app in the health care sphere and serves several important goals:

– it supports the high level of readability and quick perception of text-based content, which is crucial for healthcare operation with patient’s data, especially in cases of emergency;

– it provides the great field of creating prominent contrast for key interaction elements, such as buttons or icons;

– it creates the strong association with paper on which the data is fixed and in this way sets the pleasant feel of interaction close to typical operations with physical paper documentation, which can be beneficial for people of the older generation, who usually tend to feel better in the well-known environment;

– it adds the space and air to the screen which is helpful to avoid the feeling of the screen overloaded with information and can hinder a quick perception of core data fields.

The screen of the current appointment shows for main areas of data: diagnoses, problems, medications, and complex medication plans.

The calendar screen uses light pastel colors for cards which again set the association to the traditional interaction with physical objects when doctors and receptionists use colorful notes to mark the data and organize it on the notice-board.

Statistics screen shows graphs and charts in a minimalistic manner with the appliance of contrast colors easily distinguished by the human eye. For all the screens, the designer uses a simple san serif font, highly legible and readable. Concentration on functionality doesn’t prevent the designer from giving the app a simple and elegant appearance with the touch of style and creativity.

Animated transitions were also added to present some basic interactions with the app: inputting data, operating with pricing, and completing the reception.

This case has actively opened the direction of design for the medical industry and healthcare here in Tubik and proved how many special features and aspects of the job should be taken into account by the designer. The tasks of this kind are definitely challenging, but highly rewarding in both creative and human values. Stay tuned and healthy!

Design Case Studies

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

Nature Encyclopedia App. UI Design for Education

Florence App. Illustrations for Healthcare Service

Inspora. Brand and UI Design for Virtual Stylist

Bitex. UX Design for Stock Analysis App

Slumber. Mobile UI Design for Healthy Sleeping

Real Racing. UX and UI Design for Mobile Game

Tasty Burger. UI Design for Food Ordering App

Watering Tracker. UI Design for Home Needs

Originally written for Tubik Blog

Сообщение Design Case Study: HealthCare App. UI for Doctors появились сначала на Design4Users.

What is color psychology?

It’s a branch of psychology studying the influence of colors on human mood and behavior. The thing is that our mind reacts to colors while we usually do not notice it. The moment our eyes perceive a color, they connect with the brain which gives signals to the endocrine system releasing hormones responsible for the shifts in mood and emotions. These days a lot of research is conducted in order to study the peculiarities of these reactions and there are already many theories useful to learn. Color psychology is helpful in many industries including business, marketing, and design.

The success of the product depends largely upon the colors chosen for the design. The properly selected colors help put users in the frame of mind that compels them to take action. The research provided by Colorcom showed that it takes only 90 seconds for people to make a subconscious judgment about a product and between 62% and 90% of that assessment is based on color alone. So, the basic knowledge of color psychology can be useful on the way of improved conversion for your product. Moreover, accurately chosen colors can advance the usability of the product.

Meaning of colors

To convey the right tone, message and call users to make the expected action, designers need to understand what colors mean and what reaction they evoke. In one of our previous articles, we’ve demonstrated you the list of colors with brief descriptions of their meanings. Today we have prepared a bit more expanded list of color meanings in common use and in design.

Red

The color usually associates with passionate, strong, or aggressive feelings. It symbolizes both good and bad states of mind and soul including love, confidence, passion, and anger. In design, the use of red color is an effective way to draw users’ attention. Also, it’s recommended to use red sparingly to avoid negative reactions.

Toonie Alarm app tutorial

Orange

It is an energetic and warm color bringing the feelings of excitement. Orange combines red’s power and yellow’s friendliness, so it may bring feelings of motivation, enthusiasm, and love to life. Designers use the color if they need to give the spirit of creativity and adventure.

fOxygenic Logo

Yellow

This is the color of happiness which symbolizes the sunlight, joy, and warmth. Yellow is thought to be the easiest color to visibly see. What’s more, it has one of the most powerful psychological meanings. Users seeing yellow colors in the design can feel inspiration and confidence. Although, you need to remember that too much yellow may bring negative reactions such as the feeling of anxiety or fear.

StarDust website

Green

It’s often called the color of nature, balance, and harmony. Green brings calming and renewing feelings. Also, it is a sign of growth and inexperience. It has more positive energy than most other colors but sometimes it associates with materialism. Design in green colors perfectly suits the products connected with nature.

Big City Guide: Stockholm

Blue

It often represents some corporate images since blue is the color of trust. It usually shows reliability, may give users calming feelings. However, as a cool color, it also associates with distance and sadness, so designers need to keep it in balance.

Design for Business E-book

Purple

Long associated with royalty and wealth since many kings wore purple clothes, it’s useful for presenting some luxurious products. It’s also a color of mystery and magic. It mixes the energy of red and blue, so it has a balance of power and stability. A big concentration of the color may distract users’ mind.

Night in Berlin App

Pink

It is the color of hope, sensitivity, and romance. Pink is much softer than red, so it creates a sense of unconditional love. Pink is associated very strongly with youthful femininity, so it may be an effective color if the target audience is mostly girls and young women.

Dating App

Brown

The color of security and protection like the mother Earth. Designers commonly use brown as a background color in a variety of shades, from very light to deep. It brings the feeling of warmth and comfort to the designs. Also, it may be used to show experience and reassurance.

Jewelry E-Commerce App

Black

The color has a great number of meanings. It associates with tragic situations and death. It signifies a mystery. It can be traditional, modern, serious. Everything depends on how you employ it and which colors go with it. Black matches well with any other color, so it’s ideal for the background. Designers often use it to set contrasts.

Vinny’s Bakery

White

The color means purity and innocence, as well as wholeness and clarity. White often associates with a blank sheet of paper motivating people to generate new ideas. However, too much white can cause feelings of isolation and emptiness. In design, white is commonly used as the background color especially for the resources for which readability is a vital part.

Bjorn website

Color meanings in branding

Colors are a vital factor for not only the visual appearance of products but also brand recognition. Nevertheless, in branding, colors tend to have more direct meanings than in common understanding. They can be briefly described within a few words, so here is the list for you:

• Red. Confidence, youth, and power.
• Orange. Friendly, warm, and energetic.
• Yellow. Happiness, optimism, and warmth.
• Green. Peace, growth, and health.
• Blue. Trust, security, and stability.
• Purple. Luxurious, creative, and wise.
• Black. Reliable, sophisticated, and experienced.
• White. Simple, calm, and clean.

Realli logo animation

Color Preferences

Visual perception is quite individual for everyone. Designers need to remember that the color effects may be different because of the factors such as age, culture, and gender. First of all, people’s preferences can shift during life whatever the object is, let’s say, food, clothes, music, colors, and plenty of other aspects. It is caused by both mental and physical changes that happen to us across a lifetime. For example, children like yellow color pretty much, but as we become adults it usually seems less attractive. Faber Birren explains it in his work Color Psychology and Color Therapy: “With maturity comes a greater liking for hues of shorter wavelength (blue, green, purple) than for hues of longer wavelength (red, orange, and yellow)”. One more difference between children’s perception and adult is that kids can change their favorite colors fast, while adult color preference is usually non-malleable.

Also, designers need to consider that there are many cultural differences, and color perception is not an exception. Sometimes cultures define colors diversely, for example, in Western countries, white color means happiness and purity, while in some Asian countries it symbolizes death. You can find many examples of how different may the meanings be in countries but it would take a whole article to tell about it, so if you’re interested in the topic, follow our updates on the blog since the post on this issue is coming soon.

Another point on the color preferences is gender. Many color studies have been done over the years and a lot of them say that the color preferences of women and men significantly differ. The Color Assignment group has conducted deep research on this topic and many designers already use the results in the creative process. We’ve defined the most notable things from the research to share with you.

Blue is the top color. Both men and women of all ages think of blue as the favored color. The shades of blue such as cerulean, azure, beryl, cornflower blue, and sapphire are popular among women.

Brown and orange are in dislike. The first one considered less favorable among men, the second – among women.

Cool colors are preferred. Men and women favor blue, green, and their tints in general.

Women like tints. When men prefer pure or shaded colors, ladies are good with tints.

Men prefer achromatic colors. White, black and gray are neutral colors, and men are keen to choose them.

Favorite colors

Least favorite colors

Source of charts

It’s vital to consider the color preferences of the target audience while creating UI and UX design since it helps to avoid negative reactions and associations.

Points to consider

Color psychology is rather complex to understand and learn. However, it may become an efficient tool in designers’ hands helping to understand users and their demands. Summarizing the article, here is the list of useful things to consider:

• Choose colors wisely. They have a deep influence on users.
• Make sure your design and its colors convey the right message and tune.
• Learn your target audience. The color preferences and meanings depend on many factors including age, gender, and culture.
• Some colors may look different on the screens of different devices. Additional testing never hurts.
• It may be a good idea to test the UI colors with representatives of the target audience.
• Try to make the color combinations wisely, in the best way for the users’ perception.

Useful Articles

Color Theory: Brief Guide For Designers
Design for Diversity of Cultures: Color Perception
Color in Design: Influence on User Behavior
Design Tips: How to Choose Colors for Interface
3C of UI Design: Color, Contrast, Content
How Shape and Color Work in Logo Design

Originally written for Tubik Blog

Сообщение Color in Design: Influence on User Behavior появились сначала на Design4Users.

Social Network Tutorial

What is onboarding?

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

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

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

What is the onboarding tutorial?

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

Shauts App Tutorial

Why do you need the tutorial for your app?

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

Greeting

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

Information

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

Engagement

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

Toonie Alarm tutorial

What are the points to consider for tutorial design?

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

Custom images or illustrations

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

Travel App Tutorial

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

Saily App Tutorial

Copywriting and typography

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

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

Singify App Tutorial

Animation

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

WaykeApp Tutorial

Clear page/screen indicator

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

Ability to skip

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

Underwater World Encyclopedia – section tutorial

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

Useful Reading

How To Design User Onboarding: Tips and Practices

3C of Interface Design: Color, Contrast, Content

Basic Types of Buttons in User Interfaces

7 Tips to Improve Mobile Interactions

Tips for Effort-Saving User Interfaces

Visual Hierarchy: Effective UI Content Organization

Originally written for Tubik Blog

Сообщение Design for Onboarding: Mobile App Tutorials появились сначала на Design4Users.

Learning and innovation go hand in hand. The arrogance of success is to think that what you did yesterday will be sufficient for tomorrow. (William Pollard)

Our previous collection of video speeches from top experts in product design and user experience, which we published a couple of months ago, got shared and actively viewed. There is no reason why we wouldn’t continue this sort of sharing, collecting great speeches from designers and product creators recognized internationally. That’s the precious part of being a professional in the era of the internet: you are able to get tips, recommendations, experience and knowledge from the best masters. So, catch the new set of expert talks we have collected for you and get inspired!

Julie Zhuo: How a Facebook Designer Thinks

Katie Dill: Balancing Order And Chaos In UX

David Vogel: Zen and the Art of UX Design

Cindy Chastain: Building the bridge from UX to CX

Joe Natoli: 5 Rules for Successful UX Disruption

Michael Bierut: How to use graphic design

Stephen P. Anderson: Hooked on a Feeling

Jakob Nielsen: Web UX 2016 vs 2004

Robert Brunner: What All Great Design Companies Know

Design+ Social Panel – Designers from the top social networks

Welcome to check 20 TED-talks for designers

Сообщение Must-See Speeches on UX and Product Design by Top Experts. Set 2 появились сначала на Design4Users.

What Is 404 Page?

Technically, 404 or Page Not Found is the error message in HTTP (Hypertext Transfer Protocol) response code which is sent in case a user got successfully connected with the server, still for some reason couldn’t get the content that was requested. When it happens, for example, in situations if users try to follow the link which has been deleted, dead, or broken, the website server forms and sends a 404 web page informing the user that the content cannot be found.

Certainly, the page can have a very simple and basic appearance with just a line of copy saying that “nothing can be found here.” However, the vast majority of websites prefer to apply the customized 404 web page. And that really could be described as a user-friendly policy, also successfully supporting website or brand promotion. A correctly designed, stylish, and creative 404 page, which is shown to everyone who makes a mistake in the link, is able to not only inform users but also navigate them, entertain, or just give a moment of aesthetic pleasure.

What Does Page 404 Include?

Among widely used layout elements on page 404, we could mention:

• error message
• brand signs (logo, brand name, brand mascot, etc.)
• navigation elements (links, buttons, menus, search fields)
• decorative elements (illustrations, photos, animation)

In many cases, the design concept chosen for this sort of web page corresponds to the general stylistic performance of the website to keep the feeling of integrity and consistency. It means that designers apply the same or very close color palette, style of layout elements and graphic design, typography, and grid. Still, some designers choose the opposite way of presentation and make page 404 look totally different from all the rest of the website, in this way, perhaps, supporting the idea that this sort of error is an accident and shouldn’t be associated with the rest of the website content.

404 page at Dribbble applying the error message, two options of key links (home page or contact form), branding sign (brand name lettering), and theme image as a background

404 page for UXBooth applying the error message, the ability to contact directly to support, and the menu of content categories.

Two different approaches to showing the number 404 could also be mentioned here. Some pages apply it as the central element of the composition, based on the fact that all active internet users know what this number means on the Web: quickly scanning prominent and legible numbers, the user will be informed of the issue in split seconds. However, there are also designers who do not make the number 404 quickly noticeable in the general visual hierarchy of the page: it often happens when this page is used as the field for additional navigation and content presentation.

As for the navigation elements, the examples shown below will let you see that most of them apply the error message to the user and the link or button to the home page. Nevertheless, this basic set can be effectively extended with the following:

• a set of links or a menu providing the user with a variety of routes instead of only the home page, right from this point
• fixed header enabling a user to get to the key areas of the website instantly
• a search field, via which the user can request the needed content without getting back to the home page
• a collection of recommended posts, which could possibly draw the user’s interest
• the advertising element or link.

Creative 404 page design for the ShipDaddy website, featuring mascot animation and allowing visitors to quickly get back to the home page.

Definitely, it doesn’t mention that all of these elements should be included on one page altogether: the choice and composition should be based on thorough user research. Setting the priorities, the designer can make a decision on what should be included in the layout: if users should be navigated only to the home page, then all the other options will work as a distraction. Vice versa, if users, let’s say, look for a particular product or item,  they probably wouldn’t be happy to get back to the home page, and only there get access to the search. The solution should depend on the target audience, its needs, and wishes, and the problems, solved via the platform they are at.

The error message is usually another object for consideration: the text should be too long, the style and manner of communication (formal or informal) should correspond to the general tone and voice of the website, and the fonts should look harmonic in the layout and legible. The error message needs to let the users feel that they are respected and get them informed clearly on what happened.

One more highly debatable element of page 404 design is custom graphics. In reviews of design trends, we mentioned the growing trend of applying custom illustrations in mobile and web interfaces. Page Not Found design is one of the most convenient places to respond to this creative trend: original illustrations or unique graphics can both support stylistic performance and communication with users. No secret, people are visual creatures, and a picture is worth a thousand words: it can not only inform but also add vibes of fun, entertainment, formality, etc. This approach can transform the simple web page into a source of aesthetic satisfaction, which is, by the way, an important foundation of positive user experience.

Collection of creative pages 404

Now let’s go from theory to practice: here, we have selected a diverse set of creative 404 pages, differently applying the UX design practices and custom graphics mentioned above.

By TUBIK

By Andrew Colin Beck

By Timothy J. Reynolds

By UENO

By Congruity Hub

By Olga Baydalinova

By Anthony Lagoon

By TUBIK

By Kejia Shao

By Aleksandar Savic

by Anastasiia Andriichuk

by Lucija Frljak

So, we could definitely say that in the design of a 404 page, diversity is key: following the simple basic understanding of what information the user needs to get from this point of the surfing, designers can find hundreds of creative ways to deliver it elegantly and helpfully.

New design inspiration articles and collections are coming soon, stay tuned!

Useful Articles

Copy Content in User Interfaces: Tips and Practices

How to Improve Web Scannability

3C of UI Design: Color, Contrast, Content

How to Choose Between Light or Dark UI

How Human Memory Works: Insights for UX Designers

9 Effective Tips on Visual Hierarchy

Сообщение Meaningful Error: 404 Page Design. Inspiration for Page Not Found появились сначала на Design4Users.

In our earlier article we have already analyzed the factors that can influence the choice of general color scheme and basic background color as well as mentioned some important points to consider in the process. This time we will concentrate on more detail on the strong and weak sides of the dark-colored design for websites and mobile applications. Experience of practical work on creating and testing diverse user interfaces in Tubik Studio has proved that dark background can be powerful and appealing solution providing positive user experience. Let’s just take it for granted and discuss when and where we can make it work at maximum.

Visual perception of dark

One of the polls whose results were published rather long time time ago, in 2009, in ProBlogger already features some interesting points. The readers were asked what sort of background they prefer on blogs. Almost half of the readers answered that light background is preferable – and that is reasonable as blogs are traditionally text-driven, so the aspect of readability outweighs the others. However, 10% of respondents answered that they prefer dark backgrounds, and more than one-third mentioned that the choice should depend on the blog nature and content. Such a big proportion of users should not be neglected by designers in the process of looking for design solutions. Moreover, in the case of less text-driven content concentration in a digital product such as a website or application the proportion can become even bigger. This is a good example showing that user research and surveys should be an important part of the design process. Knowing what users want or at least what they are ready for can push the limits of traditional vision.

The scientific research provided around the issue by Richard H. Hall and Patrick Hanna highlights the important point about visual perception of the background color and its performance. Having analyzed practical experiments by different scientists done earlier in the sphere of web pages performance and readability, the authors sum up: “They found that combinations with positive polarity resulted in better performance (that is dark text on light background), and, as with studies mentioned previously, the greater the contrast between color combinations the better the performance.” Therefore, the dark-colored background can be as efficient as light-colored in the case when other aspects, in particular contrast and legibility of the layout elements, are designed and tested appropriately. The research contains a lot of interesting and useful information based on user testing in the perspective of different color combinations and their effectiveness, so it is highly recommended to designers.

Website on cooking seafood

The aspect of readability

One of the famous gurus of user experience design Jacob Nielsen mentioned: “Use colors with high contrast between the text and the background. Optimal legibility requires black text on white background (so-called positive text). White text on a black background (negative text) is almost as good. Although the contrast ratio is the same as for positive text, the inverted color scheme throws people off a little and slows their reading slightly. Legibility suffers much more for color schemes that make the text any lighter than pure black, especially if the background is made any darker than pure white.”

Indeed, readability is the vital aspect influencing the performance of the product and it deals not only with text. It goes beyond the limits of copy and means that all the meaningful symbols including letters, numbers, pictograms, and icons should be noticed and recognized easily in the interface. Thus, the designer choosing in favor of dark background should be prepared to especially thorough selection and testing fonts, icons, and images on different devices.

Website for a bakery

Best web and app design practices, for example, the collection of Best black websites on Awwwards feature loads of successful design solutions which, using the dark background as a basis of color scheme, still don’t suffer from low readability. To avoid this problem, during the design process it is important to remember:

– dark background absorbs some part of the light from the other elements so there should be enough empty space or “air” between the elements;

– length of the line can make copy bulks more readable and digestible for users;

– the issues of interlinear space design, as well as the length of the text line, can have a great impact on readability, especially on a dark background, so paragraph size, kerning and leading should be thought over carefully;

– dark doesn’t always mean black so in every particular case of design it is reasonable to take some time testing different sorts of dark backgrounds and colors presenting the content, being open to experiments;

– shades, gradients and glows can influence readability;

– sans-serif fonts are usually more legible while serif fonts look more elegant, applying this factor in practice can enhance the readability of the content.

BuonApp UI

The aspect of contrast

One more interesting thing to consider in the aspect of visual perception is the table presented by webdesign.about.com. The table demonstrating levels of contrast and performance of different color combinations features the interesting fact: black part of the table is the only one that provides good contrast with practically all the colors. Tested carefully in every particular case of design interface, this factor can be the reason to try dark background as a variant of design solution.

In the aspect of readability, contrast is also one of the factors able to make the content more recognizable and legible.

One of earlier investigations of the aspects of contrast and readability states such a tip: “With a dark background, ensure you do not have overly-bright lettering: tone down white lettering to a pale gray, or dull the color used to minimize extreme contrast and glare; this principle is used when doing slides, as well: at least 5% gray is used to cut the glare of bright white. Interestingly, this still “reads” as white. Also, make the text bold, so it has enough body not to be “eaten alive” by the darkness.” This test, as well as others, can provide new variants of toning in providing efficient and natural content on a webpage or app screen.

One more thing to mention is that dark background being somehow heavier and deeper usually provides great opportunities for presenting graphic content such as pictures, photos, illustrations, posters, and ads. Good composition and following the principles of the visual hierarchy can significantly enhance visual perception of this sort of layout elements. This factor makes dark background highly efficient and attractive in cases when the interface is based more on graphic material than on copy.

Recipe App

The aspect of emotional perception

Color psychology is another thing to consider choosing a background that will be not only the effective field of presentation but also the carrier of its own message. Dark colors are usually associated with elegance and mystery. Moreover, black is often associated with elegance, formality, prestige, and power. That is, perhaps, one of the reasons why many powerful brands build their visual presentation around the black-and-white scheme with dark dominating and light presenting and informing the recipient. Playing out this aspect in interface design can provide additional support to other design solutions and general presentation of the product.

Museu App

Benefits of dark background

According to all the points mentioned above, we can sum up that dark background applied in user interfaces can provide essential benefits, among which:

• style and elegance
• feel of mystery
• luxury and prestigious look
• broad field of using contrast
• support of visual hierarchy
• depth in reflection of presented content
• visual appeal

Architecture Firm Website

Points to consider

On the other hand, dark background requires thorough attention and analysis of the smallest details which can get lost in the layout if they are not presented properly. Among them we should consider:

• User research. Practical surveys, theoretic investigations and experiments are important sources of data about the target audience, its wishes and expectations that is the basis for choosing effective and attractive design schemes.
• Competition research. Market research of close competitors gives understanding which design solutions have already been applied by other players on the market and this factor influences choosing original design solutions to make product noticeable.
• User testing. Dark background being more vulnerable in the aspects of readability and legibility should be rigorously tested on all the sorts of devices and in diverse resolutions.
• Environment factor. Analysis of typical conditions in which the product will be used by target audience can provide additional reasons for or against the option of dark background.
• Amount of content. The number of elements and blocks which have to be featured on the screen or web page can influence the decision around the background: darker backgrounds leaving too little space between elements are extremely hard for perception.
• Nature of content. Dark background can feature better performance for interfaces based on graphic elements rather than big bulk of copy to read.

Social Network App

Recommended reading

The issues of applying dark background in user interfaces have been an object of professionals’ attention lately. In terms of design issues, we could recommend the following articles for those who would like to know more:

The Impact of Web Page Text-Background Color Combinations on Readability, Retention, Aesthetics, and Behavioral Intention

Visual Perception: An Introduction

Art and Visual Perception: A Psychology of the Creative Eye

Colour Choices on Web Pages: Contrast vs Readability

The Dos and Don’ts of Dark Web Design

Originally written for Tubik Blog

Сообщение Dark Side of UI: When Dark Is Good for Users появились сначала на Design4Users.

Starting with UX research, moving to UX wireframing, prototyping and on to UI design and testing, designers should always remember that along all the way they are not just artists, creators, or conceptualists. They are problem solvers. Every decision they make should be based on one simple but vital reason: it has to make the user’s life easier and/or happier.

In the vast majority of cases, neither designers nor customers are the ones around whom all the fuss is going on and all the hard work is being done. It’s all about users. The better we know them and wish to know them more, the better is the result. Period.

Today we decided to publish a little statement. It is done “on behalf of a user” and based on long-term user research and analysis, practical work on diverse UI/UX projects as well as studying new publications about the theme. Here we have gathered some points which designers hear or could have already heard from users. We are talking about the basics right now, but really vital basics which can become a solid foundation for a popular and efficient product or vice versa, if not considered, make even great design solutions shaky and non-efficient.

I’m a User. I want it simple. But not simpler.

No doubt, Albert Einstein had nothing in common with the sphere of UI/UX design in its modern understanding. However, in this particular field, his words “Everything should be made as simple as possible, but not simpler” are as applicable as they could only be. This is actually the basis of the efficient user interface design providing positive user experience. For user researcher, designer, and tester it is important to remember that simple doesn’t mean primitive – this is a big trap to be careful about. Making a product simple, you find the shortest and the best way to solve users’ problems or satisfy their needs. A simple product means that you make sophisticated solutions that are invisible to a user and felt as natural as breathing. Simple means helping to do something without additional efforts, confusing, and loads of specific operations. Primitive means oversimplified that often annoys users with their conscious or subconscious feeling of being treated like fools. Keeping this balance is vital for creating a positive user experience.

Randomizer concept

I want it easy to start with.

In most cases, for many users, the first experience is the high noon. The first impression on appearance and first actual interactions is able to engage a user in a long-term relationship with your product. That’s why a designer should make the start of interaction with the product as pleasant, encouraging, user-friendly, and smooth as possible. It is vital to make this stage natural and informative, to show the best features attractive for users and at the same time don’t take too much user’s time for this sort of operation. The solid foundation enabling this feature is understanding what is the core target audience and what are the problems that users will be able to solve with the product. Analyzing the abilities and specific features of the target user will help to find an efficient solution for the fast and easy start of interaction and understanding how the product works. Different kinds of tool-tips and tutorials, wizards, mascots, infographics, animated interactions, and the like can become a good way to make the user feel good and comfortable with your product.

I want it clear and understandable.

Here it’s time to remember the words from one of the famous pioneers in information design and data visualization Edward Tufte who told that “Good design is a lot like clear thinking made visual.” Users should feel understanding what’s going on at every stage of the way. It should be a nice and pleasant walk instead of hard and stressful going through the wild. And this particular task is probably the most important aspect of the designer’s job.

It doesn’t mean that every design should be accomplished as plain as a day – without the analysis of the target audience, its needs, wishes, and habits you risk making it boring. Sometimes a bit of challenge, the elements of gamification or problem solving and the like can engage the user; however, all of them should still be doable and acceptable.
Moreover, every microinteraction should provide the user with fast and clear feedback. That is actually the way how the product communicates with the user. Pushing the button or uploading the file, adding a follower, or searching the necessary item users should clearly see how the system has reacted and what is the next step. Other aspects to consider in this perspective are the issues of readability, navigation, conventions, affordances, and signifiers.

Blog App

I want it helpful.

In the vast majority of situations, people see the technologies, in particular applications and websites, as a helping hand in their everyday life and/or professional routine. This help can be totally diverse: from literal assistance in buying things, ordering tickets, connecting with friends or saving important data, to a bit more metaphoric, like helping with good and suitable ways of entertainment, chatting, self-improvement, aesthetic satisfaction. As soon as users see what kind of help your product provides to them, they are ready for the next steps. This is the good ground for enhancing positive user experience.

One more aspect of helping is forestalling and preventing possible user’s problems, mistakes, and points of confusion in the process of interaction with the product. Efficient and intuitive navigation, fast and clear feedback already mentioned above as well as various tips, auto search, prompts and other stuff of this sort could make the experience natural and help the user to avoid negative emotions.

I want it useful.

The first and foremost thing behind any product is providing some useful features. It’s easy to say that there are a lot of applications and websites which have no purely practical use and exist only for entertainment or other “not-serious” aims. It is one more huge trap. Entertainment, rest, aesthetic pleasure, presentation, collecting and loads of other things or activities which seem to be “not-serious”, “not-useful”, “time-wasting” and so on, are also as important for the person’s full life scope and routine as “serious” and “business-like” stuff.

When adults see how the kid is fiddling with the simple set of building blocks, most of them do not realize that this kind of “non-serious stuff” is highly useful for the child’s development and, what is more, the correct design of the blocks can influence and improve this process. The same happens with applications and websites. To create a successful product, it’s needed to find not only well-known unique selling points but also unique useful points. No matter what kind of product is created and designed, they always exist. That is why user research and analysis is an important stage of designing an effective user interface. It helps to find the problems that could be solved and the wishes that could be satisfied with the product, which is the most important feature for retaining the user. Nothing can make the users stay with the product is they do not see the personal interest and benefits.

Library Widget

I want it fast.

Creating designs, it’s important to consider what are going to be technical and physical conditions of the product use. Out of this data, designers and then developers should make important decisions on how to make design working fast. And it’s not only about the fast interactions and navigation enabling a user to find the quick way of transition to anything potentially important in a couple of swipes or clicks. It’s also about the time of loading the pages, screens, animations, complex images, etc. No user is going to keep around your product for long if he or she needs to waste their time waiting for downloading. It is forgiven in exclusive cases but not on a regular basis. Neglecting this aspect can kill even the product of great importance and functionality.

I want it updated.

In the fast-paced world of technology, it is vital to stay tuned and trim the sails to the wind. Certainly, the power of habit is a great thing retaining users, but a regular shade of minor changes aimed at improving usability supports the feeling of refreshment in experience.

There are, nevertheless, two things to keep in mind about this aspect. Firstly, the changes should improve and support positive experience via usability or attractiveness. Secondly, adding something new, in most cases, it’s better not to do it as a bright revolution bringing a totally new life, since for a particular segment of users it can become a shock and will be the reason of rejection. Being careful, user-friendly, and consistent is a great policy of changes.

Cinema App

I want it nice and stylish.

The famous guru of usability Don Norman once mentioned that “It’s not enough that we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and yes, beauty to people’s lives”. This is actually a philosophy we support here in the studio.

There are lots of tips, proverbs, and sayings assuring that wise people do not judge the book by its cover, but in reality, a good dress is still the card of invitation. Certainly, this sort of good dress for the app or web will mean nothing if it is empty in content, useless and not solving any problems. However, if the product is not attractive, the users will not even turn their eyes to your product. They will not identify it among the others in AppStore or PlayMarket. They will not feel that flash of interest and curiosity that is the start of so many great meetings, events, and relationships, including choosing the products for everyday use.

So, appearance really matters as it stands among the most important factors encouraging the user to try your product. Moreover, beautiful, attractive, and appropriate to the target audience, nicely done and consistent visual style of all the design elements satisfies aesthetic needs and beautifies everyday life. Practice shows that this is a great factor in retaining a great deal of users.

Page 404 

I want to have a choice.

The last but not least position here is the choice ability. There are loads of discussions on simplification and unification of UI/UX solutions in the design sphere, in which we often read that designs should be minimalist and limited to activating only basic and necessary operations. Application or website should do only what is really necessary and the additional stuff is always the element of distraction, they say. Users do not need complex animations, users do not want funny illustrations, users do not wish bright and unexpected color combinations, they say. And so on, and so forth, here and there.

There are loads of arguments and proofs, examples and debates, criticizing and preaching. The only thing is missed. There is no user behind all this stuff. A user, who can be totally and absolutely different, who can have millions of different preferences, likes and dislikes, various cultural and educational backgrounds, diverse environments, and abilities to use technology. And all of them, as well as in any sphere of human activity, are keen to have a choice looking for the applications and websites. Users are those who really benefit from the diversity of offers and designs on the market of digital products. They really adore the opportunity to choose. And hope not to see it killed with ubiquitous unification.

Stats Concept 

No doubt, the topic is really deep, so today’s post has been concentrated on the major basics leaving more details for further posts. However, considering those factors provides good support in creating efficient UI/UX design solutions. Designing for users, we should keep a user and only a user as the highest priority. This is the best way to get all the features of efficient and popular products via usability, utility, and desirability.

Useful Articles

How to Make User Interface Readable

Visual Hierarchy: Effective UI Content Organization

3C of UI Design: Color, Contrast, Content

How to Improve Web Scannability

Gestalt Theory for UX Design: Principle of Proximity

Gestalt Theory for Efficient UX: Principle of Similarity

Negative Space in Design: Tips and Best Practices

Originally written for Tubik Blog

Сообщение UI/UX Design. On Behalf of a User появились сначала на Design4Users.

We have already shared our ideas about the role of icons in interfaces in the article describing their most important advantages. Today’s article deals with one of the aspects initiated by Quora question “In UIs, do people recognize icons faster than words?” Having shared our ideas in the answer, we decided to provide its extended version here for our readers.

The aspect of speed

Visual perception is one of the most productive and quick ways through which people are able to obtain information and get it processed by the brain. It influences so many aspects of life that neglecting the issue while creating products for users would be extremely unwise. That is why the aspect of applying visual elements of high functionality in the interfaces, such as icons and their impact on the general efficiency of the product, has been an actual topic in the global design community for a long time.

In the scientific research about visual perception, after theoretic analysis and a set of practical experiments,  A. Santella made a conclusion: “The fact that eye tracking is sufficient for some level of abstraction in our context makes an interesting point. It suggests that the understanding underlying abstraction, and perhaps other artistic judgments, is not some mysterious ability of a visionary few, but a basic visual competence. Though not everyone can draw, everyone it seems can control abstraction in a computer rendering.” People, in general, have incredibly broad abilities to perceive visual marks, recognize and proceed data even transformed in images of a high level of abstraction. That is an important fact designers widely use to improve the usability and navigability of their solutions.

If the only aspect a designer is interested in using icons is speed, then the idea in the original question will work positively. Yes, in the vast majority of cases, people fix and perceive pictorial elements like icons and illustrations faster than words. A great proportion of users are visually-driven creatures by nature, so the following mechanisms of visual perception often work and should be considered in the design process:

• the human eye fixes images much faster than written text
• as psychologists claim, people need about 1/10 of a second to get a general perception of a visual scene or element (that speed is indeed impossible for textual items)
• visuals are transmitted to the brain much faster, and important pieces of information are often fixed by the brain as visual images, even if they were obtained via text perception
• images are less vulnerable in combination with the background and surrounding elements, while text is highly dependent on the aspect of readability
• images have a tendency to stick better in long-term memory, which means that in interactions with the interface, people will not need to process and remember more data than it’s really necessary, so interactions get faster.

Moreover, icons and other sorts of visuals in the interface can make it more universal in cases when an app or a website is used by people from different countries. So, we can claim that using icons improves general comprehension. In addition, pictures push the limits of perception for users who have natural problems with text recognition, such as, for instance, the dyslexic or non-reading preschoolers.

GIF of the Tab Bar Interactions 

One of the popular elements of the layout where icons play highly practical value is a tab bar. Featuring interactive elements, it has limited space capacity; therefore, icons as the visual symbols of available interactions become an efficient design solution. The concept provided above shows that interface animation can liven up the visual elements and enhance microinteractions.

Weather Icons Presentation 

Here’s one more example showing how icons provide a user with the necessary information by visual means. Symbolic images of weather conditions are easy to understand, and at the same time they save a lot of space and give the opportunity to make the layout of the screen informative but not overloaded.

In user interfaces, where in many cases, basic interactions should take seconds, this aspect is highly important, and it is the essential reason to turn hell out of everything into graphic material. All the things mentioned above feature great advantages of visual elements of the layout, for example, icons, as a tool for fast and easy interaction with the product. However, there are some more aspects to analyze before making final design decisions.

The aspect of meaning

On the basis of diverse design projects and concepts designed in Tubik Studio, we deeply believe that speed should not be the only reason to consider and analyze in the process of creating a user interface layout. People can perceive icons super fast, but if the message they transfer is not clear and can have double-reading, this speed will not bring a positive user experience. Fast capturing of the icon bringing wrong understanding cannot be defined as recognition; it’s just fast noticing. Recognition means not only speed but also the right action or information, which this icon should bring to the user.

There are loads of widely-recognized icons, such as a telephone receiver for a phone call, an envelope for mail, a magnifier for search, and so on. Certainly, using these icons, you create a much faster perception of the UI functionality than using copy instead of them. Nevertheless, in cases when the image of an icon is not so obvious, its usage should be thoughtfully contemplated. If the icon doesn’t correspond with the goal and meaning it is assigned, the speed of recognition doesn’t matter. That’s why there are cases when text transfers the idea or data more clearly, and sometimes it is more effective to use a double scheme when the icon is supported by the text.

iPad App Interactions

Here is the concept showing mutual support of copy and icons. This technique activates several elements of perception during one interaction and provides a higher level of recognizability for call-to-action elements. People, who instantly understand the symbol transferred with the icon, won’t pay a big attention to the text. The same will happen to those who have problems with fast copy recognition. However, using the copy together with the icon decreases the risk of misunderstanding or wrong interactions for people who can possibly misinterpret the meaning of the image.

One more case when icons are often used together with copy is diverse side menus. Depending on the general stylistic concept of the interface, icons can imply a different level of complexity, from simple stroke icons to sophisticated and detailed ones.

Blog App

This design concept of the blog app shows how icons can become a multipurpose visual element. In the presented interface, they support the titles of the categories for blog posts. Textual presentation of the category is visually supported with a good-looking and memorable image. At the same time, copy removes the possibility that different users can see different meanings of the images. What is more, in this case, icons support another important function providing color markers for the categories. This technique makes interaction with the app faster and easier for users and at the same time, enhances usability and navigation.

Anyway, the decision on applying icons, text, or both in the layout should be based on thoughtful analysis of the target audience and understanding the goals and conversions which have to be obtained via the interaction.

Reasons for applying icons in the interface

Summing up the points mentioned above, we can define several popular reasons for using icons in the interface:

– speeding up data perception
– enhancing memorability of the element via visual images
– improving navigation with visual markers
– saving up space on the screen or page when the long words or phrases are replaced with icons
– supporting copy material and providing its additional visual explanation
– supporting the general stylistic concept and its harmonic expression in a broad perspective.

User interface design solutions for PassFold project

Points to consider

Obviously, it is impossible to satisfy any user and consider every existing cognitive scheme, but still, there are some general aspects that have to be thought out in the aspect of design with high visual perception:

• target audience (physical abilities, age, cultural background, general development, and education level)
• typical user’s reading skills
• typical environment of product use
• level of global or local product spread
• level of recognition for the chosen graphics
• level of distraction/concentration provided by the graphics

All the mentioned points deal with human cognitive abilities influencing the quality and efficiency of visual data perception. For designers, it’s important to bear in mind: it’s not enough to make users see the elements of the layout; it’s vital to make them recognize their meaning and quickly understand their message. Copy and icons should not fight against each other to see which one is stronger; they should support each other for the sake of a better user experience.

Restaurant Menu

Recommended materials

Diverse issues of visual perception have been an object of scientific and applied research for many decades. In terms of design issues, we could recommend the following articles for those who would like to know more :
What Designers Should Know About Visual Perception and Memory – the article by VanseoDesign analyzing basic aspects of visual perception in design perspective;

Design Principles: Visual Perception And The Principles Of Gestalt – the article by SmashingMagazine considering the principles of Gestalt theory essential for design practice;

Studies Confirm the Power of Visuals in eLearning – the set of ideas in Shift’s eLearning Blog based on the analysis of visual perception in interaction;

37 Visual Content Marketing Statistics You Should Know in 2016 – the article by HubSpot about trends on visual content with some stats;

From Icons Perception to Mobile Interaction – the scientific article about icons perception in mobile interfaces;

Visual Perception – the list of books on general aspects of visual perception which can possibly be helpful for those who are interested in the topic;

The Art of Seeing: Visual Perception in design and evaluation of non-photorealistic rendering – the theses of scientific research by Anthony Santella.

Useful Articles on UX Design

Here’s a set of articles on more aspects and best practices of user experience design.

Error Screens and Messages: UX Design Practices

Visual Dividers in User Interfaces: Types and Design Tips

How to Design Search in User Interfaces

How to Design User Onboarding

Directional Cues in User Interfaces

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

Negative Space in Design: Practices and Tips

How to Make Web Interface Scannable

UI/UX Design Glossary: Navigation Elements

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Icons vs Copy. Visual Perception in UI появились сначала на Design4Users.

Here we are going to consider some points of importance about this significant stage of UI design.

Aspects affecting the choice

Lots of discussions are raised here and there about the color scheme, which is more effective in creating good interfaces. Although lots of participants in this big debate try to find a universal solution, here in Tubik, we suppose the cure-all does not exist. Every project in UI/UX design is highly individual and needs a thoughtful approach weighing all pros and cons.

There are several vital aspects that should be taken into account in the initial stages of choosing the general color scheme for a website or application.

Clarity

This aspect should include the ability of the user to clearly see and distinguish all the necessary details on the screen or page. The color scheme and combinations should support easy and intuitive navigation and make the most functional elements of the layout stand out effectively. Case, when this aspect is not considered or not tested properly, can bring to the products which make a complete mess on the screen in which users do not see what they really should. One of the ways to check it is widely used “blur effect” when you look at the screen or page in the blurred mode and check if everything vital is easily and quickly observed.

Readability

The choice of background for the screen usually influences the level of readability – the ability of users to read text easily. This aspect should be considered among the first, especially if an app or a website is text-driven. Poor readability level is the main reason why users miss important data or feel inexplicable tense using the product as all the way they have to struggle with the text, which takes considerable effort to be read. No need to say that lack of readability can be a serious reason why users are not retained even with attractive products.

Accessibility

In the sphere of UI/UX design, accessibility is mostly defined as the ability of the product to reach as many people as possible. That means that the decision “to use or not to use” should be mostly based on users’ needs and wishes but not on their physical abilities. Color scheme issue is among the main factors affecting this aspect. Taking it into account, designer should think over the users of different age, special needs, and disabilities which can also determine the choice of color for the background and layout elements.

Responsiveness

Designing app screens or webpages, it is also important to remember that users are going to use the product on different devices. That can make crucial effect on usability as often what looks slickly stylish, attractive and clear on the high-resolution professional monitor can transform into a dirty stain on the small low-res screen. In every project, designers should take their time on checking their solutions on different devices and in various resolutions: that simple step enables to reveal the problems and fix them on the early stages of design. Color scheme, certainly, influences this issue among the first.

Environment

One more thing to consider while choosing the appropriate color scheme and the type of background is the potential environments in which users are going to use it regularly and frequently. In terms of constant use under natural light, a dark background can literally create the effect of reflection, especially on glossy screens typical for tablets and smartphones. On the contrary, in terms of regular use in a badly-lit environment, a dark background can take the light away from the screen, which has a bad influence on navigation and readability. So, the issue of color combinations, contrast, and shades draw big attention here.

Therefore, as we can see, choosing the appropriate background color for the layout is a vital step affecting such a key characteristic of any product as usability.

Steps to follow in choosing the color scheme

Here is the short checklist of basic things to follow, making solutions on the general color scheme.

Clearly define the aim of the product

It is very important to define the most important useful points of the product which are going to solve the user’s problems. This data will determine what kind of content drives your product.

If it is text-driven stuff like a blog app or e-reader, for example, perhaps light background will be a better choice. Light will create the feeling of a more airy and spacious screen or page, and it will be easier to concentrate purely on the text.

Online magazine

Blog App

However, if your product is visually driven and moves around images rather than text, a color scheme with dark or bright background for the interface can become an efficient solution as the colors of the images can feel deeper, and the general layout, if accomplished properly, can get stylish and sometimes even luxury look.

Architecture Company Website

Seafood Recipe Website

Analyze your target audience

As we have mentioned plenty of times in our previous articles, defining and analyzing the target audience is the first thing designer should do to work on effective design solutions. Knowing who is your potential user and what they will want to get from your product is the solid basis for a helpful, usable, and attractive interface. Middle-aged and older people tend to like interfaces with light backgrounds as they find them more intuitive and navigable. Younger people can find well-performed interfaces with dark background more original and stylish and it can be the way to involve target users. Teenagers and children can be attracted to thought-out interfaces using bright backgrounds and funny details. Certainly, it deeply depends on the nature of the product functionality and content; however, typical preferences of the target audience can also be a good clue to efficient decisions.

Social Network App

Book swap app

Ecommerce Website

Research the competition

One more thing to remember is that your product is not going to appear one and the only on the market. It is going to participate in great and dynamic competition the prize in which is popularity and users’ attention. The choice of color scheme can be the way to make a product stand out of the crowd that can be crucial to enable the first wish of interaction from user’s side. Time spent on researching the existing products in the sphere can save much more time and effort in redesigning of ineffective solutions.

Music Player App

Karaoke App UI

Test as much as possible

All the aspects mentioned above should really persuade in one key thing to do: as the color is perhaps the most important tool affecting the level of usability and attractiveness of the product, every design solution should be tested properly, in different resolutions, on different screens, and under different conditions. Testing proves the strong and weak sides of your choice before the product goes out on the market, gets discussed, and loses the chance of a stunning first impression in case of inefficient design solutions.

Healthy Food App

Social app: cooking and recipes

In practice, we have published earlier two practical case studies on UI design in which color schemes were redesigned in the process. In the case of Echo App design it was made after the problems revealed via user testing, while in the case of Tracking App it was determined by the issue of consistency for all the versions of the product. Welcome to read the cases in detail.

Useful Articles

Here’s a set of articles on more aspects and best practices of user experience design.

Error Screens and Messages: UX Design Practices

Visual Dividers in User Interfaces: Types and Design Tips

How to Design User Onboarding

Directional Cues in User Interfaces

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

Negative Space in Design: Practices and Tips

How to Make Web Interface Scannable

UI/UX Design Glossary: Navigation Elements

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Color Scheme for Interface. Light or Dark UI? появились сначала на Design4Users.