6.813 GR-6: User Testing
Group Order
Michael Grinich
Salman Ahmad
Jana Yamani
Assignment: http://courses.csail.mit.edu.ezproxy.canberra.edu.au/6.831/2012/handouts/gr6-user-testing/gr6.shtml
Design
One of our main goals for this application is to make it compatible with different devices. Below we present the interface on an iphone and a computer. We also present the different features and the reasons behind these choices.
Overview screen
When you go to GroupOrder, the first thing you see is a clear step by step process of how this app works. During the paper prototyping we got positive feedback on this as well as the big red button and how easy to notice its clickability (red button = clickable). Our intentions back then was to make it clear for the paper prototyping user that anything red can be clicked. But we ended up carrying the red button with us to the computer prototype where this became the signature design of this app.
Navigation Bar
The navigation bar was one of the parts that we iterated on the most. We initially had the following
We realized two things with it: 1) It did not scale well with the resizing of the screen, and 2) people were perceiving gray as something which is incomplete or inactive (This was one the comments in the heuristic evaluation).
...
The other decision we had to make is whether it should be clickable or not. We have been looking around and saw that many online navigation bars were unclickable. We wanted to carry this external consistency and do the same.
Truck selection
As mentioned before, the results from the heuristic evaluation showed that users perceived gray as inactive and red as active in our app, hence, we decided to gray out temporarily unavailable truck. In addition, we also added a note that says “coming soon” if people end up hovering over it or were willing to click on it for a better system feedback.
Menu/Order Page
unmigrated-wiki-markup
We also iterated considerably on the method of selecting quantity. Our original interface, shown below, had a \ [+1\] and \ [-1\] button. After user testing, we received the feedback that it was unclear what these buttons did and users were unsure how to remove an item. We originally thought this had to do with the ambiguity of \ +1, so we changed the label to an up arrow and down arrow. However, this was even more confusing in that the arrows appeared to somehow control the vertical arrangement of the table. Not good.
Tangential to this, we also discovered the issue that when incrementing quantity, the only visual response was the item quantity value under the right “Your Order” section. Users would click on the left side of the page, and not receive any feedback visually close to the button. This was even more so an issue on mobile devices, where the “Your Order” section would be positioned below the entire menu by our fluid layout. In this system, users would have to click to add an item, scroll down to confirm it was added to the cart, scroll up, and continue shopping. Also, not good.
...
This visual simplification led to quicker ordering and much more natural user experience. It also solved the tap-scroll-check-scroll on mobile devices.
Initially had +1/-1 and two columns
Changed buttons to up/down arrows
Order confirmation & validation
We also added a required field for name, as well as 10-digit phone number validation for the mobile number in almost any format (supports hyphens, parentheses, etc.).
Confirmation
After our heuristic evaluation, we added more information to our order confirmation page. Many users were unclear about what happens when their order was placed and how to contact the site to change an order. We added a phone number to call for questions, which is how we imagine support would be handled for this service with an alpha launch.
Previous screen
Implementation
GroupOrder is a single page Web application using HTML, Javascript, and CSS. The different parts of the user workflow are dynamically shown and hidden using Javascript.
...
The full list of the technologies used include: HTML5, Javascript, CSS5, jQuery, jQuery UI, Twitter Bootstrap, Handlebars.js, and Google Web Fonts.
Evaluation and User Testing
User Test Process:
Our target audience are people within the MIT community. So for this test cycle we chose MIT graduates and undergraduates. The test starts with a one minute application brief, then users were asked to carry on a task.
Briefing:
GroupOrder is a website designed to allow people to order food for delivery from food trucks at MIT. We are going to ask you to carry out a task.
Tasks:
1. You are at the Media Lab and you decided to order the following from clover: 2 Soy BLT Sandwiches, 1 Coffee, 1 Egg & Eggplant Sandwich.
2. You are at the Media Lab and you decide to order the following from Clover: 1 BBQ Seitan Sandwich. After arriving at the “checkout screen” you remembered you’ll be in Stata at 12:30, so you decide to change the location for delivery.
3. Being a nice person, you decided to get lunch for yourself and your friend delivered to the Koch building. You want to order an Parsnip Cheddar Sandwich from Clover. Your friend, on the other hand, wants to order the City Beef from City Wok.
Observations:
Tester 1: (Task 1)
This tester ran the application on a laptop. He thought the application was very clear, smooth and easily usable. His only comment was that since he’s using a widescreen the distance between the menu items and +/- buttons was too big. However, when he resized the browser screen he was satisfied by the adjusted distance.
Tester 2: (Task 3)
This tester ran the application on a laptop. She added the first order from Clover, then went back to the truck menu and saw that the order was emptied when she chose the other truck. At this point, she was confused and asked whether she can add items from different trucks to the same order. She then realized she needed to create 2 separate orders. At the end of the task, she mentioned that the navigation of the application was nice but she would’ve loved to be able to order from different trucks with one order request.
Tester 3: (Task 2)
This tester ran the application on the iphone. Everything went well until the tester was asked to go back and change the location. He was not sure which navigation step was the location, so he had to go back a few steps until he found the location. He mentioned that it would be clearer if all navigation steps were titled, instead of the current step only, because this way you know exactly how the steps are organized and what’s coming next. Also, he mentioned that at first, he did not notice the small toggle that maps the title to its step location because of its small size, it would’ve been less confusing for him if the toggle was clearer to see.
Usability problems:
Problem | Severity | Solutions |
Long distance between order item and +/- buttons | Cosmetic | Reducing the width of the screen solves this problem, no further fixes within code is needed |
Inability to place multiple food truck items to one order | Minor | Put a checkbox next to each truck that you want to view and order from, which will automatically accumulate the menus of all these trucks in the next page |
Navigation steps unclear on a phone display. | Cosmetic | Ability to view navigation step title when you hover over the step number (on computer) or click on it (on phone) |
Toggle too small to notice which step the title corresponds to. | Cosmetic | widden the toggle and color it differently so users can distinguish where the toggle is coming out of |
Reflection
One hugely important aspect of our iterative process was focus. Early on, we decided to pick a seemingly simple problem (group food ordering) as our design topic, while others in the class were choosing more ambitious ideas. We wondered if this would mean it would be too easy to come up with a solution.
...