VR Notes

Q. Explain User Interface design.

Definition:
User Interface (UI) design is the process of designing the visual appearance and
interactive elements of a system, such as a website, mobile app, or VR
application. It focuses on the parts of the system that users can see and interact
with, such as buttons, menus, and icons. A good UI makes the system friendly,
attractive, and easy to use.

The main goal of UI design is to make the system simple, clear, and effective
for the user. It ensures that users can complete their tasks quickly and without
confusion. A well-designed UI improves the user experience, reduces errors,
and increases user satisfaction.

Elements of UI Design:

1. Layout – How text, images, buttons, and other elements are placed on the
screen. A clean and organized layout helps users find what they need
easily.

2. Colors & Fonts – The choice of colors and fonts affects readability and
aesthetics. The design should be consistent and match the theme of the
system.

3. Icons & Buttons – Icons represent actions visually, and buttons allow
users to perform tasks easily. They should be clear and intuitive.

4. Navigation – Menus, links, and tabs help users move through the system
without getting lost. Navigation should be simple and consistent across
all screens.

Types of UI Design:

1. Graphical User Interface (GUI) – Uses windows, icons, and buttons

for interaction. Common in computers and apps. Example: Microsoft
Word or any website.

2. Form-Based Interface – Users enter information in forms to interact

with the system. Example: Online registration forms or login pages.
 3. Touch User Interface – Designed for touchscreens, allowing users to
interact by tapping, swiping, or pinching. Example: Smartphones and
tablets.

4. Menu-Driven Interface – Users select options from a list of menus to

perform actions. Example: ATMs, digital kiosks, or simple TV menus.

Example:
In a mobile banking app, the login page has just the username and password
fields, clear buttons for “Login” and “Forgot Password,” and consistent colors
matching the bank’s brand. After a transaction, users receive a confirmation
message.

Q. Explain the Core Elements of User Experience

User Experience (UX) refers to how a person feels and interacts with a system,
product, or application. It focuses on the overall experience, including how easy,
useful, and enjoyable it is to use the system. UX is about making users satisfied
and comfortable while achieving their goals.

The main goal of UX design is to ensure that users can complete their tasks
efficiently and happily. A good UX reduces frustration, saves time, and
encourages users to keep using the system.

Core Elements of User Experience :

1. Strategy Plane

Definition:
The Strategy Plane is the foundation of UX design. It defines why the system
exists and identifies the goals of both the business and the users.

Purpose:

 Understand business objectives and what the company wants to achieve.

 Identify user needs, expectations, and problems.

 This plane ensures that the system is purpose-driven and addresses real
user requirements.
Example:

 In an e-commerce website, the business goal may be to increase online

sales, while the user goal is to find and purchase products quickly and
easily.

2. Scope Plane

Definition:
The Scope Plane defines what the system will do. It transforms the strategy
into specific functional and content requirements.

Purpose:

 List all features the system will provide.

 Specify content requirements such as text, images, or videos.

 Ensures that the project stays focused and avoids unnecessary features.

Example:

 For the e-commerce website:

o Functional requirements: Product search, shopping cart, payment

options, order tracking.

o Content requirements: Product images, descriptions, pricing, user

reviews, and promotional banners.

 This helps developers and designers know exactly what to include in the
system.

3. Structure Plane

Definition:
The Structure Plane decides how the system is organized. It focuses on
navigation and the relationship between different parts of the system.

Purpose:

 Create logical user flows so users can move from one task to another
smoothly.
  Define how features and content are connected.

 Reduces confusion and makes the system intuitive.

Example:

 In the e-commerce website:

o User navigates from Home Page → Category Page → Product

Page → Cart → Payment → Confirmation.

o Clear structure ensures users can find products and complete

purchases without getting lost.

4. Skeleton Plane

Definition:
The Skeleton Plane focuses on the layout of elements on each page or screen. It
decides where buttons, menus, images, and other components should be
placed.

Purpose:

 Improve usability by placing elements where users expect them.

 Make interactions efficient and intuitive.

 Reduces errors by organizing elements logically.

Example:

 On a product page of the e-commerce site:

o “Add to Cart” button near product image for quick access.

o Product details, price, and reviews clearly below the image.

o Navigation menu and search bar at the top for easy movement
across the site.

 This layout ensures the user can find what they need and act fast.
5. Surface Plane

Definition:
The Surface Plane is the visual and sensory layer. It focuses on how the
system looks and feels, including colors, fonts, icons, and graphics.

Purpose:

 Make the system visually appealing and engaging.

 Help users interact naturally with visual cues.

 Reinforce the brand identity and overall feel of the product.

Example:

 In an e-commerce website:

o Buttons like “Buy Now” are bright and noticeable.

o Product images are high-quality and clear.

o Colors and fonts match the brand theme to create a trustworthy

and attractive interface.

Q. Working of UX Elements.

1. Strategy Plane – Setting the Foundation

 The first step is to understand the purpose of the product.

 It focuses on both business goals (what the company wants to achieve)

and user goals (what the users need and expect).

 Research methods like surveys, interviews, and competitor analysis are

used to gather information.

 This step ensures that the system is not built randomly, but has a clear
direction and purpose.

Example:
For an e-commerce site, the business goal is to increase online sales, while the
user goal is to search, compare, and buy products easily. The designer
balances both goals before moving ahead.
2. Scope Plane – Defining Requirements

 Once the strategy is clear, the next step is to decide the requirements of
the system.

 There are two types of requirements:

o Functional requirements: The features and functions the system

must perform (e.g., login, payment, product search).

o Content requirements: The information that will be displayed to

users (e.g., product details, images, reviews).

 This step prevents scope creep (adding unnecessary features) and makes
the project well-defined.

Example:
In the shopping site, functional requirements may include shopping cart, filters,
and order tracking. Content requirements may include images, specifications,
prices, and customer reviews.

3. Structure Plane – Organizing the System

 After deciding requirements, the system is given a logical structure.

 It organizes how pages, screens, and functions are linked together.

 Focuses on user flow—the path users will take to complete a task.

 A good structure makes navigation easy, predictable, and less

confusing.

Example:
In the e-commerce site, the structure may allow users to move like this:
Home Page → Category Page → Product Page → Add to Cart → Checkout →
Payment → Confirmation.
This smooth flow helps users complete shopping without frustration.
4. Skeleton Plane – Designing the Layout

 Once the structure is ready, the layout of each page is designed.

 Skeleton decides the placement of elements like buttons, menus, forms,

text, and images.

 The goal is to make the interface clear, user-friendly, and efficient.

 This plane reduces chances of errors by keeping important elements in

expected positions.

Example:
On the Product Page:

 “Add to Cart” button is placed near the image and price for quick action.

 Product description and reviews are arranged below the main image.

 Navigation bar and search box are placed at the top for easy access.

5. Surface Plane – The Final Look and Feel

 The last step is about the visual design of the product.

 It includes colors, typography, icons, images, spacing, and overall

aesthetics.

 A well-designed surface attracts users and gives them confidence in using

the system.

 It should be visually appealing but not confusing or overloaded.

Example:
In the shopping site:

 Buttons like “Buy Now” are highlighted in bright colors.

 Fonts are clear and easy to read.

 The brand’s color theme is used consistently.

 High-quality product photos give users trust in the purchase.

Q. What is Cognition? and explain cognitive process.

What is Cognition?

Cognition is the mental process by which humans acquire knowledge and

understanding. It includes activities like thinking, remembering, learning,
problem-solving, and making decisions. In simple words, cognition is how our
brain processes information and helps us interact with the world. For example,
when we see traffic lights and stop at red, our cognitive ability helps us
recognize and act correctly.

Types of Cognition

1. Experimential Cognition

 This is fast and automatic thinking.

 It happens without much effort or deep reasoning.

 Example: When we instantly recognize a friend’s face in a crowd or when

we know how to ride a bicycle without thinking step by step.

2. Reflective Cognition

 This is slow and thoughtful thinking.

 It requires effort, analysis, and reasoning.

 Example: When we solve a math problem, write an essay, or decide

which laptop to buy by comparing features.

Cognitive Processes

1. Attention

 Attention is the ability to focus on specific information while ignoring

distractions.

 Example: While studying in a noisy café, concentrating only on the book

requires attention.
2. Perception and Recognition

 Perception is the process of receiving information through our senses

(eyes, ears, skin, etc.).

 Recognition is understanding or identifying that information.

 Example: Hearing a ringtone (perception) and realizing it’s your phone

ringing (recognition).

3. Memory

 Memory is the ability to store, retain, and recall information when

needed.

 It includes short-term memory (for quick tasks) and long-term memory

(for knowledge stored for years).

 Example: Remembering your ATM PIN or recalling a childhood event.

4. Learning

 Learning is the process of gaining new knowledge, skills, or habits.

 It can happen through practice, observation, or experience.

 Example: Learning a new programming language by practicing coding

daily.

5. Reading, Speaking, and Listening

 These are communication-related cognitive processes.

 Reading helps us understand written text, speaking allows us to express

thoughts, and listening helps us receive and interpret spoken information.

 Example: Reading a storybook, giving a presentation, or listening to a

teacher in class.
 Attention → How much a user notices buttons or icons.

 Perception → How they recognize symbols, colors, or alerts.

 Memory → Remembering how to navigate a menu.

 Learning → Adapting to a new app layout.

 Reading, speaking, listening → Crucial for UI with instructions,

voice assistants, or accessibility.

2ND MOD
Q. Describe Visual Design Principles.

Visual design is the process of improving the look and feel of a digital product
or interface so that it is not only attractive but also clear, functional, and user-
friendly. It focuses on how things appear to the user by using elements like
colors, fonts, images, layouts, icons, and spacing. The goal of visual design is to
create an interface that is easy to use, visually appealing, and able to guide the
user smoothly through their tasks.

Visual Design Principles in UX Design :

1. Convey a tone / Communicate the brand

Visual design is not only about colors and shapes, it also sets the mood of the
product and shows what the brand stands for. The design should reflect the
company’s identity and values. For example, a banking app will use
professional colors like blue or grey to show trust and security, while a
children’s learning app may use bright and playful colors like yellow or orange
to feel fun and friendly. This way, users can immediately connect with the brand
just by looking at the design.

2. Lead users through the visual hierarchy

Visual hierarchy means arranging elements (text, buttons, images) in such a

way that the most important things catch the eye first. Designers use size,
contrast, color, and position to guide users. For example, in an e-commerce app,
the "Buy Now" button is usually bigger and highlighted in bright color, while
less important links like "Terms & Conditions" are smaller and placed at the
bottom. This helps users focus on what really matters and reduces confusion.

3. Provide visual structure and flow at each level of organization

A good design makes sure that information is shown in a clear, organized way.
The layout should guide users step by step, without making them feel lost. For
example, in a food delivery app, categories like Pizza, Burgers, Desserts are
clearly divided, and each page shows items in an easy grid layout. This
structured flow makes navigation simple and saves time for the user.

4. Signal what users can do on a given screen

Users should be able to quickly understand what actions are possible. Visual
cues like buttons, icons, hover effects, or underlined links signal that something
is clickable. For example, a login page shows a text box for typing username
and password, with a highlighted "Login" button. If these signals are missing,
users may get confused and not know what to do next.

5. Respond to commands

The system should give feedback when the user does something, so they know
their action has worked. This feedback can be visual (color change), audio
(notification sound), or movement (loading animation). For example, when
pressing "Send" on WhatsApp, the button briefly changes color, and a double-
tick mark appears to confirm the message is sent. This makes the interaction
smooth and trustworthy.

6. Draw attention to important events

Sometimes the system needs to alert users about something urgent or important.
Visual design uses color, size, or animation to highlight these events. For
example, in Gmail, a red error message pops up if you try to send an email
without entering a recipient. Similarly, apps use notification badges (like a red
dot with numbers) to show new messages. These visual cues make sure users
don’t miss critical information.

Q. Wireframe and its types.

Wireframe

A wireframe is a basic blueprint or skeleton of a digital product (like a

website, app, or software interface). It shows the layout, structure, and
placement of elements without focusing on colors, images, or styling. Think of
it as an architect’s plan for a building – it shows where walls, doors, and rooms
will be, but not the paint or furniture. Similarly, wireframes help designers and
developers plan the content, navigation, and user flow before adding visuals
and coding.

Working of Wireframes
 1. Sketching the structure – Designers start by placing placeholders for
text, images, buttons, and menus.
2. Focusing on functionality – Instead of design details, wireframes
highlight how the user will interact with the product.
3. Collaboration tool – They help designers, developers, and stakeholders
visualize the product early and agree on functionality before actual
development starts.
4. Testing ideas early – Wireframes make it easy to spot problems in
usability before spending time on coding or graphics.

📌 Example: If you are designing an online shopping app, the wireframe may
show a search bar at the top, a product grid in the middle, and a cart button at
the bottom – but without colors, product photos, or fancy fonts.

Types of Wireframe Fidelity

Wireframes can be classified based on their level of detail (called fidelity). The
three main types are:

1. Low-Fidelity Wireframes

 These are rough sketches or very simple outlines, often drawn on paper
or basic tools.
 They focus only on structure and layout – showing where elements like
buttons, text, or images will go.
 No details about colors, fonts, or exact spacing.
 Used in the early brainstorming stage to quickly share ideas and
concepts.
 Helps save time because changes can be made easily.

📌 Example: A hand-drawn sketch of a login page showing two text boxes

(username & password), a button, and a "Forgot Password?" link.

2. Mid-Fidelity Wireframes
  More detailed than low-fidelity, but still not final design.
 Usually created using digital tools like Figma, Balsamiq, or Sketch.
 They include more accuracy in alignment, spacing, and functionality,
but still avoid detailed colors or images.
 Text may be represented with actual labels (like “Login” or “Search”)
instead of placeholder text.
 Often used for presenting to clients or teammates because they are
clear yet simple.

📌 Example: A digital wireframe of an e-commerce homepage showing a

navigation bar with labeled buttons (“Home,” “Shop,” “Cart”), a product grid
with placeholders, and a footer – all aligned neatly.

3. High-Fidelity Wireframes

 These are almost close to the final design.

 Created with advanced tools and include precise details like font styles,
real content, icons, spacing, and even interactive features.
 They show exactly how the product will look and function, sometimes
clickable for demo purposes.
 Used before moving to prototyping and development.
 Very helpful for usability testing with real users.

📌 Example: A high-fidelity wireframe of a mobile banking app that includes

the real logo, actual buttons, icons for money transfer, real text like “Balance:
₹10,000,” and working navigation links.