ICE 415 Home Topics About Us Sign Up Log In

V. Interaction
Design and
Navigation
Patterns
Get Started
ICE 415 Home Topics About Us Sign Up Log In

Topics

Lesson 1 Lesson 2

Interaction Design and Navigation Patterns for

Microinteractions Mobile and Web

Learn More
 LESSON 1

Interaction
Design and
Microinteraction
s
Interaction
Design
 Interaction Design is the broader
concept—it involves designing
the overall flow and functionality
Interaction of how users interact with a

Design
See more
system. It focuses on ensuring
tasks are intuitive and actions
lead to desired outcomes.
 Types of Interactions

Desktop interactions Mobile interactions

Click, Hover, Drag and Drop, Tap, Swipe,
Keyboard Shortcuts, Scrolling Press, hold, drag, Pinch
Interaction Design
Principles
The Design of Everyday Things
by Don Norman

Affordance, Feedback, Learnability.

Affordance
Affordance refers to the
design cues that indicate
how an object or interface
should be used. Essentially
to afford means to give a
clue.
Feedback

Feedback is the principle of

making it clear to the user
what action has been taken
and what has been
accomplished.
Learnabilit
y
Learnability is the principle
of making the interface
intuitive and easy to
understand, allowing users
to quickly learn how to use
it.
Microinteract
ions
 Microinteractions are a specific
element within Interaction Design.
They handle the finer details of user
interactions, providing feedback and
Microinteraction enhancing the experience in small

s
See more
but impactful ways (e.g., a button
changing color when clicked or a
success animation after completing a
task).
 The role of
Microinteractions in
UI/UX
Microinteractions are small, focused design
elements that enhance the user's interaction
with a system.
Provide immediate
feedback to user
actions

This immediate response

reduces uncertainty and builds
trust by letting users know the
system is responding to their
input.
Guide users
through interfaces

Microinteractions serve as visual

cues that help users understand
how to navigate and interact with
different elements. They subtly
direct attention and indicate what
actions are possible, making
interfaces more intuitive and
reducing the learning curve.
Make interfaces
feel more
responsive and
alive

By adding subtle motion and

dynamic elements,
microinteractions transform static
interfaces into living, breathing
experiences.
Communicate
system status
effectively

Microinteractions serve as a visual

language that keeps users
informed about what's happening
behind the scenes. They provide
crucial context about the system's
current state without requiring
explicit text explanations.
 Some Examples of
Microinteractions in UI/UX

Button Loading
Animations Indicators

Notifications and
Alerts
 Some Examples of
Microinteractions in UI/UX

Switch Toggles Input Field

Validation

Like and Reaction

Animations
 LESSON 1

(Continuatio
n)

Tools for
Prototyping
Microinteraction
s
 Tools for
Prototyping
Microinteractio
ns
After Effects
Allows you to test
prototypes with real
users and collect
feedback on
microinteractions.
 Choosing The Right
Prototyping
Microinteractions Tool
There is no “best” because it all depends on
what you need at the moment!
-
Javier Cuell
o
 Choosing The Right
Prototyping Microinteraction
Tool

Learning
Curve Integration With Your
Workflow
Support For
Teamwork
Ease Of Use And Comfort
Level Of
Fidelity
 LESSON 2

Navigation
Patterns for
Mobile and Web
 Navigation Elements

Primary Navigation Secondary

Navigation
Examples of Secondary Patterns
The Navigation Patterns
What are Navigation Patterns?

What are the Common Navigation Patterns

for Mobile and Web?
Navigation Patterns
Navigation Patterns
Navigation Patterns
Navigation Patterns
Navigation Patterns
Navigation Patterns
Navigation Patterns
Navigation Patterns
Navigation Patterns
Combined patterns
Combined patterns
Combined patterns
 m o n
Co m i o
ig a t
N av n s
t te r
n Pa
fo r
b ile
M o
Tab Bar
It typically appears at the
top or bottom of the screen
and consists of a row of

Navigation labeled tabs, each

representing a specific
category or page.
Drawer It enders a navigation
drawer on the side of the

Navigation
screen which can be
opened and closed via
gestures.
 It uses a list format for

List users to browse and select

items easily. It's commonly

Navigation
used for organizing data,
like contacts or products,
in a scrollable or paginated
way.
 A structured layout that

Grid
arranges elements in rows and
columns, making content
easily scannable and organized

Navigation for quick access. It’s ideal for

displaying multiple items, such
as images or options, in a
clean and visually balanced
way.
Floating It represents the
Action Button primary action of a
screen.
(FAB)
Navigation
 Used for toggling
Segment between related content
views on a single screen.
Controller It’s compact and often
embedded within the
content area.
 It shows the number of

Page Indicator pages in a series and

indicate which page is
currently being
displayed.
Breadcrumbs It shows the number of
pages in a series and

Navigation indicate which page is

currently being
displayed.
 Used for navigating between
different sections or pages of

Tab an app. Tabs are typically at

the top or bottom of the

Navigation
screen, acting as primary
navigation across different
content areas.
Search Allows users to find specific
content or items within an

Navigation app or website by typing

keywords into a search bar
 Control the app or device by
Gesture performing specific gestures,
such as swiping, pinching, or
Navigation tapping, instead of using
traditional buttons or menus.
 Common
Navigation
Patterns
for Web
 It is the primary website

Top Menu navigation bar that's positioned

at the top of every website.

Navigation
Typically, the logo is positioned
on the left and links to the
homepage, while the rest of the
navigation is positioned on the
right.
 It is vertical menu nav bars on a
Sidebar website's left or right side. Users
can use them to navigate

Navigation different website sections by

clicking links or options.
 It is a graphical user interface
Drop-down element that allows users to
choose from a list of options that

Menu appears when they click on or

hover over a button or other

Navigation control.
Breadcrumbs It is a type of secondary
navigation scheme that

Navigation reveals the user's location in

a website or Web application
 It is a menu located at the
bottom of a website,
providing links to important
Footer pages or sections like About,
Contact, Privacy Policy, or
Navigation social media. It helps users
quickly access key
information without scrolling
back to the top.
 UI pattern that organizes
content into distinct
Tab Navigation sections and each
accessible through a tab.
 Allows users to find
Search specific content or items

Navigation within a website or app by

typing keywords into a
search bar.
 UI technique where an image

Image Map
is divided into clickable
regions or hotspots, each
linking to different pages or
Navigation sections. Users can click on
specific areas of the image to
navigate to relevant content.
 It is large and expandable

Mega Menu menu that displays multiple

options or categories at

Navigation once which typically

organized in columns. It’s
used for websites with a lot
of content,
 It uses simple text links
Text Link to guide users to

Navigation different sections or

pages within a website
or app.
 UI element that divides

Pagination content into multiple pages,

allowing users to navigate

Navigation through large amounts of

data or information by
clicking on page numbers or
"next/previous" buttons.
 It is a fixed navigation bar or
Floating menu that stays visible as
users scroll down the page. It
Navigation "floats" above the content
which typically at the top or
side of the screen,
 LESSON 2

Continuation

Designing Intuitive
Navigation for
Mobile
and Web apps.
How to design intuitive
navigation for Mobile and Web
Apps?

Understanding Intuitive
Navigation
Intuitive navigation means designing a user interface that
feels instinctive. Users should be able to find what they need
with minimal effort.

User-Centered Design
Principles
By stepping into your users’ shoes, you can design a
navigation system that truly meets their needs.
How to design intuitive
navigation for Mobile and Web
Apps?

Simplicity and Clarity

Each navigation element should have a clear and concise
label, making it immediately obvious what it leads to.

Consistency Across the App

Users should feel a sense of familiarity as they move from
one part of your app to another.
How to design intuitive
navigation for Mobile and Web
Apps?

Mobile-First Approach
Design your navigation with mobile users in mind, ensuring
that it works seamlessly on smaller screens.

Effective Use of Icons and

Labels
Choose icons that are universally understood and pair them
with text labels for added clarity. This combination helps
users quickly grasp the purpose of each navigation element.
How to design intuitive
navigation for Mobile and Web
Apps?

Hierarchy and Structure

Create a logical hierarchy, grouping related items together.
Use categories and subcategories to build a clear and
intuitive flow.

Search Functionality
Incorporating a search bar can significantly enhance the
user experience. Make sure the search function is easily
accessible and delivers accurate results.
How to design intuitive
navigation for Mobile and Web
Apps?

Feedback and Affordance

Provide visual feedback, such as highlighting the current
page in the navigation menu. Buttons should look clickable,
and links should be distinguishable from regular text.

Accessibility Considerations
Follow accessibility guidelines, such as providing alt text for
images and ensuring sufficient color contrast.
How to design intuitive
navigation for Mobile and Web
Apps?

Testing and Iteration

Conduct tests with real users to identify pain points and
areas for improvement. Iteration is a continuous process —
use feedback to make incremental changes and enhance the
user experience over time.

User Onboarding
Provide clear instructions and tips to guide them through the
key features.
When users know exactly where to go
without having to think twice, you’ve
achieved intuitive navigation.
 LESSON 2

Continuation

Best Practices for

Managing User
Flows in Complex
Apps
 What is
User
It Flows?
represent the paths

users take to complete a

task within an app, such

as signing up, making a

purchase, or booking a

service.
 “User Flow
Components”
0 02 0 04
1 3
Entry Points Decision Actions Exit Points
Points
Choices users make Steps users take Where the journey
Where the user
begins (e.g., login (e.g., Buy Now or (e.g., filling forms, ends (e.g., task
page, landing page). Save for Later). making payments). completion or
abandonment).
 Strategies for Designing
Effective User Flows

Understand Create Task- Optimize Decision

User Needs Oriented Flows Points

Conduct research to Break tasks into Limit choices to

identify goals, pain smaller steps with avoid cognitive
points, and clear guidance at overload; use
frequently used each stage progressive
paths. disclosure
 Strategies for Designing
Effective User Flows

Mobile vs. Personalization

Desktop
Show context-relevant
Design flows optimized
suggestions based on
for smaller screens
user history or
(e.g., larger buttons,
preferences.
shorter steps).
Metrics for
Success
• What percentage of users
complete a task?

• How long does it take to

complete a flow?

• Where do users abandon

tasks?
 ANY
QUESTIONS