ux-and-ui-strategy-a-step-by-step-guide-on-ux-and-ui-design
ux-and-ui-strategy-a-step-by-step-guide-on-ux-and-ui-design
PAMALA B. DEACON
Copyright
All rights reserved. No part of this publication may be reproduced, stored in a retrieval system or
transmitted in any form or by any means, electronic, mechanical, photocopying, recording, and scanning
without permission in writing by the author.
While the advice and information in this book are believed to be true and accurate at the date of publication,
neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or
omissions that may be made. The publisher makes no warranty, express or implied, with respect to the
material contained herein.
Contents
Copyright
CHAPTER ONE
A Brief Introduction to User Experience (UX) Design
Complexity and perception of User Experience (UX) design
Definition of User Experience (UX)
What is Design?
What is Design Thinking?
What is UX Design?
Who is a User?
History of UX design
The Scope of User Experience (UX)
The Single interaction Level
The Journey Level
The Relationship Level
Importance of User Experience (UX)
CHAPTER TWO
User Interface (UI) Design
User Interface Design Considerations
User Interface (UI) Design Process
Elements of Interface Design
CHAPTER THREE
User Experience Design Principles (UX)
Developing User Experience (UX) Design
Wireframe and its importance
Examples of wireframes
Wireframing process
Wireframing Tools
CHAPTER FOUR
Introduction to Design Thinking
Origin Design Thinking
What is Design Thinking?
The Design Thinking Process
What are the Principles of Design Thinking?
Application of the Design Thinking Framework
Examples of design thinking success
CHAPTER FIVE
Introduction to User Experience (UX) Design Principles
Principles of UX Design
UX Designer Job
What does a UX designer do?
CHAPTER SIX
UX Design vs. UI Design
The main differences between UX Design and UI Design
Some Misconceptions: UX design vs. UI design
Conclusion
ABOUT THE AUTHOR
CHAPTER ONE
History of UX Design
User experience design is a term which is mainly associated with apps and
websites. And especially when considering a typical job description of a UX
designer, it can trick you into thinking that it's a modern concept.
The word was first originated in 1993 by Don Norman when he worked at Apple
Computer, but the UX field is older than the term.
The history of user experience (UX) is important in understanding this field.
History can provide immeasurable insights into the future. So let's have a look at
user experience design and its origins.
Over the years, UX design is a term that we have constantly associated with apps
and websites. There is a need to know that User Experience is not a new
phenomenon, particularly when the UX designer's job is considered.
Don Norman, the Cognitive psychologist and designer, originated the term "User
Experience" in the 1990s, but UX has been recognized for some decades.
What is the necessity of all these? Aren't we supposed to be looking at the future
rather than the past?
Theoretically, the history of UX is vital to comprehend this essential field. When
we get exposed to its origins, elements, and what stimulates it, we get equipped
to shape the future better. If UX is new to you, this is an overview of the field,
but if you're an expert, it gives you a new insight on UX.
4000 BC: FengShui and why space is significant
You're probably pondering what has primordial Chinese philosophy gotten to do
with UX design, don't get yourself all worked up because the association isn't
far-fetched.
Far back as 6,000 years, he rigorously translates as "wind" and "water" and
states that objects should be arranged in an orderly manner (e.g., furniture)
concerning energy flow. "In reality, FengShui has means placing objects in your
environments in the most ideal, pleasant, or user-friendly way, either in a
bedroom, an office, or an entire building. It encompasses everything from layout
and framework to colors’ and materials.
Just the way an interior designer would organize the furniture so that the
inhabitant can easily navigate the room, a UX designer also applies related
principles to building a mobile app. The result is the same, that is, to create a
Spontaneous, user-friendly experience. Based on this, it can be said that
FengShui was amongst the first facilitators of the UX concept.
500 BC: Ancient Greeks and ergonomics
The origin of UX can also be traced right back to Ancient Greece. By all
indication, it can be suggested that, as early as the 5th century BC, Greek
civilizations structured their tools and workplaces to suit ergonomic principles.
The human factor is "the scientific discipline that focuses on connections
amongst humans and other elements are understood and the line of work that
uses principles, theory, data, and methods to design as well as enhance human
well-being and their general system performance.
One of the resilient signs the Ancient Greeks were aware of ergonomic
principles is how the Hippocrates analyzed how to set up a surgeon's workplace.
He talked about the lighting in the room, the position of the surgeon —"either
sitting or standing in a position that seems relaxed to him"—and the way the
tools are organized; "they must be easy to reach whenever they are required, and
they must be properly placed in a way that would not obstruct the surgeon."
Doesn't it remind you of the concept of UX Design?
The early 1900s: Frederick Winslow Taylor and the quest for workplace
productivity
Frederick Winslow Taylor happened to be a mechanical engineer and pioneer of
Taylorism—otherwise known as Scientific Management. In his quest to augment
human labour, making it more efficient, he single-handedly conducted extensive
research to discover the interactions between workers and their tools.
However, in 1911, he stated, "The Principles of Scientific Management," in
which he indicated that systematic management is the way out of inefficiency.
Although Taylorism was generally criticized because it condensed people to
mere cogs in a machine, Taylor's concentrated on optimizing the relationship
between humans and their tools.
The 1940s: Toyota and the value of human input
Continuing on the need for workplace efficiency, Toyota established its famous
human-centred production system. Unlike Taylorism, the Toyota Production
System was built upon respect for the individual, and much consideration was
paid to creating the best working environment. Also, human input was
considered very important and encouraged. Toyota factory workers have an
option to pull a cord to halt the assembly line if there's any feedback or
suggestions to improve the process, such as usability testing in action.
It characterizes an important step in UX history, considering how attention was
brought to the significance of how humans work with machines.
Irrespective of how progressive technology has become, its importance is
restricted to its usability—and that's actually what UX design is all about.
1955: Henry Dreyfuss and the art of designing for people
A supplementary key figure in the history of UX design is Henry Dreyfuss; he is
an American industrial engineer, well-known for his act of designing and
improving the usability of major iconic consumer products as well as the Hoover
vacuum cleaner, tabletop telephone, and the Royal Typewriter Company's Quiet
DeLuxe model.
Dreyfuss's design philosophy was established on common sense and scientific
approaches. In 1955, he wrote "Designing for People," which, in a nutshell,
describes UX design: it defines a situation where the designer is said to have
failed when the point of contact between the product and the people becomes a
point of friction. Alternatively, suppose people feel safe, comfortable,
enthusiastic about purchasing, efficient, or even happier by coming in contact
with the product. In that case, it then means that the designer is said to have
succeeded.
1966: Walt Disney—the first UX designer?
There have been some misconceptions that engineers are the only ones who had
a part to play in UX's history. But in this scenario, it is not so because Walt
Disney is often recognized as one of the first UX designers in history.
Disney was indeed passionate about creating magical, immersive, almost-perfect
user experiences, and how he established Disney World was a real stroke of UX
genius. In his article for UX Magazine, Joseph Dickerson summaries the
principles guiding Walt Disney for his team of engineers, as he called them:
recognize your audiences, fit into their shoes, communicate with color, shape,
form, and texture.
Disney imagined a place where "lives can be improved upon with the use of
latest technology" - a vision that no doubt today's UX designers share.
The 1970s: Xerox, Apple, and the Personal Computer era
In the 1970s, personal computers kicked off, with psychologists and engineers
functioning together to pay more attention to the user experience. Most powerful
developments emerge from Xerox's PARC research centre, such as the graphical
user interface and the mouse. In many ways, PARC introduces personal
computing as recognized today.
In 1984, the original Macintosh was out .
Apple's first mass-market PC featuring a graphical user interface with a built-in
screen and mouse feature, since then, Apple has been paying more attention to
user experience, from the first iPod in 2001 to the iPhone in 2007. The tech
giant, no doubt, became part of coining the term ‘UX design’.
1995: Donald Norman came up with a name for UX Design
At this stage, user experience design was existing — it just didn't have an
identity yet. Donald Norman, a cognitive scientist, collaborated with the Apple
team in the early 90s as their User Experience Architect, making him the first
person to have a User Experience in his job title. Therefore, he came up with the
term "user experience design" to integrate all that UX is. Furthermore, he
explained why he designed the term because the idea concerning human
interface and usability were too narrow: he wanted a situation whereby at each
point of the person's experience with a system will be covered, including
industrial design, graphics, the interface, the physical interaction, and the
manual."
In 1988, Norman published "The Psychology of Everyday Things" (later referred
to The Design of Everyday Things)—which remains a UX design indispensable
to this day.
2018 and beyond: History in the making
UX design is rapidly developing, and the interesting journey continues. From
Artificial Intelligence to voice technology, from Virtual Reality to design without
interface—today's UX designers face new challenges day-to-day. Irrespective of
what the future holds, it is imperative to know that it'll be as thrilling as the
history that heralds it.
The Scope of User Experience (UX)
The relationship between a person and a company across that person life can be
divided into three different levels namely;
2. Do research on potential end-users, study and analyze them. The next step is
to understand who the end-user is. This information is needed because the design
is done for a particular group of users. Their interest is what keeps the design
process ongoing. Researching on what end-users want is very important. It gives
us a perfect idea about what kind of features the end users want, what kind of
layout they like, what colors they prefer, what level of their computer/internet
knowledge, and so on. Information on such little things helps designers to meet
the expectation of the end-users.
3. Locate a group of people matching end users. After successfully finding out
what kind of people are using the system or application, an intense analysis must
understand what they want. A group of potential end-users 5-10 (more or less in
numbers) depending upon the size of the application should be found and
requested to give some time to take part in the end-user analysis process and
help evaluate the design work. Approach to potential end-users should be made,
and the number of meetings should be stated beforehand to keep things clean
and clear. Questions should not be asked that could bother them, exposed their
privacy, or harm them mentally. Promise users some reward for participating in
the process and, of course, keep the promise after the task has been done. It will
help motivate the users to participate and remain motivated to participate in the
whole process next time.
4. Create use cases and test the cases. It is essential to create use cases for the
application, and based on that, create test cases. It will help in creating test
information for the end-users to test later after the design has started.
5. Create a paper demonstration after the design need is well understood. End
users representatives are set, observed, analyzed,, and required use cases and test
cases are written. It is time to create the first version of the demonstration. The
basic idea of the application is drawn on a paper. The advanced idea is drawn.
More features are added and asked for an end-users opinion.
6. Test and evaluate them with possible end-users; after the demonstrations are
done, end users are asked to go through the application's basic idea. Step 5 is
repeated for advanced paper demonstration with more features put and more
navigation put in there if they understand it.
5. Create advanced dynamic graphical demonstrations. After green lights to the
paper demonstration, the mockup design should take better forms. Mockups can
be created in a graphical format example is Photoshop to give the real feel of the
end product.
7. Implement the design. After the final design has passed all the tests,
implementation begins. It can be broken down into smaller pieces/level/version
to test and move to the next level.
Layout Design
Another important element or factor to be considered for Usability is layouts and
how they are designed. When the application's idea is well understood, and the
sitemap is ready, rapid prototyping is started. The layouts give the feel of the
application/site with navigation logic. The prototyping or layout designing
process should always be broken down into many subunits.
CHAPTER THREE
A well-defined Hierarchy
One of the user experience design principles that ensure stress-free navigation
through the designing process is having a well-defined hierarchy. There are two
types of hierarchy. The first type is the hierarchy that explains how content is
organized all through the designing process. In contrast, the second one is a
graphical hierarchy, which allows users to navigate easily within a page or
section without stress or trouble.
Consistency
Users expect products to look familiar with other products they use regularly. It
makes it simple for users to become used to the new product without learning the
new process. Consistency makes the designing processes easy for designers or
practitioners.
Wireframing process
As stated above, UX designers have different ways of approaching wireframing;
some prefer to draw with their hands, but others prefer the use of tools or apps
online. But most times, the decision on what to use still depends on the way you
attempt to solve the particular issues and not what the individual prefers.
The bullet points below displays several ways different designers can arrange the
procedure from design to implementation:
Wireframe > Interactive Prototype > Visual > DesignSketch > Code
Sketch > Wireframe > Hi-Def Wireframe > Visual > Code
Sketch > Wireframe > Visual > Code
Let's say, for example, if the task is too much. Visual design can be considered
insignificant (coupled with many back-end administrative interfaces), then
sketch > code is preferable, but if resources and time committed to the project
are worth the while. The value of the business is all high. Investing the time to
ensure a high-definition wireframe and going over a series of testing with a
fully-realized interactive prototype makes more sense.
Wireframing Tools
There are loads of tools that are free to create wireframes and prototypes.
Therefore, you ought to experiment with so many of them to find suitable ones
for you. Don't fail to recall that you can make use of pen and paper. Listed below
are some online tools that are mostly considered appropriate.
UXPin : Considered to have an extensive range of purposes, but a major
function is its ability to facilitate building responsive clickable prototypes
straight in your browser.
InVision : It enables you to facilitate feedback directly from your team and users
using clickable mock-ups of your site design. It's free as well.
Wireframe.cc : It offers you the tools to construct wireframes extremely fast
within your browser, that is, the online form of pen and paper.
How to make your wireframe
1. Research
UX design is a procedure, and wireframing isn't the first step in UX design
principles. Before you even consider picking up a pen and paper, you are
supposed to have considered the first two steps; namely, understanding your
prospective users are through research, listing requirements, creating user
personas, and defining user cases; what does this mean? It simply means
analyzing related product lines to your, excavating prevailing UX trends and best
practices. For sure, that means carrying out a study on similar product lines to
your own, unfolding prevailing UX trends and best practices, and, of course,
going over your core design guiding principle.
2. Do the Research a Reference Point
You can envisage how massive the quantitative and qualitative data of those
various phases will create. Anyway, it's what you have to keep in mind while
sketching your wireframes. As a human, you might find it difficult to remember
all of that or even retain actually; therefore, scribbling a cheat sheet with your
business is recommended and user objectives (your requirements), your
personas, use circumstances, and maybe some cues of the imperturbable
attributes you came across in your competitor research. A small number of
selected quotes from your audience can enable your attention to be fixed on the
user's experience, which is, at no time, fail to recall—what you're designing.
3. Mapped out your User flow
Your wireframing can be easily disorganized if you lack ideas on how many
screens you will produce and the flow you expect the user to follow. It's essential
to have an impenetrable idea of wherever your users will be coming from (which
marketing channel, for example, and off the back of what messaging), and
exactly where you aspire they'll end up. If you're already used to UX vocabulary,
your in-house voice will be consecutively screaming "user flows" and
"information architecture”.
4. Draft, don't draw. Sketch, don't illustrate
Finally, we'll start putting our pen to paper. Don't get tired that it's taking long
because the adage "look before you leap" is very much relevant in UX, making
the previous steps very important.
Anyway, let's get some wires on your frame. Remember: you're outlining and
expressing features and formats, not demonstrating expansively or sufficiently.
There's nothing more critical than a blank piece of paper, so you have to start
putting your ideas down straightaway—that's the most important aspect of step
three. In the main time, don't consider aesthetics; that is colors, the UI designer
can handle that, but if you're the only designer at your inexperienced startup
stage, you'll do that later. A nice, profuse marker pen (a Sharpie, as people in the
US, would call it) is a convenient instrument at this wireframing stage.
As soon as you have a few differences in your first screens, you may intend to do
a bit of combined wireframing with a colleague who is also a designer or product
manager.
It simply means that you should take your wireframes from the paper and onto a
whiteboard and do rough work on them. Ask a very crucial question; "Are we
making something usable that would meet our audience's needs?"
CHAPTER FOUR
Principles of UX Design
UX design means the development and creation of a product. However, it is
mainly used to develop digital-based products such as websites, apps, software,
etc. Below is a list of important principles that should be followed by every UX
designer to create successful experiences.
Focus on your Users
The main goal of any business is to make the end-users happy. So, UX design's
first and essential principle is to focus on the end-users- their needs,
expectations, motivations, and problems. A clear understanding of this important
stage helps designers build personas profiles for users and focus on them
throughout the design cycle. One can discern real users' needs using common
user research methods such as interviews, focus groups, contextual inquiry, and
shadowing.
Focus on business
For any product to succeed in this competitive world, the UX design must make
sense to the end-users. Defining your business goals upfront is highly important
too. A good UX design creates a great balance between business goals and user
goals. UX design helps in making the end consumers happy while also resulting
in increased sales for your business.
Digestibility
The contents of UX design must be clear, simple, and not ambiguous. We chew
food into small pieces so that our stomach can easily digest it. The same thing
also happens with our design. When the design has long contents/elements/
components, it may bother end-users. For this reason, we have to divide large
content into small pieces.
Clarity
Clarity is seen as one of the best principles of UX Design. It's of utmost
importance for Designers to make their Designs as clear as possible so that users
could not get confused. If the users get confused, the design will receive an
inadequate response from them.
"As a user, I should never have to devote a millisecond of thought to whether
things are clickable or not" — Steve Krug.
Familiarity
Familiarity is seen as a complement to the principle of clarity. Creativity in UX
design is always cordially invited, but it should be disregarded if it creates
confusion for users.
Data-informed Design
Design is great not because a designer creates it, but when it passed information
from multiple data sources. Designers use data from different sources to make
effective design decisions. Data can be qualitative or quantitative. Examples of
data sources are users, business and marketing stakeholders, competition, and
site analytics. The data-informed design will help business organizations achieve
long-term business goals and user goals and give users a great experience, which
will eventually help in user engagement and retention.
Validate Designs
Design validation is the evaluation and analysis during or at the end of a Design
and development. The major aim of validating designs is to ensure that the
design can achieve the set goals. Design validation helps to improve design
decisions and maintain Consistency. Some techniques used for design validation
are expert review, cognitive walkthrough, formative, and summative usability
testing.
Design Consistency
Consistency is the key principle of UX design. A good user experience should
provide a consistent experience. It helps users to get used to the product quickly
without stress and reduce the learning time. If a user encounters inconsistency,
the possibility of him using the app again will be at the minimum. Consistency
helps businesses build retention value, credibility, and trust in the company.
Technology Flexibility
Technology is always evolving, and it is changing businesses with it. Once you
have validated designs, you need to make sure that the prevailing technology can
handle whatever you have designed. Business organizations should be ready to
adjust to trending design and technology. There are hundreds of UX design
principles applied from a micro to a macro level of design. The main aims of UX
design are to Focus on real users, defining and achieving business goals,
designing data-informed design, coping up with the ever-changing technology,
and maintaining Consistency will result in making the end customers perform
their tasks with simplicity. It will ensure a good User Experience."
UX Designer Job
Having known the definition of UX design and its importance, it's paramount we
know that UX designers are important. Let's imagine you're shopping online for
the latest clothes. You find yourself in the clothes category, and there are over
three hundred latest clothes available. You realize there's no way to filter the
unnecessary ones away, which means you have to scroll through hundreds of
unsuitable clothes before finding what you're after. You get there in the end and
add them to your basket. You're ready to make a purchase and, as a new
customer, you have to create a new account and login details. Ok, no problem
until you see that there is some mandatory information to be filled in. Buying
your clothes on this website starts to feel more stressful than it's worth, so you
decide to abandon the website and look elsewhere.
That can be classified as a bad user experience . UX doesn't only apply to
websites; any product or service you encounter involves a certain type of
experience. The questions bothering on user experience can include; is it easy to
use? Does it enable you to complete your desired tasks with minimum effort? Is
it logical and efficient? These questions can be indicators of a good or bad user
experience."
What does a UX designer do?
If you're considering a career in the field of UX design, it will be interesting to
know how UX designers work on a day-to-day basis. What kinds of projects can
you expect to work on? What is your duty within a company? What does a UX
designer do actually?
"How do I explain what I do at a party? The short version is that I say I
humanize technology" — Fred Beecher, Director of UX, the Nerdery. From the
definition of Fred Beecher, he sums up the UX designer's role in a very short
sentence. As a UX designer, your job is to make products and technology usable,
enjoyable, accessible, and easy to use for humans. UX designers tend to work as
part of a wider product team. As a UX designer, your main job is to advocate for
the end-user or customer satisfaction. Whether you're designing a brand new
product, coming up with a new feature, or making changes to an existing product
or service—the UX designer must consider what's best for the end-user and the
overall user experience. At the same time, UX designers are also responsible for
ensuring that the product or service meets the business's needs, which increases
ROI and customer retention.
As for the kinds of projects you'll work on, this will vary differently from
company to company, your team's size, and your priorities. You may find
yourself designing websites, mobile apps, software, or even designing for voice,
AR, and VR devices. Some UX designers focus on a design service rather than
physical products, such as designing the overall experience of using public
transport or staying in a hotel. Within the UX designer job title, there are lots of
specialist roles.
When it comes to UX designer daily tasks, these will also vary depending on
your role and the company you work for. Working as a UX designer in a
business organization has involved elements of research, testing, business
analysis, project management, psychology, and wireframing and prototyping.
Despite the variety the role offers, there are some specific functions that a UX
designer can be expected to perform; these include:
1. Conducting user research
2. Creating user personas
3. Determining the information structure of a digital product
4. Designing user flows and wireframes
5. Creating prototypes
6. Conducting user testing
It is important to be aware that UX designers are not responsible for a product's
visual design. Rather, they focus on the user's path and how the product is
structured to facilitate this journey.
CHAPTER SIX