Systems Analysis and Design Chapter 8 PDF

Chapter 8 Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage Learning. All rights 1 reserved.  Designing the User Interface Chapter 8 Systems Analysis an...

Chapter 8 Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage Learning. All rights 1 reserved.  Designing the User Interface Chapter 8 Systems Analysis and Design in a Changing World 7th Ed Satzinger, Jackson & Burd Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 2 Learning. All rights reserved. Chapter 8: Outline Understanding the User Experience and the User Interface Fundamental Principles of User-Interface Design Transitioning from Analysis to User- Interface Design User-Interface Design Designing Reports, Statements, and Turnaround Documents Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 3 Learning. All rights reserved. Learning Objectives (1 of 2) Explain the concepts of user experience, user interface, and usability Describe the metaphors that can be used to assist in user-interface design Describe important characteristics of human interface objects that affect usability Discuss the important principles of navigation through a software application Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 4 Learning. All rights reserved. Learning Objectives (2 of 2) Explain how a storyboard can be used to help with user-interface design Describe important guidelines in user- interface design for desktop applications Describe important guidelines in user- interface design for mobile devices Design printed and on-screen reports appropriate to users’ needs Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 5 Learning. All rights reserved. Overview User interface design must consider the entire user experience Good user interfaces are based on good design principles – visibility, affordance, feedback, etc. Poorly designed user interface can make the information system unusable Story boards are a powerful tool for UI design Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 6 Learning. All rights reserved. User Experience User Interface – inputs and outputs that directly involve a human user/actor A dialog goes on between actor and system User interface design must focus on entire User Experience (Human Computer Interaction –HCI) Called User-Centered Design Focus early on users and their work Evaluate designs to ensure usability Use iterative development Usability is the objective Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 7 Learning. All rights reserved. Components of the User Interface Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 8 Learning. All rights reserved. Metaphors of Human Computer Interaction Direct manipulation metaphor metaphor in which objects on a display are manipulated to look like physical objects (pictures) or graphic symbols that represent them (icons) Desktop metaphor metaphor in which the visual display is organized into distinct regions, with a large empty workspace in the middle and a collection of tool icons around the perimeter Document metaphor metaphor in which data is visually represented as paper pages or forms Dialog metaphor metaphor in which user and computer accomplish a task by engaging in a conversation or dialog via text, voice, or tools such as labeled buttons Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 9 Learning. All rights reserved. Metaphor Details Metaphor Description Example Manipulating objects on a display The user drags a folder icon to an Direct that look like physical objects manipulation image of a recycle bin or trash can to (pictures) or that represent them delete a collection of files. (icons) Organizing visual display into distinct At computer startup, a Windows user regions, with a large empty sees a desktop, with icons for a clock, Desktop workspace in the middle and a calendar, notepad, inbox and sticky collection of tool icons around the notes (the computer interface version perimeter of a physical Post-It note). The user fills in a form field for a Visually representing the data product he or she owns, and the in files as paper pages or manufacturer’s Web site finds and Document forms: these pages can be displays the product’s manual as an linked together by references Adobe Acrobat file, which contains a (hyperlinks) hyperlinked table of contents and embedded links to related documents. The user and computer The user clicks a button labeled accomplishing a task by engaging in "troubleshoot” because the printer isn't Dialog working. The computer prints questions a conversation or dialog by using on the display, and the user responds text, voice, or tools. such as labeled by typing answers or selecting buttons responses from a printed list. Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 10 Learning. All rights reserved. Direct Manipulation, Desktop, and Document Metaphors On One Screen Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 11 Learning. All rights reserved. Dialog Metaphor Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 12 Learning. All rights reserved. Principles of User-Interface Design (1 of 3) Human-Interface Objects Affordance – the appearance of the object suggests its function Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 13 Learning. All rights reserved. Principles of User-Interface Design (2 of 3) Human-Interface Objects Visible with Feedback Both visible on the display and provides a response to a user action (feedback) Good examples – radio buttons and check boxes Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 1 Learning. All rights reserved. 4 Principles of User-Interface Design (3 of 3) Consistency Across platforms Within a suite of applications Within a particular application Continuity Consistency across releases over time Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 1 Learning. All rights reserved. 5 Windows Continuity Windows 7 Windows 8 Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 16 Learning. All rights reserved. Principles of User-Interface Design (1 of 5) Discoverability To help users discover “hidden” features or objects Active discovery – mouse hovers, pop-ups, tool tips Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 17 Learning. All rights reserved. Principles of User-Interface Design (2 of 5) Discoverability Visual Diagrams to guide users Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 18 Learning. All rights reserved. Principles of User-Interface Design (3 of 5) Closure Closure on Dialogues – End of a series of actions Protect user’s work – at end and for partially complete work Provide undo to reverse actions Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 19 Learning. All rights reserved. Principles of User-Interface Design (4 of 5) Readability and Navigation Readable text for all users (type, size, color) Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 20 Learning. All rights reserved. Principles of User-Interface Design (5 of 5) Readability and Navigation Clear navigation Reverse navigation – a way out – breadcrumbs navigation Usability and Efficiency Shortcut keys for experienced users Meaningful error messages Simplicity – KISS Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 21 Learning. All rights reserved. RMO Homepage – clean and simple Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 22 Learning. All rights reserved. Transitioning from Analysis to UI Design Use Cases and the Menu Hierarchy We design use case by use case Menus are a typical way to organize access to use case functionality Different types of users might have different menus Useful to design an overall menu hierarchy and then subsets for different users Once the hierarchy is established, menus can be implemented in a variety of ways Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 23 Learning. All rights reserved. Two Different Menu Styles Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 24 Learning. All rights reserved. Some RMO Use Cases (1 of 2) Grouped by Actor and Subsystem Subsystem Use case Users/actors Sales Search for item Customer, customer service representative, store sales representative Sales View product comments and Customer, customer service ratings representative, store sales representative Sales View accessory combinations Customer, customer service representative, store sales representative Sales Fill shopping cart Customer Sales Empty shopping cart Customer Sales Check out shopping cart Customer Sales Fill reserve cart Customer Sales Empty reserve cart Customer Sales Convert reserve cart Customer Sales Create phone sale Customer service representative Sales Create store sale Store sales representative Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 25 Learning. All rights reserved. Some RMO Use Cases (2 of 2) Subsystem Use case Users/actors Order fulfillment Ship items Shipping Order fulfillment Manage shippers Shipping Order fulfillment Create backorder Shipping Order fulfillment Create item return Shipping, customer Shipping, customer, Order fulfillment Look up order status management Shipping, customer, Order fulfillment Track shipment marketing Rate and comment on Order fulfillment Customer product Order fulfillment Provide suggestion Customer Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 26 Learning. All rights reserved. RMO Use Cases Grouped into First Cut Menu Hierarchy Menu description Menu choices (use cases) Intended user(s) Shopping cart functions Search for item Customer (primary or reserve) View product comments and ratings View accessory combinations Switch carts (primary to reserve or vice versa) Fill shopping cart Empty shopping cart Check out shopping cart Sale creation Search for item Customer service and View product comments and ratings View accessory store sales combinations representatives Create sale Order shipment Ship items Customer service and Manage shippers store sales Create backorder representatives Create item return Look up order status Track shipment Customer order control Look up order status Customer Track shipment Create item return Rate and comment on product Provide suggestion Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 27 Learning. All rights reserved. Analysis Models and Input Forms SSD defines input messages, which indicates what forms Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 28 Learning. All rights reserved. Sample Customer Form First draft of RMO Customer Form from SSD information Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 29 Learning. All rights reserved. Dialogs and Storyboards For each use case, think of the natural flow of a dialog between user and computer Based on the flow of activities in use case description and/or the system sequence diagram Use natural language to emphasize feedback to user Create a storyboard of the dialog, showing the sequence of sketches of the screen each step of the dialog. (storyboarding) Review the storyboard with users Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 30 Learning. All rights reserved. From Dialog to Storyboard (part 1) Use case Check out shopping cart SYSTEM: What would you like to do? USER: I’d like to check out. SYSTEM: Okay. What is your e-mail address or account number? USER: My e-mail address is [email protected]. SYSTEM: Fine. You are Nancy Wells at 1122 Silicon Avenue. Correct? USER: Yes. SYSTEM: All items in your cart are in stock and can be shipped today. Because your order subtotal is over $100, you qualify for free UPS ground shipping (3 to 5 days). Other shipping options include next day ($35.00), two day ($20.00), and USPS parcel post ($11.70, 5 to 7 days). How would you like your items to be shipped? Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 31 Learning. All rights reserved. From Dialog to Storyboard (part 1) Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 32 Learning. All rights reserved. From Dialog to Storyboard (part 2) (1 of 2) USER: Free U PS ground shipping. SYSTEM: We have a shipping address on file for you (1122 Silicon Avenue). Do you want your order shipped to that address? USER: No. SYSTEM: To what address would you like the order shipped? USER: John Wells, 1612 Jefferson Street N E, Albuquerque, NM 87123. SYSTEM: Okay, the total charge is $125.56 ($117.90 item subtotal plus $7.66 sales tax). Shall I charge that amount to your credit card on file (a Visa with an account number ending in 0899)? USER: Yes. SYSTEM: Your payment has been approved, and your order is being prepared for shipment. A confirmation e-mail has been sent to you, and another will be sent with a shipment tracking number when the order is shipped later today. Can I help you with anything else? USER: No. Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 33 Learning. All rights reserved. From Dialog to Storyboard (part 2) (2 of 2) Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 34 Learning. All rights reserved. User-Interface Design (1 of 3) Is the system a custom application or browser based? What kinds of devices will the user- interface need to support? What operating systems will the user- interface run on? Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 35 Learning. All rights reserved. User-Interface Design (2 of 3) Desktop and Laptop UIs Layout and Formatting Purposeful designs, location and grouping, no sloppiness or errors Poorly designed form – Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 36 Learning. All rights reserved. User-Interface Design (3 of 3) Data Entry Text box, list box, combo box, radio buttons, check boxes Include online editing to minimize errors Navigation and Visibility Minimize, maximize, close, scroll bars, resize Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 37 Learning. All rights reserved. RMO Windows Form Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 38 Learning. All rights reserved. Sample Web page More navigation controls would help Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 39 Learning. All rights reserved. Considerations for Web-based Applications Layout and formatting Various browser default settings Impact of online advertising Data entry and user actions – client side programming Navigation and visibility – complete yet simple Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 40 Learning. All rights reserved. Extreme advertising Only advertising on this page Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 41 Learning. All rights reserved. RMO Checkout Page RMO shopping cart checkout Simple, easy to read Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 42 Learning. All rights reserved. Smartphones and Small Mobile Devices (1 of 3) Challenges Small screen size, small keyboards and touch screens, limited network capacity, app design guidelines and toolkits Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 43 Learning. All rights reserved. Smartphones and Small Mobile Devices (2 of 3) Layout and formatting Rotating view, resizing, visible navigation, scrolling Data entry and user actions Fat finger and accidental touches Navigation and visibility Show site map Use action bar Visual clues Back button Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 44 Learning. All rights reserved. Smartphones and Small Mobile Devices (3 of 3) Sample prototype for RMO home page display Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 45 Learning. All rights reserved. UI for Tablets Similar to smartphones, except more real estate to display Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 46 Learning. All rights reserved. Designing Reports, Statements, and Turnaround Documents (1 of 2) Report Types Detailed reports -- reports that contain specific information on business transactions Summary reports -- reports that summarize detail or recap periodic activity Exception reports -- reports that provide details or summary information about transactions or operating results that fall outside a predefined normal range of values Executive reports -- reports used by high level managers to assess overall organizational health and performance Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 47 Learning. All rights reserved. RMO Reports (1 of 5) Shopping cart order report Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 48 Learning. All rights reserved. RMO Reports (2 of 5) Inventory report Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 49 Learning. All rights reserved. RMO Reports (3 of 5) Employee benefit report Survivor Protection In the event of your death while working for a participating employer, your designated beneficiaries could receive: Lump Sum Benefits $50,00 Basic Life Insurance 0 $230,0 Supplemental Life Insurance 00 $148,6 Thrift Plan 77 $31,68 Tax Sheltered Annuity (T SA) Plan 6 $255 Social Security for your eligible dependents Systems Analysis and $460,6 Design in aTotal* Changing World, 7th Edition - Chapter 8 ©2016. Cengage 50 Learning. All rights reserved. 18 RMO Reports (4 of 5) You have not elected Universal Life Insurance. If you would like more information on this plan, please call 1-800-555-7772. *Refer to page 7 for additional information on the amount of coverage needed to provide ongoing replacement income. Accidental Death Benefits If your death is due to an accident, your designated beneficiaries will receive the above benefits plus: $100,00 24-Hour Accidental Death and Dismemberment 0 Insurance $100,00 Occupational Accidental Death and Dismemberment 0 Insurance, if the accident is work related Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 51 Learning. All rights reserved. RMO Reports (5 of 5) Monthly Death Benefits If you die before receiving the Master Retirement Plan benefits and you are vested and have a surviving spouse, your spouse may be eligible for a Qualified Pre-Retirement Survivor Annuity. In addition, your family may be eligible for the following estimated monthly benefits from Social Security, not to exceed a maximum of $2,591 based on: $1,11 each child under age 18 0 $1,11 a spouse with children under age 16; 0 or $1,05 for a spouse age 60 or older 8 Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 52 Learning. All rights reserved. Designing Reports, Statements, and Turnaround Documents (2 of 2) Electronic Reports Drill down – to view additional detail related to an item Linking reports to other reports View data grouped various categories Graphical and Multimedia Reports Charting and graphing of data Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 53 Learning. All rights reserved. Electronic Reports (1 of 2) Drill down Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 54 Learning. All rights reserved. Electronic Reports (2 of 2) Charts and graphs Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 55 Learning. All rights reserved. Summary (1 of 3) User interfaces involve direct user interaction with the system. The design of the user interface has a long history as human computer interaction (HCI) and relies on user-centered design, which focuses early on users, evaluates designs to ensure usability, and uses iterative development Metaphors are used to think about the nature of the user interface, and they include direct manipulation, desktop, document, and dialog metaphors. Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 56 Learning. All rights reserved. Summary (2 of 3) Key user interface concepts include affordance and visibility for controls Other key principles include consistency, shortcuts, feedback, dialog closure, error handling, and reversal of actions Use cases are organized into one or more menu hierarchies to arrange functionality for users Dialogs and storyboards are used to design the interaction for each use case based on use case flow of activates and system sequence diagrams Guidelines are available for designing for Windows, Web browsers, and Handheld devices Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 57 Learning. All rights reserved. Summary (3 of 3) Designing inputs involves identifying devices and mechanisms, identifying inputs and the data content, and determining the controls necessary Designing outputs includes designing detailed reports, summary report, exception reports, and executive reports Electronic reports and other outputs can include drill down, graphics, and multimedia Systems Analysis and Design in a Changing World, 7th Edition - Chapter 8 ©2016. Cengage 58 Learning. All rights reserved.