AGILE UX,

DESIGN PATTERNS &

DATA VISUALIZATION
 Agile UX
 Agile UX refers to the practice of
incorporating user experience (UX) design
methods into the agile software
development process, ensuring
continuous focus on user needs.
Core Principles:
 User-centered design integrated into agile

cycles.
 Cross-functional team collaboration.

 Regular user feedback and iteration.

2
 Agile UX Workflow

Agile UX Process in Action

Phases:
1.Discover: Initial research, understanding user
needs.

2.Design: Rapid prototyping and low-fidelity

designs.

3.Develop: Collaboration between designers and

developers.

4.Test & Iterate: User feedback and refinement in

short sprints.

5.Outcome: Continuous delivery of user-validated 3

 Agile UX and the User

Role of the User in Agile UX

 User Involvement:
 Participatory design: Users as co-creators.
 Frequent user testing: Validation after each
iteration.
 Adjustments based on real-time feedback.
 Agile UX Tools: Personas, user stories,
wireframes.

4
 Challenges in Agile UX

• Time Pressure: UX work must fit within

tight development cycles.
• Balancing Iteration and Innovation:
Fast iteration may limit opportunities for
creative exploration.
• Communication Gaps: Aligning UX with
development speed.

5
 Basic Design Patterns

 Reusable design solutions for common

interaction problems, based on best
practices.
1. Navigation: can be defined as “the set of
actions and techniques that guide users
throughout the app or website to fulfil their
goals successfully” like; Breadcrumbs, tabs,
menus.
2. Input: Forms, search bars, sliders.

3. Feedback: Error messages, success

confirmations.
Goal: Improving usability by providing
6
familiar, proven interfaces.
 Examples of Basic Design Patterns

•Navigation Patterns:
•Hamburger menus, breadcrumbs, and
dropdowns.

•Form Interaction Patterns:

•Inline validation, progress bars, and
placeholder text.

•Feedback Patterns:
•Error/success alerts, loading indicators,
tooltips

7
 Hamburg Menu

 Menu is one of the core navigation elements.

 Hamburger menu (or side drawer) is one of
the most popular mobile navigation. It hides
the navigation beyond the left edge of the
screen and reveal it only after a user’s
actions. This pattern can be particularly
useful if you want the users to focus on the
main content.

8
 Hamburg Menu
In it default state, the hamburger Menu and all its contents
remain hidden

9
 Hamburg Menu

Pros:
 Large number of navigation options. The
main advantage of the navigation menu is
that it can contain a fairly large number of
navigation options in a tiny space.
 Clean design. Free up screen real estate by
shifting the options off the screen into a side
menu.

10
 Hamburg Menu

Cons:
 Hidden navigation is less
discoverable. What’s out of sight, is out of
mind. When navigation is hidden, users are
less likely to use navigation. While this type
of navigation becomes standard and many
mobile users are familiar with it, many
people still simply don’t think to open it.

11
 Breadcrumbs Navigation
 Breadcrumbs are a secondary navigation aid used to
enhance the user experience by providing a trail of links
that show the user's location within a site's hierarchy.
 Example:
 Home > Products > Electronics > Laptops

12
 Breadcrumbs Navigation

Benefits:
 Reduces user frustration by providing an

easy way to backtrack.

 Makes website navigation clearer and

more intuitive.
 Great for websites with a deep

hierarchical structure (e.g., e-commerce,

blogs).

13
 Dropdown Menus

Dropdowns are a common form of navigation and interaction

in UX design that present a list of options or commands when
activated (usually by clicking or hovering over a button).
 Example:

Dropdown for selecting country:

Example: "Choose your country" with a list of countries
when the dropdown is clicked.

14
 Form Interaction Patterns

Inline Validation
 Inline validation provides immediate feedback as users fill out
forms, helping to correct errors in real-time. This pattern
increases user confidence and decreases frustration.
 Example:
Scenario: A user enters an email address in a sign-up form. If the
format is incorrect, an alert appears immediately next to the input
field.

15
Progress Bars
 Progress bars visually indicate the completion
status of a task. They help manage user
expectations during long processes, such as file
uploads or installations.
 Example:

Scenario: A progress bar during a file upload

shows the percentage completed.

16
Placeholder Text
 Placeholder text provides examples or
instructions within input fields, guiding users on
what information is expected. It disappears once
the user starts typing.
 Example:

Scenario: In a search box, “Search…" serves as

placeholder text.

17
 Feedback patterns
 Feedback patterns communicate
important information to users about the
status of their actions, enhancing clarity
and user confidence.

18
 Error/Success Alerts

Alerts inform users about

the success or failure of
their actions. Error alerts
highlight problems that
need to be fixed, while
success alerts provide
reassurance.
 Example:

Scenario: An error alert

appears when a user tries
to submit a form without
filling all required fields.

19
 Loading Indicators

 Loading indicators inform users that a process is

ongoing, preventing them from feeling uncertain
about whether their actions are being processed.
 Example:

Scenario: A spinning wheel appears while a

webpage loads.

20
 Tooltips
 Tooltips provide additional information when
users hover over or click on elements. They
clarify functionality without cluttering the
interface.
 Example:

Scenario: Hovering over an icon shows a tooltip

explaining its function.

21
 Data Visualization
 Importance of Data Visualization

1. Facilitates Understanding: Data visualization

transforms complex data into accessible visuals,
making it easier for users to comprehend trends
and patterns.
2. Supports Decision Making: Visual
representations help users make informed
decisions quickly by highlighting critical
information.
3. Engagement: Well-designed visuals can capture
attention and increase user engagement with the
data.
22
 Data Visualization
 Principles of Effective Data
Visualization

1. Clarity: Visualizations should be easy to

interpret, avoiding clutter and ambiguity.
2.Relevance: Choose the right type of visualization
to match the data and the message (e.g., bar charts
for comparisons, line graphs for trends).
3.Consistency: Use consistent colors, shapes, and
sizes to avoid confusing the audience.

23