UI/UX Design

Unit 2
UI Design Fundamentals
1 Evolution of user interfaces
• Today, computers and smartphones are predominant globally. So, to make it easy for
humans to interact with objects and technology, the development and rapid evolution of
UI design have become essential.
• The evolution of user interfaces (UI) has been a dynamic and ongoing process, shaped by
technological advancements, design trends, and user preferences.
• Here's a brief overview of the key stages in the evolution of UI:

Command Line Interface (CLI) [1950s to 1970s]:

• Early computers featured command-line interfaces where users interacted with the
system through text commands.
• Features: Text-only interface. Required users to memorize commands and syntax. No
graphical elements; purely functional.
• Examples: Unix shell, MS-DOS.

Graphical User Interface (GUI) [1980s]:

• GUIs introduced visual elements such as windows, icons, menus, and pointers (WIMP
model), making systems more accessible.
• Features: Use of icons, buttons, and dialog boxes. Point-and-click navigation using a
mouse. Supported multitasking and user-friendly operations.
• Examples: Apple Macintosh (1984).Microsoft Windows (1985).

Web-based Interfaces [1990s]:

• The rise of the internet brought web-based interfaces, allowing interaction through web
browsers.
• Features: Use of HTML, CSS, and JavaScript for creating interactive web pages. Evolution
of static web pages to dynamic, interactive content.
• Examples: Netscape Navigator. Early websites and e-commerce platforms.

Touchscreen Interfaces – 2000s:

• The advent of mobile devices brought a new set of UI challenges. Limited screen space
and touch-based interactions became prominent.
• Features: Gestures like swipe, pinch, and zoom. Responsive designs tailored to small
screens. Apps designed for finger-friendly navigation.
• Example: Apple iPhone (2007), Android device.

Voice and Gesture Interfaces/Natural User Interfaces (NUI) – 2010s :

• voice-controlled assistants like Siri, Google Assistant, and Amazon Alexa introduced new
ways of interacting with devices.
• Features: Voice commands (e.g., Siri, Alexa). Gesture-based controls (e.g., Microsoft
Kinect). Augmented and virtual reality interfaces.
• Example: Google Assistant, Amazon Echo.AR/VR devices like Oculus Rift and HoloLens.

Conversational Interfaces – 2010s:

• Interfaces moved toward conversational AI for more human-like interactions.
• Features: Chatbots and virtual assistants. Text or voice-based interactions. AI-powered
recommendations and personalization.
• Example: ChatGPT, Google Bard. Facebook Messenger chatbots.

PROF. HARSH KANTAWALA, ASST. PROF, GCET. 1

 UI/UX Design

Immersive Interfaces – 2020s and Beyond:

• Immersive technologies provide interactive and multi-sensory experiences.
• Features: Virtual reality (VR) and augmented reality (AR). Brain-computer interfaces
(BCI) under research. Haptic feedback for touch simulation.
• Examples: AR/VR-based educational and gaming platforms.

2 Interaction with physical components

• The user interface (UI) is the point of human-computer interaction and communication in
a device.
• The user interface is the point at which human users interact with a computer, website or
application. The goal of effective UI is to make the user's experience easy and intuitive,
requiring minimum effort on the user's part to receive the maximum desired outcome.
• UI can include display screens, keyboards, a mouse, and the appearance of a desktop. It is
also the way through which a user interacts with an application or a website.
• Types of Physical Component Interactions in UI:
• Input Devices: - Keyboard/ Mouse, Trackpads/ Joysticks, Touchscreens
• Sensors: - Motion Sensors, Proximity, Light, Temperature, Pressure Sensors
• Voice Interaction: - Microphones input - Integration with virtual assistants.

3 Flat Design.
• It is a design approach that involves creating minimalistic two-dimensional (flat)
illustrations for web and mobile interfaces.
• Flat design is a minimalist design trend practiced commonly in both user interface design
(UI design) and user experience design (UX design).
• It features contrasting color palettes, minimalist typography, white space, crisp edges, and
grid-based layouts.
• Flat design is a streamlined and modern way to deliver information fast.
• It involves no shading, no added glare, and no highlights that are often used in other design
styles to make images look three-dimensional.
• Flat design is a minimalist design approach that uses simple design elements such as flat
icons and two-dimensional shapes.
• Flat design is commonly interpreted as a reactionary movement against 3D,
skeuomorphic, and realistic design styles. A fully flat interface doesn’t use any of these
styles.

Three-Dimensional Effects
• 3D effects give an illusion of depth to an interface, which can help users interpret visual
hierarchy and understand which elements are interactive.
• Elements that appear raised look like they could be pressed down (clicked with the
mouse). This technique is often used as a signifier for digital buttons.
• Elements that appear sunken or hollow look like they could be filled. This technique is
often used as a signifier for input fields, like search tools.
• Since the early days of graphical user interfaces, screens have employed pseudo-three-
dimensional effects (shadows, gradients, highlights) to help users understand the available
actions at a glance.
• However, the pseudo-3D effect in these early GUIs tended to be aggressive, overdone, and
visually distracting.

Main characteristics are:

• Minimalism: Removes unnecessary details like textures, gradients, and shadows, keeping
designs clean and straightforward.
• Bold and Simple Colors: Uses bright, solid colors to differentiate elements.

PROF. HARSH KANTAWALA, ASST. PROF, GCET. 2

 UI/UX Design

• 2D Elements: Focuses on flat, two-d shapes without complex effects.

• Clear Typography: Employs simple, readable fonts with no decorative styles.
• Focus on Functionality: Prioritizes user experience with intuitive layouts and elements.
• Use of Icons: Incorporates clean and clear icons to represent actions or features.
• Responsive Design: Adapts well to different screen sizes and resolutions.

4 Skeuomorphism
• Skeuomorphism is a design style that makes digital elements look and feel like real-world
objects.
• It uses textures, shadows, and 3D effects to make digital designs look like real-world
objects, making them easy to understand and use.
Features:
• Realistic Look: Buttons look like they're raised and can be pressed.
• Icons resemble their real-world counterparts (e.g., a trash can for deleting files).
• Textures and Details: Uses materials like wood, leather, or metal to create a life-like
appearance.
• Adds depth with shadows and gradients.
• Familiarity: Helps users understand digital tools by replicating how physical objects
work.
5 Realism
• Realism in design is about making digital elements look as close as possible to real-world
objects. It focuses on lifelike textures, details, and effects to create a natural and
immersive experience.
• Features:
• Detailed Textures: Surfaces look like wood, leather, glass, or metal.
• Lighting and Shadows: Creates depth, making objects appear three-dimensional.
• Natural Colors: Uses shades that match the real world for a believable look.
• Physical Accuracy: Designs behave or look like their real-life counterparts.

6 Role of User Interface (UI) in UX

• Gather and evaluate user requirements in collaboration with product managers and
engineers
• Illustrate design ideas using storyboards, process flows and sitemaps
• Design graphic user interface elements, like menus, tabs and widgets
• Build page navigation buttons and search fields
• Develop UI mockups and prototypes that clearly illustrate how sites function and look
like
• Create original graphic designs (e.g. images, sketches and tables)
• Prepare and present rough drafts to internal teams and key stakeholders
• Identify and troubleshoot UX problems (e.g. responsiveness)
• Conduct layout adjustments based on user feedback
• Adhere to style standards on fonts, colors and images

7 Laws of digital interface design

• As there is no universally recognized "laws" in digital interface design, there are principles
and guidelines that designers often follow to create effective and user-friendly interfaces.
• Key principles can be considered as "laws":
• Law of Clarity: The interface should communicate its purpose and functionality clearly.
Users should be able to understand how to interact with the system without confusion.
• Law of Consistency: Maintain consistency in design elements, layout, and terminology
across the interface. Consistency helps users build a mental model and reduces cognitive
load.

PROF. HARSH KANTAWALA, ASST. PROF, GCET. 3

 UI/UX Design

• Law of Feedback: Provide immediate and clear feedback for user actions. Users should
know that their interactions are acknowledged and understand the outcome of their
actions.
• Law of Error Prevention: Design interfaces to minimize the occurrence of errors. Use
preventive measures, clear instructions, and confirmations to help users avoid mistakes.
• Law of Learnability: Design interfaces that are easy for users to learn. Users should be
able to understand the basics quickly and progressively discover more advanced features
as they become more familiar with the system.
• Hick's Law: The time to decide increases with the number of options.
• Fits' Law: The time to reach a target depends on its size and distance. Make buttons and
clickable elements large and easy to access, especially on mobile.
• Jakob's Law: Users expect your interface to work like other familiar interfaces. Follow
established design conventions for navigation and interactivity.

8 User experience (UX)

• User experience (UX) is how a user interacts with and experiences a product, system or
service. It includes a person's perceptions of utility, ease of use, and efficiency.
• 'User experience' includes all the aspects of the interaction between the end-user with the
company, its services, and its products.
• It is the personal, internal experience customers go through when using a product’s
interface.
• User experience (UX) focuses on having a deep understanding of users, what they need,
what they value, their abilities, and also their limitations. It also takes into account the
business goals and objectives of the group managing the project. UX best practices promote
improving the quality of the user’s interaction with and perceptions of your product and
any related services.

9 Factors that Influence UX

• Useful: Content or functionality should solve user problems or meet their needs.
• Usable: The site must be easy to use.
• Desirable: Design elements like images, identity, and branding are used to make people
feel and connect emotionally with the product or service.
• Findable: functionality should be easy to locate, both within the product and through
external search engines.
• Accessible: Content needs to be accessible to people with disabilities.
• Credible: Users should trust the product or service and believe the information
provided.
• The combination of these six elements is what creates value for the user. The central goal
of any mobile app is to deliver an experience that maximizes user value.

10 VIMM Model
▪ Visual Load: Visual load refers to visual elements in the designs which force the user to
put more effort into visually identifying the element.
• Intellectual Load: This refers to the extraneous thinking and decision-making done by the
user due to poorly organized, inconsistent layout and functionality.
▪ Memory Load: This refers to the effort made by the user regarding the retention of the
information which gets mapped in user’s short and long-term memory when performing
any task or understanding information.
▪ Motor Load: This refers to physical movements that are too difficult or too frequent and
degrade the user experience

PROF. HARSH KANTAWALA, ASST. PROF, GCET. 4

 UI/UX Design

11 What is user research?

• Users experience research is the systematic investigation of your users to gather insights
that will inform the design process.
• User research is the process of understanding the needs, behaviors, and attitudes of users
to inform the design and development of products or services.
• It involves collecting and analyzing data about users through various methods such as
surveys, interviews, and usability testing.
• It encompasses different types of research methodology to gather both qualitative and
quantitative data in relation to your product or service.

12 Art vs Design.
Aspect Art Design
Purpose Art is made to express feelings, Design is made to solve a problem or
ideas, or thoughts. share a message.
Intent The main goal of art is self- Design is made with a goal in mind,
expression and creativity. like helping people or making things
easier to use.
Functionality Art doesn't have to be useful; Design always has a purpose—it's
it's mainly for visual impact. meant to work well and be helpful.
Audience Art is made for the artist's own Design is made with the audience in
expression, not always mind to make sure they understand or
thinking about the audience. can use it easily.
Focus Art is about emotions, beauty, Design focuses on being clear, easy to
and creativity. use, and effective.
13 Emotional behavior

Visceral:
• A visceral reaction is a user's immediate, automatic response to a design—like their first
impression or gut feeling. For example, a clean and simple user interface can instantly
make users feel that the product is easy to use.
• This reaction is triggered by the first sensory experience, like how the design looks or
feels.
• It sets the mood and influences how users perceive and explore everything else about the
product.
• Whether you call it intuition or a gut feeling, visceral design shapes how users see and
connect with a product right from the start.
Behavioral:
• This is about designing for the emotional experience during interaction.
• When designers work at this level, they consider the users’ goals, motivations and the
overall usability of the product.
• Designers aim to create seamless and enjoyable experiences that align with their users’
emotional needs and expectations.

PROF. HARSH KANTAWALA, ASST. PROF, GCET. 5

 UI/UX Design

Reflective:
• This is when users make a conscious decision after using a product. Was it easy to use?
Enjoyable? Or was it difficult for them to complete a task? This is where they decide to
either stick around or bounce.
• This is about designing how users feel after using a product or service.
• It focuses on their reflections, satisfaction, and long-term emotional connection with it.
• Designers try to create a lasting, positive impression that makes users feel attached to the
product even after they've finished using it.
14 Mental Models
•
Mental models are one of the most important concepts in human-computer interaction
(HCI).
• A mental model is a mental representation of something in the world that humans use to
predict what will happen when we interact with it.
• Mental models are built in a user’s brain and people reference them to make their lives
easier.
• Mental Models Help Us to understand concepts and make better decisions.
• Mental models improves our thinking and problem-solving skills.
• Mental Models can be form, Based on our past experiences, From our beliefs and
assumptions, Some mental models are conscious (we know them), while others are
unconscious (we use them without thinking).
• Stages of building a mental model
o Getting Familiar
o Becoming Proficient
o Mastering
15 Conceptual vs Visual Model
1. Conceptual Model (Abstract Understanding)
A conceptual model represents how something works in an abstract way. It helps users
form mental models of how to use a system, even without knowing the technical details.
Example: Online Shopping (Amazon, Flipkart, etc.)
Conceptual Model:
When users visit an online shopping platform, they already have a mental model based on
their experience with physical shopping. They expect:
• A cart to collect items before checkout.
• A search bar to find products quickly.
• A buy now or checkout process like traditional stores.
How it helps?
• Users don’t need technical knowledge to shop online.
• They already know how the process works based on real-world shopping experiences.

2. Visual Model (Graphical Representation)

A visual model represents data, processes, or systems using diagrams, charts, graphs, or
images. It helps in understanding complex relationships through visual representation.
Example: Google Maps
Visual Model:
Google Maps provides a graphical representation of locations, roads, and navigation
routes instead of just textual directions.
How it helps?
• Instead of reading step-by-step directions, users can see their path on the map.
• The visual elements (roads, landmarks, traffic color) make it easier to understand and
navigate.
• A conceptual model helps users understand how something works.
• A visual model helps users see and interpret information clearly.
• Both works together in UI/UX to create an intuitive user experience.

PROF. HARSH KANTAWALA, ASST. PROF, GCET. 6

 UI/UX Design

Conceptual Model Visual Model

A broad representation of how a system A detailed graphical representation of data,
or concept works. processes, or concepts.
Explains how something works in theory. Displays data, processes, or systems visually.

Flowcharts, diagrams, narratives, system Graphs, charts, maps, infographics,

models. animations.
Users understand how online shopping Google Maps visually represents routes, traffic,
works (cart, checkout, search). and locations.

General and high-level. More specific and detailed.

HCI, science, engineering, design, Education, business, research, data analysis.
decision-making.
Explaining broad ideas and connections. Presenting data clearly and making it visually
appealing.
More abstract, requires explanation. Easier to understand quickly due to visual
elements.

16 Differentiate Flat vs Skeuomorphism vs Realism

Flat Design Skeuomorphism Realism

Minimalistic design Design mimics real-world Highly detailed and lifelike

focusing on 2D elements. objects with textures. representation.

Simplified, clean, and Detailed, using shadows, Hyper-detailed with depth,

geometric. gradients, and textures. lighting, and shading.

Bright, bold, and often Subtle and natural tones. Real-world inspired colors.
monochromatic.

No or minimal shadows. Realistic shadows and Accurate depth and realistic

gradients. light effects.

Prioritizes functionality Familiarity by mimicking Immersive and visually

and clarity. real-world objects. engaging experience.

Modern UI/UX (Google Early iOS apps (Calendar, Photorealistic illustrations,

Material Design). Notes). video games.

17 Key Aspects of Presentation.

• Content (Clear & Concise Information)
• Interactions (Smooth & Engaging Experiences)
• Screen Elements (Intuitive Layout & Design)
• Accessibility (Inclusive Design for Everyone)
• Global Standards (Consistency & Scalability)

PROF. HARSH KANTAWALA, ASST. PROF, GCET. 7