Ui-Ux Design - Module 1 - Chapter-1
Uploaded by
suneetha prabhuUi-Ux Design - Module 1 - Chapter-1
Uploaded by
suneetha prabhuVidyavardhaka College of Engineering, Mysuru
Autonomous Institute, Affiliated to VTU
Accredited by NBA | NAAC with ‘A’ Grade
MODULE 1
THE IMPORTANCE OF USER
INTERFACE
Shashank N
7 SEM
th
Assistant Professor
CSE - C
Dept. of CSE
Our Vision: “VVCE shall be a leading Institution in engineering and management education enabling individuals for significant contribution to the society”
08/09/2025 1
CONTENTS
• Overview
• The importance of user interface
• Defining the user interface
• The importance of Good design
• Introduction to Graphical user interface.
THE IMPORTANCE OF USER INTERFACE
• With the great improvement in the technology in the late twentieth
century eliminated a host of barriers to good interface design
wrapped into a package called the graphical user interface, or, as it is
commonly called, GUI or “gooey”
• Web site design has greatly expanded the range of users and
introduced additional interface techniques such as multimedia
Importance of User Interface (UI) -
Some Real-World Examples
Google Search vs. Early Web Search Engines
• Google’s clean and minimal interface made it easy to use.
• Older engines like Yahoo were cluttered.
• Lesson: Simplicity and clarity drive adoption.
ATM Machines
• Clear instructions and big buttons improve usability.
• Poor UI can lead to mistakes (wrong amount withdrawn).
• Lesson: Consistency and error prevention are key.
E-Commerce Apps (Amazon, Flipkart)
• Easy product browsing, filters, and checkout improve sales.
• Confusing layouts cause cart abandonment.
• Lesson: Good UI directly impacts revenue.
Mobile OS (iOS vs. Early Android)
• iOS gained popularity for its intuitive design.
• Early Android versions were more complex iOS
to learn.
• Lesson: Ease of learning and user satisfaction matter.
Healthcare Devices
• Doctors rely on UIs to quickly read vital signs.
• Cluttered UI can delay critical decisions.
• Lesson: UI can impact safety and outcomes.
Navigation Apps (Google Maps, Waze)
• Step-by-step directions and clean layout aid drivers.
• Cluttered or unclear UI may cause confusion.
• Lesson: Context-aware UI is crucial for real-time use.
Food Delivery Apps (Swiggy, Zomato)
• Simple UI for browsing and tracking orders keeps users.
• Confusing menus frustrate customers.
• Lesson: UI directly influences loyalty.
DEFINING THE USER INTERFACE
• User interface design is a subset of a field of study called human-
computer interaction (HCI)
• Human-computer interaction is the study, planning, and design of
how people and computers work together so that a person’s needs
are satisfied in the most effective way
• HCI designers must consider a variety of factors:
what people want and expect
what physical limitations and abilities people possess
how their perceptual and information processing systems work
what people find enjoyable and attractive
Technical characteristics and limitations of the computer hardware and
software
• The user interface is the part of a computer and its software that people can
see, hear, touch, talk to, or otherwise understand or direct
• The user interface has essentially two components: input and output
• Input is how a person communicates his or her needs or desires to the
computer
• Output is how the computer conveys the results of its computations and
requirements to the user
• Today, the most common computer output mechanism is the display screen
• The use of the human senses of smell and touch output in interface design
remain largely unexplored
• Proper interface design will provide a mix of well-designed input and output
mechanisms that satisfy the user’s needs
THE IMPORTANCE OF GOOD DESIGN
• With today’s technology and tools, and our motivation to create
effective and usable interfaces and screens. But still
1. We don’t care?
2. We don’t possess common sense?
3. We don’t have the time?
4. We still don’t know what really makes good design produce systems
that are inefficient and confusing
• A well-designed interface and screen is terribly important to our users. It is
their window to view the capabilities of the system
• It is also the vehicle through which many critical tasks are presented
• Direct impact on an organization’s relations with its customers, and its
profitability
• If screen’s layout and appearance are confusing and inefficient, people will
have greater difficulty in doing their jobs and will make more mistakes
• It can also lead to aggravation, frustration, and increased stress
THE BENEFITS OF GOOD DESIGN
• Increase customer acquisition and loyalty
• Maximize revenue generation opportunities
• Optimize resources, development time and costs
• Get more insights from user engagement
• Reduce troubleshooting and associated costs
A BRIEF HISTORY OF THE HUMAN-
COMPUTER INTERFACE
• Communication among people has existed since first walked upon this
planet
• The lowest and most common level of communication modes are
movements and gestures
• The next higher level, is spoken language which is a very efficient mode
of communication if both parties to the communication understand it
• The third and highest level of complexity is written language
• Human computer interaction (HCI) is a multidisciplinary field of study
focusing on the design of computer technology and, in the interaction
between humans (the users) and computers
• The human-computer consists of one or more combination of styles
using keyboards, commonly referred to as
Command Language
Question and Answer
Menu Selection
Function Key Selection
Form Fill-In
INTRODUCTION TO GRAPHICAL USER
INTERFACES
• The Xerox systems, Altus and STAR, introduced the mouse and
pointing and selecting as the primary human-computer
communication method
• The user simply pointed at the screen, using the mouse as an
intermediary
• These systems also introduced the graphical user interface as we
know it a new concept was born, revolutionizing the human-
computer interface
• A GUI uses a combination of technologies and devices to provide a
platform that users can interact with, for the tasks of gathering and
producing information
• The most common combination of such elements in GUIs is the
windows, icons, menus, pointer ( paradigm, especially in personal
computers
• This makes it easier for people with few computer skills to work with
and use computer software
THE BLOSSOMING OF THE WORLD WIDE
WEB
A BRIEF HISTORY OF SCREEN DESIGN
• While developers have been designing screens since a cathode ray
tube display was first attached to a computer, more widespread
interest in the application of good design principles to screens did not
begin to emerge until the early 1970s
• Typically, however, design at this time period had little to guide it,
being driven by hardware and telephone line transmission issues.
• It usually consisted of many fields (more than are illustrated here)
with very cryptic and often unintelligible captions.
• Most early screens were monochromatic, typically presenting green
text on black backgrounds.
• User memory was supported by providing clear and meaningful field
captions and by listing commands on the screen and enabling them to
be applied through function keys
• Messages also became clearer
• The advent of graphics yielded another milestone in the evolution of
screen design
