How to Design

1
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

2
How to Design Prototype a User Dialogue

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

3

• Identify user needs.
• Learn about users by means of interviews, surveys
  and questionnaire.
• Learn who the users are in terms of age, gender,
  experience, educational background, cultural
  background, religious background, physical
  conditions, and so on.
• Determine their expectations of the new system.

4

• Perform a job analysis.
• Break the user's job down into its components
  parts and producing a task list.
• Select the users' work tasks to be supported.
• Include only those tasks that are critical to the
  job and can benefit from the system.
• Keep in mind cost versus benefit and adherence to
  the organization's strategic objectives.

5

• Perform a task analysis.
• Subdivision of each task into its elementary
  steps.
• Identify the knowledge and skills required for
  each step.
• The task analysis is the skeleton for the
  dialogue or interface design.
• It forms the architectural base around which the
  interface will be designed.

6

• Determine the overall interface style.
• Select from
• Menus
• Form filling,
• Command,
• Direct manipulation,
• or Combination
• By recognizing the objectives, advantages, and
  disadvantages of each in relation to the task.

7

• Determine the overall interface style. Cont
• General design advice
• Provide flexibility.
• Provide the user with the ability to "undo"
  errors.
• Provide the user with immediate feedback.
• Allow users to be in control.
• Provide optional help.
• Use defaults for common or likely outcomes.

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

9
State Transition Diagram
10
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.

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

12
How to Design Prototype a Screen

• Step 1 Review Input Requirements
• Step 2 Select the GUI Controls
• Step 3 Prototype the Input Screen
• Step 4 Design or Prototype the Source Documents

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

14
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,
  ...

15
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

16
Common GUI Components
17

• 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

18
Advanced GUI Components
19
Advanced GUI Components (continued)
20
A Logical Data Structure for Input Requirements

• ORDER ORDER NUMBER
• ORDER DATE
• CUSTOMER NUMBER
• CUSTOMER NAME
• CUSTOMER SHIPPING ADDRESS ADDRESS gt
• ( CUSTOMER BILLING ADDRESS ADDRESS gt )
• 1 PRODUCT NUMBER
• QUANTITY ORDERED n
• ( DEFAULT CREDIT CARD NUMBER )
• ADDRESS ( POST OFFICE BOX NUMBER )
• STREET ADDRESS
• CITY
• STATE
• POSTAL ZONE

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

22
Input Prototype for Data Maintenance
23
Input Prototype for Transaction
24
Input Prototype for Data Maintenance
25
Input Prototype for Web Interface
26
Input Prototype for Web Interface
27

• Validate, revise, and refine the initial design.
• Use walk-throughs, simulations, and tests with
  persons who will use the interface.
• Be alert to responses and incorporate
  improvements in new prototypes.
• Continue this process until objectives have been
  met, or resources have been exhausted.

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

29
How to Prototype Design Computer Outputs

• Prototyping Outputs
• Follow the output design principles
• Sketch or generate a sample of the report or
  document via prototyping.
• Involve the user to obtain feedback.

30
How to Prototype Design Computer Outputs

• The user should be allowed to actually exercise
  or test the output.
• Part of that experience should involve
• obtaining appropriate help or instructions
• drill-down to obtain additional information
• navigation through pages
• request different formats that are available
• resize the outputs and
• perform test customization capabilities.

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