1. User Interface Theory & Design
SYS366
User Interface Theory & 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:
it’s Windows

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 Conceptual
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 represent Dialogue/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. … Dialog Chart Example Screen identifier Screen name
Main Menu 1
Product Management 4
Purchasing 3
Sales Management
1.1
Add New Product
1,1.2
1.2.1
Update Product prices
1.2,1
1.2
Update Product 5
Receiving
Continued …
Denotes continuation
Indicates the number of
the slide that can be transferred or returned to

36. Dialogue/Dialog Chart Symbols
open DialogCharts.zip from web page and see:
Dialogue1.doc

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

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

39. Dialogue/Dialog Chart
open DialogCharts.zip from web page and see:
Dialogue2.doc

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