CEntdik - Paper Answers

Part

iscuss any prior experience you have with user

–

centered design.

Explain why you are interested in this field

and how this course will

help you in your intended career path.

Next, think about a site you hav

e used where you had a positive

experience. Post a link to that site and provide the following

information:

Your reason for visiting the site

Whether you consider yourself a novice or more experienced user

of the site

A list of several tasks that are easy

to accomplish on this site and

an explanation of why they are easy

A description of a task you had difficulty completing (if you found

one) and an

explanation of why it was difficult

Finally, post a link to a site where you had a negative experience. Again

provide:

· Your reason for visiting the site

· Whether you consider yourself a novice or more experienced user of the site

A description of a task you had difficulty completing and an

explanation of why it was difficult

Ref:

UX for Developers : How to Integrate User

–

Centered

Design Principles into Your Day

–

Day Development

Work

Part 2

How often do you take the time to rate your experience when playing a

game on your phone or tablet? Do you always go online to complete

the survey at the bottom of the receipt you received at the store or

restaurant you visited last week? If you are like most people, you probably do not have the time or interest needed to complete all of the surveys or other data gathering activities that you encounter throughout your day.

A. In the module resources, you read about a variety of data gathering methods and when each would be appropriate to use. For this discussion, think of a situation when you took the time to participate in a survey, observation, interview, or other data gathering activity. In your initial post, describe the activity and discuss the following:

· Why did you participate?

· What method was used?

· Why do you think the designers chose that specific method?

· How could the information you provided be used to improve user experience or to develop user requirements?

If you have not participated in any type of data gathering activity, read the blog post

I’m Getting That Nielsen Survey Money

, and use the author’s experience to develop your response.

B. suggest another method that could have been used to gather data in the situation and explain why the method you are suggesting would be appropriate

Part 1

D
iscuss any prior experience you have with user
–
centered design.

Explain why you are interested in this field, and how this course will

help you in your intended career path.

Next, think about a site you hav
e used where you had a positive
experience. Post a link to that site and provide the following
information:

Your reason for visiting the site

Whether you consider yourself a novice or more experienced user
of the site

A list of several tasks that are easy
to accomplish on this site and
an explanation of why they are easy

A description of a task you had difficulty completing (if you found
one) and an explanation of why it was difficult

Finally, post a link to a site where you had a negative experience. Again
,
provide:

Your reason for visiting the site

Whether you consider yourself a novice or more experienced user
of the site

A description of a task you had difficulty completing and an
explanation of why it was difficult

Ref:
UX for Developers : How to Integrate User
–
Centered
Design Principles into Your Day
–
To
–
Day Development
Work

Part 2

How often do you take the time to rate your experience when playing a
game on your phone or tablet? Do you always go online to complete
the survey at the bottom of the receipt you received at the store or

Part 1

Discuss any prior experience you have with user-centered design.

Explain why you are interested in this field, and how this course will

help you in your intended career path.

Next, think about a site you have used where you had a positive

experience. Post a link to that site and provide the following

information:

 Your reason for visiting the site

 Whether you consider yourself a novice or more experienced user

of the site

 A list of several tasks that are easy to accomplish on this site and

an explanation of why they are easy

 A description of a task you had difficulty completing (if you found

one) and an

explanation of why it was difficult

Finally, post a link to a site where you had a negative experience. Again,

provide:

 Your reason for visiting the site
 Whether you consider yourself a novice or more experienced user
of the site

 A description of a task you had difficulty completing and an

explanation of why it was difficult

Ref: UX for Developers : How to Integrate User-Centered

Design Principles into Your Day-To-Day Development

Work

Part 2

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

CHAPTER 2

The Importance of User
Experience
Back in January of 2012, Jakob Nielsen published an article, “Usability 101: Introduction

to Usability”. In it, Nielsen states, “usability is a necessary condition for survival.” If a

user is unable to find what they’re looking for, if they find the product difficult to use, or

simply get lost in trying to achieve their goal, they will leave.

From the launch of the first iPhone back in 2007, there has been an explosion in

terms of internet traffic coming from mobile devices. Statcounter reported that internet

usage by mobile and tablet devices exceeded that from desktop devices for the first time

in October 2016. In September 2016, Google released statistics that 53% of mobile sites

are abandoned after 3 seconds.

With these kinds of figures in mind, it would be fair to extend Nielsen’s statement on

usability to say that a good user experience – or at the very least a better user experience

than your competitors – is now a necessary condition for survival, and usability is now

just one of the steps in creating successful digital products. These days, if two separate

products exist that enable a user to complete the same goal, the one that is more

enjoyable to use, the one that provides a better user experience, will be the one that

succeeds.

As we noted in the previous chapter, user experience design requires us to bring the

user into the heart of the design process. We should always be aiming to improve the

lives of our users – however grand a statement you may feel that is – by making it easier

for them to complete their tasks, achieve their goals, while also making it enjoyable for

them to do so.

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:46:16.

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
.

Beyond that, there must be an understanding that a good user experience cannot

exist without underlying support from the business. With the continuous advancements

of technology and the increased expectations of our users, there is a constantly

increasing likelihood that if an organization doesn’t consider the user experience

they deliver to be of any importance, they won’t last very long in this age of digital

disruption.

UX from the Business Perspective
It’s fair to say that over the past few years the term “User Experience” has become

more and more prominent throughout those organizations that have some level of

investment in digital. The “digital disruptors” of the world, without a doubt, have

encouraged the rise of User Experience in the business world. These “digital disruptors”

are those digitally centered organizations that leverage advances in technology and

the internet in order to make innovative digital services. In combination with a user-

centered design approach, they fundamentally alter the nature of the industry they

operate in. Think Spotify for streaming music instead of buying CDs, Netflix in place of

movie rentals and scheduled TV programming, or Airbnb for unique accommodation

in place of hotels.

All of these brands are now considered as household names, such is their popularity.

In no small part, this can be somewhat attributed to the focus they put on the needs of

their customer. If you give your customers – your users – a better experience, something

that enhances their lives, helps them to get their tasks done and to achieve their goals,

and to align these needs with your business goals, the business will be successful.

Unfortunately, not all of us have the chance to be working for trailblazing companies

such as Netflix, Spotify, Twitter, or any of the other digital disruptors that spring to mind.

The vast majority of businesses in the world that have recognized the need to adapt are

undergoing some kind of digital transformation program. This isn’t only about improving

their apps or websites, but improving all aspects of their current technology- based

infrastructure, giving them the capability to pivot and move in new directions to provide

for the needs of their customers. From my experience, from small- and medium- sized

enterprises (SMEs) to large corporations with household brand names, an integral part of

this digital transformation is to increase the level of UX maturity within the organization.

You may well be aware of this going on around you in your workplace today.

Chapter 2 the ImportanCe of User experIenCe

Before we take a look at how businesses can utilize user-centered design to enhance

the user experience, we have to understand where the organization lies in terms of its

own level of UX maturity.

The Various States of UX Maturity
In my experience of working in the United Kingdom with SMEs and larger organizations

that have been around for a decade or more, it is still common to find the business

running on legacy systems that require in-depth knowledge and a significant amount of

time to upgrade. There are also partnerships with third parties that provide a multitude

of digital and product services. These organizations also tend to have a “less than

nimble” approach to design and development of products and services. These are the

organizations that are having the realization that they have to adapt to survive; that

they must deliver not only outstanding products, but outstanding experiences to their

customers.

Although user experience isn’t a new concept, the discipline of user experience

design can still be found to be immature in the vast majority of the types of organizations

mentioned above. In 2017, I was not only working as the only user experience designer

in a 250-employee strong organization, but I was also the first user experience designer

that they had ever employed. Although we may see the vocal minority leading the way in

user experience design by publishing articles, speaking at conferences, and sharing their

process, it is naïve to think that all organizations now focus on user experience; we must

not lose sight that the majority are still playing catch up.

Those organizations are beginning to truly understand the benefits of good user

experience, and the user-centered design approach that is required in order to deliver

it, but the culture of their organization is in need of a paradigm shift to be able to not

only accommodate this new approach, but to place it at the core of everything the

organization does.

There have been a number of models created against which an organization can

measure itself with regard to their level of UX maturity, the most well-known of which

would be Neilsen’s UX Maturity Model (Figure 2-1). The model outlines eight stages of

maturity ranging from “Hostility Toward Usability” to the “User-Driven Corporation.”

Chapter 2 the ImportanCe of User experIenCe
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:46:16.
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
.

The Lower Levels of UX Maturity
The first three levels of the model focus around the business requirements and IT

constraints, and these are the factors that drive the development of any given product or

feature. The hostility toward usability means that the end users are essentially deemed

irrelevant to the process, and the goal of the development team is to build features and

make them work to the provided specifications. These organizations do not consider

their users to be at the same level of importance as the strategic or financial needs of the

company, as depicted in Figure 2-2.

Stage 2, the Developer-Centered User Experience, is largely an exercise in self-

referential design. The internal project teams will rely on their own intuition and

experience to decide what constitutes good usability, and this approach is only ever

successful when the teams that are working on the project are the end users themselves.

When an organization hits stage 3, Skunkworks User Experience, there is now a

realization that the organization can no longer rely on its internal teams to use their

best judgment on what will constitute a good user experience, or what the most usable

solution for their customers may be. The very beginnings of real user-centered design

work begin to appear, but the efforts to involve users in the design of their products will

still be few and far between.

Figure 2-1. Adapted from Neilsen’s UX Maturity Model

These lower levels of UX maturity are where many organizations find themselves

today. This can be a somewhat difficult thing to comprehend, as the most vocal

companies springing up in Silicon Valley and other tech bubbles are generally borne

out of the needs of the user and find themselves at the higher levels of UX maturity from

their inception.

As thought leaders in the digital world, in combination with how vocal they

can be within the Silicon Valley bubble, the rhetoric of the digital disruptors can

easily overshadow the millions upon millions of businesses that are still struggling

through their own digital transformation programs with the aim of leveraging the

same advantages that are intrinsic to those organizations that embrace the start-up

culture: devolving responsibilities to product teams; an agile approach that encourages

innovation; and the ability to pivot to suits the needs of the business, and more

importantly, their customers.

The Medium Levels of UX Maturity
The medium levels of UX maturity, depicted as levels 4 through 6 in Neilsen’s UX

Maturity Model, begin to manifest an appreciation of the value of UX activities from

the business, enough for them to create a dedicated UX budget. This tends to happen

organically as the work done by the small and loosely structured team during the

Figure 2-2. A depiction of where an organization of low-level UX maturity sits
within common driving forces of a business

Skunkworks User Experience stage has caught the eyes of some of those higher up in the

organization’s hierarchy, and they have become convinced that the company will profit

from further investment into providing a better user experience.

With additional investment, the ability to generate a greater return over time

becomes possible, and more and more success stories of reducing business costs,

increasing productivity, and improving conversion rates help to push the organization to

the 5th stage of UX maturity: Managed Usability.

At this stage, an official UX team or department is created, allowing the business to

reap the benefits of a more consistent approach to research, design, and usability testing

throughout a wider range of projects, as opposed to the scattered funding made available

in levels 3 and 4. Not only will this team be able to create consistency, they will also have

the remit to consider the user experience across the wider organization, as opposed to

the more localized implementation of user experience at a project, or even department

level. The leaders of this team will no longer be focused on the details – designing and

implementing better solutions will be down to the members of the team – but will

be working toward a higher purpose: to increase UX maturity to the levels where it is

considered to be part of the business strategy.

Despite their being both a larger budget and remit than previous levels, it is still

not possible to realize all of the potential user experience design activities for every

project throughout an organization at any given time. Although the direction to create

a more unified and universal approach to user experience design is in place, the

implementation takes a large amount of time to gain traction throughout the business,

meaning that the application of UX activities can still be largely fragmented.

Moving to level 6, Systematic User-Centered Design, we find that the organization

looks to utilize user research before approaching design on their more important

projects. The business also looks to measure the impact of user experience utilizing

key performance indicators, along with other familiar methods used to measure the

performance of other areas of the business. With the ability for the business to monitor

the performance of each release, an iterative design process becomes more common as

the business realizes that the best solution is hardly ever created at the first attempt, but

that continuous improvements can be made over time, constantly improving the user

experience, iteration after iteration.

The Higher Levels of UX Maturity
Upon reaching stage 7, Integrated User-Centered Design, everything within a project is

driven by user data that comes from the now commonplace, and far more prominent,

user research activities at project inception. The foundations laid in stage 6 for

monitoring the user experience evolves to be able to produce valuable quantitative data

that can be used to measure against usability goals based on user data. By Neilsen’s

definition, this is the “UX nirvana as far as interaction design goes,” so why is there

another stage beyond this?

The answer is that user experience doesn’t have to be just part of the design domain

but can influence the business in ways that completely transform how strategic decisions

are made. User research doesn’t just influence the direction of a project, it influences

what projects the company should give the greenlight, what their priorities are, as well

as the overarching strategic direction. User Experience becomes Customer Experience,

covering larger aspects of service design for all touchpoints that customers have with the

organization.

As of 2018, there are a relatively miniscule number of organizations in the world that

have reached the highest levels of UX maturity. Although we are able to talk through

the different levels of UX maturity in just a few pages of this book, the reality is that this

process can take years, and more likely decades, depending on where your organization

currently resides in this scale. The path to the higher levels of UX maturity is a long,

winding, arduous journey, in which, eventually, pretty much everybody within an

organization will require at least a basic understanding of the UX process since it will

be part of their day-to-day way of working, engrained in the culture of the business. The

result of this is that the users are seen as equal importance to the business as the strategic

and financial elements of the business equation, as depicted in Figure 2-3 below.

Although it may not necessarily be the main goal when it comes to the digital

transformation of an organization, the advancement through the stages of UX maturity is

one of the most important advancements for the business. As the experience of the user

becomes more central to organizational goals, the more engrained it becomes in their

day-to-day operations.

The Costs Due to Lack of a User-Centered Design
Process
Many organizations that haven’t done much in the way of user-centered design, or even

lent much thought to the user experience of their digital products, will often question the

amount of work required in implementing a design process, let alone one that involves

the users.

There will always be pressure applied from other business priorities, such as being

first to market, or to hit internal deadlines for release windows. More often than not, with

Figure 2-3. A depiction of where a user-driven organization sits within equal
driving forces of strategy, finance, and users

a less mature level of UX understanding, this design process can be under increasing

pressure to legitimize its inclusion within the chain of delivery.

Ultimately the business will ask whether investing in user experience design is worth it.

“If you think good design is expensive, you should look at the cost of bad
design.”

– Ralf Speth

The business world is very much focused on numbers: profit margins, average order values,

recurring revenues, customer lifetime values, et cetera. And so they should be. Without

measuring the success and failures of past projects, how can they possibly learn from

their mistakes, and in doing so, avoid repeating the same type of mistakes in the future?

The value of good design, however, can be much more difficulty to quantify in those

terms, so we have to look to the business world to borrow models on which we can

provide evidence that spending time and resources on design will reap the benefits in

the longer term.

In organizations where design is not truly valued, it can be perceived as something

that is more of an expense, and a costly one at that. This is also a reflection of the level of

maturity in the field of UX that a business has.

A Real-World Example
When I joined an organization as their first and only UX Designer, there were a number

of multipage forms that constituted different user journeys for each of the products or

services that were being sold to their potential customers: a typical sales funnel for a

business website selling their products to their potential customers.

One of the particular journeys that I got to work on was an out-of-the-box, white

label solution for home insurance. In terms of design, the only changes that had been

made to a fairly basic multipage form was the addition of the company logo, along with

a change in color palette to reflect the brand. This particular online journey performed

terribly. There were dropout rates of around 40% at every step of the journey, meaning

that for every 100 visitors to our quote journey, only 8 would make it to the screen where

they could buy an insurance policy.

The business was acutely aware that work needed to be done, so a project team was

formed with the aim of creating a new front end that we would have more control over as

a company, and no longer rely on a third party to deliver the digital journey on our behalf.

However, this project did not initially contain any design phase at all as it was purely

focused on re-creating the existing journey, but to be in our own domain of control.

After a few conversations and compromises with the project team and the senior

management, we were able to integrate a four-week design phase into the project. This

would consist of a great deal of analysis on the questions that comprised the journey and

how they were organized, with three rounds of design, prototyping, and usability testing

with real customers. Armed with the figures that the white label solution had generated

for the business over the past years, in combination with some internal guerrilla testing

of a very early prototype, the project team was able to create a set of objectives, key

performance indicators, and targets that the business could sign off on.

Before the introduction of this design phase, there was no additional benefit to be

gained from the first minimum viable product, other than having direct control over

the journey to improve the turnaround for future iterations of the user journey. With

the introduction of a user-centered design phase, we were able to propose a return on

investment with our first release of a new user journey.

Within the first month of release of this new home insurance journey, we had

smashed all of our projected targets out of the park. The number of policies sold went up

201% compared to the same period in the previous year, and the profit margin went up

by more than 325%.

With just the introduction of a four-week design phase, we were able to create a huge

benefit for the business, and all from a minimum viable product that we could launch for

our customers.

User Experience Is No Longer an Optional Extra
The less concerned the organization is with the user experience, the more common it is

for the design process to be brushed aside as an optional extra. Something that is not a

core component of what the organization delivers to its customers.

In 2005, the Institute of Electrical and Electronics Engineers (IEEE) published a

report entitled “Why Software Fails.” The report contained a list of the 12 most common

factors that contribute toward the failure of software projects:

• Unrealistic or unarticulated project goals

• Inaccurate estimates of needed resources

• Badly defined system requirements

• Poor reporting of the project’s status

• Unmanaged risks

• Poor communication among customers, developers, and users

• Use of immature technology

• Inability to handle the project’s complexity

• Sloppy development practices

• Poor project management

• Stakeholder politics

• Commercial pressures

The report estimated that organizations and governments would have spent $1

trillion that year on IT hardware, software, and services across the globe. Of the IT

projects that were initiated, between 5 to 15% of them would be abandoned before or

shortly after delivery, as they would have been deemed hopelessly inadequate.

Beyond that, it was estimated that 50% of a developer’s time is spent reworking

avoidable issues. Literally half of a developer’s time was spent doing work that

shouldn’t be needed due to some of those factors listed above. The cost of fixing an

error after development has been completed is 100 times that of fixing the error before

development has been completed.

The CHAOS Report – an annual report generated from research by The Standish

Group – stated in 2016 that 31.1% of projects were cancelled before they were completed,

and 52.7% of projects would cost 189% of their original estimates.

Three of those factors listed in the IEEE report – specifically badly defined system

requirements, poor communication among customers, developers, and users, and

stakeholder politics – can be avoided by implementing some of the techniques that are

common practice within user-centered design, such as user research, usability testing,

and stakeholder interviews. Although these user-centered design activities can be of

great benefit in these areas, they are not a magic wand that can be waved when things

start to go awry; instead they must be utilized from the very beginning of a project in

order to be effective.

By implementing user-centered design, we can help to prevent these issues that

can cause immense frustration for developers (as well as the wider project team), we

can negate some of the contributing factors, as well as the excessive associated costs to

the business by reducing the risk of project failure. Not only can a user-centered design

approach limit the risk for the business, and reduce costs, but it can also have a huge

positive impact in terms of return on investment (ROI), effectively removing the barrier

of increased costs up front to fund a user-centered design approach within a project.

The ROI of UX Design
“Usability goals are business goals. Websites that are hard to use frustrate
customers, forfeit revenue, and erode brands.”

– Forrester Research

The justification of the amount of work that needs to be undertaken through a user-

centered design process can be difficult to measure in a way that the business can utilize

effectively. As we mentioned earlier, business decisions revolve around numbers. The

methodologies within user-centered design provides us with all kinds of data that proves

what customers like and don’t like, what they find easy to use, and whether the product

helped them to complete their task or reach their goal.

But these facts and figures on their own don’t relate to the concerns of the business.

They need to be converted into a language that is understood and respected in the

business world. They need to be converted into a metric: increase in conversion rate,

reduction in abandonment, reduction in calls to the support staff, decrease in the

amount of required training, increased product usage, reduction in development time,

or a reduction in errors – all of which can be indicators of a successful UX design process

that the business can measure.

Whatever the metric, there is a distinct business need to show that return on

investment.

A Scenario for Calculating ROI
Let’s imagine that our business is an insurance broker that has a call center with 200

sales staff. Every day, the sales staff collectively makes a number of errors when inputting

the details of their customers into the system, throughout the working day. From this, in

conjunction with some other data that we are already aware of, we can calculate the cost

of these errors to the business.

(# of errors) ⨯ (Avg. repair time) ⨯ (Employee cost) ⨯ (# of employees)
= Cost savings

On average every user makes 2 errors per day when entering a customer’s contact

details, which equates to 10 errors per week, per employee. The average time for the

employee to rectify each of those errors is 10 minutes. The employee cost, or the hourly

rate that a member of the sales staff is paid, is $10, and we already know that we have

200 employees. So our calculation looks like this:

(10 errors/week) ⨯ (0.1666 hours) ⨯ ($10/hour) ⨯ 200 employees)

= $3,332/week

= $39,984/year

Now the business is aware of the cost of the problem, and how much can be saved

if the problem is corrected. Against this, we can now measure the cost of using a user-

centered design approach to resolve the problem. In order to remove the possibility

of these errors occurring when an employee is entering these details, a designer will

create a possible solution as a prototype, test this with users, and iterate on the proposed

solution until a usable and successful solution is found.

This work for the designer is estimated at 40 hours, at the hourly rate of $20, which

creates a total design cost of $800. We will also require some time from the sales staff for

testing. For 3 rounds of testing with 6 users, with each test taking 30 minutes, the cost

for these participants would total $90 for the 9 hours required. For the developers to

implement this solution, work is estimated at 8 hours at an hourly rate of $15, creating a

development cost of $120.

Therefore, the estimated total cost to remove the possibility of this error occurring

for the sales staff is just $1,010. By implementing this change, the business can realize its

investment in just over 1.5 days following implementation, which means the cost savings

to the business over a year for this particular solution would be $38,974.

UX Is Everyone’s Responsibility
One thing that is clear from the example above is that the input of both designers

and developers was required to deliver a solution to a problem in order to benefit the

business. The design team are not the only ones in a product or feature team who

influence the user experience. People outside of the design team, or those that don’t

have the word “designer” in their job titles, make significant design choices, whether

consciously or otherwise, that affect the resulting customer experience in a huge variety

of ways.

Much has been said in the design community about what actually constitutes

a designer. There are conflicting opinions from both sides of the argument, specific

examples from a wide variety of experiences, and criteria banded around about what

skills make a designer. I don’t particularly want to get involved in that debate – although

this book may have already committed me to a particular position on that front – but

more importantly, I don’t want developers to be drawn into that debate, nor anyone

outside of what is considered the “design profession,” for lack of a better categorization.

Regardless of whatever position you may take in this kind of debate, it doesn’t

change the fact that anyone who makes a decision on how something works within a

digital product ultimately affects the resulting user experience.

Developers are at the sharp end when it comes to delivering a digital product.

Almost every choice they make will have some kind of bearing on the resulting user

experience; from big decisions on what architecture or framework to employ, down

to the properties of individual elements on a screen such as how they handle micro-

interactions, animations, accessibility, feedback mechanisms, and more. They are at the

last point in the process where creative decisions are made that come together with all of

the previous decisions that culminate in the resulting user experience.

The relevance of having the user in mind while making everyday decisions is just as

important here as it is when we are defining what we are to build. If we don’t consider

the user at every stage, for every decision, and neglect to consider the needs of the user

from inception to completion, there is nobody who can come along after the fact, wave a

magic wand, and fix the resulting problems. There are so many factors to consider, such

as accessibility issues, methods by which the user can interact with the product, how we

set a user’s expectation for what will happen next, to how we provide feedback so they

know what has just happened; these, and many, many more considerations must be

constantly contemplated to avoid the pitfalls that can result in a poorer user experience.

No one, at any given point in the project life cycle, should be exempt from

considering the user; the importance of user experience is ubiquitous.

Summary
In this chapter we have touched on how user experience is viewed from a business

perspective, and how this perception changes as the level of UX maturity grows within

an organiz ation. We walked through these levels of maturity, illustrating how the role of

user experience as a discipline, and its associated activities help to further the continued

integration of a user-centered design approach.

We examined the costs where there is a lack of UX design along with a range of

factors that lead to project failure and explored the return on investment that it can

provide with some real-world and theoretical examples. Finally, we touched on why user

experience is not just the responsibility of a “designer,” and that anyone who makes a

decision on how something works has an impact on the resulting user experience.

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

CHAPTER 1

What Is User Experience?
Over the past few years, the prominence of the term “User Experience” has grown

significantly. The term, coined by Don Norman, was not created to simply focus on

digital products, but to encompass the entire experience that an individual has, through

any and all mediums, around a product or a service.

This is the purest understanding of the term User Experience (UX), but as Don

himself has said, the term has been “horribly misused” when it is applied specifically

to the context of websites and applications alone. With that said, the core concept of

UX endures; regardless of what kind of digital product the user interacts with – whether

that be a website, an application, or any other piece of software – UX is still about the

experience a person has with that product.

However, this book presents a slight variation of the concept. As the title suggests, it

will focus on User Experience for Developers, in regard to how they can contribute to a

better experience for the end user through the digital products they build (although this

deviates from the original meaning of the term). As developers we have our own window

through which we can affect the user experience. We find ourselves at the sharp end of

the software development life cycle: at the point of implementation. We are turning the

intentions of product owners, analysts, and designers into products that will be used by

real people.

Creating an experience isn’t about the how a product is created. It’s not about how it

was engineered, what frameworks were implemented, or whether you use bleeding-edge

technology; it’s about how the product helps people to complete their tasks, to achieve

their goals, and – perhaps most importantly – how they feel when they use and engage

with the product.

This user-centered mindset can be a commonly neglected aspect of digital product

design, and is one that needs to receive far more prominence. By providing developers

with the means to gain a comprehensive understanding of your user’s needs, and

what good user experience means to your users, we can create more successful digital

products with a solid foundation of knowing their needs and goals.

C
o
p
yr

ig
h
t
©

0
1

.
A

p
re

ss
L

.
P

..
A

ll
ri
g
h
ts

r
e
se

rv
e
d
.

Typically, the term User Experience refers to how an end user feels about the digital

products that developers build, but you cannot design the experience itself; that belongs

to the user, to the individual. Their experience is formed in their own mind, through a

filter of their previous experiences, the situation they find themselves using the product

in, and a multitude of other influencing factors. An experience is as unique as the

individual that perceives it, which makes it a completely subjective matter. This means

that we can only design for an experience, to aim to give the user the best experience we

can by designing to meet the needs of the user, in the situational context they may find

themselves in while they use the products we create.

The goal of this chapter is to understand what User Experience means to a developer

building a digital product. This will be the context in which we continue to uncover the

improvements we can make to our own understanding, our day-to-day workflows, with

our project teams, with designers, with our fellow developers, and ultimately, the people

who will be using what we build.

We’ll look at how we can define what user experience is, firstly by working through

what it is not; breaking down common misconceptions; differentiating the often-

conflated user interface against user experience; and examining the various disciplines

that come together to form the overarching user experience. We’ll also examine

where user experience fits in as part of a process, how it fits with the needs of your

organizations, and how it fits with your own responsibilities as a developer.

Defining User Experience
User Experience is a notoriously difficult thing to define. Ever since I entered the field,

I have been looking for the perfect answer to the question, “What do you do for a living?”

As a Front-End Developer, I could answer this question with relative ease to those

who operate outside of our technically focused bubble: “I build websites.” More often

than not, this answer was fairly well understood, although it would lead to the occasional

“Can you help me fix my email?” predicament.

Answering the same question with “I’m a User Experience Designer” leads to some

of the most genuinely entertaining expressions I have seen appear on the faces of human

beings. The ensuing awkward silence is then filled with my own rambling explanation of

how I work to make applications or websites easier to use. This then leads to the design

Chapter 1 What Is User experIenCe?

2
0
1
8
.
A

p
re
ss
L
.
P
..
A
ll
ri
g
h
ts
r
e
se
rv
e
d
.

world equivalent of “Can you fix my email?,” which is for the other person to pull their

mobile phone from their pocket, and walk you through the most annoying thing to them

in the app they use most at that moment in time.

After this happens to you a few times, you start to build an understanding of how

everyone is affected in different ways, not only by the product they use, but also in the

contexts they find themselves in, the tasks they are looking to complete, alongside a

multitude of other factors that the team of people who created the product in the first

place could never have imagined.

Misconceptions of UX Design
Whether or not there is a real understanding of what User Experience Design truly

is across all industries and organizations is up for debate. In my experience, the vast

majority of organizations that I have come into contact with are still coming to grips with

User Experience, what it entails for their business, and figuring out how it changes the

way they operate when trying to make the users – their customers – an integral part of

the process when designing, building, or updating their digital product.

Although we have established that the term User Experience has been misused

when compared to its original meaning, and even if we reframe UX to purely focus on

digital products, there are still a few misconceptions around what comprises the user

experience.

The most common of these misconceptions is that User Interface Design is seen

as synonymous with User Experience Design. So let’s take a look at setting a few things

straight.

UX Is Not UI
As any UX practitioner will tell you, user interface design is not user experience design.

UX practitioners will look to educate others that the scope of UX Design reaches far

wider than just the discipline of UI Design, while looking to avoid diminishing its

importance to the overall user experience.

Chapter 1 What Is User experIenCe?
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:46:02.
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
.

Figure 1-1 shows the User Experience design disciplines, as envisioned by Dan Saffer.

Although this is not an exhaustive list of all the facets that could be considered part

of user experience design, from this you can see how User Interface Design sits within

the larger sphere of Interaction Design, which in turn belongs to the sphere of User

Experience Design.

Depending on the structure or strategy of the organization that you work in, each

of these disciplines could be the responsibility of separate individuals. Perhaps each is

a discipline shared between multiple people, or there may be one individual covering

multiple, or perhaps even all of these disciplines.

Figure 1-1. The Disciplines of User Experience

If we think about these disciplines and how they relate to the roles of people within

an organization, we may find that a team working on a particular feature of their flagship

product would include a User Researcher who studies Human-Computer Interaction in

relation to your product. A Content Strategist or Copywriter who would work on Content,

and perhaps Information Architecture. They may have User Interface Designers who

only work on Visual Design, or the same role may also cover Interaction Design and

Sound Design. There may be a full team of individuals who specialize in each of these

disciplines working together, or there may be a single individual who covers all aspects

of User Experience Design: the fabled UX Unicorn.

Whatever the make-up of the team, and whatever disciplines fall into the

responsibilities of a particular role, it is apparent that all of these disciplines – all of

these aspects of user experience design – must be considered in order to deliver a better

experience to the user.

“Design is not just what it looks like and feels like. Design is how it works.”

—Steve Jobs

We must also be mindful not to restrict our understanding of the user experience

to simply that of visual design, or the graphical user interface. We must expand our

understanding to the physical connections we have to the products we are using; input

through peripherals like the mouse and keyboard, direct physical interactions with touch

screens or multi-touch track pads, and the physical responses we receive from those

interactions through haptic and kinesthetic feedback. With voice interfaces becoming

more common with Amazon’s Alexa, Apple’s Siri, Microsoft’s Cortana, and Google Now,

we must consider how users may wish to interact with our products in this way. With

virtual reality making a seemingly promising resurgence, as well as augmented reality

and gesture-based interactions, we find that a user’s experience reaches far beyond the

traditional graphical user interface, and that there are many more ways of interacting

with our digital products than is immediately apparent.

UX Is Not Usability
It is common for usability to be thought of as the user experience, as the term is used

to describe what a user thinks and feels about an interface; how intuitive it is, how easy

it is to use, how easy it is to learn. Again, usability is just a small part of the larger user

experience whole. When we examine what usability means – how easy it is to use and

learn – it becomes apparent that it is an attribute of the user

interface.

As usability applies to the user interface, again, this is not just related to the visual

aspect, but to all mediums through which a user can interact with our digital products.

People often think that making a product usable creates a good user experience.

As we have already established, there is more to it than that. While usability is most

definitely an important factor that contributes to the user experience, only concentrating

on usability neglects other aspects of the experience.

The UX Honeycomb in Figure 1-2 illustrates the other facets that we need to consider

in a more holistic view of a user experience.

Figure 1-2. UX Honeycomb created by Peter Morville

The UX Honeycomb was created by Peter Morville to help his clients understand that

there was more to the user experience than just usability. Each facet is representative of a

part of the user experience:

• Useful – If your product does not solve a problem or fulfill a need

that its user has, then the need for that product quickly evaporates.

We must always be aware of our users and their changing needs and

behaviors in order for our work to stay relevant and useful.

• Usable – Ease of use and learnability are key to retaining those who

already use your product, and yet it only relates to the user interface.

Although important, it does not encompass all of the considerations

required for good user experience design.

• Desirable – Although this is rather intangible, the importance and

value that elements of emotional connections to a brand, an identity,

or a product can have significant bearing on the overall experience.

• Findable – A user must be able to find what it is they need to be able

to get the job done.

• Accessible – We must strive to make the things we build available to

everyone, regardless of physical or cognitive impairments.

• Credible – The product must be trustworthy. It must allow the user to

believe what we tell them.

• Valuable – The product must deliver value, not only to the user’s

satisfaction, but to that of the stakeholders, and to the bottom line of

the business.

UX Is Not Just Part of a Process
Something that I still encounter is that there can be a large divide between the user

experience designers and the developers working on the same product or feature.

This is especially surprising when the developers are employing Agile methodologies.

The iterative and incremental nature of Agile development is so closely aligned to the

process of user-centered design, it can be completely mystifying that the larger life cycle

of a project still follows a more traditional waterfall process, where design work will be

completed before handing documentation over to the development team for their work

to begin. It really is more common than you may think.

User experience design is not an item on a list where you can check the box and say

you’re done. It is an essential part of every process, or in other words, it is the process.

Placing the user at the heart of the design process requires the integration of user

experience design into everything you and your team do.

From the very beginning of the software development life cycle for any given feature

of a digital product, we should be looking to include the user. Their involvement will

help to guide the decisions we make at every step of the journey from inception to

launch, and beyond. User research can be utilized at the very beginning to validate ideas

for features, whether they would be useful to the user in helping them to complete their

tasks and achieve their goals. Prototyping and usability testing with real people help us

to quickly iterate our proposed design into a more usable solution.

Our work involving the user is not finished when a feature is released to the world.

Analytics and varying forms of user feedback can be utilized following the launch of a

feature to feed back to the business to see how we can further improve our offering to

our users.

A user’s needs and behaviors are constantly evolving, so in order for your product

to stay relevant to them, there must be a constant effort to respond to those needs. This

means that the work you do, whatever it may be, is never truly finished.

UX Is Not Only About the User
Unfortunately, some of the terminology used to convey the meaning of a particular

approach can be misleading in some cases. Take, for instance, the term “user-centered

design.” You could be forgiven if you were to draw the conclusion that the user was at the

heart of every decision made in this approach to design.

As much as I would love this to be the case, as I’m sure many other UX practitioners

would, this is simply not how the real world functions. User-centered design (also

referred to as Human-Centered Design by IDEO, a global design company) actually

refers to bringing the needs of the user into consideration from the very beginning of

any project. The representation of user needs should ideally stand on an equal footing

alongside both the business objectives and technical requirements (Figure 1-3).

This also means that we cannot always do what is best for the users. In the real world,

you will find many cases in which the business goals override the user needs. In this

situation, we are aiming to meet as many goals and needs as is feasible in our best efforts

to make the best possible product within the constraints we have.

UX Is Not the Responsibility of Someone Else
In the same vein that UX Design isn’t just one stage in the larger process, it is part of

everyone’s process, whether they are aware of it or not. The user experience is affected

with every decision made about the product, from a strategic business perspective, right

down to how a button is implemented in the product itself.

In order for every role in the process of creating digital products to take on the

responsibility of the resulting user experience, user-centered design must become part

of the organizational culture. Everybody must be pulling in the same direction in order

to build the best product for their users. If your organization isn’t driven by user needs as

much as they are by the business goals, together we can start to affect change by bringing

the roles of the UX designer and the developer closer together.

Figure 1-3. Human-Centered Design adapted from IDEO, a global design
company

Everybody in the team working on a product must be pulling in the same direction in

order to build the best possible product for the user. By bringing the roles of UX designer

and developer closer together, we can dramatically reduce the possible (and probable)

disparity between the intention of the design and the realization of the product.

By removing the internal conflicts in the motivations of what constitutes a good

digital product between the developer and the designer – traditionally developers are

focused on the needs of the system, while UX designers on prioritizing the needs of

the user – we are able to bring the user experience into focus by extension: not just for

ourselves, but for the wider team. If we can break the widely proliferated stereotypes

around developers and their apparent “systems first” approach within the team –

specifically by focusing on user needs – together we can be the people to instigate the

change needed across the entire team, even across the whole organization, making the

user experience part of everybody’s responsibility.

The Core Disciplines of User Experience
Since there are so many different interpretations of what user experience design

comprises, it can be rather challenging to define the job roles that exist within. UX

Design, as an industry, is still maturing, and we will continue to see this process of

maturation throughout businesses across the world as the approach of user-centered

design is assimilated into the day-to-day workings throughout the organization.

In my opinion, “The Six Core Disciplines of User Experience” defined by Nick

Finck is the blueprint within which individual roles can be categorized. It takes the

array of different disciplines found in “The Disciplines of User Experience” by Dan

Saffer (Figure 1-1), and refines them into a set of specialties that focuses on the areas of

endeavor most commonly found when creating digital products. Let’s take a brief look at

each of these core disciplines to see what they involve.

User Research
The focus of user research is to understand the needs and behaviors of your users

through observation, task analysis, and other methods of gathering feedback in order to

interpret the effect a design has on those users.

Content Strategy
The aim of content strategy is to ensure that your product is home to meaningful and

engaging content. The discipline focuses on the planning, creation, delivery, and

governance of content to deliver useful and usable content to the user.

Information Architecture
The aim of the discipline of Information Architecture is to help users to understand

where they are, where they have been, and what to expect next, as they navigate through

information in order to achieve their goals. Understanding how items of content relate to

each other, and then organizing them in a logical, meaningful, and sustainable manner

accomplishes this.

Interaction Design
Interaction design is the practice that looks to create meaningful and engaging interfaces

by understanding how users interact with technology. It enables us to guide users

through journeys by giving them clues about what the next steps are, make users more

efficient by anticipating and mitigating possible errors, provide responses to a user’s

actions in the form of feedback, and ultimately make it simple for the user to learn the

interface.

Visual Design
Good visual design enhances a user’s experience and builds their trust in the brand

by focusing on aesthetics. It aligns the typography, colors, images, and other visual

elements to help convey the content or function of the product.

Usability Evaluation
Usability refers to the efficiency and effectiveness that a user experiences when

interacting with a digital product. Different techniques can be implemented to

determine how intuitive the design is, discover the frequency of errors when carrying

out tasks, reveal how easy it is to learn and use, and even measure subjective feedback in

terms of user satisfaction.

Summary
We have covered the definition of user experience in the context of digital products:

websites, applications, or other software. By addressing common misconceptions of user

experience and the discipline of user experience design, we have built a solid foundation

of understanding that will stand us in good stead for the topics we will cover in the rest of

the book. We’ll look at how the perspective of the user should influence your day-to-day

working practices, how we can more effectively work within our teams to deliver better

experiences for our users, and the practical implementation of tools and techniques

required to become a user-focused developer.

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

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

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

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

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

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.

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

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

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

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

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.

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

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

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

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

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.

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

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

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.

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

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.

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

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

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

Turn in your highest-quality paper
Get a qualified writer to help you with

“ CEntdik ”

Get high-quality paper

NEW! AI matching with writer

Order an Essay Now & Get These Features For Free:

Turnitin Report

Formatting

Title Page

Citation

Outline

Place an Order