What Is Affordance?

Affordance is a property or feature of an object which presents a prompt on what can be done with this object. In short, affordances are cues that give a hint of how users may interact with something, no matter physical or digital. For example, when you see a door handle, it is a prompt you can use it to open the door. When you see a receiver icon, it gives you a hint you may click it to make a call. Affordances make our life easier as they support our successful interactions with the world of physical things and virtual objects.

Check the screen of Watering Tracker below. In split seconds, you will understand that the needed action is done – the tick shows it. The icons in the tab bar will give you clues about what you can do with the app: check your set of plants (this tab is active as it’s colored while the others are not), add a new plant or check your profile. These are affordances in action.

History of the Terminology

The term was first introduced by the psychologist James Gibson who deeply researched visual perception. He first used the term in his book ‘The Senses Considered as Perceptual Systems‘ in 1966. In 1979 he clarifies the definition of his terminology in the book ‘The Ecological Approach to Visual Perception’: “The affordances of the environment are what it offers the animal, what it provides or furnishes, either for good or ill. The verb to afford is found in the dictionary, the noun affordance is not. I have made it up. I mean by it something that refers to both the environment and the animal in a way that no existing term does. It implies the complementarity of the animal and the environment.” According to Gibson, humans tend to modify their environment with a wish to make its affordances suit them better and make their life easier. Learning the affordances of the environment becomes an essential part of socialization.

Being applied to design, the term referred to only those physical action possibilities of which the user is aware of. In this perspective, the term got its further development in the explorations by Donald Norman in the 1988 book, ‘The Design of Everyday Things‘. According to the expert, “…the term affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used. […] Affordances provide strong clues to the operations of things. Plates are for pushing. Knobs are for turning. Slots are for inserting things into. Balls are for throwing or bouncing. When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed.”

With the advent of various user interfaces, affordances got a new vector of development. We did hundreds of operations with diverse actions, tools, and things. Now we also do tons of operations just clicking the mouse or tapping the screen. It makes UX designers work on the new ways of presenting affordances that accumulate patterns and knowledge people have from real life in digital interactions. This experience is dramatically different so the approaches change too.

Types of Affordances in UI

Affordances in UI can be classified according to their performance and presentation. Anyway, their main goal is to actualize the knowledge and experience people already have to simplify the interaction flow.

Explicit (obvious) and implicit (hidden) affordances

Based on their performance, we can find obvious and hidden hints in UI.

Explicit affordances are based on widely known and typical prompts that direct the user to a particular action. For example, when you see a button designed as an obviously clickable element, aka visually similar to the buttons in the physical world, you understand you can click or tap it to interact. If it is supported by a text or icons the affordance becomes even more clear: it informs you what will be the feedback from the system.

A CTA button of this e-commerce webpage is clear as a clickable element and the copy says what this button enables a user to do

Implicit affordances are not that obvious. They are hidden and may be revealed only in a particular flow of users’ actions. The cases when we get tooltips or explanations hovering on a layout element are the ones. Other examples are diverse multilayered elements of navigation such as drop-down menus or expandable buttons that aren’t seen all the time or from the first seconds of interaction but are unveiled after a particular operation. Perhaps, one of the most debatable points here is the hamburger menu that hides the access to functionality behind the special icon.

Hamburger button in the header hides the extended website menu

Graphic Affordances

Graphic affordances are presented with visuals applied to an interface and helping users to scan its functionality. Graphics of all kinds are perceived faster and memorized better than copy so their importance cannot be overestimated. Among them, we could mention the following.

Photos: theme photos, items photos, avatars, and title pictures present the visual support, from information that generally users can do with the app or website (buy, communicate, show, watch, study, write, etc.) to specific features. Let’s say, if an app enables a user to save and share recipes, it’s cool to set the immediate association using appropriate photos like in the example below.

Branding signs: logos, corporate signs, and colors applied to the website or app present an immediate hint about the connection of the UI to a particular brand which may be a strong affordance for its loyal customers.

The logo on the splash screen and in the header sets the link to the brand

Illustration: theme illustrations and mascots have a big potential of giving clear prompts to users. Below, you can see a popup informing users about Halloween stickers in Toonie Alarm with a well-known visual prompt – a Halloween pumpkin.

Icon: interface icons present perhaps the most diverse group of visual affordances. These pictograms are highly symbolic and mostly use the hints taken from the real world so that users could understand them quickly. Even more, after some icons lose the connection with the original physical objects they still present productive affordances if remembered by a big number of users: a floppy disk for “save” is a good example. A heart or a star will immediately link you to favorites, a magnifier will prompt it’s a search and a camera icon won’t take you long to understand that it’s for taking a photo.

Icons are also used as effective hints for classification of the content: categories and sections work much faster with the support of proper graphics.

Button: being among the core interactive elements, buttons came to interfaces as a well-recognized element. Before the era of GUI, it was used in a variety of physical things from simple calculators to complex dashboards. We all know well what to do with a button. The point is to make it visible and obviously seen as a button in UI. Shapes, contrast, colors, and copy all present a great help here.

Field: basically, fields present spaces in which users can input the necessary data. To make them effective, designers also activate the power of affordance: fields should look interactive such a way that people understand immediately they can type in the text inside. The interface of Recipes App below shows the search field: it’s clear that the field is an interactive element due to the shape and contrast and also it is supported with a search icon and the text prompt giving an instruction.

Notifications: there are numerous methods to hint the user that there is something missed or worth attention via notifications. Look at the cart icon in the interface for the Tasty Burger app below: a yellow dot on it gives a quick prompt that it isn’t empty.

Copy (Language) Affordances

Although users perceive images much faster than words, copy also doesn’t lose its positions having a great influence on an interaction flow. The point is that images sometimes need to be decoded with the help of the text so as to avoid misunderstandings. Another thing is that not everything may be shown in pictures. Finally, the copy has an incredibly diverse potential in transferring information, labeling the instructions and calls-to-action, explaining the functionality and supporting the efficiency of the layout with typographic hierarchy. However, the text should be given in a reasonable balance not to overload the interface.

Interactions with copy are very natural for people in their everyday life, for much longer than graphical user interfaces exist. Copy clues and prompts help to understand what to do or what to expect, what information to keep in mind: we read many of them, from signs, adverts, and instructions to newspapers, manuals, and books. In digital UI, it works the same way. It is a straightforward way to communicate with a user. For example, the сalendar screen of HealthCare app shows the variety of language affordances: except for major information about patients, we can see the copy prompt inside the search field, the call-to-action copy on the button and a textual clue given in empty fields of the calendar showing that a user can add an appointment for the day just tapping the space.

Pattern Affordances

Pattern affordances are based on the power of habit and present a huge factor in effective interaction design. Their biggest advantage is saving users’ effort to keeping many things in memory simultaneously. As we mentioned in an article presenting mechanisms of human memory to UX designers, the capacity of short-term memory is limited. So, the more patterns users learn, the clearer is the navigation for them and the better they deal with new input. There are many typical affordances of this kind: for example, we are all used to the clickable logos in website headers which usually open a home page. From one interface to the other, we know that underlined piece of copy is usually a clickable link, the information about contacts and privacy policy of the website is often found in a website footer, and three vertical points in the app layout mean “more” showing additional functions. Saving these patterns means making users feel they understand the interface. So, if there’s a need to break the pattern affordances, think twice and test it well: originality should be reasoned and clear for users.

Animated Affordances

Animation applied in user interfaces creates a strong connection between the physical and virtual world. In most cases, it imitates interaction with real things: pulling, pushing, swiping, dragging, etc. So, interface animations both basic and complex present a group of powerful affordances.

The example below shows the switch in Toonie Alarm app. When the switch is on, it changes several parameters together: the color of the tab, the color of the toggle and the animation of the sun activated. This way it immediately informs the user and also adds emotional appeal to the operation.

Another example shows the notification that appears in the flow of interaction in the Home Budget app and reminds the user about particular limitations. Its animation features pulsation and this way attracts user’s attention to the important warning.

Here’s one more case – pull-to-refresh animation. Appearing on the screen, it informs a user that the UI is being updated and adds some fun to the process of waiting.

Negative Affordances

Whatever strange it could sound, negative affordances also play a big role in positive user experience: they root in the fact that negative result is also a result. The purpose of a negative affordance is to give users a prompt that some elements or operations are inactive at the moment. For instance, the interface of the Homey app given below shows that the “Bedroom” button is active while the buttons of other rooms are inactive – so they present negative affordances. The security level also features that level 5 is totally inactive.

Here’s one more case: the tab bar shows the active button as colored while the others present negative affordances.

False Affordances

In a perspective of UX affordances, false and negative shouldn’t be seen as synonyms. No way. False affordance is what designers should avoid: these are the wrong prompts which lead users to the different action or result, not the one which is expected behind the prompt. Sometimes it’s done intentionally, but in most cases by mistake. For example, if the text in the web copy block is underlined, users automatically think it is clickable. So, they can be really annoyed to understand it doesn’t work – it means that they have been prompted the wrong way.

The brief introduction above lets us understand the significant role which affordances play in user experience design. We will continue this theme with more insights, tips and examples in our next posts, so don’t miss the updates.

Recommended Reading

6 Types of Digital Affordance that Impact Your UX

Affordances and Design

How to Perfect UX with Design Affordances

UX Design Glossary: Navigation Elements

UX Design Glossary: Interface Navigation Elements. Set 2

How Human Memory Works: Insights for UX Designers

Originally published in Tubik Blog

Сообщение UX Design: Types of Affordances in User Interfaces появились сначала на Design4Users.

What Is B2B?

B2B is the term used in business, marketing, and economy to mark the relations of the sides in the business process like «business-to-business». B2B means that one company provides products or services aimed at other companies’ business activities. The target audience of the offer is not individual customers but businesses. The nature of relations has a direct impact on business process, strategy, promotion, and therefore any design stages involved in this scope. Not going far, if we are talking about outsourced design and development services, they are a direct example of B2B.

To get this example deeper, let’s imagine the company which sells physical goods to end consumers, let’s say, casual clothes. They need a website that will provide quite broad functionality for a big amount of users. The stakeholders monitor the market for web services and find out that hiring an outsource company for design and development is cheaper and more convenient for them than creating an in-company department for this purpose. This is the start of B2B relations as a digital agency provides its services for another business — a clothes shop – so that it could start e-commerce activity.

People involved in the design process for products and services have to consider the types of relations chosen for the particular project. Actually, the type of business scheme initially defines the target audience and nature of interactions which are key factors for efficient and user-friendly design solutions. Designing for business should supposedly involve methods of visual and content presentation that are different from the one presented directly to end-users. It’s easy to see by examples of numerous landing pages: the ones aimed at companies use content, language, visual and graphic elements, placement of data blocks different from those which are targeted at individual buyers or users.

Neglecting the aspect of business relations increases the risk of creating the design which will not provide a high conversion rate even being sophisticated, stylish, and attractive visually. The psychological background behind design solutions has to support particular business schemes or strategies. Here in Tubik, we have had a broad experience of design for all the mentioned schemes so below you will find some ideas we would like to share on the basis of that practice.

Aspects to Consider in Design for B2B

Designing for B2B, it’s important to remember that:

• design solutions should consistently strengthen branding and company policy. The quality of design says much to the potential clients which the interface has to attract. A good dress is a card of invitation, a good mind is a letter of recommendation – it worked years ago and it still works now. Quality of design created for a website of B2B service is actually an integral part of their image and therefore profits. Remember, that B2B differs from B2C: the stakes, as well as the expenses, are higher, the number of leads can be limited with the specific nature of services, the decisions about the deal may take weeks and even months before they are agreed upon. The website or app design must present the company or service as highly-professional from the first seconds of the interaction and visual perception.  It should build a reliable bridge between the sides looking for collaboration. That’s why business people in this sphere are recommended to involve professional designers in the process while designers have to do their best to understand the business goals and research target audience.
• people become more and more open and sociable, not only in personal but also in professional aspects, and social networks present the great ground for that aim. Implementation of design elements in social network marketing of B2B company, using the same style, voice, corporate colors, and graphics, specially designed branded items and the like is one more way to strengthen brand awareness by means of design. The design has to be consistent whenever the B2B company is presented: headers and banners, logos, style of photos in social network account and on the website need to feature the same stylistic approach. In this way, design makes branding more recognizable, comprehensive and solid.
• consistent and a thought-out content strategy combining visual and textual material with the careful selection of visuals and the copy is able to fulfill all the stages of sales funnel and bring better conversion of the website, landing page or application of B2B company;
• concise and minimalistic solutions in design and copywriting work efficiently in most cases because they save time and effort of busy stakeholders and entrepreneurs. The effective variant of scenario can take place when they are given concise core information at the first stage of interaction but always have the chance to read more if they are interested (as well as avoid reading huge copy blocks if they don’t want). Certainly, this solution should be based on thorough user research, but it has a high potential to make user experience positive;
• business is done differently in different countries. It should be always considered together with the nature of business relations as the factor making a considerable impact on the level of trust and wish to collaborate. Selection of graphic content and layout of the elements on the screen or page should go under analysis in this perspective as some graphic elements, photos, gestures, word combinations, color choices which are efficient and clear for one region or culture can be totally unacceptable or even offensive for the others. Creation of several landing pages targeted locally can be an effective solution;
• the aim of a website or other piece of design presenting B2B company is not to grow a huge flow of traffic but to engage and direct leads which belong to the target audience and are potentially open to take part in business collaboration or partnership good for both sides. It’s important to keep in mind that retaining customers, in this case, plays not less role than involving them in the game.

Design Strategies for B2B

The strategies mentioned below may work not only for B2B but for any kind of interfaces aimed at business. Still, in B2B their role in getting profit may be more significant.

Get CTA elements seen instantly

Call-to-action buttons should be perfectly visible. Doesn’t it work that way for any kind of website, not only B2B? Yes, you are right. But in B2B the price of a click is much higher while visitors are often horribly busy and don’t tend to spend much time looking for a button on the page. Apply color, shape or orientation contrast, test the most effective placement and think over the copy on it – all that stuff may have a crucial effect on conversion rates.

Make value proposition noticeable

Getting to the website, the visitors should immediately understand why it is beneficial to them. Don’t make them search for the reason to cooperate with this B2B service – they won’t do it. Use the catchy slogan or tagline which will express the value proposition briefly and clearly, and take care of its visual performance. Typographic hierarchy will help the user’s eye to catch it first, appropriate fonts will add the mood and style to the message.

Don’t overwhelm users with information: prioritize content

There is a big temptation for a business to show all its strong sides at maximum. However, it may lead to the website with a huge amount of data which might get the visitor confused, annoyed or frightened. It is especially hard in the cases when the visual hierarchy isn’t thought-out and tested properly: the pages risk transforming into a mess which cannot be scanned quickly. So, prioritization is both designer’s and user’s friend here: apply design techniques and layout which will strengthen the visual performance of the core information.

Make copy blocks digestible

The debates around the theme of copy blocks are still hot and actual: which copy is better, long or short? Actually, both may be effective. As we mentioned in the article devoted to landing pages, a decision on the amount of copy has to be based on thorough research and testing as it directly and highly influences conversions.  For example, if it presents a famous company product or service or informs about special offers, sometimes short and concise copy is enough to encourage users to buy or know more. However, if a new unknown product or service is presented, it may be important to provide users with more information persuading them to follow the call to action. Whatever is the decision, the copy content should be given in scannable blocks which aren’t too big so that the user didn’t think reading will take too much time. Scanning the blocks allows for faster understanding if the copy brings useful information.

Keep core data available from the pre-scroll area

Users usually decide on staying on the website or leaving it very quickly. It is really a matter of minutes or even seconds. That is why all the key information would better be seen in the pre-scroll area, including the value proposition and ability to contact the duty holders.

Activate the power of color psychology

Colors present great support in sending the right message. Being attentive to the target audience’s preferences, designers can select the colors not only on the basis of their nice looks but also color psychology which explains associations people have with colors.

Apply catchy visuals sending a message

A picture is worth a thousand words – and that’s not just because it’s more appealing or beautiful but also because in the vast majority of cases, it is perceived faster than words. Moreover, the attractive visual content, be it a photo, illustration or poster may become another source of informing the user about the value proposition provided by the company.

Consider promo video content

Promo videos present the popular trend in business schemes now as they enable to inform users about the value propositions and benefits in the fast and original way. However, it may influence the loading speed of the page so this decision needs to be well-weighed.

Apply landing pages for special offers

Landing pages allow for focusing user’s attention on the specific information instead of making them search for it around the website. It is especially important is the sales funnel starts out of the website.

Don’t forget about the testimonials and signs of trust

Word-of-mouth is the best advertising, especially in the B2B sphere. Making a decision on collaboration, people tend to consider references, testimonials and other signs of trust from the previous clients as positive factors. So, make sure they are available and easily found.

Let users contact duty holders from any point of their journey

Contacts can be presented in various formats. They can reveal the data such as phone number and location, emails, links to messengers, contact forms and an instant chat window. Making the phone numbers clickable is supportive as many users now browse from their smartphones and may want to call right from there. The address can be also clickable opening the screenshot or map showing how to find the location. The solutions have to be based on thoughtful user research setting target audience’s expectations, level of tech literacy and the most convenient ways of contact for them.

Hopefully, the mentioned strategies will help not only designers but also entrepreneurs who want to know more about design issues influencing profitability. Soon, we will share more posts devoted to other numerous aspects of design for business.

What to Read

UX Design for E-Commerce: Principles and Strategies

Relations of Branding and UI Design

Design for Business Goals. Explore the Target

Design for Business. User-Friendly Way to Profits

Two Types of User Motivation: Design to Satisfy Users

Sell Like Hotcakes: UI Designs for E-Commerce

Feel at Home. Tips for Effective Home Page Design

Profitable Design Strategies for Landing Pages

11 Rewarding Strategies for Ecommerce UI Design

Originally written for Tubik Blog

Сообщение UX Design for B2B: Handy Practices for Web and Mobile появились сначала на Design4Users.

The word “gamification” stands for the technique of exerting game mechanics into the non-game environment. Designers often use gamification to create effective digital products and secure high level of user engagement. In one of our previous articles, we’ve mentioned common game mechanics such as challenges, points, badges, leaderboards, and journey. Each gamification element serves for certain goals and has a different influence on users. Today’s article is devoted to one of the most commonly used game mechanics called user journey. We’ll define its essence and find out how it works for UX improvements.

PukaPal Badges

What’s user journey?

To make pleasing UX design, it’s vital to think out all the stages of user interactions. The thing is that one person may use a product for accomplishing different goals each day, even more, they apprehend the product differently every time. Designers and researchers noticed that experience and user interactions gradually evolve as people gain more skills in using the product. Such characteristics make it similar to a journey which players go through in games.

Considering this fact, designers come up with the idea of applying a game mechanic called user (player) journey in digital products. User journey can be defined as user’s progression stages over the time of product usage. Designers create UX that way so that people could go step-by-step through the various features and interactions which gradually change depending on users needs.

Moneywise App

Let’s look at the example. A standard video game always has different levels from the easiest to the most complicated one. This way a player can adapt and easily comprehend how the game works on the easy levels and then constantly learn and make a progress. By the end of the game, a player is usually a skilled competitor who can deal with more complex tasks. If people receive difficult tasks at the beginning, they aren’t able to handle them. Or in case a game only consists of easy challenges, players will soon be bored.

The same works with digital goods. A product which has a simple system of interactions often attracts users with its convenience. However, if people use it for a long time and there are no changes at all, they may get bored. In case a product has an enormous amount of features at the start, they may just get lost within it. To avoid such problems, designers need to think of UX as a user journey, guiding them step-by-step to the point of achievement.

Stages of a user journey

User journey is a game mechanic which aims at making the process of interaction with a product easier and more understandable. A user feels as a real player starting the personal journey of the product usage. Designers plan different stages which a player (user) will gradually go through. Let’s look at the common steps which a user journey includes.

Onboarding stage

People who only start their journey within a product need to be actually onboarded. It means that users should be offered an introduction to the features so that they wouldn’t be afraid to make a mistake. Also, it is good to present a navigation system if it has some peculiarities.

Designers use onboarding tutorials in various digital products. Tutorials appear to users who launch an app or a web product for the first time helping them get oriented within unfamiliar features and controls. One more task designers need to accomplish at the stage of onboarding is user motivation. The product should be presented that way so that people had a motivation to use it more than once. That’s why onboarding tutorials need to contain short but clear info describing the possibilities of a product helping users to understand if a product can be useful for them.

Toonie Alarm

Scaffolding stage

When users continue their journey, they go to the next stage of interactions called scaffolding. The step includes disclosing features progressively as the users become more experienced in using the product. Unlike the onboarding stage, users don’t get long instructions. Scaffolding is more like a practical part. Users are trained to use a product proficiently, and the more they learn, the more tools (features) they receive. This stage allows users to gradually learn more about a product and receive more features as far as they need to use them. Users don’t get a great number of features at once, so the interactions system won’t seem too overloaded or complicated.

Toonie Alarm

Progress stage

No matter what tasks people do, they always want to know about their progress. Providing feedback on the results of a user journey, we can inspire them to continue. It’s a core step since people lose the enthusiasm of a beginner pretty soon and they need to be motivated to stay.

Some may ask what progress can be in non-game digital products? For example, a social app can notify users when they gained a certain number of new followers or friends. Meanwhile, educational applications can inform users of how much they’ve learned from time to time. All small details matter. Just tell people they achieved something and they get a dose of enthusiasm to continue.

Blog App

Endgame stage

Designers usually stop at the stage of scaffolding and progress uniting them in the endless loop, where users constantly learn and receive feedback. However, sooner or later people get bored of such patterns and may quit the product. Here is why the endpoint of a journey is also important to be thought out.

Endgame stage doesn’t mean that users will receive the message “Thank you for being with us! Bye-bye.” At this stage, proficient users are recognized as experts or veterans and they are usually given some privileges for loyalty. People like to be valued and they often give it right back. It’s not a secret that loyal customers are the best marketing managers for a product. New users willingly follow satisfied users’ testimonials.

Why a user journey?

User journey is a complex game mechanic that requires deep attention to details. Each stage should be carefully planned and connected to the others. Moreover, it requires long-term plans for future updates, so the process of user journey development may take a long time. Of course, some may ask if it is worth the effort to bring it into a product. Let’s see what user journey can give you back.

Clear interaction system. Users receive features gradually at the stage of scaffolding and users learn to utilize a product step-by-step. An approach helps to avoid problems with incomprehensible interactions and functions.

Increased user engagement. One of the gamification principles is to make users always motivated and involved in “game”. User journey is usually full of different tasks and achievements which people can gain, so users can’t resist game spirit.

Customer loyalty. If a product is constantly improved for its users, people really appreciate it. Moreover, if a product has some privileges for loyal customers, people trust it more.

Product recognizability. As we said above, satisfied customers are effective marketers for a product. Users willingly share their pleasant experience and it won’t stay unnoticed.

The element of fun. As any other game element, user journey is a good way to bring an emotional aspect to a product. 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 product, you help people reduce some stress and relax for a moment.

Animated stickers for Mood Messenger

All in all, we can say that user journey is an effective method for UX improvement. However, a designer and a client should consider the fact that gamification works well not for every product. It depends on a type of an interface, its target audience, and business goals. For more detailed information, check our previous article where we’ve defined the tasks which gamification helps to accomplish and don’t miss the updates on gamification in UI coming soon.

Recommended reading

Gamification by Interaction Design Foundation
42 Rules for Engaging Members Through Gamification: Unlock the Secrets of Motivation, Community, and Fun
Gamification in UX. Boosting User Engagement.
Gamification: Designing for Motivation
Two types of user motivation

Originally written for Tubik Blog

Сообщение Gamification Mechanics in UX Design: User Journey появились сначала на Design4Users.

Visual hierarchy in web and mobile interfaces belongs to the domain knowing which designers strengthen their creative potential. Exploring the ways how people perceive information and using them for building good navigation, digestible copy, and effective color choice has a great impact on the usability of the product – and scannability as its important part. So, today we are going back to basics: let’s start revising how Gestalt grouping principles can affect user interfaces positively.

What is Gestalt theory?

Basically, Gestalt is the term that comes from the German word Gestalt [ɡəˈʃtalt] meaning “shape, form”. It is used primarily in cognitive psychology for the field exploring the laws of meaningful perception of the data which people constantly get from the world that seems primarily chaotic. The basic idea behind this movement can be caught through the well-known phrase by Gestalt psychologist Kurt Koffka: “The whole is other than the sum of the parts”. 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.

Why could designers get interested in this issue? Because it helps understand the psychology of the app or website users better. When you know the factors influencing visual perception, it makes the process of UX design much more proficient giving higher rates of successful interactions and lowering the level of misunderstandings users could get on this way. Among the various levels of this approach, principles (or laws) of grouping are probably the most essential for designers to consider. These principles are based on the idea that people arrange what they see along with some patterns organized into five global categories: Proximity, Similarity, Continuity, Closure, and Connectedness. Here’s one of the infographics offered by Vertical Measures blog and visualizing the core description for some principles.

Source

In user interfaces, principles of grouping applied thoughtfully make the perception of layout elements quicker and easier as well as establish the priorities in different levels of interaction. Today we are going to consider the similarity principle of grouping widely used in design practice.

Similarity principle

The principle of similarity is grounded in the idea that things that share visual characteristics such as shape, size, color, texture, value or orientation will be seen as belonging together. It means that if a person perceives the set of elements, he or she tends to group the ones which have one or several features alike as the related items.  Therefore, giving different layout elements identic or similar visual features, designers stimulate users to set the appropriate connections and understand the whole scheme faster.

Similarity can be based on various visual parameters such as color, shape, size, and orientation. Let’s check some practical examples of interfaces designed by Tubik team.

Color

Bright Vibe Calendar

Here’s the common example of applying color similarity in the simple calendar app. The letters marking the days of the week on the calendar screen are visually grouped with one color which is different from the colors used for the numbers in the calendar grid. Therefore, the quick glance is enough to separate these types of symbols – color simplifies the process of the first scanning. The next level of color similarity takes place in the field of numbers: the dates on the week which the user has chosen look brighter while the other dates of the month look more faded. The key interactive zones are colored brightly and present the visual accent which is instantly noticeable and cannot be missed. So, color enables the designer to make the easy path of navigation for a user with an effective visual hierarchy via the principle of grouping.

To-Do App

One more example here shows how grouping by color can be applied effectively for the copy in graphical interfaces. You can see the screen of a to-do app where the position which is already marked as done is featured in different color compared to the tasks that are in progress. It enables the user to scan the list quickly and group the kinds of tasks in split seconds.

Blog App

More complex application of grouping principle by color is marking categories and blocks of content. It works very well in the interfaces full of various content organized on several levels such as, let’s say, blogs, e-commerce or educational resources, etc. Color markers simplify navigation and keep the consistency of design enabling users to remember the color prompts and find the content they want easily. The example above shows the blog app applying this principle: various posts are organized around global categories and marked with colors which you can see on icons, colored tabs on the posts and correspondent quick stats of posts in the user profile. The same principle is applied in the Moneywise App shown below.

Moneywise App

This is the educational app devoted to economics: the content is organized into four global categories. The color used to mark the category is used as the background color for all the cards belonging to it. So, in the process of interaction, it helps users to quickly get oriented where they are.

Surely, this way of color grouping goes further as it organizes not just the elements on one screen but different screens or pages within all the digital product. However, it also corresponds to the Gestalt principles: such an approach allows designers to create interfaces that look and feel consistent and support the general integrity of visual perception from screen to screen, from one interaction to the other.

Size

The principle of similarity grouping the elements by size is another cornerstone in creating intuitive and user-friendly interfaces as it establishes the basis for strong visual hierarchy supporting users. This approach helps to set priorities and make the most important content visible. Grouping the similar content elements by this principle arranges the connection between them, often faster than a user can read the copy or see all the details.

The good way to present this principle in action is checking the organization of copy content.

Architecture Firm Website

The example features the corporate website of an architecture company. The copy blocks presenting the benefits and approaches of the firm are supported with the keywords applying two grouping principles simultaneously: they use different size and different text orientation. In the process of interaction, they are obviously perceived as the related elements. Also, the extended menu page shows the typographic hierarchy grouping copy elements by size: keywords, categories, and subcategories.

Tab bar interaction concept

Here’s another example of grouping by size and color. We can see the concept of a tab bar in which interactive elements of equal importance are given in the same size and faded shade while the core interactive element – plus button –  is made prominent via bright color and bigger size. Moreover, trying to add the content via this button the user is offered three options for different types of content. And again, grouping the appearing three buttons which use the same color as the parent button but smaller size, the interface enables the user to set the connections and hierarchy of navigation elements easily based on typical operations of cognitive perception.

Shape

One more way to group the elements on the web page or screen is marking them by shape.

Green Spy app interactions

The example shows the app which uses cards of the same shape to simulate the interaction with the physical objects – the base of data cards. This approach allows the user to perceive the set of content blocks as related.

Homey App

The interface for the Homey app shown above also presents the example of grouping by shape consistently from one screen to another: the buttons marking the rooms use the rounded-square shape while the buttons of various indicators within a particular room screen use the round shape. It sets the clear connections between the related layout elements as well as global navigation in the app.

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: proximity, symmetry, continuation, and others.

Recommended Reading

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?
Psychology in Design: Principles Helping to Understand Users

Originally written for Tubik Blog

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

What’s information architecture?

Information architecture (IA) is a science of organizing and structuring the content of the websites, web and mobile applications, and social media software. An American architect and graphic designer, Richard Saul Wurman, is considered to be a founder of the IA field. Today, there are many specialists working on IA development who have established the Information Architecture Institute. According to the IAI experts, information architecture is the practice of deciding how to arrange the parts of something to be understandable.

Information architecture 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. The content structure depends on various factors. First of all, IA experts consider the specifics of the target audience’s needs because IA puts user satisfaction as a priority. Also, the structure depends on the type of the product and the offers companies have. For example, if we compare a retail website and a blog, we’ll see two absolutely different structures both efficient for accomplishing certain objectives. Information architecture has become a fundamental study in many spheres including design and software development.

The role of information architecture in design

Nowadays, when the user-centered approach in design is a top trend, many designers learn the principles of information architecture science which they believe is a foundation of efficient design. IA forms a skeleton of any design project. Visual elements, functionality, interaction, and navigation are built according to the information architecture principles. The thing is that even compelling content elements and powerful UI design can fail without appropriate IA. Unorganized content makes navigation difficult and inexplicit, so the users can easily get lost and feel annoyed. If the users face first bad interaction, they may not give the second chance to your product.

Many companies don’t see the importance of information architecture because they think it’s impractical. It’s hard to argue that IA takes some time to create it and requires specific skills to do it efficiently. However, powerful IA is a guarantee of a high-quality product since it reduces the possibility of usability and navigation problems. This way, well-thought information architecture can save both the time and money of the company which otherwise they would have spent on fixing and improving.

IA and UX design

After reading everything written above, many people may have the question: “Isn’t IA the same as UX design?”. Technically, these terms relate to each other but they are far not the same. IA is a blueprint of the design structure that can be generated into wireframes and sitemaps of the project. UX designers use them as the basic materials so that they could plan the navigation system.

UX design means much more than content structuring. In the first place, UX designers aim at making a pleasant interaction model, so that users feel comfortable using the product. They encompass various aspects influencing users’ behavior and actions such as emotion and psychology when the IA experts stay focused on the user’s goals.

Let’s get this straight: good information architecture is a foundation of efficient user experience, so the IA skill is essential for the designers. Effective IA makes the product easy to use but only united with design thinking the product has a powerful user experience.

IA system components

If you want to build strong information architecture for the product, you need to understand what it consists of. Pioneers of the IA field, Lou Rosenfeld and Peter Morville in their book “Information Architecture for the World Wide Web” have distinguished four main components: organization systems, labeling systems, navigation systems, and searching systems.

Organization systems

These are the groups or the categories in which the information is divided. Such a system helps users to predict where they can find certain information easily. There are three main organizational structures: Hierarchical, Sequential, and Matrix.

Hierarchical. In one of our previous articles, we’ve mentioned a well-known technique of content organization which is 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.

Vinny’s Bakery Website

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 that is ordered according to date, or some may prefer navigation along the topic.

MoneyWise App

In addition, content can be grouped according to the organization schemes. They are meant to categorize the content of the product. Here are some of the popular schemes:

Alphabetical schemes. Content is organized in alphabetical order. Also, they can serve as a navigation tool for users.

Chronological schemes. This type organizes content by date.

Topic schemes. Content is organized according to the specific subject.

Audience schemes. The type of content organization for separate groups of users.

Book Swap App

Labeling systems

This system involves the ways of data representation. The design of the product requires simplicity, so a great amount of information can confuse users. That’s why designers create labels that represent loads of data in a few words. For example, when the designers give the contact information of the company on the website, it usually includes the phone number, email, and social media contacts. However, designers can’t present all of this information on one page. The button “Contact” in the header of the page is a label that triggers the associations in the users’ heads without placing the whole data on the page. So, the labeling system aims at uniting the data effectively.

Gym Landing Page

Navigation systems

In one of our UX Glossary articles, we’ve defined navigation as the set of actions and techniques guiding users throughout the app or website, enabling them to fulfill their goals and successfully interact with the product. The navigation system, in terms of IA, involves the ways how users move through the content. It’s a complex system that employs many techniques and approaches, the reason why it’s wrong to describe it in a short paragraph. So, we’ll go back to the topic a bit later on our new blog’s article.

Searching systems

This system is used in information architecture to help users search for the data within the digital product like a website or an app. The searching system is effective only for the products with loads of information when the users risk getting lost there. In this case, the designers should consider a search engine, filters, and many other tools helping users find content and plan how the data will look after the search.

To sum up, we can claim that information architecture is a core part of the powerful user experience design. Efficient IA helps users quickly and easily navigate through content and find everything they need without striking a blow. That’s why designers are recommended to learn the basics of IA science.

The topic of information architecture is wide and there are more interesting and useful aspects. Our next article on this theme will be devoted to the various techniques and methodologies which designers employ to create efficient IA. Stay tuned!

Recommended reading

IA for the Web and Beyond
How to Make Sense of Any Mess: Information Architecture for Everybody
Information Architecture Basics
The Difference Between Information Architecture and UX Design

Originally written for Tubik Blog

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

The role of psychology in design

Today the tendency of user-centered design makes designers reconsider the approach to their work and go deeper into the understanding of the target audience. Donald A. Norman in his book “The Design of Everyday Things” defines design as an act of communication, which means having a deep understanding of the person with whom the designer is communicating. In order to get a better insight into people’s needs, designers are recommended to bear in mind the psychological principles of human behavior, aspirations, and motivations.

The outcome of the work can be even more positive if a designer applies psychology in the creative process since science gives a close understanding of the target audience. Psychology knowledge helps to create the design which will make users perform the actions they are expected to such as making a purchase or contacting the team.

Designers may see psychology as a complicated approach to improving the design and for that reason neglect this part of research and analysis. However, you don’t need to be a Ph.D. in psychology to use it at your work effectively. All you need to consider are the basic principles constantly presented in design. Based on our experience and the conducted research, we’ve defined six effective psychological principles often applied in the design process.

Gestalt Principles

This psychological theory is almost 100-year-old but it hasn’t lost its actuality. The word “gestalt” means “unified whole” so the theory explores users’ visual perception of elements in relation to each other. In other words, it shows how people tend to unify the visual elements into groups. The principles, on which users form the groups, include:

Similarity. If a user sees objects that look somehow similar, they may automatically perceive them as the individual elements of one group. The similarity between elements is usually defined with shape, color, size, texture, or value. The similarity gives users a sense of coherence between the design elements.

Continuation. It is the principle according to which the human eye moves naturally from one object to the other. This often happens through the creation of curved lines allowing the eye to flow with the line.

Closure. It is a technique based on the human eye’s tendency to see closed shapes. Closure works where an object is incomplete but the user perceives it as a full shape by filling in the missing parts.

Proximity. When objects are placed in close proximity, the eye perceives them as a group rather than seen individually even if they aren’t similar.

Figure/Ground. This principle demonstrates the eye’s tendency to separate objects from their background. There are lots of examples of pictures that show two faces depending on where your eye is focused on the object or background.

Photography Workshops  website

The Gestalt principles confirm in practice that our brain tends to make tricks with us, so designers should consider that fact during the creation process to exclude the possibility of misunderstandings.

Visceral Reactions

Have you ever had that feeling when you fall in love with the website after the first second when you’ve opened it? Or maybe an application has made you sick only with the quick glance at it? If yes, then you’ve already known what’s a visceral reaction. This kind of reaction comes from the part of our head called “old brain” responsible for the instincts and it reacts much faster than our consciousness does. Visceral reactions are rooted in our DNA, so they can be easily predicted.

How do designers use this knowledge? They aim at creating a positive aesthetic impression with the design. It’s not that difficult to guess what looks nice to people and what doesn’t if you know your target audience and their needs. So, the tendency of using the high-resolution beautiful photos or the colorful pictures at landing pages, websites, or any other web and mobile products is not accidental.

Jewelry E-commerce Application

Psychology of Colors

A science studying the influence of colors on the human’s mind, behavior, and reactions is called the psychology of colors. Today we won’t go deep into the aspects of this study since it is complex so deserves to have a specialized post devoted to it (on which, besides, we’re already working). In a few words, the main idea of the study is that the colors have a great impact on the users’ perception. That’s why designers should choose the colors knowingly to make sure their work presents the right message and tune.

Here is the list of the basic colors and the meanings which they are typically associated with:
Red. The color usually associates with passionate, strong, or aggressive feelings. It symbolizes both good and bad feelings including love, confidence, passion, and anger.
Orange. An energetic and warm color bringing the feelings of excitement.
Yellow. This is the color of happiness. It symbolizes the sunlight, joy, and warmth.
Green. The color of nature. It brings calming and renewing feelings. Also, may signify inexperience.
Blue. It often represents some corporate images. It usually shows calm feelings but as a cool color, it also associates with distance and sadness.
Purple. Long associated with royalty and wealth since many kings wore purple clothes. It’s also a color of mystery and magic.
Black. The color has a great number of meanings. It associates with tragedy and death. It signifies a mystery. It can be traditional and modern. Everything depends on how you employ it and which colors go with it.
White. The color means purity and innocence, as well as wholeness and clarity.

Slopes Website

Recognition Patterns

You may have noticed that websites or applications united with one theme usually have common patterns in their design. The reason is the users’ psychology. The thing is that people visiting a website or using an application are expecting to see certain things associated with the definite kind of product.

For example, visiting a website of a barbershop, the users are not expecting to see bright colors or pictures with cats or anything like this because if they do see it, this will definitely make them think of a website as an untrustworthy resource.

However, not only the colors and pictures matter. Some obvious and common things such as a list of blog posts on the front page of a blog or the filters on the e-commerce website are also important for successful navigation. Users become accustomed to things quickly and their absence makes them feel uncomfortable.

To-do list concept

Scanning Patterns

In our article Tips on Applying Copy Content in User Interfaces, we’ve already mentioned that before reading a web page, people scan it to get a sense of whether they are interested. According to different studies, including the publications by Nielsen Norman Group, UXPin team, and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.

F-pattern is referred to as the most common eye-scanning pattern, especially for web pages with a big amount of content. A user first scans a horizontal line on the top of the screen, then moves down the page a bit and reads along the horizontal line which usually covers a shorter area. And the last one is a vertical line down on the left side of the copy where they look for keywords in the initial sentences of the paragraphs. It usually occurs on text-heavy pages like blogs, news platforms, thematic editorials, etc.

Z-pattern is applied to pages that are not so heavily concentrated on the copy. A user first scans across the top of the page starting from the top left corner, looking for important information, and then goes down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page, again from left to right. This is a typical model of scanning for landing pages or websites not loaded with copy and not requiring scrolling down the page, which means that all the core data is visible in the pre-scroll area.

Knowing these patterns, designers can place the elements in an effective way for users’ perception and help them perform expected actions.

Hick’s Law

The law states that the more options users are exposed to, the longer it takes them to make a decision. This means that the more options you give to users, be it products to choose or pictures to look at, the more time and energy it takes to make a decision about the next step of the interaction. The possible result here is that the users make the choices but get unpleasant feelings after using the product, or in the worst case, they may not want to take such a significant effort and just leave.

That’s why designers are recommended to keep any options including buttons, pictures, pages to a minimum. Removing unnecessary choices, you make the usability of the product more effective.

Cafe Coupon App

Psychology is an effective tool in design which makes the creative process more productive while the result is going to be more user-centered. We’ve told you about six useful principles but they are only the tip of the iceberg because there is much more to learn on the topic. Don’t miss our next blog posts continuing this useful theme!

Recommended reading:

Here are some more articles we could recommend for those who would like to get deeper into the topic:

• Gestalt principles
• The role of psychology as a design tool
• 5 psychology rules every UX designer must know
• Gestalt Theory for Efficient UX: Principle of Similarity.
• Emotional Design: Why We Love (or Hate) Everyday Things by Don Norman
• The 5 pillars of visual hierarchy in Web design
• 6 principles of visual hierarchy for designers
• On Visual Hierarchy
• F-Shaped Pattern For Reading Web Content

Originally written for Tubik Blog

Сообщение Psychology in Design: How to Understand Users появились сначала на Design4Users.

No doubt, every designer – as well as any creative person – wishes to make something desired by lots of users, preferably on a regular basis. There is a group of creators who claim that they are interested in the process or the fact of creation and don’t care about the further life of the product, still, it’s incredibly tiny if compared to the number of people who want to see the results of their creative work usable, useful and regularly used. One of the key factors to achieve this goal is knowing the final users and ways to motivate them. So, today let’s take another little journey to the psychology of users, this time concentrating on types of motivation and their influence on design solutions.

What is motivation?

Basically, motivation is the term coming from psychology and dealing with behavior. This concept describes something that makes people do particular actions giving specific reasons for these actions or needs. Motivation is the force that gives people motives, defined in Merriam-Webster dictionary as “something (as a need or desire) that causes a person to act”. According to professor of psychology J. Nevid, “The term motivation refers to factors that activate, direct, and sustain goal-directed behavior… Motives are the “whys” of behavior – the needs or wants that drive behavior and explain what we do. We don’t actually observe a motive; rather, we infer that one exists based on the behavior we observe.” (Nevid J., Psychology: Concepts and applications. 2013)

Motivation appears on the crossroads of biological, cognitive, social and emotional factors, that all together influence its strength and behavior it stimulates. Three basic features which could describe the motivation of any kind are the following:

• Activation – the decision to activate the particular type of behavior, often stimulated by formulating a particular goal or achievement
• Persistence – the power of effort which is taken in short-term or long-term perspective to achieve a particular goal
• Intensity – the level of concentration and desire applied by a person to achieve the goal

Why is it important for designers to understand the types and mechanisms of motivation? Because it shows the direct way how to make the product correspondent to users’ expectations and solving users’ pains. The product, which is designed, can be extremely helpful, but to learn that, the user should be motivated to try. And design, being the part of the product, which is both functionally and emotionally appealing, is the first and powerful way to give a user the reason to try the app or website.

Two basic types of motivation

There are two major directions of how motivation evolves and they deeply influence the decision-making process. In short, they are based on what is the source when “Why would I do that?” appears and encourages us to act: some of these reasons come from the outer world while the others are found inside ourselves. On that ground, psychologists define extrinsic and intrinsic motivation.

Extrinsic motivation

This term unites the group of factors that come from outer sources. These motives can come from family, professional environment, competitions, contests etc. The motives of this sort encourage the person to deal with the outer world of other people as there is no other way to achieve the particular goals. It means that they involve the diversity of social reasons as well as stereotypes. Cultural background, age, and gender, level of education, country of residence, religion and family status – these and many other factors can form and correct the reasons coming from outside and motivating people to communicate and behave this or that way. In the vast majority of cases, extrinsic motivation is a seek of reward, which can be tangible (money, prizes, diplomas, certificates, trophies, medals etc.) and intangible (praise, support, recognition etc.). The situation of competition itself presents the strong extrinsic motive: some of us are more motivated with not the prize we get but purely with the understanding that we won the others. Moreover, this factor can become even stronger in the case when there is direct support from others like friends or followers.

These factors should be the object of thorough research for UX designers as they actually present the doors opening the digital products to the world. The motivation via rewards has been widely used in all the kinds of games – without it for many users, a game usually doesn’t make sense – it should present the real goal which is achievable and stimulates persistence in the process of getting it. The wide invasion of the internet technologies and social networking added the element of constant competition with others strengthening the power of outer sources of motivation.

However, this mechanism of attracting and retaining users is applied in the variety of digital products now, including those which are far from games in their traditional understanding. When you are marked as the most loyal customer or are promised to be given a discount in case of the particular purchase; when you get the certificate via the online educational platform of which you can boast to your friends via social networks; when you are marked as the top writer or top contributor on the blog platform, and so on so forth – all that stuff presents the signs of extrinsic motivation. And that’s not bad: that’s just the way to make specific activities reasoned, which is crucial for most users. The trick is to find which reason works for this particular audience.

Snake Battle App based on the extrinsic motives of winning the battle and getting rewards

Intrinsic Motivation

This is another side of the coin: that set of motives and stimuli comes out from the inner world of the person. These are the motives which are formed by the wishes and needs the person has due to its intelligence, soul, and heart. These are the motives which can be much harder to find and understand, but much longer to work successfully.

Intrinsic motivation is the inner engine moving a person to self-improvement whatever it could mean. In fact, people are born with this need and wish, which gets the higher level of development when the person satisfies basic needs like food and shelter and goes to the next stages in the hierarchy of needs. It’s natural for us to wish trying new things, to accept new challenges, to try our own abilities and gifts, to feel satisfaction from getting new knowledge and mastering new skills. This type of motivation is often stronger than the previous as it comes from what nature the person has and what personal likes or dislikes move decision-making process. In everyday terms, we often call this type of motivation “interest” or “desire” which becomes a significant factor for retaining users. And it’s a well-known factor that the simple explanation: “I do it just because it’s interesting” is one of the strongest motives which can only exist. It moves the user to act because of the subject of the activity itself rather than reward or recognition.

Underwater World Encyclopedia based on intrinsic motive of getting new knowledge

Wedding Planner based on the intrinsic motive to optimize personal effort in organization of the event 

Toonie Alarm combining intrinsic motive (getting up on time) and extrinsic motive (getting stickers as rewards)

Getting the knowledge about the target audience at the stage of user research, designers can analyze which types of motives and which their combinations will work for the specific users.

The visual presentation of two major motivation types by experts from Interaction Design Foundation 

Building motivation with design

Knowledge of the mechanisms of motivation can become a great help for UI/UX designers and information architects. The advantage of providing appropriate motives for the target audience can be applied at the levels of:

• thinking over the clear application or website structure and organization of triggers and informational blocks supported with rigorous user research
• building navigation and call-to-action elements according to things which engage users motivating them to act
• creating appropriate layout demonstrating key benefits or rewards
• providing supportive onboarding process motivating to try the product and test its functions
• presenting visual design solutions appealing to the target audience and adding the motive of aesthetic satisfaction
• including the copy which stimulates users, describes the key benefits of the product, the achievements users can get and support available in the process of interaction
• adding the features of setting short-term and long-term goals
• enabling users to share their achievements via various social networks – approval and praise of virtual communities is the powerful extrinsic motive nowadays.

Upper App using the mechanism of intrinsic motivation to boost users’ productivity

The bottom line is simple here: if you want users to like and use your product, give them a reason to love it. They will start their journey with “Why?” and will repeat that question regularly at different levels of interaction – so get prepared to show them the answer.

Originally written for Tubik Blog

Сообщение Two Types of Motivation: Design to Satisfy Users появились сначала на Design4Users.

Earlier we have already published the glossary posts with key notions for the topics of business terms and abbreviations useful for designers as well as highlighted some aspects in more details in the free ebook “Design for Business”. This time let’s add some deeper insights into the essence of setting and exploring the target of the product and the mutual influence of design and marketing have on each other.

Marketing

“Marketing is a contest for people’s attention”. Seth Godin

Definition. In general terms, marketing is the set of studies and methods devoted to the management of exchange relations. Basically, it is the multi-layered process whose aim is to connect the products with the customers. It can involve the variety of advertising and promotional activities, market and customer research, organization of sales, direct and indirect communication with the target audience. In terms of tough and diverse competition in most markets nowadays, marketing is the strategy and the trophy to achieve is users’ and customers’ attention.

Design aspect. Design and marketing have been supporting each other for many decades, so there are two basic directions of their connection.

The direction from marketing to design means involving techniques of marketing into the design process from the early stages of product creation or updates. The cases when marketing strategy is thought out from the stage of ideation on the future product makes the design even more meaningful: not only do designers create the product solving users’ problems or satisfying needs, but also set the channels and ways how the product can be noticed by the customer, how it can get interesting for a target user and what are the ways to show its benefits effectively. Knowing all that stuff, the designers can find the appropriate UX – the logic of the product and UI – visual presentation of its features. Each tiny element or aspect like the color or shape of a button to the global approach to color palette, the choice of fonts and the space between elements on the page or screen, every transition and micro-interaction designed properly and applied wisely can have a huge impact on the success of the product and its ability to fulfill the business goals.

Web design for e-commerce: Vinny’s Bakery

Moreover, it must be said that high-quality user-friendly product is the best marketing strategy. That is why design plays a crucial role as it creates the features and the wrapping able to attract users and engage them, spark the wish to use it again, and make it helpful so that users could have a solid reason to love it.

The reverse direction from design to marketing means that design itself becomes a powerful way to present the product or even the person on the market. Design solutions applied for creating commercial, corporate, or personal identity through branding become the foundation for the marketing strategy, in most cases starting from the moment when the product gets its sign of distinction such as logo or icon. Designers create visual support of the promotional campaigns from posters, leaflets, and brochures to complex sets of branded items and corporate interior style of point-of-sales. As long as people are the creatures of not only physical but also social and aesthetic nature, the design is going to take a big part of any business success.

Corporate branding: design of business cards

Anyway, marketing is the point where people who create the product and those who build the bridge between the product and the customer should have the same goals: to provide users/customers with something that will be helpful and satisfying their needs. To do that, first of all, it’s important to set the group for which it is created and analyze what its preferences are.

Target audience

“In sales there are going to be times when you can’t make everyone happy. Don’t expect to and you won’t be disappointed. Just do your best for each client in each situation as it arises. Then, learn from each situation how to do it better the next time.” Tom Hopkins

Definition. The term “target audience” comes from the spheres of publishing, in which it means the readers intended for the particular book or edition, and marketing, in which it sets behind the group of customers potentially interested in the particular product or service. The quickly developing sphere of digital products such as websites or applications absorbed this term immediately meaning the audience which presents the potential users of the specific app or website.

Certainly, for many creators, it can be hard initially to find out what their target audience is: they would like this product to be used and loved by everyone. Still, in real life, it’s a sort of utopia which can become a death knell for the product. Selecting the core target audience and then, if needed and possible, broaden the abilities of the product to make it attractive and useful for the broader circle of users in many cases proves itself as a much more successful and effective strategy. Setting the priorities, it’s easier to concentrate on key functionality and make it faster than trying to satisfy everyone at once.

App design for wedding planner

Design aspect. As we mentioned in the ultimate guide to creating a mobile application, user research, and market research are highly advisable to be done at the start of the creative process to provide the designer or the creative team with understanding what their target audience is:

• -what their interests and wishes are
• what kind of communication and lifestyle is convenient and common for them
• what problems they have and which of them the designed product solves
• what are the typical environments when they use this kind of products
• where they could get the information about the product
• what could stimulate them to try the product
• what could engage them to get back to it again after the first experience
• what could involve them into using the product on a regular basis
• what could make this product different from the others on the market for the target users.

Joel Anderson said, “You can’t just open a website and expect people to flood in. If you really want to succeed you have to create traffic.” Design is one of the powerful methods to do it, especially in cases when it’s strengthened with appropriate copy and general content selection. Creating custom graphics, supporting microinteractions with motion, writing clear, concise and informative copy, choosing readable fonts and nice color combinations, setting landing pages for specific purposes instead of sending the user to the tons of information on the home page of the website, you can directly attract and create traffic that will give profits and support the thriving business.

Funny and bright design for Toonie Alarm

Minimalistic and elegant design for Upper App

Targeting

“You can’t wait for customers to come to you. You have to figure out where they are, go there and drag them back to your store.” (Paul Graham)

Definition. Briefly, targeting is another term from marketing widely applied in the sphere of digital design. It is usually associated with the strategy and techniques of the particular target audience to find the best and the shortest ways to attract their attention to the particular product.

Design aspect. The scheme is very simple: when you shoot without seeing your target, the chance that you will score exists but its miserably slim. If you shoot seeing the target, the chances grow. The closer you come to your target, the higher becomes the possibility of hitting the mark.

This metaphor successfully works in both marketing and design. Having set who the potential user of the designed website or app is and researching the basic and extended data about this group of users, designers are able to create the solutions which will get close to the user along one or several factors. Let’s briefly review what aspects and factors can influence this process setting the directions of targeting.

Geographic targeting. Location of the person is important to set the cultural background as well as the natural environment of using the product. It means that even one product can be different in some visual features or operational performance to satisfy users from a particular country or region, up to having different names to sound more catchy or informative on the local market.

Gender targeting. If you know that your target audience is mostly men or mostly women, this kind of data can have a great impact on design solutions based on the psychological and perceptional differences. Even such a basic aspect as the color choice can be highly influenced by the gender of the core target audience.

Psychographic targeting is grounded on knowledge of motives that move the user to try this type of product. It is based on a deep knowledge of the typical lifestyle, interests, etc.

Demographic targeting happens when creators and marketers are focused on catching attention and involving a particular demographic group, for example, based on age, ethnicity, income, qualification, marital status, having kids, etc.

Behavioral targeting is based on defining the target audience along the particular models of behavior, for example, young adults regularly visiting night clubs or people buying coffee and drinking it on the go.

Night in Berlin App

Understanding the process and methods of targeting and getting this sort of knowledge enables designers to choose the shortcuts to users’ needs and wishes. That is why in cases of outsourcing design it’s highly advisable to take all the chances of getting maximum possible information about the potential users and business goals from the customer. One of the good methods is creating user personas, user stories, and user cases, on which we will give more details in our next posts.

Recommended reading

Hopefully, these insights will somehow help designers to get closer to the market creating goal-centered products for various businesses. Before soon, we will definitely provide you with new posts and thoughts on this theme, meanwhile here is the list of recommended articles that could be helpful.

Personas Make Users Memorable for Product Team Members
5 ways design and marketing can work together better
One Persona to Rule Them All
Designing for your target audience
Matching site design to your target demographic
Short but Vital. Key Abbreviations in Design for Business
The Importance of Design in All Marketing Campaigns

Originally written for Tubik Blog

Сообщение Design for Business Goals: Explore the Target появились сначала на Design4Users.