Input and Output Design

1
Input and Output Design
2
DESIGN OF INPUT

• Design of input includes
• Selection of capture, entry and input method
• Selection of input method
• Selection of input device
• Selection of dialogue type
• Designing the user interface
• Design of data entry screens
• Designing data entry procedures
• Design of forms (paper)
• Coordination of screens
• (Design of training technique).

3

• The resulting design must be
• Easy to use
• Attractive
• Simple (uncluttered)
• Consistent (similar layout on forms/screens)
• Accurate (assures proper completion)
• Effective (gets only what is needed).

4

• Common methods for data entry
• Batch input (data entry is delayed)
• On-Line input (data entry is immediate, but
  database updates may be delayed)
• Real-Time (database is immediately updated).
• Capture data as soon as possible.

5
Designing Dialogue

• Dialogue is the style of interaction between the
  user and the interface.
• Menus
• Question and Answer
• Input/output forms
• Natural Language
• Command-Language
• Direct-Manipulation

6

• To select an appropriate dialogue style consider
• The Application
• And
• The User
• What kind of users will the system have?
• Many one time users
• Untrained personnel
• Trained operators
• Frequent users
• Systems programmers.

7
Characteristics of Users

• Many one time users
• Training impossible. Little understanding of the
  task.
• Untrained personnel
• Low panic threshold. Frequent problems will lead
  to system avoidance. Need very small and precise
  steps.
• Frequent users
• Need to complete task as quickly and easily as
  possible, but often start as an untrained user.
• Trained operators
• Are annoyed by tedious steps. Useful shortcuts
  required.
• Systems programmers
• Like to feel in control. They don't panic easily.

8
Dialogue/Interface Types

• Menus
• Allow users to complete a task without knowing
  the entire system.
• Inexperienced users find them easy to use.
• Nesting and pull down menus are common
  techniques.
• Experienced users may not like stepping through
  multiple menus.

9
Dialogue/Interface Types

• Question and Answer
• Computer supplies series of questions to which
  the user responds.
• Dialogue boxes are a common form.
• Questions can be tailored' as session continues.
• May be useful for one time users.
• Designer must consider the range of possible
  responses.

10
Dialogue/Interface Types

• Input/output forms
• Common technique for data entry (form fill-in).
• Show what data is required.
• User can easily move between fields.
• Experienced users want defaults and/or shortened
  data entry techniques.

11
Dialogue/Interface Types

• Natural Language
• Users enter a statement in natural language, the
  computer interprets it or asks for more
  information.
• Suits queries on databases or AI.
• Limited by the ambiguity of language.

12
Dialogue/Interface Types

• Command-Language
• User controls dialogue and allowed high degree of
  control.
• Requires memorisation and complete understanding
  of task.

13
Dialogue/Interface Types

• Direct-Manipulation
• Allows user direct manipulation of the screen.
• Text editors, spread sheets, video games.
• Graphical User Interface
• Requires sophisticated system.

14
(No Transcript)
15
Internal Controls
Design of Input Methods and Procedures
16

• Guidelines for data entry
• Consistency of data-entry transactions
• Minimal input actions by user
• Minimal memory load on user
• Compatibility of data entry with data display
• Flexibility for user control of data entry

17

• Measurable quality criteria for interactive
  system design
• Time to learn
• Speed of performance
• Rate of errors by users
• Retention over time
• Subjective satisfaction.

18

• Beware of
• Graphics
• Use only if appropriate and meaning is clear.
• Colour
• Too many colours are confusing
• Inappropriate colours are unreadable
• See Kendall and Kendall p.496 for colour
  effectiveness
• Colour blindness
• What does it look like in monochrome?

19

• Beware of
• White Space
• Unused portions of screen can be distracting
• Lack of white space causes cluttering
• Sound Effects
• Distracting and annoying if over used.
• Display attributes
• Blinking, highlighting, reverse video can
  distract if overused.
• Too Much
• Multiple screens is better than trying to put too
  much on a single screen.

20
(No Transcript)
21
How to Design Prototype a User Dialogue

• Step 1 Chart the Dialogue
• Step 2 Prototype the Dialogue and User Interface
• Step 3 Obtain User Feedback

22
How to Design Prototype a User Dialogue

• Step 1 Chart the Dialogue
• Determine the user needs
• Prepare a state transition diagram

23
Prepare a State Transition Diagram

• A state transition diagram is used to depict the
  sequence of screens that can occur.
• Rectangles represent display screens.
• They only describe what can appear during the
  dialogue.
• Arrows represent the flow of control and
  triggering events that cause a screen to become
  active or receive focus.
• The direction of the arrows indicate the order in
  which these screens occur.

24
State Transition Diagram
25
How to Prototype a User Dialogue

• Step 2 Prototype the Dialogue and User Interface
• Many screens may have to be designed and
  prototyped.
• Some screens bring together the application and
  its input and output screens.
• Some screens provide the user flexibility to
  customize the applications interaction.
• Other screens deal with system controls such as
  backup and recovery.

26
How to Design Prototype a User Dialogue

• Step 3 Obtain User Feedback
• Testing the user interface is a key advantage of
  all prototyping environments.
• Testing the user interface means that system
  users experiment with the interface design prior
  to extensive programming and implementation of
  the working system.
• Analysts can observe this testing to improve on
  the design.
• In the absence of prototyping tools, simulate the
  dialogue by walking through screen sketches with
  system users.
• Studying the entire collection of screens.
• Issues as color, naming consistencies of common
  buttons, menu options, and other look-and-feel
  conflicts may need to be resolved.

27
How to Design Prototype a Screen

• Step 1 Review Input Requirements
• Identify the required data inputs.
• In structured analysis, inputs are data flows
  that connect external entities to processes.
• In OOD, they are identified in the Use Cases.
• Review the required attributes of data inputs.
• For each attribute, identify an appropriate
  caption or label to clearly identify the
  attribute.
• The size and edit mask (or format) of the
  attribute must be pre-determined.

28
How to Design Prototype a Screen

• Step 2 Select the GUI Controls
• Choose the correct control for each attribute
• Examine the possible values for each attribute.
• Select from icons, text boxes, pull down lists,
  ...

29
GUI Components (or Controls)

• Common GUI controls
• (for both Windows and Web interfaces)
• Text boxes Radio buttons
• Check boxes List boxes
• Drop down lists Combination boxes
• Spin boxes Buttons
• Hyperlinks

30
Common GUI Components
31

• Advanced controls
• (mostly for Windows interfaces)
• Drop down calendars Slider edit controls
• Masked edit controls Ellipsis controls
• Check list boxes Check tree boxes
• Alternate numerical spinners

32
Advanced GUI Components
33
Advanced GUI Components (continued)
34
How to Prototype Design Computer Inputs

• Step 3 Prototype the Input Screen
• Prepare screens for the user to review and test.
  
• Feedback may result in the need to add new
  attributes and address their characteristics.
• Have a subject-matter expert check the layout.
• Let the user exercise or test the screens.
• Part of that experience should involve
  demonstration on how the user may obtain
  appropriate help or instructions.
• Prototypes should demonstrate how security will
  be handled.
• Prototypes should demonstrate error handling.

35
How to Prototype Design Computer Inputs

• Step 4 Design or Prototype the Source Documents
• Source documents must also be prototyped.
• The prototype may be a simple sketch or artist's
  rendition.
• Source documents should match data entry screens
  to avoid errors.

36
Summary of the User Interface Design Process

• Document the functional requirements.
• Write functional specifications that will serve
  as the blueprints for building the software.
• The specifications should incorporate all screen
  designs and explain how they interact.

37
(No Transcript)
38
(No Transcript)
39
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.

40
GUI design principles.

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

41
Organisation

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

42
Example of internal consistency.

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

43
Economy

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

44
Which menu design is better ?
45
Communication

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

46
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
47
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).

48
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.

49

• 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.

50
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.

51
(No Transcript)
52
(No Transcript)
53
OUTPUT DESIGN

• Output performs one or more of the following
• Conveys information about past activities,
  current status, or projections of the future.
• Signals important events, opportunities,
  problems, or warnings.
• Triggers an action
• Confirms an action

54
Definition of Outputs

• Outputs present information to system users.
• Outputs are the justification for the system.
• Two basic types of computer outputs
• external and
• internal.

55
External Outputs

• Leave the system to trigger actions on the part
  of their recipients or confirm actions to their
  recipients.
• Most are created as pre-printed forms that are
  designed and duplicated by forms manufacturers
  for use on computer printers.
• Intended for customers, suppliers, partners, or
  regulatory agencies.
• Turnaround documents are external outputs that
  eventually re-enter the system as inputs
• Bills and invoices include a stub to be
  returned by the customer.

56
Internal Outputs

• Stay inside the system to support the system's
  users and managers.
• Fulfil management reporting and decision support
  requirements.
• Internal outputs are intended for the internal
  system owners and system users within an
  organization.

57
Internal Outputs

• Management information systems typically produce
  three types of reports
• Detailed, summary, and exception.
• Detailed reports present information with little
  or no filtering.
• Summary reports categorize information for
  managers who do not want to wade through details.
• Increasingly presented in graphical formats using
  charts.
• Exception reports filter detailed information
  before presenting it.

58
Detailed Report
59
Summary Report
60
Exception Report
61
Output design

• Must serve the intended purpose
• Must fit the user
• Must be of appropriate quantity
• Must be where it is needed
• Must be on time
• Must use the appropriate method.

62
Bias in Reports

• Bias can cause users to misread or misinterpret
  the output.
• Bias is not always intentional.

63
Sources of Bias include

• Graphics
• colour, proportion, scaling, type
• Sorting
• users pay more attention to the start of a list.
• most lists are sorted
• Alphabetic, Chronological, or Costing.

64
Other Sources of Bias

• Setting limits
• applies to exception reports.
• limits too high or low.
• range of exceptions too wide or narrow.
• either too few, too many, or insufficient
  information in exception reports.

65
Other Sources of Bias cont

• Sampling
• Selection of only the wanted data in the output
  presentation.
• Sampling techniques may alter the output.
  (remember Lies, Damn Lies and Statistics)
• Inaccurate results based on correct data.

66
(No Transcript)
67
(No Transcript)
68
WEB Design

• WEB based interfaces offer
• Familiarity, popularity is growing quickly
• Portable and low maintenance interfaces
• Access to a large audience
• Effective use of existing infrastructure
• Ease of development
• They are seen as strategic for commercial success!

69

• WEB Design
• Three basic purposes
• To inform
• Viewer obtains facts, learn, or understand.
• Emphasis on completeness, clarity, simplicity.
• To entertain
• Viewer wants to have fun.
• Emphasis on whimsy, surprise, action and variety.
• To enable exchange
• Viewer wants to perform a useful action.
• Emphasis on advertising, persuasion, fast access.
• Search facilities are used to assist the viewer.

70

• WEB Design
• Limitations
• A Web Screen is very small.
• Viewers form their impression of a screen in 7
  seconds.
• The connection to the server is Stateless
• Bandwidth
• Humans can only deal with 72 concepts

71

• WEB Design
• Steps for development
• 1. Research and idea generation
• 2. Information Decomposition and Structuring
• 3. Text analysis and Composition
• 4. Linkage analysis and composition
• 5. Multimedia analysis and composition
• 6. Maintenance and improvement.

72

• WEB Design
• 1. Research and idea generation
• Identify and define the users
• Identify the information they want.
• The outputs are
• A definition of information content for each user
  group.
• A statement of purpose for each web presentation.
• A list of information sources.

73

• WEB Design
• 2. Information Decomposition and Structuring
• Decompose information into chunks, or objects
• Structure information based on business needs and
  users information needs
• Using the information objects, build an
  information structure diagram
• Test the information structure for logic ease
  of use

74

• Decompose information into chunks, or objects
• Each chunk will express a single, complete idea
• Each chunk will be one web page.
• Each chunk is mutually exclusive collectively
  exhaustive
• Reduce information to its simplest form

75
Structure information based on business needs and
users information needs
Information Structure Diagram
A personal resume web site
76
Structure information based on business needs and
users information needs

• Model the providers view of the structure.
• Map user pathways.
• Major pathways for primary objects
• Secondary routes for detailed views
• Return paths to previous stops
• Linkages between objects vary between 10 - 80 of
  those possible
• gt 80 suggests a confusing site
• lt 10 suggests inadequate pathways
• Some suggest 72 linkages is ideal
• For clarity in large systems, detail pages are
  left out of the Information Structure Diagram.

77
Test the information structure for logic ease
of use

• Use storyboards or cards
• Gather potential users, form focus groups
• Collect comments and suggestions
• Improve the structure as required
• Testing guards against inadequate designs

78

• WEB Design
• 5. Multimedia Analysis and Composition
• Requires careful study and skillful production
• Beyond the scope of this subject.

79

• WEB Design
• 6. Maintenance and improvement.
• Maintenance required for many reasons
• Competition
• Changing information
• Lifetime and usefulness of information
• New technologies
• New content is identified
• User suggestions, comments