Systems Analysis II User and system interface design

1
Systems Analysis IIUser and system interface
design

• INFO 355
• Glenn Booker

2
User and System Interfaces

• User interfaces involve a human
• Internal or external
• Ease of use, efficiency, device-specific
• System interfaces are largely automated
• Little or no human intervention
• Direct communication with other systems, or
  automated communication with users

3
User-centered design

• Focus early on the users and their work
• Evaluate designs to ensure usability
• Use iterative development
• What do users know? How do they learn? How do
  they work? What motivates them?

4
User-centered design

• Usability is the degree to which a system is easy
  to learn and use
• May vary for different types of users
• Learning very different from using
• Consider novice versus experienced user needs

5
HCI Metaphors

• Metaphors are analogies between UI and physical
  objects
• Windows uses desktop, direct manipulation, and
  document metaphors
• Dialog metaphor is a conversation between user
  and computer

6
UI Design Concepts

• Affordance means appearance of a feature implies
  its function
• Visibility means control is visible so user knows
  its available and/or responding
• Use consistency in function and appearance of the
  UI

7
UI Design Concepts

• Use shortcuts for advanced users
• Provide audible and/or visual feedback
• End dialogs with clear closure
• Anticipate common errors and help user avoid them
• Give clear error messages and how to fix them

8
UI Design Concepts

• Make it easy to reverse actions
• Reduce short term memory needs of users
• Group use cases to produce logical menu
  hierarchies
• 5-10 items per menu
• Group by subsystem and/or actor
• Might write out dialogs or sketch storyboards

9
UI Design

• Constructing the UI depends on the tools
  available
• Use consistent layout and formatting (same look
  and feel, use of color, function keys, etc.)
• Use clear labels and headings
• Distribute and order UI contents
• Use font and colors methodically

10
UI Design

• Data entry should use common controls to reduce
  errors and speed input
• Text box, list box, combo box, radio buttons,
  check boxes
• Consider standard controls for navigation and
  window manipulation

11
Web interfaces

• Use appropriate technologies to implement web
  browser interfaces (CSS)
• Consider performance needs
• Are you using client-side or server-side
  technologies?
• How much data is being sent?
• How fast can you expect their Internet or network
  connection to be?

12
Web interfaces

• What network capacity is available for multimedia
  data?
• Do some users have special needs (screen readers,
  voice recognition, etc.)?

13
Handheld devices

• Consider the limits on handheld devices
• Small screen (4, 480x320 px)
• Small keyboard or touch screen
• Limited network speed
• App design guidelines and toolkits

14
System Interfaces

• Consider possible types of interfaces to other
  systems
• I/O from and to other systems
• Automated I/O
• I/O to external databases
• Electronic data interchange (EDI) has been around
  decades, now often going to XML

15
Designing System Inputs

• Need to identify devices used
• Magnetic strip, barcode, RFID, etc.
• Identify all input data for each device
• Define controls for each input
• Reduce errors by avoiding human interference, and
  validate data when entered

16
Designing System Inputs Outputs

• Only enter unique information
• Define details of each data field or group
  entered
• Design outputs to get the right information,
  right place, right time, to the right people
• Define type of each output, specify controls
  needed, and prototype each

17
Design Reports

• Reports, statements, and turnaround documents
  fall into four types
• Detailed reports
• Summary reports
• Exception reports
• Executive reports
• Have internal vs. external reports, and
  electronic vs. printed reports

18
Design Reports

• Often want to drill down in reports to get more
  details
• Consider graphic outputs and/or audio outputs
• Bar or column charts, pie charts, scatter plots,
  line or run charts, etc.