QAE 233-Week 3 Interface Design Essay- San Diego City College .

This assignment is to help students to apply and analyze the principles for user interface design we explore in Chapter 9 of the assigned text to existing programs and websites. This includes considerations for usability, layout, content awareness, aesthetics, usage level, consistency, and minimization of user effort. Estimated time to complete is 45-120 minutes. As this is a text-based submission on Canvas it may be beneficial to write your assignment in a word processor and then copy/paste into the submission field. This way if the Canvas session times out you don’t lose your work. Instructions: Your assignment is to select one website (desktop view), one desktop application, and one mobile application (on your cell phone or tablet), and answer the below questions. This is to be captured in a text submission and entered in the assignment. It would be appropriate for clarity and organization to address each item in a numerical/listed fashion following the format suggestion. Answers are expected to range from 1-3 sentences, but further elaboration is permissible! For each item answer the following. You may use the a) b) c) format for clarity and to speak to each specific system. Before we get started: a) What website did you choose, and what is its “genre” b) What application did you choose and what is its “genre” c) What mobile application did you choose and what is its “genre” [ Genre implies category or theme, such as social media, business productivity, entertainment, etc.] 1) Layout – In 1-2 paragraphs, speak to the similarities, and differences (if any) in the layout of the three interfaces using topics discussed in Chapter 9 of the assigned text. Consider how the purpose and function of the application/system may influence the design/layout 2) Content Awareness – Does each system convey to the user where they are in the system, and what information is being displayed in that location with minimal, if any, effort? If yes, explain why; If not, explain why not. 2a) 2b) 2c) 3) Aesthetics – Are the interfaces functional and inviting through the careful use of colors, white space, colors, and fonts? If yes, describe some elements you noticed; if no, describe the elements contrary to aesthetic goals. Positive elements may include space between buttons, clear colors/contrast, etc. Negative elements may be information dense or heavy, poor color schemes, “busy” patterns, etc. 3a) 3b) 3c) 4) Consistency – Consistency in UI design enables users to predict what will happen before they perform a function/action by leveraging existing knowledge, and it helps promote ease of use and ease of learning. For each system how did it match up against other systems you’re familiar with in that genre, or other programs in its ‘suite’? Was it similar or different? Elaborate in either case. 4a) 4b) 4c) 5) Minimize User Effort – Is the interface simple to use, or is it cumbersome and requires conscious effort to interact with and use? In either case, choose an element as to why and explain (clearly labeled? follow ‘normal’ expectations? fields and buttons are labelled? etc.) 5a) 5b) 5c) Chapter 9 User Interface Design SYSTEMS ANALYSIS AND DESIGN SEVENTH EDITION DENNIS, WIXOM, AND ROTH Learning Objectives • • • • • • • • • • Explain the concept of usability with regard to the user interface. Describe several fundamental user interface design principles. Explain the process of user interface design. Explain ways to understand the perspectives of the users of the user interface. Describe ways to define the structure of the user interface. Explain the standards that should be established for the user interface. Describe various ways to prototype the user interface. Discuss ways to evaluate and test the user interface. Discuss special concerns associated with touch-screen-enabled user interfaces. Be able to design a highly usable user interface. Copyright ©2019 John Wiley & Sons, Inc. 2 Key Definitions • System Interface: “connections” with other systems, where systems exchange information with each other. Designed as a part of program design. • User Interface: “connections” with users. Focus of this chapter. • The navigation mechanism provides the way for users to tell the system what to do • The input mechanism defines the way the system captures information • The output mechanism defines the way the system provides information to users or other systems • Graphical user interface (GUI): most common type of interface in use today Copyright ©2019 John Wiley & Sons, Inc. 3 Usability Concept • The system is easy to use and easy to learn • Tasks are completed more efficiently and with more accuracy • Mistakes with system are reduced • User satisfaction with new system is increased • Adoption of system is more likely Copyright ©2019 John Wiley & Sons, Inc. 4 Interface Design Principles GENERAL GUIDELINES FOR USER INTERFACE DESIGN Copyright ©2019 John Wiley & Sons, Inc. 5 Principles for User Interface Design • • • • • • Layout Content awareness Aesthetics Usage level Consistency Minimize user effort Copyright ©2019 John Wiley & Sons, Inc. 6 Layout Concepts • The screen is often divided into three boxes • Navigation area (top) • Status area (bottom) • Work area (middle) • Information can be presented in multiple areas • Like areas should be grouped together Copyright ©2019 John Wiley & Sons, Inc. 7 More Layout Concepts • Areas and information should minimize user movement from one to another • Ideally, areas will remain consistent in • Size • Shape • Placement for entering data • Reports presenting retrieved data Copyright ©2019 John Wiley & Sons, Inc. 8 Model Layout for Web Page • Note use of multiple layout areas for site navigation Copyright ©2019 John Wiley & Sons, Inc. 9 Content Awareness (1 of 2) • All interfaces should have titles • Menus should show • where you are • where you came from to get there • It should be clear what information is within each area • Fields and field labels should be selected carefully • Use dates and version numbers to aid system users Copyright ©2019 John Wiley & Sons, Inc. 10 Content Awareness (2 of 2) • Note the use of highlighting to indicate menu selections • Breadcrumbs provide additional clues on navigational path Copyright ©2019 John Wiley & Sons, Inc. 11 Aesthetics • Interfaces need to be functional and inviting to use • Avoid squeezing in too much, particularly for novice users • Design text carefully • Be aware of font and size • Avoid using all capital letters Copyright ©2019 John Wiley & Sons, Inc. 12 More Aesthetics • Colors and patterns should be used carefully • Test quality of colors by trying the interface on a black/white monitor • Use colors to separate or categorize items Copyright ©2019 John Wiley & Sons, Inc. 13 Usage Level (1 of 2) • Some people will be frequent, heavy users of the system • Frequent users desire ease of use – quick and easy completion of job tasks • Other people may use the system infrequently • Infrequent users desire ease of learning – quick and easy ways to figure out what to do. Copyright ©2019 John Wiley & Sons, Inc. 14 Usage Level (2 of 2) • User interface design should anticipate the types of users expected. • For systems primarily used by frequent users, include ways to perform tasks directly (hot keys, short-cut keys, etc.). • For systems primarily used by infrequent users, include careful menu designs, tool tips, and extensive help systems. • For systems with both user types, incorporate both user preferences in design as much as possible Copyright ©2019 John Wiley & Sons, Inc. 15 Consistency • • • • Elements are the same throughout the application Enables users to predict what will happen Reduces learning curve Considers elements within an application and across applications • Pertains to many different levels • Navigation controls • Terminology • Report and form design Copyright ©2019 John Wiley & Sons, Inc. 16 Example of Inc
onsistent Elements Note the different button styles, colors, and font styles. Copyright ©2019 John Wiley & Sons, Inc. 17 Minimize Effort • Three clicks rule • Users should be able to go from the start or main menu of a system to the information or action they want in no more than three mouse clicks or three keystrokes Copyright ©2019 John Wiley & Sons, Inc. 18 Special Issues of Touch Screen Design (1 of 2) • Ideal for information display but not data entry. • Place content at top and navigation controls at bottom so finger does not obscure content area. • Place labels on top of navigation controls. • Size objects correctly for “fat fingers.” • Include adequate spacing between objects. Copyright ©2019 John Wiley & Sons, Inc. 19 Special Issues of Touch Screen Design (2 of 2) • Consider needs of left-handed and right-handed users. • Bright colors/backgrounds can help reduce glare and hide fingerprints. • Use each device’s standardized gesture interactions to enhance the user’s ease of learning and ease of use. Copyright ©2019 John Wiley & Sons, Inc. 20 Android Device Common Hand Gestures (1 of 2) Navigational Gestures: Help users to move through a product easily. Supplement other explicit input methods, like buttons and navigational components Gesture Meaning/Function Tap Users can navigate to destinations by touching elements Scroll and pan Users can slide surfaces vertically, horizontally, or omnidirectionally to move continuously through content Drag Users can slide surfaces to bring them into and out of view Swipe Users can move surfaces horizontally to navigate between peers, like tabs Pinch Users can scale surfaces to navigate between screens Action Gestures: Perform actions or provide shortcuts for completing actions Copyright ©2019 John Wiley & Sons, Inc. 21 Android Device Common Hand Gestures (2 of 2) Gesture Meaning/Function Tap or Long press Users can interact with elements and access additional functionality Swipe Users can slide elements to complete actions upon passing a threshold Transform Gestures: Transform an element ’ s size, position, and rotation with gestures Gesture Meaning/Function Double tap or Pinch Users can zoom into and out of content Compound gestures Users can fluidly transition between various gestures Pick up and move Users can reorder content with a long press and drag Source: material.io/design/interaction/gestures.html#types-of-gestures Copyright ©2019 John Wiley & Sons, Inc. 22 User Interface Design Process (1 of 2) The path to a successful user interface Copyright ©2019 John Wiley & Sons, Inc. 23 User Interface Design Process (2 of 2) • Understand the Users • • • • Organize the Interface Define Standards Develop Prototypes Evaluation / Testing Copyright ©2019 John Wiley & Sons, Inc. 24 Understand the Users (1 of 2) • Users likely will have very different goals and intentions when using the system. • Use personas to develop characterizations of various user groups. • • • • Interests Typical behaviors Goals and objectives Expectations • Plan a user interface that will be satisfying for that particular user group. Copyright ©2019 John Wiley & Sons, Inc. 25 Personas for DrōnTeq (1 of 2) Martin: wants to learn details about DrōnTeq ’ s products “I ’ m focused on finding the best commercial drone for my business needs.” Knowledge: Understands commercial drones and has specific uses and capabilities in mind for the drone purchase. Tasks: Arrives a site to select and configure custom drones. Wants to be able to easily identify drone models and options to meet his intended purposes. Wants to save and compare several configurations in terms of capabilities and prices. Interests: Has a business interest in commercial drones. Wants to find the best tool to use to fulfill business needs. Cost/benefit analysis is important. Characteristics: Deliberate; thoughtful; expects to be able to develop and compare alternative configurations easily and seamlessly. Copyright ©2019 John Wiley & Sons, Inc. 26 Personas for DrōnTeq (2 of 2) Jesse: wants to learn about the uses of commercial drones “I ’ m intrigued by the possibilities of commercial drones and want to learn more.” Knowledge: Very limited specific knowledge of commercial drone uses and capabilities. Most likely knowledgeable about hobby-level drones. Wants to explore through examples, case studies, video clips, and owner descriptions of commercial drone applications. Tasks: Arrives at site and looks for video clips of drones performing commercial operations: photography, agricultural surveys, pipeline inspections, security surveillance, etc. Within each usage category, wants to discover more details through product descriptions, examples, and owner comments. Interests: Has a general interest in commercial drone applications and prefers to see an array of ideas and examples. Characteristics: Curious, open-minded; creative, exploratory. Wants to get excited by the possibilities offered by commercial-level drones. Copyright ©2019 John Wiley & Sons, Inc. 27 Understand the Users (2 of 2) • Use scenarios outline the steps that the users perform to accomplish some part of their work. • Presented in a simple narrative tied to the related DFD. Document the most common paths through the use case so interface designs will be easy to use for those situations. • Copyright ©2019 John Wiley & Sons, Inc. 28 Use Scenarios for DrōnTeq (1 of 2) Use Scenario: Focused Visitor User wants to easily develop alternative drone configurations and compare price and performance of the alternatives 1. User selects a drone base model 2. User looks at lists of available options for that model 3. User selects options and wants to learn price and capabilities of that configuration 4. User saves, modifies, or discards that configuration and repeats with other options or other drones 5. User has one or more configurations to save and consider for purchase. 6. User may want to contact a sales representative with questions. Copyright ©2019 John Wiley & Sons, Inc. 29 Use Scenarios for DrōnTeq (2 of 2) Use Scenario: Exploratory Visitor User wants to learn about applications of commercial drones through video clips and written material 1. User views video clips of drones being used in commercial applications 2. User selects an application area and views more clips in that area 3. User reads site marketing material 4. User reads owner descriptions and comments 5. User repeats steps 2-4 for other commercial application areas. 6. User views list of drone models 7. User selects a model and reads site marketing material for that drone. Copyright ©2019 John Wiley & Sons, Inc. 30 Organize the Interface (1 of 2) • Define the basic components of the interface and how they work together to provide functionality to users. • Use Interface Structure Diagram (ISD) • Shows how all screens, forms, and reports are related • Shows how user moves from one to another • Like DFD in using boxes and lines • Boxes denote screens • Lines show movement from one to another • Different from DFD in having no standard rules or format Copyright ©2019 John Wiley & Sons, Inc. 31 Interface Structure Diagram for DrōnTeq Copyright ©2019 John Wiley & Sons, Inc. 32 Organize the Interface (2 of 2) • For Web sites, use site map. • Show how all the information on the site fits together. • Helps establish the hierarchy of information on the site. Copyright ©2019 John Wiley & Sons, Inc. 33 Site Map for DrōnTeq Copyright ©2019 John Wiley & Sons, Inc. 34 Define Standards • Clarify decisions on all key interface elements to ensure consistency: • Basic common elements across individual screens, forms, and reports within the application • Interface metaphor (e.g., calendar, checkbook, shopping cart) • Interface objects (e.g., customer/client; employee/associate) • Interface actions (e.g., buy/purchase/check out; exit/quit) • Interface icons (pictures) representing status or actions (e.g., trashcan for delete; disk for save) • Interface templates (la
yout guide for all screens) Copyright ©2019 John Wiley & Sons, Inc. 35 Interface Design Prototyping • A mock-up or simulation of screens, forms, or reports • Common methods include: • Paper sketches • Wireframe diagrams • Storyboarding • Wireflow diagrams • HTML prototype • Language prototype Copyright ©2019 John Wiley & Sons, Inc. 36 Wireframe Diagram for DrōnTeq Copyright ©2019 John Wiley & Sons, Inc. 37 Storyboard Example Copyright ©2019 John Wiley & Sons, Inc. 38 Language Prototype Example Copyright ©2019 John Wiley & Sons, Inc. 39 Interface Evaluation Methods • Heuristic evaluation • Compare design to checklist • Walkthrough evaluation • Team simulates movement through components • Interactive evaluation • Users try out the system • Formal usability testing • Expensive • Detailed use of special lab testing Copyright ©2019 John Wiley & Sons, Inc. 40 Navigation Design Providing a seamless interaction Copyright ©2019 John Wiley & Sons, Inc. 41 Basic Principles of Navigation Design (1 of 2) • Assume users • Have not read the manual • Have not attended training • Do not have external help readily at hand • All controls should be clear and understandable and placed in an intuitive location on the screen. Copyright ©2019 John Wiley & Sons, Inc. 42 Basic Principles of Navigation Design (2 of 2) • Prevent mistakes • Limit choices • Never display commands that can’t be used (or “gray them out”) • Confirm actions that are difficult or impossible to undo • Simplify recovery from mistakes • Use consistent grammar order (action-object, object-action) Copyright ©2019 John Wiley & Sons, Inc. 43 Menu Tips • Menus enable users to select action from an organized display of action categories and options • Broad and shallow design is preferred • Logical categories can be objects (customers; orders) or actions (insert, design) • Common menu formats include menu bars, drop-down menus, popup menus, tab menus, icon tool bars, and image maps. • Menus may become less popular with trend toward touchscreens Copyright ©2019 John Wiley & Sons, Inc. 44 Message Tips • Common message types include: • Error message • Confirmation message • Acknowledgment message • Delay message • Help message • Strive for clear, concise, and complete messages • Should be grammatically correct and free of jargon and abbreviations (unless they are the users’) • Avoid negatives and humor (it gets old) Copyright ©2019 John Wiley & Sons, Inc. 45 Input Design Entering New Data Into The System Copyright ©2019 John Wiley & Sons, Inc. 46 Basic Principles of Input Design • The goal is to simply and easily capture accurate information for the system • Reflect the nature of the inputs • Find ways to simplify their collection Copyright ©2019 John Wiley & Sons, Inc. 47 Online versus Batch Processing • Online processing immediately records the transaction in the appropriate database • Batch processing collects inputs over time, holds them temporarily, and then processes all the transactions at one time in a batch • Batch processing simplifies data communications and other processes; but master files are not updated real time Copyright ©2019 John Wiley & Sons, Inc. 48 Capture Data at the Source • • • • Reduces duplicate work Reduces processing time Decreases cost Decreases probability of error Copyright ©2019 John Wiley & Sons, Inc. 49 Source Data Automation • Can be obtained by using the following technologies: • • • • • bar code readers / scanners optical character recognition magnetic stripe readers smart cards RFID (Radio Frequency Identification) tags Copyright ©2019 John Wiley & Sons, Inc. 50 Minimize Keystrokes • Keyboard entry is slow and error-prone • Never ask use to key-enter information that can be obtained other ways • Lookups • Dropdown lists • Default values Copyright ©2019 John Wiley & Sons, Inc. 51 Input Tips (1 of 3) Utilize selection controls whenever possible to minimize keystrokes. Type of Selection Control When to Use Notes Check box selection list Presents a complete list of choices, each with a square box in front. When several items can be selected from a list of items Check boxes are not mutually exclusive. Do not use negatives for box labels. Check box labels should be placed in some logical order, such as that defined by the business process, or failing that, alphabetically or most commonly used first. Use no more than 10 check boxes for any particular set of options. If you need more boxes, group them into subcategories. Radio button selection list Presents a complete list of mutually exclusive choices, each with a circle in front. When only one item can be selected from a set of mutually exclusive items Use no more than six radio buttons in any one list; if you need more, use a drop-down selection list. If there are only two options, one check box is usually preferred to two radio buttons, unless the options are not clear. Avoid placing radio buttons close to check boxes to prevent confusion between different selection lists. Copyright ©2019 John Wiley & Sons, Inc. 52 Input Tips (2 of 3) Type of Selection Control When to Use Notes On-screen selection list Presents a list of choices in a box Seldom or never—only if there is insufficient room for check boxes or radio buttons This box can permit only one item to be selected (in which case it is an ugly version of radio buttons). This box can also permit many items to be selected (in which case it is an ugly version of check boxes), but users often fail to realize that they can choose multiple items. This box permits the list of items to be scrolled, thus reducing the amount of screen space needed. Drop-down selection list Displays selected item in one-line box that opens to reveal list of choices. When there is insufficient room to display all choices This box acts like radio buttons, but is more compact. This box hides choices from users until it is opened, which can decrease ease of use; conversely, because it shelters novice users from seldom-used choices, it can improve ease of use. This box simplifies design if the number of choices is unclear, because it takes only one line when closed. Copyright ©2019 John Wiley & Sons, Inc. 53 Input Tips (3 of 3) Type of Selection Control When to Use Notes Combo box selection list A special type of dropdown list box that permits user to type as well as scroll the list. Shortcut for experienced users This box acts like a drop-down list, but is faster for experienced users when the list of items is long. Up-down numeric control Scroll arrows move up or down through numeric range. When entering a numeric value Beginning and ending range values and increments can be defined. Best for entering values with narrow value ranges, such as “Quantity Ordered.” Copyright ©2019 John Wiley & Sons, Inc. 54 Input Validation • Apply a judicious amount of input validation to ensure accuracy. • Types include: • Completeness check • Format check • • • • Range check Check digit check Consistency check Database checks Copyright ©2019 John Wiley & Sons, Inc. 55 Output Design Conveying The Information The User Needs Copyright ©2019 John Wiley & Sons, Inc. 56 Basic Output Design Principles • Understand report usage • Reference or cover-to-cover? • Frequency? • Real-time or batch reports? • Manage information load • All needed information, no more • Minimize bias • Utilize various report types (detail, summary, exception, graphical) and media to satisfy users’ output requirements. Copyright ©2019 John Wiley & Sons, Inc. 57 After reading and studying this chapter, you should be able to: (1 of 2) • Identify and describe the five basic rules of user interface design. • Describe the concept of usability with respect to a system’s user interface. Why is this concept important to the interface designer? • Explain three unique aspects of designing for a touch screen user interface. • Discuss the five components of the
user interface design process. Copyright ©2019 John Wiley & Sons, Inc. 58 After reading and studying this chapter, you should be able to: (2 of 2) • Explain the particular issues associated with design of the system’s navigation mechanism. • Discuss ways to improve the quality of input data captured by the system. • Explain the best ways to produce output from the system. Copyright ©2019 John Wiley & Sons, Inc. 59 Copyright Copyright © 2019 John Wiley & Sons, Inc. All rights reserved. Reproduction or translation of this work beyond that permitted in Section 117 of the 1976 United States Act without the express written permission of the copyright owner is unlawful. Request for further information should be addressed to the Permissions Department, John Wiley & Sons, Inc. The purchaser may make back-up copies for his/her own use only and not for distribution or resale. The Publisher assumes no responsibility for errors, omissions, or damages, caused by the use of these programs or from the use of the information contained herein. Copyright ©2019 John Wiley & Sons, Inc. 60
This way if the Canvas session times out you don’t lose your work. Instructions: Your assignment is to select one website (desktop view), one desktop application, and one mobile application (on your cell phone or tablet), and answer the below questions. This is to be captured in a text submission and entered in the assignment. It would be appropriate for clarity and organization to address each item in a numerical/listed fashion following the format suggestion. Answers are expected to range from 1-3 sentences, but further elaboration is permissible! For each item answer the following. You may use the a) b) c) format for clarity and to speak to each specific system. Before we get started: a) What website did you choose, and what is its “genre” b) What application did you choose and what is its “genre” c) What mobile application did you choose and what is its “genre” [ Genre implies category or theme, such as social media, business productivity, entertainment, etc.] 1) Layout – In 1-2 paragraphs, speak to the similarities, and differences (if any) in the layout of the three interfaces using topics discussed in Chapter 9 of the assigned text. Consider how the purpose and function of the application/system may influence the design/layout 2) Content Awareness – Does each system convey to the user where they are in the system, and what information is being displayed in that location with minimal, if any, effort? If yes, explain why; If not, explain why not. 2a) 2b) 2c) 3) Aesthetics – Are the interfaces functional and inviting through the careful use of colors, white space, colors, and fonts? If yes, describe some elements you noticed; if no, describe the elements contrary to aesthetic goals. Positive elements may include space between buttons, clear colors/contrast, etc. Negative elements may be information dense or heavy, poor color schemes, “busy” patterns, etc. 3a) 3b) 3c) 4) Consistency – Consistency in UI design enables users to predict what will happen before they perform a function/action by leveraging existing knowledge, and it helps promote ease of use and ease of learning. For each system how did it match up against other systems you’re familiar with in that genre, or other programs in its ‘suite’? Was it similar or different? Elaborate in either case. 4a) 4b) 4c) 5) Minimize User Effort – Is the interface simple to use, or is it cumbersome and requires conscious effort to interact with and use? In either case, choose an element as to why and explain (clearly labeled? follow ‘normal’ expectations? fields and buttons are labelled? etc.) 5a) 5b) 5c) Chapter 9 User Interface Design SYSTEMS ANALYSIS AND DESIGN SEVENTH EDITION DENNIS, WIXOM, AND ROTH Learning Objectives • • • • • • • • • • Explain the concept of usability with regard to the user interface. Describe several fundamental user interface design principles. Explain the process of user interface design. Explain ways to understand the perspectives of the users of the user interface. Describe ways to define the structure of the user interface. Explain the standards that should be established for the user interface. Describe various ways to prototype the user interface. Discuss ways to evaluate and test the user interface. Discuss special concerns associated with touch-screen-enabled user interfaces. Be able to design a highly usable user interface. Copyright ©2019 John Wiley & Sons, Inc. 2 Key Definitions • System Interface: “connections” with other systems, where systems exchange information with each other. Designed as a part of program design. • User Interface: “connections” with users. Focus of this chapter. • The navigation mechanism provides the way for users to tell the system what to do • The input mechanism defines the way the system captures information • The output mechanism defines the way the system provides information to users or other systems • Graphical user interface (GUI): most common type of interface in use today Copyright ©2019 John Wiley & Sons, Inc. 3 Usability Concept • The system is easy to use and easy to learn • Tasks are completed more efficiently and with more accuracy • Mistakes with system are reduced • User satisfaction with new system is increased • Adoption of system is more likely Copyright ©2019 John Wiley & Sons, Inc. 4 Interface Design Principles GENERAL GUIDELINES FOR USER INTERFACE DESIGN Copyright ©2019 John Wiley & Sons, Inc. 5 Principles for User Interface Design • • • • • • Layout Content awareness Aesthetics Usage level Consistency Minimize user effort Copyright ©2019 John Wiley & Sons, Inc. 6 Layout Concepts • The screen is often divided into three boxes • Navigation area (top) • Status area (bottom) • Work area (middle) • Information can be presented in multiple areas • Like areas should be grouped together Copyright ©2019 John Wiley & Sons, Inc. 7 More Layout Concepts • Areas and information should minimize user movement from one to another • Ideally, areas will remain consistent in • Size • Shape • Placement for entering data • Reports presenting retrieved data Copyright ©2019 John Wiley & Sons, Inc. 8 Model Layout for Web Page • Note use of multiple layout areas for site navigation Copyright ©2019 John Wiley & Sons, Inc. 9 Content Awareness (1 of 2) • All interfaces should have titles • Menus should show • where you are • where you came from to get there • It should be clear what information is within each area • Fields and field labels should be selected carefully • Use dates and version numbers to aid system users Copyright ©2019 John Wiley & Sons, Inc. 10 Content Awareness (2 of 2) • Note the use of highlighting to indicate menu selections • Breadcrumbs provide additional clues on navigational path Copyright ©2019 John Wiley & Sons, Inc. 11 Aesthetics • Interfaces need to be functional and inviting to use • Avoid squeezing in too much, particularly for novice users • Design text carefully • Be aware of font and size • Avoid using all capital letters Copyright ©2019 John Wiley & Sons, Inc. 12 More Aesthetics • Colors and patterns should be used carefully • Test quality of colors by trying the interface on a black/white monitor • Use colors to separate or categorize items Copyright ©2019 John Wiley & Sons, Inc. 13 Usage Level (1 of 2) • Some people will be frequent, heavy users of the system • Frequent users desire ease of use – quick and easy completion of job tasks • Other people may use the system infrequently • Infrequent users desire ease of learning – quick and easy ways to figure out what to do. Copyright ©2019 John Wiley & Sons, Inc. 14 Usage Level (2 of 2) • User interface design should anticipate the types of users expected. • For systems primarily used by frequent users, include ways to perform tasks directly (hot keys, short-cut keys, etc.). • For systems primarily used by infrequent users, include careful menu designs, tool tips, and extensive help systems. • For systems with both user types, incorporate both user preferences in design as much as possible Copyright ©2019 John Wiley & Sons, Inc. 15 Consistency • • • • Elements are the same throughout the application Enables users to predict what will happen Reduces learning curve Considers elements within an application and across applications • Pertains to many different levels • Navigation controls • Terminology • Report and form design Copyright ©2019 John Wiley & Sons, Inc. 16 Example of Inconsistent Elements Note the different button styles, colors, and font styles. Copyright ©2019 John Wiley & Sons, Inc. 17 Minimize Effort • Three clicks rule • Users should be able to go from the start or main menu of a system to the information or action they want in no more than three mouse clicks or three keystrokes Copyright ©2019 John Wiley & Sons, Inc. 18 Special Issues of Touch Screen Design (1 of 2) • Ideal for information display but not data entry. • Place content at top and navigation controls at bottom so finger does
not obscure content area. • Place labels on top of navigation controls. • Size objects correctly for “fat fingers.” • Include adequate spacing between objects. Copyright ©2019 John Wiley & Sons, Inc. 19 Special Issues of Touch Screen Design (2 of 2) • Consider needs of left-handed and right-handed users. • Bright colors/backgrounds can help reduce glare and hide fingerprints. • Use each device’s standardized gesture interactions to enhance the user’s ease of learning and ease of use. Copyright ©2019 John Wiley & Sons, Inc. 20 Android Device Common Hand Gestures (1 of 2) Navigational Gestures: Help users to move through a product easily. Supplement other explicit input methods, like buttons and navigational components Gesture Meaning/Function Tap Users can navigate to destinations by touching elements Scroll and pan Users can slide surfaces vertically, horizontally, or omnidirectionally to move continuously through content Drag Users can slide surfaces to bring them into and out of view Swipe Users can move surfaces horizontally to navigate between peers, like tabs Pinch Users can scale surfaces to navigate between screens Action Gestures: Perform actions or provide shortcuts for completing actions Copyright ©2019 John Wiley & Sons, Inc. 21 Android Device Common Hand Gestures (2 of 2) Gesture Meaning/Function Tap or Long press Users can interact with elements and access additional functionality Swipe Users can slide elements to complete actions upon passing a threshold Transform Gestures: Transform an element ’ s size, position, and rotation with gestures Gesture Meaning/Function Double tap or Pinch Users can zoom into and out of content Compound gestures Users can fluidly transition between various gestures Pick up and move Users can reorder content with a long press and drag Source: material.io/design/interaction/gestures.html#types-of-gestures Copyright ©2019 John Wiley & Sons, Inc. 22 User Interface Design Process (1 of 2) The path to a successful user interface Copyright ©2019 John Wiley & Sons, Inc. 23 User Interface Design Process (2 of 2) • Understand the Users • • • • Organize the Interface Define Standards Develop Prototypes Evaluation / Testing Copyright ©2019 John Wiley & Sons, Inc. 24 Understand the Users (1 of 2) • Users likely will have very different goals and intentions when using the system. • Use personas to develop characterizations of various user groups. • • • • Interests Typical behaviors Goals and objectives Expectations • Plan a user interface that will be satisfying for that particular user group. Copyright ©2019 John Wiley & Sons, Inc. 25 Personas for DrōnTeq (1 of 2) Martin: wants to learn details about DrōnTeq ’ s products “I ’ m focused on finding the best commercial drone for my business needs.” Knowledge: Understands commercial drones and has specific uses and capabilities in mind for the drone purchase. Tasks: Arrives a site to select and configure custom drones. Wants to be able to easily identify drone models and options to meet his intended purposes. Wants to save and compare several configurations in terms of capabilities and prices. Interests: Has a business interest in commercial drones. Wants to find the best tool to use to fulfill business needs. Cost/benefit analysis is important. Characteristics: Deliberate; thoughtful; expects to be able to develop and compare alternative configurations easily and seamlessly. Copyright ©2019 John Wiley & Sons, Inc. 26 Personas for DrōnTeq (2 of 2) Jesse: wants to learn about the uses of commercial drones “I ’ m intrigued by the possibilities of commercial drones and want to learn more.” Knowledge: Very limited specific knowledge of commercial drone uses and capabilities. Most likely knowledgeable about hobby-level drones. Wants to explore through examples, case studies, video clips, and owner descriptions of commercial drone applications. Tasks: Arrives at site and looks for video clips of drones performing commercial operations: photography, agricultural surveys, pipeline inspections, security surveillance, etc. Within each usage category, wants to discover more details through product descriptions, examples, and owner comments. Interests: Has a general interest in commercial drone applications and prefers to see an array of ideas and examples. Characteristics: Curious, open-minded; creative, exploratory. Wants to get excited by the possibilities offered by commercial-level drones. Copyright ©2019 John Wiley & Sons, Inc. 27 Understand the Users (2 of 2) • Use scenarios outline the steps that the users perform to accomplish some part of their work. • Presented in a simple narrative tied to the related DFD. Document the most common paths through the use case so interface designs will be easy to use for those situations. • Copyright ©2019 John Wiley & Sons, Inc. 28 Use Scenarios for DrōnTeq (1 of 2) Use Scenario: Focused Visitor User wants to easily develop alternative drone configurations and compare price and performance of the alternatives 1. User selects a drone base model 2. User looks at lists of available options for that model 3. User selects options and wants to learn price and capabilities of that configuration 4. User saves, modifies, or discards that configuration and repeats with other options or other drones 5. User has one or more configurations to save and consider for purchase. 6. User may want to contact a sales representative with questions. Copyright ©2019 John Wiley & Sons, Inc. 29 Use Scenarios for DrōnTeq (2 of 2) Use Scenario: Exploratory Visitor User wants to learn about applications of commercial drones through video clips and written material 1. User views video clips of drones being used in commercial applications 2. User selects an application area and views more clips in that area 3. User reads site marketing material 4. User reads owner descriptions and comments 5. User repeats steps 2-4 for other commercial application areas. 6. User views list of drone models 7. User selects a model and reads site marketing material for that drone. Copyright ©2019 John Wiley & Sons, Inc. 30 Organize the Interface (1 of 2) • Define the basic components of the interface and how they work together to provide functionality to users. • Use Interface Structure Diagram (ISD) • Shows how all screens, forms, and reports are related • Shows how user moves from one to another • Like DFD in using boxes and lines • Boxes denote screens • Lines show movement from one to another • Different from DFD in having no standard rules or format Copyright ©2019 John Wiley & Sons, Inc. 31 Interface Structure Diagram for DrōnTeq Copyright ©2019 John Wiley & Sons, Inc. 32 Organize the Interface (2 of 2) • For Web sites, use site map. • Show how all the information on the site fits together. • Helps establish the hierarchy of information on the site. Copyright ©2019 John Wiley & Sons, Inc. 33 Site Map for DrōnTeq Copyright ©2019 John Wiley & Sons, Inc. 34 Define Standards • Clarify decisions on all key interface elements to ensure consistency: • Basic common elements across individual screens, forms, and reports within the application • Interface metaphor (e.g., calendar, checkbook, shopping cart) • Interface objects (e.g., customer/client; employee/associate) • Interface actions (e.g., buy/purchase/check out; exit/quit) • Interface icons (pictures) representing status or actions (e.g., trashcan for delete; disk for save) • Interface templates (layout guide for all screens) Copyright ©2019 John Wiley & Sons, Inc. 35 Interface Design Prototyping • A mock-up or simulation of screens, forms, or reports • Common methods include: • Paper sketches • Wireframe diagrams • Storyboarding • Wireflow diagrams • HTML prototype • Language prototype Copyright ©2019 John Wiley & Sons, Inc. 36 Wireframe Diagram for DrōnTeq Copyright ©2019 John Wiley & Sons, Inc. 37 Storyboard Example Copyright ©2019 John Wiley & Sons, Inc. 38 Language Prototype Example Copyright ©2019
John Wiley & Sons, Inc. 39 Interface Evaluation Methods • Heuristic evaluation • Compare design to checklist • Walkthrough evaluation • Team simulates movement through components • Interactive evaluation • Users try out the system • Formal usability testing • Expensive • Detailed use of special lab testing Copyright ©2019 John Wiley & Sons, Inc. 40 Navigation Design Providing a seamless interaction Copyright ©2019 John Wiley & Sons, Inc. 41 Basic Principles of Navigation Design (1 of 2) • Assume users • Have not read the manual • Have not attended training • Do not have external help readily at hand • All controls should be clear and understandable and placed in an intuitive location on the screen. Copyright ©2019 John Wiley & Sons, Inc. 42 Basic Principles of Navigation Design (2 of 2) • Prevent mistakes • Limit choices • Never display commands that can’t be used (or “gray them out”) • Confirm actions that are difficult or impossible to undo • Simplify recovery from mistakes • Use consistent grammar order (action-object, object-action) Copyright ©2019 John Wiley & Sons, Inc. 43 Menu Tips • Menus enable users to select action from an organized display of action categories and options • Broad and shallow design is preferred • Logical categories can be objects (customers; orders) or actions (insert, design) • Common menu formats include menu bars, drop-down menus, popup menus, tab menus, icon tool bars, and image maps. • Menus may become less popular with trend toward touchscreens Copyright ©2019 John Wiley & Sons, Inc. 44 Message Tips • Common message types include: • Error message • Confirmation message • Acknowledgment message • Delay message • Help message • Strive for clear, concise, and complete messages • Should be grammatically correct and free of jargon and abbreviations (unless they are the users’) • Avoid negatives and humor (it gets old) Copyright ©2019 John Wiley & Sons, Inc. 45 Input Design Entering New Data Into The System Copyright ©2019 John Wiley & Sons, Inc. 46 Basic Principles of Input Design • The goal is to simply and easily capture accurate information for the system • Reflect the nature of the inputs • Find ways to simplify their collection Copyright ©2019 John Wiley & Sons, Inc. 47 Online versus Batch Processing • Online processing immediately records the transaction in the appropriate database • Batch processing collects inputs over time, holds them temporarily, and then processes all the transactions at one time in a batch • Batch processing simplifies data communications and other processes; but master files are not updated real time Copyright ©2019 John Wiley & Sons, Inc. 48 Capture Data at the Source • • • • Reduces duplicate work Reduces processing time Decreases cost Decreases probability of error Copyright ©2019 John Wiley & Sons, Inc. 49 Source Data Automation • Can be obtained by using the following technologies: • • • • • bar code readers / scanners optical character recognition magnetic stripe readers smart cards RFID (Radio Frequency Identification) tags Copyright ©2019 John Wiley & Sons, Inc. 50 Minimize Keystrokes • Keyboard entry is slow and error-prone • Never ask use to key-enter information that can be obtained other ways • Lookups • Dropdown lists • Default values Copyright ©2019 John Wiley & Sons, Inc. 51 Input Tips (1 of 3) Utilize selection controls whenever possible to minimize keystrokes. Type of Selection Control When to Use Notes Check box selection list Presents a complete list of choices, each with a square box in front. When several items can be selected from a list of items Check boxes are not mutually exclusive. Do not use negatives for box labels. Check box labels should be placed in some logical order, such as that defined by the business process, or failing that, alphabetically or most commonly used first. Use no more than 10 check boxes for any particular set of options. If you need more boxes, group them into subcategories. Radio button selection list Presents a complete list of mutually exclusive choices, each with a circle in front. When only one item can be selected from a set of mutually exclusive items Use no more than six radio buttons in any one list; if you need more, use a drop-down selection list. If there are only two options, one check box is usually preferred to two radio buttons, unless the options are not clear. Avoid placing radio buttons close to check boxes to prevent confusion between different selection lists. Copyright ©2019 John Wiley & Sons, Inc. 52 Input Tips (2 of 3) Type of Selection Control When to Use Notes On-screen selection list Presents a list of choices in a box Seldom or never—only if there is insufficient room for check boxes or radio buttons This box can permit only one item to be selected (in which case it is an ugly version of radio buttons). This box can also permit many items to be selected (in which case it is an ugly version of check boxes), but users often fail to realize that they can choose multiple items. This box permits the list of items to be scrolled, thus reducing the amount of screen space needed. Drop-down selection list Displays selected item in one-line box that opens to reveal list of choices. When there is insufficient room to display all choices This box acts like radio buttons, but is more compact. This box hides choices from users until it is opened, which can decrease ease of use; conversely, because it shelters novice users from seldom-used choices, it can improve ease of use. This box simplifies design if the number of choices is unclear, because it takes only one line when closed. Copyright ©2019 John Wiley & Sons, Inc. 53 Input Tips (3 of 3) Type of Selection Control When to Use Notes Combo box selection list A special type of dropdown list box that permits user to type as well as scroll the list. Shortcut for experienced users This box acts like a drop-down list, but is faster for experienced users when the list of items is long. Up-down numeric control Scroll arrows move up or down through numeric range. When entering a numeric value Beginning and ending range values and increments can be defined. Best for entering values with narrow value ranges, such as “Quantity Ordered.” Copyright ©2019 John Wiley & Sons, Inc. 54 Input Validation • Apply a judicious amount of input validation to ensure accuracy. • Types include: • Completeness check • Format check • • • • Range check Check digit check Consistency check Database checks Copyright ©2019 John Wiley & Sons, Inc. 55 Output Design Conveying The Information The User Needs Copyright ©2019 John Wiley & Sons, Inc. 56 Basic Output Design Principles • Understand report usage • Reference or cover-to-cover? • Frequency? • Real-time or batch reports? • Manage information load • All needed information, no more • Minimize bias • Utilize various report types (detail, summary, exception, graphical) and media to satisfy users’ output requirements. Copyright ©2019 John Wiley & Sons, Inc. 57 After reading and studying this chapter, you should be able to: (1 of 2) • Identify and describe the five basic rules of user interface design. • Describe the concept of usability with respect to a system’s user interface. Why is this concept important to the interface designer? • Explain three unique aspects of designing for a touch screen user interface. • Discuss the five components of the user interface design process. Copyright ©2019 John Wiley & Sons, Inc. 58 After reading and studying this chapter, you should be able to: (2 of 2) • Explain the particular issues associated with design of the system’s navigation mechanism. • Discuss ways to improve the quality of input data captured by the system. • Explain the best ways to produce output from the system. Copyright ©2019 John Wiley & Sons, Inc. 59 Copyright Copyright © 2019 John Wiley & Sons, Inc. All rights reserved. Reproduction or translation of this wor
k beyond that permitted in Section 117 of the 1976 United States Act without the express written permission of the copyright owner is unlawful. Request for further information should be addressed to the Permissions Department, John Wiley & Sons, Inc. The purchaser may make back-up copies for his/her own use only and not for distribution or resale. The Publisher assumes no responsibility for errors, omissions, or damages, caused by the use of these programs or from the use of the information contained herein. Copyright ©2019 John Wiley & Sons, Inc. 60