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.

At first sight color science may seem not that difficult to master but diving into the details it’s obvious that there are many peculiarities which demand to be comprehended. In the article Color Theory: Brief Guide For Designers, we touched upon the basics of the science helping designers in their craft. Today we gathered a handy glossary with the essential terms of the color theory which will help graphic and UI designers get a better understanding of how color works.

Color

Before we step any further, it’s important to figure out the essence of color itself. The Merriam-Webster dictionary defines it as a phenomenon of light (such as red, brown, pink, or gray) or visual perception that enables one to differentiate otherwise identical objects. Simply put, color is a quality of an object which is caused due to the light being reflected or emitted by this object. Color can be verified visually by measurement of its properties such as hue, saturation, chromaticity, and value. To gain proper awareness of color meaning let’s define its characteristics.

Color Properties

Hue

The term hue is often mistaken for the color so it needs to be cleared out. First, we should understand that “color” is a general term that people use to name all the hues, tints, and tones. On the other hand, a hue is exactly the thing we mean asking “what color is it?”. Basically, it is a family of twelve pure and bold colors presented on the color wheel.

A hue serves as a basic material that can be transformed in three different ways – tinting, shading, and toning. Depending on the applied technique, a hue is modified into tint, shade, or tone.

They are easy to distinguish. A tint is created by mixing a hue with white, while a shade is a mix of a hue and black. Toning is a more delicate process because it requires adding both black and white the reason why the results may seem more natural than shades and tints.

Source

Value

As we said above colors have certain characteristics by which they can be recognized. Value is a property telling how light or dark a color is. The characteristic is defined by the level of whiteness. The more white has been added to a hue, the higher the value it receives.

Chromaticity

Chroma, or chromaticity, shows the purity of a hue. The characteristic is measured by the presence of white, grey, or black in a color. Twelve basic hues described above have the highest level of chromaticity since they don’t contain any additional elements. Colors with high chroma usually look bold and vivid.

Saturation

This characteristic has much in common with value and chroma, so sometimes they may be mistaken. Still, it’s vital to understand the differences. Unlike two previous properties, saturation doesn’t apply to mix hues with any other colors. It is about how a color looks under different lighting conditions. Saturation describes how bold or pale color is according to its look in the daylight and weak light. The property is also known as the intensity of a color.

Color Wheel

If you had any lessons related to painting, you must have seen the circle consisting of different colors. It is called the color wheel and helps to understand how different colors relate to each other and how they can be combined. The color circle is usually built of primary, secondary and tertiary colors which are also known as hues.

The color circle was created in 1666 by Isaac Newton in a schematic way and since then it has gone through many transformations but still remains the main tool for color combination. The idea is that the color wheel must be made that way so colors would be mixed appropriately.

Color Types

Primary colors

They are three pigment colors that cannot be formed by any combination of other colors. The primary colors serve as the basis of a whole system. The primary colors vary depending on the type of color system. A subtractive system is based on cyan, magenta, and yellow, while red, green, and blue colors form the additive system. And the painting system RYB includes red, yellow, and blue.

Secondary colors

These colors appear by the combination of two primary colors. Since each system has different basic colors, the secondary colors vary too. Here is a schematic explanation of secondary colors appearing in each system.

RGB:

• green+red=yellow
• red+blue=magenta
• blue+green=cyan

CMYK:

• yellow +magenta=red
• magenta+cyan=blue
• cyan+yellow=green

RYB:

• yellow+red=orange
• red+blue=purple
• blue+yellow= green

Tertiary colors

The mix of the primary and secondary colors gives us the tertiary colors which usually have two-word names such as red-violet or yellow-orange.

Cool, warm and neutral colors

All the colors we described above can also be divided into three types: cool, warm and neutral.

Cool colors are the ones on the green-blue side of the color wheel. They are called cool since they bring the feeling of cold. Warm colors are opposite to the previous due to the warm associations which they possess. Yellow, orange, and red are the hues relating to the warm type. Last but not least, neutral colors are absent on the color wheel including gray, brown and beige.

Health Blog using a warm palette

Color Systems

RGB

RGB color system considers red, blue, and green as primary colors. The system is the basis of all colors used on the screen. The combination of primary colors in equal proportions of this system produces secondary colors which are cyan, magenta and yellow, but you need to remember that the more light you add, the brighter and lighter the color becomes. Results obtained by mixing additive colors are often counterintuitive for people accustomed to the subtractive color system of paints, dyes, inks and other tangible objects.

RYB

RYB (red, yellow, blue) is also known as a painting color system often used in art education, especially in painting. It served as a foundation for the modern scientific color theory which determined that cyan, magenta, and yellow are the most effective set of three colors to combine. This is how the color model CMY has been formed.

CMYK

The system CMY has been modified with the appearance of the photomechanical printing. It received the key component meaning black ink and the system was named CMYK (cyan, magenta, yellow, and black). Without this additional pigment, the shade closest to black would be muddy brown. Today this color system is mostly used in the printed design.

Source

Color schemes

The color balance is vital in design since users make their impression of the website or application by the first look, and colors have a big influence. Designers distinguished the basic color schemes, aka color harmony, which works effectively.

Monochromatic

It is based on one color with various tones and shades of it. The monochromatic harmony is always a winning choice since it’s hard to make a mistake and create a distasteful color scheme.

Deetu Business Cards

Analogous

To create analogous harmony, you need to use colors located right next to each other on the color wheel. This type of color scheme is used for the design where no contrast is needed including the background of web pages or banners.

Binned Logo Animation

Complementary

The complementary scheme is the mix of colors placed in front of each other on the color wheel. This scheme is the opposite of analogous and monochromatic since it aims to produce high contrast. For example, the orange button on the blue background is hard to miss in any interface.

Home Budget Dashboard

Split-Complementary

This scheme works similar to the previous one but it employs more colors. For instance, if you choose the blue color you need to take two others which are adjacent to its opposite color meaning yellow and red. The contrast here is less sharp than in complementary scheme but it allows using more colors.

Financial Service Website

Triadic

When the design requires more colors you can try a triadic scheme. It is based on three separate colors that are equidistant on the color wheel. To save the balance in this scheme, it is recommended to use one color as a dominant, the other as accents.

Dating App Landing Page

Tetradic/Double-Complementary

The tetradic color scheme is for experienced designers since it is the most difficult to balance. It employs four colors from the wheel which are complementary pairs. If you connect the points on the chosen colors they form the rectangle. The scheme is hard to harmonize but if you do everything right, the results may be stunning.

Business Card App

Let’s sum up with the prosaic quote by RyPaul: “The whole point is to live life and be – to use all the colors in the crayon box.” Learn how to use colors effectively both in your life and work and the results will please you.

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 published in Tubik Blog

Сообщение Design Glossary: Basic Color Terminology появились сначала на Design4Users.

Navigation Design: Menu for PassFold app

Navigation

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

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

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

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

Menu

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

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

Blog App

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

Moneywise App

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

CTA

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

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

Contact List Concept

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

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

Landing on Seafood Cooking

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

Bar

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

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

Tab Bar Interactions

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

Timeline App

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

Juicy Player

Button

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

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

404 Page

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

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

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

Ice Website

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

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

Button Animation

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

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

Switch

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

Switch for Toonie Alarm

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

Picker

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

Time Picker for Toonie Alarm

Checkbox

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

To-Do App

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

Today’s set of our glossary is ready for those who need it and we are going to continue this practice before long. Don’t miss the new sets – the next one will continue the issues of navigation with deeper insights into types of menus and buttons, tags, breadcrumbs, and icons. New definitions are coming soon!

Recommended reading

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

iOS Human Interface Guidelines

Navigation patterns for ten common types of websites

3 essential rules for effective navigation design

Perfecting navigation for the mobile web

Understanding Web UI Elements & Principles

User Interface Elements

The Most Creative Mobile Navigation Patterns

Basic Patterns for Mobile Navigation

Originally written for Tubik Blog

Сообщение UX Design Glossary: Interface Navigation появились сначала на Design4Users.

Today continuing the stream we are going to provide some new entries to our glossary, this time concentrated more on web design elements and techniques.

Web Design

Web Design is a term defining design field featuring all the activities connected with the creation and maintenance of websites and pages both as pieces of practical interaction and the product with certain aesthetic qualities. The web design process includes the full cycle of production path from the initial idea sketched roughly in pencil to elaborate visual performance, information architecture, and updating design in the process of actual website use.

Web design as a term can also name the result of the mentioned activity direction, which means that this word is used to describe the structure, functionality, style, and appearance features of a website or a webpage interface. In addition, web design also can include content generation and management.

So, it’s easy to see that the term itself is very broad and comprehensive. Due to this fact, web design as a domain of human activity lies at the crossroads of many sciences and practices. Among them we should mention:

• drawing and composition
• painting and color theory
• logic and schematism
• analysis and statistics
• visual arts
• programming
• user research
• psychology
• copywriting
• branding and marketing, etc.

Covering diverse aspects of a website’s functionality and appearance, some designers work in teams every member of which specializes in a particular sphere while the others can work out different of the mentioned aspects individually. Anyway, in the vast majority of cases, web design is the sphere of digital products which have to be functional and user-centered. As famous American designer Charles Eames said “Design is a plan for arranging elements in such a way as best to accomplish a particular purpose” and his words totally reflect the idea of modern web design.

The authors of the book “Research-Based Web Design & Usability Guidelines” mention: “To ensure the best possible outcome, designers should consider a full range of user-interface issues, and work to create a Web site that enables the best possible human performance.” Working over a website, designers have to concentrate on such aspects as:

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

Here are some examples of web design concepts created by Tubik designers.

Randomizer concept 

Björn 

BRMC Website 

Home Page

The home page is the most popular name for the main page of the website. It is called home as it usually provides a starting point with many further directions for the user, containing direct links to the most important areas of interaction with a website. In other words, it can be also named the initial page or index page. The home page is mostly the start of users’ journey if they are directed to the site by search engines.

In addition to essential links to different website parts, the home page often contains a search field, basic onboarding functionality for personalized sites, different areas of navigations showing users diverse categories of data. It might also contain engaging welcome messages and copy blocks featuring a slogan and/or explaining the benefits of the website or objects it presents.

More than a decade ago famous expert in usability Jakob Nielsen wrote Top 10 Guidelines for Homepage Usability in which he said: “Homepages are the most valuable real estate in the world. Each year, companies and individuals funnel millions of dollars through a space that’s not even a square foot in size. For good reason. A homepage’s impact on a company’s bottom line is far greater than simple measures of e-commerce revenues: The homepage is your company’s face to the world. Increasingly, potential customers will look at your company’s online presence before doing business with you — regardless of whether they plan to close the actual sale online.” A long time has passed since then but a clear and user-friendly home page is still an issue of vital importance for an efficient website.

Home page is actually the basis of good navigation which is usually the core of a positive user experience. A messy interface and badly designed layout can become the reason for user confusion and annoyance.

Here are some examples of home pages created by Tubik designers.

Comics Shop Home Page 

Ice 

Landing Page

Recently we published an article devoted to the functionality and efficiency of landing pages. Let’s remember key points here.

Landing page in its basic wide meaning is the term used for analytics to describe any page where the user started his or her journey around your site, in other words, where a user lands on the website. However, today the other, more specific meaning is used much more often to define a landing page. Behind this term, people understand the special web page created for the presentation of the specific product, service, features, or options so that the visitor could get necessary information quickly and easily not being distracted. That is why the analysts say a landing page is in most cases of marketing and the presentation of a particular product or service is much more efficient than the home page. Home page can have too many options and getting through all of them to find the particular product the user can get distracted from making the decision, lose interest or even get annoyed.

Why is the landing page needed? As we mentioned in the case study about designing a landing page, it is easy to answer this question with a little metaphor. Imagine, you are going to visit, let’s say, New York, to walk around Manhattan. That is the dream of your life. Finally, you find the service which offers to take you to New York City fast and cheap. Great, isn’t it? You pack your bag, you charge your camera, you get up full of admiration as the dream of your life is going to get real. And then you are taken by those amazing people who offered you the realization of your dream to the entrance point of New York City. They leave you there to find Manhattan or any other place you want by yourself. How do you like it now? Who knows, perhaps you will be not so happy after an exhausting journey around the huge city looking for the place you want. Wouldn’t it feel great to be taken right to the destination, fresh and ready to admire and absorb positive emotions? Wouldn’t you as a customer be happier to reach your goal faster and easier? Sure, yes.

That is actually what a landing page does. When a person obtains the information from the outer source about the specific product, feature, information, or service and clicks through the link to its provider, sure, he or she doesn’t dream to spend a lot of time looking for desired product or page among all the links and information provided on your homepage. The user wants to «land» directly at that very place which will make it possible for him or her to get what they want as fast as possible and getting enough (but not too much) information to support their decision-making process. So, creating a well-thought-out landing page is really vital to strengthen marketing strategy and increase conversion rates.

In general, typical landing pages often have:

1) General idea of the presented object (product, service, activity, etc.) with the call-to-action element. Users need to be provided with a basic description of the benefits, preferably not too detailed but concise and useful. The aim of this element is to inform the user and provide a clear and noticeable opportunity to actively use this information via a call-to-action element which can be presented with a button, link, contact form, subscription field, etc.

2) Testimonials and signs of trust. People usually tend to trust more to what is already used or tried by other people and recommended as worth attention. Therefore, testimonials from clients, considerable numbers of followers in social networks, awards, and certificates can have a great impact on the conversion rate.

3) Description of the main features. This block of information can be used as additional information supporting a description of basic functionality. It supplies a visitor with more details about the product or service, its abilities and technical characteristics, its influence on life and productivity, and the like. It certainly makes the landing page longer and requires more attention from users so applying this block should be always thoroughly analyzed.

Here are some examples of landing pages created by Tubik designers.

Landing Page Animation 

Arts, Culture & Education Curation | Landing

magic.co landing page concept

Read more and review the examples on this topic in our previous article

Responsive Design

The necessity of responsive design is based on the audience you want to cover for your website. Would you like your users to use your site from any device and feel it positive, useful, and convenient anyway? Sure, every customer would be aware of the growing popularity of mobile devices. And in this case, we should say confidently: you obviously need responsive web design for the website.

The idea behind responsive web design (RWD) is that the content and layout of a website should efficiently adapt according to the sizes and technical abilities of a device it is opened at. For most users, these changes are so subtle that it is easy to say “ Hey, guys, this is the same site on my smartphone which I looked through yesterday at my desktop. Nothing special has changed here!” And somehow these words can be the great praise of designer’s work. That will mean that the designer managed to keep all the meaningful elements and general layout of the desktop version efficiently and at the same time avoid making the page or layout elements too small, hardly seen, or impossible to distinguish even on the much smaller screen of a mobile device. That is RWD in action.

Nowadays making the site non-mobile-friendly means losing the part of the audience that likes surfing and using the internet sources “on the go”. It’s vital to consider that this part of the audience is mainly the most active part, non-afraid of technologies, fast in browsing necessary information and options, easy-going in making internet purchases, and try new products. That’s why neglecting the idea of RWD can bring real loss to the product which otherwise could be highly efficient and bring high conversion rates.

In the book “Responsive Web Design” experienced designer Ethan Marcotte says: “…web design is about asking the right questions. And really, that’s what responsive web design is: a possible solution, a way to more fully design for the web’s inherent flexibility. In the first chapter, I said that the ingredients for a responsive design were a fluid grid, flexible images, and media queries. But really, they’re just the vocabulary we’ll use to articulate answers to the problems our users face, a framework for ordering content in an ever-increasing number of devices and browsers. If we’re willing to research the needs of our users and apply those ingredients carefully, then responsive web design is a powerful approach indeed.”

Creating responsive web-design for a web-product means making it pleasant-looking, clear, and functional in different sizing with optimal navigation that provides a high level of usability. This technique relieves an owner from the necessity to develop several versions of the site as it provides one site with fast adaptation to different technical conditions, so RWD is also generally cheaper than creating several versions of the site. Responsive web design makes the site flexible, easy to manage, and nice to use. Moreover, you don’t need to publish your content several times for different versions and it saves your time or human resources. If these are the features you want your product to obtain, then consider responsive web design for your product from the earliest stages of its design and development. In addition, you will get higher positions in the Google search engine as it supports the idea of RWD, so that is an important part of the general search optimization of your product. Therefore, it’s up to you whether to apply RWD for your web-product or not, but consider all benefits before making your decision.

Read about this topic in our previous article

Header

In terms of web layout elements, the header is the upper (top) part of the web page. It is a significant and strategic part of the page as it is what people see before scrolling the page in the first seconds of introduction to your website. Therefore, the header should be informative and provide the most important information about the digital product so that users could scan it in split seconds. Header is also the area providing a broad field for creative design solutions which should be catchy, concise, and useful. Headers are often referred to as “Site Menus” and positioned as a key element of navigation in website layout.

Headers can include:

• basic elements of brand identity: logo, brand name lettering, slogan or company statement, corporate mascot, photo presenting the company or its leader, corporate colors, etc.
• copy block setting the theme of the product or service presented
• links to basic categories of website content
• links to the most important social networks
• basic contact information (telephone number, e-mail, etc.)
• switcher of the languages in case of multi-lingual interface
• search field
• subscription field
• links to interaction with the product such as trial version, downloading from the AppStore, etc.

Certainly, the list above doesn’t mean that all the mentioned elements should be included in one webpage header – in this case, the header section would be overloaded with information. On the basis of design tasks, designers, sometimes together with marketing specialists, decide on the strategically important options and pick them up from the list or add the others.

The choice of typefaces for headers and the background color should get under highly rigorous research and testing as the aspect of readability in the header plays a vital role. The user has to be able to scan and perceive this basic information as fast as possible without any sort of additional effort. Otherwise, you risk providing a non-user-friendly interface.

Daily Bugle Online Magazine 

The design concept for a news website presented above features the header including the title of the website as a central element of the composition, two active links to basic categories of publications, a link to live mode, and a search field marked with a magnifier icon.

One more thing to remember is that there are different ways for a header to transform in the process of scrolling the page down. Some websites use a fixed header, which always stays visible and active at any point of interaction with the website; others hide the header in the process of scrolling. There are also websites that do not fully hide the header but shrink it in size in the process of scrolling, which means that they hide secondary information and leave only the most important elements of the layout active and available during all the process of interaction.

Another design solution that is quite popular in the perspective of header functionality is hiding basic links of data categories behind the hamburger button. It is called so as its form consisting of three horizontal lines looks like a typical bread-meat-bread hamburger.

Hamburger button 

This button is usually placed in the header and nowadays it is a typical element of interaction. Most users who visit and use websites on the regular basis know that this button hides the core categories of data so this trick does not need additional explanations and prompts. Hamburger menus free the space making the interface more minimalistic and full of air as well as allow massive saving place for other important layout elements. This design technique also provides additional benefits for responsive and adaptive design hiding navigation elements and making the interface look harmonic on different devices.

Although hamburger menus still belong to highly debatable issues of modern web and app design, they are still widely used as header elements. The arguments against the hamburger menu are based upon the fact that this design element can be confusing for people who do not use websites regularly and can get misled by the sign which features a high level of abstraction. So the decision about applying hamburger button should be made after user research and definition of target audience’s abilities and needs.

Structure – Architecture Blog 

The presented design concept of a website has a fixed header that doesn’t hide while the page is scrolled. However, it follows minimalistic principles featuring brand name lettering as a center of the composition, magnifier icon marking search functionality, and hamburger button hiding links to navigation areas.

In one of the articles devoted to practices of header design, its author Bogdan Sandu mentions an important point that should be kept in mind:

People judge the quality of a website in just a few seconds and the second impression is something absent on the Internet. In conclusion, a website must be eye-catching else, it would be nothing more than a big failure.

Header can become a great help in presenting the essential data to the user quickly and providing a positive user experience via clear navigation. However, that doesn’t mean that every website needs a header. There are many creative solutions providing designs applying typical header functionality in other zones of the layout. Every case of website design needs analysis and research of the target audience for the product or service.

Footer

According to everything mentioned above, it’s easy to understand that the footer is the lower (bottom) part of the webpage. Footer usually becomes a marker of the end of a webpage. Also, being one more zone of global website navigation, in most cases, the footer provides an additional field for useful links and data.

Footer can include:

• name and logo of the company or product
• links to user support sections, for example, FAQ page, About page, Privacy Policy, Terms and Conditions etc.
• credits to website creators
• contact info and forms
• links to company or product accounts in social networks
• testimonials and badges
• certification signs
• subscription field, etc.

As well as the header, the footer is not the element found in 100% of websites. For instance, with some design tasks when designers apply infinite scrolling techniques, the traditional footer is not an effective navigation zone. However, in the case of infinite scrolling, the idea of a fixed footer can be also applicable and support navigation not losing this area. It should be said that for most users footer is a common place of looking for contact information, credits, and sitemaps, so playing on this habit can be beneficial and a fixed footer can become a good way in the case when the page has a long scrolling area. The decision on using a footer is always based on the idea of effective usability. Anyway, if the footer is applied it should get in harmonic combination with all the other design solutions of the website layout and support general stylistic concept.

In the review of effective footer designs, Nathan Leigh Davis and the Creative Bloq team emphasize: “Designing a great footer is not about finding the best way to layout a lot of unrelated content, but the ability to prioritize and disregard unnecessary or superfluous information.” First of all, the footer should provide information support and in this way strengthen the chances of positive user experience.”

The new set of our design glossary is ready for those who need it and we are going to continue this practice before long. Don’t miss the new sets in which we are going to tell more about the types and functions of buttons, menus, and other interactive elements of user interfaces. New definitions are coming soon!

Useful Design Articles

UX Writing: Handy Tips on Text Improving User Experience

How to Design Effective Search

Web Design: 16 Basic Types of Web Pages

3C of Interface Design: Color, Contrast, Content

Negative Space in Design: Practices and Tips

User Experience: How to Improve Web Scannability

Hero Images in Web Design: When, Why and How

Color Scheme for Interface: Light or Dark UI?

Originally written for Tubik Blog

Сообщение UI/UX Glossary. Web Design Terminology появились сначала на Design4Users.