Scribd
Upload
15 views26 pages

Module 1 CHAPTER 2 Characteristics New

Uploaded by

hemal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
15 views26 pages

Module 1 CHAPTER 2 Characteristics New

Uploaded by

hemal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 26

Characteristics of

Graphical and Web User


Interfaces

Chapter 2
The Essential Guide to User
Interface Design

Computer Systems Interface 1


Computer Systems Interface 2
Computer Systems Interface 3
Computer Systems Interface 4
Characteristics of GUI and
Web interfaces
 Interaction styles
 Direct Manipulation
 Characteristics of both
 Web page vs. Web application
design
 General principles of UI design

Computer Systems Interface 5


Interaction styles
 The method by which the user and
a computer system communicate
with one another
- Command line
- Menu selection
- Form fill-in
- Direct manipulation
- Anthropomorphic
Computer Systems Interface 6
Command line

Computer Systems Interface 7


Menu selection

Computer Systems Interface 8


Form fill-in

Computer Systems Interface 9


Direct Manipulation

Computer Systems Interface 10


Anthropomorphic
 Spoken natural
language
 Hand gestures

Computer Systems Interface 11


Anthropomorphic (cont.)
 Facial expressions
 Eye movements

What??!

OK
Computer Systems Interface 12
Examples

Computer Systems Interface 13


The concept of Direct
Manipulation
 In practice, is direct manipulation
of all objects and actions feasible?
 Indirect manipulation
- Text for symbols
- Typing for pointing
- Ex: Pointing & selecting menu
(direct); Menu – textual list of
operations (indirect)
Computer Systems Interface 14
Graphical systems:
Advantages
 Symbols recognized faster than text
 Faster learning and use
 More natural
 Fewer errors
 More control
 More attractive
 Low typing requirements
 Etc.
Computer Systems Interface 15
Graphical systems:
disadvantages
 Greater design complexity
 Inconsistency in technique &
terminology
 Human comprehension limitations
 Inefficient for touch typists
 May consume more screen space
 Hardware limitations
 Etc.
Computer Systems Interface 16
Characteristics of the Graphical user interface
Sophisticated Visual Presentation

 Visual presentation is the visual aspect of the interface. It is what people


see on the screen. The sophistication of a graphical system permits
displaying lines, including drawings and icons. It also permits the
displaying of a variety of character fonts, including different sizes and
styles.

 The meaningful interface elements visually presented to the user in a


graphical system include
 Windows (primary, secondary, or dialog boxes),
 Menus (menu bar, pull down, pop-up, cascading),
 Icons to represent objects such as programs or files, assorted screen-
based controls (text boxes, list boxes,
 Combination boxes, settings, scroll bars, and buttons),
and a mouse pointer and cursor.
 The objective is to reflect visually on the screen the real world of the
user as realistically, meaningfully, simply, and clearly as possible.

Computer Systems Interface 17


Pick-and-Click Interaction
 To identify a proposed action is commonly referred to as pick, the signal to
perform an action as click.
 The primary mechanism for performing this pick-and-click is most often the
mouse and its buttons and the secondary mechanism for performing these
selection actions is the keyboard.

Restricted Set of Interface Options


 The array of alternatives available to the user is what is presented on the
screen or what may be retrieved through what is presented on the screen,
nothing less, and nothing more. This concept fostered the acronym
WYSIWYG.

 Visualization
 Visualization is a cognitive process that allows people to understand
information that is difficult to perceive, because it is either too voluminous or
too abstract.

Computer Systems Interface 18


Object Orientation

 A graphical system consists of objects and actions. Objects are


what people see on the screen as a single unit.
 Objects can be composed of subobjects. For example, an
object may be a document and its subobjects may be a
paragraph, sentence, word, and letter.
 Objects are divided into three meaningful classes as Data
objects, which present information, container objects to hold
other objects and Device objects represent physical objects in
the real world.
 Objects can exist within the context of other objects, and one
object may affect the way another object appears or behaves.
These relationships are called collections, constraints,
composites, and containers.

Computer Systems Interface 19


The Web User Interface

Computer Systems Interface 20


GUI vs. Web Design
 Devices
 User focus
 Data/information
 User tasks
 Presentation elements
 Navigation
 Context
 Security

Computer Systems Interface 21


Intranet vs. Internet
 Users
 Tasks
 Type of information
 Amount of information
 Hardware & software
 Design philosophy
 Extranet?

Computer Systems Interface 22


Principles of User Interface
Design
 The design goals in creating a UI
 Both GUI and Web interfaces
 How to implement these goals

Computer Systems Interface 23


Principles of UI Design
(cont.)
 Accessibility
 Aesthetically Pleasing
 Availability
 Clarity
 Compatibility
 Configurability
 Consistency
 Control
 Directness

Computer Systems Interface 24


Principles of UI Design
(cont.)
 Efficiency
 Familiarity
 Flexibility
 Forgiveness
 Immersion
 Obviousness
 Operability
 Perceptibility
 Positive first impression

Computer Systems Interface 25


Principles of UI Design
(cont.)
 Predictability
 Recovery
 Responsiveness
 Safety
 Simplicity
 Transparency
 Trade-offs
 Visibility
Computer Systems Interface 26

You might also like