SRI RAMAKRISHNA ENGINEERING COLLEGE

[Educational Service: SNR Sons Charitable Trust]

[Autonomous Institution, Reaccredited by NAAC with ‘A+’ Grade]
[Approved by AICTE and Permanently Affiliated to Anna University, Chennai]
[ISO 9001: 2015 Certified and all eligible programmes Accredited by NBA]
VATTAMALAIPALAYAM, N.G.G.O. COLONY POST, COIMBATORE – 641 022.

Department of Computer Science and Engineering

SUBJECT CODE & TITLE : 20CS2E45 – UI/UX

YEAR & BRANCH : III BE – CSE

COURSE Co-ORDINATOR : Dr. R. MADHUMATHI, ASP/CSE

07/12/24 UI/UX 1
 Course Description
COURSE OUTCOMES
On successful completion of the course, students will be able
to

CO1 : Summarize all stages of the UI/UX development process.

CO2 : Experiment with various visual design aspects.

CO3 : Theme the visual look and feel of the user experiences.
CO4: Create effective and compelling screen based experiences.

07/12/24 UI/UX 2
 Module I
FOUNDATIONAL ELEMENTS OF UI/UX

User Interface - The Relationship Between UI and UX - Roles

in UI/UX - A Brief Historical Overview of Interface. Formal
Elements of Interface Design - Design Before Design - Look
and Feel - Language as a design tool – Active Elements of
Interface Design - Static to Active - Functionality - Speed and
Style - Composition and Structure - Composing the Elements of
Interface Design.

07/12/24 UI/UX 3
 Module - II
USER EXPERIENCE DESIGN FOUNDATIONS

Ideation, Articulation, Development - Planning, Testing,

Researching, Mapping - Mapping Content –Mapping
Interaction -Non-Visual Paper Prototyping - Non-Visual User
Testing -Look and Feel/Visual Research. What Goes Where:
Getting real: Wireframes and Interfaces - Nielsen's Usability
Heuristics - Consistency and Details - Wireframe Map - Visual
Direction - Developing UI - Refining UI.

07/12/24 UI/UX 4
 Module - III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE

The User Experience Process - User-centric design - The

UX Phases - Waterfall vs. Agile - Web vs. App.
Determining Strategy: User Research - Inspiration -
Analytics - User Needs and Client Needs - Target Audience
- What is in and What is Out: Outlining Scope - Content and
Functionality. The Sitemap: Introduction to Sitemaps -
Information Architecture - Sitemap Concerns - annotated
process - Elements - Treejack Introduction – Treejack
Analysis.

07/12/24 UI/UX 5
 Module - IV
WEB DESIGNS: WIRE FRAMES TO PROTOTYPES

Introduction to Wireframes - Responsive Design:

Introduction and Primary navigation - Secondary and utility
navigation - Related content, inline links, indexes, and
search - Wayfinding - Common Form Elements – Homepage
Content Strategies - Examples of Homepage Content
Strategies - Wireframing Tools. The Mockup Phase: Visual
Mockups - Design Principles - Using whitespace to style a
form - Web Fonts - Web Typography: Creating Visual
Mockups. Putting it all Together: Clickable Prototypes -
Invision - Exporting Assets - Importing Assets and Creating
Hotspots - Hotspot Templates.

07/12/24 UI/UX 6
 LABORATORY EXPERIMENTS

1. Analyze an existing app and defining your app's functions step-by-

step
2. Experiments with Non-Visual Prototyping & User Testing
3. Create a generic prototype of any application both in Web vs. App
4. Test your sitemap using Treejack
5. Exploring Navigation Systems, Common Design Patterns, Design
Principles/Whitespace, Web Typography.

07/12/24 UI/UX 7
 Books
TEXT BOOKS
1. Buxton, B., Sketching User Experiences: Getting the Design Right and the Right
Design. Morgan Kaufmann, (2007).
2. Jesse James Garrett, The Elements of User Experience: User-centered Design for the
Web, New Riders; 2nd edition2010.

REFERENCES
1. Russ Unger, Carolyn Chandler, A Project Guide to UX Design: For User Experience
Designers in the Field Or in the Making, New Riders; 2nd edition, 2012.
2. Don Norman, The Design of Everyday Things, Basic Books; 2nd edition, 2013.
3. Everett N. McKay, UI is Communication: How to Design Intuitive, User Centered
Interfaces by Focusing on Effective Communication, Morgan Kaufmann; Illustrated
edition, 2013.
4. Dr. Erich Gamma, Ralph Johnson, Richard Helm and John Vlissides, Design Patterns:
Elements of Reusable Object - Oriented Software, Pearson, 2008.

07/12/24 UI/UX 8
 Reference Links
WEB REFERENCES
1. https://www.coursera.org/specializations/ui-ux-design
2. https://learnux.io/
3. https://www.sketch.com/

07/12/24 UI/UX 9
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
The User Experience Process
UX design (user experience design) is a digital product design methodology
to solve a human problem.

 This human-centered design approach ensures design teams make decisions

based on users’ needs rather than assumptions.

Empathy is at the core of this human-centered approach.

UX designers must understand what a user wants to achieve using a digital
product and the pain points they might encounter along the way.

07/12/24 UI/UX 10
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
What is a UX Design Process?
A UX design process is an iterative step-by-step methodology
UX teams use to complete projects. While this UX process varies
depending on the product and organization, most companies use the
design thinking process as the foundation:
•Empathize
•Define
•Ideate
•Prototype
•Test
This iterative process ensures designers test their ideas throughout
the UX design process

07/12/24 UI/UX 11
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE

UX Design Process vs. Design Thinking Process

The design thinking process is a five-step UX process for

developing user-centered solutions to human problems.

A UX design process is a multi-stage end-to-end

methodology that incorporates design thinking for delivering
UX projects.

07/12/24 UI/UX 12
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Importance of a UX Design Process
Here are some reasons why companies standardize a UX design
process:
•Ensures projects meet quality and consistency standards
•Ensures designers design solutions without bias and assumptions
•Enables designers to test and iterate on many ideas to find the best
solution
•Promotes collaboration between teams and departments
•Reduces the risk of rework by following set protocols
•Allows stakeholders to track a project’s progress
•Identifies hidden risks and opportunities

07/12/24 UI/UX 13
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Most designers are familiar with the concept of “design thinking” as a UX
process.
This process has five stages in it: empathize, define, ideate, prototype, and test.
Most design processes originate from this concept.

07/12/24 UI/UX 14
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
UX process with the following five key phases:
•Product definition
•Research
•Analysis
•Design
•Validation


07/12/24 UI/UX 15
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
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).

07/12/24 UI/UX 16
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
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).

07/12/24 UI/UX 17
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
2. Product research
Once 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.

07/12/24 UI/UX 18
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
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.
•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.

07/12/24 UI/UX 19
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
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.

07/12/24 UI/UX 20
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
• 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).

• 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.
07/12/24 UI/UX 21
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
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.

07/12/24 UI/UX 22
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
• 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.

07/12/24 UI/UX 23
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
How to improve 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.
Focus on creating effective communication
Communication is a key UX design skill.
While creating great designs is one thing, communicating great design is equally as important.
To do this, conduct regular design review sessions and meet with stakeholders to ensure that
everyone is aware and on board with the product design decisions.

07/12/24 UI/UX 24
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
8 Stages of UX Design Process
Stage 1 – Project Definition & Scope
The first phase of a UX design process defines the project’s goal and scope with team members and
stakeholders from multiple departments–usually consisting of representatives from:
•Business
•Design
•Product
•Technical

Stage 2 – Understanding the Problem

Stage 3 – UX Research
•User research: Studies the target market to understand customers better
•Market research: Analyzes the market to determine market segmentation and product differentiation
•Competitive research: A competitive analysis to understand how competitors solve similar problems
and identify opportunities
•Product research: Analyzing insights and analytics from an existing product to understand user
behavior

07/12/24 UI/UX 25
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Stage 4 – Ideation – Sketching & Low-Fidelity Prototyping
Some of these low-fidelity techniques include:
•Sketching: Hand-drawn sketches of user interfaces
•Paper prototyping: Paper versions of a prototype
•Wireframing: Digital versions of paper prototypes featuring basic lines and shapes
•Low-fidelity prototypes: Digital prototypes using wireframes to test user flows and information architecture
Stage 5 – High-Fidelity Mockups & Prototypes
Next, the UI design team converts wireframes into mockups to build high-fidelity prototypes that look and
function like the final product. If the company has a design system, designers will use the
UI component library to build interactive prototypes.
Stage 6 – Usability Testing
The primary purpose of high-fidelity prototypes is usability testing. UX designers test these prototypes with
real users to:
•Validate ideas
•Identify usability issues
•Test accessibility
•Identify business opportunities

07/12/24 UI/UX 26
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Stage 7 – Design Handoff
The second to last stage of the UX design process is the design handoff,
where the design team hands its mockups, prototypes, and documentation to the
development team to start the engineering process.
Although the handoff is near the end of the UX process, designers and
engineers start collaborating during ideation to streamline the transition from
design to development while ensuring designs meet technical constraints.
Stage 8 – Quality Assurance or UX Audit
The final stage of the UX design process is a UX audit to review the new
release.
This UX audit ensures the new release meets the project’s business goals, user
experience, and accessibility requirements.

07/12/24 UI/UX 27
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
User-Centric Thinking

Designers must keep end-users at the center of design decisions to ensure

designs meet users’ needs.

This human-centered mindset delivers products that users want while

reducing costs on irrelevant UI components and features.

07/12/24 UI/UX 28
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Agile vs Waterfall – Difference Between Methodologies
Key Difference Between Waterfall and Agile
•Waterfall
is a Linear Sequential Life Cycle Model, whereas Agile is a continuous iteration of
development and testing in the software development process.

•InAgile vs Waterfall difference, the Agile methodology is known for its flexibility, whereas
Waterfall is a structured software development methodology.

•Comparing the Waterfall methodology vs Agile, which follows an incremental approach,

whereas the Waterfall is a sequential design process.

•Agileperforms testing concurrently with software development, whereas in Waterfall

methodology, testing comes after the “Build” phase.

•Agile
allows changes in project development requirements, whereas Waterfall has no scope of
changing the requirements once the project development starts.

07/12/24 UI/UX 29
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
What is Waterfall methodology?
Waterfall Model methodology which is also known as Linear Sequential Life
Cycle Model.
Waterfall Model followed in the sequential order, and so project
development team only moves to next phase of development or testing if the
previous step completed successfully.

What is the Agile methodology?

Agile methodology is a practice that helps continuous iteration of
development and testing in the software development process.
In this model, development and testing activities are concurrent, unlike the
Waterfall model.
Thisprocess allows more communication between customers, developers,
managers, and testers.

07/12/24 UI/UX 30
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Advantages of Waterfall Model:
•It
is one the easiest model to manage. Because of its nature, each phase has specific deliverables
and a review process.
•It works well for smaller size projects where requirements are easily understandable.
•Faster delivery of the project
•Process and results are well documented.
•Easily adaptable method for shifting teams
•This project management methodology is beneficial to manage dependencies.

Advantages of the Agile Model:

•Itis focused client process. So, it makes sure that the client is continuously involved during every
stage.
•Agileteams are extremely motivated and self-organized so it likely to provide a better result from
the development projects.
•Agile software development method assures that quality of the development is maintained
•The process is completely based on the incremental progress. Therefore, the client and team know
exactly what is complete and what is not. This reduces risk in the development process.

07/12/24 UI/UX 31
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Limitations of Waterfall Model:
•It is not an ideal model for a large size project
•If the requirement is not clear at the beginning, it is a less effective method.
•Very difficult to move back to makes changes in the previous phases.
•The testing process starts once development is over. Hence, it has high chances of bugs to be
found later in development where they are expensive to fix.

Limitations of Agile Model

•It is not useful method for small development projects.
•It requires an expert to take important decisions in the meeting.
•Cost of implementing an agile method is little more compared to other development
methodologies.
•The project can easily go off track if the project manager is not clear what outcome he/she
wants.

07/12/24 UI/UX 32
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE

Agile Waterfall
It separates the project development Software development process is divided
lifecycle into sprints. into distinct phases.
Waterfall methodology is a sequential
It follows an incremental approach
design process.
Waterfall is a structured software
Agile methodology is known for its
development methodology so most times
flexibility.
it can be quite rigid.

Agile can be considered as a collection of Software development will be completed

many different projects. as one single project.

Agile is quite a flexible method which

There is no scope of changing the
allows changes to be made in the project
requirements once the project
development requirements even if the
development starts.
initial planning has been completed.

07/12/24 UI/UX 33
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE

Agile methodology, follow an iterative development

All the project development phases like designing,
approach because of this planning, development,
development, testing, etc. are completed once in the
prototyping and other software development phases
Waterfall model.
may appear more than once.

The test plan is rarely discussed during the test

Test plan is reviewed after each sprint
phase.

Agile development is a process in which the The method is ideal for projects which have definite
requirements are expected to change and evolve. requirements and changes not at all expected.

In Agile methodology, testing is performed In this methodology, the “Testing” phase comes
concurrently with software development. after the “Build” phase

Agile introduces a product mindset where the

This model shows a project mindset and places its
software product satisfies needs of its end customers
focus completely on accomplishing the project.
and changes itself as per the customer’s demands.

Agile methdology works exceptionally well with Reduces risk in the firm fixed price contracts by
Time & Materials or non-fixed funding. It may getting risk agreement at the beginning of the
increase stress in fixed-price scenarios. process.

07/12/24 UI/UX 34
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Prefers small but dedicated teams with a
Team coordination/synchronization is
high degree of coordination and
very limited.
synchronization.
Products owner with team prepares
Business analysis prepares requirements
requirements just about every day during
before the beginning of the project.
a project.
Test team can take part in the It is difficult for the test to initiate any
requirements change without problems. change in requirements.
Description of project details can be Detail description needs to implement
altered anytime during the SDLC waterfall software development
process. approach.
The Agile Team members are
In the waterfall method, the process is
interchangeable, as a result, they work
always straightforward so, project
faster. There is also no need for project
manager plays an essential role during
managers because the projects are
every stage of SDLC.
managed by the entire team
07/12/24 UI/UX 35
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Web vs. App
Mobile applications need to be installed from the app store, while web applications
can be easily viewed from any browser and thus do not need to be installed.

Mobile applications can be accessed even offline, and that's not the case with web
applications since browsers do not work without a proper internet connection.

A web application is a program stored on a remote server and delivered to the user via a browser.
Similar to a website, but not entirely.

A website is content displayed to the user and is not meant for interactions. The purpose of
websites is to display static content to the user—for example, portfolios, official websites of brands,
etc.

07/12/24 UI/UX 36
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
How Does a Web Application Work?
One of the unique aspects of web applications that differentiate them from mobile applications is
that it does not need to be installed as a separate application on the desktop and can be accessed via
browser in the following way:

1.The user sends a query to the web server through a browser using the internet.
2.After receiving the request, the server prepares to deliver the requested request.
3.The requested information later sends results from the web application server to the server.
4.The web server then displays the requested information to the user.

07/12/24 UI/UX 37
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
Examples of Web Applications
ARCHITECTURE
There are a plethora of web applications we are not aware of and still are using every day. Some of them are:
•Online shopping carts
•Email

•Word processors
•Photo and video editing
•File scanning
•Spreadsheets

•Presentations

Programming Languages for Web Application Development

Fora smooth and flawless experience and surfing, specific programming languages are used to develop the web application.
Some of them are:
•Python

•Javascript

•Java

•PHP

•Swift

•Kotlin

•Ruby and many more.

07/12/24 UI/UX 38
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Pros and Cons of Web Applications
Web applications have the following set of pros and cons. They are:
Pros:

•Web applications are flexible. They can be accessed via any browser on mobile and desktop.
•Web applications need not need to be updated manually as the web application updates on its own.
•They don’t require to be installed on mobile; thus, the memory and data are also saved.
•The applications are cross-platform and can be run on any OS.

Cons:

•Web applications are accessed via browsers; hence they rely on the internet and cannot be accessed offline.
•Ifany website of the web application experiences even a slight error, the whole application will likely experience
performance lag.
•Web applications run at a relatively slower speed.
•Web applications are highly likely to experience security breaches.

07/12/24 UI/UX 39
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
What Is a Mobile Application?
In theoretical terms, a mobile application is a software application designed to deliver services run on mobile.
When compared, there is not much difference between a mobile application and a web application. Their role is
the same. Display content to the user, deliver optimized responses tailored to their request and provide a seamless
browsing experience.

How Does a Mobile Application Work?

Mobile applications tend to lead faster and give the user a more sophisticated feel of browsing for the users.
They also use less internet and work in the following way:
1.Theuser downloads the application from the app store if using iPhones or the google play store if using android
phones.
2.Todownload the application requires a certain amount of data and storage space. After making sure that the
mobile has enough space to accommodate the application, the download process starts.
3.After downloading, the user is asked for login details or signs up before accessing the applications.
4.Finally,
the application is ready to display its content and deliver its services while also providing an enhanced
user experience.

07/12/24 UI/UX 40
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Types of Mobile Applications
There are three different types of mobile applications. They are:
•Native: The native application refers to the application which is built to serve one OS
alone. Either ios or android. The native applications are developed using the platform’s
native APIs. Code cannot be reused for other platforms.

•Hybrid: Hybrid applications refer to the applications that can be run on any platform,
ios or android. The application also has access to the native APIs, and the code can be
reused on any platform.

•Mobile Web: The mobile web applications refer to the web applications browsed via
the browser on the mobile. Since most web applications are built with responsive design,
the mobile web applications appear like mobile applications. Mobile web applications
usually don’t have a separate mobile app. It is also used by users who do not want to
install a particular mobile application.

07/12/24 UI/UX 41
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Examples of Mobile Applications
Many mobile applications are downloaded in large numbers every day in the app stores. Among
them, some of the popular genres of mobile applications are:
•Lifestyle
•Social media
•Ecommerce
•Utility
•Games
•Educational
•Communication
•Entertainment
•Productivity
•News

07/12/24 UI/UX 42
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Programming Languages for Mobile Application Development
Mobile applications have a vivid and interactive UI and deliver an optimal performance tailored to
user interests. The following are the programming languages used for developing mobile
applications:
•Python
•HTML
•CSS
•Javascript
•Java
•Kotlin
•C++
•Swift
•C#
•Dart

07/12/24 UI/UX 43
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE

Pros and Cons of Mobile Applications

Pros:
•Mobile applications are easy to access with one click instead of painstakingly searching and
browsing the web application through a browser.
•Data like favourites, display settings, etc., can be saved in the mobile application and can be
accessed at any time.
•Brands that are looking for positive brand exposure can offer a personalised experience to their
customers.

Cons:
•Developing a mobile application is quite a challenging feat.
•Mobile applications need to be updated frequently.
•Some mobile applications are not cross-platform.

07/12/24 UI/UX 44
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Determining Strategy: User Research - Inspiration – Analytics
What is User Research?
User research is the methodic study of target users—including their needs and pain points—so
designers have the sharpest possible insights to work with to make the best designs. User
researchers use various methods to expose problems and design opportunities, and find crucial
information to use in their design process.

User research essentially splits into two subsets:

1.Qualitative research – Ethnographic field studies and interviews are examples of methods that
can help you build a deep understanding of why users behave the way they do .

2.Quantitative research – With more-structured methods such as surveys, you gather measurable
data about what users do and test assumptions you developed from qualitative research. An example
is to use an online survey to ask users questions about their shopping habits.

07/12/24 UI/UX 45
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE

We can also split user research into two approaches:

1.Attitudinal – you listen to users’ words (e.g., in interviews).

2.Behavioral – you watch their actions through observational studies.

07/12/24 UI/UX 46
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Leverage User Research Methods throughout Development
1.Discover – Determine what’s relevant for users.
• Diary studies – Have users log their performance of activities or record their daily
interactions with a design.
• Contextual inquiries – Interview suitable users in their own environment to find
out how they perform the task/s in question.

2.Explore – See how to address all users’ needs.

• Card sorting – On cards, write words and phrases and then let participants
organize these in the most meaningful way and label categories to ensure your
design is logically structured.
• Customer journey maps – Create user journeys to reveal potential pitfalls and
crucial moments.

07/12/24 UI/UX 47
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE

1. Test – Evaluate your designs.

• Usability testing – Make sure your design is easy to use.
• Accessibility evaluations – Test your design to ensure everyone can use it.

2. Listen – Put issues in perspective, uncover any new problems and spot
trends.
• Analytics – Gather analytics/metrics to chart (e.g.) website traffic and generate
reports.
• Surveys/Questionnaires – Track how users’ feel about your product/design via
these.

07/12/24 UI/UX 48
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Five steps of UX research

The first two steps are about forming questions and hypotheses, and the last three steps are about
gathering knowledge through selected UX research methods.

1.Objectives: What are the knowledge gaps we need to fill?

2.Hypotheses: What do we think we understand about our users?
3.Methods: Based on time and manpower, what methods should we select?
4.Conduct: Gather data through the selected methods.
5.Synthesize: Fill in the knowledge gaps, prove or disprove our hypotheses, and discover
opportunities for our design efforts.

07/12/24 UI/UX 49
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Introduction To User Experience Research
Methods
UX research is based on observation, understanding, and analysis. With the
help of various UX research techniques, you will:
•Observe your users, keeping an eye out for non-verbal clues as to how they
are feeling;
•Develop an understanding of the user’s mental model: what does the user
anticipate when using a certain product? Based on their previous experience,
how do they expect this particular product to work?
•Analyze the insights you’ve gathered and try to identify patterns and trends.
Eventually, these insights will inform the decisions you make about the product
and how it is designed.

07/12/24 UI/UX 50
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE

Most valuable user research techniques

1.User Groups
2.Usability Testing
3.User Interviews
4.Online Surveys
5.User Personas
6.What Next? Conducting User Research Analysis

07/12/24 UI/UX 51
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
1. User Groups
User groups—also called “focus group discussions” or “focus groups”—are structured
interviews that quickly and inexpensively reveal the desires, experiences, and attitudes of
a target audience.


Why Do We Conduct User Groups?

User groups can help your company better understand:
1) How users perceive a product
2) What users believe are a product’s most important features
3) What problems users experience with the product
4) Where users feel the product fails to meet expectations

07/12/24 UI/UX 52
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
How To Conduct User Experience Research With User Groups
Conducting user groups can be broken down into a few major steps:
1.Create a schedule that provides enough time for recruiting, testing, analyzing,
and integrating results.
2.Assemble your team, and establish roles: choose a moderator, note-taker, and
discussion leader.
3.Define the scope of your research: what questions will you ask? And how in-
depth do you want to explore the answers? This will determine the number of
people and the number of groups that need to be tested.
4.Create a discussion guide that includes 3-5 topics for discussion.
5.Recruit potential or existing users who are likely to provide good feedback.
6.Conduct user group testing, and record data.
7.Analyze and report findings.

07/12/24 UI/UX 53
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
2. Usability Testing
usability testing refers to “evaluating a product or service by testing it with
representative users.”
During a test, participants will be asked to complete specific tasks while one or more
observers watch, listen, and record notes.
The main goal of this user experience testing method is to identify usability problems,
collect qualitative data, and determine participants’ overall satisfaction with the product.

How to Conduct UX Research with Usability Testing

 Usability testing can be broken down into a few major steps:
1. Identify what needs to be tested and why (e.g. a new product, feature, etc.)
2. Identify the target audience (or your desired customers).
3. Create a list of tasks for the participants to work through.
4. Recruit the right participants for the test.
5. Involve the right stakeholders.
6. Apply what you learn.

07/12/24 UI/UX 54
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Usage Analytics
In terms of Design, analytics can be associated with product usage, product
performance, marketing campaigns or even KPIs associated with design.

Usage Analytics is most useful in:

•Optimizing the Customer Journey and get users to take the intended actions.
•Optimizing User Journey to get users to complete their tasks efficiently.
•Understanding bottlenecks in tasks that Users perform thereby reducing friction in
User Experience.

07/12/24 UI/UX 55
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Advantages of Usage Analytics
1. Large sample size
Usage analytics help collect and analyze large amounts of data using different online
tools.
2. Time and Cost effective
Online tools help gather large chunks of data quickly and in a relatively inexpensive
manner. Most online tools that aid in gathering usage analytics data provide the basic
features free of charge.
3. Limited researcher bias
As the researcher doesn’t accompany the users at the time of using a prototype or
product, the user follows the natural flow that seems to come most naturally to them.
4. Applications
Usage analytics can be applied to determine user behavior, whether they could
accomplish goals through a product and whether the user expectations and needs
were met through the devised solution. Usage analytics can be applied at different
stages of the design process to provide rich insights that can aid in tweaking user
experience.

07/12/24 UI/UX 56
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Disadvantages of Usage Analytics
1. User intent and motivations
The user intent and motivations require a specialist to analyze the usage
data and deduce. However, if the right kind of data isn’t collected to answer
the most critical questions, the researcher may end up missing the user
intent and motivations altogether.

2. Assumptions
The researcher can add some bias at the time of making assumptions
based on the usage analytics data gathered.

07/12/24 UI/UX 57
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
16 Most Common Types of Customer Needs
Product Needs
1. Functionality
Customers need your product or service to function the way they need in order to solve their
problem or desire.
2. Price
Customers have unique budgets with which they can purchase a product or service.
3. Convenience
Your product or service needs to be a convenient solution to the function your customers are
trying to meet.
4. Experience
The experience using your product or service needs to be easy — or at least clear — so as not
to create more work for your customers.
5. Design
Along the lines of experience, the product or service needs a slick design to make it relatively
easy and intuitive to use.

07/12/24 UI/UX 58
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
6. Reliability
The product or service needs to reliably function as advertised every time the
customer wants to use it.
7. Performance
The product or service needs to perform correctly so the customer can achieve
their goals.
8. Efficiency
The product or service needs to be efficient for the customer by streamlining
an otherwise time-consuming process.
9. Compatibility
The product or service needs to be compatible with other products your
customer is already using.

07/12/24 UI/UX 59
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Service Needs
10. Empathy
When your customers get in touch with customer service, they want empathy and
understanding from the people assisting them.
11. Fairness
From pricing to terms of service to contract length, customers expect fairness from a
company.
12. Transparency
Customers expect transparency from a company they're doing business with. Service
outages, pricing changes, and things breaking happen, and customers deserve openness
from the businesses they give money to.
13. Control
Customers need to feel like they're in control of the business interaction from start to
finish and beyond, and customer empowerment shouldn't end with the sale. Make it easy
for them to return products, change subscriptions, adjust terms, etc.

07/12/24 UI/UX 60
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
14. Options
Customers need options when they're getting ready to make a purchase from a
company. Offer a variety of product, subscription, and payment options to provide that
freedom of choice.
15. Information
Customers need information, from the moment they start interacting with your brand to
days and months after making a purchase. Businesses should invest in educational blog
content, instructional knowledge base content, and regular communication so customers
have the information they need to successfully use a product or service.
16. Accessibility
Customers need to be able to access your service and support teams. This means
providing multiple channels for customer service.

07/12/24 UI/UX 61
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE

How to Identify Customer Needs

1.Use Existing Data
2.Solicit Customer Feedback
3.Customer Journey Mapping
4.Input from Service Team
5.Study Competitors
6.Social Media Listening
7.Keyword Research

07/12/24 UI/UX 62
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Types of Customer Service
1.Email
2.Phone
3.Chat
4.Social Media
5.In Person
6.Call Back Service
7.Customer Self-Service
8.Interactive Virtual Assistant
9.Integrated Customer Service

07/12/24 UI/UX 63
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE

What Customers Want

1.Simple Solutions
2.Personalization
3.Value
4.Transparency
5.Accessibility

07/12/24 UI/UX 64
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE

What Is a Target Audience?

Your target audience refers to the specific group of consumers most likely to want
your product or service, and therefore, the group of people who should see your ad
campaigns.

Target audience may be dictated by age, gender, income, location, interests or a

myriad of other factors.

What Are the Types of Target Audiences?

Target audiences can be segmented further into categories that reference,
intent, location, interests, and more.

07/12/24 UI/UX 65
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Interest
Separate groups out based on their various interests, including hobbies and
entertainment preferences. This can help you make data-driven, highly personalized
messaging that allows you to connect with your audience in meaningful ways that can
help drive brand loyalty.

Purchase Intention
Define groups of people who are looking for a specific product, such as a new
entertainment system or car. This will help you understand your audience’s pain points
so you can create tailored messaging that addresses their needs.

Subcultures
Subcultures refer to groups of people who share a common experience, such as music
genres or entertainment fandoms.

07/12/24 UI/UX 66
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE

7 Ways to Determine Target Audience

1. Analyze Your Customer Base and Carry Out Client Interviews

2. Conduct Market Research and Identify Industry Trends
3. Analyze Competitors
4. Create Personas
5. Define Who Your Target Audience Isn’t
6. Continuously Revise
7. Use Google Analytics

07/12/24 UI/UX 67
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
 How to Create Target Personas with The Right Demographics

• Age
• Gender
• Location
• Hobbies
• Income
• Education level
• Profession
• Marital status
• Who they trust
• What they read/watch
 Additionally, look into the following:
• Your current customer base
• Who your competitors are targeting

07/12/24 UI/UX 68
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
How to Reach Target Audience
Media Kits
 Media kits from publishers give a clear idea of the audience segments they reach.
Nielsen Ratings
 Using statistical samplings, Nielsen is able to predict how many households view a
certain show.
Social
 Social media allows you to target ads based on various demographics and interests.
Third Party Information
 Marketing analytics platforms such as the Marketing Measurement and Attribution
Platform can help you identify what outlets your target audiences frequent or
television shows they watch.

07/12/24 UI/UX 69
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
How to Reach Audience at the Right Time
Television
Radio
Email

Disadvantages of Target Audiences

Although target audiences are a great tool, marketers should remember that additional
opportunities may exist in the marketplace.

Ifbands need to reposition themselves, they may better connect with a different
demographic. There may also be use cases for products that haven’t been considered.

 Combining target audiences with analytics tools can help identify some of these
missed opportunities to further capitalize on them.

07/12/24 UI/UX 70
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
What is in and What is Out: Outlining Scope - Content and Functionality

07/12/24 UI/UX 71
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
What is a project scope statement?
A project scope statement identifies what is in scope for a particular
project. It includes:


•Project objective: a statement of the primary goal of a product

•Timeline: schedule for completing the project
•Deliverables: what the client will receive from the project
•Reports: outlines how and when the client will receive updates from the
project manager
•Budget: what the cost of the project will be
•Constraints: obstacles to completing the task that may cause delays
•Exclusions: what’s not included in the project

07/12/24 UI/UX 72
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Project scope example
The following project scope example is a greatly simplified project scope statement.

•Objective: Company ABC will design a mobile app for XYZ, Inc.
•Timeline: Finished app to be delivered 6 months from the start of the project
•Deliverables: Completed program with graphics and sound
•Reports: Project manager to provide weekly updates
•Budget: $20,000
•Exclusions: Marketing and deployment of app

07/12/24 UI/UX 73
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
The Sitemap: Introduction to Sitemaps:

A sitemap is a file where you provide information about the pages, videos, and other files on
your site, and the relationships between them.
Search engines like Google read this file to crawl the site more efficiently.
 There are two types of sitemaps: HTML and XML. HTML sitemaps guide visitors, mostly. XML
sitemaps guide search engine bots, to ensure they find a site's URLs to index.
A sitemap is a list of pages of a web site within a domain. There are three primary kinds of sitemap:
Sitemaps used during the planning of a website by its designers. Human-visible listings, typically
hierarchical, of the pages on a site. Structured listings intended for web crawlers such as search
engines.

Build and submit a sitemap - Bookmark border

Google supports the sitemap formats defined by the sitemaps protocol.

Each sitemap has its own benefits and shortcomings; choose the one that is the most appropriate for
your site and setup.

The following table compares the different sitemap formats:

07/12/24 UI/UX 74
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
XML sitemap XML sitemaps are the most versatile of the sitemaps
formats. It's easily extensible and can be used to supply
additional data about images, video, and news content,
as well as the localized versions of your pages.

•Pros:Extensible and versatile. •Cons:Can be cumbersome to work with.

•It can provide the most information about your •Can be complex to maintain the mapping on larger
URLs. sites, or sites where the URLs change often.
•CMS users can easily find plugins for generating
sitemaps.
RSS, mRSS, and Atom 1.0 RSS, mRSS, and Atom 1.0 sitemaps are similar in
structure to XML sitemaps, however they are often the
easiest to provide because CMSes automatically create
them.
•Pros:Most CMSes automatically generate RSS and •Cons:Besides HTML and other indexable pages, it
Atom feeds. can only provide information about videos, not
•Can be used to provide Google information about images or news.
your videos. •Can be cumbersome to work with.

Text sitemap The simplest of sitemap formats, it can only list URLs to
HTML and other indexable pages.
Pros: Cons:
•Easy to do and maintain, especially on large sites. •Limited to HTML and other indexable pages.

07/12/24 UI/UX 75
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
The Sitemap: Introduction to Sitemaps
The XML sitemap format is the most versatile of the supported formats. Using the Google
supported sitemap extensions, and also provide additional information about the images, video,
and news content, as well as the localized versions of the pages.
Here is a very basic XML sitemap that includes the location of a single URL:

07/12/24 UI/UX 76
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE

07/12/24 UI/UX 77
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Information architecture:
The information architecture of a website is something between a map of all of
the sections and pages the website contains, and an x-ray of a website’s skeleton.

Usually, the final deliverable from a piece of work on an information architecture

is a mindmap of what the navigation and sections of a new website will be.

This allows the designer to understand the relationship between all of the areas of
a site in order to be able to design ways for users to move from one section to
another in a smooth user journey.

Designing the information architecture is as important as designing the

foundations of a new building – get it wrong and it will end up growing in strange
directions, or is not fit for purpose.

07/12/24 UI/UX 78
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
 Example:
ARCHITECTURE

07/12/24 UI/UX 79
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
The Sitemap: Introduction to Sitemaps - Information Architecture
Visual sitemaps are a hierarchical diagram that shows the information architecture
of a website.
It gives you a visual representation of the site's organization and how different sections
are linked together.
Sections can contain other sections or nodes

Four essential components of IA:

organization systems,
 labeling systems,
navigation systems, and
search systems.

07/12/24 UI/UX 80
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE

Key processes for information architecture:

•Define the company goals.
•Define the user's goals.
•Analyze competitors.
•Define content.

07/12/24 UI/UX 81
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Difference between Information Architecture and Sitemap
Information Architecture: Information Architecture, as the name suggests, act as a blueprint to
map interaction patterns and path. It mainly focuses on organizing information, structuring websites
and mobile app, and also to help users navigate them to find and process content they want.

Sitemap: Sitemap, as the name suggests, is a fundamental feature of the website’s SEO (Search
Engine Optimization) that improves the crawling of the website. It simply provides a list of
webpages in a single-page layout and gives better visibility to search engines.

Information Architecture Sitemap

Information architecture is basically
A sitemap is basically a list of web
process of creating the structure of the
pages of the website within a domain.
website.

It is required for users as users might It is required to help both users and
get lost when visiting the website. search engines to navigate the site.
07/12/24 UI/UX 82
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
It provides content in a clear and understandable way,
It provides information about web pages, videos, etc., on
arranges it according to the relation among content
websites and relationships among them.
pieces, etc.

It mainly focuses on organizing, structuring, and labeling It mainly focuses on providing a map that contains
content in a more effective and understandable way. information about all located resources on the website.

Its main goal is to help you clarify what exactly the

website’s goals are before starting designing and creating
Its main goal is to help users or visitors to find
content so that one can ensure that each and every part of
information and complete their task.
the website is stepping towards the completion of the
goal.

It involves structuring components of a website to make

It involves a flow chart that shows always that users or
it more understandable and so that people can find what
visitors can navigation through the website.
they want easily and smoothly.

Types of information architecture include hierarchical

Types of sitemap includes HTML sitemap, XML
architecture, sequential architecture, matrix architecture,
sitemap, etc.
etc.

Good information structure makes the path clear for A good sitemap allows one to prioritize and rank
visitors, makes the site easier to navigate, and increases webpages as well as one can also give them scores
user experience. between 0.1 and 1.
07/12/24 UI/UX 83
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
5 Examples of Effective Information Architecture
•Image credit nngroup.com.
•Small business content audit information architecture. Image credit singlegrain.com.
•Charity App Information Architecture. Image credit Bogomola Anfisa.
•Information Architecture example for a mobile app. Image credit Pedro Aires.

07/12/24 UI/UX 84
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Treejack Introduction
Tree Jack is an online tool that can be used to remotely test a site's structure and labels, or
information architecture, to be sure that they are intuitive for your users before go to the expense of
creating wireframes or writing content.

Tree testing helps the evaluate the findability and hierarchy of content on the website, app or
intranet.

Test, iterate and validate the design decisions to build an intuitive digital experience that's simple for
your users to navigate.

07/12/24 UI/UX 85
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
Treejack Example

07/12/24 UI/UX 86
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
 How to do advanced analysis in Treejack?

07/12/24 UI/UX 87
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
ARCHITECTURE
What Is Tree Testing?
Tree testing is one of several methods for getting the feedback you need to
design a functional website, or anything else with menu options nested inside
each other, like an automated messaging system

Tree Testing vs. Card Sorting vs. First Click Testing

The first thing to understand about tree testing is that it isn't card sorting, nor
is it first click testing (though first clicks can be important here, too).
All three methods are closely related and superficially quite similar, but serve
very different functions.
In fact, might find yourself doing all three at different points in the same
project.

07/12/24 UI/UX 88
 Module III
WEB DESIGN: STRATEGIES AND INFORMATION
Treejack Analysis ARCHITECTURE
When to Use Tree Testing
Tree testing can be done very early in the design—or redesign—process, because the site
doesn't need to exist yet, even as a concept sketch.
All need is the tree.
If the tree fails the test, the problem is relatively simple and cheap to fix because, even if
go back to the beginning, and don't have to go back very far.

Disadvantages of Tree Testing

Tree testing focuses on site architecture and nothing else, which is great because if the test reveals a
problem, you know exactly where the problem is in the tree. But since there are many other things that
could go wrong to impact overall usability, you can't use tree testing alone. You need sources of
information about the other aspects of your project, too.

The other potential drawback of tree testing is that since it is nearly always an automated, remote
process, you don't get the qualitative data that could show you why your testers are having the problems
they are. Moderated tree testing would fix that problem, but generally is not practical.

07/12/24 UI/UX 89