UI Design Principles and Application

User Interface Design:
Principles and Applications

Objectives
 Understand the many considerations that must
be applied to the interface and screen design
process.
 Understand the rationale and rules for an
effective interface design methodology.
 Identify the components of graphical and Web
interfaces and screens, including windows,
menus, and controls.
Objectives
 Design and organize graphical screens and
Web pages to encourage the fastest and most
accurate comprehension and execution of
screen features.
 Choose screen colors and design screen icons
and graphics.
 Perform the user interface design process,
including interface development and testing.
Defining the User Interface
 a subset of a field of study called “ Human-
Computer Interaction(HCI)”
 Means by which human interact with a
computer to fulfill a purpose.
 It is the most important part of any computer
system.
 Its goal is to make working with a computer
easy, productive, and enjoyable.
Human-Computer Interaction
 It is the study, planning, and design of how
people and computer work together so that
person’s needs are satisfied in the most
effective way.
Human-Computer Interaction
HCI designers must consider 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 & software.
User Interface
 The part of a computer and its software that
people can see, hear, touch, talk to, or
otherwise understand or direct.
Two essential components:

 Input - is how a person communicates his or her
needs or desires to the computer.
 Output - how the computer conveys the results of its
computation and its requirement to the user.
User Interface
NOTE:
 Amount of programming code devoted to UI > 50%
 Proper interface design will provide mix of well-
designed input and output mechanisms that satisfy the
user’s needs, capabilities, and limitations in the most
effective way possible.
 The best interface is the one that is NOT notice, and
one that permits the user to focus on the information
and task at hand instead of mechanisms used to
present the information and perform the task.
A Brief History of the HCI
Punch cards, Line printers Early computers (1950s-60s)
Keyboards, Monitors Command language based

(1970s-1980s)
Mouse, trackball, touch pad, Graphical User Interfaces

touch screens (GUIs) (1990s - )
Multitouch screen, Voice, “Intelligent” interfaces

synthesized speech, gesture (2000s - )
Introduction of the Graphical
User Interface
 Xerox’s Palo Alto (1974) - An interface that
uses a form of human gesturing, the most basic
of all human communication methods.
 STAR(1981) –introduced the mouse and
pointing and selecting as the primary human-
computer communication method
These systems also introduced the graphical

user interface as we used today.
Xerox’s Palo Alto STAR
Introduction of the Graphical
User Interface
 Ivan Sutherland from Massachusetts Institute
of Technology(MIT) given credit for first
introducing graphics with his sketchpad
program in 1963.
Designing with Users in Mind
 User-Centered Design(UCD)
- describe the process and result of designing
with the needs of the user in mind.
→ The process requires that the user-interface designer

adopt the mindset that the user experience is the one
that matters most.
→ The designer’s and the product’s success is
ultimately measured by how well it meets the need
of that audience.
The Science of Usability
Usability
 subjective evaluation of how easily users
achieve goals
 Minimize user error and maximize user
satisfaction
 Learning in the short-term and efficiency in the
long-term
Usability
 Communicated by user’s emotional response
- Users either “love” or “hate” the application
 “Mental Model” – A User’s internal

understanding and expectations on how the
system works.
- Often very different than the real system internal
Usability
 Communicated by user’s emotional response
- Users either “love” or “hate” the application
 “Mental Model” – A User’s internal

understanding and expectations on how the
system works.
- Often very different than the real system internal
Usability
 The International Organization for
Standardization(ISO) defines usability as the
effectiveness, efficiency, and satisfaction
with which specified users achieved specified
goals in particular environment.
Effectiveness
 The accuracy and completeness with which users
can achieved specified goals in particular
environment
Efficiency
 The resources expended in relation to the accuracy
and completeness of goals achieved.
Satisfaction
 The comfort and acceptability of the work system to
its users and other people affected by its use.
Usability
 “Intuitive” – Resonant with a user’s mental
model
- Easy to Learn
- Familiar to Users
Understanding the User
 “Intuition” is built from emotionally rooted
expectations and beliefs (biases resulting from
previous experiences)
 Intuition is considered before reason
- Everyone's intuition is different; you must ask the user!
 Humans with neurologically hindered emotions often

suffer from indecision and lack of motivation (Aboulia)
- Not evoking emotion makes the user unmotivate
Understanding Errors
 “Slip” – A temporary malfunction of the user
- Typing an extra letter
- Missing a click
 “Mistake” – A mismatch between user’s mental model

and the real behavior of the system
- Gulf of Execution
- Gulf of Evaluation
 More a continuum than absolute categories

- Misspelling a word
Understanding Errors
What did you

notice?
Gulf of Execution
 I don’t know what to do?
 User can’t connect their goal
to a decision in the interface
 Users are unaware of a

decision that affects
their goal
Gulf of Evaluation
 “What does that mean????”
- “What did I just do???”, “Where am I???”
 User can’t match current state to mental model

- User can’t connect a previous decision with a new
state
- User was unaware they just made a decision that
changed state
The user just feels ….

Gulf of Evaluation
The Art of Design
 Is the ability of the designer to create a vision of what
the user face can and should be.
What makes a beautiful design?

UI Design Principles and Application

Uploaded by

Copyright:

Available Formats

UI Design Principles and Application

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

UI Design Principles and Application

Uploaded by

Copyright:

Available Formats

User Interface Design:

Principles and Applications

Two essential components:

Keyboards, Monitors Command language based

Mouse, trackball, touch pad, Graphical User Interfaces

Multitouch screen, Voice, “Intelligent” interfaces

These systems also introduced the graphical

→ The process requires that the user-interface designer

 “Mental Model” – A User’s internal

 “Mental Model” – A User’s internal

 Humans with neurologically hindered emotions often

 “Mistake” – A mismatch between user’s mental model

 More a continuum than absolute categories

What did you

 Users are unaware of a

 User can’t match current state to mental model

The user just feels ….

What makes a beautiful design?

You might also like