UNIT –V - Customer Interface Design and Development– SITA1502

UNIT 5 UX AND UI

UX Introduction -Elements of UX Design- UX Design Process- Research Methods and Tools-

Understanding User Needs and Goals. UX Design Process: Visual Design Principles-Information
Design and Visualization-Interaction Design- Prototyping Tools-Usability Test. UI Introduction-
User Interface Components -Tools and Processes.

UX Introduction
UX Design is studying user behaviour and understanding user motivations with the goal of designing
better digital experiences. UX designers do far more than sketch out where a button should appear on
a web page. Systems that confuse, intimidate or infuriate their users don’t have flawed users, but
flawed designs that need to be fixed.

Fig. 5.1 Balancing business, people and technology

Balancing business requirements

While focusing on user needs it is also important for a UX Designer to be aware of balancing business
goals with technology constraints (or opportunities). While it is true that a product cannot succeed
without a healthy business, a business cannot succeed without a happy customer — and it is the UX
Designer’s job to be the customer advocate. Customers don’t often get invited to meetings, so don’t
be afraid to speak up on their behalf.
 Fig. 5.2 The Elements of the User Experience

X Designers are part of the full product design process.UX Design goes a lot deeper than just the
user interface.Testing one user early in the project is better than testing 50 near the end. UX is a
mindset that should be shared by the whole team. It is the team’s way of empathising with your users
and being inquisitive about what they want. In this way UX isn’t a single step in a process but a skill
that must be applied at each stage. Let’s walk through the full UX Stack to see what questions UX can
help the team answer, starting with the initial strategy and scope phases where the concept is taking
shape. UXD can answer some fundamental business questions:

1. Do users need the product you are making?

2. Do they want it enough that they will either pay for it or if it is free, spend time looking for it and
learning to use it?

3. Are you missing a key feature they will need?

4. Are you spending time building features they will never use?

Next, once we have decided what to build we need to decide how. It is in the structure and skeleton
phases where the project really takes shape and a good UXD can help answer some critical
implementation questions:

1. How should the content be organised so that users can easily find it?
2. Will users find your app easy to use? Where do they get confused or lost?

3. What content is needed and how should it be written to be most engaging?

Lastly, we need to focus on the surface of the product. What is the product going to look like visually?
This is an important step because a user’s first impression is critical. UXD can help with the following:

1. What should the visual tone of the product be?

2. How do users feel when they see your product? Do they trust it?

3. It the product visually appealing and does it spark joy?

4. Is the visual design usable and accessible?

Lastly, always remember that users use products; they don’t use documentation. Design artefacts
(wireframes, prototypes, strategy documents) are a means to an end, so don’t lose sight on improving
the product.

Fig. 5.3 UX Pyramid

The UX Pyramid

With such a broad and varied definition, it can be difficult to find ways to benchmark or measure User
Experience. The UX Pyramid is an excellent framework for categorising UX effort and tracking
progress. Based on Maslow’s hierarchy of needs, the base of the UX Pyramid lays the foundation with
fundamentals (breathing, in Maslow’s case), before advancing to higher, more enriching user
experiences. Levels 1 to 3 of the Pyramid concentrate on a user’s ability to achieve a desired task. Can
they use the system to achieve a beneficial outcome?Levels 4 to 6 go on to focus on the user’s
experiences while using the product or service. Do they enjoy using it? Does it make their life
better?Many budget-focused businesses only see value in achieving up to level 3, thereby missing out
on improved customer loyalty, customer advocacy, customer spend and many other incredibly
beneficial outcomes that stem from an engaged customer.

Level 1: Functional
Does it work?

Characteristics:
• No bugs, errors and outages
• Uses current technologies (doesn’t rely on old technologies like Flash that don’t work on phones
or tablets)
• It has some purpose; someone has a need for it
• Includes all key features
• Works in all modern browsers
• Passes basic accessibility
Level 2: Reliable
Is it available and accurate?
Characteristics:
• Loads in reasonable time, even in peak periods
• Content is current and accurate
• Data is clean and reliable
• Password resets are sent/received promptly
• It can be used effectively on mobile devices and standard device types
Level 3: Usable
Can it be used without difficulty?
Characteristics
• Users don’t get lost or confused
• Users can easily find the content or products they are interested in
• The site doesn’t rely on constant help messages or long instruction manuals
• It has a short learning curve
• Users don’t rely on ‘hacks’ or workarounds to use it
• Call centres aren’t swamped with basic enquiries
• Meets basic UX heuristics and best practice
Level 3: Usable
Can it be used without difficulty?
Characteristics
• Users don’t get lost or confused
• Users can easily find the content or products they are interested in
• The site doesn’t rely on constant help messages or long instruction manuals
• It has a short learning curve
• Users don’t rely on ‘hacks’ or workarounds to use it
• Call centres aren’t swamped with basic enquiries
• Meets basic UX heuristics and best practice
Level 5: Pleasurable
Is it an enjoyable experience that’s worth sharing?
Characteristics
• Users invest themselves into it
• Users promote, share and evangelise it
• It becomes part of the user’s regular routine
Level 6: Meaningful
Does it have personal or social significance?

Characteristics

• Users it brings meaning to their life

Diagnosing and solving UX issues

There are three main strategies for improving the UX of a design or system.

Firstly, by using UX patterns and best practice.

When working on a project, there is no need to reinvent the wheel each time. There are many standards,
templates, checklists and case studies available, providing solutions to many common design
problems. Users love consistency, so even though it might be tempting to design something ‘cool’ and
‘new’ it is often a better experience to use a commonly accepted way of doing things.It is important
to note that this needs to be done mindfully and doesn’t mean just blindly copying. Make sure you
have explored the rationale behind a particular deign choice and if in doubt, user test the design before
release.

The second strategy is to conduct a heuristic evaluation.

A heuristic evaluation is where you review a design against a set of UX principles. There are many
widely accepted lists of UX heuristics you can use that have stood the test of time. A heuristic
evaluation is not a total replacement for getting out into the field with users it is a good way of
addressing the ‘low hanging fruit’ (or easy to find usability issues) before spending time and money
testing designs out in the field.

Thirdly, there is no substitute for researching and observing your users’ behaviour.

2.Elements of UX Design

When you want to make or buy something while on a website, you make decisions. Analysing
the key elements of UX, you will better understand how these decisions are made. By meeting
the needs of users, we motivate them to stay on the website, engage in interaction and be more
satisfied.
There are five key elements of UX. All 5 steps are dependent on each other and the whole process
goes from bottom to top.
 Fig. 5.4 Elements

1. Strategy

The strategy defines the reason why an application or product exists, why you are doing the whole
business, who you are doing and why people would use it. The main goal here is to define the needs
of users and business goals. This can be done through a strategic research where potential users would
be interviewed on one side, and business needs would be adjusted on the other.

Fig. 5.5 Strategy

2. Volume

The scope defines the functional and content requirements. What features and content should contain
the product. Requirements should meet strategic goals.
Functional requirements – related to the functioning of the entire side, as certain parts work together.
These are the characteristics that the user needs to store to achieve a specific goal.Content
requirements – the information we need to give value to what we do (text, images, video). Without
defining the content, we will not know how much time it takes for the completion of the project.

Fig. 5.6 volume

3. Structure

The structure defines the user’s interaction with the product, the behaviour of the whole system, how
it is organized, and how much it should be displayed at a given moment. There are two structural
components: interactive design & information architecture. Interactive design – when functional
features are already defined, defines the user’s relationship with the product as a system that needs
to respond to given user requests.

Information architecture (IA) – When requirements are given, defines how the content should be
organized and where it is set, in order to facilitate the user’s understanding of the product.

Excellent Interactive design:

A. Helps users meet their goals;

B. Has effective interactivity and functionality (what the user can do);

C. It informs the user about changing conditions while on the page (file has been saved,
feedbackwhen the wrong email has been entered, etc.);

D. Prevents errors when the application requires confirmation from the user for a potentially
harmful effect (eg deletion).
 E. Excellent Information Architecture: Organizes content by categories and priority
information based on user needs and business goals; Making easily understandable content
and switching from one to another content is simple; It is suitable for your audience; It is
flexible for adaptation and adapts to changes.

Fig. 5.7 Structure

4. Skeleton

The skeleton determines the visual form of the screen and presents all the elements that need to be
interacted. Shows how the user moves through information and how the information is presented to
be clear, effective, and obvious. Wireframes are widely used to create a visual format. It is actually a
static diagram that presents the visual format of the product, which includes content, navigation, and
all forms of interaction. The skeleton is divided into three parts: Design of the interface, design of
navigation and information design.

Interface design – presenting and editing elements so they can act with the functionality of the
application; Navigation Design – the way of navigating through the information; Information Design
– presentation of the information in an easily understandable way.

The skeleton should answer the following questions:

What visual forms should be presented on the screen?

How can interactions be presented and divided?
How can a user move around the site or application?
How can the content be clearly presented?
 Figure: 5.8 Skelton

5. Area

The last step. It refers to how your product, typography, colours, the actual layout, and so on will
look. The goal is to simplify things, be easy to understand and the user to absorb the necessary
information. It is necessary to visually present the entire content and buttons, for the user to know
what can do and how to communicate with them.

Fig. 5.9 Area

Everything is connected. If you do not have a clear strategy, you pay the price over the entire project.
An ordinary decision can completely change the course of the project. It’s okay to make your
decisions change from time to time and of course you can “punch”. It’s not good to make fixed
decisions, because in the end it can turn out to be a product that no one wants. Changes are inevitable.
The root of every successful design is a strategy, which later becomes the scope where the goals of
the user and the business are set. Below is the structure where the interactions and the distribution of
information are defined. Through wireframes “scanners are made” to present the interactions and
structure defined in the structure. The skeleton allows the information to be clearly presented. Finally,
on the surface, all the decisions made up to then are considered and a final visual presentation is
made. There are many research activities that allow you to understand your users and how they interact
with your sites, apps and services.
 3.UX Design Process

User experience (UX) refers to the interaction a user has with a product or service and the
experience they have with it. It is in fact a person’s feelings, attitude and emotions they feel
while using any product or service.
User experience (UX) design is an Empathy driven process of designing a product or service
that are useful, easy to use, and delightful to interact with.UX Design process is a process
of solving User Problem. It is an iterative method which helps a UX Designer to
continuously improve and polish designs based on User Feedback.

It is important that you know that a UX Design process feeds on User Feedback at every step.
Without User Feedback you would be shooting in the dark. UX Design Process makes it
possible for designers to craft amazing experiences for users. Also, UX process followed by
one Designer can be different from another .

While the majority may maintain the same steps however, It usually depends on the resources
the organization has and also sometimes depend on the project.

Fig. 5.10 Design process

6Steps of UX Design Process

Step 1: Understand
UX design is the process of solving a problem for user so that they can achieve their goals
easily. In order to do this, the first step is to understand the problem you would solve
and the objectives of the organization as well.
 Fig. 5.11 understand
There can be multiple ways to do this

• If you working for an agency then ask your clients

• Working for an organization then ask the stakeholders
• Ask for previous research conducted which can include market research, User
research, competitor analysis, etc.)
• Speak to the Product Managers as well
• Analyse requirements to understand and clarify them
Getting understanding about two elements is crucial

1. User
2. Brand
Understanding these Key elements would help you create a Design Strategy that would align
the goals and objectives of User and business. And forms a base for your next step where
you would conduct user research to dig deep into the User Problem.
Outcome: -
By the end of Step 1, you would get a good understanding of the Design Strategy and
objectives of the Organization. This would guide you on how-to carry-on User Research.
Step 2: Research
User Experience (UX) research—serves many purposes throughout the design process. It not
just helps us to get a clear picture of about users, but also answers key questions like what
users think and why they do what they do.

Fig. 5.12 Research

And in order to do so you need to ‘walk their shoes’. You need to learn about the Target
Audience Hence, it is extremely essential that user experience research and Design teams
conduct user research regularly.Additionally, it also helps us identify and prove or disprove
our assumptions. In Bigger organization, research is conducted by a UX Researcher.
However, in smaller organizations/start-ups, a UX Designer has to wear multiple hats to
perform multiple jobs. Primarily, there are two UX Research methods
 Qualitative Research
Exploratory form of the research where the researcher collects verbal, behavioural or
observational data which is interpreted to get insights. Most common methods are

1. Focus Groups
Focus Group brings together 6-9 Participant users. The Goal of the Test is to discover what
users want from the Product.

Furthermore, conducting Focus Groups allows you to learn about their attitude, opinion and
reactions to concepts that you are testing with Users.

2. Contextual Interview
A contextual interview involves one-on-one interaction between user and researcher. And the
interaction involves the researcher to watch and observe the user work in their environment;
and then discuss those activities with them.

3. User Interview
User interview is one of the most common User research methods. In fact, it provides you the
rich information and insights of what your target users think about your new product, site or
service.
A User Interview is typically conducted by 2 UX researchers, one to conduct the interview
and other to record the interview and take notes.
4. Ethnography Study
Ethnography is a kind of social research. It is type of qualitative research which provides a
detailed and in-depth description of everyday life and practice taking a wider picture of
culture.

Quantitative Research
Structured way of collecting and analysing data in numeric form. Analysis, interpretation
and presentation of numerical data is done by using Statistical techniques.

Survey

Surveys consists of a set of questions to gather wide information on a wide range of topics.
It is one of the most common types of quantitative research methods. Survey is an easy way
of collecting quantitative data from a large number of users within lesser amount of time.

The questionnaire, or survey is completed by the person being surveyed which may be

• an online questionnaire
• a face-to-face interview
• or a telephone interview.
Outcome: -
By the end of Step 2, you would get lot of User insights. This information needs to be
then analysed in order to make a sense out of it and learn about key User issues.
Step 3:Analyse
After you have conducted your Research, you would a plethora of insights which can be
quantitative or qualitative. In the next step you have to analyse the information gathered and
make connections around it so that you draw some conclusions.

Framing the right problem is the only way to create the right solution. Moreover, only after
you have detailed information of the wants, needs, and pain-points, you can synthesize the
information into an actionable problem statement.

“If I had an hour to solve a problem, I’d spend 55 minutes thinking about the problem
and 5 minutes thinking about solutions.”– Albert Einstein
There are multiple UX Techniques that you can use to Analyse the information

1. Creating User Personas

User Persona is a fictional yet realistic representation of Target user of the
product. Creating User Personas helps you to identify what the user requirements by
understanding their needs, experiences, behaviours and goals.

Fig. 5.13 Creating user personas

2. Affinity Mapping
Affinity Mapping is about finding the user needs from the observations gathered. The goal is
to synthesize information gathered into common themes and patterns to discover interesting
findings which will help in defining user focused Problem and creating design solution.
 Fig. 5.14 Affinity Mapping

3. Empathy Mapping
An Empathy Map is another method to synthesize the observations to uncover unexpected
insights around user needs. Moreover, it can be drawn on a board, paper or table and has four
quadrants representing the four key user traits.

By Analysing and Synthesizing the information, you would be able do. Defining your Point -
of-view statement which would Define the Right Problem or simply define the Challenge to
address.

Based on the information we go ahead and depict paths a user would take to solve the
identified problem. Creating these paths help us understand what user will be going through
when using product or service. Infact, only by identifying and depicting such path then you
build the best product for them.

Some of the ways you can do it are

4. User Flows
Creating User flow is creating Visual representation of specific routes that a user might take
while navigating a website or app in order to achieve a goal. The route starts at an entry point
and then covers all the steps the user must take to reach a certain outcome.

Fig. 5.15 User flows

5. User Journey Map
User Journey map talks about the complete path a User takes while interacting with your
company which starts from the awareness stage when they realize they have a need, through
all the points of interaction with your brand, and the moment they are satisfied (or not).

Outcome: -
By the end of Step 3, you would get a clear understanding of User Issues that would help
you to define your Problem Statement. All of this would help you to brainstorm and
come up with solutions to solve the User Problem
Step 4: Sketch Designs
Now, it’s time to actually define how the content on each page should be organized.
Furthermore, you have to define how these pages would work together in a way that for user
finds that they find the design it intuitive and easy to navigate.

Easiest way to do this is by creating Paper Sketches. Infect creating paper sketches
and Prototyping on paper is a quick and cost-effective way to test ideas in the early stages of
Product development.

Fig. 5.16 User journey map

UX Case Study | Yukti.io
It is very common for designers to move ahead and create Actual UI screens, however it is
the best practice to stick the lo-fi first. See, you must spend time on exploring the designs
and not creating the designs. And Paper Prototypes lets you do just that.
Creating a Digital App or showing multiple steps to use a physical product- Draw different
sketches of the user interface on different piece of paper and simulate interactivity by linking
and moving series of paper on table. This is quick and easy, best in the early stages of Pro duct
Development. Make sure you review the design with team members and then move ahead to
design it.

Tools Used – Pen and Paper

Outcome: -
By the end of Step 4, you would have a Paper representation of your solutions, validated
by your Team members and stakeholders. The solution would be then designed in the
next step.
Step 5: Wireframes and Prototype
A wireframe is a static representation or blueprint of the initial product concept
however, prototype is a working model of an app or a webpage. Wireframes and prototypes
can be low/medium as well as high fidelity.
Wireframing is the stage where you take a concept or design and shape it into something
tangible so that you can thoroughly review your work with users and stakeholders and ensure
it makes sense.

Fig. 5.17 UI Mock-ups

Creating Wireframes gives Designers the flexibility to play around and do lot of
Experimentation. Prototyping helps to review and refine it with the help of User Feedback to
turn it into a Polished version that can be Developed to an End Product.

This is often when UI designer comes into the picture to design the high-fidelitymock-ups of
the product. It is important to mention here that though UX and UI design needs different
skill sets, however Sometimes UX and UI are done by the same person.
Tools Used- There are a lot of tools in the market. some are free and for some you have to
pay. Check out this article where you would find 8 important UI tools that you can use to
create Designs.
Outcome: -
By the end of Step 5, you would get Mock-ups of your solution to tested with Target
Users.
Step 6: Test Design and Iterate
The next step is to go out and test the Design with end users to gather feedback on it. This
feedback will form the basis for further iterations and refinement. You must learn about how
they feel and think about it. Learn how they interact with the prototype. Pay attention on the
User interactions.
So, Test the Design, get a constructive feedback and iterate it. Get as much critical feedback
you can as it will help you to move faster in the Design Process. Additionally, it saves time,
effort and money by catching bugs errors usability issues, that you might not have anticipated.

Fig. 5.18Testing

You’ll get to learn if your solution has been validated or if it has to be improved. It might be
possible that end user will invalidate the solution and you will have to redefine the problem
by empathizing with user. And repeat the entire process again.

Some of the ways of conducting User Test are

1. Usability Testing
Usability testing evaluates the degree to which the system can be used by specified users with
effectiveness, efficiency and satisfaction in a specified context of use- ISO 9241 Ergonomics
of human-system interaction
It is a great method which allows you to improve the Usability of the Product. Usability refers
to the ease with which a user can use a product in order to achieve his/her goal and how useful
the Product is. A product which is high on usability makes it easy for user to accomplish
his/her goals.
2. Concept testing
When you have a big idea, it becomes important to check and evaluate whether or not it would
be accepted by people when launched in the market. Concept testing is done to evaluate
consumer acceptance for a new product idea.
Concept testing helps to validate as well as refine a product concept by getting feedback
directly from target market.
3. First Click Testing
First-click testing is the best way to improve your App/website designs. It allows you to
analyse where the User clicks on the screen when the website or app is shown to them.

4. Tree Testing

Tree testing is a usability technique for evaluating the ease with which information can be
found in a website. However, unlike Usability testing, Tree Testing is done on the simple
version of site structure.
5. Beta Testing
In Beta testing, you test a near-complete product/software/application with end users
(called Beta Testers). Before Launching the product in the market, enough tests need to be
carried out to test the functionalities and reporting bugs.
Outcome: -
By the end of Step 6, you would get a lot of User Inputs weather the solution solved user
problem and uncover Usability Issues. All of this information would be then used to iterate
the solution further.
UX Design process is both. It is iterative in nature and can be entirely unique to your business
and product. What it means is that the stages are going to look a lot different for you as
compared to somebody else. However, the goal remains the same which is to solve User
problems in the most effective and efficient manner. What is extremely important is to
comprehend the psychology of a user and using best UX practices as described in the article.
From Team members to stakeholders to Product managers to developers,
everybody contributes in the UX Design process by performing their tasks and duties. Hence,
as a UX Designer one of the most important skill that you must have is collaboration.

Furthermore, Strong communication and presentation skills; and to be able to articulate and
discuss your design decisions with team is important as well.

4. Research Methods and Tools

Gathering user data and feedback is a hectic and maddening process, especially if you’re in the middle
of pushing out new builds. But UX research methods serve as a way of streamlining the task a bit and
making the data you get more readable.

Interviews
Is sitting down with users and asking them extensive questions an old-fashioned and time-consuming
method to get information? Yes, it surely is. But is it also highly effective at getting answers that the
user wouldn’t provide to an automated test-box? You know it is or I wouldn’t be mentioning these as
a viable method.

It is important to mention that getting solid information requires the skills of a trained interviewer. I’m
no good at these, for example, but some of my colleagues are a godsend when it comes to handling in
code Group’s users. Without interviews, we wouldn’t know about some small issues with our early
designs because users often tend to omit things when filling out automated response forms. Some do
it out of laziness, some don’t want to harp on the problems too much, and some are just plain bored
by the unending survey form.

Automated Surveys
Oh, uhm, so about that time when I said survey forms are unending and not always as effective…
They are, sure, but they can also be a great way of getting info on things that an interviewer simply
wouldn’t think to ask. If a user is willing to engage with a lengthy survey, chances are you’ll get some
excellent data out of them. And even a short one can target the particular questions that are rote and
usually omitted in interviews. It might seem like an extra step (and, technically, sure, it is) but you
never know which question will bring you that 9gold nugget of info that you need for a breakthrough
in your design.

Now, it’s still pretty time-consuming to compile a survey but it’s pretty much a one-and-done task. A
good survey will get all the info you need and will only require small tweaks as the projects change.
Besides, you don’t necessarily have to do it all by hand… But more on that in the tools section.

Card Sorting
This is a fun one, though it’s mostly a tool for the early stages of your design. It’s a technique that
hinges on most people having the same idea of “what goes where”. Basically, we all “know” that the
Contact page should be placed at the end of your menu, not at the beginning. There’s no commandment
that forces us to do so, we just feel kind of icky when we see that page at the beginning of a menu.
This trained knowledge of placement is what the card testing relies on.

You present the user with several cards and ask them to arrange those in the “correct” or “optimal
order”. Odds are, with a large enough base, you’ll see some differences in the arrangement. However,
most will have similar setups and that’s how you glean information about placement. Ask users where
they’d want the most important elements to be, see how they “rank” them etc.

User Testing
There are two approaches to user testing — moderated and unmoderated. In one case you’ll have the
users in a controlled environment and will have a moderator who helps the users if necessary as well
as collects data. It’s good if your testers are new to the process or if you want them to have a more
intimate understanding of your design.

As for unmoderated user testing, it’s good for users that might feel more comfortable using the product
without any oversight. It’s not going to be optimal if your project is complicated and the user can’t get
the hang of it, of course. However, if you’re just trying to do design research for a website,
unmoderated might be the way to go.

There’s also the third approach, which makes traditionalists mad and works wonders if your budget
for research is lower than the temperatures in the Antarctic. Guerrilla testing will have you running
into coffee shops and asking people to test your site or app, be it for free or for a cup of coffee. On the
one hand, this will give a clear opinion from your average bystander. On the other hand, that average
bystander won’t know much about industry-specific projects so don’t expect a random person in the
park to solve the UX issues in your accounting software. Still, if the budget isn’t giving you much to
work with, UX guerrilla testing is a viable option.

Screen Recording
Since users often don’t consciously track their actions on a page, it can be hard to pinpoint which
elements they struggled with or what didn’t work as intended. By recording their interactions with the
website, you can see the faults for yourself. From time spent navigating to the length of a visit, this
data can help you work out some metrics that might not be available in the purest form otherwise. It
also protects you from forgetful users who might misremember their interactions.

Tools to Use

Now, these methods might be a great way to spend your research budget and, with enough time, get
your UX researcher to bring you perfection. But you don’t have to do handle these manually or beg
for a higher budget if you can’t afford skilled moderators or a UX researcher. With an array of tools
such as these at your disposal, you can be your own researcher.

Crazy Egg
With the Crazy Egg service, you can record every single thing a visitor does on the website, evaluating
their actions and seeing how well your sitemap works. By tracking random visitors to the site, you can
tweak things and try out different configurations with no bias that comes with moderated testing.

Wufoo
Remember when I said that you don’t have to do surveys by hand? Well, what else is there to say
except — Wufoo! This service allows you to create surveys really quickly, though it’s, perhaps, not
serving up the most appealing design (ironic, I know). If you’d prefer a second option, Type Form is
a good choice as well.

User Testing
If you want to run some tests but don’t have any users on hand, the User Testing surface lets you run
the test with an online userbase and get the results in a matter of minutes. Similar to it is the Verify
App and User Zoom. Ethnic is also an invaluable platform for getting the users on board.

UXPunk
Remember card sorting? It’s that thing I mentioned a long time ago, almost five paragraphs up, I’d
assume. Well, that one is available online as well. Just use UXPunk to start off!

5. Understanding User Needs and Goals:

How to recognise user needs Traditionally in government, user needs are identified when policy is
written. Services are designed based on this policy. This results in a large gap between the
understanding of user needs for the design of policy, and the understanding of those needs for the
design of services.
Our way of working asks government to look at our services from the users’ perspective.

For example, people experience several touchpoints with different areas of government when they
travel overseas. They may need to get a passport, check travel warnings or register their travel details.
All these add up to an entire service from the user’s perspective, despite being accessed from multiple
different government agencies.

When doing user research, we recognise user needs by focusing on people’s goals rather than their
preferences. Goals are the things that they need to do. Preferences are things they may want or like,
such as website style or colour.

A common misconception is that people are coming to interact with a website, when in fact they are
often coming to access a service.

People interact with services, not websites. They use our digital services when those services are
simple and fast.

Design to meet user needs

Services designed around user needs:

• are more likely to allow the user to complete the task they are trying to do, without support
• help more people get the right outcome, achieving government’s policy intent
• cost less to operate by reducing time and money spent on resolving problems

The current experience of a service might involve interacting with different products that may be
owned by different parts of government. The service you are designing and building needs to meet
the whole user experience with those products.

This makes the whole experience clearer and simpler for the user. Often you won’t meet their needs
if you work on a single product in isolation.

Think about the whole service, not just a product.

How to learn about user needs

You can learn about users and their needs by doing the following types of activities:

• interviewing and observing actual or likely users of the product

• talking to people who work with actual or likely users
• reviewing existing evidence

Treat any opinions or suggestions that don’t come from users as assumptions. Explore these in your
research.

Keep researching through each stage of the design and delivery process to make sure your service
continues to meet user needs.

Who to include in research

Groups to consider including in user research are people who:

• currently use the service

• don’t currently use the service but may need it in the future
• have problems using the service
• work in the service (for example, call centre staff)
• help others use the service (for example, caseworkers, legal professionals or charity workers)

When researching, focus on users who have problems using the existing service and its products.
This will help you create a simpler, clearer and faster service that more people can use.

Research wide then go narrow

For government services, it’s best to start wide and then narrow down your user research.

Begin by looking at as many different users of your service as possible. That way you’ll see the entire
spectrum of users, from the mainstream to the edges. You should aim to speak with as many of your
user groups as possible in the Discovery stage.

The mainstream users will show you what business as usual is for your service. You’ll see why they
are using products and how they are managing the processes.

At the extremes, you’ll see the groups of people who may be finding it difficult to access your service.
You’ll find out their current pain points as well as what is working well about the service. These pain
points might include things that are pushing them out of your service. For example, they may find
the service too difficult to navigate.

Other users might have workarounds for accessing your service. For example, they might use
websites to translate content into their preferred language.

Build the service so that it works for the people with the most barriers to accessing it. That way, you
can be sure you’re building it for everyone.

Define your participant criteria

First, brainstorm the different groups of people you need to include in your research by using
information from:

• existing research
• subject experts
• front line staff
• service data
• analytics
• general population statistics
• user groups that may have different experiences when using your product
• user personas (if available)

When you’ve defined your overall criteria, decide which groups you will include in each round of
research.
Specify target groups

Depending on your research objectives, your criteria might be:

• a particular demographic (for example, women under 30 years of age)

• a specific user group (for example, small business owners or job centre staff)
• specific life events (for example, users who have recently moved home or are looking for a
job)
• specific access needs (for example, people who use assistive technology)
• a specific level of digital skill (for example, users who have basic online skills)

Ask subject experts for information about target groups. They may know about groups that you
haven’t already included. They may also help you to get in touch with people who need extra support
to take part in your research.

Review your participant criteria to make sure they are relevant to your research questions. Do a gap
analysis to make sure you don’t miss important groups.

Outside of any specific criteria, always try to recruit a representative spread of:

• age
• gender
• social and economic status
• cultural and linguistic background
• education level

The research methods you use will determine the number of participants that you need. For example,
you’ll need:

• 4–8 participants per round of user research

• more than 250 participants for benchmarking

Make your research inclusive

You need to learn about all your users to build a good service. Find out about people with access
needs or who don’t currently use digital services.

Make sure you don’t exclude any users in the way you do research. Recruit participants that reflect
the population and choose accessible research locations.

Recruiting participants with access needs

You must conduct research to understand the experience of people with disability. Make sure you
find out their needs ahead of time so you can make sure they can take part. For example, they might
need to:

• bring someone with them

• use assistive technology
• bring a service dog
 Caption: A research dashboard showing which user groups research has been conducted with.

Researching with people who don’t use digital services

Who to include in your research

You should conduct research with people who have a mix of digital skills. It is important to speak
with people who have a low level of skill as they will help you understand support needs that are
the most difficult to meet. For example, some users may not be able to leave their homes, may not
have a computer or may live in an area with very poor internet. It is also important to conduct
research with people who have a high level of skills. They may still need support with an online
service or may have concerns about privacy and security.

When you’re researching with users who don’t or can’t use digital services you should focus on the
people who are current users of your service or who are likely to use it in future.

Include people in your research who get support to use digital services. For example, they may get
help from carers or support workers.

Things to remember when doing research

When carrying out your research, remember to:

• explore users’ digital support needs across all channels (including online and offline)
• hold the research in places where users use the service (for example, if they need to go to
the post office to get support, do it there)
• talk to users rather than relying on the opinions of third parties
• don’t rely on self-assessment of digital skills — wherever possible, get them assessed by an
expert user researcher
• show the on-screen service to all users so they can give you accurate feedback on the
support they would need
• find out the places where users seek support, including government contact centres,
libraries, friends and family, trade bodies, paid intermediaries, charities or colleagues

Share what you know about users

Once you’ve learned about the different kinds of users of your service, present your findings. Do it
in a way that’s easy for others to understand and share.

You can present your findings by creating:

• experience maps that show how users interact with existing services
• user profiles that describe groups of users with similar behaviours and needs
• case studies that explore individual experiences
Writing user needs

Once you have a good understanding of your users’ needs, write them down. You can then add
them to your descriptions of users.

User needs are usually written in the format:

• I need/want/expect to … (what does the user want to do?)

• so that … (why does the user want to do this?)

You can add:

• as a/an … (which type of user has this need?)

• when … (what triggers the user’s need?)
• because … (is the user limited by any circumstances?)

Write user needs from the user’s perspective. Use words that people would recognise and use
themselves. For example:

‘As an Australian I need a passport so that I can go overseas and prove who I am.’

Prioritise your user needs by focusing on what’s most important for your users so you don’t create
an unmanageable list of user needs.

Validating user needs

User needs should:

• be described in the user’s words

• be based on evidence from user research, not assumptions
• focus on the user’s problem rather than possible solutions

As you progress through the service design and delivery stages, confirm and refine user needs.

Show the user needs

You should share your users’ needs with everyone in your service including colleagues and
stakeholders.

When presenting user needs, it can be helpful to group them by:

• audience, user type or persona (for example, new parent, caseworker or small business)
• stage in a process (for example, register, apply or interview)
• function (for example, identity, payments or licensing)

The more you share, the more people will learn about your users and what they need from your
service. They’ll also ask questions, spot gaps and comment on what you’re doing. All of these will
help you iterate your user needs and ultimately design a better service.
 User research dashboard
‘We have a user research dashboard because it’s a big priority for our team. To make sure everyone
is out there doing research regularly. It helps us make sure we are focusing on meeting user needs.’
— Developer.

6. UX DESIGN PROCESS
We apply design thinking to product design, we would follow a UX process with the following
five key phases:

• Product definition
• Research
• Analysis
• Design
• Validation

Fig. 5.19 UX Design Process

The UX design process consists of five key phases: product definition, research, analysis, design, and
validation. Image credit Nick Babich.
1. Product definition

One of the most important phases in UX design is actually done before the product team creates
anything. Before you can build a product, you need to understand its context for existence. The
product definition phase sets the foundation for the final product. During this phase, UX designers
brainstorm around the product at the highest level (basically, the concept of the product) with
stakeholders.
 This phase usually includes:

• Stakeholder interviews: interviewing key stakeholders to gather insights about business goals.
• Value proposition mapping: thinking about the key aspects and value propositions of the product:
what it is, who will use it, and why they will use it. Value propositions help the team and
stakeholders create consensus around what the product will be and how to match user and business
needs.
• Concept sketching: creating an early mockup of the future product (can be low-fidelity paper
sketches of the product’s architecture).

This phase typically ends up with a project kick-off meeting. The kick-off meeting brings all the
key players together to set proper expectations both for the product team and stakeholders. It covers
the high-level outline of the product purpose, team structure (who will design and develop the
product), communication channels (how they will work together), and what stakeholders’
expectations are (such as KPIs and how to measure the success of the product).

2. Product research

Once you’ve defined your idea, the product team moves to the research phase. This phase typically
includes both user research and market research. Seasoned product designers think of research as
a good investment—good research informs design decisions and investing in research early in the
process can save a lot of time and money down the road.

The product research phase is probably the most variable between projects—it depends on the
complexity of the product, timing, available resources, and many other factors. This phase can
include:

• Individual in-depth interviews (IDI). A great product experience starts with a good
understanding of the users. In-depth interviews provide qualitative data about the target audience,
such as their needs, wants, fears, motivations, and behavior.
• Competitive research. Research helps UX designers understand industry standards and identify
opportunities for the product within its particular niche.
 3. Analysis

The aim of the analysis phase is to draw insights from data collected during the research phase,
moving from “what” users want/think/need to “why” they want/think/need it. During this phase,
designers confirm that the team’s most important assumptions are correct.

This phase of the UX process usually includes:

• Creating user personas. Personas are fictional characters that represent the different user types
for your product. As you design your product, you can reference these personas as realistic
representations of your target audience.

Fig. 5.20 Example of user persona

Example of a user persona, showcasing the person’s gender, age, motivations, and more. Image
credit Xtensio.
• Creating user stories. A user story is a tool that helps designers understand the product/service
interactions from the user’s point of view. It’s usually defined with the following structure: “As a
[user] I want to [goal to achieve] so that [motivation].”
• Storyboarding. Storyboarding is a tool that helps designers connect user personas and user
stories. As the name suggests, it’s essentially a story about a user interacting with your product.

4. Design

When users’ wants, needs, and expectations from a product are clear, product designers move to
the design phase. At this step, product teams work on various activities, from creating information
architecture (IA) to the actual UI design. An effective design phase is both highly collaborative (it
requires active participation from all team players involved in product design) and iterative
(meaning that it cycles back upon itself to validate ideas).

The design phase usually includes:

• Sketching. Sketching is the easiest and fastest way to visualize our ideas. You can do this by
drawing by hand on a piece of paper, on a whiteboard, or in a digital tool. It’s very useful during
brainstorming sessions because it can help the team visualize a broad range of design solutions
before deciding which one to go with.
• Creating wireframes. A wireframe is a tool that helps designers visualize the basic structure of a
future page, including the key elements and how they fit together. Wireframing acts as the
backbone of the product, and designers often use them as a foundation for mockups and prototypes.
• Creating prototypes. While wireframes are mostly about structure and visual hierarchy (the look),
prototypes are about the actual interaction experience (the look and feel). A prototype is like a
simulation of the product and may be low-fidelity (clickable wireframes) to high-fidelity (coded
prototypes).
 Fig. 5.21 Adobe XD

With Adobe XD, you can turn static mockups into a prototype by creating a connection between
individual screens. Image credit Adobe XD.

• Creating a design specification. Design specifications contain all of the visual design assets
required for developers to turn prototypes into a working product.
• Creating design systems. For large projects, designers typically create a system of components,
patterns, and styles that help both designers and developers stay on the same page regarding the
design.

5. Validation (Testing)

Validation is an essential step in the design process because it helps teams understand whether
their design works for their users. Usually, the validation phase starts after the high-fidelity design
is ready, since testing with high-fidelity designs provides more valuable feedback from end-users).
During a series of user testing sessions, the team validates the product with both stakeholders and
end-users.

The validation phase of the UX process may include the following activities:
• “Eat your own dogfood.” Once the design team has iterated the product to the point where it’s
usable, it’s time to test the product in-house. Team members should try using the product on a
regular basis, completing routine operations to uncover any major usability flaws.
• Testing sessions. User testing sessions with people who represent your target audience are very
important. There are many different formats to try, including moderated/unmoderated usability
testing, focus groups, beta testing, and A/B testing.
• Surveys. Surveys are a great tool for capturing both quantitative and qualitative information from
real-world users. UX designers can add open-ended questions like “What part of the product you
dislike?” to get user opinions on specific features.
• Analytics. Quantitative data (clicks, navigation time, search queries, etc.) from an analytics tool
can be very helpful to uncover how users interact with your product.

How to improve the UX design process

Now that you’ve seen how each phase connects, let’s consider some helpful tips for improving the
UX design process:

Embrace the iterative nature of the design process

UX design isn’t a linear process; it’s an iterative process. The phases of the UX process have
considerable overlap and usually there is a lot of back-and-forth. Take research and design as an
example: as the UX designer learns more about the problem and the users, he or she might want to
rethink some design decisions. It’s important to accept the fact that your design will never be
perfect, so take your time to research the needs of your users and make your product a bit better
for them.

7. VISUAL DESIGN PRINCIPLES

Visual-design principles inform us how design elements such as line, shape, color, grid, or space go
together to create well-rounded and thoughtful visuals.
This article defines 5 visual-design principles that impact UX:

1. Scale
2. Visual hierarchy
3. Balance
4. Contrast
5. Gestalt

Fig. 5.22 Five visual-design principles can drive engagement and increase usability.

1. Scale

This principle is commonly used: almost every good visual design takes advantage of it.
Definition: The principle of scale refers to using relative size to signal importance and rank in a
composition.

In other words, when this principle is used properly, the most important elements in a design are
bigger than the ones that are less important. The reason behind this principle is simple: when
something is big, it’s more likely to be noticed.

A visually pleasing design generally uses no more than 3 different sizes. Having a range of differently
sized elements will not only create variety within your layout, but it will also establish a visual
hierarchy (see next principle) on the page. Be sure to emphasize the most important aspect of your
design by making them biggest.

When the principle of scale is used properly and the right elements are emphasized, users will easily
parse the visual and know how to use it.

Fig. 5.23 Medium for iphone

Popular articles are visually larger than other articles. The scale directs users to potentially more-
interesting article.
 Fig. 5.24 In this parking garage in Cracow, the most important piece of information (zone H
—which is where you currently are in the parking garage), is the largest in size. (Image
source: www.behance.com)

2. Visual Hierarchy

A layout with a good visual hierarchy will be easily understood by your users.

Definition: The principle of visual hierarchy refers to guiding the eye on the page so that it attends
to different design elements in the order of their importance.

Visual hierarchy can be implemented through variations in scale, value, color, spacing, placement,
and a variety of other signals.

Visual hierarchy controls the delivery of the experience. If you have a hard time figuring out where
to look on a page, it’s more than likely that its layout is missing a clear visual hierarchy.

To create a clear visual hierarchy, use 2–3 typeface sizes to indicate to users what pieces of content
are most important or at the highest level in the page’s mini information architecture. Or, consider
using bright colors for important items and muted colors for less important ones.

Scale can also help define the visual hierarchy, so incorporate various scales for your different design
elements. A general rule of thumb is to include small, medium, and large components in the design.
 Fig. 5.24 Medium mobile app
There is a clear visual hierarchy of title, subtitle, and body text. Each component of the article is in
a type size equal to its importance.
 Fig. 5.25 Uber mobile app
The visual hierarchy is clear in Uber’s mobile app. The screen is split in half between the map and
input form (bottom half of screen), which enforces the thought that these components are equally
important to the user. The eye is immediately drawn to the Where to? field because of its gray
background, then to the recent locations below it, which are slightly smaller in font size.
 Fig. 5.26 Dropbox mobile app
The visual hierarchy is less clear in Drop box’s mobile app. Even though the explanatory text is lower
in size than the file name, it’s hard to distinguish among the different files. Thumbnails provide an
additional layer to the hierarchy, but their presence depends on the available file types. Users
ultimately have to do a lot of parsing and reading to find the folder or file they are looking for.

3. Balance

Balance is like a seesaw: instead of weight, you are balancing design elements.

Definition: The principle of balance refers to a satisfying arrangement or proportion of design

elements. Balance occurs when there is an equally distributed (but not necessarily symmetrical)
amount of visual signal on both sides of an imaginary axis going through the middle of the screen.
This axis is often vertical but can also be horizontal.

Just like when balancing weight, if you were to have one small design element and one large design
element on the two sides of the axis, the design would feel a bit unbalanced. The area taken by the
design element matters when creating balance, not just the number of elements.

The imaginary axis you establish on your visual will be the reference point for how to organize your
layout and will help you understand the current state of balance on your visual. In a balanced design,
no one area draws your eye so much that you can’t see the other areas (even though some elements
might carry more visual weight and be focal points). Balance can be:

• Symmetrical: elements are symmetrically distributed relative to the central imaginary axis
• Asymmetrical: elements are asymmetrically distributed relative to the central axis
• Radial: elements radiate out from a central, common point in a circular direction.

The kind of balance you use in your visual depends on what you want to convey. Asymmetry is
dynamic and engaging. It creates a sense of energy and movement. Symmetry is quiet and static.
Radial balance will always lead the eye to the center of the composition.
 Fig. 5.27 the Hub Style Exploration
The composition feels stable, which is especially appropriate when you’re looking for a job you love.
The balance here is symmetrical. If you were to draw an imaginary vertical axis down the center of
the website, elements are distributed equally on both sides of the axis. (Image source: dribbble.com)

Fig. 5.28 Nike

This page is asymmetrically balanced, giving a sense of energy and movement that is fitting to Nike’s
brand. If you were to draw a vertical axis down the center on this visual, the number of elements is
about the same on both sides of the axis. However, the difference is that they are not identical and in
the same exact locations. Even though there is technically a bit more text on the left side of the shoe,
it is balanced out with the larger text on the right that takes up more space and visual weight, thus
making them appear pretty similar.

Fig. 5.29 Brathwait wrist watch

This classic watch is balanced radially. The eye is immediately drawn to the center of the watch face
and all visual weight is distributed equally, regardless of where the imaginary axis is drawn.

Fig. 5.30 This editorial spread is not balanced. If you were to draw a vertical axis
down the page, elements are not equally distributed on both sides of the axis. (Image
source: www.behance.net)

4. Contrast
This is another commonly used principle that makes certain parts of your design stand out to your
users.

Definition: The principle of contrast refers to the juxtaposition of visually dissimilar elements in
order to convey the fact that these elements are different (e.g., belong in different categories, have
different functions, behave differently).

In other words, contrast provides the eye with a noticeable difference (e.g., in size or color) between
two objects (or between two sets of objects) in order to emphasize that they are distinct.

The principle of contrast is often applied through color. For example, red is frequently used in UI
designs, especially on iOS, to signify deleting. The bright color signals that a red element is different
from the rest.

Fig. 5.31 Reminders app on iOS

The color red, which has high contrast to its surrounding context, is reserved for deleting.
Often, in UX the word “contrast” brings to mind the contrast between text and its background.
Sometimes designers deliberately decrease the text contrast in order to deemphasize less important
text. But this approach is dangerous — reducing text contrast also reduces legibility and may make
your content inaccessible. Use a color-contrast checker to ensure that your content can still be read
by all your target users.

Fig. 5.32 Greenhouse Juice Co: The legibility of the text on the bottle relies on the color of
juice. Although the contrast works beautifully for some juices, labels for bottles with light
colored juices are nearly impossible to read. (Image source: www.instagram.com)

5. Gestalt Principles

These are a set of principles that were established in the early twentieth century by the Gestalt
psychologists. They capture how humans make sense of images.

Definition: Gestalt principles explain how humans simplify and organize complex images that
consist of many elements, by subconsciously arranging the parts into an organized system that creates
a whole, rather than interpreting them as a series of disparate elements. In other words, Gestalt
principles capture our tendency to perceive the whole as opposed to the individual elements.

There are several Gestalt principles, including similarity, continuation, closure, proximity, common
region, figure/ground, and symmetry and order. Proximity is especially important for UX — it refers
to the fact that items that are visually closer together are perceived as part of the same group.

8. INFORMATION DESIGN AND VISUALIZATION

Information design is data used as a storytelling tool. It’s data with a purpose. Therefore,
Information visualizations are more about informing the viewer about a data set and it’s specific
parts. Conclusions have already been made for that data, and it’s being presented in a
snackable design. Data visualizations are raw data visualized in a way that permits the viewer to make
their own conclusions. Data visualizations can be ever-evolving visuals with new data and
information being added regularly.
 They can also include data from a specific point in time and can be organized in a way that
inspires a distinctive reaction. Nevertheless, it can still be analyzed and direct viewers to their
own conclusions. Not only must information be presented in a clear manner, but users also need
to navigate the information without it being overwhelming or confusing.

Fig. 5.33 Design process of Project

Let’s take a look at how even a simple information design project follows the user experience design
process.

Imagine for example, a large set of safety posters to be displayed on a factory floor.

User Research

The user research step is all about getting to know the user and what their needs are. It’s all about
getting to know them in their environment and figuring out the best way to help.

1. Empathize

The first step of user research is to empathize with the user. In our example, the information designer
visits the factory floor where the posters will be displayed. They will meet the workers and talk to
them about what their days and movements in the factory look like.

In cases where it’s not possible to do such deep research, the designer asks more questions to get a
sense of what the factory floor is like. If they are only talking to the floor manager, the designer
insists on talking to the union leader of the workforce.
2. Define
This is the stage where the problem to be solved is defined. It’s likely that the problem as a whole
has been presented from the beginning.
In this case, “we need safety posters on the factory floor.”
But only after the designer communicates with the client and the factory workers, will the real
problems show themselves.
For example, a few problems that could arise are:
• The previous posters weren’t laminated so the information faded fast under the lights.
• They didn’t have enough visuals and nobody took the time to read all the instructions.
• The posters were posted in a section of the factory floor where few workers walked past so
not everyone saw them.
Ideate
After the user research, it’s time to come up with some ideas for the safety posters project. The
questions to answer could be:
• How big should the posters be?
• How should the information be visualized so it’s attractive and easy to read?
• Where should the posters be placed so that they are not missed?
• Can we think of any other design techniques to make this project a success for all parties
involved
Prototype
Once the questions have been answered, the designer puts together a first draft or prototype. It’s
displayed in a specific place, for example, the hall outside the bathrooms. They are placed at a general
eye-level, laminated, and full of visual instructions.
Test
No information design project is finished until it has been tested by the users. After a few days with
prototypes on the floor, the information designer will ask for feedback.
One possibility is that the posters are placed on the wall next to the doors of the bathroom, therefore
when the workers pass by them on their way to the bathroom they are usually in a hurry and don’t
stop to look.

If the posters are put on the opposite wall, they will see them on the way out and will be in a more
relaxed state to stop and study the posters. Of course after a while, employees will already know the
information and stop looking.

Nevertheless, the posters must stay full of color and attractive for newly hired workers.

This process is followed by all information design projects big or small. It’s the number one proven
way to make sure the visualizations do their job well.

Safety posters are not the only type of information design. In fact, the possibilities are far-reaching.
Let’s take a look at some of the most common types.
 Fig. 5.34Types of Information Design

Information and data are all around us. Everything we do collects data.

For example, our devices are constantly collecting data about how we shop, communicate, what we
like to do, how our health is, and what our life, in general, is like.

Information design takes on an important role in this flow of data and information. It’s essentially a
way of putting together chunks of relevant information to make it easy to understand for users.

Information design is often visual, but can also be sensory. Some types are even physically interactive
through sound and smell. The best examples also take accessibility into account.

9. INTERACTION DESIGN
The purpose of interaction design is to create a great user experience. That’s why most of the UI
disciplines require understanding and hands-on experience of interaction design principles. After all,
it’s about designing for the entire interconnected system: the device, interface, context, environment,
and people. Interaction designers strive to create meaningful relationships between people and the
products and services they use. It may include computers, mobile devices, gadgets, appliances, and
more.
It is important to understand ux design best practices while developing complex web and mobile
applications. These are the key elements that product designers should not neglect while creating an
interface for the user.

The 10 most important interaction design principles are-

1. UX: Match user experience and expectations

2. Consistent design: Maintain consistency throughout the application
3. Functionality: Follow functional minimalism
4. Cognition: Reduce cognitive loads/mental pressure to understand the application
5. Engagement: Design interactively such that it keeps the user engaged.
6. User control: Allow the user to control, trust, and explore
7. Perceivability: Invite interactions through intuitions and interactive media
8. Learnability: Make user interactions easy to learn and remember
9. Error handling: Take care to prevent errors, if they occur make sure to detect and recover them.
10. Affordability: Simulate actions by taking inspiration from usual and physical world interactions.

10 Important Interaction Design Principles

#1 Match user experience and expectations

By matching the sequence of steps, layout of information, and terminology used with the expectation
and prior experiences of the users, designers can reduce the friction and discomfort of learning a new
system.

You can match your audience’s prior experiences and expectations by using common conventions or
UI patterns, for example, Hitee Chatbot.

#2 Consistency
Along with matching people’s expectations through terminology, layout, and interactions, the design
should be consistent throughout the process and between related applications.

By maintaining consistency, you are helping users learn more quickly. You can re-apply their prior
experiences from one part of an application to another to maintain consistency throughout the design.
Design consistency is also an aid to intuitive interfaces.

Bonus – you can use the inconsistencies to indicate to users where things might not work the way
they expect. Breaking consistency is similar to knowing when to be unconventional.

#3 Functional minimalism
“Everything should be made as simple as possible, but no simpler.”

Albert Einstein
The range of possible actions should be no more than is absolutely necessary. Providing too many
options will detract the primary function and reduce usability by overwhelming the user with choices.
To achieve the Zen of functional minimalism, you should-
1. Avoid unnecessary features and functions
2. Break complex tasks into manageable sub-tasks
3. Limit functions rather than the user experience.

Fig 5.35 Interaction design

#4 Cognitive loads
Cognition refers to the “process of thoughts.” A good user interactive design minimizes the user’s
“effort to think” to complete a task. Another way to put this is that a good assistant uses his skills to
help the master focus on his skills.

For instance, while designing an interactive interface, we need to understand how much concentration
a task requires to complete it. Accordingly, you can design the UI that reduces the cognitive load as
much as possible.

Here’s a technique to reduce users’ “thinking work.” Focus on what the computer is good at and build
a system that utilizes its abilities to the fullest. Remember, computers are good at-

• Maths
• Remembering things
• Keeping track of things
• Comparing things
• Spell Checking and spotting/correcting errors
The point is – by knowing the attributes of users and products, one can create a design for a better
user experience.

#5 Engagement
In terms of user experience, engagement is the measure of the extent to which the user has a positive
experience with your product. An engaging experience is not only enjoyable but also easier and
productive. Engagement is subjective to the system. I.e. your design must engage with the desired
audience. For instance, what appeals to teenagers might be irrelevant to their grandparents. Apart
from aligning your design for the appropriate audience, achieving and creating control is the key.
The interaction design principles state that users should always feel like they’re in control of the
experience. They must constantly experience a sense of achievement through positive
feedback/results or feel like they’ve created something.

In his book “Flow,” Mihaly Csikszentmihalyi describes a state of optimal experience where people
are so engaged in the activity that the rest of the world falls away. Flow is what we’re looking to
achieve through engaging interactions. We should allow users to concentrate on their work and not
on the user interface. In short, stay out of the way!

#6 Control, trust, and explorability

Good interaction design should incorporate control, trust, and explorability to any system. If users
feel in control of the process, they’ll be more comfortable using the system. If the user is comfortable
and in control, they’ll trust the system and believe that the application will prevent them from making
an unrecoverable error or from feeling stupid. Trust inspires confidence and with confidence, the user
is free to explore further. Intuitive interfaces are extremely good at stimulating users to navigate and
explore the app.

#7 Perceivability
People are aware of the opportunity to interact with interactive media. As interface designers, we
must avoid developing hidden interactions, which decrease the usability, efficiency, and user
experiences. In other words, people should not have to guess or look for opportunities to interact.

When developing interactive media, users should have the ability to review an interface and identify
where they can interact. We must remember that not everyone experiences and interacts with
interface in the same way others do. In the process of interaction design, make it a habit to provide
hints and indicators like buttons, icons, textures, textiles, etc. Let the user see that these visual cues
can be clicked or tapped with their fingers. Always consider the usability and accessibility of the
interactive media and how the user sees and perceives the objects in the interface.

#8 Learnability
Another important interaction design principle is inducing the ability to learn to use the interface
easily. In other words, users should be able to learn to use the interface in the first attempt and should
not face issues using it again. Please note that engaging interfaces allow users to easily learn and
remember the interactions.
Even though simple interfaces may require a certain amount of experience to learn, learnability makes
interaction intuitive. People tend to interact with an interface similar to other interfaces. This is the
reason why we must understand the process of interaction design thoroughly and the importance of
design patterns and consistency.
Intuitive interface design allows users to learn to use the interface without much effort and gives them
a sense of achievement. They feel smart and capable of grasping and utilizing newer interfaces. In a
nutshell, product designers should let the user feel confident while navigating through the interface.
#9 Error prevention, detection, and recovery
The best way to reduce the number of errors a user makes is to anticipate possible mistakes and
prevent them from happening in the first place. If the errors are unavoidable, we need to make them
easy to spot and help the user to recover from them quickly and without unnecessary friction.
 Error prevention techniques-
• Disabling functions that aren’t relevant to the user
• Using appropriate controls to constrain inputs (e.g. radio buttons, dropdowns, etc.)
• Providing clear instructions and preemptive help
• As a last resort, provide clear warning messages.
How to handle application errors through design?
Anticipate possible errors and provide feedback that helps users verify that-
1. They’ve done what they intended to do.
2. What they intended to do was correct.
Please note that providing feedback by changing the visuals of the object is more noticeable than a
written message.
Error recovery techniques –
If the error is unavoidable, provide direction to the user to recover from it. For example, you can
provide “back,” “undo,” or “cancel” buttons.
If a specific action is irreversible, you should flag it “critical” and make the user confirm first to
prevent slip-ups. Alternatively, you can create a system that naturally defaults to a less harmful state.
For example, closing a document without saving it should be intelligent enough to know the unlikely
behavior of the user. It can either auto-save or display a warning.

#10 Affordance
Affordance is the quality of an object that allows an individual to perform an action. For example, a
standard household light switch appears innately clickable.
The point is – users should get a clue about how to use an abject through its physical appearance.
While designing user interfaces, you can achieve affordance either by simulating ‘physical world’
affordances (e.g. buttons or switches) or keeping consistency with web standards and interface design
elements (e.g. underlined links or default button styles). The thing is, in an intuitive interface, users
are able to navigate and use the functionalities of the application without any formal training.
Interaction design is not always about creating a better interface for the users; it is also about using
technology in the way people want. It is necessary to know the target users to design a desirable
product for them. Interactive design is the basis for the success of any product. These 10 interaction
design principles are based on the study and experiences of our team in designing mobile and web
apps for a broad product portfolio and on multiple mobile and web platforms.

10. PROTOTYPING TOOLS

By definition, a prototype is an early sample, model, or release of a product built for the purpose of
testing a concept or process. Generally, the prototype is used to evaluate a new product or concept
design for its usefulness in the real world.
Additionally, the main motive behind a prototype is to validate the design with your target market by
collecting feedback that will guide you during product development.
Importance of prototyping
Would you ever walk into a stakeholder meeting to present your concept without first getting
customer feedback? Hopefully not. Doing so could undermine your credibility and capacity to defend
your design.
Communicating and justifying the value, look, and feel of your product to stakeholders can be a
challenge. But through prototyping you’re able to:
• Better depict the intent of your final design
• Defend your design decisions with customer feedback
• Save time and money by making changes early rather than in final development
• Feel confident that what your presenting has a strong product-market fit
 Once you’ve bought into the value of prototyping, how do you design your mobile app,
website, online forms, and various other prototypes in a way you can get in front of your customers?
The best prototyping tools can make all the difference.
Best prototyping tools for UI/UX designers
To help you select the best prototyping tool for you and your business, here’s a list of five of the most
popular, affordable, and accessible solutions you can use today. By no means is this list
comprehensive, but we’ve compiled some of our favorites for your consideration.
1. InVision: best prototyping tool for building exceptional products in one, connected workflow

Fig 5.36 InVision

InVision makes it easy to create interactive prototypes. Simply upload static screenshots and create
clickable prototypes your users can interact with and understand. The app runs on the web and works
well simplifying the workflow between designers and other stakeholding teams.
• Create rich interactive prototypes that allow for rapid iteration
• Seamlessly communicate, gather feedback, and advance projects
• Compatibility with most popular graphics file formats like PNG, GIF, PSD, JPG, and others
• Pricing: Free to $100/month
2. Balsamiq: best prototyping tool for building wireframes
Balsamiq helps you quickly design mockups that are great for sketching and wireframing. With
excellent ease of use, a great widget library, and its cloud-based software, it makes team collaboration
easy.
• Allows for quick wireframing so you can learn fast and fail faster
• Minimal learning curve with powerful technology
• Drag and drop simplicity
• Pricing: $9-$199/month, discounts for annual subscriptions
3. Justinmind: best all-in-one prototyping tool for web and mobile apps
Justinmind is an all-in-one prototyping tool for web and mobile apps that helps you build wireframes
to highly interactive prototypes without any coding. Justinmind lets you design from scratch and
leverage a full range of web interactions and mobile gestures, so you can focus on building
exceptional user experiences.
• Responsive prototyping that ensures your designs adapt to fit multiple screen resolutions
• Prototype smart forms and data lists without writing code
• Free, ready-made, regularly-updated UI kits for web and mobile
• Pricing: $19-$49/month, discounts for annual subscriptions\
4. Figma: best prototyping tool for designing collaborative
Figma is truly a one-tool solution for all of your design needs. Thanks to real-time collaboration,
web-based functionality, and exceptional price-to-value, Figma is rising through the ranks and
gaining traction with design teams.
• Easy switching between design and prototype modes
• Quick sharing and real-time feedback
• Powerful editing features
• Pricing: Free to $45/month. Some plans are available with annual pricing only.
5. Adobe XD: best prototyping tool for enterprise business
Wireframing, designing, prototyping, presenting, and sharing amazing experiences for web, mobile,
voice, and more— Adobe XD is your all in one app. Adobe XD provides you access to all your assets
in one place, eliminates tedious manual tasks, create experiences that are adaptable to any size screen,
and integrates seamlessly with the UserTesting platform.
• High-fidelity interactions
• Integration with the other Adobe products you already use
• Real-time viewing, commenting, and sharing capabilities
• Pricing: Free to $23/month

11. USABILITY TEST

Usability testing refers to evaluating a product or service by testing it with representative users.
Typically, during a test, participants will try to complete typical tasks while observers watch, listen
and takes notes. The goal is to identify any usability problems, collect qualitative and quantitative
data and determine the participant's satisfaction with the product.
To run an effective usability test, you need to develop a solid test plan, recruit participants , and
then analyze and report your findings.
Benefits of Usability Testing
Usability testing lets the design and development teams identify problems before they are coded. The
earlier issues are identified and fixed, the less expensive the fixes will be in terms of both staff time
and possible impact to the schedule. During a usability test, you will:
• Learn if participants are able to complete specified tasks successfully and
• Identify how long it takes to complete specified tasks
• Find out how satisfied participants are with your Web site or other product
• Identify changes required to improve user performance and satisfaction
• And analyze the performance to see if it meets your usability objectives
You Do Not Need a Formal Lab
Effective Usability Testing does not require a formal usability lab for testing. You can do effective
usability testing in any of these settings:
• Fixed laboratory having two or three connected rooms outfitted with audio-visual equipment
• Room with portable recording equipment
• Room with no recording equipment, as long as someone is observing the user and taking notes
• Remotely, with the user in a different location (either moderated or unmoderated)
Factors Affecting Cost
Your testing costs depend on

• Type of testing performed

• Size of the team assembled for testing
• Number of participants for testing
• Number of days you will be testing
Remember to budget for more than one usability test. Building usability into a Web site (or any
product) is an iterative process. Consider these elements when budgeting for usability testing:

• Time: You will need time to plan the usability test. It will take the usability specialist and the
team time to become familiar with the site and pilot test the test scenarios. Be sure to budget in
 time for this test prep as well as running tests, analyzing the data, writing the report, and
presenting the findings.
• Recruiting Costs: Consider how or where you will recruit your participants. You will either
need to allow for staff time to recruit or engage a recruiting firm to schedule participants for you
based on the requirements.
• Participant Compensation: If you will be compensating participants for their time or travel,
factor that into your testing budget.
• Rental Costs: If you do not have monitoring or recording equipment, you will need to budget
for rental costs for the lab or other equipment. You may also need to secure a location for testing,
a conference room for example, so consider this as well.

12. USER INTERFACE COMPONENTS

When designing your interface, try to be consistent and predictable in your choice of interface
elements. Whether they are aware of it or not, users have become familiar with elements acting in a
certain way, so choosing to adopt those elements when appropriate will help with task completion,
efficiency, and satisfaction.

Interface elements include but are not limited to:

• Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text
fields, date field
• Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
• Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal
windows
• Containers: accordion

Input Controls

Element Description Examples

Checkboxes Checkboxes allow the user to

select one or more options from
a set. It is usually best to present
checkboxes in a vertical list.
More than one column is
acceptable as well if the list is
Element Description Examples

long enough that it might require

scrolling or if comparison of
terms might be necessary.

Radio Radio buttons are used to allow

buttons users to select one item at a time.

Dropdown Dropdown lists allow users to

lists select one item at a time,
similarly to radio buttons, but
are more compact allowing you
to save space. Consider adding
text to the field, such as ‘Select
one’ to help the user recognize
the necessary action.

List boxes List boxes, like checkboxes,

allow users to select a multiple
items at a time,but are more
compact and can support a
longer list of options if needed.

Buttons A button indicates an action

upon touch and is typically
labeled using text, an icon, or
both.
 Element Description Examples

Dropdown The dropdown button consists

Button of a button that when clicked
displays a drop-down list of
mutually exclusive items.

Toggles A toggle button allows the user

to change a setting between two
states. They are most effective
when the on/off states are
visually distinct.

Text fields Text fields allow users to enter

text. It can allow either a single
line or multiple lines of text.

Date and A date picker allows users to

time pickers select a date and/or time. By
using the picker, the information
is consistently formatted and
input into the system.

Navigational Components
Element Description Examples

Search Field A search box allows

users to enter a
keyword or phrase
(query) and submit
it to search the index
with the intention of
getting back the
most relevant
results. Typically
search fields are
single-line text
boxes and are often
accompanied by a
search button.

Breadcrumb Breadcrumbs allow

users to identify
their current
location within the
system by providing
a clickable trail of
proceeding pages to
navigate by.

Pagination Pagination divides

content up between
pages, and allows
users to skip
between pages or go
in order through the
content.
Element Description Examples

Tags Tags allow users to

find content in the
same
category. Some
tagging systems
also allow users to
apply their own tags
to content by
entering them into
the system.

Sliders A slider, also known

as a track bar,
allows users to set
or adjust a
value. When the
user changes the
value, it does not
change the format of
the interface or
other info on the
screen.
 Element Description Examples

Icons An icon is a
simplified image
serving as an
intuitive symbol
that is used to help
users to navigate the
system. Typically,
icons are
hyperlinked.

Image Image carousels

Carousel allow users to
browse through a set
of items and make a
selection of one if
they so choose.
Typically, the
images are
hyperlinked.

Information Components

Element Description Examples

Notifications A notification is an
update message that
announces
something new for
the user to see.
Notifications are
typically used to
Element Description Examples

indicate items such

as, the successful
completion of a
task, or an error or
warning message.

Progress A progress bar

Bars indicates where a
user is as they
advance through a
series of steps in a
process. Typically,
progress bars are
not clickable.

Tool Tips A tooltip allows a

user to see hints
when they hover
over an item
indicating the name
or purpose of the
item.
 Element Description Examples

Message A message box is a

Boxes small window that
provides
information to users
and requires them to
take an action
before they can
move forward.

Modal A modal window

Window requires users to
(pop-up) interact with it in
some way before
they can return to
the system.

Containers

Element Description Examples

Accordion An accordion is a vertically stacked list of items that utilizes

show/ hide functionality. When a label is clicked, it expands
the section showing the content within. There can have one or
more items showing at a time and may have default states that
reveal one or more sections without the user clicking
 13. TOOLS AND PROCESSES

Process improvement plays a very vital role in organizations. Lean Six Sigma is one means for
creating a deployment that is to improve the business. Through this effort there should be an upbeat
task of determining, analyzing and enhancing an organization’s business processes to achieve
optimization and new quality standards. Process improvement efforts should entail a systematic
approach that adheres to a certain methodology, where the specific approaches to accomplish this
task may differ.

When undertaking a process improvement endeavor, more efficient outcomes are expected. Process
improvement may involve a sequence of actions to attain new objectives and goals, like improving
performance, reducing costs and elevating profits. Such actions may follow a particular technique or
methodology to increase the odds of achieving successful results.

The following five tools should be included in these process improvement execution roadmaps:

1. Process Baselining and Process Comparisons

In general, four processes can be involved when baselining and determining how a process is
performing relative to other similar processes:

• Building Baseline – Create a clear business or organizational baseline. This effort would entail
defining the baseline about all the business aspects.

• Classifying Baseline – Determine all the organizations that might be compared for performance.
Different factors may enter into this decision; e.g., would it be beneficial to compare performance to
a leading organization within the same industry or one that has a similar culture.
• Do Comparison – Observe how organizational baselines compare. Comparisons should be made
statistically; e.g., a hypothesis of equality of means for a process-output response.
• Determine Baseline Differences – Identify the reasons for differences in performance. This
understanding can help an organization make adjustments to their process so that performance
improves.

2. Flowcharting
Flowcharting is one of the best tools for documenting and understanding various processes in an
organization. This tool allows for a detailed breakdown of processes to activities and events, as well
as describing logical relationships. By using flowcharts, an organization can better understand the
work efforts involved in all their undertakings.

For instance, the process of getting orders and encoding them in the computer system can be
represented more clearly by using a flowchart consisting of symbols that represent every event or
step in the process. These can be circles, boxes or other forms of shapes that are connected with lines
to direct the order or direction of the process. A good flowchart can help in communicating and
clarifying what is happening or what needs to take place in an organization.

3. Value-Stream Mapping
Value stream mapping provides a picture of work flow and information flow in an end-to-end process.
One can evaluate a current state and propose a future state that reduces organizational waste; i.e.,
 transport, inventory, motion, waiting, over production, over processing, and defects. Much can be
gained by examining a value-stream map; e.g., where improvement efforts or kaizen events should
focus to improve a current 30,000-foot-level baseline value-stream map’s performance metrics such
as lead time.

4. Cause and Effect Analysis

Problems can often be resolved by first exploring all possible causes. A cause-and-effect analysis
approach provides a structure for this assessment, which involves the consideration of six areas or
causes that can contribute to a characteristic response or effect: materials, machine, method,
personnel, measurement and environment.

With this approach for evaluating a problem, a solution might become immediately apparent. In other
cases, the potential cause may not be so obvious; however, statistical analyses of historical data can
be used to test-out various theories. This information can be used to provide insight as to what might
be done to improve a 30,000-foot-level process output baseline performance.

5. Hypothesis Testing
Hypothesis testing consists of a null hypothesis and alternative hypothesis where, for example, a null
hypothesis indicates equality between two process outputs and an alternative hypothesis indicates
non-equality. Through a hypothesis test, a decision is made on whether to reject a null hypothesis or
not reject a null hypothesis, with a risk of making an erroneous decision. Hypothesis tests can take
many formats. It is important to select the most appropriate hypothesis test for each situation.

QUESTION BANK
Questions (2 marks) BTL
S.No Competence
Level

1. Define UX design. Remember BTL1

Evaluate the method to improve UX skills Create BTL6

2.

Discuss the UX investigate Strategies. Analyze BTL4

3.
Devise the best tool to use for the researcher to develop the good Analyze
4. BTL4
UX design process.
Evaluate
Write one element Component of the Facebook interface that
5. improves content quality BTL5

Demonstrate the UX information needed to have before start

6. Understand BTL2
designing.

Compare and contrast UX and UI Analyze BTL4

7.
8. List out the example for usability test Analyze BTL4

Name Four basic components of User interface Remember BTL1

9.

Construct a Process Improvement Tool Evaluate BTL5

10.

Apply UX design process for pre-planning and production. Apply BTL3

11.

Construct Drop box’s responsive color system for UI Apply BTL3

12.
Decide whether Linear Layout using custom View and View Group Evaluate BTL5
13. object are in form of UI.
Find out 5 visual-design principles that can drive engagement and Remember BTL1
14. increase usability.
Choose a method that makes a good interaction design? Evaluate
15. BTL5

BT
S.No Questions (16 marks) Competence
Level

1. Describe the elements of UX design. Understand BTL2

Discuss the six step UX process by apply to any known web

2. Analyze BTL4
application design.
Gathering user data and feedback is a hectic process but UX research
3. methods serve as a way of streamlining the task a bit and making the Evaluate BTL5
data more readable justify.

4. Explain the levels of UX pyramid. Remember BTL1

Creating a Digital App or showing multiple steps to use a physical

product- Draw different sketches of the user interface on different
5. Create BTL6
piece of paper and simulate interactivity by linking and moving
series of paper on table.
Design the UX research methods for streamlining the task and
6. Evaluate BTL5
reading the data.

Classify the Navigational Components for UI Elements Understand BTL2

7.

Organize a prototyping tools for i) Frame X ii) MOCPLUS iDOC Apply

8. BTL3
with UX design.
 Construct process analysis tool for FMEA (failure modes effects Create
9. BTL6
analysis)
Utilize how the elements together build pages and app screens Apply
10. optimally and how to achieve unity, gestalt, hierarchy, balance, BTL3
contrast, scale, similarity of visual design.
Analyze
11. BTL4
Examine the five stages of UX Design process in order.

Justify if the labels “high” and “medium-high” are absent for each
pie chart. Do you think new website visitors would be able to
12. Evaluate BTL5
understand what each set of data implies for practice of information
design aims to address challenging scenarios of data to make sense?