1. Asper School of Business University of Manitoba Systems Analysis & Design Instructor: Bob Travica User interface Updated: December 2014

2. 3510 Systems Analysis & Design * Bob Travica Outline Concept of user interface Role of user interface User-centered design Usability of user interface Metaphors for user interface Principles of human-computer interaction Designing dialogs 2 of 19

3. 3510 Systems Analysis & Design * Bob Travica Concept of user interface User interface is point of connection between user and system Soft interface vs. Hard interface (screens, (keyboard, part of software) mouse…) Soft interface (our focus) handles data inputs and outputs 3 of 19

4. 3510 Systems Analysis & Design * Bob Travica Concept of user interface (cont.) User interface requires interaction between user and system to produce inputs and outputs In contrast, system interface require minimal or no human intervention 4 of 19

5. 3510 Systems Analysis & Design * Bob Travica Role of user interface (UI) To the end user, the UI is the system itself Access to system functionality & display of output Involvement of user’s perception (seeing, hearing, touching) Studied in the field of human-computer interaction (HCI) 5 of 19

6. 3510 Systems Analysis & Design * Bob Travica User-centered design Approach that places user at center of the development process – user interface, system’s data, functionality Users involved in development process from start; iterative Goal: Ensure usability of user interface (“user-friendly” systems – laymen’s term, inappropriate in MIS 3510!) 6 of 19

7. 3510 Systems Analysis & Design * Bob Travica Usability Usability is an aggregate measure of UI quality. Usability is focused on efficiency in adopting and using UI. Five measures of usability (Nielsen, 1992)  next slide 7 of 19

8. 3510 Systems Analysis & Design * Bob Travica Usability (cont.) Time to learn: Extent of learning effort. Retention over time: Extent of memorizing learned UI procedures. Amount of errors: Extent of wrong moves in navigating on screen & across screens. Time to execute task: Speed with which user performs work. User satisfaction: User’s liking of screens; subjective. 8 of 19

9. 3510 Systems Analysis & Design * Bob Travica Metaphors for user interface Metaphor is the manner in which communication between the user and a system is conducted. (For differences between this discussion and the textbook see footnote to next slide.) To understand metaphors ask: How does the user interact with a system? (How is the input made? How are the menus designed? What is the output formatted?) Metaphors: 1. Alphanumeric commands & navigation via menus (historically first): Interaction via fixed command words. 2. Desktop: Manus as icons (clickable images) that resemble desk objects (affordance principle) (e.g., Apple or MS Windows screens) 9 of 19

10. 3510 Systems Analysis & Design * Bob Travica Metaphors for user interface (cont.) 3. Document - Input/output screens structured as paper documents (e.g., customer order at Web storefronts) 4. Conversation * - Interaction resembles conversation between people (e.g., sequencing question & answers in an expert system, natural voice interaction*) **The textbook uses the term “Dialog” – confusing since “dialog” refers to designs of the flow of interaction between user and system. (see footnote) 10 of 19

11. 3510 Systems Analysis & Design * Bob Travica HCI principles Donald Norman: Visibility - all user interface items (controls) should be visible in terms of availability and their response to user input (violations: check tabs in MS Office 2007+; missing Start button in Windows 8; mobile devices) Affordance - appearance of any control should suggest its functionality (violations: missing End button, obsolete icons in Windows UI, Apple’s iOS & OS X) 11 of 19

12. 3510 Systems Analysis & Design * Bob Travica What is this? Qu'est-ce que ce est? 12 of 19

13. 3510 Systems Analysis & Design * Bob Travica Qué es esto? Was ist das? 这是什么？ 13 of 19

14. 3510 Systems Analysis & Design * Bob Travica HCI principles (cont.) Shneiderman’s “golden rules” for good design (REF 3C 2S): Reversal of user’s actions should be simple Errors corrected simply Feedback should be given to user Control to user - not system Consistency in screen design Closure of dialogues Shortcuts offered to users Short-term user’s memory not to be overloaded 14 of 19

15. 3510 Systems Analysis & Design * Bob Travica Designing dialogs Dialogue is the flow of user-system interaction, including sequencing of screens. Design of a dialogue is based on use cases, activity diagrams, sequence diagrams Types of dialog design: 1. Narrative design – Write out a human and computer conversation step by step 15 of 19

16. 3510 Systems Analysis & Design * Bob Travica Designing dialogs (cont.) Fig. 11-9 2. Storyboard – Make sketches of screens and put them in order 16 of 19

17. Screenshots analysis & design Focusing on a particular screen of a storyboard can be used for analyzing problematic parts of it and designing solutions. Useful for your assignments! 3510 Systems Analysis & Design * Bob Travica Problem: Inappropriate grouping of menu items Solution: Move the bottom item into the other menu group Problem: The user lost in navigation Solution: Provide feedback 17 of 19

18. 3510 Systems Analysis & Design * Bob Travica Designing dialogs (cont.) – 3. Navigation design 18 of 19

19. 3510 Systems Analysis & Design * Bob Travica Content of dialogue box Designing dialogs – Navigation (cont.) 19 of 19