As we’re using an iterative approach to design we performed yet another round of testing with users to gather feedback about the design. With each round of feedback we have found it rather interesting to observe the various points that people have identified with the prototypes with problems noted become increasingly specific and fine-grained. Hopefully this means we are on track with our design and that the eventual product will be a highly usable app.
The noted issues in the version were mainly in specific UI elements that behaved differently than expected or indicated something that they weren’t intended to do. They included the following:
- The indicators on the new change members section which showed green for a currently active shopping member and red for an inactive member were found to be confusing for some users with them being interpreted as indicating the suitable
- When tapping on some buttons (the Foodgies Family button on the main menu in particular) the animation showed a “slide right” animation which gave a false impression of the order of action since it looks like the app is going back instead of forwards to a new screen. This was disorienting some users
- On the select members screen at the start of the shopping trip, though the checkboxes could be tapped to add/remove members, users found they couldn’t tap on the names of members to perform these actions
To resolve these issues the second version of the high fidelity was modified to include the following:
- The change member indicator were changed to show a green ringed circle with a white background for active and grey for inactive
- The animations for various screen transitions were modified to wipe in the direction that better made sense in terms of the app’s overall hierarchy
- The names on the member select screen now perform the same function as the checkboxes when adding and removing members from a shopping session
The updated (and likely final version) of the prototype can be found at the same link as before which https://marvelapp.com/49ihb5j/
After spending the past week improving our first paper prototype, today we have finally tested out our new updated version and gathered some useful feedback which would help guide us towards our high fidelity product.
We mostly focused on changing the sections that testers found confusing last week and used their feedback to build and improve on top of our first paper prototype since there was generally good feedback to suggest that we already had a solid structure.
The were a few recurring issues that users spotted and found confusing. These were:
- The Hamburger icon and its use was not well identified.
- It was not clear who testers were shopping for in capture mode.
- Some feedback bars were mistaken for input buttons.
- Some buttons broke the app navigation fluency.
We decided to look at each individual point separately to ensure that we could really focus on improving the problem that our users found difficult. We thought that this was the best way of approaching the task as we would not be distracted by the issues of other interface elements and could work on improving one aspect until it was perfected.
Analysing each problem that was reported helped us to come up with our current updated paper prototype which is starting to take shape and is getting closer to out final high fidelity prototype.
As well as getting external users to test our product, we also thought it would be beneficial to test the prototype among ourselves. From doing this, we found that the hamburger button was not really useful as it would only contain two buttons: a help section, and a button to update who you were shopping for. We realised that the hamburger icon did not directly convey this information and so decided to swap the hamburger icon with something that users would easily recognise as an ‘update member’ function:
There was also an issue with the profile customisation page we found – specifically the allergy selection process. To improve the page, we tried to make the interface clearer. For instance, once the user selects their dietary requirements from the list, we had a box which contained their options. However, the placement of this box was confusing as many people thought this to be a button that could be interacted with. In order to resolve this, we moved the box just below the list so that the user would first see the list and then a clear feedback when they added their allergies.
Finally most testers found it difficult to understand who they were shopping for when they were on the camera section. To attempt to resolve this issue, we found a temporary solution before the second prototype test and then a final one after completing it.
The first solution would work together with the new swap member icon that we have just added;
when users open the icon, a list of active members would pop up with the option of adding new ones. The problem we encountered, was still the visibility of the icon;
a majority of our testers barely saw the new icon design and skipped over it.
The change we made after the second round of testing seemed to be the best option as users understood the section better. We added the icon next to the scanning button to make it more visible and user accessible. When you user clicks on the icon, a bar would pop up vertically along the screen capture and shows the current people you are shopping for and the option of adding more shoppers directly from the bar.
Earlier today we tested the paper prototype that we collectively designed to model our mobile app. We created a number of different tasks that we wanted the user to complete in order to help identify keys problems with the user interface. The areas we focused on were:
- creating a new user account
- adding food allergies of household members
- scanning products to identify their allergy content
We performed testing with three people all who had different levels of experience with diet monitoring applications.
Overall, the impression that users gave us was quite positive. They were impressed with the simplicity of the app and the general ease of use for common tasks. However, one of the main areas which was identified as a weakness was in changing up the active users mid shop which was confusing for all of our users; they later told us that the “hamburger” wasn’t an obvious way to achieve this. Other things which were noted were that some elements such as info bars appeared to be tappable when in fact they were not.
We are going to use this feedback to make a number of changes including the following:
- changing the hamburger icon to a “swap users” button
- reposition some of the feedback bars so that it is less likely to be perceived as tappable
- more visibility on the capture screen of who is being shopped for
- relabelling of some buttons to make it clearer as where they take would take the user
We will perform another round of testing with these new changes before we move to the final stage of prototyping where we will produce a high-fidelity prototype.