gv

Please read this disclaimer before proceeding:

This document is confidential and intended solely for the educational purpose of
RMK Group of Educational Institutions. If you have received this document
through email in error, please notify the system manager. This document contains
proprietary information and is intended only to the respective group
/ learning community as intended. If you are not the addressee you
should not disseminate, distribute or copy through e- mail. Please notify the
sender immediately by e-mail if you have received this document by
mistake and delete this document from your system. If you are not the intended
recipient you are notified that disclosing, copying, distributing or taking any
action in reliance on the contents of this information is strictly prohibited.
 22CS005
Department: AIML/ADS

Batch/Year: 2022-2026/VII SEM

Created by:
Ms. K. Amuthachenthiru
Assistant Professor/AIML
RMD Engineering College

Ms. B Saratha
Assistant Professor/ADS
RMK Engineering College

Mr. N Raghavendran
Assistant Professor/ADS
RMK College of Engineering and Technology
Table of Contents
Course Objectives 7

Syllabus 8

Course Outcomes 10

Lecture Plan 12

Unit-4:WEB INTERFACE DESIGN

1. Designing Web Designing 13

2. Drag and Drop 14

3. Direct Selection 16

4. Contextual Tools 18

5. Overlays, Inlays and Virtual Pages 20

6. Process Flow 24

7. Using Motion for UX 26

8. Design Pattern: Z-Pattern-F-Pattern 28

9. Visual Hierarchy. 29

10. Look up patterns 30

11. Feedback patterns 31

12. Content beyond syllabus 35

Quiz 37
Assignments 38

Mini Project 39

Real Time Applications 40

Part-A Questions and Answers 41

Part-B Questions 44

Supportive Online Courses 45

Text and Reference Books 46
 Course Objectives
The Course will enable learners:

● Explain the principles of User Interface (UI) in order to do design with intention.
● Define the User eXperience (UX) and the psychology behind user decision making.
● Discuss about UX process and user Psychology.
● Apply technology for designing web applications with multimedia effects.
● Create a wireframe and prototype.
 Syllabus
L T P C
22CS005 UI/UX DESIGN
3 0 0 3
OBJECTIVES:
The Course will enable learners:
● Explain the principles of User Interface (UI) in order to do design with intention.
● Define the User eXperience (UX) and the psychology behind user decision making.
● Discuss about UX process and user Psychology.
● Apply technology for designing web applications with multimedia effects.
● Create a wireframe and prototype.
UNIT I INTRODUCTION TO UI 9
Introduction to UI - Designing Behaviour: Designing with Intention - Conditioning and Addiction
- Timing Matters - Gamification - Social/Viral Structure–Trust - Hidden versus Visible. Basic
Visual Design Principles: Visual Weight - Contrast - Depth and Size – Color- Layout: Page
Framework - Footers - Navigation -Images, and Headlines - Forms - Input Types - Labels and
Instructions - Primary and Secondary Buttons - Adaptive and Responsive Design - Touch versus
Mouse.
List of Exercise/Experiments:
1. Design UI for a Game website.
2. Design one-page UI for a website.
UNIT II USER OBSERVATION AND EXPERIENCE 9
User Research - Subjective Research - Objective Research - Sample size - Three Basic Types of
Questions. Observe a user: Watch How They Choose - Interviews - Surveys - Card Sorting
- Creating User Profiles - Bad profile - Useful profile.
List of Exercise/Experiments:
1. Design UI for a mobile.
2. Explore the Look and Feel of the new Project developed in Ex1.
UNIT III INTRODUCTION TO UX 9
Introduction about UX - Five Main Ingredients of UX - Three ―Whats‖ of user Perspective - Pyramid
of UX Impact - UX Is a Process - UX - Not an Event or Task. Behaviour Basics: Psychology versus
Culture - User Psychology - Experience - Conscious vs Subconscious Experience - Emotions - Gain and
Loss – Motivations.
List of Exercise/Experiments:
1. Design a mascot for an imaginary brand.
2. Create a Sample Pattern Library for a product (Mood board, Fonts, Colors based on UI
principles).
UNIT IV WEB INTERFACE DESIGN 9
Designing Web Interfaces – Drag and Drop, Direct Selection, Contextual Tools, Overlays, Inlays
and Virtual Pages, Process Flow – Using Motion for UX - Design Pattern: Z-Pattern - F- Pattern -
Visual Hierarchy - Lookup patterns – Feedback patterns.
List of Exercise/Experiments:
1. Design a mock-up website for a service sector company.
2. Create a brainstorming feature for proposed product.
UNIT V WIREFRAMING, PROTOTYPING AND TESTING 9
Sketching Principles - Sketching Red Routes - Responsive Design – Wireframing - Creating Wire flows
- Building a Prototype - Building High-Fidelity Mock-ups - Designing Efficiently with Tools -
Interaction Patterns - Conducting Usability Tests - Other Evaluative User Research Methods -
Synthesizing Test Findings - Prototype Iteration
List of Exercise/Experiments:
1. Sketch, design with popular tool and build a prototype and perform usability testing and identify
improvements.
2. Design a mobile mock-up website for an online store.
TOTAL:45 PERIODS
OUTCOMES:
Upon completion of the course, the students will be able to:
CO1: Understand the principles of User Interface (UI) Design in order to design with intention
CO2: Learn the effective User eXperience (UX) and the psychology behind user decision making.
CO3: Understand the importance of UX process and user Psychology.
CO4: Elucidate the implications for designing web application with multimedia effects.
CO5: Create Wireframe and Prototype.
CO6: Design engaging interactions that improve usability.
TEXT BOOKS:
1. Joel Marsh, ―UX for Beginners‖, O'Reilly Media, Inc., 1st Edition 2015.
2. Xia Jiajia, ―UI UX Design‖, O‘Reilly, Artpower International, 2016.
3. Jenifer Tidwell, Charles Brewer, Aynne Valencia, ―Designing Interface‖ 3rd Edition,
O‘Reilly 2020
REFERENCES:
1. Jenifer Tidwell, Charles Brewer, Aynne Valencia, ―Designing Interface‖ 3rd Edition ,
O‘Reilly
2020.
2. Steve Schoger, Adam Wathan ―Refactoring UI‖, 2018.
3. [Link]
roducts%20and%20services.
SOFTWARE REQUIREMENTS:
Javascript, Applets, Equivalent Frontend tools, MySQL, Figma or equivalent.
 Course outcomes

K-
CO# COs
Level

CO1 Understand the principles of User Interface(UI)Designing order to

design with intention K2

CO2 Learn the effective User eXperience(UX) and the psychology behind
user decision making. K2

CO3 Understand the importance of UX process and user Psychology. K2

Elucidate the implications for designing web application with multimedia

CO4 K2
effects.

CO5 Create Wireframe and Prototype. K2

CO6 Design engaging interactions that improve usability. K2

CO- PO/PSO Mapping

CO# PO PO PO PO PO PO PO PO PO PO PO PO PSO PSO PSO
1 2 3 4 5 6 7 8 9 10 11 12 1 2 3

CO1 2 3 3 3

CO2 1 2 3 3 3

CO3 2 3 3 3

CO4 1 2 3 3 3

CO5 1 2 3 3 3

CO6 1 1 1 3
 Lecture Plan
Designing Web Interfaces – Drag and Drop, Direct Selection, Contextual Tools, Overlays, Inlays
and Virtual Pages, Process Flow – Using Motion for UX - Design Pattern: Z-Pattern - F- Pattern -
Visual Hierarchy - Lookup patterns – Feedback patterns.

Session Mode of
No. Topics to be covered delivery

1 Designing Web Interfaces PPT

2
Drag and drop PPT
3 Direct Selection PPT

Contextual Tools
4 PPT
Overlays, Inlays and Virtual Pages

5 Process Flow PPT

6 Using Motion for UX PPT

7 Design Pattern: Z-Pattern-F- Pattern PPT

8 Visual Hierarchy. PPT

9 Lookup Patterns, Feedback Patterns PPT

 UNIT-IV
WEB INTERFACE DESIGN

Designing Web Interface:

Designing a web interface involves several steps in the UI/UX (User Interface/User
Experience) design process. Here's a simplified breakdown of the steps involved:
1. Understanding the Users and Goals:
 Identify the target audience for the website.
 Understand their needs, preferences, and pain points.
 Define the goals of the website and what actions you want users to take.
2. Research and Analysis:
 Conduct competitor analysis to understand what works well and what can be
improved.
 Perform usability testing on existing designs if available.
 Gather user feedback through surveys, interviews, or analytics data.
3. Information Architecture:
 Define the structure and organization of content on the website.
 Create sitemaps to visualize the hierarchy of pages.
 Consider user flow and how users will navigate through the website.
4. Wire framing:
 Create low-fidelity wireframes to outline the layout and structure of each
page.
  Focus on functionality and content placement without getting into visual
design details.
 Iterate on wireframes based on feedback and usability testing.
5. Visual Design:
 Develop high-fidelity mock-ups that incorporate branding elements,
colour schemes, typography, and imagery.
 Ensure consistency in design elements across the website.
 Use design tools like Adobe XD, Sketch, Figma, or even pen and
paper.
6. Prototyping:
 Create interactive prototypes to simulate user interactions and flows.
 Test usability and gather feedback from stakeholders or users.
 Iterate on prototypes based on feedback and make necessary
adjustments.
7. Testing and Iteration:
 Conduct usability testing with real users to identify any usability
issues.
 Gather feedback and iterate on designs to improve user experience.
 Test across different devices and screen sizes to ensure
responsiveness.
8. Development Handoff:
 Prepare design assets and specifications for developers.
 Provide detailed documentation on design elements, interactions, and
animations.
 Collaborate with developers during the implementation phase to
ensure design fidelity.
9. Launch and Post-launch Activities:
 Deploy the website.
  Monitor analytics data to track user behavior and performance.
 Gather user feedback post-launch and make necessary adjustments.
10. Continuous Improvement:
 Regularly review and analyze user feedback and analytics data.
 Iterate on design based on insights to continually improve the user
experience.
Drag and Drop:

Drag and drop is a common interaction pattern used in UI/UX design to enable
users to move elements within a digital interface. This interaction is intuitive and user-
friendly, as it mimics physical object manipulation. Here's a breakdown of how drag and
drop functionality can be implemented in UI/UX design:
1. Identify Use Case:
 Determine where drag and drop functionality will enhance the user
experience.
 Common use cases include reordering items in a list, rearranging elements
on a canvas, or uploading files by dragging them into a designated area.
2. Design Visual Cues:
 Use visual cues to indicate draggable elements. This can include icons, hover
effects, or shadows to signify that an element can be moved.
 Provide feedback when an element is being dragged, such as changing its
appearance or displaying a ghost element that follows the cursor.
3. Define Dragging Behavior:
 Decide how the dragged element should behave. It can either be moved
directly by following the cursor or snap to predefined drop
 zones.
 Consider whether to allow dragging multiple elements simultaneously and
how they should interact with each other.
4. Set Drop Targets:
 Define drop zones where dragged elements can be placed.
 Highlight drop zones when a draggable element is dragged over them to
indicate where the element can be dropped.
 Consider providing visual feedback when an element is successfully dropped,
such as animations or color changes.
5. Accessibility:
 Ensure drag and drop functionality is accessible to all users, including those
using assistive technologies.
 Provide keyboard alternatives or fallback options for users who cannot
perform drag and drop interactions.
6. Testing and Iteration:
 Test the drag and drop functionality across different devices and browsers to
ensure consistency and responsiveness.
 Gather feedback from users through usability testing and iterate on the
design based on their input.
7. Performance Optimization:
 Optimize the performance of drag and drop interactions, especially when
dealing with large amounts of data or complex UI elements.
 Consider lazy loading or pagination to improve performance when dragging
and dropping multiple items.
8. Documentation and Handoff:
 Document the drag and drop behavior, including visual designs, interaction
details, and technical specifications, for developers to implement.
 Collaborate with developers during the implementation phase to
 ensure the drag and drop functionality is implemented accurately.

Direct Selection:

Direct selection in UI/UX refers to the ability for users to directly interact with
individual elements or objects within a digital interface. It allows users to manipulate
elements without needing to go through intermediate steps, such as selecting them from a
menu or using keyboard shortcuts. Direct selection is commonly used in graphic design
tools, drawing applications, and interactive prototypes. Here's how direct selection can be
implemented in UI/UX design:
1. Clickable Elements:
 Ensure that all interactive elements within the interface are clickable or
tappable, allowing users to directly interact with them using a mouse, touch,
or stylus.
 Use familiar visual cues such as buttons, icons, or links to indicate
interactive elements.
2. Draggable Elements:
 Enable elements that can be moved or rearranged within the interface to be
draggable.
 Provide visual feedback when an element is being dragged, such as changing
its appearance or displaying a ghost element that follows the cursor.
3. Resizable Elements:
 Allow resizable elements, such as windows, panels, or images, to be directly
resized by dragging their edges or corners.
 Provide visual indicators, such as resize handles, to show users where they
can interact to resize the element.
4. Text Selection:
 Enable users to select and manipulate text directly within text input fields or
text areas.
  Provide standard text selection behaviors, such as click-and-drag to select
text, double-click to select a word, or triple-click to select a paragraph.
5. Object Selection:
 In graphic design tools or drawing applications, allow users to directly select
individual objects or elements within a canvas or artboard.
 Provide selection handles or bounding boxes around selected objects to
indicate their selection status.
6. Live Preview:
 Provide live previews or real-time feedback when users interact with
elements, such as resizing an image or adjusting a slider.
 Show changes immediately as users manipulate elements, allowing them to
see the results of their actions in real-time.
7. Gestures and Touch Interactions:
 If designing for touch interfaces, consider incorporating touch gestures for
direct manipulation, such as pinch-to-zoom or swipe-to- delete.
 Ensure that touch interactions are intuitive and consistent with user
expectations.
8. Accessibility:
 Ensure that direct selection interactions are accessible to all users, including
those with disabilities or using assistive technologies.
 Provide alternative interaction methods or keyboard shortcuts for users who
may have difficulty with direct manipulation.
Contextual Tools:
Contextual tools are user interface elements that appear or change based on the
context of the user's actions within an application or interface.
These tools are typically designed to provide relevant options, actions, or information
related to the specific task or content being interacted with.

Contextual tools help streamline user workflows by presenting relevant options

without cluttering the interface with unnecessary elements.

Examples of contextual tools include context menus, toolbars that change based on
the selected object or tool, and sidebars that display additional options related to the
current context.

1. Dynamic Presentation: Contextual tools appear or change based on the user's

current context or actions within the interface. For example, when a user selects a
specific object or item, a contextual toolbar or menu may appear with relevant
options for manipulating or interacting with that object.
2. Relevance: Contextual tools are tailored to the specific context of the user's
interactions. They provide options or actions that are directly related to the task at
hand, reducing cognitive load and streamlining user workflows.
3. Space Efficiency: Contextual tools help conserve screen space by only appearing
when needed, rather than cluttering the interface with permanent elements. This
allows for a cleaner and more focused user interface.
4. Task-Oriented: Contextual tools are task-oriented, providing users with the tools
and options necessary to accomplish their current task effectively. By presenting
relevant options within the context of the user's actions, contextual tools help guide
users through the interface and facilitate task completion.
5. Examples: Common examples of contextual tools include context menus that
appear when right-clicking on an object,
toolbars or ribbons that
 change based on the selected tool or object, and sidebars or panels that display
additional options or information related to the current context.

Overlays:
Overlays are temporary graphical elements that appear on top of the main content or
interface to provide additional information, options, or interactions.

Overlays are commonly used to present modal dialogs, notifications, alerts, tooltips, or
lightboxes that temporarily shift the user's focus to a specific task or piece of content.

Overlays often dim or blur the background content to draw attention to the overlayed
information or interaction.

Overlays can be dismissed by the user or automatically disappear after a certain period,
allowing users to return to the main content or interface.

1. Temporary Visibility: Overlays are designed to be temporary and appear only

when triggered by a user action or system event. They typically overlay the main
content or interface but can be dismissed by the user or automatically disappear
after a certain period.
2. Attention Focus: Overlays help draw attention to specific information or
interactions by visually separating them from the rest of the interface. This helps
guide the user's focus and directs their attention to important content or actions.
3. Modal Interaction: Many overlays are modal, meaning they require user
interaction before the user can interact with the underlying interface. This ensures
that the user's attention is fully focused on the content or interaction presented in
the overlay.
4. Content Variety: Overlays can contain a variety of content, including forms,
messages, images, videos, or interactive elements. They are
 versatile and can be used to present different types of information or interactions
depending on the context.
5. Responsive Design: Overlays should be designed to be responsive and adapt to
different screen sizes and devices. They should be positioned and sized
appropriately to ensure a consistent user experience across various devices and
screen resolutions.
6. Accessibility: When designing overlays, it's important to consider accessibility
requirements to ensure that all users can access and interact with the content
presented in the overlay. This includes providing keyboard accessibility, ensuring
proper focus management, and considering users with visual or motor impairments.
7. User Feedback: Overlays are often used to provide feedback to the user, such as
error messages, success notifications, or confirmation dialogs. They help improve
the user experience by providing timely and relevant feedback based on user
actions.

Inlays:
Inlays are graphical elements that are inserted into the main content or interface to provide
additional information, context, or functionality. Unlike overlays,

inlays are integrated directly into the main content or interface and do not cover or
obscure the underlying content.

Inlays are commonly used to display inline tooltips, popovers, or expandable panels that
provide additional details or options related to specific elements within the interface.

Inlays enhance the user experience by providing contextual information and options
without disrupting the flow of the main content or interface.
1. Integration with Main Content: Inlays are seamlessly integrated into the main
content or interface, appearing within the context of the existing layout and design.
They are often designed to blend in with the surrounding content to create a
cohesive user experience.
2. Inline Presentation: Inlays are presented inline with the main content, typically as
tooltips, popovers, or expandable panels that provide additional details or options
related to specific elements within the interface. They are triggered by user actions,
such as hovering over a specific element or clicking on a designated area.
3. Contextual Information: Inlays are designed to provide contextual information or
options related to the user's current interaction or task. They offer additional details,
explanations, or actions that enhance the user's understanding or ability to interact
with the interface.
4. Non-Disruptive: Inlays are non-disruptive and do not obstruct the user's view of
the main content or interface. They appear temporarily and can be dismissed by the
user if desired, allowing the user to focus on the main content without interruption.
5. Variety of Content: Inlays can contain a variety of content, including text, images,
links, buttons, forms, or interactive elements. They are versatile and can be used to
present different types of information or interactions depending on the context and
user needs.
6. Responsive Design: Inlays should be designed to be responsive and adapt to
different screen sizes and devices. They should be positioned and sized
appropriately to ensure a consistent user experience across various devices and
screen resolutions.
7. Accessibility: When designing inlays, it's important to consider accessibility
requirements to ensure that all users can access and interact with the content
presented in the inlay. This includes providing keyboard
 accessibility, ensuring proper focus management, and considering users with visual
or motor impairments.

Virtual Pages:
Virtual pages are user interface elements that simulate the experience of navigating
between multiple pages or views within a single-page application or interface.

Virtual pages are typically used in web applications or mobile apps to create the illusion of
multiple pages or views while maintaining a single, seamless interface.

Virtual pages are often implemented using client-side routing or dynamic content loading
techniques to update the interface in response to user interactions, such as clicking on
navigation links or performing actions within the application.

Virtual pages help improve the performance and usability of web applications by reducing
the need for full-page reloads and providing a more fluid and responsive user experience.

1. Single-Page Application (SPA): Virtual pages are commonly used in single-page

applications (SPAs) where the entire application is contained within a single HTML
page. Instead of loading separate HTML pages for each view, SPAs dynamically
update the content on the page to simulate navigation between different pages or
views.
2. Dynamic Content Loading: Virtual pages are created and managed dynamically
within the application, typically using JavaScript frameworks like React, Angular,
or [Link]. Content is loaded and updated dynamically based on user interactions,
such as clicking on navigation links or performing actions within the application.
 3. Perceived Navigation: Virtual pages provide users with the perception of
navigating through different pages or sections of content, even though the content is
all contained within a single page. This creates a smooth and seamless user
experience without the need for full-page reloads.
4. URL Routing: Virtual pages often utilize client-side routing to update the
browser's URL and provide bookmarkable URLs for different views within the
application. This allows users to share links and navigate directly to specific views
within the application.
5. State Management: Virtual pages may utilize state management techniques to
manage the state of the application and ensure consistency between different views.
This includes managing user authentication state, form data, and other application
state across virtual pages.
6. Animation and Transitions: Virtual pages can be enhanced with animations and
transitions to create smooth transitions between different views and provide visual
feedback to users as they navigate through the application.
7. Performance Considerations: While virtual pages can provide a seamless user
experience, they also come with performance considerations, especially for
applications with large amounts of dynamic content. Careful optimization of data
fetching, rendering, and state management is essential to ensure optimal
performance.
8. Accessibility: Virtual pages should be designed with accessibility in mind to ensure
that all users, including those using screen readers or keyboard navigation, can
effectively navigate and interact with the application.

Process Flow:
If you want users to get from A to B, you have to design how they get there. And you
definitely want users to get from A to B.
Thousands or millions of people need to move through your Information
Architecture without getting stuck or lost, and the easier it is for them to “flow” to where
they want to go, the better your design will perform and the happier the users will be.
Whether they are flowing through the checkout, through projects in your portfo- lio, or
through the registration process on Facebook, this is important to think about.
Just like most people will go from the front door to a train, or from one train to another,
your app or site will have common paths to consider, too.
Don’t Count Clicks or Pages
The architect of Grand Central Station didn’t count how many steps people would take
or how many doorways they would go through, because it doesn’t matter.
It is more important to give people the right information at the right time so they know
whether to turn left or right to find their train.
A long hallway, like a flow with many pages, can be very simple to use, even though it’s
long. And a short hallway with too many signs can be confusing, like a website with
complex menus, even though it is “only” one choice.
Avoid Making a “Dead End”
If users navigate through several pages only to arrive at a page with no “next step,” they
will leave or get lost, or get angry. Make sure there is always somewhere to go, and
make sure the users know how to get there.

Make Loops If You Want Users to Go Backward

When it is a “loop,” It means something like this:
• Page A links to Page B.
• Page B links to Page C.
• Page C links to Page A.
The user can keep clicking forever without leaving your site.
Users Only Go Backward When Confused or Lost—That’s Bad
You might think of your site as a tree with several branches, but users only think about the
navigation options they can see right now or those that they have already used.
If a user clicks the back button, it doesn’t mean they are going “up a level” to retry their
last decision. It means they have no idea what to do. In a user’s mind, the back button is
the “abort” button or the “nope” button.
If, during user tests, you see users hitting “back” a lot, it means they are not finding what
they want. And since you are probably sitting there watching them, it probably means that
they would leave the site when they are alone.

Using Motion for UX:

In digital design, it is becoming more and more common to include animation or moti0on
design as part of the UX. It’s a stylish detail, but in UX, you care about more than style.
Motion is a tool.

If Motion Makes People Wait, It’s Bad:

Before you start designing amazing transitions between screens, and smooth animated buttons,
and parallax gravity in your scrolling, think about the user.

If the user is trying to navigate, or if they know what is coming, or if they have to
see this animation a hundred times every time they use your site or app, you might be doing
more harm than good.
Animations take time to show, and making users wait quickly gets frustrating. Even worse
than waiting, sometimes animations make things hard to read, or they distract users from
the content and buttons you want them to read and click.
Motion Is Noticed First
If you have ever been disturbed by a vibrating banner or a jumping button, then you
understand how motion can draw your attention.
If you made a list of the things your brain notices, in order of priority, motion would be
first. But, a little goes a long way.
If you make a vibrating banner or a jumping button (which are really annoying to click, by
the way) I will hunt you down and... well... let’s just say it won’t be pretty.
Straight lines point in a direction
Different types of motion will do different things to the user’s eyes. If you make
something move in a straight line, the user’s brain will anticipate where it’s going and the
user will look at the “end of the line.” If you are using motion to highlight key features or
tell users where to go, straight lines are a good choice.

Curved lines make people follow the curve

However, if you want to lead users around the screen—like when you’re explaining your
app for the first time—curved motion will make their eyes stick to the path and stop where
the animation stops.
What Is a Design Pattern?

When many designers have the same challenge and someone solves it in an elegant
way, and many designers use that solution, it is called a design pattern.
A design is not necessarily good just because it’s common. To be a “good” design
pattern, a solution must be common and usable.
Some design ideas become popular because they allow lazy UI designers to ignore
a challenging feature. It’s like putting a bag over someone’s head because they are ugly.
For example: Facebook’s “hamburger” button—which represents the hidden menu
in many mobile apps—has started appearing on full-size websites that have plenty of
space for a menu. It’s common because hiding the menu is easier than designing a nice
one, not because the results are better.
It is easy to imagine every user excitedly reading every letter you write and every
pixel you make. Get over it, because real users won’t. They scan.“Scanning” means the
user only stops to read when some- thing catches their eye.
Using a website or an app may feel like a different experience every time, but in
fact, the way people look at any design is fairly predictable
The Z-Pattern

Let’s start with the most boring design I can imagine: an entire newspaper page of solid text.
All one story. No head-lines. No images. No breaks or pull quotes; just text, in even
columns, from corner to corner.

In a design like that which I hope you never create users will generally scan it in a pattern
something like a “Z,” starting in the upper left and ending in the lower right. Anything in
the layout that isn’t near the Z probably won’t be noticed. Boring! Zzzzzzzz.... (see what I
did there?)

If we add a bigger head- line (visual weight), create one column to follow (line tension), and
use smaller
sections (repetition), we can get people closer to the famous F-Pattern.

F-Pattern:

Similar layouts = similar scanning pattern. Google results make a great F-Pattern if you track
the eye movements of users.
The F-Pattern made the founders of the Nielsen Norman Group famous a while back. They
still maintain a very good blog and publish many reports worth reading.
The F-Pattern works like this:
1. Start in the upper-left corner, like the Z-Pattern.
2. Read/scan the first (head)line of the text.
3. Scan down the left side of the column until you find something interesting.
4. Read the interesting thing more carefully.
5. Continue scanning down.
6. By repeating that method over and over, the scanning pattern starts to look like an “E” or an
“F,” hence the name.

Visual Hierarchy:
Why Is This Important?

You might notice that some parts of the page get lots of attention “naturally,” whereas other
parts of the page are overlooked most of the time. This is what is meant by
“strong” and “weak” spots in a layout.
A button in the upper left will get more clicks than a button in the upper right, which will get
more clicks than a button in the lower left, which will get more clicks than a button in the
lower right. And all of those will get more clicks than something randomly stuck in the middle,
unless you do something about it.
It might also be good to know that each “block” of content and each column can have their
own F-Pattern. It doesn’t have to be One F-Pattern-per-page, but that is a more Advanced
conversation for another day.
Visual Hierarchy:
When you consistently use typography to indicate the importance of text, and certain
colors to highlight buttons, and When you give more visual weight to things that matter, it
creates a visual hierarchy (i.e.,a design that people can scan easily). Our eyes jump from
important thing to important thing rather than scanning like a robot.
Some designers think visual hierarchy is good because it looks better, but the truth is that it
feels better because it is easier to scan.

Lookup Patterns:
In UI/UX design, "lookup patterns" typically refer to design patterns or interaction patterns
that facilitate searching for and retrieving specific information within a digital interface. These
patterns are used to enhance the user experience by providing efficient and intuitive ways for
users to find the content they are looking for. Here are some common lookup patterns:
1. Search Box: The search box pattern is perhaps the most straightforward lookup pattern.
It involves providing a text input field where users can enter keywords or phrases to
search for specific content within the interface. Search boxes are commonly placed
prominently in the header or navigation area of a website or application.
2. Autocomplete: Autocomplete is a pattern that enhances the search box by providing
suggestions or predictions as the user types in their query. This helps users find what
they're looking for more quickly by presenting relevant suggestions based on the input
provided.
3. Filters and Facets: Filters and facets are patterns commonly used in e- commerce and
content-heavy websites. They allow users to refine search results by selecting specific
criteria or attributes, such as price range, category, date, or location. Filters and facets
help users narrow down their search results to find the most relevant content.
 4. Tagging: Tagging is a pattern that allows users to categorize or label content using tags
or keywords. Users can then filter content based on these tags, making it easier to find
related or relevant items. Tagging is commonly used in content management systems,
social media platforms, and collaborative tools.
5. Alphabetical Index: An alphabetical index is a pattern often used in interfaces with
large amounts of content, such as directories or lists. It provides an alphabetical list of
links or shortcuts that users can click on to quickly jump to specific sections of content
based on the initial letter or character.
6. Recent Items or History: This pattern involves displaying a list of recently viewed or
accessed items, allowing users to quickly revisit content they have interacted with
previously. This pattern is useful for applications where users frequently need to
reference recent items or activities.
7. Saved Searches or Bookmarks: Saved searches or bookmarks allow users to save and
revisit specific search queries or content items for future reference. This pattern is
useful for users who regularly access certain types of content or perform repetitive
searches.
8. Advanced Search: Advanced search patterns provide users with additional options and
filters to perform more complex and targeted searches. This pattern is commonly used
in applications where users may have specific requirements or preferences for their
search queries.

Lookup Patterns:
In UI/UX design, a "feedback pattern" refers to a design pattern or interaction
pattern that provides users with feedback on their actions within a digital interface.
Feedback patterns play a crucial role in enhancing the user experience by providing
users with clear and immediate information about the outcome of their
actions,
helping them understand how the interface responds to their inputs. Here are some
common feedback patterns:

1. Visual Feedback: Visual feedback involves using visual cues to indicate to

users that their action has been recognized and processed by the interface. This can include
animations, changes in color or shape, or the appearance of new elements. Visual feedback
helps users understand the state of the interface and confirms that their action has been
successfully completed.
2. Tooltips: Tooltips are small informational pop-ups that appear when users hover
over or interact with a specific UI element. Tooltips provide additional context or
explanation about the purpose or function of the element, helping users understand its
intended use.
3. Error Messages: Error messages are displayed when users perform actions that
cannot be completed successfully, such as submitting an incomplete form or entering invalid
data. Error messages should clearly communicate the nature of the error and provide
guidance on how to correct it, helping users resolve issues and continue with their task.
4. Success Messages: Success messages confirm to users that their action has been
completed successfully. These messages typically appear after users submit a form, complete
a transaction, or perform another action that requires confirmation. Success messages should
be clear and concise, providing users with reassurance that their action was successful.
5. Loading Indicators: Loading indicators are used to inform users that the
interface is processing their request or fetching data. These can include spinners, progress bars,
or other animated elements that indicate that the interface is working in the background.
Loading indicators help manage user expectations and reduce frustration by providing
feedback during periods of waiting.
6. Confirmation Dialogs: Confirmation dialogs are pop-up messages that appear
when users perform actions that have significant consequences, such as
deleting a file or initiating a irreversible action. Confirmation dialogs require users to
confirm their action before proceeding, helping prevent accidental or unintended actions.
7. Hover States: Hover states are visual changes that occur when users hover over
interactive elements, such as buttons or links. Hover states provide feedback to users that the
element is interactive and can be clicked or tapped, helping improve the discoverability of
interactive elements within the interface.
 Content beyond Syllabus
1. Microinteractions: Microinteractions are small, subtle animations or visual cues that
provide feedback to users during their interactions with a digital interface. They serve
to delight users, provide guidance, or communicate system status. Designing effective
microinteractions requires attention to detail and an understanding of user behavior.
2. Motion Design: Motion design involves using animations, transitions, and visual
effects to create engaging and intuitive user interfaces. It goes beyond simple
microinteractions to encompass the overall movement and flow of elements within a
digital interface. Motion design can enhance usability, communicate hierarchy, and
create memorable experiences.
3. Personalization and Adaptive Interfaces: Personalization involves tailoring the user
experience to individual users based on their preferences, behavior, or demographics.
Adaptive interfaces dynamically adjust their layout, content, or functionality based on
factors such as screen size, device type, or user context. Personalization and adaptive
interfaces aim to provide users with more relevant and tailored experiences.
4. Emotional Design: Emotional design focuses on creating user experiences that evoke
positive emotions and connect with users on a deeper level. It involves considering
the emotional impact of design elements, such as color, typography, imagery, and
tone of voice. Emotional design aims to create experiences that resonate with users
and foster a strong emotional connection with the product or brand.
5. Accessibility and Inclusive Design: Accessibility is the practice of designing digital
interfaces that are usable by people with disabilities, including those with visual,
auditory, motor, or cognitive impairments. Inclusive design goes beyond accessibility
to consider the diverse needs and abilities of all users, regardless of disability status.
Advanced topics in accessibility and inclusive design involve understanding complex
accessibility guidelines, conducting user testing with diverse populations, and
implementing inclusive design principles throughout the design process.
6. Neurodesign and Behavioral Psychology: Neurodesign involves applying principles
from neuroscience and behavioral psychology to UX design to understand how users
perceive, interact with, and respond to digital interfaces. It explores topics such as
visual perception, attention, memory, decision-making, and persuasive design
techniques. By understanding the underlying cognitive and emotional processes,
designers can create more effective and impactful user experiences.
7. UX Research Methods: Advanced UX research methods go beyond basic user testing
and usability studies to explore more complex research questions or gain deeper
insights into user behavior. This may include techniques such as eye tracking,
biometric measurement, ethnographic research, and longitudinal studies. Advanced
UX research methods help uncover nuanced user behaviors, preferences, and needs
that inform design decisions.
Quiz
1. Which of the following best describes the Z-pattern in web design?
A. A pattern where users scan the page in an F-shape
B. A pattern where users' eyes follow a Z-shaped path across the page
C. A pattern that emphasizes vertical scanning of content
D. A pattern where users scan the page randomly

Answer:
B. A pattern where users' eyes follow a Z-shaped path across the page

2. Which of the following is an example of the "Drag and Drop" interaction pattern?
A. Clicking a link to open a new page
B. Hovering over a button to see additional options
C. Dragging an image into a document
D. Scrolling through a page

Answer:
C. Dragging an image into a document

3. What is the main purpose of contextual tools in web design?

A. To allow users to select specific content by clicking on it
B. To provide tools that only appear when relevant to the user's task
C. To guide users through a set of instructions step-by-step
D. To provide animated transitions for navigation

Answer:
B. To provide tools that only appear when relevant to the user's task

4. Which of the following best describes the F-pattern in web design?

A. A pattern where users' eyes scan the page in a zig-zag motion
B. A pattern where users read content from top to bottom and left to right, forming the letter "F"
C. A pattern that focuses on the user's emotional response to content
D. A pattern that emphasizes the importance of vertical scrolling

Answer:
B. A pattern where users read content from top to bottom and left to right, forming the letter "F"

5. What is the primary function of feedback patterns in web design?

A. To inform users of actions taken on the website, such as clicking or scrolling
B. To provide users with visual cues and responses based on their interactions, like success or error
messages
C. To guide users through a series of pages with transitions
D. To provide users with background animations for engagement

Answer:
B. To provide users with visual cues and responses based on their interactions, like success or error
messages
 Assignments

Q. Question
No. CO Level K Level

1 Z-pattern and F-pattern Analysis in Real-Time

Web Design CO1 K2

2 Designing an Interactive Drag-and- Drop

Interface for Task Management CO1 K2
Mini Project

Q. No. Question
CO Level K Level

1 Job Vacancy Posting & Candidate Matching CO1 K3

System

2 Virtual Shopping Cart with Drag-and-Drop CO1 K3

Checkout Process
 Real time Applications
1) Social Media Applications

2) Ride sharing application

3) E-commercePlatforms
 Part-A Questions and Answers
1. List out the steps involved in web interface? (CO4,K1)

 Understanding the Users and Goals:

 Research and Analysis:
 Information Architecture:
 Wire framing:
 Visual Design:
 Prototyping:
 Testing and Iteration:
 Development Handoff:
 Launch and Post-launch Activities
 Continuous Improvement:

2. What are inlays?(CO4,K1)

Inlays:
Inlays are graphical elements that are inserted into the main content or interface to provide
additional information, context, or functionality. Unlike overlays,inlays are integrated directly
into the main content or interface and not
cover or obscure the underlying content.

3. What are Virtual Pages? (CO4,K1)

Virtual pages are user interface elements that simulate the experience of
navigating between multiple pages or views within a single-page application or
interface.

Virtual pages are typically used in web applications or mobile apps to create
the illusion of multiple pages or views while maintaining a single, seamless
interface.
4. What is Direct Selection?(CO4,K1)

Direct selection in UI/UX refers to the ability for users to directly interact with
individual elements or objects within a digital interface. It allows users to manipulate
elements without needing to go through intermediate steps, such as selecting them from a
menu or using keyboard shortcuts. Direct selection is commonly used in graphic design tools,
drawing applications, and interactive prototypes.

5. What is the Z-pattern in web design, and how does it guide user interaction? (CO1,K2)
The Z-pattern is a layout design pattern where users scan the content in a
shape resembling the letter "Z." The flow starts from the top left of the page, moves
horizontally to the right, then diagonally to the bottom left, and finally moves horizontally
again to the bottom right. This pattern is effective for guiding the user’s eyes toward key
elements, such as headlines, images, and calls to action.

6. Explain the role of feedback patterns in improving user experience.(CO2,K2)

Feedback patterns are visual or auditory cues that inform users of the result of
their actions, helping them understand if they’ve completed a task successfully or if an error
has occurred. Common feedback patterns include success messages (e.g., "Task completed
successfully") and error messages (e.g., "Invalid input"). These cues improve usability by
providing real-time updates, enhancing user confidence, and guiding them through the
system.

7. What is the F-pattern in web design, and in which type of content-heavy websites is it most
effettern is active? (CO3,K2)
The F-pa reading pattern where users primarily focus on the top and left
portions of a webpage. The pattern begins with a horizontal scan across the top, followed by
a vertical scan down the left side. It is most effective for content-heavy websites, such as
blogs or news sites, where users typically read headlines and subheadings first and scan the
content before deciding to engage further.
8. What is the purpose of using a drag-and-drop interface in web design?(CO4,K3)
A drag-and-drop interface allows users to interact with a system by dragging
elements (such as files, images, or tasks) and dropping them in a different location. This
intuitive interaction pattern makes tasks such as organizing content, managing tasks, or
customizing settings easier and more engaging. It also reduces the need for manual input,
making the user experience smoother.

9. How do contextual tools enhance the user interface in web design?(CO5,K2)

Contextual tools appear only when a user interacts with a specific element or section
of a webpage, providing relevant actions or options. For example, when a user selects text, a
toolbar with options such as bold, italic, or underline may appear. Contextual tools enhance
the user interface by keeping the workspace uncluttered and offering relevant tools only
when needed, improving efficiency and focus.

[Link] are overlays in web design, and how do they affect user experience? (CO6,K2)
Overlays are semi-transparent layers that appear on top of a webpage's content
to provide additional information, options, or interactions. Commonly used in modals, pop-
ups, and tooltips, overlays grab user attention without redirecting them to a new page. They
enhance the user experience by offering supplementary content while preserving the user’s
context on the current page.
 Part-B Questions
Q. Questions CO
K-Level
No. Level
1
What is web interface design? Explain CO4 K1

2 Explain Contextual Tools in detail. CO4 K2

What is Design pattern? Compare Z and F

3 CO4 K2
pattern.

What is Motion in UX, and why is it important in the

4 CO4 K2
development of User eXperience?

What role does Process flow plays in effective user

5 CO4 K2
experience design?

Can you explain the primary goals of a web interface

6 CO4 K2
design?

What role des visual Hierarchy plays in creating an

7 CO4 K2
effective user eXperience?
 Supportive Online Courses
Sl.
Courses Platform
No.
UI / UX Design Specialization" by CalArts (California Institute of
1 Coursera
the Arts)
Interaction Design Specialization" by UC San Diego(University of
2 Coursera
California, San Diego)

3 "UI/UX & Web Design Using Adobe XD" by Daniel Walter Scott Udemy

UI/UX Design with Adobe XD : Design & Prototype a Mobile

4 App" by Dani Beaumont Skill share

5 UI/UX for Beginners Great learning

6 UI Design and Implementing Infyspringboard

Text & Reference Books

Sl. BookName&Author Book

No.
1. JoelMarsh, UX for Beginners ‖ , O'Reilly Media, Inc., Textbook
1stEdition2015.
2. XiaJiajia,―UIUXDesign‖,O‘Reilly,Artpower International
,2016.
3. Jenifer Tidwell ,CharlesBrewer
,AynneValencia,―DesigningInterface‖3rdEdition,O‘Reilly 2020
Assessment Schedule

[Link] Assessment Proposed Actual

Date Date

1 Unit TestI

2 Internal Assessment Test I

3 Unit Test II

4 Internal Assessment Test II

5 Model Examination
 Thank you
Disclaimer:

This document is confidential and intended solely for the educational purpose of RMK Group of Educational
Institutions. If you have received this document through email in error, please notify the system manager.
This document contains proprietary information and is intended only to the respective group / learning
community as intended. If you are not the addressee you should not disseminate, distribute or copy through e-
mail. Please notify the sender immediately by e-mail if you have received this document by mistake and
delete this document from your system .If you are not the in ended recipient you are not if it that disclosing,
copying, distributing or taking any action in reliance on the contents of this information is strictly prohibited.