DESIGNING GRAPHICAL USER INTERFACES

1
USER INTERFACE DESIGN
2
DESIGNING GRAPHICAL USER INTERFACES - GUIs

• Graphical user interface (GUI)
• Characterized by their use of
• Typography symbols, color
• Static and dynamic graphics
• Facts, concepts, information and even emotions
  are conveyed.
• The structure is usually provided by the
  Operating System

3
GUI principles

• Designers of GUIs assume
• Graphics offer improvement over alphanumeric data
• They are easier for the user to learn
• They improve system usability
• They produce a more favorable user perception

4
The GUI design Process

• The GUI design process, is influenced by
• 1. Hardware and software
• 2. GUI as a means of achieving usability
• 3. GUI requirements
• 4. GUI design principles
• 5. The use of color in GUI design

5
To support this category of GUI systems, the
hardware/software must

• 1. Support more than one operation at a time
  (multiple windows).
• 2. Support different input devices.
• 3. Display (icons etc.) in a high-level
  resolution.
• 4. Store an appropriate amount (in Mbytes) of
  active information.
• 5. Share/transfer data between different
  applications.
• 6. Embed commonly used data/information/graphics
  in different applications.
• 7. Communicate/interface with different types of
  equipment.
• 8. Provide the same working environment under
  different hardware configurations.
• 9. Adapt to changes in the GUI environment.

6
GUI as a means of achieving usability.

• GUI are used to achieve usability.
• Usability describes product attributes that
  enable users to quickly, efficiently, and
  effectively use and learn the product to
  accomplish their real work.
• Beginners can use the product quickly
• and
• There is always more to learn.

7
GUI Usability

• With GUIs, users form a favorable perception of
  software.
• This perception enables the user to achieve
  productivity improvements.
• This productivity depends on the metaphor of the
  GUI.
• For example
• Icons are used to represent documents, folders,
  and floppy disks.
• Achievement of such a desktop metaphor is a goal
  of systems aimed at microcomputer users.

8
GUI requirements

• GUI design must satisfy several basic
  requirements
• A comprehensible mental image, or metaphor.
• Easy-to-use, simple and commonly recognized
  symbols/icons for operations.
• Appropriate organisation of data, functions,
  tasks and roles.
• Related operations grouped under the same topic.
• Avoid too many options, and too many nested
  levels.

9
GUIs Must Provide for

• An efficient way to navigate among data,
  functions, tasks and roles.
• Different methods of moving data.
• Short-cuts.
• A quality appearance.
• Effective interaction sequencing.

10
GUI design principles.

• There are three basic principles of GUI design
• Organisation
• Economy
• and Communication.

11
Organisation

• Designers achieve organisation with several
  techniques
• consistency
• screen layout
• relationships
• and navigability.

12
Organisation

• Consistency is achieved by maximising the
  regularity of the location and appearance of all
  components.
• Internal consistency deals with the regularity
  within a single system.
• External consistency deals with the regularity
  across systems.
• Screen layout contributes to organisation with
  horizontal and vertical grids to provide the
  framework.
• The grid concept applies to entire screens,
  windows, buttons, and icons.

13
Organisation

• Relationships are established by grouping like
  items.
• Grouping is enhanced using features such as
  background color.
• Relationships should be clear, consistent,
  appropriate and strong.
• Navigability is the ability of an interface to
  focus attention on the appropriate materials, and
  to lead one though the material.

14
Example of internal consistency.

• Microsoft provides the same appearance and
  selection method in two different operations
  under Microsoft Word (97).

15
Example of external consistency.

• Microsoft provides a similar appearance for
  different software products.
• Menu bar from Microsoft PowerPoint
• Menu bar from Microsoft Word
• Menu bar from Microsoft Excel

16
Relationships

• Items not grouped with types

Result is confusion. Which check box matches with
each button?
17
Relationships
Items grouped by types

• Related items grouped together make it easier for
  users.

18
Economy

• Economy can be achieved through
• Simplicity
• Clarity
• Distinctiveness and
• Emphasis.

19
Economy

• Simplicity minimises the effort the user must
  expend to understand a display.
• Clarity means minimizing the opportunity for
  ambiguity.
• Distinctiveness enables the user to separate
  elements on the screen into logical groupings.
• Emphasis is the final means of achieving economy.
  The designer should make it easy for the user to
  pick out important elements by keeping them to a
  minimum.
• Do not overuse the graphical features available!

20
Which menu design is better ?
21
Communication

• Communication is achieved through a balanced
  offering of
• Legibility
• Readability
• Typography
• Symbolism
• Multiple views
• and Color.

22
Communication

• Legibility is achieved using a combination of
  characters or graphics that show up well.
• The emphasis is on communication rather than
  appearance.
• Attention to the environment is necessary.
• In a dark room a brightly-lit screen produces
  too much glare.
• In a bright room a dark background introduces
  unwanted reflections.

23
Readability

• Readability refers to how easy it is to interpret
  and understand the display.
• The factors that decide the readability
• Alignment
• Location
• Brightness
• Color
• and Size

24
Readability

• Which of the following is the easiest to read ?
• Readability makes the display easy to interpret
  and understand. The emphasis is on how easy the
  displayed information may be read by the user.
  Alignment, location, brightness, color, and size
  are the factors to decide the readability of the
  information.
• Readability makes the display easy to interpret
  and understand. The emphasis is on how easy the
  displayed information may be read by the user.
  Alignment, location, brightness, color, and size
  are the factors to decide the readability of the
  information.
• Readability makes the display easy to interpret
  and understand. The emphasis is on how easy the
  displayed information may be read by the user.
  Alignment, location, brightness, color, and size
  are the factors to decide the readability of the
  information.

25
Typography

• Typography is the manner in which textual
  material is displayed.
• As a general rule
• A maximum of three typefaces.
• A maximum of three point sizes is the limit.
• No more than 60 characters per line.
• Avoid the use of upper case only.
• Avoid the use of fixed-width fonts in the
  display.
• Question Do these rules apply to different
  languages?

26
Typography

• Typography deals with the manner in which textual
  material is displayed. As a general rule, a
  maximum of three typefaces in a maximum of three
  point sizes is the limit. Each line should
  contain no more than 60 characters.
• Avoid the use of
• only upper case displays with fixed-width fonts.

27
Typography

• Which of the following takes the longest to read
  ?
• TYPOGRAPHY DEALS WITH THE MANNER IN WHICH TEXTUAL
  MATERIAL IS DISPLAYED. AS A GENERAL RULE, A
  MAXIMUM OF THREE TYPEFACES IN A MAXIMUM OF THREE
  POINT SIZE IS THE LIMIT. EACH LINE SHOULD CONTAIN
  NO MORE THAN 60 CHARACTERS. TRY TO AVOID THE USE
  OF UPPER CASE ONLY AND FIXED-WIDTH FONTS DISPLAY.
  
• Typography deals with the manner in which textual
  material is displayed. As a general rule, a
  maximum of three typefaces in a maximum of three
  point size is the limit. Each line should contain
  no more than 60 characters. Try to avoid the use
  of upper case only and fixed-width fonts display.

28
Symbolism

• Symbolism relates to the use of graphics to
  convey messages and information in the desired
  way.
• A complex principle to apply.
• Use symbols which are commonly accepted.
• Professionally accepted symbols are not commonly
  understood!
• Prototyping provides necessary user feedback to
  refine the graphics until the desired effect is
  achieved.

29
Symbolism

• What is the meaning of the following symbols ?

30
Multiple views

• Multiple views enable the user to see the
  information in various ways.
• Examples
• Database details can be viewed in tabular,
  column, graphic, and narrative format.
• Numeric data can be viewed in different graphical
  formats (pie chart, line chart or even mixed
  chart).
• GUIs enable a user to select the desired view(s).

31
Screen Layout

• Use vertical and horizontal grid lines to outline
  the framework for organisation.

Outline for the Save as dialog box. Final
design of the Save as dialog box.
32
Clarity

• Graphics used should be carefully chosen to
  minimize ambiguity.

Use commonly recognized graphics. The background
of the users may affect the selection.
33
Distinctiveness

• Too much or too little can damage a design.
• Design must be simple and communicate the
  message.
• Complexity to achieve distinctiveness leads to
  confusion.

Welcome
34
Color in GUI design

• Color is an important means of achieving
  communication in a GUI design.
• Color has a powerful communication capability.
• Color should be used to impart information,
• not just for decoration.
• For example
• Red' is used as a warning message for any
  destructive operation (eg. deleting files).

35
Objectives in using color

• Draw the users attention to important
  information.
• Portray objects in a more natural manner.
• Give graphics a dynamic dimension.
• Contribute to an accurate interpretation.
• Provide an additional coding capability.
• Make information more presentable.
• Enable the user to organize material into
  hierarchies or structures.

36
Problems when using color

• Color can create confusion
• More expensive hardware is needed.
• Lose effectiveness with color-deficient users.
• Cause visual discomfort and after-image.
• Bias user action.

37
Color design principles

• Good use of color is difficult for several
  reasons
• Environment (light, space, ...)
• Size, shape, and location of objects influence
  how their color is perceived.
• Physiological and cultural influences.

38
Color design principles

• 1. Color organisation
• Particular groups should be assigned specific
  colors.
• Color assignments must be consistent from screen
  to screen and from system to system.
• Use background colors is especially effective in
  achieving organisation.
• For example, Microsoft Corp. use the same color
  background as a default to all their software
  products.

39
Color design principles

• 2. Color economy
• Use a maximum of from three to seven colors where
  the user has to remember the meaning of each
  color.
• First design the screen for black and white then
  add color.

40
Color design principles

• 3. Color communication
• Sensitivity to colors varies across the field of
  vision.
• Viewers are more sensitive to color in the center
  the field of vision than on the periphery.
• use bright colors such as red and green in the
  center of the screen
• display and color such as blue, black, white and
  yellow near the edges.
• Older users need brighter colors and blues are
  difficult to discern.

41
Color design principles

• Consider the viewing environment.
• For a dark environment
• Use white, yellow, or red for text, lines, and
  shapes.
• Use blue, green or dark gray for background.
• For a bright environment
• Use blue or black for text, lines, and shapes.
• Use magenta, blue, white, or light yellow for
  background.

42
Color design principles

• Some combinations of certain color can cause
  irritation and produce after-image.
• Avoid strong combinations of
• red and blue,
• red and green,
• blue and yellow, and
• green and blue.
• Allow users to select their own choice of color
  combinations.