Modern Snack Vending Machine Assignment #1 CPEN 441

Transcription

1 Interface: Modern Snack Vending Machine Name: Kimia Nikazm Modern Snack Vending Machine Assignment #1 CPEN 441 Introduction We are living in an era which technology has become an integral part of our lives, and we are interacting with an abundance of these products every day. Having new products in the market every year has become quotidian and we are cultivated to adopt to these new technologies. When hearing about our first assignment, multiple products came to my mind that I have always found their design infuriating despite their simple functionality. Hence, I decided to write about a simple snack vending machine (figure 1 2) located at Irving K. Barber building on the UBC campus. And elucidate how it s interface fails to follow some of the facets of the best design practices. Using a vending machine is self-explanatory, hence it takes the first-time users couple seconds to figure out the order of steps they need to take to use the machine. The user must first insert a bill, credit card or coins. Meanwhile it is very ambiguous where the bill or the credit card goes, the user can finally move on and search for the assigned code of the product which he/she wants to purchase and inputs the code to retrieve the item. Functionality and Stakeholders This vending machine s main functionality is to dispense snacks such as Twix, chips, M&Ms etc. One can access this functionality after inserting a certain amount of money or credit and inputting the product s code and pushing the OK button. Vending machines are usually seen on campuses, schools and hospitals. Students, teachers and employees are the primary users of this specific interface. In addition, parents and anyone who visits the campus might use this vending machine. This system enables its users to buy snacks without having to interact with any salesman. There are no line ups hence providing a time efficient experience to the user. 1

2 Figure 1 Figure 2 Requirements of the selected Interface Functional Requirement 1 Dispense the right product when the code is entered 2 User be able to delete and re-enter the code 3 Read the inserted bills and calculate the coins correctly 4 Read mastercards and visa cards when inserted or tapped and charge the right amount 5 Calculate the change correctly and dispense it 6 Put constraints on selecting an sold-out item. 7 The product should cost less than or equal the money the costumer puts in User Experience Goal When using the vending machine, the experience should be: Non-functional Requirement Response time - The machine should dispense the selected snack no longer than 20 seconds Readability - the user must be able to comprehend the purpose and control flow of the system Safety - the vending machine should be stable and doesn t fall on anyone Reliability - should always dispense Efficiency - to have enough money and product until it gets re-stock again 1) Satisfying Easy to learn, easy to follow which brings a satisfying experience 2) Enjoyable Feedbacks, colors and look of a system brings an enjoyable experience 3) Exciting Sounds and waiting for the next step to happen while using the system brings excitement. Hence the vending machine must be usable to allow the user to have a satisfying, enjoyable and exciting experience when using the machine. A product s usability goals: From high to low priority: 2

3 1) Easy to learn- A vending machine is all about time efficiency and giving the user what they want in a short amount of time. Hence it should be simple and easy to learn. 2) Effective and efficient to use Easy to select products, having a high response time 3) Having good utility Question 1: Does the flow of the system reflect the existing mental model of its users eliminating the need of any user manuals? Question 2: Does the design and placement of each component make the machine efficient to use? Question 3: Does the interface utilize a fast and efficient selection of the products? Three UI Problems A simple, self-explanatory product such as a vending machine should not have a user manual, and when it does, it demonstrates its bad design. Problem 1: As it is shown in figure 3, designers have used big round numbers to guide the users of what steps they should take. However, they have failed to notice that the numbers have the same visual affordance as the buttons. They are using the same shape and color of clickable buttons which is used for entering the products codes. Hence users subconsciously might want to press the numbers before starting each task. After users noticing that those are not buttons and having their time wasted, they have to forget about the numbers and either look for a user manual or try to figure out the sequence of steps on their own. The next question is whether the user should first enter the product s ID which he/she wishes to purchase or pay first. Most of the people have the mental model of selecting items first then pay. This mental model has been shaped when people are shopping at a store or even doing an online shopping. Hence, the first instinct is to input the product s code, and before they know it, the machine constraints doesn t allow the products to be dispensed without the money being inserted. This is not an efficient learning curve, leaving the user annoyed. Problem 2: Another major design failure of this system is the placement of components and their stickers. As it is shown in figure 4, the graphic display hints the user to swipe the card right above the bill input, it is easy to misjudge the bill input with the card input. It takes the user another second to read all the stickers before looking for the card input. This is clearly a mapping problem in the design. The card input is located underneath the component and it is hard to locate, resulting in an infuriating user experience. Problem 3: The last problem answers the third question. There are various number of items in this machine, each having an assigned code. The codes are in a small font and all jammed up underneath each product. Additionally, the item window takes up a vast portion of the machine hence making it more difficult for the user to look for the code. And once the correct code was memorized, then the user needs to move all the way to the right side to enter the code. Maybe go back to check the code to make sure it is correct. How many times have you entered the 3

4 wrong code and needed to take an extra step to correct it? Or even got the wrong item because you never realized you entered the wrong code? Well, this machine, after you input the whole code dispense the product even if you hit the x button. This experience takes away the fun, exciting experience which the user wants to have. Figure 3 Figure 4 Proposed Solution Solution to problem 1: Having square numbers, with no plastic cover and different color will differentiate them with the existing buttons and eliminates the confusion. Users no longer think the numbers are buttons which they must press before starting each step. This can be done at no extra cost since the money going into creating the round shape numbers will go to the square numbers. However, the procedure of buying the item must reflect the user s mental model. Hence, my proposed design is to move the keypad for entering products code up. And instead of having the card reader component first, have the keypad at the top. And move the card reader to where the keypad is currently located at. In addition, change the display to say: Please enter a code to begin instead of Ready. (figure 2). This solution provides a faster and more efficient learning experience for the user. Budget: o Programmer to reprogram the machine to reflect the new step and change the screen display accordingly o o Cost: Approximately 2 working days -16 hours => ~$24/hr => $382 QA team to verify the new design Cost: Approximately 2 working days - 16 hours => ~ $24/hr => $382 1 Engineer and 2 in marketing team go over the design Cost: Approximately 2 working days - 16 hours => ~30/hr => $1440 Total Cost for Solution 1 = $2204 4

5 Solution to problem 2: Visible Mapping is one of the facets of the good design practice. I propose removing the Cash input from the card reader component and place it underneath the coin input. This way, user s mind will automatically know that is a Bill input without having to read the stickers. And leaving the card reader as is. This design has no additional cost as it is just a replacement of the existing components. Solution to problem 3: My proposed solution is to replace the current code displays with little digital displays. As the user finishes entering the code, the digital display will turn blue and a positive/happy noise should be played from the machine to grab the users attention to the selected product. Indicating which product will be dispensed after pressing the okay button. In addition, the name of the selected product should get displayed on the graphic display which is located above the keypad. By adding this indicator, the machine gives the user a chance to simultaneously see which product is selected before hitting the okay key. The X key should be enabled such that it can both clear the code or end the transaction. The light along with the happy noise will trigger an exciting emotion in the user, solving the third problem. Budget: o Components: 36 digital LED displays to replace all the existing. Similar component can be found at the price of ~ $ Total: $8.28 o Labour: Programmer to program the LEDs to respond correctly to the inputted code and the display to show the correct product name Approximately 5 working days 40 Hours => ~$24/hr => $960 QA team need to verify if the feature is working Approximately 2 days of work 16 Hours => ~$24/hr => $384 1 Engineer and 2 marketing team to go over the design and approve Approximately 1 day of work 8 Hours => ~$30/hr => $720 Total cost for solution 3 = $

6 EECE418 Assignment 1: Self Assessment Report Name: Student #: Date: Note: each element must have a justification; otherwise it will be assumed Strongly disagree. If additional space is needed for a justification, use a separate page and label justification with the Assessment. Assessment 1. Title page includes all elements. 1 = Strongly disagree; 2 = Disagree; 3 = Neutral; 4 = Agree; 5 = Strongly Agree n/a = Not applicable. 2. The primary functionality of the interface is described well. 3. How each function is accessed is described clearly. 1

7 4. All the relevant stakeholders are identified. 5. The impact of the interface on each stakeholder is described well. 6. The functional requirements from the users point of view are identified well. 7. The non functional requirements from the users point of view are identified well. 8. Constraints on the system related to the user experience are clearly described. 9. The list of usability and user experience goals is clearly articulated. 2

8 10. The priorities assigned to the items in the list of usability/user experience goals are well justified. 11. From the prioritized list of goals, three main usability and user experience questions are identified. 12. For each usability and user experience question identified, the performance of the current system is well analysed and documented. 13. The list of goals have objectifable measures for evaluating the user interface. 14. Three significant problems with the interface have been identified. 15. All the problems identified are related to the user experience. 3

9 16. None of the problems identified are technical issues. 17. None of the problems identified are nice to have features. 18. Three possible solutions are clearly identified. 19. For each problem, the solution presented is well thought out and described how it solves the problem. 20. The budget captures the main costs associated with each solution. 21. The budget doesn t miss any obvious costs. 4

10 22. The budget doesn t have any irrelevant costs. 23. The figures in the budget are well justified from reliable sources. 24. The presentation of the report is easy to read. 25. There are no grammar or spelling errors in the report. 26. Material over the recommended 3 pages (i.e. appendices, tables, figures, text) is well justified. Comments: 5

11 6