INTRODUCTION TO HUMAN COMPUTER INTERACTION Rg EXPLAIN USER-CENTERED DESIGN p\erere)s ie] Nemge) INTERACTION DESIGN FOUNDATION “UCD is an iterative design process in which designers and other stakeholders focus on the users and their needs in each phase of the design process. UCD calls for involving users throughout the design process via a variety of research and design techniques so as to create highly usable and accessible products for them.” Meaning, User-Centered Design (UCD) is a repetitive design process in which designers involve users throughout the design process via a variety of research and design techniques to create highly usable and accessible products for them This is why designers always contact their clients to check their feedback because it helps the entire user experience. User-centered design is all about a tailored experience for users. UCD CONSIDERS THE WHOLE USER EXPERIENCE When the design team brings the users into every stage of the design process, you invest your effort and other resources into a powerful way of finding out what works well, what doesn’t and why. Your users are an early-warning system you can use to correct your design. They can expose many aspects—positive and negative—your team may have overlooked regarding such vital areas as usability and accessibility. 6l PageINTRODUCTION TO HUMAN COMPUTER INTERACTION Rg D PRINCIPLES . Aclear understanding of user and task requirements. 2. Incorporating user feedback to define requirements and design. 3. Early and active involvement of the user to evaluate the design of the product. 4. Integrating user-centered design with other development activities. 5. Iterative design process It is quite simple — if you change the design late in the process, then it will typically cost ten times more than if you changed it during the requirements stage. Analysis and feedback are critical. User-centered design makes sure that you design and develop products right from the beginning, exactly what your clients want ESSENTIAL ELEMENTS OF USER-CENTERED DESIGN TE ACCESSIBILITY Users should be able to find — information easily and quickly Users should be able to see from the beginning what they can do with the product, what it is about, how they can Short sentences are preferred here. The easier the phrases and words, the better. Text should be easy to read. 7|PageINTRODUCTION TO HUMAN COMPUTER INTERACTION Rg SOFTWARE DEVELOPMENT LIFE CYCLE (SDLC) SDLC is a process which defines the various stages involved in the development of software for delivering a high-quality product. This process is ass ciated with several models, each including a variety of tasks and 's. This term is also known as the Software Development Process Model. Bld Le ad * Identify the people who will use the product, and how they will be using it. Data gathering is conducted at this stage such as discussion with the stakeholders, brainstorming, interview, gathering what kind of input is required, and what output is expected. eS ed ellaey ue) 1. Collected data is then analyzed to see if requirements can be incorporated into the software that is to be developed. They are used to create ‘Requirements Specification’ . The team may translate the data into Customer Journey Scenarios, low- fidelity wireframes, build maps or navigational structure, and show them to the users. They may also specify business and _ technical requirements for the product. Users will feel included and participate at this stage actively. 3. By the end of this stage, users should clearly understand how they will interact with the product. mre] [em] =] [=] [==] B[PageINTRODUCTION TO HUMAN COMPUTER INTERACTION Rg Se a ees eee Se 4. In this stage, the team may proceed > symbol. * The extending use case is dependent on the extended (base) use case. * The extending use case is usually optional and can be triggered conditionally. INCLUDE RELATIONSHIP ~ “5"* —¢ An association between two use cases where one or use case uses the functionality contained in the other. It is shown as a dotted-line arrow pointing —-—-* toward the use case and labeled with the <> symbol. « The base use case is incomplete without the included use case. * The included use case is mandatory and not optional. 15|Page[-—————__, Confirm Be Request Facebook User INTRODUCTION TO HUMAN COMPUTER INTERACTION Rg HOW TO DRAW A USE CASE DIAGRAM? A Use Case model can be developed by following the steps below. 1. Identify the Actors or the role of the users of the system. 2. For each category of actors, identify all the goals/tasks relevant to the system. Note that each user has different level of access with the system . Create use cases for every identified goal. . Structure the use cases in a logical manner. . Prioritize, review, estimate and validate the users. AY EXAMPLE USE CASE DIAGRAM OF FACEBOOK APPLICATION Login/Register ‘Account Create a Post Interact with a Post Update Friend's List Send Stars (Gaming) Edit Profile Figure 1,0 Use Case Diagram of Facebook Application This is an example of a Use Case Diagram. Do not forget to put Figure Title for each Use Case Diagram (Figure 1.0 Use Case Diagram of Facebook Application). Note that each identified use cases inside the system boundary should be defined using a written use case or User Story. 16|Page ‘Administrator Google PlayINTRODUCTION TO HUMAN COMPUTER INTERACTION Rg WRITTEN USE CASE OR USER STORY User Story, as the name implies, is simply writing the processes of each identified use case in the Use Case Diagram. This identifies the function and flow of the system you are making. + USE CASE TITLE — this is the actual use case in your Use Case Diagram. E.g. Register Account, Create a Post, etc. + DESCRIPTION - briefly describing the goal of the use case in a sentence style. « PRIMARY ACTOR - the one who initiates or interacts with the use case. E.g. Facebook User, Administrator, Google Play * GOAL - the objective of your use case that must be met upon completing the processes. « PRE-CONDITIONS — things that system must ensure are true before the use case can start. E.g. In the use case Send Stars (Gaming), user cannot make this transaction if the account has no enough balance. * POST-CONDITIONS — This is the guaranteed or achieved result of the goal. * USE CASE SCENARIO - defines the step-by-step processes of each use case using a table. Particular process of the Actor and the System should be defined in a logical manner. E.g. Table 1.0 Use Case Scenario of Registering an Account Actor System 1. 2. 3 4. Note that the process may start from the Actor or the System depending on the use case 17|PageINTRODUCTION TO HUMAN COMPUTER INTERACTION Rg EXAMPLE WRITTEN USE CASE OF FACEBOOK APPLICATION Use Case Title: Login/Register Account Description: The user creates or login a Facebook account Primary Actor: Facebook User Goal: To login or create a Facebook Account Pre-Conditions: All required fields must be supplied Post-Conditions: Successfully created an account/logged in Table 1.0 Use Case Scenario of Registering an Account eon 1. Access the system 2. Display Login/Registration Form 3. Supply Needed Information 4. Authenticate Details 5. Display Confirmation Message Use Case Title: Create a Post Description: The user posts a status or picture/video Primary Actor: Facebook User Goal: To create a post or update status Pre-Conditions: The user must be logged in Post-Conditions: Status has been successfully posted or created Table 2.0 Use Case Scenario of Creating a Post Seen 1. Access the system 2. Validates User Account 3. Click ‘Create a Post’ 6. Checks information 4. Write a status or select 7. Displays status/picture/video picture/video 5. Tick ‘Post’ buttonINTRODUCTION TO HUMAN COMPUTER INTERACTION Rg Use Case Title: Interact with a Post Description: The user reacts, comments, or shares a post Primary Actor: Facebook User Goal: To interact with a post Pre-Conditions: The user must be logged in ions: The user has successfully reacted/comment/shared a Table 3.0 Use Case Scenario of Interacting with a Post eon 1. Access the system 2. Validates User Account 3. Browse to the Newsfeed 4. React, Comment or Shares a Post Use Case Title: Confirm Request Description: The user is notified and confirms a friend request Primary Actor: Facebook User Goal: To confirm friend request Pre-Conditions: The user must be logged in Post-Conditions: Friend request has been approved Table 4.0 Use Case Scenario of Confirming a Friend Request Bon 1. Access the system 2. Validates User Account 4. Checks Notification/Friend 3. Displays Notification Requests Section 5. Clicks ‘Confirm’ button 6. Updates Friend List 19|Pagepte INTRODUCTION TO HUMAN COMPUTER INTERACTION Rg Use Case Title: Send Stars (Gaming) Description: The user purchases and sends stars to Creators Primary Actor: Facebook User Goal: To make a purchase and send stars to Creators Pre-Conditions: The user must be logged in and has Star Balance in his account Post-Conditions: Stars sent to Creators and updates Star Balance Table 5.0 Use Case Scenario of Sending Stars to Creators Een 1. Access the system 2. Validates User Account 3. Selects ‘Gaming’ from Menu 4. Displays available Live Gaming Streams 5. Chooses from the list 7. Checks Star Balance 6. Selects ‘Send Stars’ 8. Recommends Stars 9. Purchases Stars thru Online 10. Links account and authenticate Payment details 12. Sends Stars to Creators 11. Updates Star Balance Use Case Title: Edit Profile Description: The user edits/updates personal information Primary Actor: Facebook User Goal: To edit profile Pre-Conditions: The user must be logged in Post-Conditions: The user has successfully updated his information Table 6.0 Use Case Scenario of Editing Profile Seen 1. Access the system 2. Validates User Account 3. Clicks Profile 4. Displays Personal Timeline 5. Ticks Edit Profile and Updates 7. Displays Updated Information Personal Information 6. Click ‘Save’ button 20|PageINTRODUCTION TO HUMAN COMPUTER INTERACTION Og Qa : =| EVALUATE —O Great! You have reached the end of the unit. Workshop 4: Use Case Diagram and User Story Form a group of two (2) members. Each group will have an assigned website/application to create its Use Case Diagram and User Story. The leader will be the one to turn-in the work output including a separate file of their conversation to know whether each member contributes to the team. 21 [Page