Characteristics of Graphical and Web User Interfaces

1
Chapter 2

• Characteristics of Graphical and Web User
  Interfaces

2
Introduction

• The graphical User Interface differed
  significantly from its text-based forefather.
• The Web interface differs from GUI interface ways
  also, not all differences, however, can be
  considered interface advancements.

3
The Graphical User Interface

• A User interface is a collection of techniques
  and mechanisms (actions) to interact with
  something (object).
• Objects are always visible to the user and are
  used to perform tasks.
• While actions include accessing and modifying
  object by pointing, selecting, and manipulating.
• All objects have standard resulting behaviors.

4
The Popularity of Graphics

• Graphics revolutionized design and the user
  interface.
• Graphic presentation of information utilizes a
  persons information processing capabilities much
  more effectively than other presentation methods.
• Graphics also can add appeal or charm to the
  interface and permit greater customization to
  create a unique corporate or organization style.

5
The Style of Interaction for graphical Systems

• The Concept of Direct Manipulation
• 1982, Shneiderman suggesting that they possess
  the following characteristics
• The system is portrayed as an extension of the
  real world
• The system replicates them, i.e. objects and
  actions, on a different medium, the screen.
• A person has the power to access and modify these
  objects, among which are windows.
• A person is allowed to work, focusing on the
  data, not the application and tools.
• The physical organization of the system, is
  hidden from view and is not distraction.

6

• Continuous visibility of objects and action
• Actions are rapid and incremental with visible
  display results
• Incremental actions are easily reversible.
• In practice, direct manipulation of all screen
  objects and actions may not be feasible because
  of the following
• The operation may be difficult to conceptualize
  in the graphical system.
• The graphics capability of the system may be
  limited.
• The amount of space available for placing
  manipulation controls in the window border may be
  limited.
• It may be difficult for people to learn and
  remember all the necessary operations and actions.

7
2. Indirect manipulation

• Indirect manipulation substitutes words and text,
  such as pull-down or pop-up menus, for symbols,
  and substitutes typing for pointing.
• Most window systems are combination of both
  direct and indirect manipulation
• Direct pointing at menu icon and selecting it
• Indirect menu itself is a textual list of
  operations.

8
Graphical Systems Advantages and Disadvantages

• Advantages
• Symbols recognized faster than text
• Faster learning
• Easier remembering
• More natural
• Exploits visual/spatial cues
• Many more
• Disadvantages
• Greater design complexity
• Inconsistencies in technique and terminology
• Human comprehension limitations
• Not always familiar
• Many more

9
Some studies and a Conclusion

• In summary, the following is clear
• The design of an interface, and not its
  interaction style, is the best determinant of
  ease of use.
• User preferences must be considered in choosing
  an interaction style.
• In the overwhelming majority cases, words are
  more meaningful to users the icon.
• The content of a graphic screen is critical to
  its usefulness. The wrong presentation or
  cluttered presentation may actually lead to
  greater confusion, not less.
• The success of a graphical system depends on the
  skills of its designers in the following
  established principles of usability.

10
Characteristics of the Graphical User Interface

• A graphical system possesses a set of defining
  concepts.
• Sophisticated Visual Presentation
• Pick-and-Click Interaction
• Restricted Set of Interface Options WYSIWYG
• Visualization
• Object Orientation
• Properties or Attributes of objects
• Actions
• Application versus object or data orientation
• Views
• Use of Recognition Memory
• Concurrent Performance of Functions

11
The Web User Interface

• Web interface design is essentially the design of
  navigation and the presentation of information
• It is about content, not data.
• Proper interface design is largely a matter of
  properly balancing the structure and
  relationships of menus, content, and other linked
  documents or graphics.
• The design goal is to build a hierarchy of menus
  and pages that feels natural, is well structured,
  is easy to used, and is truthful.

12
Characteristics of a Web Interface

• A Web interface possesses a number of
  characteristics, some similar to a GUI interface.
• GUI Versus Web Page Design
• See the attached handout

13
Principles of User Interface Design

• They are fundamental to the design and
  implementation of all effective interfaces,
  including GUI and Web ones.
• Aesthetically Pleasing
• Clarity
• Compatibility
• Comprehensibility
• Configurability
• Consistency
• Control
• Directness
• Efficiency
• Familiarity
• Flexibility
• Forgiveness
• Predictability
• Recovery
• Responsiveness
• Simplicity
• Transparency