IT703: Directed Readings

(Usability Engineering)

Lecture 4
Principles of Good
Interface & Screen Designs

March 30, 2019 Prof. Abdelaziz Khamis 1

Lecture 4 Topics
 Introduction
 Organizing Screen Elements
 Presenting Information
 Technological Considerations in Interface Design
 Screen Examples & Assignment

March 30, 2019 Prof. Abdelaziz Khamis 2

Introduction
 A well-designed interface and screen
 Reflects the capabilities, needs, and tasks of its users
 Is developed within the physical constraints imposed by the
hardware on which it is displayed
 Utilizes the capabilities of its controlling software effectively
 Achieves the business objectives of the system for which it is
designed
 To accomplish these goals, the designer must first
understand the principles of good design.
 Before addressing the principles of good design, let’s look
at what aspects of poor design can be distracting to the
users, and what a user is looking for in good design.

March 30, 2019 Prof. Abdelaziz Khamis 3

Introduction
 Some Common Problems in Visual Interface Design
 Visual inconsistency in screen detail presentation
 Overuse of three-dimensional presentations
 Overuse of bright colours
 Poorly designed icons
 Bad typography
 Some Web Screen distractions
 Poor information readability
 Confusing and inefficient navigation
 Excessive or inefficient page scrolling
 Information overload
 Outdated information
 Extensive visual clutter
March 30, 2019 Prof. Abdelaziz Khamis 4
Introduction (Continued)
 What Users Want
 An orderly, clean, clutter-free appearance.
 An obvious indication of what is being shown and what
should be done with it.
 Expected information located where it should be.
 A clear indication of what relates to what, including
options, headings, captions, data, and so forth.
 Plain, simple English.
 A simple way of finding out what is in a system and how
to get it out.
 A clear indication of when an action can make a
permanent change in the data or system.

March 30, 2019 Prof. Abdelaziz Khamis 5

Introduction (Continued)
 Interface Design Goals
To make an interface easy and pleasant to use, then, the
goal in design is to:
 Reduce visual work
 Reduce intellectual work
 Reduce memory work
 Reduce motor work
 Minimize or eliminate any burdens or instructions imposed by
technology

March 30, 2019 Prof. Abdelaziz Khamis 6

 Organizing Screen Elements
 Visual clarity is achieved when the display elements are
organized and presented in meaningful, understandable,
and recognizable ways.
 Clarity is influenced by a number of factors:
 Consistency in Design
 Ordering of Data and Content
 Visually Pleasing Composition
 What must be avoided is visual clutter created by:
 Indistinct elements
 Random placement
 Confusing patterns

March 30, 2019 Prof. Abdelaziz Khamis 7

Organizing Screen Elements (Continued)
 Consistency
There are three views of consistency:
 Internal consistency:
The same conventions and rules should be applied to all
elements of the GUI

Example: Dialogue Boxes - Same kinds of elements are shown

in the same places.

March 30, 2019 Prof. Abdelaziz Khamis 8

Organizing Screen Elements (Continued)
 Consistency (Continued)
 External consistency:
Follow the same conventions and rules across all related
interfaces

Example: Text Tool Icons - These icons come from different

desktop publishing applications but generally have the same
meaning

March 30, 2019 Prof. Abdelaziz Khamis 9

Organizing Screen Elements (Continued)
 Consistency (Continued)
 Real-world consistency:
Conventions should be made consistent with real-world
experiences, observations and perceptions of the user.

Consistency is a very important component of design. It leads to:

 A reduction in task completion times

 Increase in user satisfaction

 Reduction in learning time

March 30, 2019 Prof. Abdelaziz Khamis 10

Organizing Screen Elements (Continued)
 Ordering of Data and Content
 Divide information into units that are logical, meaningful,
and sensible.
 Organize by the degree of interrelationship between
data or information.
 Provide an ordering of screen elements that is prioritized
according to the user’s expectations and needs.
 Possible ordering schemes include:
Conventional Function
Sequence of Use Importance
Frequency of Use General to specific

March 30, 2019 Prof. Abdelaziz Khamis 11

Organizing Screen Elements (Continued)
 Ordering of Data and Content (Continued)
 Form groups that cover all possibilities.
 Ensure that information that must be compared is visible
at the same time
 Ensure that only information relative to the users tasks
or needs is presented on the screen

March 30, 2019 Prof. Abdelaziz Khamis 12

Organizing Screen Elements (Continued)
 Visually Pleasing Composition
Qualities of Visually Pleasing Composition includes:
 Balance
 Provide an equal weight of screen elements, left and right, top
and bottom
 Figure 3.1: Balance (versus instability)
 Symmetry
 Replicate elements left and right of the screen centerline
 Figure 3.2: Symmetry (versus asymmetry)
 Regularity
 Establish standard and consistently spaced horizontal and
vertical alignment points
 Use similar element sizes, shapes, colors, and spacing
 Figure 3.3: Regularity (versus irregularity)

March 30, 2019 Prof. Abdelaziz Khamis 13

Organizing Screen Elements (Continued)
 Visually Pleasing Composition (Continued)
 Predictability
 Be consistent in following conventional orders or arrangements
 Figure 3.4: Predictability (versus spontaneity)
 Sequentiality
 Arrange elements to guide the eye in an obvious, logical,
rhythmic, and efficient manner
 Figure 3.5: Sequentiality (versus randomness)
 Economy
 Use as few styles, display techniques, and colors as possible
 Figure 3.6: Economy (versus intricacy)

March 30, 2019 Prof. Abdelaziz Khamis 14

Organizing Screen Elements (Continued)
 Visually Pleasing Composition (Continued)
 Unity
 Use similar sizes, shapes, or colors for related information
 Leave less space between elements of a screen than the space
left at the margins
 Figure 3.7: Unity (versus Fragmentation)
 Simplicity
 Optimize the number of elements on a screen, within limits of
clarity
 Minimize the alignment points, especially horizontal or columnar
 Figures 3.10 & 3.11: Simplicity (versus Complexity)
 Grouping
 Provide functional groupings of associated elements
 Create spatial groupings as closely as possible

March 30, 2019 Prof. Abdelaziz Khamis 15

Organizing Screen Elements (Continued)
 Visually Pleasing Composition (Continued)
 Grouping (Continued)
 Evenly space controls within a grouping
 Visually reinforce groupings:
 Separation through use of white space
 Provide line borders around groups
 Provide meaningful titles for each grouping.
 Figures 3.12 & 3.13: Grouping (versus ungrouping)
In addition to providing aesthetic appeal, research has found
that grouping results in a faster screen search.

March 30, 2019 Prof. Abdelaziz Khamis 16

Presenting Information
 Provide legibility
 Noticeable and distinguishable information
 Provide readability
 Identifiable, interpretable, and attractive information
 Present information in usable form
 Translations and references to documentation should not be
required to interpret and understand information
 Utilize contrasting display features to attract and call
attention to different screen elements
 Create visual lines
 Implicit and explicit, to guide the eye
 Be consistent in appearance and procedural usage

March 30, 2019 Prof. Abdelaziz Khamis 17

Presenting Information (Continued)
 Typography
 A font’s characteristics (type, size, and style) can be used to:
 Communicate the organization of screen elements
 Identify the most important screen elements
 Establish a reading order
 Create a particular mood
 Font Types and Families
 Use simple, common, readable fonts.
 Use no more than two families, compatible in terms of line
thicknesses, capital letter height, and so on.
 Assign a separate purpose to each family
 Allow one family to dominate

March 30, 2019 Prof. Abdelaziz Khamis 18

Presenting Information (Continued)
 Typography (Continued)
 Font Size
 Use no more than three sizes
 Consider “X” height (Figure 3.18)
 For graphical systems, use:
 12 point for menus
 10 point for windows
 For Web pages, use:
 12 to 14 points for body text
 18 to 36 points for titles and headings
 For line spacing, use 1 to 1½ times font size.
 Never change established type sizes to squeeze in more text.

March 30, 2019 Prof. Abdelaziz Khamis 19

Presenting Information (Continued)
 Typography (Continued)
 Font Styles
 Use no more than two styles of the same family.
 Use italics when you want to call attention.
 Use bold when you want to call attention or create a hierarchy.
 In Web pages, use an underline only to indicate a navigation link.
 Font Case
 Use mixed case for anything textual in nature, including control
caption, control choice descriptions, messages, figure and table
descriptions, and so forth.
 Consider using uppercase for:
 Titles
 Warning messages

March 30, 2019 Prof. Abdelaziz Khamis 20

Presenting Information (Continued)
 Application and Page Size
A decision that must be made early in the Web page design
process is:
 whether to create fewer long pages that may require extensive
scrolling, or to create a large number of shorter pages necessitating
more frequent movements between pages.
The design goal is:
 to allow people to move through an application or Web page as
quickly and efficiently as possible.
 Scrolling
 Avoid scrolling to determine a page’s contents.
 Minimize vertical page scrolling.
 Avoid horizontal page scrolling.
 Use longer scrolling pages when people are reading for comprehension.

March 30, 2019 Prof. Abdelaziz Khamis 21

Presenting Information (Continued)
 Application and Page Size (Continued)
 Paging
(Full-screen paging can be done using the page-up and page-down
keys or clicking on the scroll bar page-up or page-down icons)
 Encourage viewing a page through “paging.”

 Information is found faster using paging as opposed to

scrolling.
 Older users perform best when using short full pages rather
than continuous long pages.

March 30, 2019 Prof. Abdelaziz Khamis 22

Presenting Information (Continued)
 Application and Page Size
 Present the proper amount of information for the task.
 Too little is inefficient
 Too much is confusing
 Present all information necessary for performing an action or
making a decision on one screen, whenever possible.
 People should not have to remember things from one screen to
the next
 Restrict screen or window density levels to no more than
about 30 percent. There are two types of density to be
calculated on a screen:
 Local
 Overall
Figure 3.16 (Overall = 17.9% - Local = 58.0%)
Figure 3.20 (Overall = 10.8% - Local = 35.6%)

March 30, 2019 Prof. Abdelaziz Khamis 23

Presenting Information (Continued)
 Screen Elements
 Historically in screen design, the entities on screens used to
enter, select, delete, modify, and view data were called fields.
 With the introduction of graphical systems, a variety of other
entities were created. As a group, these entities are called
controls.
 Controls have two attributes:
 Data field: An area in which data or information may be keyed,
selected or simply displayed.
 Control caption: A descriptive label identifying the type of data
contained within the field.
 Controls cannot exist alone on a screen. Other kinds of
information are necessary in order to provide context for the
user, and to aid in interpreting data.
March 30, 2019 Prof. Abdelaziz Khamis 24
Presenting Information (Continued)
 Screen Elements (Continued)
 Window Title
 All windows must have a title located at the top.
 Clearly and concisely describe window purpose.
 Spell out fully in upper- or mixed-case font.
 If truncation is necessary, truncate right to left.
 Web Page Title
 All Web pages must have titles located in the browser bar
and on the content pages.
 Titles must be: descriptive, unique and concise

March 30, 2019 Prof. Abdelaziz Khamis 25

Presenting Information (Continued)
 Screen Elements (Continued)
Captions/Labels
 Identify controls with captions or labels.
 Fully spell out in a language meaningful to the user.
 Capitalize the first letter of each significant word.
 End each caption with a colon (:).
 Choose distinct captions that can be easily distinguished from
other captions.
(This point is illustrated in Figure 3.21)
 Provide consistency.
(Provide the same caption wording for all identical data fields on all
screens)

March 30, 2019 Prof. Abdelaziz Khamis 26

Presenting Information (Continued)
 Screen Elements (Continued)
Data Fields
 For entry/modifiable data fields,
 Display data within a line box, a box with a contrasting
light-colored background
 Break long structured data items into logical pieces
 Provide a field length appropriate to the size of the entry

 For display/read-only data fields:

 Display data on the normal screen background
 Visually emphasize the data fields

March 30, 2019 Prof. Abdelaziz Khamis 27

Presenting Information (Continued)
 Screen Elements (Continued)
Control Captions/Data Field Differentiation
 Differentiate captions from data fields by using:
 Contrasting features, such as different intensities, separating columns,
boxes, and so forth (Fig. 3.22)
 Consistent physical relationships

 For single data fields:

 Place the caption to left of the data field (Fig. 3.23)
 Align the caption with the control’s data
 Alternately, place the caption above the data field (Fig. 3.24)
 Align captions justified, upper left to the data field
 Maintain consistent positional relations within a screen, or within related
screens, whenever possible
 For multiple listings of columnar-oriented data:
 Place the caption above the columnized data fields (Fig. 3.25)

March 30, 2019 Prof. Abdelaziz Khamis 28

Presenting Information (Continued)
 Screen Elements (Continued)
Control Captions/Data Field Alignment
 First Approach
 Left-align both captions and data fields
 Leave one space between the longest caption and the data field
column
 Illustrated in Figure 3.26
 Second Approach
 Left-align data fields and right-align captions to data fields
 Leave one space between each
 Illustrated in Figure 3.27
Figures 3.28 through 3.44 contain a series of screens in a variety of
formats. The textbook author’s comments are found with each screen.

March 30, 2019 Prof. Abdelaziz Khamis 29

Presenting Information (Continued)
 Screen Elements (Continued)
Control Section Headings
 Provide a meaningful heading that clearly describes the
relationship of the grouped controls
 Locate section headings above their related screen controls
 Display in a distinguishable font style and size, using headline
style (Figure 3.49)
 Alternately, headings may be located within a border surrounding
a grouping, justified to the upper-left corner (Figure 3.50)
 Indent the control captions to the right of the start of the
heading
 Fully spell out in an uppercase font

March 30, 2019 Prof. Abdelaziz Khamis 30

Presenting Information (Continued)
 Screen Elements (Continued)
Field Group Headings
 Provide a meaningful heading that clearly describes the
relationship of the grouped controls.
 Center the field group heading above the captions to which it
applies.
 Relate it to the captions by a solid line.
 Display in a distinguishable font style and size, using headline
style. (Figure 3.51)

March 30, 2019 Prof. Abdelaziz Khamis 31

Presenting Information (Continued)
 Screen Elements (Continued)
Instructions
 Incorporate instructions on a screen, as necessary:
 In a position just preceding the part, or parts, of a screen to
which they apply
 In a manner that visually distinguishes them, such as:
 Displaying in a unique type style
 Displaying in a unique color
 In a position that visually distinguishes them by:
 Left-aligning the instruction and indenting the related field captions,
headings, or text to the right
 Leaving a space line, if possible, between the instructions and the
related control, heading, or text
 Illustrated in Figure 3.56
 Using a mixed-case font
March 30, 2019 Prof. Abdelaziz Khamis 32
Presenting Information (Continued)
 Screen Elements (Continued)
Completion Aids
 Incorporate data field completion aids on a screen, as
necessary:
 In a position to the right of the text entry control to which
they apply
 In a manner that visually distinguishes them, including:
 Displaying within a parentheses ( )
 Possibly displaying in a unique style
 Left-alignment of completion aids in a column of controls is
desirable but not absolutely necessary.
 Illustrated in Figure 3.57

March 30, 2019 Prof. Abdelaziz Khamis 33

Presenting Information (Continued)
 Screen Elements (Continued)
Required and Optional Data
 Use required fields carefully. Only designate fields as required
when absolutely necessary.
 Request information at the necessary point in the process.
 Provide defaults for previously captured information.
 Permit unfinished applications to be saved.
 Provide polite feedback to request missing required
information.

March 30, 2019 Prof. Abdelaziz Khamis 34

Presenting Information (Continued)
 Screen Elements (Continued)
Lists
 Present a collection of related items in a list. (Figure 3.58)
 Provide a heading for each list. (Figure 3.59)
 Order lists in a meaningful way.
 For list items of equal value, arrange alphabetically.
 If a list contains important or frequently used items, put them at
the top of the list. (Figure 3.60)
 For items possessing a particular order, identify each with a
number, beginning with 1.
 Format for easy identification and scanning.
 A list should be easily identifiable as a list. Techniques include its
vertical structure, and a surrounding border . (Figure 3.61)
 Scanning is aided by use of fonts of the proper type, size, and
styles, and good character-background contrast.

March 30, 2019 Prof. Abdelaziz Khamis 35

The Web – Web sites and Web pages
 Dimensions of a Web Site
Web sites generally vary in three dimensions:
 Structure
Issues include how the information on a Web site is organized, the
number of pages it contains, and the length of its pages.
 Navigation
Issues include the methods used and the support the site provides
to aid navigation.
 Information content
Issues are what information is included, how much information is
included, and how the information is presented.

March 30, 2019 Prof. Abdelaziz Khamis 36

The Web – Web sites and Web pages
(Continued)
 Web User Interaction Styles
 Browsing
Browsing is similar to shopping. A person walks into a store
(Web site), looks around (the page), gets a feel for the place
(presentation style, layout, and so on), looks for signs of
interest (headings, summaries, and so on), wanders at whim
(follows a link), and then decides to stay for a while, or leave.
The person may leave empty- handed or have picked up
various products (scattered bits and pieces of information)
 Information finding
Information gathering involves seeking specific answers to
specific questions or needs.

March 30, 2019 Prof. Abdelaziz Khamis 37

The Web – Web sites and Web pages
(Continued)
 The Web Experience

The following general factors are important in creating for the

user an efficient, effective and pleasant experience.
Expectations
 Meet user expectations concerning content, organization and navigation

Tasks
 Reflect the user's capabilities and limitations

 Standardize task sequences

 Provide ease of use

Visual Appearance
 Provide a visual appearance that is attractive and consistent

Information Content
 Assure content meets all user needs

 Assure the most important information is positioned prominently and visible

without scrolling
 Assure content is updated frequently

March 30, 2019 Prof. Abdelaziz Khamis 38

Technological Considerations in Interface Design
 Interface design is constrained by the characteristics of the
hardware being used and the interface’s controlling software.
Graphical Systems
 Screen design must be compatible with the capabilities of the
system, including:
 System power
 Screen size
 Screen resolution
 Display colors
 Other display features (Font sizes and styles, blinking, etc)
 Screen design must be compatible with the capabilities of the:
 System platform being used (Apple Macintosh, Microsoft Windows)
 Development and implementation tools being used (Available
tools include toolkits <libraries of controls>, interface builders <graphical
tools to create controls>, and user interface management systems
<examples include Visual Basic>)

March 30, 2019 Prof. Abdelaziz Khamis 39

Technological Considerations in Interface Design
(Continued)
Web Systems
 The designer must understand the current level of Web
technology, to utilize the Web’s richest features.
 Design for system configuration used by most users.
 The following sections address technological considerations
affecting Web site design:
 Compatibility.

 Design for the browsers used by most users.

 Operating Systems.
 Design for popular operating systems.
 Connection Speed.
 Design for the most commonly used connection speeds.

March 30, 2019 Prof. Abdelaziz Khamis 40

Technological Considerations in Interface Design
(Continued)
 Monitor Size and Resolution.
 Design within the boundaries of an image-safe area for all
browsers
 Design for commonly used screen resolutions
 Fonts.
 Use fonts that can be displayed on a variety of browsers
 Color.
 Use colors that succeed on a variety of browsers and platforms.
 Versions.
 Create multiple versions that support multiple browsers
 Always provide a text-only version

March 30, 2019 Prof. Abdelaziz Khamis 41

Screens Examples & Assignment
 Examples of screens:
Pages 293 through 306 contain 7 examples of poor and
proper design.
 Redesigned version of these poorly designed screens will be
presented later in the course.
 The properly designed screens will be presented as models
of good design.
 Assignment:
 Using the principles of good screen design outlined in the
lecture notes, analyze one windows-based user interface
(preferably one you use at your workplace if you are currently
employed). Describe how the interface you have chosen
meets and does not meet the design principles. Provide a
screen shot of the windows-based interface.
March 30, 2019 Prof. Abdelaziz Khamis 42