Asper School of Business University of Manitoba Systems
Asper School of Business University of Manitoba Systems Analysis & Design Instructor: Bob Travica User interface Updated: 2018
Outline n Concept of user interface n Role of user interface n User-centered design n Usability of user interface n Metaphors for user interface n Principles of human-computer interaction n Designing dialogs 3510 Systems Analysis & Design * Bob Travica 2 of 21
Concept of user interface n User interface is point of connection between user and system n Soft interface vs. Hard interface (screens, (keyboard, part of software) mouse…) n Soft interface (our focus) handles data inputs and outputs 3510 Systems Analysis & Design * Bob Travica 3 of 21
Concept of user interface (cont. ) n User interface requires interaction between user and system to produce inputs and outputs n In contrast, system interface require minimal or no human intervention 3510 Systems Analysis & Design * Bob Travica 4 of 21
Role of user interface (UI) n To the end user, the UI is the system itself n Access to system’s functionality & display of output n Involvement of user’s perception (seeing, hearing, touching) n Studied in the field of human-computer interaction (HCI) 3510 Systems Analysis & Design * Bob Travica 5 of 21
User-centered design n Approach that places user at center of the development process – user interface, system’s data, functionality n Users involved in development process from start; iterative n Goal: Ensure usability of user interface (“user-friendly” systems – laymen’s term, inappropriate in MIS 3510!) 3510 Systems Analysis & Design * Bob Travica 6 of 21
Usability n Usability is an aggregate measure of UI quality. n Usability is focused on efficiency in adopting and using UI. n Five measures of usability (Nielsen, 1992) next slide 3510 Systems Analysis & Design * Bob Travica 7 of 21
Usability (cont. ) n Time to learn: Extent of learning effort. n Retention over time: Extent of memorizing learned UI procedures. n Amount of errors: Extent of wrong moves in navigating on screen & across screens. n Time to execute task: Speed with which user performs work. n User satisfaction: User’s liking of screens; subjective. 3510 Systems Analysis & Design * Bob Travica 8 of 21
Metaphors for user interface n 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. ) n To understand metaphors ask: How does the user interact with a system? n How is the input being made? n How are the menus designed? n How is the output formatted? 3510 Systems Analysis & Design * Bob Travica 9 of 21
n Metaphors for user interface: n 1. Alphanumeric commands & navigation via menus (historically first): Interaction via fixed command words. n 2. Desktop: Menus as icons (clickable or tappable images) that resemble desk objects (affordance principle) (e. g. , Apple or MS Windows screens, smart phone) 3510 Systems Analysis & Design * Bob Travica 10 of 21
n 3. Document - Input/output screens structured as paper documents (e. g. , customer order at Web storefronts) 3510 Systems Analysis & Design * Bob Travica 11 of 21
Metaphors for user interface n (cont. ) 4. Conversation * - Interaction resembles conversation between people (e. g. , sequencing question & answers in an expert system, natural voice interaction*) *The textbook calls this “Dialog” – confusing since “dialog” refers to designs of the flow of interaction between user and system (see footnote). 3510 Systems Analysis & Design * Bob Travica 12 of 21
HCI principles n Donald Norman: n 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; issues with mobile devices…) n Affordance - appearance of any control should suggest its functionality (violations: missing End button, obsolete icons in Windows UI, Apple’s i. OS & OS X- next slides) 3510 Systems Analysis & Design * Bob Travica 13 of 21
What is this? Qu'est-ce que ce est? 3510 Systems Analysis & Design * Bob Travica 14 of 21
Qué es esto? Was ist das? 这是什么? 3510 Systems Analysis & Design * Bob Travica 15 of 21
HCI principles n (cont. ) Shneiderman’s “golden rules” for good design (REF 3 C 2 S): • Reversal of user’s actions should be easy • Errors correction in a simple way • Feedback to user implemented • Control to user - not system • Consistency in screen design • Closure of dialogues • Shortcuts for users provided • Short-term memory of user’s must not be overloaded 3510 Systems Analysis & Design * Bob Travica 16 of 21
Designing dialogs n Dialogue is the flow of user-system interaction, including sequencing of screens. n Design of a dialogue is based on use cases, activity diagrams, sequence diagrams n Types of dialog design: 1. Narrative design – Write out a human and computer conversation step by step 3510 Systems Analysis & Design * Bob Travica 17 of 21
Designing dialogs n (cont. ) 2. Storyboard – Make sketches of screens and put them in order Fig. 11 -9 3510 Systems Analysis & Design * Bob Travica 18 of 21
Screenshots analysis & design n Focusing on a particular screen of a storyboard can be used for analyzing problematic parts of it and designing solutions. n Useful for your assignments! Problem: Solution: Provide feedback via communication box Inappropriate grouping of menu items Move the bottom item into the other menu group 3510 Systems Analysis & Design * Bob Travica The user lost in navigation 19 of 21
Designing dialogs (cont. ) – 3. Navigation design – Movement across screens linear path linear with branching loop 3510 Systems Analysis & Design * Bob Travica 20 of 21
Designing dialogs – Navigation (cont. ) 0 1 Navigation up Content of dialogue box Navigation down 0 0, 1 1 3510 Systems Analysis & Design * Bob Travica 21 of 21
- Slides: 21