Chapter 10: Human Computer Interaction Layer Design

Full text

(1)Chapter 10: Human–Computer Interaction Layer Design. Twittie Senivongse (Ed.) PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved..

(2) Objectives     . Understand several fundamental user interface (UI) design principles..    . Understand commonly used principles and techniques for input design.. Understand the process of UI design. Understand how to design the UI structure. Understand how to design the UI standards. Understand commonly used principles and techniques for navigation design. Understand commonly used principles and techniques for output design. Be able to design a user interface. Understand the effect of nonfunctional requirements on the humancomputer interaction layer. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 2.

(3) Introduction • Interface Design defines how the system will interact with external entities (e.g. customers, users, other systems) •. System Interfaces are machine-machine and are dealt with as part of systems integration. •. User Interfaces are human-computer and are the focus of this chapter 7, 8 4, 5, 6, 7, 8 8, 9 8, 10 8, 11. • • • •. Principles for UI design The UI design process Navigation, Input, Output Design Non-functional requirements and UI design PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 3.

(4) Principles of User Interface Design [LCA UCM] form & report too. due to similarity of presentation in different areas. tasks should be accomplished quickly PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 4.

(5) Principle of User Interface Design. Layout (1/2)  The arrangement of items on the screens, forms, reports  Like items are grouped into areas  Areas can be further subdivided  Each area is self-contained  Areas should have a natural intuitive flow  Users from western nations tend to read from left to right and top to bottom.  Users from other regions may have different flows. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 5.

(6) General layout. Navigation Area. Reports & Forms Area. Status Area. Flow between interface sections. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 6.

(7) Principle of User Interface Design. Content Awareness (1/3)  How well the user understands the information contained?  Applies to the interface in general, i.e. each screen, each area .   . on a screen, and sub-areas Include titles on all interfaces, and labels of fields within each area Menus should show where the user is and how the user got there All areas should be well defined, logically grouped together and easily discernible visually Forms and reports should contain preparation date and version numbers to identify age of information PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 7.

(8) Content Awareness (2/3) Interface & report content awareness. Field label. First record area. Second record area. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 8.

(9) Content Awareness (3/3) Form content awareness. Name Area. Phone Numbers Area. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 9.

(10) Principle of User Interface Design. Aesthetics (1/3)  Interfaces should be functional, inviting to use, and pleasing to the eye  Simple minimalist designs are generally better  White space is important to provide separation  Acceptable information density is proportional to the user’s expertise  Novice or infrequent users prefer lower density (< 50% occupied by information).  Expert or regular users prefer higher density (> 50% occupied by information). PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 10.

(11) Principle of User Interface Design. Aesthetics (2/3)  Text design – font and size  Same font and about the same size  Avoid italics and underlining  Serif: most readable for printed reports vs. sans serif: most readable for computer screens or headings in printed reports.  Never use all capital letters, except for titles.  Color and patterns  Use sparingly, only to strengthen the message (showing the difference, highlight important information).  Most readable  Cultural issues. black on white. vs. least readable blue on red. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 11.

(12) Bad aesthetic. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 12.

(13) Principle of User Interface Design. User Experience (1/2)  Ease of learning: how quickly the novice users can learn how to accomplish tasks given the UI  Significant issue for inexperienced and infrequent users  Relevant to systems with a large user population.  Ease of use: how quickly the expert users can use the system to accomplish tasks once they learn how to use it  Significant issue for expert users  Most important in specialized systems.  Ease of learning and ease of use are related  Complementary: lead to similar design decisions  Conflicting: designer of the system must choose whether to satisfy novices or experts PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 13.

(14) User Experience (2/2) Intuitive, easy to learn and remember. Multiple interfaces to address conflicting goals Powerful, flexible, efficient but involve high learning curve PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 14.

(15) Principle of User Interface Design. Consistency (1/2)  Extremely important concept in making the system simple  It allows the users to predict what is going to happen  All parts of the system work in the same way  Users learn how one portion works and immediately apply it to others.  Key areas of consistency are  Navigation controls  Terminology—use the same descriptors on forms & reports. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 15.

(16) PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 16.

(17) Principle of User Interface Design. Minimal User Effort  Interfaces should be designed to minimize the effort needed to accomplish tasks  A common rule is the three-click rule  Users should be able to go from main menu of a system to the information they want in no more than three mouse clicks. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 17.

(18) 15.5.1 Interface Design Principles and Guidelines        . Anticipation  Communication  Consistency  Controlled Autonomy  Efficiency  Flexibility  Focus on user’s task Human Interface Objects. Latency Reduction Learnability Metaphors Readability Track State Visible Navigation. • Layout • Content awareness • Aesthetics • User Experience • Consistency • Minimal User Effort. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved..

(19) How is this app’s UI? • Layout • Content awareness • Aesthetics • User Experience • Consistency • Minimal User Effort. https://forms.gle/ENpsfboaE8ZKu3PP7 PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 19.

(20) User Interface Design Process  Use case driven, incremental and iterative process Use scenario development. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 20.

(21) UI Design Process. Use Scenario Development (1/4)  Use scenarios outline the steps performed by users to accomplish some part of their work  A use scenario is one path through an essential use case  Presented in a simple narrative description  Document the most common cases so interface designs will be easy to use for those situations. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 21.

(22) High. Use Scenario Development (2/3). , Make Payment Arrangements. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 22.


(24) Use Scenario Development (4/4). PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 24.

(25) Navigation Structure Design (1/3). UI Design Process.  The navigation structure defines  The basic components of the interface  How they work together to provide functionality to users.  Windows Navigation Diagrams (WND)  Similar to a behavioral state machine for a user interface  Shows the relationship between all screens, forms, and reports used by the system.  Shows how the user moves from one to another  Boxes represent components, e.g. window, form, report, button  Arrows represent transitions from and to a calling state  Single arrow: no return to the calling state  Double arrow: return required  Stereotypes << >> show interface type PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 25.

(26) Navigation Structure Design (2/3) WND. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 26.

(27) WND Choose Review Cart. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 27.

(28) UI Design Process. Interface Standards Design (1/3) • Interface standards are basic design elements common across the system user interface • Standards are needed for: – Interface metaphor: concept from the real world used as a model in the system (e.g. shopping cart, physical books (Books)). – Interface objects: names of objects (or classes) (e.g. CD, DVD, book) – Interface actions: names of commands to navigate the system (e.g. buy vs. purchase, modify vs. change). – Interface icons: pictures on buttons, reports, and forms (e.g. diskette for save, blank page for create new file). – Interface templates: basic layout of all screens, forms, and reports, drawing together the elements above PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 28.

(29) Interface Standards Design (2/3). PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 29.

(30) Interface Standards Design (3/3) object. icon. metaphor action. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 30.

(31) Interface Design Prototyping (1/4). UI Design Process.  Mock-ups or simulations of computer screens, forms, and reports  Four common approaches (listed in increasing detail)  Storyboard: hand drawn pictures of what the screens will look like  Windows layout diagram: a computer generated storyboard that more closely resembles the actual interface.  HTML prototype: web pages linked with hypertext  Language prototype: more sophisticated than HTML  Built in the programming language with no real functionality  User does not have to guess about the final appearance of the screen. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 31.

(32) Interface Design Prototyping (2/4). Storyboard. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 32.

(33) Interface Design Prototyping (3/4). Windows layout diagram. Combined windows navigation diagram and windows layout diagram. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 33.

(34) Interface Design Prototyping (4/4). HTML prototype. Language prototype. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 34.

(35) UI Design Process. Interface Evaluation (1/2)  Goal is to understand how to improve the interface design before the system is completed  Have as many people as possible evaluate the interface  Ideally, interface evaluation is done while the system is being designed—before it is built  Help identify and correct problems early  Designs will likely go through several changes after the users see it for the first time. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 35.

(36) Interface Evaluation (2/2)  Four approaches to UI evaluation  Heuristic—compare the design to known principles or rules of thumb, i.e. a formal checklist; usually performed by experienced UI designers.  Walkthrough—design team presents prototype to the users & explains how it works.  Interactive—the users work in a one-person session with the prototype with a project team member through the use scenarios using the real use cases  Users give feedback on what is liked and not liked  The team member records the cases when users are unsure, make mistakes, or misinterpret the UI.  Cannot be used with storyboards and windows layout diagrams.  Formal usability testing—performed in labs with users working without help on a language prototype in a one-person session  Use of video camera, software that records user behavior like keystroke and mouse operation PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 36.

(37) Common Sense Approach to User Interface Design. UI Design Process.  Users should not have to think about how to navigate the user interface  The number of clicks should relate to the complexity of the task and should be unambiguous  Minimize the user’s effort though.  Minimize the number of words on the screen. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 37.

(38) 15.5.2 Interface Design Workflow for Web and Mobile Apps 1. Review information contained in the requirements model 2. 3. 4. 5. 6.. 7. 8. 9. 10. 11.. and refine as required. Develop a rough sketch of the WebApp interface layout. Map user objectives into specific interface actions. Define a set of user tasks that are associated with each action. Storyboard screen images for each interface action. Refine interface layout and storyboards using input from aesthetic design. Identify user interface objects that are required to implement the interface. Develop a procedural representation of the user’s • interaction with the interface. • Develop a behavioral representation of the interface. • Describe the interface layout for each state. • Refine and review the interface design model. •. Use Scenario development Interface structure design Interface standard design Interface design prototyping Interface evaluation. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved..

(39) Navigation Design (1/11)  The component that enables the user to navigate through the system, i.e. tell the system what to do  Also provides messages of success or failure of actions performed  Make it simple so that the user never really notices  Basic principles:  Prevent the user from making mistakes  Simplify recovery for the user when mistakes are made  Use a consistent grammar order, e.g. object-action (File ► Open) vs. action-object (Open ► File). PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 39.

(40) Navigation Design (2/11)  Types of navigation controls  Hardware: keyboard, mouse, trackball, touch screen, microphone  Software:  Language  Command language—user types in a command to be executed (e.g. UNIX commands, SQL).  Natural language—system interprets the user’s language (e.g. Google search).  Menus  User is presented a list of choices  Come in different forms (e.g. menu bars, popups, drop downs).  Direct manipulation (e.g. drag and drop, resize)  Voice recognition systems. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 40.


(42) Common types of menu Icon Tool Bar. Menu Bar. Tab Menu. Pop-up Menu. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 42.

(43) Common types of menu Drop-down Menu. Grayed-out Menu Options. Menu Group Separator. Cascading Menu. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 43.

(44) Ex.10.2.1 How is this app’s Software Navigation Control? • Command Language • Natural Language • Menu • Direct Manipulation • Voice Recognition. https://forms.gle/6iTW2kAbWBscVvwdA PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 44.

(45) Navigation Design (6/11)  Messages     . How the system informs the user of the status of an interaction Error messages—user did something that is not permitted Confirmation messages (e.g. “Are you sure?”) Acknowledgment messages (e.g. “Order entered”) Delay messages—provides feedback to the user that the process is running.  Help messages—provides additional information about the system to assist the user in performing a task. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 45.


(47) For help desk. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 47.

(48) Navigation Design (9/11)  Navigation design documentation  Done using WNDs and real use-cases  Real use-cases are implementation dependent  Detailed description of how to use the implemented system  Essential use-cases evolve into real use cases by specifying events in terms of the actual user interface.  For multi platform applications (e.g. desktops, tablets, and smartphones), real use cases will need to be developed for each platform on which the use case is being deployed.. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 48.

(49) The Sales Rep wants to manage client information.. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 49.


(51) Input Design (1/5)  Screens that are used to input data  Data can be structured or unstructured  Structured: Dates, names, products, etc.  Unstructured: Comments, descriptions  Basic principles: simplify collection of accurate information  Online vs. batch processing  Capture data at the source  Manual data entry  Source data automation (using readers): magnetic stripe, barcode, QR code, RFID, smart card, optical character recognition.  Minimize keystrokes (e.g. by using defaults for frequently used values, providing choices) PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 51.

(52) Input Design (2/5)  Types of inputs  Free form controls  Text boxes for alphanumeric information  Number boxes with automatic formatting  Example: Enter a phone number as 3451236789; automatically formats as (345)-123-6789.  Password boxes that hide characters with stars and do not allow cutting or copying.  Selection boxes    . Check boxes when several items can be selected Radio buttons when items are mutually exclusive List boxes to present a set of choices Sliders—a pointer that can be moved along a scale. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 52.

(53) Input Design (3/8). Combo Box. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 53.

(54) Ex 10.2.2 How is this app’s input? • • • • • • •. Textbox Radio button Check box List box Dropdown list Slider Calendar. https://forms.gle/6iTW2kAbWBscVvwdA PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 54.

(55) Input Design (4/5)  Input validation  Data should be validated prior to entry to ensure accuracy  Do not accept invalid data (e.g. input text when a number is required)  Validation checks:      . Completeness Format (e.g. MM/DD/YYYY). Range (e.g. a number falls within a minimum and maximum value) Check sum digit—reduces errors in entering numbers Consistency—data are related Database check—does not violate entity or referential integrity. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 55.


(57) Output Design (1/3)  Reports produced from the data generated by the system  Basic principles:  Understand report usage and its frequency as it will affect the layout (e.g. detail vs. summary, real-time vs. batch).  Manage the information load in a report—provide only what is needed and place most important information near the top.  Minimize bias, especially in graphical displays (charts).  Media:  Electronic (seen on the screen)  Hard copy (printed on paper).  Types of outputs: PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 57.


(59) Output Design (3/3). Misleading that there are major changes. Misleading that the slices nearer the front are bigger. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 59.

(60) Ex 10.2.3 How is this app’s output? • Detailed report • Summary report • Turnaround document • Graphs. https://forms.gle/6iTW2kAbWBscVvwdA PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 60.

(61) Non-Functional Requirements Influence on HCI  Operational Requirements—choice of hardware and software platforms  Technologies that can be used (e.g. GUI, 2 or 3 button mouse, web, mobile)  Performance Requirements  Mobile computing and web browsing inject additional performance obstacles  Security Requirements  Appropriate log-on controls and possibly encryption  Political & Cultural Requirements  Date formats (MM/DD/YY vs. DD/MM/YY), colors, and currencies (dollar – US or Australian? etc.). PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 61.

(62) Summary      . Principles of User Interface Design User Interface Design Process Navigation Design Input Design Output Design Nonfunctional Requirements. PowerPoint Presentation for Dennis, Wixom, & Tegarden Systems Analysis and Design with UML, 5th Edition Copyright © 2015 John Wiley & Sons, Inc. All rights reserved.. 62.

(63)

No results found