CMPE 280 Web UI Design and Development August 29 Class Meeting Department of Computer Engineering San Jose State University Fall 2017 Instructor: Ron Mak www.cs.sjsu.edu/~mak

Requirements Elicitation Requires communication between the developers and customers. Customer: users, clients, and stakeholders Client: who pays for your application Stakeholder: whoever else is interested in the success of your application (e.g., shareholders) Customers can validate the requirements. Creates a contract between the customer and the developers.

Requirements Elicitation, cont’d Result: a Functional Specification written non-technically so that the customers can read and understand it.

Bridging the Gap Customers Software developers Have a general idea of what the system should do. Have little experience with software development. Are experts in their domain. Software developers May have little knowledge of the application domain. Have experience with software technology. Are geeks with poor social skills.

Functional Requirements What the system (the application) shall be able to do or allow users to do. The application shall use GPS to determine the user’s location. The application must default to the option most frequently chosen by the users. The application must allow the user to choose between a text display or a graphics display. The user shall be able to make an online withdrawal or deposit.

Functional Requirements, cont’d Describe the interactions between the system and its environment independent of its implementation.

Nonfunctional Requirements Usability, reliability, performance, supportability, etc. The application must respond to user input within 5 seconds. The application shall run on the Windows, Mac, and Linux platforms. The new GUI must resemble the old GUI. Error messages shall be displayed in English and Spanish. Constraints that the system must meet.

Requirements are Strong Statements Use strong declarative statements with “shall” and “must”. The application shall use GPS to determine the user’s location. The application must respond to user input within 5 seconds.

Requirements Must Be… Complete Consistent Clear Correct Are all system features and constraints described by requirements? Consistent No two requirements can contradict each other. Clear Each requirement must be unambiguous. Correct No errors in the requirements.

Requirements Must Be, cont’d Realistic Can the system be implemented? Verifiable Can the system be tested? Traceable Can each requirement be traced to an application function or constraint? Can each application function or constraint be traced to a requirement?

Requirements Must Be, cont’d Understandable Requirements must be written in non-technical jargon-free language that is meaningful to both the application’s developers and the application’s customers.

How to Get Requirements Interview future users of your application. Observe how the users currently work. Can you improve how they currently do things? Can you make them more productive? Stated requirements The customer tells you want he or she wants. Implied requirements What do you think the customer wants?

How to Get Requirements, cont’d Customers don’t always know what they want. They will know more after you show them a prototype. They will change their minds. It’s an iterative process!

How to Get Requirements, cont’d If the developers force the customers to come up with the requirements too soon, they may make something up! Such requirements will most likely be wrong or incomplete and lead you astray.

Use Cases A use case describes a single task that your application must allow an actor to accomplish or a single goal that an actor must achieve. Actors are external agents that interact or communicate with the system. actors = role abstractions An actor can be a person or another system.

Use Cases, cont’d Uses cases are an important way for the developers of a software application and its customers to communicate: What functionality the application must have. What steps to achieve the functionality. An application’s use cases capture the bulk of the customer’s understanding of what the application is supposed to do.

Use Cases, cont’d A use case includes: A complete sequence of actions or events from the point of view of an actor. A primary sequence Alternate sequences (“exception paths”). A sequence is triggered by an actor. Focus on what the system must do, not how to do it. A use case treats the system as a “black box”.

Example: Bank ATM System Log in customer Display balance Shut down ATM Start up Log out Withdraw cash system boundary Operator Customer Bank use cases actor When you draw a use case diagram, do not include the red labels and arrows. interaction UML use case diagram

Example Use Case Description Name: Withdraw Cash Goal: Customer withdraws cash from ATM. Summary: A customer who has logged in can withdraw up to $500 cash in $20 bills. Actors: The customer and the bank

Example Use Case Description, cont’d Preconditions: The ATM has been started up. See use case “Start up ATM”. The customer has inserted a valid bank card. The customer has entered a correct PIN. Trigger: The customer selects the “Withdraw Cash” option.

Example Use Case Description, cont’d Primary sequence: The system prompts the customer for the amount. The customer chooses from a list of amounts or enters a amount. The customer confirms and submits the amount. (The ATM communicates with the bank to check the customer’s account.) The system dispenses the amount in $20 bills. (The bank deducts the amount from the customer’s balance.) The system displays the customer’s balance See use case “Display balance”. At most about 10 steps. Another use case.

Example Use Case Description, cont’d Alternate sequences: 3.1 The customer entered an amount that is not a multiple of $20. 3.1.1 The system displays a message to the customer . 3.1.2. The system prompts the customer for a new amount. 3.2 The customer’s bank balance is insufficient. 3.2.1 etc.

Example Use Case Description, cont’d Postconditions: The customer receives the desired amount of cash. The amount is deducted from the customer’s account. The customer sees the new account balance. OR: The customer receives no cash. The customer’s account is unchanged. What must be true after the use case is done.

Example Use Case Description, cont’d Nonfunctional requirements: The system responds to each customer input within 15 seconds. The system displays messages in either English or Spanish. Glossary customer = a person who wants to withdraw cash from the ATM. bank = a system that maintains customer accounts and balances. etc.

Use Case Description Guidelines Use case names should be verb-object. Each name should describe an achievable goal or doable task (e.g., “Withdraw Cash”). Keep use cases short, simple, and informal. Clients and users need to understand them. No GUI or implementation details.

The Functional Specification Product name Clear problem statement What is the problem? Objectives What is your application supposed to accomplish? Functional requirements Nonfunctional requirements Use cases Primary contents of a Functional Specification

Assignment #1: Functional Specification Each project team creates the first draft of the Functional Specification for its web application. Product name Problem statement Objectives 6 functional requirements 4 nonfunctional requirements Use case diagram with 6 use cases Use case descriptions of 3 of your use cases Later assignments will add screen mockups.

Assignment #1, cont’d Each team turns in one Functional Specification. Microsoft Word document or PDF Canvas: Assignment #1 Due Friday, September 8 at 11:59 PM. Use case description form: http://www.cs.sjsu.edu/~mak/CMPE280/assignments/1/UseCaseForm.docx Formal report rubrics: http://www.cs.sjsu.edu/~mak/CMPE280/assignments/1/FormalReportRubrics.pdf