Life, the Universe and GUI Design

1
Life, the Universe and GUI Design

• By
• Mike Miserendino

2
42
3
What is the question?
4
Where do we start?
5
Requirements
6
Requirements Sources

• Research
• User Interviews
• Focus Groups
• User Groups

7
Interview

• Ask lots of questions
• Have the user do most of the talking
• Mix questions types from yes/no to those
  requiring an explanation

8
GUI Guidelines and Standards

• Contains basic design guidelines
• Provides a consistent look and feel
• Helps maintain company standards
• Builds foundation for UI specifications

9
User Interface Specification

• Blueprint for all user interfaces
• Contains user interface layouts and overall
  application map
• Describes function of all user interface
  components
• Details the layout, behavior, and flow of all UI
  content
• Establishes detailed requirements
• Provides verification testing

10
User Interface Map
11
Display Definition
12
Menu Layout
13
Page Layout
14
Functionality
15
Toolbar Definition
16
Architectural Specifications

• Modeled from User Interface Specification and
  business logic
• Provides basis for Interface Control Document

17
Interface Control Document

• Maps user interface to application
• Derived from UI Specification
• Satisfies UI requirements
• Standard reference for the GUI developers so that
  they can look up and understand the interface
  methods exposed by the Back-End components

18
Insert ICD Sample Here
19
User Interface Design

• Good UI design has everything to do with the
  user's tasks, goals, cognitive processes, and
  behavior.
• Simple
• Functional
• Clean

20
Design Inspiration

• Print Ads
• Graphic Design
• TV / Movies
• Real life models

21
Advertisement Clippings
22
Okudagram

• Display type invented by Michael Okuda for
  starship console displays seen in Star Trek.
• http//www.lcarscom.net/

23
(No Transcript)
24
(No Transcript)
25
(No Transcript)
26
(No Transcript)
27
Sketches

• Roughs of user interfaces or controls
• Add functional notes as needed
• Notepad or graph paper
• Colored pens

28
Sketching
29
Wall Layouts

• Use Velcro backed cutouts or pinups of controls
• Sticky notes
• Easy to layout and modify
• Excellent for brain storming
• Difficult to back up manual copy
• Not space efficient

30
Dry Erase Board

• Cheap
• Quick
• Easy to modify
• Limited size
• Manual backup

31
Interactive Sketch Board

• Dry erase board with PC or printer
• Capability to save to file or hard copy
• Slow
• Expensive

32
Prototyping for Design

• Simple functions available
• Time consuming
• Limited access
• Reuse during prototyping phase

33
UI Models

• Deductive User Interface
• Inductive User Interface

34
Deductive User Interface

• Most elements in software today require the user
  to study them and deduce their behavior
• Typically found in traditional applications

35
Deductive User Interface
36
Inductive User Interface (IUI)

• Also called inductive navigation, the IUI model
  suggests how to make software applications
  simpler by breaking features into screens or
  pages that are easy to explain and understand.
• Informal tests suggest that users can perform
  tasks as quickly in this model as in traditional
  interfaces, and may find things more easily.

37
Microsoft Money
38
Microsoft Money
39
Design Considerations

• Navigation
• Input Devices
• Use of Controls
• Color
• Text

40
Navigation
41
Navigation

• Some UIs are like a maze.
• Mazes make good puzzles.
• People are not particularly good at remembering
  long sequences.

42
Input Devices

• Keyboard
• Mouse
• Tablet
• Touch screen

43
Control Clutter
44
Order
45
Visible

• If something is important enough to be displayed
  to the user, make sure that the user will be able
  to see it.

46
Visible
47
Visible
48
Consistency

• "consistency makes the interface familiar and
  predictable (The Windows User Interface
  Guidelines for Software Design, Microsoft Press)

49
Consistency
50
Consistency
51
Clear Purpose
52
Custom Controls

• Unless you are making a game or multi-media
  application, try to use the controls that are
  provided by the operating system
• Users are already familiar with standard controls
  and will readily understand their purpose and
  rules of operation

53
Tooltips
54
Hover Help

• May provide far too much information to be
  effective.
• May disappear before the user can finish reading
  them.

55
Hover Help
56
Color
57
Color

• Color is a phenomenon of perception not an
  objective component or characteristic of a
  substance
• Color is an aspect of vision it is a
  psychophysical response consisting of the
  physical reaction of the eye and the automatic
  interpretive response of the brain to wavelength
  characteristics of light above a certain
  brightness level

58
Color

• Complementary colors
• Alerts
• Display
• Printouts
• Disability

59
Color Wheel

• Harmonious color combinations use any two colors
  opposite each other on the color wheel, any three
  colors equally spaced around the color wheel
  forming a triangle, or any four colors forming a
  rectangle

60
Color Wheel

• The color wheel is a visual representation of
  color theory
• http//www.visibone.com/color/wheel.html
• Color Wheel Pro - http//www.color-wheel-pro.com/i
  ndex.html

61
Color Blindness

• Approximately 8 of men are color blind to some
  extent while only 0.4 of women are affected.
• The key issue is to know when you are using
  colors which some people will not be able to
  differentiate.

62
Color Blindness

• Most color blindness involves red or green
• Safe Web Colors for color-deficient vision -
  http//more.btexact.com/people/rigdence/colours/

63
Color Blindness

• Follow direction from color blindness guides
• Offer alternative colors or a means to customize
  UI colors

64
Color Selector
65
Look and Feel
66
Text

• Fonts
• Pre-Rendered vs. Dynamic Text
• Uppercase

67
Fonts

• Sizing
• Font Family

68
Pre-Rendered Text
Pros

• Looks Great
• Artistic Control
• Custom Fonts

69
Pre-Rendered Text
Cons

• High Bandwidth / Capacity
• More Work QA
• Poor Internationalization
• High Maintenance
• Attributes not alterable by user

70
Dynamic Text
Pros

• Low Bandwidth / Capacity
• Easy to Internationalize
• Easy to Modify
• Low Maintenance
• Support for Dynamic Content
• Run-time Font Attributes

71
Dynamic Text
Cons

• More Code
• Limited Selection of Fonts
• Less Artistic Control

72
Uppercase

• Avoiding uppercase is one of the first rules of
  netiquette because it is universally interpreted
  as shouting
• The use of all uppercase makes the information
  inherently difficult to read

73
Speaking Geek

• Avoid technical jargon
• Utilize technical writers to assist with any text
  displayed on screen

74
Internationization

• Region/Locale
• EASL
• Resources

75
Yahoo Mail
76
Windows 95

• "Insert Floppy - please insert the disk labeled
  "Windows 95 CD-ROM'.

77
Address

• Most U.S. designed applications assume that every
  country in the world has the same address
  conventions
• Validating address forms tends to provide the
  most frustration for users (e.g. valid state
  required!)

78
Fixed Sized Controls
79
Development

• Control libraries
• Utilities
• Graphics software
• Macromedia Flash

80
Resources

• Books
• Magazines
• Internet
• UI Related Organizations
• UI Related Businesses

81
Recommended Reading

• Designing the User Interface, Shneiderman
• The Humane Interface, Raskin
• International User Interfaces, del Galdo, Nielsen
• Design Graphics Magazine
• Java Look and Feel Guidelines, Sun Microsystems
• The Windows Interface Guidelines for Software
  Design, Microsoft Press

82
Web

• Human-Computer InteractionResource Network -
  http//www.hcirn.com/
• http//www.iarchitect.com/mshame.htm

83
Organizations

• ACM CHI - http//sigchi.org/
• ACM SIGGRAPH - http//www.siggraph.org/
• UI Engineering - http//www.uie.com/

84
Contact

• Mike Miserendino
• gui_nut_at_yahoo.com