GUI Design Basics

1
GUI Design Basics

• A user interface is well designed when the
  program behaves exactly how the user thought it
  would
• Joel Spolksy
• User Interface Design for Programmers

2
Where Do You Start?

• Focus on the users and their tasks...not the
  technology
• Consider function first
• Don't sketch a what a window looks like
• If you don't stand back and think about what the
  function of the GUI is first
• Product will lack important functionality
• Poorly integrated/inconsistent displays
• Will contain many components that are irrelevant
  to the users
• May seem ad-hoc or arbitrary
• A GUI has more than visual depth...but you won't
  get that depth if you don't consider its function
  or role.

3
GUI Function

• To consider function
• What concepts will the product or service expose
  to the user
• What data will users control, create or
  manipulate with the product
• What options, choices, settings or controls will
  the product present to the user.
• Develop a conceptual model (objects/actions
  analysis)
• Develop a lexicon (common terms within the
  product)
• If your program model is non-trivial, its
  probably not the same as the user model.
• Users will assume the simplest model possible.

4
Conform to the user

• Make sure to conform to the users view of the
  task
• Strive for Naturalness
• Don't make user perfom "unnatural" acts
• Don't impose arbitrary restrictions
• e.g. Limiting an entry to 16 characters,
  requiring a field (fax number) to be filled in.
• Use the users vocabulary
• Keep program internals hidden
• Don't expose implementation details/restrictions
  to the user
• Try to balance power with complexity
• Don't complicate the users task
• Common tasks should be easy
• The product shouldn't pose new problems to the
  user
• e.g. The classic "error has occurred, view
  debug..."
• Promote Learning
• Help the user learn.
• Consistency is a must!
• Don't assume the user is as skilled as yourself

5
Consistency

• Product should promote the development of habits
• Users want to fall into habits ASAP, that means
  they can concentrate on the task, not the
  software
• Inconsistency breaks concentration
• Examples
• In Windows...Drag an icon between folders vs.
  disks. Why is one a copy and the other a
  shortcut?
• In Windows...Multiple ways to get to the same
  program
• Windows 2000 To bring up device manager
• Start-Settings-Control Panel then
  Administrative Tools then Computer Management
  then Device Manager tree node
• Start-Settings-Control Panel then System then
  the "Device Manager" Button
• This confuses rather than aids learning...which
  way do you do it.

6
Deliver Information, not just Data

• Data is not necessarily information
• Design displays carefully
• Take into account several human factors
• The screen belongs to the user!
• Let the user move things
• Mouse (don't warp)
• Windows
• GUIs are based on graphical manipulation of the
  data by the user.
• If software intervenes, users become disoriented
  and annoyed

7
Lastly...

• Make the system responsive
• Test the system with potential users
• Before development
• During development
• After development

8
Importance of Good Screen Design

• Graphical User Interface - GUI
• Amount of programming code devoted to user
  interface now exceeds 50 percent
• Unfortunately, some design is good, some is still
  bad
• Why are GUIs bad
• We dont care?
• We dont possess common sense
• We dont have the time?
• We still dont know what really makes good
  design?
• Studies have shown that proper formatting of
  information on screens has a significant positive
  effect on performance

9
Definition of a GUI

• Collection of techniques and mechanisms to
  interact with something
• Primary interaction mechanism is a pointing
  device of some kind.
• Collection of screen elements referred to as
  objects
• Always visible to the user
• Used to perform tasks
• Interacted with as entities independent of all
  other objects
• People perform operations, called actions, on
  objects.
• Accessing and modifying by pointing selecting and
  manipulating

10
Advantages of GUIs

• Symbols recognized faster than text
• Faster learning of system
• Easier remembering
• More natural
• Exploits Visual/Spatial cues
• Fosters More Concrete Thinking
• Provides Context
• Fewer Errors
• Increased Feeling of Control
• Immediate Feedback
• Less Anxiety Concerning Use
• May consume Less Space
• Low Typing Requirements

11
Disadvantage of GUIs

• Greater Design Complexity
• Learning Still Necessary (Behavior not obvious)
• Lack of Experimentally Derived Design Guidelines
• Inconsistencies between platforms
• Not Always Familiar
• Human Comprehension Limitations
• Window Manipulation Requirements
• No Standard Icons
• Few Tested Icons
• Inefficient for Touch Typists/Expert Users
• Not Always the preferred style of interaction
• Increased Chances of Clutter and Confusion
• May Consume More Screen Space
• Increased demand on Hardware

12
Important Human Characteristics in Design

• Perception
• Influenced, in part, by experience
• Influenced by expectancies, sometimes we perceive
  not what is there but what we expect to be there
• Noise can confuse
• Memory
• Short term
• 7/- 2 chunks of information
• Lasts 15 to 30 seconds
• Visual acuity
• Relative visual acuity is approximately halved at
  a distance of 2.5 degrees from the point of eye
  fixation.
• Five degree diameter circle has been recommended
  as the maximum length for a displayed word.

13
More on Design

• Foveal and peripheral Vision
• Foveal used to directly focus on something
• Peripheral senses anything in the area
  surrounding
• In competitive nature, peripheral competes with
  foveal it is, in a sense, visual noise
• Studies have shown that dynamic or moving
  surroundings will degrade performance

14
More on Design

• Information Processing
• One level is sequential, used for serial
  processing (e.g. reading)
• Lower level processes familiar information
  rapidly, in parallel with higher level.
• Repetition and learning shifts control from
  higher to lower level
• If a screen is jammed with information and is
  cluttered, it loses its uniqueness and can only
  be identified through the more time-consuming and
  thought interrupting, reading process
• Mental Models
• As a result of our experiences, we develop mental
  models of things.
• Enable a person to predict the necessary actions
  to do things even if unfamiliar

15
Design Continued

• Skill
• Novice Users
• Depend on system features that assist recognition
  memory menus, prompting information and
  instructional and help screens
• Need restricted vocabularies, simple tasks, small
  numbers of possibilities and very informative
  feedback
• Possess fragmented conceptual model of a system
• They pay more attention to low-level details, and
  surface features of the system
• Experts
• Rely upon free recall
• Expect rapid performance
• Need less informative feedback
• Seek efficiency by bypassing novice memory aids,
  reducing keystrokes, chunking and summarizing
  information, and introducing new vocabularies

16
Design Standards

• Valuable to users
• Faster performance
• Fewer errors
• Reduced training time
• Better system utilization
• Better satisfaction
• Better system acceptance
• Valuable to designers
• Increased visibility to HCI
• Simplified design
• More programming/design aids
• More redundant effort
• Reduced training

17
Screen Design

• How to distract the user
• Visual inconsistency in screen presentation
• Lac of restraint in the use of design features
  and elements
• Overuse of 3D
• Overuse of bright colors
• Poorly designed icons
• Bad typography
• Metaphors that are either overbearing or too cute
• What the user wants
• Control of their computer!
• Orderly, clean clutter-free
• Obvious indication of what is being shown and
  what should be done
• Expected information located where it should be
• A clear indication of what relates to what
  (options, captions, data)
• Plain, simple English
• Clear indication of what action can make a
  permanent change to system or data

18
Screen Meaning and Purpose

• Each Screen Element
• every control
• every icon
• each color
• all emphasis
• the layout
• animation
• each message
• all forms of feedback
• MUST!
• Have meaning to screen users
• serve a purpose in performing tasks.

19
Application Layout

• Even before designing the layout of your
  application, think about how your program will
  live on the users computer
• Try not to be intrusive
• Dont insist upon placing desktop icons, let the
  user choose
• Avoid placing your program in the top part of the
  Start Menu
• Avoid start-up dialog windows

20
Screen layout

• Provide an obvious starting point in the screens
  upper-left corner
• Eyes then tend to move through the display in a
  clockwise direction
• Strive for a Visually pleasing composition
• Balance
• Provide and equal weight of screen elements, left
  and right, top and bottom
• Symmetry
• Create symmetry by replicating elements left and
  right of the screen center line
• Regularity
• Establish standard and consistently spaced
  horizontal and vertical alignment points
• Predictability
• Be consistent and follow conventional orders or
  arrangements

21
Screen layout continued

• Sequentially
• Arrange elements to guide the eye through the
  screen in an obvious, logical, rhythmic, and
  efficient manner.
• The eye tends to be attracted to
• A brighter element over a darker one
• Isolated elements before elements in a group
• graphics before text
• Color before black and white
• Highly saturated colors before those less
  saturated
• Dark areas before light areas
• Big elements before small
• Unusual shapes before usual
• Big objects before little objects
• Economy
• Use few styles, display techniques, and colors as
  possible
• 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

22
More on Screen Layout

• Proportion
• Create windows and groupings of data or text with
  aesthetically pleasing proportions
• Square(11)
• Square root of two(11.414)
• When divided equally in two along its length the
  two smaller shapes are similar in ratio
• Often used in paper and book design
• Golden Rectangle(11.618)
• An old (5th Century B.C.) proportion.
• Square root of three (11.732)
• Double Square(12)
• Goal is to present uniform aspects across an
  application, when practical
• Simplicity
• Optimize the number of elements on a screen,
  within limits of clarity
• Minimize the alignment points, especially
  horizontal or columnar

23
International Standard Paper Sizes

• Standard paper sizes like ISO A4 are used
  everywhere but US, Canada, and parts of Mexico
• In the ISO paper size system, the height-to-width
  ration of all pages is the square root of two
  (1.4142 1).
• If you put two such pages next to each other, or
  cut one parallel to it shorter side into two
  equal pieces, then the resulting page will have
  again the same width/height ratio

A4
A4
A3
?
?
1
1
2
24
ISO Paper Sizes

• All sizes use 1 1.4142 ration
• A Series
• A0 has an area of one square meter
• A1 is ½ of A0
• A2 is ½ of A1
• A3 is ½ of A2
• A4 is ½ of A3
• B and C series have same size ratio, their sizes
  are the geometric mean between those of the An
  and the next larger A(n-1) format

25
Measuring Simplicity

• Draw a rectangle around each element on a screen,
  including captions, controls, headings, data
  title, and so on.
• Count the number of elements and horizontal
  alignment points ( the number of columns in which
  a field, inscribed by a rectangle starts)
• Count the number of elements and vertical
  alignment points (the number of rows in which an
  element, inscribed by a rectangle starts)
• First diagram
• 22 elements
• 6 horizontal alignment points
• 20 vertical alignment points
• 48 complexity
• Second Diagram
• 18 elements
• 7 horizontal alignment points
• 8 vertical alignment points
• 33 complexity

26
Measuring Simplicity - Example 1
12 elements 5 column alignment points 6
horizontal alignment points Complexity of 23
27
Measuring Simplicity - Example 2
12 elements 2 column alignment points 7
horizontal alignment points Complexity of 21
28
Grouping of elements

• Provide functional groupings of associated
  elements
• Create spatial groupings as closely as possible
  to five degrees of visual angle (1.67 inches in
  diameter or about six to seven lines of text, 12
  to 14 characters in width)
• Evenly space controls within a grouping, allowing
  1/8 to 1/4 inch between inch
• Visual reinforce groupings
• Provide space between groups
• Provide borders around groups
• Lines
• Backgrounds

29
More on Screen Design

• Amount of information
• Too little is inefficient, too much is confusing
• Present all information necessary for performing
  an action or making a decision on one screen.
  People should not have to remember things from
  one screen to the next
• Limit non-data density of screen to 25-30
• Meaningful Ordering
• Provide an ordering that
• is logical and sequential
• is rhythmic, guiding a persons eye through the
  display
• Remember the eye tends to move sequentially
• From dark to light
• From big to little
• From unusual to common shapes
• From saturated to unsaturated colors
• Encourages natural movement sequences
• minimizes cursor and eye movement distances.

30
More on Screen Design

• Meaningful Ordering continued
• Locate the most important and most frequently
  used elements or controls to the top left
• Maintain a top-to-bottom, left-to-right flow
• Distinctiveness
• Individual screen controls, and groups of
  controls must be perceptually distinct.
• Screen controls, field and group borders, and
  buttons should not touch a window border or each
  other
• A button label should not touch its border
• 3D appearance
• Assume light source at upper left
• Display command buttons flat or raised above the
  screen plane
• Display screen-based controls on or etched or
  lowered below the screen plane
• Do not overdo!

31
More Screen Design

• Fonts
• Use mixed case for
• Control Captions
• Data
• Control choice descriptions
• Text
• Messages
• Instructional information
• Menu descriptions
• Button descriptions
• May use all-caps for
• Title
• Section headings
• Subsection headings
• Studies show that mixed case is read
  significantly faster than all-caps and is also
  more understood.

32
More Screen Design

• Typography
• Typeface - use simple readable fonts such as Sans
  Serif (Helvetica) or Times Roman
• Use no more than two families
• Separate purpose for each family
• Allow one family to dominate
• Use no more than two weights
• Use no more than three sizes
• Never change a selected type size for a screen
  component to squeeze something in to make it fit.
• Default Fonts
• Win 98 and NT is MS Sans Serif 8 point
• Win 2000 is Tahoma 8 point for interface
  elements, default is still Sans Serif for
  compatibility reasons
• Never make you design so brittle that a change of
  font corrupts your layouts

33
Basics of Writing Interface Text

• Abbreviations Avoid using them
• Access(Mnemonic) keys always define them
• Except for OK and Cancel which should use ENTER
  and ESC keys
• Capitalization
• Book Title
• Capitalize first and last word
• Capitalize everything else except
• Articles (a, an, the..)
• Coordinate conjunctions(and, but, for, not, or,
  so, yet)
• Prepositions of four letters or fewer(at, for
  with, into)
• Use for
• Column headings
• Command button labels
• Icon labels
• Menu names and menu commands
• Palette titles
• Tab Titles
• Title bar text
• Toolbars and Tooltips

34
More on Writing Interface Text

• Capitalization
• Sentence style
• Check box labels
• File names
• Group box labels
• List box entries
• Messages
• Radio Buttons
• Status bar text
• Text Box Labels
• Contractions
• Good to use, except dont form a contraction from
  a subject and its verb
• Ellipses
• Indicates other actions are required
• Punctuation
• In lists, End each entry with ending punctuation
  if all entries are complete sentences or complete
  the introductory phrase.

35
More on Writing Interface Text

• Brevity
• Less is better!
• Sentence construction
• Write short simple sentences.
• Use lists or tables to break up text
• Use the present tense
• Write affirmative statements
• Correct To restart your computer, click
  restart
• Incorrect Do not use CTRLALTDEL to restart
  your computer
• Describe sequences of actions in order.
• Use active voice
• Correct Windows cannot find the configuration
  file
• Incorrect The configuration file cannot be
  found

36
More Screen Design

• Manual Tab vs. Auto Skip
• Auto Skip is a feature that causes a cursor to
  automatically move to the beginning of the next
  text entry field once the previous field is
  completely filled.
• This supposedly minimizes key strokes
• Auto skip instead tends to disrupt flow

37
More screen design

• Avoid Ornamentation
• Eye is never absolutely still, it produces
  continuous slight tremors that aid visual
  activity.
• Small patterns lines, boxes or dots, when viewed,
  may shimmer or vibrate.
• Simple coding schemes like shades of colors are
  more effective
• When graphic is overwhelmed by decoration, it is
  very ineffective.
• Excessive ornamentation can take many forms
• Extensive use of color
• Multidimensional graphics
• Pointless use of vibrating patterns
• Forcing data into graphics when a table would be
  better.
• This may be a symptom of See what I can do with
  my computer
• The best graphic display is the simplest graphic
  display

38
Types of windows

• Use tiled windows for
• Single-task activities
• Tasks requiring little window manipulation
• Novice or inexperienced users
• Use overlapping windows for
• Switching between tasks
• Tasks requiring a greater amount of window
  manipulation
• Expert or experienced users
• Non-predictable display contents

39
Color

• Effective use of color in screen design has taken
  great steps forward in the last two decades
• Color descriptions
• HSV
• Hue Spectral wavelength
• Chroma or Saturation Purity of a color from gray
  to vivid
• Value or Intensity Relative lightness or
  darkness
• RGB
• Amount of Red, Green or Blue light
• Color can be used
• Formatting Aid
• Visual codes
• Attention getting
• When used improperly, color may impair
  performance by distracting the viewer and
  interfering with the handling of information

40
More on Color

• Some studies found that acuity, recognition,
  legibility and performance were not influenced by
  color.
• Common color meanings (US)
• Red - Stop, fire, hot, danger, failure
• Yellow - Caution, slow, test
• Green - go, OK, clear, vegetation, safety
• Blue - Cold, water, calm, sky, neutrality
• Gray White - neutrality

41
Problems with Color

• From site http//www.designmatrix.com/pl/cyberpl/c
  ftcb.html
• Using colors that are confused by the eyes of
  colorblind (color-deficient or dyschromatopic)
  people will exclude a significant percentage of
  the population.
• Another disadvantage is
• 8 of males experience some sort of color
  blindness
• 0.5 of females experience some sort of color
  blindness
• In particular, since the majority of
  color-deficient people(6 of the 8) are
  red-green deficient, we can pay special attention
  to red-green confusion.
• Consequently, where color differentiation is
  critical the overall rule of thumb is to use
  colors that contrast in value or intensity. This
  will even work for monochomatics, who see the
  world in shades of grey from black to white.

42
Guidelines for Color design

• Generally this means using colors that contrast
  in value, intensity, luminance or tint
  (light/dark), and saturation, chroma or shade
  (vividness), and employing redundant visual clues
  such as texture and shape, rather than relying on
  hue alone.
• As most dychromatopes are red-green deficient,
  especially avoid palettes that only vary in these
  hues, such as dark or light green, red and brown.

43
How to Design for Color

• Step 1 Design for monochrome first!
• Use colors conservatively and as a final design
  aid
• Select no more than four or five colors, widely
  spaced on the color spectrum
• Choose harmonious colors
• One color plus two colors on either side of its
  complement
• Three colors in equidistant points around the
  color circle
• Location
• In the center of the visual field, use green or
  red, The eye is most sensitive to these in the
  center of the field
• In peripheral, use blue, yellow, black and white

44
Hue and Lightness

• Colors appearing adjacent to one another should
  differ in hue and lightness for a sharp edge and
  maximum differentiation.
• Adjacent colors differing only in their blue
  component should not be used.

45
Contrast issues

• Contrast also needs to be considered when
  designing interfaces.
• The amount of light that passes through the eye
  of a sixty year-old is less than that of that
  passing through the eye of a twenty year-old.

46
Contrasting Hues

• Avoid contrasting hues from adjacent parts of the
  hue circle, especially if the colors do not
  contrast sharply in lightness.

47
Foregrounds and Backgrounds

• Foreground colors
• Use warmer, more active colors
• use colors that posses the same saturation and
  lightness
• For text or data, use desaturated or spectrum
  center colors
• White, yellow, green
• Saturated colors excessively stimulate the eye
• Simultaneous use of highlighting and lowlighting
  should be avoided
• Background colors
• Use cool, dark colors
• Blue, black
• Blue is good due to the eyes insensitivity to it
• Use colors at the extreme end of the color
  spectrum
• Red, magenta
• Note that these are opposite to what the defaults
  are on most windowing systems.

48
Color Text

• When switching text from black to color
• Double the width of lines
• Use bold or larger type
• If originally 8-12 points increase by 1-2
• If 12-24 points increase by 2-4
• Too light of text will effectively disappear

49
Providing Feedback

• Effective messages, feedback, and user guidance
  are also necessary elements of good design
• Words
• Do not use jargon, words, or terms
• Unique to, or with different meanings from, the
  computer profession
• Use
• Short familiar words
• Avoid contractions, short forms and suffixes
• Positive terms (avoid negatives)
• A single line of text. It is more readable than
  multi-line
• Messages
• Four types, (all supported by JOptionPane)
• Status/Notification/Informational
• Warning
• Action/Critical
• Question

50
Message Styles

• Sentences must be
• Brief, simple and clear
• Directly and immediately usable
• Affirmative
• Complete entry before returning to menu is
  better than Do not return to menu before
  completing entry
• Non-authoritarian
• Ready for next command is better than Enter
  next command
• Non-threatening
• Non-anthropomorphic
• Dont have the computer talk like a person
• Non-patronizing
• In the temporal sequence of events
• Structured so that the main topic is near the
  beginning
• Cautious in the use of humor
• Nonpunishing

51
Response time

• Research indicates that for creative tasks,
  response times in the range of 0.4 to 0.9 seconds
  can yield dramatic increases in productivity.
• System responsiveness should match the speed and
  flow of human thought processes.
• If continuity of thinking is required and
  information must be remembered throughout several
  responses, response time should be less than two
  seconds
• If human task closures exist, high levels of
  concentration are not necessary and moderate
  short-term memory requirements are imposed,
  response time should be two to four seconds
• If major task closures exist high levels of
  concentration are not necessary and moderate
  short-term memory requirements are imposed,
  response time should be four to fifteen seconds
• When the user is free to do other things and
  return when convenient, response time can be
  greater than 15 seconds
• Constant delays are preferable to variable delays

52
Wizards

• Use to assist a user by automating a task through
  a presented dialog
• Useful for complex or infrequently occurring
  tasks
• Not suited to teaching how to do something
• Not a tutorial, Wizards operate on real data

53
Wizard Design Guidelines

• Provide a greater number of simple pages with
  fewer choices, rather than a smaller number of
  more complex pages with too many options or too
  much text
• Include on the first page
• A graphic on the left side to establish a
  reference point or theme
• A welcoming paragraph on the right side to
  explain what the wizard does
• Include on subsequent pages
• A graphic for consistency
• Instructional text
• Controls for user input
• Make it visually clear the graphic is not
  interactive
• Do not require the user to leave a wizard to
  complete a task
• Include a Back, Next, Cancel and Finish button

54
International considerations

• Java uses UTF, so it supports internationalization
  
• Only a few classes may have problems with
  alternate text
• When to do it
• When the market includes few or no English
  speakers
• When translation is required, by law or by custom
• When the widest possible market is desired
• When not to do it
• When the audience already reads English
• When the cost of retrofitting or rewriting
  software is prohibitive

55
International words and text

• Use very simple English
• Develop a restricted vocabulary
• Restrict the sentence structure
  usingnoun-verb-object
• Avoid
• Acronyms and abbreviations
• Stringing three nouns together
• Local or computer jargon
• An over-friendly writing style
• Culturally specific examples
• Adhere to local language idioms and cultural
  contexts
• Keep the original term for words that do not
  translate
• Allow additional screen space for translation
• Modify mnemonics for keyboard access
• Adhere to local formats for date, time, money,
  units, etc

56
Screen space considerations

• Translation of the word Control
• Besturingselement (Dutch)
• Olvadaci prvek (Czech)
• Ohjausobjekti (Finnish)
• Steuerelement (German)
• National language Technical Center

57
International Images and Symbols

• Adhere to local cultural and social norms
• Use internationally-accepted symbols
• Develop generic images
• Be particularly careful with
• Religious symbols (crosses and stars)
• The human body
• Women
• Hand gestures
• The cross and check for check boxes
• Review proposed graphical images early in the
  design cycle
• Color can have a huge difference of meaning
• Yellow in Japan represents Grace and Nobility
• Red in China is associated with happiness
• Green in France with criminality

58
Selecting the Proper type of Screen Controls

• Comparison of GUI controls
• A study was done involving experienced Microsoft
  Windows users, with no instructions given on how
  to carry out some reordering tasks. The
  experience of the participants being relied on.
• Two fastest methods were
• Radio Buttons
• One Entry Field
• Direct manipulation (Drag and Drop) fared poorly
• Follow-up study yielded some interesting results
• Asked a group of programmers to predict the study
  results
• Prediction was that Drag and Drop would be
  fastest and preferred method
• Radio buttons mid-way in performance
• Correlation between predictions and actual
  re-ordering speed was .07
• Correlation between predictions and actual
  preferences was .31
• Study concluded that control selection decisions
  made on convention and intuition may not yield
  the best results

59
Control Recommendations

• Mutually Exclusive choice Controls
• For sets of 5, 12 and 30 items, radio buttons
  were
• Significantly faster than the other mutually
  exclusive controls
• Most accurate
• Most preferred
• Non-exclusive choice Controls
• For sets of 5, 12 and 30 items, check boxes were
• Significantly faster than the other mutually
  exclusive controls
• Most accurate
• Most preferred
• Combination Selection and Entry Controls
• Combo Boxes vs. Radio Buttons with
  other/TextField option
• Radio buttons were
• Significantly faster than the other mutually
  exclusive controls
• Most accurate
• Most preferred

60
More Control Recommendations

• Controls for Selecting a Value Within a range.
  Setting range values included indicating a time,
  a percentage or the transmission frequency of a
  radio station
• Spin Button most accurate
• Text entry fastest
• Slider was last
• General conclusions
• Making all options always visible will enhance
  performance
• Requiring additional actions to make further
  options visible slows performance
• For longer lists, scrolling tends to degrade
  performance more than the action associated with
  retrieving a hidden list

61
Usability Testing

• Dont assume that this needs to be complex!
• Typically, quick iterative tests with a small,
  well-targeted sample and six to ten participants
  can identify most design problems
• Tests
• Design around tasks, not features
• Try to find a quiet location, minimize
  distractions
• Dont interrupt tests
• Ask participants to think out loud
• Record results
• Audio
• Video

62
User Assistance
63
Types of Help

• Contextual
• Context-sensitive
• ToolTips
• Status Bar
• Help command buttons
• Whats This?
• Windows standard help configuration
• Contextual help
• May be initiated by menu, toolbar or shortcut
• Cursor changes to pointer and question mark
• Escaped by using the ESC key, selecting Whats
  This? again
• Design your application so that the system is set
  to a temporary mode when the user chooses the
  Whats This? command
• F1 key is shortcut, calls help on component that
  has focus

64
Text Guidelines

• Begin description with a verb
• For command buttons you can use an imperative
  form
• Use words that explain the function
• Use sentence style capitalization
• Use system designated Help font (if available)
• You should provide help for
• All editable elements or labels for editable
  elements
• Status bar items that do not have text labels
• All toolbar items
• All menu items

65
Showing data in Graphs

• Material from Edward Tuftes The Visual Display
  of Quantitative Information
• Graphics reveal data.
• If done correctly, graphics can be more precise
  and revealing than conventional statistical
  computations.
• Remember, statistical graphics, just like
  statistical calculations, are only as good as
  what goes into them

66
History of Data maps

• First geographic map was in the 11th century in
  China, Europe didnt start have anything
  comparable until mid 1500s
• It was not until 17th century that the first Data
  maps appeared
• 1786 had the first economic time-series chart
• One of the most famous early data maps was Dr.
  John Snows, who plotted the location of deaths
  from cholera in central London in 1854.
• Map showed that the Cholera epidemic which had
  taken more than 500 lives, was based on proximity
  to the Broad Street water pump.

67
Data map of Broad Street
E. W. Gilbert, Pioneer Maps of Health and
Disease in England, Geographical Journal, 124
(1958), 172-183
68
Graphical Excellence

• Excellence in statistical graphics consists of
  complex ideas communicated with clarity,
  precision, and efficiency.
• Graphical displays should
• Show the data
• Induce the viewer to think about the substance
  rather than about the methodology
• Avoid distorting what the data have to say
• Present many numbers in a small space
• Make large data sets coherent
• Encourage the eye to compare different pieces of
  data
• Reveal the data at several levels of detail, from
  broad to fine
• Serve a reasonably clear purpose description,
  exploration, tabulation, or decoration
• Be closely integrated with the statistical and
  verbal descriptions of a data set

69
Principles of Graphical Excellence

• Graphical excellence
• is the well-designed presentation of interesting
  data - a matter of substance, of statistics, and
  of design
• consists of complex ideas communicated with
  clarity, precision and efficiency
• is that which gives to the viewer the greatest
  number of ideas in the shortest time with the
  least ink in the smallest space.
• is nearly always multivariate
• requires telling the truth about the data

70
Graphical Integrity

• Two fruitless paths were
• First, that graphics had to be alive,
  communicatively dynamic, overdecorated and
  exaggerated. (USA Today style)
• Second, that the main task of graphical analysis
  was to detect and denounce deception.
• A graphic does not distort if the visual
  representation of the data is consistent with the
  numerical representation.
• Tables actually outperform graphics in reporting
  on small data sets of 20 numbers or less. The
  special power of graphics comes in the display of
  large data sets
• The representation of numbers, as physically
  measured on the surface of the graphic itself,
  should be directly proportional to the numerical
  qualities represented.
• Clear, detailed, and thorough labeling should be
  used to defeat graphical distortion and
  ambiguity. Write out explanations of the data on
  the graphic itself, Label important events in the
  data

71
Use of dimensions when displaying data

• The use of two (or three) varying dimensions to
  show one-dimensional data is a weak and
  inefficient technique, capable of handling only
  very small data sets, often with error in design
  and ambiguity in perception.
• The number of information-carrying dimensions
  depicted should not exceed the number of
  dimensions in the data

72
Distorted Dimensions
Upper Diagram New York Times, August 9, 1978, p.
D-2 Left Diagram Edward R. Tufte, The Visual
Display of Quantitative Information, 1983, p58
73
Use of dimensions in Graphs

• From Time, April 9, 1979, p. 57
• Here an increase of 454 percent is depicted as an
  increase of 4,280 percent in surface area
• Lie factor of 9.4
• If volume is taken into effect, then the volume
  increases 27,000 percent
• Lie factor of 59.4

74
More Graphical Design Flaws

• The doctrine of boring data serves political
  ends, helping to advance certain interests over
  others in bureaucratic struggles for control of a
  publications resources.
• For example, if the numbers are dull dull dull,
  then an artist, indeed many artists, indeed an an
  Art Department and an Art Director, are required
  to animate the data lest the eyes of the audience
  glaze over.
• As an art bureaucracy grows, style replaces
  content.
• If the statistics are boring, then youve got the
  wrong numbers.
• More bad assumptions If you have to explain it,
  dont use it, from a news director at a national
  television network
• Contempt for graphics and their audience, along
  with the lack of quantitative skills among
  illustrators, has deadly consequences for
  graphical work
• over-decorated and simplistic designs
• tiny data sets
• big lies

75
Graphical Design

• Pixel usage
• Similar to Tuftes Data-Ink
• Pixel-usage ratio
• data-pixels / total pixels for graphic
• proportion of non-redundant info
• 1.0 - ratio of a graphic that does not need to be
  drawn
• Maximize the data-pixels
• Do not draw the non-data-pixels

76
Chartjunk

• Non-pixel-data or decorations
• Grid lines
• Excess ticks
• Redundant data display
• Three types
• Unintentional
• Moire vibration on a page
• Grid
• Best used for initial plotting of data, not
  presentation
• Darker grids are worse than lighter
• Graphical duck
• When ornamentation becomes the primary purpose

77
Data Ink Example
Both Graphs Display the Same Information
78
High Information Graphics

• Data graphics should often be based on large
  rather than small data matrices and have a high
  rather than low density
• Data rich designs give a context and credibility
  to statistical evidence
• This implies that graphics can usually be shrunk
  a great deal

79
Recap of AWT

• Sun released JDK 1.0 in the first half of 1996
• Significant portion of JDK 1.0 was the AWT
• Write once - run anywhere
• Large focus of Java was bringing life to Internet
  Web Pages
• moving text
• animated images
• Added glitz to web pages
• Some initial developers tried to develop office
  productivity tools
• AWT slow
• Native look and feel had problems

80
Problems with AWT 1.0

• Slow
• Not robust enough
• Toolkit had primitive elements only supported
  simplistic development
• Developers didnt have to re-invent the wheel,
  but they did need to invent axis, frame, body
• Particular weakness was the initial
  event-handling methods of JDK 1.0
• No access to printers
• Used peer-classes

81
JDK 1.1 AWT

• First Update
• Windows version completely re-written
• Added a crude Printer access
• Vastly superior event-handling code
• Butonly two new AWT components
• ScrollPane
• Pop-up Window
• Still used peer-classes (heavyweight components0

82
Internet Foundation Classes

• Netscapes Role
• Developers at Netscape began work on a new tool
  set of improved user interface controls, the
  Netscape Internet Foundation Classes (IFC)
• Much more complete set of user controls
• Developed the notion of nesting components inside
  of other components
• Pure Java Implementation
• Takes with it its look and feel, rather than
  hosts OS
• Sun liked it, the users liked it, so they worked
  with Netscape to create the Java Foundation
  Classes

83
Swing

• Early 1997 partnership between Netscape and
  JavaSoft
• Intended to merge best parts of AWT and IFC
• Written entirely in Java (lightweight components)
• JavaSoft indicating that AWT may be deprecated
• Note that some Swing components still inherit
  from AWT components
• JFrame
• AWT components still use the Native Interface,
  Peer components
• Most AWT components have Swing replacements
• Mixing AWT and Swing produces minimal to bizarre
  results
• Much do to when the component reports its traits
  vs. when it is created
• Also the Z-ordering of elements on the screen is
  affected

84
What is the JFC

• Swing is a Java GUI toolkit, follow on to AWT
• JFC is Swing plus more
• Java Foundation Classes Consist of
• Swing components
• Desktop Colors
• JDK 1.1 Printing facility
• Java2D API
• Accessibility API
• Cut and Paste
• Drag and Drop

85
What is Swing

• The Swing component hierarchy is similar in some
  ways to the AWT hierarchy. But on close
  examination, you'll see quite a few differences.
• Swing has more than twice as many components as
  AWT -- it is a comprehensive library of more
  than 250 classes and more than 75 interfaces for
  creating lightweight, 100 pure Java GUI
  components.
• But in some ways, the hierarchy of the Swing
  component set has actually been simplified.
• All Swing component classes have names that start
  with "J,".
• Don't conclude from this, however, that all Swing
  classes are "J" classes, or that all of them
  descend from JComponent. Swing has two kinds of
  classes -- UI classes and non-UI classes -- and
  only Swing's UI classes are "J" classes that
  descend from JComponent. Swing also has lots of
  non-UI classes that don't descend from
  JComponent and don't have names that begin with
  the letter J

86
Where is the JFC found?

• Full range of JFC is in JDK 1.2
• JavaSoft provides a package called JFC 1.1
• Compatible with JDK 1.1
• Can be loaded into browsers with archive tag
• Consists of
• Swing components
• Desktop Colors
• JDK 1.1 Printing facility

87
Swing and SWT

• As of JDK 1.5.0_08, Swing now uses native widget
  rendering for existing components in all Windows
  OS (XP and Vista)
• Guarantees correct look and feel
• Same approach that SWT took
• As of JDK 1.6.0 Swing will use native widgets for
  Solaris and Linux as well
• According to Swing team, this is the only way to
  maintain compatibility with ever changing look
  and feel variations.

88
Documentation

• javadoc - a very good tool found in the JDK
• Provides documentation on
• Packages
• Classes
• Interfaces
• Method/attribute documentation
• / / wrapper
• _at_param
• _at_return
• _at_see
• _at_version
• _at_author

89
Coding Methods and Styles for this class

• Course Handout indicates location of homework on
  apclen computers.
• Code Example, Test.java
• In class development of sample file

90
References

• Joel Spolsky, User Interface Design for
  Programmers