Effective User Interface Design for Systems Interaction

1. SYS366 Week 8 Lecture 1: User Interface Design

2. User Interface • User interface is everything the end user comes into contact with while using the system • To the user, the interface is the system

3. User Interface Design • User Interface • includes all the communications and instructions necessary to navigate through a system, to enter input to the system, or to obtain output in the form of screen displays or printed reports.

4. User Interface Design • Why is User Interface Design important? • The user interface is what the user first sees when they use a system – this is the ‘system’ to them • If it has been designed well: • The users are happy and satisfied with the system • It will improve their productivity • If it has not been designed well: • The users will not be happy and will be reluctant to use the system • Productivity will not be improved

5. User Interface Design • The concept behind User Interface Design • Human Computer Interaction (HCI) describes the relationship between computers and the people who use them to perform business-related tasks

6. Fields Contributing to Study of HCI

7. User Interface Design • The concept behind User Interface Design • User Interface Design needs to be centred around the user • Users are involved throughout the analysis and design processes to provide input into the interfaces • The iterative development cycle helps to facilitate this

8. User Interface Design • Users work with a varied mix of screen or form input, screen or report output and data queries as they perform their day-to-day job functions. • Useful web site to read: • IBM’s Ease of Use white paper • Discussion on User Centred Design and design concepts

9. User Interface Design • The analyst must consider the following when designing user interfaces: • The interaction between the user and the computer when designing the interface for: • Processing the input • Processing the output • Starting the system • Logging onto the system

10. User Interface Design • The analyst must consider the following when designing user interfaces: • The type of user that is using the system • Is it an expert user? (Someone who has spent considerable time using a computer) • Is it a novice user? (Someone who infrequently uses a computer)

11. User Interface Design • The Analyst must take into consideration everything the user comes into contact with while using the system: • Physically • Perceptually • Conceptually

12. User Interface Design

13. User Interface Design • Physical • What the user actually touches to use the system: the keyboard, mouse, touch screen, light pen, reference manuals, printed documentation, data-entry forms

14. User Interface Design • Perceptual • What the user sees or hears: flashing messages, beeps • Conceptual • What the user is manipulating with the system • How the system is used to complete tasks

15. User Interface Design • User interfaces can occur between a user and a screen or between systems • Between a user and a monitor, interfaces can be: • Text-based (I.e. AS/400 or mainframe) • Command line • Graphical User Interface (GUI) – most common

16. User Interface Design • Between two systems, interfaces are generally messages that are exchanged • Messages can be passing of actual data values or passing of parameters that can be set and deciphered for their meaning • I.e. if validating a credit card, then a flag can be passed with the credit card to the Validation ‘routine’ which sets the flag as to whether the validation was successful or not

17. User Interface Design • Several types of user interfaces: • Menus • Query • Data Entry • Reports • Detail • Summary • Bill payments • Account statements

18. User Interface Design • Method of accessing user interfaces: • Keyboard • Mouse • Arrow Keys • Function Keys • Ctl or Alt button in combination with a keyboard key

19. User Interface Design • Navigate using mouse or arrow Keys in this “desk top”

20. User Interface Design • Navigate using mouse or buttons on this web “order form”

21. User Interface Design • Navigate through a paper-based interface

22. User Interface Design • Navigate using menus on this “web page”

23. User Interface Design • Navigate using a Mouse and linking On the drill down report

24. User Interface Design • Graphical document

25. User Interface Design • General guidelines: • Make interfaces consistent • Provide meaningful feedback to users in the form of warning, informational and error messages • Allow short cuts for experienced users • Allow easy reversal of actions • Always provide Help throughout online applications

26. User-Centered Design • Focus early on the users and their work • Evaluate designs to ensure usability • Use iterative development

27. Dialogue/Dialog Charts • A formal method of designing and representing Dialogues/Dialogs

28. Dialogue/Dialog Expresses that the User and Computer Interact by Sending Messages

29. Documenting Dialogue/Dialogs • Many methods exist for documenting Dialogue/Dialogs • Use Case diagrams: the dialogue between the actor and the use case • Written descriptions such as use case descriptions or scenarios • Sketches of screens, i.e. storyboards • Dialogue/dialog charts

30. Storyboard for DownTown Videos Rent Videos Dialogue/Dialog

31. Storyboard for DownTown Videos Rent Videos Dialogue/Dialog

32. Dialogue/Dialog Documentation with UML • OO approach provides UML diagrams that are useful for modeling Dialogue/Dialogs in addition to Use case diagrams • Sequence diagrams act much as a Dialogue/Dialog • Objects can be added to class diagrams and interaction diagrams to representDialogue/Dialog

33. Designing Dialogues/Dialogs • The process of designing the overall sequences that users follow to interact with an information system • the sequence in which information is displayed to and obtained from the user

34. Sequence • understanding how the user will interact with the system • clear understanding of user, task, technological and environmental characteristics

35. Example: Customer Information System • A marketing manager wants sales and marketing personnel to be able to review the year-to-date transaction activity for any customer

36. Dialogue/Dialog between a user and the Customer Information System 1. Request to view individual customer information 2. Specify the customer of interest 3. Select the year-to-date transaction display 4. Review customer information 5. Exit system

37. Dialogue/Dialog Chart Symbols Dialogue1.doc

38. Dialogue/Dialog Chart For Customer Information System

39. 0 Main Menu Continued 1 Product Management 0 4 Purchasing 0 5 Receiving 0 3 Sales Management 0 … … … 1.1 Add New Product 1,1.2 1.2 Update Product 1 1.2.1 Update Product prices 1.2,1 SYS366 In-Class Exercise 4 Screen identifier Dialog Chart Example Screen name Denotes continuation Indicates the number of the slide that can be transferred or returned to In-Class Exercise 4: Develop a dialog chart for your business area.

40. Documenting Dialogue/Dialog Designs • Designs must be done simultaneously with other system activities • Include options such as backup and recovery • Overall system structure from standpoint of user is reflected in menu structures

41. Overall Menu Hierarchy

42. Eight Golden Rules for Interactive Interface Design