CEntdik

hybridtek

UT3.pdf

Home >Computer Science homework help >CEntdik

103 © Westley Knight 2019 W. Knight, UX for Developers, https://doi.org/10.1007/978-1-4842-4227-8_8

CHAPTER 8

The Importance of Visual Design If we cast our minds back to the very first chapter of this book, we took a look at the

many disciplines that intersect to form part of what we know as User Experience Design.

Although visual design is just one part of the larger whole, we should not underestimate

its importance to the collective user experience. In this chapter we want to provide a

better understanding of visual design, the psychology that underpins the visual design

decisions that can be taken, and how accurately representing these design choices in the

interfaces you build has a beneficial impact to the user experience.

Visual design is an instrument we use to communicate with the vast majority

of people through a digital medium. The use of color, layout, spacing, illustrations,

photography, icons, and typography forms the palette from which we can create the

visual interfaces through which our users will engage with our products.

In a study carried out at Northumbria University, a number of online health sites

were analyzed on how the content and design factors influenced the trust of the user. Of

the feedback received from the participants, 94% was about the visual design, with only

6% regarding the content. The visual appeal and navigation methods had, by far, the

biggest influence on the user’s first impression of the site.

Another set of studies carried out by Dr. Gitte Lingaard at Carleton University looked

to ascertain how quickly people form an opinion about the visual appeal of a web page

based on colors, layout, perception of simplicity or complexity, how interesting or boring

they found it, and whether they perceived it as good or bad design. The first two studies

rated people’s opinions after being presented with a website home page for 500 ms at

a time. The third study did the same, but for only 50 ms. Throughout the three studies,

the visual appeal ratings were highly correlated, meaning that visual appeal can be

assessed by a user within 50 ms. This is a very small timeframe in which we must give

Knight, Westley. UX for Developers : How to Integrate User-Centered Design Principles into Your Day-To-Day Development Work, Apress L. P., 2018. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/snhu-ebooks/detail.action?docID=5611444. Created from snhu-ebooks on 2022-03-01 16:47:06.

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

104

a good first impression to our users. The effects of this first impression cause a halo

effect, or a cognitive confirmation bias where users then unwittingly search for evidence

that confirms their initial reaction, while ignoring evidence to the contrary. Lingaard

commented, “Even if a website is highly usable and provides very useful information

presented in a logical arrangement, this may fail to impress a user whose first impression

of the site was negative.”

Both of these studies show us that a good implementation of visual design on a

website can have a huge positive impact on the experience of the user. But isn’t this the

realm of the designer? Isn’t it their job to create a compelling visual design so that our

users become engaged with our product and develop trust with it by association?

Why Should Visual Design Matter to a Developer? Just as the choices you make as to how you code a digital product can have an effect on

the resulting user experience, the attention to detail when building a user interface from

a visual design created by a designer can have the same impact. The ability to convert

a functional specification into a working digital product does not alone make you a

good developer. What makes a good developer is a more rounded set of skills, a larger

understanding of the product you are building from more than your own perspective,

and the ability to convert the intentions of the designers and the rest of the team into

something that real people engage with. Figure 8-1 shows a comparison between the

visual design provided by the designer and an implementation of that design in the

browser. Although both images are very similar and contain the same elements, there are

a number of discrepancies in the layout on the right that could induce negative reactions

from the user when they see it for the first time, creating their perception of it being a

“bad design.”

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

105

If a user were to see the example on the right without prior knowledge of the original

design on the left, as would happen in the real world, they would still be able to form a

somewhat negative opinion of this layout. We will look more in depth at the principles

behind visual communication and human perception, which will give us a greater

understanding of why this kind of response occurs in our users, and how understanding

these principles will help you to value the details in visual design that a designer does.

We should be sure to remember that the developer is the final piece in the puzzle

when building digital products; the work they do brings the whole product to life. Just

like a puzzle piece, if they aren’t the right shape for their team, they don’t fit in well

enough to deliver that complete picture. By learning more about the other disciplines

required to build a product, the developer can become a more valuable member of the

team and be able to successfully deliver the intentions of the team as a whole.

Achieving this does not require a full understanding of every aspect of design. Just as

a designer can learn some of the fundamentals of code and what is technically possible

in terms of layout – without becoming a fully fledged front-end developer – you can

utilize the fundamentals of design knowledge to close the divide between developers

and designers. First, we should look to understand some of the psychology that

underpins how we perceive visual stimuli, and how we can utilize this to deliver better

visual interfaces for our users.

Figure 8-1. An example of visual designer proved by the designer on the left in comparison with an implemented version of the design by a developer on the right

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

106

Understanding Visual Communication with Gestalt Laws of Perceptual Organization

The whole is other than the sum of the parts.

—Kurt Koffka

The Gestalt Principles are the consummation of work carried out in the 1920s by

German psychologists Max Wertheimer, Kurt Koffka, and Wolfgang Kohler. Their work

was focused on understanding how the human brain creates meaning through the

perception of the chaotic stimuli that surrounds us: how the brain creates order from the

huge variety of visual stimulus it receives.

The Law of Similarity Elements that share superficial characteristics tend to be organized into groups,

especially when seen within the context of a screen. Figure 8-2 below serves as an

example of how a group forming bias unconsciously organizes the elements on display

into a more meaningful associative context.

Figure 8-2. A collection of simple geometric shapes that are grouped by our perception

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

107

We are able to draw on the Law of Similarity in our visual designs by utilizing

the similarity of shape, size, color, and orientation in the elements of an interface to

provide them with a perceived relationship. On top of this, we are able to juxtapose

certain elements within a perceived group of similar objects by creating an “anomaly”:

something that creates a focal point for a user to perceive as more important than the

other similar objects with which it is grouped. With this we can point a user to a piece of

important information or direct them to the action we want them to take next.

The Law of Proximity The effect that the visual proximity of a number of objects has in terms of our

perception of grouping them together is characterized under the Law of Proximity. If we

take a look at Figure 8-3, we can see an example that features a number of dots arranged

in different ways.

The Law of Proximity has an effect on our perception when we group two or more

separate elements closely together. It is slower for us to detect distinct groups, or to

determine which items belong to which group, when the proximity between objects is

reduced to such an extent that there is no discernible difference between the intended

groups to which the items belong. This can be found in websites and applications that

do not adhere to the Law of Proximity, and corrected by utilizing whitespace effectively

between elements that should and should not be associated.

Figure 8-3. A depiction of geometric objects grouped by our perception of proximity

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

108

The Law of Familiarity Have you ever looked up to the sky and seen a cloud that looked like an animal, a

face, or some another recognizable object? The law of familiarity is derived from the

unconscious process that our brain uses to form mental representations the should-

have use or relevance to us. Within the interfaces we create, we will build a number

of components that are not only familiar to us but also you, our users. Components

such as navigation, sidebars, carousels, content grids, and many more all have an air of

familiarity about them for our users.

By following a common pattern for a specific type of interaction, an image gallery

for example, the user will likely be familiar with how they should interact with this

component and will therefore feel comfortable using it. If, however, we were to

completely reinvent the functional and interactive elements of an image gallery, we would

create an incongruous experience for the user; there would be inconsistency between

their expectations from a more meaningful interface than an unfamiliar innovation.

The impact for developers and designers alike is that they should be mindful of

utilizing innovative new approaches to preexisting patterns, in favor of something that is

more familiar to the user.

The Law of Symmetry The biases of our perception look for simplicity and symmetry when we view most

objects, even though there are many different ways we can view complex forms. Our

brains tend to group visual elements together when they are recognized to be in a

symmetrical arrangement, and we will unconsciously focus on the center point so that

the brain can extract the simplest form.

In terms of visual design, symmetry is visually pleasing and allows us to focus

on what is important. With the law of symmetry, we are able to utilize a comparable

approach to that we outlined with the Law of Similarity; we are able to add juxtaposing,

asymmetrical elements to a page in order to bring the user’s focus to those areas.

Figure 8-4 depicts a high-level wireframe of different objects, with the thinner lines

showing the line of symmetry between the objects.

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

109

The Law of Continuity The ability for humans to perceive elements as a constant form in a particular direction,

despite other possible bisecting, interlinking, or obstructing objects, is what forms

the law of continuity. A common example used to illustrate this is shown in Figure 8-5

below.

Figure 8-4. A wireframe layout showcasing examples of symmetry

Figure 8-5. An example of our perception of continuity

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

110

On the left, we tend to perceive two bisecting lines, one going from A to D, the other

from B to C. On the right, we can see an alternate perspective by differentiating the lines

with visual styling, showing that one line runs from A to C, and the other from B to D.

This example illustrates how our own experiences of the world around us are heavily

biased by the way in which our brain looks to derive simplicity from the complex visual

input we receive.

We are able to apply this technique to visual interfaces to take advantage of the way

in which our brains process this kind of visual input. We can see this technique often

applied to a gallery of images, shown as a wireframe example in Figure 8-6 below.

The images at each end of the gallery are not shown in their entirety, being partially

obscured as they run off the edge of the screen. Our brains interpret these incomplete

images, based on the regular size and shape of the images that sit alongside them, as

existing as a whole but simply being out of view. This perception helps us to understand

that there is more to be seen and can prompt further interaction to view the obscured

images in full.

The Law of Common Fate The law of common fate is a Gestalt Principle that refers to the tendency for people to

group elements together that are perceived as moving in the same direction. An example

of this in nature would be a flock of migrating birds; although the flock is made up of a

Figure 8-6. A wireframe displaying the law of continuity for a gallery of images

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

111

large number of individual birds, they are perceived as a whole as they are traveling at

the same speed and in the same direction.

Applying the law of common fate in our interfaces gives the user the perception

that the objects moving together, or as a result of their interaction with certain elements

resulting in that movement, are related.

The accentuated areas in Figure 8-7 below depict a number of elements that may

utilize the law of common fate to good effect. The use of animation within a navigation

menu for child pages that appear in a drop-down menu consolidates the perception

that all of the drop-down below each item are all related. We can also see a similar effect

within an accordion style list; each option expanding with the interaction of the user to

show more detail.

The Law of Closure With the brain looking to make sense of the visual input in the most efficient way

possible, the law of closure describes the perceptual bias through which we are able to

create meaningful, whole objects, despite limited visual information. Figure 8-8 below

shows the World Wide Fund for Nature logo, which utilizes basic geometric shapes with

blank areas. Our brain is able to process the apparently missing information to perceive

a meaningful whole, which in this case is a panda bear.

Figure 8-7. A wireframe highlighting a drop-down menu and an accordion component

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

112

We often find the law of closure utilized in icon and logo design. We can take

advantage of the brain’s ability to understand meaning within a visual by implying the

existence of something by leaving blank areas that effectually create a meaningful whole

to the viewer. Figure 8-9 shows us some examples of icons that utilize the law of closure

to help the viewer to see the meaningful whole.

Figure 8-8. Logo of the World Wide Fund for Nature

Figure 8-9. Examples of icons that utilize closure from FontAwesome

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

113

By reducing complexity in our visual layouts and taking advantage of the human

brain’s natural abilities outlined in the Gestalt Principles, we can reduce cognitive

load, making it easier for the user to concentrate on the things we want them to, rather

than trying to untangle complex interfaces and having to make a real effort to try to

understand how to use what they see in front of them.

Working with Trends in Visual Design In the same manner that we should not pick up the latest JavaScript framework and just

start building the next feature or product with this new technology, we must be mindful

of new trends that can emerge on a constant basis in our industry.

As with any framework or new method of working, we must evaluate it on a number

of aspects. Will it be supported far into the future? How much technical debt will the shift

to a new approach create? Do the benefits outweigh the costs? Is there a big learning

curve for your team? All of these questions, and so many more, should be considered

when looking to adopt a new technology or approach to working.

The same is true for visual design. Many of these same questions that we aim at the

developers, the product team, and the business – to determine whether or not a new

technology should be utilized – can be reframed to ask similar questions on behalf of our

users in terms of the trends we may be tempted to follow and the visual language we use

to communicate with them.

Over the years we have seen large shifts in the directions taken with the aesthetics

of digital interfaces. One of the more well-known examples of this kind of shift was in

2013 when Apple unveiled their new look operating system for the iPhone. The move

from iOS6 to iOS7 sparked huge debate in the design community by moving from a

skeuomorphic visual design to a “flat” aesthetic as show in Figure 8-10 below.

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

114

In 2014, Google reinforced this change in digital visual design with the release of

Material Design, their card-based design system with responsive animations, transitions,

and the addition of depth to an otherwise flat aesthetic, without attempting to relate the

visuals back to the real world like the skeuomorphic approach.

Although two of the most dominant companies in the mobile digital arena moved

toward this preferred application of visual design, it was not without its issues when

applied to the wider audience of the World Wide Web. As the trend took hold, many

brands looked to embrace this new aesthetic, copying from the industry leaders, without

necessarily following best practices in order to help their users. Prior to this visual

shift, people have become accustomed to the way in which interactive elements were

presented to them; links would predominantly be blue and underlined, and buttons

Figure 8-10. A comparison of home screens between iOS6 and iOS7

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

115

would look more like real-world buttons. By immediately removing these familiar

elements in pursuit of a new visual direction, this has huge implications for your users,

and as a result will reflect on the business.

The Gestalt Principles we have walked through still stand when it comes to

the interfaces you build with the latest and greatest ways of approaching your

implementation. Regardless of how important a designer may see this shift to keep up with

modern trends, it pales into insignificance when compared to the real needs of the user.

Design Principles for Usability In order to successfully navigate the constant ebb and flow of visual design trends

across the web and native platforms, we can utilize Don Norman’s design principles for

usability. In his book The Design of Everyday Things (Basic Books, 1988), Don introduced

some basic interface design principles that can help us to negotiate the ever-changing

visual landscape of digital interfaces across varying platforms.

Consistency Consistency for the user – not just within your product, but in keeping with the rest of

the World Wide Web and native platforms – is key to effectively communicating with the

user. By utilizing similar elements that have similar operations to those found elsewhere

across digital products, your user can recognize and recall how to interact with these

patterns, reducing their cognitive load and making it easier for the user to complete their

tasks within your product.

Consistency within your own application or website, whether that is through the

visual brand, interface patterns, or preferably a combination of both, is key to building

trust with your users. Inconsistency causes confusion, especially when two different

elements are presented in the same visual manner do not behave in the same way

from a user’s interaction. This results in the user having to apply more effort to learn

the exceptions to the rules, creating a greater cognitive load, which causes a negative

emotional response from the user.

Being consistent in a way that avoids the user having to work harder to understand

how to use your interface fosters a sense of trustworthiness and avoids alienating your

users.

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

116

Visibility Simply put, this is making sure that all of the ways that a user can interact with an

interface can be discovered visually by the user. The controls that are available to the

user should be clear and obvious, again reducing the amount of work the user has to

do to understand how to interact with what is presented to them. By hiding controls, or

placing them in expected areas, this decreases usability and makes it harder for the user

to learn how to interact with the interface.

At the other end of the scale, we should be mindful as to not include all of the

possible interactions with a product on a single screen. Doing so can simply cause

cognitive overload and result in the user experience choice paralysis: the inability for the

user to select the option they require in a vast array of choices.

Affordance Affordance is the name given to the visual characteristics of an element that provide the

user with clues as to how to interact with that element. A common example of this in a

digital interface would be that of a button.

For example, if the function of the button is to submit a form, the aesthetics of the

button must provide a visual clue to the user that they are able to click or tap it in order

to submit their form. This can be done visually by making the digital button look like a

real-world button by using a three-dimensional look, or by creating an obvious visual

difference to all other elements in the same interface so that the user understands that

the button will act as the user expects.

Another example of this is the humble hyperlink. In any text viewed on any website,

if we were to see a few words highlighted in blue with an underline of the same color, the

user immediately recognizes this pattern and understands what will happen when they

interact with it.

Feedback By providing the user with feedback following an interaction with an element on the

screen, this provides the user with confirmation that their intended action has been

carried out, whether done successfully or unsuccessfully. But if we were to leave the user

in a state of limbo, by not providing a confirmation of their action, even if the intended

action did indeed happen, the user is left without any knowledge as to the success or

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

117

failure of their action. Without feedback, we can easily foster a sense of mistrust, simply

because we are not informing the user when something happens in relation to their

interactions.

Mapping Using visual cues as to what will happen when a user interacts with a given element in

a digital interface helps the user to understand what effect that interaction will have.

By creating a relationship between an interactive element and the effect it will have, we

create a mapping that the user can interpret from an explicit visual prompt. In digital

interfaces, this can be done by utilizing known conventions form the real world, such

as a button being given a three-dimensional look as we mentioned when talking about

affordance. Alternatively, these can be general conventions in digital interfaces, such as

accordions that expand and contract to show more or less information as the user selects

an option from a list, or perhaps that clicking the logo on a website will take you to the

home page.

Constraints Finally, constraints can be used to help the user avoid making mistakes within an

interface. We can help prevent invalid data being entered into a form, and prevent

invalid actions being performed. An example of this would be to disable or remove

inputs in a form that are not required for the user to continue their task, or to prevent a

user landing halfway through a multistep process without providing the required data in

previous steps.

These five principles help us to form a basic understanding of what makes a digital

product more usable and provide a platform on which we can build modern solutions to

make the lives of our users easier, as well as those of our developers.

How Design Patterns Benefit Developers Design patterns help us to be more efficient in delivering screen designs and

functionality. With a set of shared, predefined patterns to build our interfaces, we rarely

have to build anything from scratch, improving the efficiency in building out larger

interfaces comprising of several components from a pattern library or larger design

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

118

system. When we are required to create a pattern or component that does not yet exist in

our library, we are able to spend our time more effectively in creating a component that

will integrate and work alongside all of the preexisting components in our library.

A shared pattern library, complete with code snippets, enables the developers and

designers across an organization, to utilize each other’s components and patterns,

reducing the amount of duplicate work, especially when the same component can be

coded in a large variety of ways, using any number of different approaches to structure

and syntax.

By utilizing the design system as a repository of coding standards for existing

components, we can improve the quality of code that all developers deliver throughout

an organization, regardless of internal team structures or physical location. There is an

inherent consistency that arises from utilizing a shared pattern library that enhances the

readability of code, simplifies the development process, and creates a more robust code

base through the ongoing improvement to components as they evolve over time to meet

the demands required of them.

As design patterns obviously help both designers and developers in quite a variety of

ways, what benefits do they give to the user?

How Design Patterns Benefit Our Users The patterns that we create within a design system for our product aim to follow the

five principles of designing for usability that we walked through earlier in the chapter:

consistency, visibility, affordance, feedback, and constraints. When combined with

the human psychology-based Gestalt Principles, we take advantage of the way human

beings are predisposed to process visual stimuli, and we reduce the cognitive load

required for a user to navigate our products, complete their tasks, and reach their goals.

By utilizing common interface visual design and functionality, we reduce the need

for our user to spend energy thinking about how they should interact with a given

component, and what their expectations are in terms of the functions they provide. Let’s

take a look at some examples of common patterns we may find across the web.

Pagination is a common component utilized across many different types of websites

and can be commonly found in search engines, forums, and retail websites. The

examples in Figure 8-11 below show how the same pattern can be visually different, but

that there are enough similarities for us to recognize this pattern and how we except it to

function.

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

119

All of the derivatives of the same pattern share common elements. They all display

numbers to represent the pages through which the user can navigate and include a next

button to navigate to the next set of content. Amazon and Stack Overflow also include

an ellipsis within the list of pages to represent the multiple pages in between the first few

on display, and then jump to the final page number to provide the user with the total

number of pages available to them. All of them highlight the current page that the user is

on and remove the link from that option so that the user cannot click the link to the page

they are already on, which could lead to confusion for the user by landing on the same

page they were just on.

Another example of a pattern utilized across the web and in applications is the

carousel. Figure 8-12 below shows us the carousels that can be found in iTunes, on the

Netflix website, and on Amazon’s home page.

Figure 8-11. A collection of pagination patterns from Google, Amazon, and Stack Overflow

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

120

All of these examples show a clear set of navigation arrows to the left and right of the

content on display, providing the user with a means to manually traverse the content.

The carousels on iTunes and Amazon are animated and will move from right to left to

show the user that there is more content beyond that which they are currently viewing.

Both iTunes and Netflix show partial pieces of content that overrun the edges of the

screen, utilizing the Gestalt Law on continuation to inform the user that there is more

content, without having to automate the scroll from one are to the next, although iTunes

employs both of these mechanics.

Although these examples are different both visually and in some aspects of

functionality, the common underlying pattern means that the user is immediately

familiar with how to interact with these components, and what they expect to happen as

a result.

Figure 8-12. A collection of carousel patterns from iTunes, Netflix, and Amazon

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

121

Using Animation Another aspect of visual design comes in the form of motion. Often overlooked as a

significant part of visual design on the web, and as a possible positive influence on the

user experience, animation in user interfaces can provide direction to the user, reduce

their cognitive load, communicate changes in status, and deliver useful contextual

feedback. In order for animation within a user interface to be able to achieve this, they

must be functional and meaningful, not frivolous and impractical. They must provide

useful information; they must feel like a response to the actions of the user; and if

they do both of these well, they can trigger an emotional response, creating a deeper

engagement from the user.

In order for animation to contribute successfully to the improvement of a user

experience, it must be considered early in the software development life cycle; it cannot

be an afterthought. Developers can provide a guiding hand to the designers on the art

of the possible when it comes to implementing animations in the user interfaces when

they become involved with the design process. The developer’s level of knowledge of

the possibilities of animation when utilizing CSS and JavaScript, or the frameworks

their applications are built upon, can determine the level and variety of animations

that are possible to achieve. Designers should be considering the animations of their

components, transitions between screens, and visual feedback from interactions

before a pixel is placed on a digital canvas, so they must engage with the developers to

understand what their technological constraints are.

Just as a designer should consider animation to be an integral part of the user

experience, developers should also see it as an integral part of writing code. It is no

longer a nice-to-have addition to your core product, neither is it only an aesthetic

element. The traditional focus of the developer to deliver functionality that enables the

user to complete their task is no longer enough on its own as static interfaces are now

largely a thing of the past. A digital product released today that lacks this functional

animation will immediately look and feel dated.

When animation is considered by designers – with the guidance of developers – in

the early design phases as an integral part of the product, we find that the animations

themselves are used to convey meaning; they serve a purpose. Any interface that has

been completed in terms of visual design without any consideration for the purpose of

animations can end up applying them as the metaphorical icing on the cake, merely as a

decorative effect. These kinds of animations are ultimately unnecessary and can impede

the user rather than enhance their experience.

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

122

The reason animations should be considered before any digital interface designs

are created is because they should serve a purpose. Unlike the “icing on the cake”

animations mentioned above, functional animations benefit the user and help our users

to process the visual information more efficiently. Let’s take a look at the five roles that

animation serves in our user interfaces.

Affordance As we have discussed earlier in this chapter, affordance in digital interfaces helps the

user to understand what they can interact with on a screen, how to interact with it,

and, in some part, the expected outcome of that interaction. Animation can be utilized

to further accentuate the affordance of a digital element in view of the user. Referring

back to our carousel examples in Figure 8-12, we mentioned how both iTunes and

Amazon use animation to move between items of content within a confined space. This

animation highlights to the user that there is more content beyond what they initially see

and enhances the affordance of the navigation buttons.

This is exemplified by the Netflix interface. In Figure 8-13 below, we can see the

beginning state of the interface for the web-based version of the Netflix app. As the user

hovers over a title, it expands into a large area of content shown in the central image,

layering text and interactive icons over the top. This interaction, which occurs without

the user making the decision to click on it, informs the user that this element can be

interacted with further, and in different ways with the visual cues provided by the icons

show in context with that title.

Figure 8-13. An example of the different states of the Netflix web-based interface, with the initial state shown on the left and the hover state on the right

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

123

Focus Although we can utilize animations to draw the focus of the user to a specific element on

the screen, we must be careful of our implementation. Animation used at the wrong time

or in the wrong place can distract the user from their task at hand. If they are reading

through an article, a sudden animation of a new element in to view can distract the user,

creating a negative emotional response.

When used correctly, in the use of a notification following specific user-initiated

actions, for example, it can be a vehicle for providing reassurance to the user, as we only

require their attention to be drawn to a message at that time, for a small duration, and

for a specific and relevant reason. Another example, albeit a little more of a gimmick, is

the animation that moves an icon from the “Add to cart” button up to the shopping cart

when a user adds an item to their cart. It provides visual reinforcement that the item they

have selected has been added to their cart.

Feedback Just as in the example above where we mentioned notifications that can draws the

user’s attention to them in the right situation, this is also an example of how we can

provide feedback to the user. For example, a user may have amended a setting in their

preferences, under their account settings in your product. We can provide a confirmation

notification that the action has been carried out behind the scenes or return an error

if there has been a problem. We can also provide more immediate feedback with

approaches like inline validation on forms, highlighting form fields where the users’

input does not match the required criteria of required data such as email addresses or

passwords.

Figure 8-14 shows the feedback provided by the Dropbox website when uploading

a file. The feedback in the form of a progress bar is displayed during the upload in the

image on the left, while the image on the right shows the change of the notification to a

confirmation once the upload has been completed.

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

124

Orientation Animation between states and pages is becoming more and more common and is now

almost expected, especially with touch interfaces on mobile devices. Animations that

aid orientation for the user are often a visual representation of the hierarchy of the

information architecture of a product. It is common to see horizontal sliding transitions

when switching between options in a mobile navigation bar that sits at the bottom of the

screen, and as you move from one option to the next, the content area also transitions to

mimic the same movement the user has made between sections. For example, In Apple’s

iOS 12 for their range of mobile devices, specifically on iPhone X shown in Figure 8-15,

the user can swipe up from the bottom of the screen to reveal the other apps they have

open at the time, and easily swipe and tap to switch to a different app.

Figure 8-14. Feedback notifications shown on the Dropbox website while uploading a file

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

125

Delight Although animation is becoming a vital part of digital user interfaces and must first and

foremost be functional and help to guide the user on their way, there is no reason that

these animations should not surprise and delight the user. Although this may seem like

the frivolity that renders animation more annoying than useful, used well it can serve

as a way to reinforce your brand, keep your user engaged, and even generate positive

emotions, lending to a better overall experience with your product. The Readme website

provides a delightful touch to their login screen, illustrated in Figure 8-16. On the login

page, there is an owl peeking over your login form. As your cursor lays focused on the

password field, the owl covers their eyes so not to see what you’re typing. Although it is

nothing more than a fun piece of animation, when a user recalls the Readme website

simply down to this fun little interaction, it becomes very valuable indeed.

Figure 8-15. The stages of animation in iOS as a user swipes up from the bottom of their device in order to swipe through their open apps

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .

126

Summary In this chapter we have looked at why visual design is so important to the user

experience. We have covered a number of psychological principles that help us to

understand why our own brains perceive visual input in the way they do, and how

we translate that into useful information that can be understood and acted upon. We

looked at why visual design should be of importance to a developer, and how the use

of style guides, pattern libraries, and all-encompassing design systems can help not

only developers and designers, but the wider organization, as well as the benefits they

provide to creating a more robust and reliable user experience. Finally, we took a look

at how animation plays a part alongside the visual design, and how it can be an integral

part of the visual design and how we communicate with our users.

Figure 8-16. A playful owl covers his eyes as you’re about to enter your password on the Readme website

Chapter 8 the ImportanCe of VIsual DesIgn

C o p yr

ig h t ©

2 0 1 8 . A

p re

ss L

. P

.. A

ll ri g h ts

r e se

rv e d .