1 / 31 CS 425/625 Software Engineering User Interface Design Based on Chapter 15 of the textbook [SE-6] Ian Sommerville, Software Engineering, 6 th Ed., Addison-Wesley, 2000 and on the Ch15 PowerPoint presentation available at the book’s web-site: November 03, 2003

2 / 31 Outline n n Introduction n n User Interface Design Principles n n User Interaction n n Information Presentation n n User Support n n User Interface Evaluation

3 / 31 Introduction.. n n User interface design (UID) is part of the software design process n n In many cases software engineers also work as UID specialists n n The user interface is critical to the success of the application n n The vast majority of current applications have graphical user interfaces (GUI) n n GUI advantages: u u Are relatively easy to understand, learn and use u u Allow complex interaction, via multiple windows u u Support full-screen, fast interaction

4 / 31.Introduction. n n Characteristics of graphical user interfaces [Fig. 15.1, Somm00]

5 / 31..Introduction n n User interface design process [Fig. 15.2, Somm00]

6 / 31 User Interface Design Principles n n User interfaces should be designed with the user in mind n n Implementation details should be hidden n n General principles that guide UID: u u User familiarity u u Consistency u u Minimal surprise u u Recoverability u u User guidance u u User diversity

7 / 31 User Interaction…… n n Key issues in UID: u u User interaction (input commands & data from user) u u Information presentation (output data to the user) n n Five styles of user interaction: u u Direct manipulation   User interacts directly with objects on screen   It is fast, intuitive, easy to learn   Provides immediate feedback; errors are easy to correct   Needs to be supported by a user interface metaphor   Requires complex implementation

8 / 31.User Interaction….. u u Menu selection   User selects a command (option) from a set of options   User errors are reduced   Easy to use interfaces such as touch screen terminals can be used   Context-dependent help could be provided   The interface may be complex if many options are available; structuring mechanisms are needed   Logical conjunctions and disjunctions in user commands are difficult to support   Learning may not be straightforward   Experienced users may find menu selection slower than command language

9 / 31..User Interaction…. u u Command language   Text-based interaction, where the user specifies a command and, possibly, parameters for the command (e.g., “remove file” rm filename in unix)   Powerful set of commands can be designed   Concise, fast interaction style   Commands can be easily interpreted by software   More difficult to learn   Typing ability required   Errors are dealt with poorly   Preferred by experienced users   Can be used as an alternative to other styles (e.g., shortcut combinations of keystrokes in addition to menu selection)

10 / 31 …User Interaction… u u Fill-in forms   User inputs information in the fields of the form   Easy to learn   May require complex processing   Take significant screen space u u Natural language   Commands are expressed in natural language sentences, possibly using voice recognition technology   Suitable for casual users   Not very reliable n n Combinations of UI styles can be used (e.g., Windows)

11 / 31 ….User Interaction.. n n Example of control panel interface [slide from Ch15 presentation, Somm00]: a combination fill-in form and menu selection

12 / 31 …..User Interaction. n n Example of fill-in interface [slide from Ch15 presentation, Somm00]

13 / 31 ……User Interaction n n Multiple user interfaces [Fig. 15.5, Somm00]

14 / 31 Information Presentation….…. n n Information may be directly presented (e.g., text) or a graphical representation may be used n n Data presented should be separated by the presentation software n n An approach for multiple presentation of data is Model-Viewer-Controller (MVC). It allows different presentations (“views”) of the same information

15 / 31.Information Presentation….… n n Generic model of presentation [Fig. 15.6, Somm00]

16 / 31..Information Presentation…… n n Model-Viewer-Controller approach [Fig. 15.7, Somm00]

17 / 31 …Information Presentation.…. n n An example of multiple presentation of information [Fig , Somm00]

18 / 31 ….Information Presentation…. n n Factors to be considered when presenting information: u u Are precise values or data relationships (“big picture”) needed? u u Is data static or dynamic? u u If dynamic, what is the rate of information change? How quickly should the user be informed of the change? u u Are actions/responses required from the user? u u Is direct manipulation involved? u u Are absolute or relative values needed? u u Is textual or numerical format necessary? u u Is it required to present large amounts of information?

19 / 31 …..Information Presentation… n n Alternative presentations [Fig. 15.8, Somm00]

20 / 31 …...Information Presentation.. n n Presentation of dynamic information [Fig and 15.10, Somm00]

21 / 31 ….…Information Presentation. n n Textual highlighting [Fig , SE-6]

22 / 31 ….….Information Presentation n n Colours: u u Can help the users manage the complexity of the interface u u Can be used for highlighting items or identifying layers n n Several guidelines for using colours: u u Use colours conservatively (limit the number of colours used) u u Use colours to indicate changes in system status u u Use colour coding to support user tasks u u Use colours in a consistent manner u u Pay attention to colour pairings

23 / 31 User Support…… n n User guidance encompasses: u u Online help system u u Messages in response to user actions u u User interface documentation n n Online help system: u u Should provide various entry points for the user and should allow easy navigation u u Should be kept compact, clear and concise; it should not overwhelm the user u u Should use a well-organized hierarchical structure, with general help information placed at the top of the hierarchy and details at the bottom u u Preferably, should include various levels of help

24 / 31.User Support….. n n Entry points to a help system [Fig , Somm00]

25 / 31..User Support…. n n Help system windows [Fig , SE-6]

26 / 31 …User Support… n n Error messages: u u Should take into consideration the background and experience of users; should utilize a user-oriented, not a system-oriented language u u Should be polite, positive, concise, and consistent u u Wherever possible, should suggest actions to correct the error u u Wherever possible, should be linked with the help system

27 / 31 ….User Support.. n n Factors considered in wording messages [Fig ]

28 / 31 …..User Support. n n User documentation: u u The system manual should be more detailed than the online help u u Types of user documentation:   Functional description   Installation document   Introductory manual   Reference manual   Administrator’s manual

29 / 31 ……User Support n n Document types for user support [Fig , SE-6]

30 / 31 Interface Evaluation. n n Usability criteria [Fig , Somm00]

31 / 31.Interface Evaluation n n Evaluation of user interfaces: u u Comprehensive statistical assessment based on many experiments and involving users and specialists u u Less expensive techniques for user interface evaluation:   Questionnaires   Observations of users at work   Video snapshots of typical uses   Software components that gather information on the usage of the user interface   Software components that allow direct feedback from users