Lesson 3 Screen Design and Layout

1
Lesson 3Screen Design and Layout
2
Agenda

• Screen Layout
• Use of Shapes and Graphics
• Special Screen Features
• Use of Color

3
Layout of a Screen

• Screen elements should be organized logically and
  consistently
• Certain elements, such as toolbars, headers,
  footers and message areas, should always be in
  the same location
• The user should be able to identify screen
  elements (data, field captions, controls, etc.)
  by their visual style rather than having to read
  the text
• The upper left-hand corner of the window should
  be the standard starting-point.

4
Layout of a Screen

• Elements in the Window should be laid out in a
  visually pleasing manner
• Balance equal weight from side to side and top
  to bottom

5
Layout of a Screen

• Elements in the Window should be laid out in a
  visually pleasing manner
• Balance equal weight from side to side and top
  to bottom

VS
6
Layout of a Screen

• Consistent alignment and spacing between elements

7
Layout of a Screen

• Consistent alignment and spacing between elements

VS
8
Layout of a Screen

• Follow conventional orders or arrangements
• Keep it simple--utilize a limited number of
  shapes, colors and display techniques

9
Layout of a Screen

• Follow conventional orders or arrangements
• Keep it simple--utilize a limited number of
  shapes, colors and display techniques

VS
10
Layout of a Screen

• Elements which are related should be visually
  grouped together

11
Layout of a Screen

• Elements which are related should be visually
  grouped together

VS
12
Layout of a Screen

• Keep text fonts consistent and readable

13
Layout of a Screen

• Keep text fonts consistent and readable

Good example--easily readable
VS
Bad example--hard to read
14
Layout of a Screen, contd.

• Differentiate captions from field data by using
  contrasting features and consistent physical
  relationships
• Single data fields
• Columnar-oriented data fields

Last Name
First Name
Animals
15
Use of Shapes and Graphics

• Different shapes and graphics can be used to add
  variety and interest to screens
• These can either be created within the
  application or provided through clip art
• Be careful not to make
• screens so busy as to
• be confusing.
  
  
  
  
  

16
Special Screen Features

• Special features include those screen elements
  which allow the user to interact with the
  application.
• Usually there is some form of identification of
  the control feature such as a label.
• Because there are such a large number of these
  available, the designer must choose the right one
  for the right job.

17
Special Features, contd.

• The following pages outline the special control
  features available in most software packages.
• It is important to choose the correct control for
  each task as it can impact how well the
  application works, both in performance and user
  satisfaction.

18
Check Boxes

• Consists of a box and text, the box indicating a
  switch and is either on or off
• Check boxes can be used together to indicate
  non-exclusive choices

X
Student
Dormitory
Meal Plan
19
Check Boxes, contd.

• All choices should be spelled-out and meaningful
• Labels should used mixed-case letters
• Labels should be located to the right of the box

20
Check Boxes, contd.

• If multiple boxes are used, they should appear in
  a single row or column
• Columnar orientation is preferred
• Provide keyboard equivalents
• Selecting a check box, or turning it on, should
  cause the box to be filled in with an X

21
Radio Groups

• Displays all possible, mutually exclusive,
  choices
• Used for a small group of choices
• Advantages include
• User does not have to type in a response
• User can compare possible options
• Disadvantages are
• Take up greater screen space
• Limited number of choices

22
Radio Groups, contd.

• Several different styles, circular being the most
  common
• Arrangement can be either horizontal or vertical.
• Columnar or vertical is preferred.

23
Radio Groups, contd.

• Use a minimum of two choices, a maximum of eight
• Descriptors should be fully spelled out and
  meaningful
• Display in mixed-case letters
• Locate to the right of the appropriate button
• Buttons should be ordered according to the
  frequency of use

24
Radio Groups, contd.

• Assign keyboard equivalents
• Make the target area as large as possible
• Highlight which choice the cursor is resting on
  clearly
• Mark the selected button clearly, usually with a
  small dot

25
Buttons

• A rectangular shape which has a label describing
  its function.
• Button configurations include
• The label can either be textual or symbolic.

Yes
Yes
Yes
Yes
26
Buttons, contd.

• Generally used for actions specific to a window
  which are frequently executed.
• A single button style should be maintained
  throughout the application.
• Use standard labels wherever possible
• Make labels meaningful
• Use single-word labels when possible
• Use mixed-case letters

27
Buttons, contd.

• Buttons should be large enough to accommodate the
  largest label
• The order of buttons should be according to the
  frequency of use
• Assign a keyboard equivalent to each button
• Use as few buttons in a group as possible

28
Buttons, contd.

• Buttons should be placed in a single row or
  column
• The order of buttons should be according to the
  frequency of use
• Grey out unavailable choices
• Assign a keyboard equivalent to each button

29
Use of Color

• Human response to color is a major factor in
  visual design.
• Response is primarily based on a physical
  response to the stimulus of color.
• For example, a physical adjustment must occur for
  a person to look at a different primary color.
• If this occurs frequently, it can cause eye
  fatigue.

30
Use of Color, contd.

• Effects of these responses include
• Cool colors appear to recede and warm ones seem
  to move toward us.
• Brightly colored objects are perceived as being
  closer, while pale or dull objects seem further
  away.
• Use of many colors on a screen can cause
  confusion as the eye tries to adjust to the
  different stimuli
• Older people tend to have difficulty seeing less
  bright colors.

31
Use of Color, contd.

• Colors also have accepted cultural meanings which
  should be utilized
• Red usually implies danger or a requirement to
  stop
• Green indicates safety and a go situation.
• Blue means peace, calm and neutrality
• Warm colors indicate a need for a response
  whereas cool colors imply background information.

32
Colors and Composition

• Screen design should be done in monochrome first
• Attention can be focused on using other display
  techniques to implement design goals
• Screens will then be useable in situations where
  color may not be available, such as for
  color-blind people, monochrome terminals, etc.

33
Colors, contd.

• Use colors conservatively
• Use of too many colors tends to make the screen
  look busy and confusing
• Color should only be used where no other means of
  identification are available
• Use colors that are harmonious and work well
  together.
• Use bright colors to draw attention to an
  important object.
• Contrasting colors can emphasize separation

34
The Color Wheel

• This is a chart of the primary and secondary
  colors and how they relate to each other

Red
Orange
Purple
Yellow
Blue
Green
35
The Color Wheel, contd.

• The left side of the wheel is composed of the
  cooler colors and the right has the warm colors.
• Colors that are opposite each other on the wheel
  are said to be complementary
• The primary colors are red, blue and yellow.
• The remaining colors are mixtures of the
  primaries, i.E. Red blue purple.

36
The Color Wheel, contd.

• One recommendation for harmonious use of colors
  is to use split components one color plus two
  colors on either side of the complement.
• Blue, with the colors on either
• side of its complement orange,
• red and yellow, for example.

Red
Yellow
Blue
37
The Color Wheel

• Another variant in color is saturation or how
  bright a color is
• These same bright primary colors could be used in
  a less saturated or lower intensity.
• Most GUI systems allow for
• these variations in saturation.
• Use the stronger, brighter colors
• for emphasis

Red
Yellow
Blue
38
Background Colors

• A background color should pull the various
  elements of the screen together.
• It should not compete with the foreground colors.
• Use cool and/or dark colors which seem to recede.
• Blue is particularly good because of the eyes
  lack of sensitivity to it.
• Studies indicate the order of preference as blue,
  black, grey, brown, red, green and purple.

39
The Color Palette

• Choose a default set of colors as part of the
  standard for all screens in the application.
• Indicate which are for backgrounds and which for
  foregrounds.
• Be consistent with color use.
• For alphanumeric and graphic screens use colors
  that have good visibility and contrast.

40
The Color Palette, contd.

• For statistical graphics screens, use colors
  which will emphasize the data display area.
• Data should be displayed using bright colors
• Backgrounds should be neutral
• Status information should have its own color
  codes.

41
Summary

• Screen elements should be organized in a logical
  and consistent manner
• Different shapes and graphics can be used to add
  visual interest
• Special screen features, such as check boxes,
  radio groups and buttons, can make an application
  more user-friendly

42
Summary, contd.

• Knowledge and use of color theory can enhance
  screen design
• Human factors
• Cultural perceptions
• Color should be used sparingly to perform
  specific functions