IFET COLLEGE OF ENGINEERING

(An Autonomous Institution)

DEPARTMENT OF CSE & IT
CSH007 & UI and UX DESIGNS
YEAR/SEM : III/V
UNIT II– USER INTERFACE DESIGN PROCESS
MODULE
Formal Elements of Interface Design, Obstacles, Usability, Human characteristics in Design,
Human Interaction speeds, Business functions-Business definition and requirement analysis,
Basic business functions, Design standards - Active Elements of Interface Design, Composing the
Elements of Interface Design.
2.1 FORMAL ELEMENTS OF INTERFACE DESIGN
The formal elements of interface design in UI refer to the visual and structural components that
contribute to the overall aesthetics, organization, and usability of a user interface. Designing a
user interface (UI) is an art and science requiring a deep understanding of form and function. The
formal elements of interface design are the building blocks that designers use to create interfaces
that are both aesthetically pleasing and easy to use. From the arrangement of elements on a screen
or page to the selection of color, typography, and icons, these elements form the foundation of a
well-designed UI.
2.1.1 Layout
Layout refers to the arrangement and positioning of elements on the screen. Create a well-
structured and balanced layout that supports intuitive navigation and information hierarchy. Use
grids, alignment, and whitespace to establish visual order and improve readability as shown in the
fig 2.1. The layout element of interface design refers to how elements are arranged on a screen or
page. It entails using space, alignment, and grouping to create a visually appealing and functional
structure. A well-designed layout should make it simple for users to understand the relationship
between elements and efficiently find the required information.

Fig: 2.1 Different Layouts in interface design

Another critical aspect of the layout is alignment. Proper alignment makes it easier for users to
understand the relationships between elements. For example, aligning text to the left or right or
buttons to a grid can create a consistent look and feel. Grouping elements also aid in the creation
of a more organized and structured layout. By grouping the interface more coherent and cohesive,
designers can make it easier for users to understand the relationships between elements.
2.1.2 Typography
Typography involves selecting and styling fonts for the interface. Choose fonts that align with the
brand and enhance readability. Use font sizes, weights, and styles consistently to create hierarchy
and guide users' attention to important information. The different parts that make up a letterform,
1
the fundamental unit of typography, are referred to as the anatomy of typography as shown in the
fig 2.2 Designers should be familiar with the anatomy of typography because it helps them select
typefaces that blend well and produce beautiful designs. The essential components of a letterform
are as follows:

Fig: 2.2 Anatomy of Typography

 Baseline: The line that defines where the letters in a line of text rest. It's an imaginary line
that runs along the bottom of the letters and helps to create a consistent and organized
layout.
 X-height: This is the height of the lowercase letters in a typeface. It's measured from the
baseline to the top of the main body of the letter and doesn't include any ascenders (like
the top of a lowercase "h") or descenders (like the tail of a lowercase "g").
 Ascender: The portion of the letter that reaches upward, such as the vertical stem of a
lowercase "d" or the loop of a lowercase "h."
 Descender: It's the portion of the letter that hangs down, such as the tail of a lowercase
"y" or the descender of a lowercase "g."
 Stem: This is the primary vertical stroke of a letter, such as the one in the letter "h."
 Bowl: The curved part of a letter, such as the rounded part of the letter "d."
 Counter: This is enclosed or partially enclosed space within a letter, such as the space
inside the letter "o."
 Terminal: This is the start or end of a stroke, such as the top of the letter "a."
 Spine: This is the curved part of a letterform opposite the stem.
We may select typefaces that work well together and produce designs that have a pleasing visual
aesthetic by being familiar with the anatomy of typography. We can also utilize this information
to modify certain letterforms, such as changing the distance between letters or slightly altering a
letter's shape.
2.1.3 Color
The color element of the UI design is the use of color to provide visual interest, convey meaning,
and give contrast in a user interface. A color is a vital tool that can be utilized to convey
information to the user and to evoke a certain mood or feeling. The following factors should be
taken into account when designing an interface with color:
 Color theory
 Accessibility
 Context
 Aesthetic
2
Color theory
Understanding color theory, which includes hue, saturation, and brightness principles, is crucial
to creating harmonious color schemes. The color theory also helps us to choose colors that work
well together and communicate the desired message.

Fig: 2.3 Color Wheel

A typical color wheel is made up of 12 colors that are arranged in a circular pattern. The three
primary colors—red, blue, and yellow—are spaced equally on the wheel. Orange, green, and
violet are secondary colors created by combining equal amounts of two primary colors. Tertiary
colors are created by combining a primary color with a secondary color adjacent to it on the color
wheel. Using the color wheel and these concepts, we can create harmonious color schemes that
are visually appealing and effectively convey meaning. Complementary colors, for example,
those directly across from each other on the color wheel, such as red and green, create a strong
contrast and can draw attention to essential elements. Colors analogous to each other on the color
wheel, such as red, orange, and yellow, have a more harmonious and soothing effect.
Accessibility
Color choices should also take into account accessibility considerations, such as making sure
there is enough contrast between text and background colors so that users with visual
impairments can read the content.
Context
The use of color can convey meaning and context in a user interface. For example, red might be
used to indicate errors or warnings, while green might be used to indicate success.
Aesthetic
Finally, the use of color in interface design should be aesthetically pleasing and contribute to the
overall look and feel of the interface. Designers should consider color psychology, cultural
associations, and personal preferences when choosing colors.
2.1.4 Iconography
The use of visual symbols or icons to represent various functions, features, or content within a
user interface is referred to as iconography. Icons are frequently used to convey complex
concepts or actions clearly and recognizably. It is an essential aspect of interface design because
it contributes to a more intuitive and easy-to-navigate user interface. Icons, when used correctly,
can reduce cognitive load on users by providing a quick and easy way for them to understand and
interact with the interface.
3
 Fig: 2.4 Icons
2.1.5 Buttons and controls
The visual elements that allow users to interact with the interface, such as buttons, sliders,
checkboxes, and dropdown menus, are used in the buttons and controls element of interface
design. These elements are critical for allowing users to perform actions or make choices within
the interface. Buttons are one of the most common types of interface controls. They can be used
to start actions like submitting a form, going to a new page, or starting an animation. Buttons can
be designed in various styles, sizes, and colors to convey varying importance and help direct the
user's attention to critical actions.
 Checkboxes and radio buttons are other standard controls used in interface design.
Checkboxes allow users to select one or more options from a list, while radio buttons
allow users to select a single option from a list. These controls are often used in forms and
surveys to gather user input.
 Sliders are a type of control used to adjust a value within a specific range. They can be
used for settings such as volume or brightness and for selecting a range of values such as a
date or price range.
 Dropdown menus are a type of control that displays a list of options when the user clicks
or hovers over the control. They can provide a compact and organized way for users to
select from many options.
When designing buttons and controls for an interface, it is essential to consider factors such as
size, placement, and visual style. Buttons and controls should be easy to find and interact with,
and their design should be consistent throughout the interface to provide an intuitive experience
for users.
2.1.6 Images and graphics
The interface design's images and graphics element involves using visual content such as
photographs, illustrations, icons, and other graphic elements to enhance the user experience and
communicate information. These visual elements create an emotional connection with the user,
convey complex information quickly, and add visual interest to the interface.
Images and graphics can be used in various ways within an interface design, including:
 Illustrating concepts: Images can illustrate concepts and ideas visually and intuitively.
For example, an image of a calendar can be used to represent a date selection feature.
 Enhancing brand identity: Images can be used to improve the brand identity of a
product or service by using consistent visual elements such as colors, styles, or
iconography.
 Communicating data: Graphics can be used to display data in a visual way that is easy to
understand, such as charts or infographics.
 Creating visual interest: Images and graphics can add visual interest to the interface and
create a more engaging user experience. For example, using high-quality product images
4
 on an e-commerce site can help to create a more immersive shopping experience for the
user.
2.1.7 Wrap up
To summarize, interface design is a complex process involving multiple elements collaborating to
create a seamless and practical user experience. Layout, typography, color, iconography, buttons
and controls, and images and graphics are crucial in directing the user's attention, providing a
clear and intuitive structure, and effectively communicating information. We can create
functional, user-friendly, visually appealing, and engaging interfaces by understanding the
fundamental principles of each element and how they work together. Finally, a well-designed
interface can improve user satisfaction, increase engagement, and contribute to the product or
service's success.
2.2 OBSTACLES, USABILITY, HUMAN CHARACTERISTICS IN DESIGN
2.2.1Obstacles and Pitfalls in the Development Path
 Gould (1988) has made these general observations about design:
 Nobody ever gets it right the first time.
 Development is chock-full of surprises.
 Good design requires living in a sea of changes.
 Making contracts to ignore change will never eliminate the need for change.
 Even if you have made the best system humanly possible, people will still make
mistakes when using it.
 Designers need good tools.
 You must have behavioral design goals like performance design goals.
 The first five conditions listed will occur naturally because people are people, both as
users and as developers. These kinds of behavior must be understood and accepted in
design. User mistakes, while they will always occur, can be reduced.
 Pitfalls in the design process exist because of a flawed design process, including a failure
to address critical design issues, an improper focus of attention, or development team
organization failures. Common pitfalls are:
 No early analysis and understanding of the user’s needs and expectations.
 A focus on using design features or components that are ―neat‖ or ―glitzy.‖
 Little or no creation of design element prototypes.
 No usability testing.
 No common design team vision of user interface design goals.
 Poor communication between members of the development team.
2.2.2 Designing for People: The Five Commandments
The complexity of a graphical or Web interface will always magnify any problems that do occur.
Pitfalls can be eliminated if the following design commandments remain foremost in the
designer’s mind.
 Gain a complete understanding of users and their tasks: The users are the customers.
Today, people expect a level of design sophistication from all interfaces, including Web
sites. The product, system or Web site must be geared to people’s needs, not those of the
developers.
 Solicit early and ongoing user involvement: Involving the users in design from the
beginning provides a direct conduit to the knowledge they possess about jobs, tasks, and
needs. Involvement also allows the developer to confront a person’s resistance to change,
a common human trait. People dislike change for a variety of reasons, among them fear of
the unknown and lack of identification with the system.

5
  Perform rapid prototyping and testing: Prototyping and testing the product will quickly
identify problems and allow you to develop solutions. Prototyping and testing must be
continually performed during all stages of development to uncover all potential defects. If
thorough testing is not performed before product release, the testing will occur in the
user’s office. Encountering a series of problems early in system use will create a negative
first impression in the customer’s mind, and this may harden quickly, creating attitudes
that may be difficult to change. It is also much harder and more costly to fix a product
after its release.
 Modify and iterate the design as much as necessary: While design will proceed
through a series of stages, problems detected in one stage may force the developer to
revisit a previous stage.. Establish user performance and acceptance criteria and continue
testing and modifying until all design goals are met.
 Integrate the design of all the system components: The software, the documentation,
the help function, and training needs are all important elements of a graphical system or
Web site and all should be developed concurrently. Time will also exist for design trade-
offs to be thought out more carefully
2.2.3 Usability
The term usability used to describe the effectiveness of human performance. The term usability
is defined as ―the capability to be used by humans easily and effectively, where, easily =
to a specified level of subjective assessment, effectively = to a specified level of human
performance.‖
Common Usability Problems
 Mandel (1994) lists the 10 most common usability problems in graphical systems as
reported by IBM usability specialists. They are:
 Ambiguous menus and icons.
 Languages that permit only single-direction movement through a system.
 Input and direct manipulation limits.
 Highlighting and selection limitations.
 Unclear step sequences.
 More steps to manage the interface than to perform tasks.
 Complex linkage between and within applications.
 Inadequate feedback and confirmation.
 Lack of system anticipation and intelligence.
 Inadequate error messages, help, tutorials, and documentation.
Some Practical Measures of Usability
 Are people asking a lot of questions or often reaching for a manual?
 Are frequent exasperation responses heard?
 Are there many irrelevant actions being performed?
 Are there many things to ignore?
 Do a number of people want to use the product?
Some Objective Measures of Usability
 Shackel (1991) presents the following more objective criteria for measuring usability.
 How effective is the interface? Can the required range of tasks be accomplished:
 At better than some required level of performance (for example, in terms of speed
and errors)?
 By some required percentage of the specified target range of users?
 Within some required proportion of the range of usage environments?
 How learnable is the interface? Can the interface be learned:
6
  Within some specified time from commissioning and start of user training?
 Based on some specified amount of training and user support?
 Within some specified relearning time each time for intermittent users?
 How flexible is the interface? Is it flexible enough to:
 Allow some specified percentage variation in tasks and/or environments beyond
those first specified?
 What are the attitudes of the users? Are they: Within acceptable levels of human
cost in terms of tiredness, discomfort, frustration, and personal effort?
 Such that satisfaction causes continued and enhanced usage of the system?
The Design Team
Provide a balanced design team, including specialists in:
 Development
 Human factors
 Visual design
 Usability assessment
 Documentation
 Training
Know your user or client
To create a truly usable system, the designer must always do the following:
 Understand how people interact with computers.
 Understand the human characteristics important in design.
 Identify the user’s level of knowledge and experience.
 Identify the characteristics of the user’s needs, tasks, and jobs.
 Identify the user’s psychological characteristics.
 Identify the user’s physical characteristics.
 Employ recommended methods for gaining understanding of users.
Why People Have Trouble with Computers
What makes a system difficult to use in the eyes of its user? Listed below are several contributing
factors that apply to traditional business systems.
 Use of jargon.
 Non-obvious design.
 Non-obvious design.
 Disparity in problem-solving strategies.
 Design inconsistency.
Responses to Poor Design
 Errors are a symptom of problems. The magnitude of errors in a computer- based system
has been found to be as high as 46 percent for commands, tasks, or transactions. Errors,
and other problems that befuddle one, lead to a variety of psychological and physical user
responses.
 Psychological user responses are Confusion, Annoyance, Frustration, Panic or stress,
Boredom.
 Physical user responses are Abandonment of the system, Partial use of the system,
Indirect use of the system, Modification of the task, Compensatory activity, Misuse of the
system, Direct programming.

7
2.2.4 Important Human Characteristics In Design
1. Perception
Perception is our awareness and understanding of the elements and objects of our environment
through the physical sensation of our various senses, including sight, sound, smell, and so forth.
Perception is influenced, in part, by experience. Other perceptual characteristics include the
following:
 Proximity. Our eyes and mind see objects as belonging together if they are near each
other in space.
 Similarity. Our eyes and mind see objects as belonging together if they share a common
visual property, such as color, size, shape, brightness, or orientation.
 Matching patterns. We respond similarly to the same shape in different sizes. The letters
of the alphabet, for example, possess the same meaning, regardless of physical size.
 Succinctness. We see an object as having some perfect or simple shape because
perfection or simplicity is easier to remember.
 Closure. Our perception is synthetic; it establishes meaningful wholes. If something does
not quite close itself, such as a circle, square, triangle, or word, we see it as closed
anyway.
 Unity. Objects that form closed shapes are perceived as a group.
 Continuity. Shortened lines may be automatically extended.
 Balance. We desire stabilization or equilibrium in our viewing environment. Vertical,
horizontal, and right angles are the most visually satisfying and easiest to look at.
 Expectancies. Perception is also influenced by expectancies; sometimes we perceive not
what is there but what we expect to be there. Missing a spelling mistake in proofreading
something we write is often an example of a perceptual expectancy error; we see not how
a word is spelled, but how we expect to see it spelled.
 Context. Context, environment, and surroundings also influence individual perception.
For example, two drawn lines of the same length may look the same length or different
lengths, depending on the angle of adjacent lines or what other people have said about the
size of the lines.
 Signals versus noise. Our sensing mechanisms are bombarded by many stimuli, some of
which are important and some of which are not. Important stimuli are called signals; those
that are not important or unwanted are called noise.
2. Memory
Memory is viewed as consisting of two components, long-term and short-term (or working)
memory.
 Short-term, or working, memory receives information from either the senses or long-term
memory, but usually cannot receive both at once, the senses being processed separately.
Within short-term memory a limited amount of information processing takes place.
Information stored within it is variously thought to last from 10 to 30 seconds, with the
lower number being the most reasonable speculation. Knowledge, experience, and
familiarity govern the size and complexity of the information that can be remembered.
 Long-term memory contains the knowledge we possess. Information received in short-
term memory is transferred to it and encoded within it, a process we call learning. It is a
complex process requiring some effort on our part. The learning process is improved if the
information being transferred from short-term memory has structure and is meaningful
and familiar. Learning is also improved through repetition. Unlike short-term memory,
with its distinct limitations, long-term memory capacity is thought to be unlimited. An

8
 important memory consideration, with significant implications for interface design, is the
difference in ability to recognize or recall words.
3. Sensory Storage
Sensory storage is the buffer where the automatic processing of information collected from our
senses takes place. It is an unconscious process, large, attentive to the environment, quick to
detect changes, and constantly being replaced by newly gathered stimuli. In a sense, it acts like
radar, constantly scanning the environment for things that are important to pass on to higher
memory.
 Repeated and excessive stimulation can fatigue the sensory storage mechanism, making it
less attentive and unable to distinguish what is important (called habituation). Avoid
unnecessarily stressing it.
 Design the interface so that all aspects and elements serve a definite purpose. Eliminating
interface noise will ensure that important things will be less likely to be missed.
4. Visual Acuity
 The capacity of the eye to resolve details is called visual acuity. It is the phenomenon that
results in an object becoming more distinct as we turn our eyes toward it and rapidly
losing distinctness as we turn our eyes away—that is, as the visual angle from the point of
fixation increases.
 It has been shown that relative visual acuity is approximately halved at a distance of 2.5
degrees from the point of eye fixation
 The eye’s sensitivity increases for those characters closest to the fixation point (the ―0‖)
and decreases for those characters at the extreme edges of the circle (a 50/50 chance exists
for getting these characters correctly identified). This may be presumed to be a visual
―chunk‖ of a screen
5. Foveal and Peripheral Vision
 Foveal vision is used to focus directly on something; peripheral vision senses anything in
the area surrounding the location we are looking at, but what is there cannot be clearly
resolved because of the limitations in visual acuity just described.
 Foveal and peripheral vision maintain, at the same time, a cooperative and a competitive
relationship. Peripheral vision can aid a visual search, but can also be distracting.
 In its cooperative nature, peripheral vision is thought to provide clues to where the eye
should go next in the visual search of a screen.
 In its competitive nature, peripheral vision can compete with foveal vision for attention.
What is sensed in the periphery is passed on to our information- processing system along
with what is actively being viewed foveally.
6. Information Processing
 The information that our senses collect that is deemed important enough to do something
about then has to be processed in some meaningful way.
 There are two levels of information processing going on within us. One level, the highest
level, is identified with consciousness and working memory. It is limited, slow, and
sequential, and is used for reading and understanding.
 In addition to this higher level, there exists a lower level of information processing, and
the limit of its capacity is unknown. This lower level processes familiar information
rapidly, in parallel with the higher level, and without conscious effort.
 Both levels function simultaneously, the higher level performing reasoning and problem
solving, the lower level perceiving the physical form of information sensed.

9
7. Mental Models
 A mental model is simply an internal representation of a person’s current understanding of
something. Usually a person cannot describe this mental mode and most often is unaware
it even exists.
 Mental models are gradually developed in order to understand something, explain things,
make decisions, do something, or interact with another person. Mental models also enable
a person to predict the actions necessary to do things if the action has been forgotten or
has not yet been encountered.
 A person already familiar with one computer system will bring to another system a mental
model containing specific visual and usage expectations. If the new system complies with
already-established models, it will be much easier to learn and use.
 The key to forming a transferable mental model of a system is design consistency and
design standards.
8. Movement Control
 Particularly important in screen design is Fitts’ Law (1954). This law states that:
 The time to acquire a target is a function of the distance to and size of the target.
 This simply means that the bigger the target is, or the closer the target is, the faster it will
be reached. The implications in screen design are:
 Provide large objects for important functions.
 Take advantage of the ―pinning‖ actions of the sides, top, bottom, and corners of the
screen.
9. Learning
 Learning, as has been said, is the process of encoding in long-term memory information.
 A design developed to minimize human learning time can greatly accelerate human
performance. People prefer to stick with what they know, and they prefer to jump in and
get started that is contained in short-term memory.
 Learning can be enhanced if it:
 Allows skills acquired in one situation to be used in another somewhat like it.
Design consistency accomplishes this.
 Provides complete and prompt feedback.
 Is phased, that is, it requires a person to know only the information needed at that
stage of the learning process.
10. Skill
 The goal of human performance is to perform skillfully. To do so requires linking inputs
and responses into a sequence of action. The essence of skill is performance of actions or
movements in the correct time sequence with adequate precision.
 Skills are hierarchical in nature, and many basic skills may be integrated to form
increasingly complex ones. Lower-order skills tend to become routine and may drop out
of consciousness.
11. Individual Differences
 In reality, there is no average user. A complicating but very advantageous human
characteristic is that we all differ—in looks, feelings, motor abilities, intellectual abilities,
learning abilities and speed, and so on.
 Individual differences complicate design because the design must permit people with
widely varying characteristics to satisfactorily and comfortably learn the task or job, or
use the Web site.
 Multiple versions of a system can easily be created. Design must provide for the needs of
all potential users.
10
2.3 HUMAN INTERACTION SPEEDS
2.3.1 Human Considerations in Design
KNOWLEDGE EXPERIENCE
Computer Literacy Highly technical or experienced, moderate computer
experience, or none.
System Experience High, moderate, or low knowledge of a particular system
and its methods of interaction.
Application Experience High, moderate, or low knowledge of similar systems.
Task Experience Level of knowledge of job and job tasks.
Other Systems job Use Frequent or infrequent use of other systems in doing
Education High school, college, or advanced degree.
Reading Level Less than 5th grade, 5th–12th, more than 12th grade
Typing Skill Expert (135 WPM), skilled (90 WPM), good (55 WPM),
Average (40 WPM), or "hunt and peck" (10 WPM). Native
Language or Culture English, another, or several.
JOB/TASK/NEED
Type of System Use Mandatory or discretionary use of the system
Frequency of Use Continual, frequent, occasional, or once-in-a-lifetime use
of system.
Task or Need Importance High, moderate, or low importance of the task
beingperformed.
Task Structure Repetitiveness or predictability of tasks being automated,
high, moderate, or low.
Social Interactions Verbal communication with another person required
or notrequired.
Primary Training Extensive or formal training, self-training through
manuals, or no training
Turnover Rate High, moderate, or low turnover rate for jobholders.
Job Category Executive, manager, professional, secretary, clerk
Lifestyle For Web e-commerce systems, includes hobbies,
recreational pursuits, and economic status.
PSYCHOLOGICAL CHARACTERISTICS
Attitude Positive, neutral, or negative feeling toward job or system
Motivation Low, moderate, or high due to interest or fear.
Patience Patience or impatience expected in accomplishing goal.
Expectations Kinds and reasonableness.
Stress Level High, some, or no stress generally resulting
from taskperformance.
Cognitive Style Verbal or spatial, analytic or intuitive, concrete or abstract.
PHYSICAL CHARACTERISTICS
Age Young, middle aged, or elderly
Gender Male or female.
Handedness Left, right, or ambidextrous.
Disabilities Blind, defective vision, deafness, motor handicap


11
Human Interaction Speeds
 The speed at which people can perform using various communication methods
has been studied by a number of researchers. The following, are summarized as
table below
Reading
Prose text: 250–300 words per minute.
Proofreading text on paper: 200 words per minute.
Proofreading text on a monitor: 180 words per minute.
Listening: 150–160 words per minute.
Speaking to a computer: 105 words per minute.
After recognition corrections: 25 words per minute.
Keying
Typewriter
Fast typist: 150 words per minute and higher.
Average typist: 60–70 words per minute.
Computer
Transcription: 33 words per minute.
Composition: 19 words per minute.
Two finger typists
Memorized text: 37 words per minute.
Copying text: 27 words per minute.
Hand printing
Memorized text: 31 words per minute.
Copying text: 22 words per minute.
Methods for Gaining an Understanding of Users
 Gould (1988) suggests using the following kinds of techniques to gain an
understanding of users, their tasks and needs, the organization where they work,
and the environment where the system may be used.
 Visit user locations, particularly if they are unfamiliar to you, to gain an
understanding of the user’s work environment.
 Talk with users about their problems, difficulties, wishes, and what works
well now. Establish direct contact; avoid relying on intermediaries.
 Observe users working or performing a task to see what they do, their
difficulties, and their problems.
 Videotape users working or performing a task to illustrate and study
problems and difficulties.
 Learn about the work organization where the system may be installed.
 Have users think aloud as they do something to uncover details that may
not otherwise be solicited.
 Try the job yourself. It may expose difficulties that are not known, or
expressed, by users.
 Prepare surveys and questionnaires to obtain a larger sample of user
opinions.
 Establish testable behavioral target goals to give management a measure
for what progress has been made and what is still required.

12
IFETCE R-2019A ACADEMIC YEAR: 2023-2024

2.4 BUSINESS FUNCTIONS

User Interface (UI) in the context of business refers to the visual and interactive elements of a
software application or website that allow users to interact with the system. UI plays a crucial
role in enhancing the user experience and improving the efficiency of various business functions.
Here are some common business functions that are typically supported by UI:
 User Registration: The UI provides a user-friendly form or wizard to allow users to
create an account by entering their personal information, such as name, email, and
password. It may also include additional features like email verification or social media
integration for a smoother registration process.
 Login and Authentication: Once registered, users can log in to the application using
their credentials. The UI presents a login screen with input fields for username/email and
password. It may also support features like multi-factor authentication or password reset
options to enhance security.
 Dashboard and Analytics: UI often includes a dashboard that provides users with an
overview of relevant business data and analytics. This can include charts, graphs, and
summary information to help users monitor key performance indicators (KPIs) and make
informed decisions.
 Data Entry and Forms: UI facilitates data entry through various types of forms.
Businesses may require users to fill out forms for purposes such as placing orders,
submitting inquiries, updating personal information, or providing feedback. UI elements
like input fields, dropdowns, checkboxes, and validation mechanisms make the form
filling process intuitive and error-free.
 Search and Filtering: UI incorporates search functionalities, allowing users to find
specific information or products quickly. Additionally, filtering options enable users to
refine search results based on specific criteria, such as price, date, category, or location.
 Product Catalog and E-commerce: For businesses involved in online sales, the UI
often includes a product catalog where users can browse and search for products. This
involves presenting product images, descriptions, pricing, and availability. The UI may
also incorporate shopping cart functionality, checkout processes, and payment integration
to facilitate e-commerce transactions.
 Communication and Messaging: UI may provide features for communication and
messaging, such as chat interfaces, contact forms, or email integration. This allows users
to reach out to customer support, collaborate with colleagues, or interact with other users
within the application.
 Notifications and Alerts: UI can display notifications or alerts to keep users informed
about important updates, such as new messages, system status, or changes to their
account. This helps to improve user engagement and ensure timely actions.
 Reporting and Exporting: UI may offer options for generating reports or exporting data
in various formats (e.g., PDF, CSV, Excel). This enables users to extract and analyze data
for further processing or sharing with others.
 Settings and Personalization: UI often includes settings or preferences sections where
users can customize their experience. This may include options to modify account details,
privacy settings, notification preferences, language preferences, or theme customization.

13
IFETCE R-2019A ACADEMIC YEAR: 2023-2024

 Search and Navigation: UIs offer search functionalities and navigation menus to help
users find and access relevant information quickly. This can include searching for
products, documents, customer records, or specific data within a system.
 Reporting and Analytics: Business UIs often include features for generating reports and
visualizing data through charts, graphs, and dashboards. Users can interact with these
elements to analyze business performance, track key metrics, and make informed
decisions.
 Workflow Management: UIs enable the management and tracking of business processes
and workflows. Users can initiate, monitor, and manage tasks, approvals, and
notifications within a structured workflow environment.
 Collaboration and Communication: UIs facilitate communication and collaboration
among team members or external stakeholders. This can include features like messaging,
file sharing, commenting, and real-time collaboration on documents or projects.
 Customer Relationship Management (CRM): UIs in CRM systems provide
functionalities for managing customer interactions, tracking leads, managing sales
pipelines, and providing customer support. Users can access customer profiles, update
contact information, and manage sales activities.
 Inventory Management: UIs in inventory management systems support functions such
as tracking stock levels, managing purchase orders, monitoring product movements, and
generating reports on inventory status.
 Order Processing: UIs are used to handle the end-to-end order processing workflow,
including order placement, order tracking, invoicing, and fulfillment management. Users
can input and process orders, manage shipping details, and handle customer inquiries
related to orders.
 Financial Management: UIs in financial systems provide functionalities for managing
budgets, expenses, invoices, and financial transactions. Users can enter financial data,
generate invoices, track payments, and perform financial analysis.
 Human Resources (HR) Management: UIs in HR systems support functions like
employee onboarding, payroll management, leave tracking, performance evaluations, and
employee self-service. Users can access and update employee information, manage HR
processes, and perform administrative tasks.
These are just a few examples of how UI supports different business functions. The specific
features and functionalities will vary depending on the nature of the business and the software
application or website being used.

2.5 BUSINESS DEFINITION AND REQUIREMENT ANALYSIS

 The objective of this phase is to establish the need for a system. A requirement is an
objective that must be met.
 A product description is developed and refined, based on input from users or marketing.
There are many techniques for capturing information for determining requirements.
2.5.1 Direct Methods
Advantages
 The significant advantage of the direct methods is the opportunity they provide to hear
the user’s comments in person and firsthand.
 Person-to-person encounters permit multiple channels of communication (body language,
voice inflections, and so on) and provide the opportunity to immediately follow up on

14
IFETCE R-2019A ACADEMIC YEAR: 2023-2024

vague or incomplete data. Here are some recommended direct methods for getting input
from users
Individual Face-to-Face Interview
 A one-on-one visit with the user to obtain information. It may be structured or somewhat
open-ended.
 A formal questionnaire should not be used, however. Useful topics to ask the user to
describe in an interview include:
 The activities performed in completing a task or achieving a goal or objective.
 The methods used to perform an activity.
 What interactions exist with other people or systems?
 It is also very useful to also uncover any:
 Potential measures of system usability
 Unmentioned exceptions to standard policies or procedures.
 Relevant knowledge the user must possess to perform the activity.
 Advantages
 Advantages of a personal interview are that you can give the user your full
attention, can easily include follow-up questions to gain additional information,
will have more time to discuss topics in detail, and will derive a deeper
understanding of your users, their experiences, attitudes, beliefs, and desires.
 Disadvantages
 Disadvantages of interviews are that they can be costly and time- consuming to
conduct, and someone skilled in interviewing techniques should perform them.
Telephone Interview or Survey
 A structured interview conducted via telephone.
 Advantages
 Arranging the interview in advance allows the user to prepare for it.
 Telephone interviews are less expensive and less invasive than personal
interviews.
 They can be used much more frequently and are extremely effective for very
specific information.
 Disadvantage
 It is impossible to gather contextual information, such as a description of the
working environment, replies may be easily influenced by the interviewer’s
comments, and body language cues are missing.
 Also, it may be difficult to contact the right person for the telephone interview.
Traditional Focus Group
 A small group of users and a moderator brought together to verbally discuss the
requirements.
 The purpose of a focus group is to probe user’s experiences, attitudes, beliefs, and
desires, and to obtain their reactions to ideas or prototypes
 Setting up focus group involves the following:
 Establish the objectives of the session.
 Select participants representing typical users, or potential users.
 Write a script for the moderator to follow.

15
IFETCE R-2019A ACADEMIC YEAR: 2023-2024

Facilitated Team Workshop

 A facilitated, structured workshop held with users to obtain requirements information.
Similar to the traditional Focus Group
 Like focus groups, they do require a great deal of time to organize and run.
Observational Field Study
 Users are observed and monitored for an extended time to learn what they do.
 Observation provides good insight into tasks being performed, the working environment
and conditions, the social environment, and working practices
 Observation, however, can be time-consuming and expensive.
 Video recording of the observation sessions will permit detailed task analysis.
Requirements Prototyping
 A demo, or very early prototype, is presented to users for comments concerning
functionality.
User-Interface Prototyping
 A demo, or early prototype, is presented to users to uncover user-interface issues and
problems
Usability Laboratory Testing
 Users at work are observed, evaluated, and measured in a specially constructed laboratory
to establish the usability of the product at that point in time.
 Usability tests uncover what people actually do, not what they think they do a common
problem with verbal descriptions
 The same scenarios can be presented to multiple users, providing comparative data from
several users.
Card Sorting for Web Sites
 A technique to establish groupings of information for Web sites.
 Briefly, the process is as follows:
 From previous analyses, identify about 50 content topics and inscribe them on index
cards. Limit topics to no more than 100.
 Provide blank index cards for names of additional topics the participant may want to
add, and colored blank cards for groupings that the participant will be asked to create.
 Number the cards on the back.
 Arrange for a facility with large enough table for spreading out cards.
 Select participants representing a range of users. Use one or two people at a time and
5 to 12 in total.
 Explain the process to the participants, saying that you are trying to determine what
categories of information will be useful, what groupings make sense, and what the
groupings should be called.
 Ask the participants to sort the cards and talk out loud while doing so. Advise the
participants that additional content cards may be named and added as they think
necessary during the sorting process.
 Observe and take notes as the participants talk about what they are doing. Pay
particular attention to the sorting rationale.
 Upon finishing the sorting, if a participant has too many groupings ask that they be
arranged hierarchically

16
IFETCE R-2019A ACADEMIC YEAR: 2023-2024

 Ask participants to provide a name for each grouping on the colored blank cards,
using words that the user would expect to see that would lead them to that particular
grouping.
 Make a record of the groupings using the numbers on the back of each card.
 Reshuffle the cards for the next session.
 When finished, analyze the results looking for commonalities among the different
sorting sessions
2.5.2 Indirect Methods
An indirect method of requirements determination is one that places an intermediary between the
developer and the user. This intermediary may be electronic or another person
Problems of Indirect Method
 First, there may be a filtering or distortion of the message, either intentional or
unintentional.
 Next, the intermediary may not possess a complete, or current, understanding of user’s
needs, passing on an incomplete or incorrect message.
 Finally, the intermediary may be a mechanism that discourages direct user- developer
contact for political reasons.
MIS Intermediary
 A company representative defines the user’s goals and needs to designers and developers.
 This representative may come from the Information Services department itself, or he or
she may be from the using department.
Paper Survey or Questionnaire
 A survey or questionnaire is administered to a sample of users using traditional mail
methods to obtain their needs.
 Advantage
 Questionnaires have the potential to be used for a large target audience located
most anywhere, and are much cheaper than customer visits.
 They generally, however, have a low return rate
 Disadvantage
 They may take a long time to collect and may be difficult to analyze.
 Questionnaires should be composed mostly of closed questions
 Questionnaires should be relatively short and created by someone experienced in
their design.
Electronic Survey or Questionnaire
 A survey or questionnaire is administered to a sample of users using e-mail or the Web to
obtain their needs.
 In creating an electronic survey:
 Determine the survey objectives.
 Determine where you will find the people to complete the survey.
 Create a mix of multiple choice and open-ended questions requiring short answers
addressing the survey objectives.
 Keep it short, about 10 items or less is preferable.
 Keep it simple, requiring no more than 5–10 minutes to complete
 Consider a follow-up more detailed survey, or surveys, called iterative surveys. Ask
people who complete and return the initial survey if they are willing to answer more
detailed questions. If so, create and send the more detailed survey.

17
IFETCE R-2019A ACADEMIC YEAR: 2023-2024

 A third follow-up survey can also be designed to gather additional information about the
most important requirements and tasks
 Iterative surveys, of course, take a longer time to complete.
Electronic Focus Group
 A small group of users and a moderator discuss the requirements online using
workstations.
 Advantages
 Advantages of electronic focus groups over traditional focus groups are that the
discussion is less influenced by group dynamics; has a smaller chance of being
dominated by one or a few participants; can be anonymous, leading to more
honest comments and less caution in proposing new ideas
 Disadvantages
 The depth and richness of verbal discussions does not exist and the
communication enhancement aspects of seeing participant’s body language are
missing.
Marketing and Sales
 Company representatives who regularly meet customers obtain suggestions or needs,
current and potential.
Support Line
 Information collected by the unit that helps customers with day-to-day problems is
analyzed (Customer Support, Technical Support, Help Desk, etc.).
E-Mail or Bulletin Board
 Problems, questions, and suggestions from users posted to a bulletin board or through e-
mail are analyzed.
User Group
 Improvements are suggested by customer groups who convene periodically to discuss
software usage. They require careful planning.
Competitor Analyses
 A review of competitor’s products or Web sites is used to gather ideas, uncover design
requirements and identify tasks.
Trade Show
 Customers at a trade show are presented a mock-up or prototype and asked for
comments.
Other Media Analysis
 An analysis of how other media, print or broadcast, present the process, information, or
subject matter of interest.
System Testing
 New requirements and feedback are obtained from ongoing product testing
 Requirements Collection Guidelines
 Establish 4 to 6 different developer-user links.
 Provide most reliance on direct links.

18
IFETCE R-2019A ACADEMIC YEAR: 2023-2024

2.6 BASIC BUSINESS FUNCTIONS

The general steps to be performed are:
2.6.1 Determine basic business functions
 A detailed description of what the product will do is prepared. Major system functions
are listed and described, including critical system inputs and outputs. A flowchart of
major functions is developed. The process the developer will use is summarized as
follows:
 Gain a complete understanding of the user’s mental model based upon:
 The user’s needs and the user’s profile.
 A user task analysis.
 Develop a conceptual model of the system based upon the user’s mental model.
This includes:
 Defining objects.
 Developing metaphors.
Understanding the User’s Mental Model
A goal of task analysis, and a goal of understanding the user, is to gain a picture of the user’s
mental model. A mental model is an internal representation of a person’s current
conceptualization and understanding of something. Mental models are gradually developed in
order to understand, explain, and do something. Mental models enable a person to predict the
actions necessary to do things if the actions have been forgotten or have not yet been
encountered.
2.6.2 Describe current activities through task analysis.
User activities are precisely described in a task analysis. Task analysis involves breaking down
the user’s activities to the individual task level. The goal is to obtain an understanding of why
and how people currently do the things that will be automated. Knowing why establishes the
major work goals; knowing how provides details of actions performed to accomplish these goals.
Task analysis also provides information concerning workflows, the interrelationships between
people, objects, and actions, and the user’s conceptual frameworks. The output of a task analysis
is a complete description of all user tasks and interactions. One result of a task analysis is a
listing of the user’s current tasks. This list should be well documented and maintained. Changes
in task requirements can then be easily incorporated as design iteration occurs. Another result is
a list of objects the users see as important to what they do. The objects can be sorted into the
following categories:
 Concrete objects—things that can be touched.
 People who are the object of sentences—normally organization employees, customers
 Forms or journals—things that keep track of information.
 People who are the subject of sentences—normally the users of a system.
 Abstract objects—anything not included above.
2.6.3 Develop a conceptual model of the system.
The output of the task analysis is the creation, by the designer, of a conceptual model for the user
interface. A conceptual model is the general conceptual framework through which the system’s
functions are presented. Such a model describes how the interface will present objects, the
relationships between objects, the properties of objects, and the actions that will be performed.
The goal of the designer is to facilitate for the user the development of useful mental model of
the system. This is accomplished by presenting to the user a meaningful conceptual model of the

19
IFETCE R-2019A ACADEMIC YEAR: 2023-2024

system. When the user then encounters the system, his or her existing mental model will,
hopefully, mesh well with the system’s conceptual model.
2.6.4 Establish design standards or style guides.
 Reflect the user’s mental model not the designer’s: A user will have different
expectations and levels of knowledge than the designer. So, the mental models of the user
and designer will be different. The user is concerned with the task to be performed, the
business objectives that must be fulfilled.
 Draw physical analogies or present metaphors: Replicate what is familiar and well
known. Duplicate actions that are already well learned. A metaphor, to be effective, must
be widely applicable within an interface.
 Comply with expectancies, habits, routines, and stereotypes: Use familiar
associations, avoiding the new and unfamiliar. With color, for example, accepted
meanings for red, yellow, and green are already well established. Use words and symbols
in their customary ways.
 Provide action-response compatibility: All system responses should be compatible
with the actions that elicit them. Names of commands, for example, should reflect the
actions that will occur.
 Make invisible parts and process of a system visible: New users of a system often
make erroneous or incomplete assumptions about what is invisible and develop a faulty
mental model. As more experience is gained, their mental models evolve to become more
accurate and complete.
 Provide proper and correct feedback: Be generous in providing feedback. Keep a
person informed of what is happening, and what has happened, at all times, including:
 Provide visible results of actions. o Display actions in progress.
 Provide a continuous indication of status.
 Present as much context information as possible.
 Provide clear, constructive, and correct error messages.
2.6.5 Establish system usability design goals.
 Ease of Use: The UI should be intuitive and easy to navigate, allowing users to perform
tasks quickly and without confusion. Minimize the learning curve by designing clear and
logical workflows and minimizing the need for extensive training.
 Efficiency and Productivity: Aim to streamline business processes and maximize user
productivity. Reduce the number of steps and interactions required to complete tasks, and
provide shortcuts and efficient workflows to save time.
 Clear and Consistent Design: Maintain a consistent design throughout the UI, including
visual elements, icons, buttons, and terminology. Use clear and concise language to
ensure users understand the system's functionalities and actions.
 Responsiveness and Performance: Ensure that the UI responds quickly to user
interactions, minimizing delays and providing a smooth user experience. Optimize the
performance of the UI to prevent any lag or slow loading times.
 Error Prevention and Recovery: Design the UI with a focus on error prevention by
providing clear instructions, validation mechanisms, and error handling. Offer users the
ability to recover from errors easily, with informative error messages and options to undo
or correct actions.

20
IFETCE R-2019A ACADEMIC YEAR: 2023-2024

2.7 DESIGN STANDARDS

Design standards in UI refer to the established guidelines and best practices that govern
the visual and interactive aspects of user interface design. These standards help ensure
consistency, usability, and a seamless user experience across different applications and
platforms. Here are some key design standards in UI:
 Visual Consistency: Maintain visual consistency throughout the UI by using consistent
colors, typography, icons, and visual elements. This helps users easily recognize and
associate visual cues with specific actions or functions.
 Responsive Design: Create UIs that are responsive and adapt well to different screen
sizes and devices. Ensure that the interface elements are appropriately sized and
positioned, and that the content is easily readable and accessible on various devices.
 Clear Hierarchy and Layout: Use a clear hierarchy and layout to organize information
and guide users' attention. Apply visual cues such as font sizes, color contrasts, and
spacing to establish a clear visual hierarchy and make important elements stand out.
 Intuitive Navigation: Design navigation systems that are intuitive and easy to
understand. Use clear labels, logical grouping of menu items, and appropriate placement
of navigation elements to help users easily move through different sections of the UI.
 User-Friendly Forms: Design forms that are user-friendly and easy to complete. Use
clear and concise labels, provide appropriate input validation and error handling, and
consider using input masking or autocomplete to streamline data entry.
 Readability and Legibility: Ensure that the text in the UI is easily readable and legible.
Use appropriate font sizes, contrast between text and background, and suitable line
spacing to enhance readability and avoid strain on the users' eyes.
 Meaningful and Contextual Feedback: Provide meaningful and contextual feedback to
users when they interact with the UI. Use informative error messages, success
notifications, and progress indicators to guide users and keep them informed about the
outcome of their actions.
 Accessibility: Follow accessibility guidelines and standards to ensure that the UI is
accessible to users with disabilities. Provide alternatives for non-text content, support
keyboard navigation, and use appropriate color contrasts for users with visual
impairments.
 Use of Visual Cues and Icons: Utilize visual cues and icons to convey meaning and
guide users' interactions. Icons should be intuitive and easily recognizable, and their
usage should be consistent throughout the UI to avoid confusion.
 Usability Testing and Iterative Design: Conduct usability testing to gather feedback
and insights from users throughout the design process. Use this feedback to iteratively
refine and improve the UI, ensuring that it meets the needs and expectations of the target
users.
 Navigation: Design intuitive and easily discoverable navigation menus and controls. Use
standard navigation patterns, such as menus, breadcrumbs, or tabs, to help users move
between different sections or screens within the UI.
These design standards serve as guidelines to create UIs that are visually appealing, user-
friendly, and provide a consistent and enjoyable user experience. Adhering to these standards
helps build trust with users and enhances the usability and effectiveness of the UI.

21
IFETCE R-2019A ACADEMIC YEAR: 2023-2024

2.8 ACTIVE ELEMENTS OF INTERFACE DESIGN

Active elements in interface design are interactive components that users can engage with to
perform actions or initiate processes within the user interface. These elements are designed to be
clickable or interactive, providing feedback and allowing users to manipulate the interface. Here
are some common active elements in interface design:
 Buttons: Buttons are one of the most recognizable active elements in UI design. They
typically have a clickable appearance and are used to trigger actions or submit forms.
Buttons can be styled with various colors, shapes, and labels to indicate their purpose and
importance.
 Links: Links are clickable elements that allow users to navigate to different pages or
sections within an application or website. They are typically represented by underlined
text or styled as buttons. Clicking on a link redirects the user to the linked destination.
 Form Fields: Form fields, such as text input fields, dropdown menus, checkboxes, and
radio buttons, allow users to input or select data. Users can interact with these elements to
enter information, make selections, or modify existing data.
 Sliders: Sliders are interactive controls that allow users to adjust a value within a
specified range. They are often used for selecting values like volume, brightness, or
numerical ranges. Users can slide the control along a track to set the desired value.
 Switches/Toggles: Switches or toggles provide an on/off or binary selection mechanism.
They are commonly used for enabling or disabling settings or preferences. Users can
click or slide the switch to change its state.
 Tabs: Tabs are interactive elements that allow users to switch between different sections
or views within an interface. Clicking on a tab displays the content associated with that
tab while hiding the content of other tabs.
 Accordions/Collapsible Panels: Accordions or collapsible panels are expandable and
collapsible sections of content. Users can click on a header to expand or collapse the
associated content, which is useful for displaying information in a compact manner.
 Modals/Dialog Boxes: Modals or dialog boxes are temporary windows that overlay the
main interface to prompt users for input or display additional information. Users typically
interact with the content within the modal before returning to the main interface.
 Interactive Charts and Graphs: Charts and graphs with interactive elements allow
users to explore data in a visual manner. Users can hover over data points to view details
or interact with legends and filters to manipulate the displayed data.
 Input Fields: Input fields allow users to enter text or numeric values. They can include
text fields, password fields, email fields, date pickers, and more. Users can type or select
input in these fields.
 Menus: Menus provide a list of options for users to choose from. They can be displayed
as dropdown menus, context menus, or navigation menus. Users can select an option by
clicking or tapping on the menu item.
 Drag-and-Drop: Drag-and-drop functionality enables users to move and rearrange
elements within an interface. Users can click and hold an item, drag it to a different
location, and drop it to trigger an action, such as reordering items or transferring files.
These active elements provide interactivity and engagement within the user interface, allowing
users to perform actions, make selections, or manipulate the displayed content. Designing these
elements effectively contributes to an intuitive and engaging user experience.

22
IFETCE R-2019A ACADEMIC YEAR: 2023-2024

2.9 COMPOSING THE ELEMENTS OF INTERFACE DESIGN.

Composing the elements of interface design involves arranging and organizing the various visual
and interactive components to create a cohesive and user-friendly interface. Here are some key
considerations for composing interface elements effectively:
 Layout: Design an organized and balanced layout that guides users' eyes smoothly across
the interface. Use grids, alignment, and whitespace to create visual order and hierarchy.
Group related elements together to establish logical associations and aid in
comprehension.
 Visual Hierarchy: Establish a clear visual hierarchy by varying the size, color, contrast,
and typography of interface elements. Important elements should stand out and grab
attention, while less important elements should be visually subdued.
 Navigation: Place navigation elements in easily discoverable locations, such as menus,
sidebars, or top bars, depending on the design conventions and user expectations. Ensure
that navigation is consistent, clear, and accessible from anywhere within the interface.
 White Space: Utilize white space (or negative space) strategically to provide breathing
room between elements. White space improves legibility, reduces clutter, and enhances
the overall visual appeal of the interface.
 Grouping and Separation: Group related elements together visually to create coherence
and improve scanning efficiency. Use dividers, borders, background colors, or spacing to
visually separate different sections or categories within the interface.
 Alignment: Maintain consistent alignment of interface elements to create a sense of
order and harmony. Aligning elements along vertical or horizontal axes helps establish
visual relationships and improves readability.
 Consistency: Ensure consistent use of visual elements, such as colors, typography, icons,
and buttons, throughout the interface. Consistency enhances user familiarity and reduces
cognitive load, making the interface more intuitive and user-friendly.
 Contrast: Use contrast effectively to draw attention to important elements and create
visual emphasis. Contrast in color, size, or shape can highlight interactive elements and
guide users' focus.
 Responsiveness: Design the interface to be responsive and adapt to different screen sizes
and resolutions. Consider how the elements will scale and reflow, and ensure that
interactive elements remain accessible and usable across various devices.
 Feedback and Affordance: Provide visual feedback and affordances to indicate the
interactive nature of elements. Use hover effects, color changes, animation, or tactile
feedback to give users cues about the functionality or state of an element.
 Readability and Accessibility: Ensure that text and other content elements are legible
and accessible to all users. Consider factors such as font size, contrast, color choices, and
use alternative text for non-textual elements to accommodate users with visual
impairments.
 Prototyping and Testing: Create interactive prototypes to test the composition of
interface elements and gather feedback from users. Prototyping helps identify any
usability issues or areas of improvement before finalizing the design.
By considering these principles when composing the elements of interface design, you can create
a visually pleasing, intuitive, and user-centered interface that enhances the overall user
experience.

23