Heuristic Evaluation of WAGER 1. Problem Wager is an app that allows friends to wager certain punishments and rewards for accomplishing certain goals. 2. Violations Found 1. [H1: Visibility of System Status] - SEV 2 After sending a wager out, the user is immediately brought to the Inbox page, on which they can view pending and active Wagers. It is unclear as to whether the Wager which the user believes they have just sent out has actually been delivered. Displaying just the Pending page can be confusing in the case that there are other pending Wagers as well. Fix: A possible fix would be to have a notification which pops up on the page directly after the user taps Wager in order to notify them that the Wager has been successfully sent out. For example, the notification could read: Your Wager invite to Charlie has been sent! 2. [H8: Aesthetic and Minimalist Design] - SEV 1 Although the interface was relatively uncluttered, the choice of text size and colour made actually reading the text on the screen very difficult. There is insufficient contrast between the white or light-green background of the screen, and the slightly darker green text which is placed on it. In addition to this, the text size is very small and is even more difficult to read given the poor contrast. Fix: A quick fix would be to make the green slightly darker with the font size increased. This would allow for better contrast against the background of the screen. 3. [H8: Aesthetic and Minimalist Design] - SEV 1 Although the method of inputting a new Wager is made rather clear to users, the use of underlined fields on the Send Wager page negatively impacts readability. This would be worsened especially when words with letters that extend downwards through the line are concerned, such as Ljubljana, going, aggregate, etc.
Fix: A simple fix would to remove the underline from the text entry field. Making it clear that it is indeed a text entry field can be achieved in other ways, such as by using an indent, increasing font size, placing a box around the entry area, etc. 4. [H2: Match Between System and Real World] - SEV 1 On the Send Wager page, the two text entry areas take up as much vertical real estate on the screen as do the two profile photos and the Send Wager button below. This could be unintuitive for users in that the layout seems to prioritise and emphasise the photos over the actual Wager itself. Thus, a user expecting to be able to easily send Wagers using the app will likely be confused. Fix: An easy fix would be to increase the size of the text entry boxes and to decrease the size of the profile photos, while keeping the size of the Send Wager button the same. 5. [H3: User Control and Freedom] - SEV 3 As an extension of the above, it is unclear to users which Wagers can be renegotiated and which cannot be. In this I specifically refer to the boxes on the right versus the left, as it is not immediately clear which I am allowed to renegotiate (did I fill this particular field in before, or did the person whom I challenged fill this in, meaning that it is a fixed field which I cannot change?). Fix: A possible fix would be to place the renegotiate button in a different position, perhaps closer to the renegotiable field for example. Alternatively, the field which may be edited could be highlighted using a different colour, font size, etc. 6. [H7: Flexibility and Efficiency of Use] - SEV 3 It could be helpful to make accessing a list of sent versus received Wagers a simpler process. In this, I mean that the current interface which lists all sent and received Wagers in one list (assumed to be listed chronologically) can become confusing and require users to manually search through them to find a Wager which they would want to find. There is room for this process to be streamlined. Fix: A possible fix would be to have two separate tabs, one of which caters to sent Wagers and other which caters to Wagers received. This would make the process of locating a specific Wager, or type of Wager, much faster. 7. [H6: Recognition Rather than Recall] - SEV 1
A minor but notable issue is the placement of the home button in the bar at the bottom of the screen. Most users would be accustomed to having the button leading to the main home screen of the app on the left (we see this in apps such as Facebook, Instagram, Twitter, Apple Clock, Apple Photos, and the list goes on). It would be unintuitive for users to have the placement of this button in the middle - this would require them to put in more effort to instantly recall where the button is. Fix: A simple fix would be to switch the positions of the Search button and the Home button (i.e. place the Home button on the left and the Search button in the middle). 8. [H4: Consistency and Standards] - SEV 3 Users might be left wondering what Search on the search page means or does: there is a row of other users whom the main user might know listed directly below, although it is not made clear whether the sole purpose of the Search field is to search for other users whom one can then add as friends, or perhaps to instead search for Wagers made between other friends. Thus, there is a gap in understanding between the word Search and the buttons Add Friend and Send Wager : it is not clear whether they overlap in terms of functionality, or whether the Search field perhaps has nothing to do with either and allows the main user to only view other Wagers which they cannot edit or create whatsoever. Fix: A possible fix would be to have greyed text in the Search field which specifies what exactly it is that one can search for - for example Search for friends and Wagers, or Search to challenge friends, etc. 9. [H8: Aesthetic and Minimalist Design] - SEV 2 This violation goes in the opposite direction from what would be conventionally expected: each friend whom the main user might have has nothing more than a photo and name as information about themselves. This is insufficient and under-generates in that if a user would like to add or has already added multiple friends by the name of John Smith, all of whom have no profile pictures, it could be very difficult or impossible to differentiate them. Fix: A possible fix would be to allow users to add a short bio about themselves and the types of challenges they enjoy receiving. This would also have two positive side-effects: first, it would leave less empty white space on the profile screen for each user, while reducing the possibility that users receive challenges which might be deemed inappropriate, or which they might not want for personal reasons.
10. [H4: Consistency and Standards] - SEV 2 The Recent Wagers page could be confusing in terms of its search bar. A search bar would usually lead users to infer that the search results pulled up would be displayed in a list format, from which they can select a horizontal entry. Although visually-appealing, the grid format of recent Wagers made is confusing in the context of the horizontal search bar directly above it. Fix: A possible fix would be to display Recent Wagers not as a grid, but as a list of examples, or to remove the search bar altogether. 11. [H6: Recognition Rather than Recall] - SEV 2 As a user, I would want to be able to access my current Wagers most easily - definitely more so than a list of recent Wagers between my friends (the current home screen). However, accessing this list is not easy with the current interface, in that a user would have to tap the Messages button, and then select the Active tab (not made the default at the moment). This is not the most intuitive layout for a user who would be more interested in completing current challenges as opposed to scrolling through a list of ongoing challenges between friends. Fix: A possible fix would be to give Active Wagers its own button in the bar at the bottom of the screen, or to make it the default of the Messages screen (and to then make Pending Wagers more prominent by sending users push notifications whenever one is received). 12. [H10: Help and Documentation] - SEV 4 No notifications or indication that use has waiting wager requests from friends. This system has two sides in that it relies on two (or more) users to function. The medium-fi prototype showed only one of the two sides (only the main user point-of-view) and as a result it was unable to clarify the manner in which another user ( friend ) would receive a Wager which I would hypothetically send out to him/her. There appeared to be no notification sent out that would let me know that I have received a new Wager from a friend, which would necessitate my checking of the Messages tab on a constant basis. Fix: An easy fix would be to send users notifications about Wagers received, or to have (red) pop-up number icons next to the mail icon as a less-intrusive notification. 13. [H2: Match Between System and Real World] - SEV 3
There is no possibility of viewing Wagers which I have personally completed (or failed). There are only ways to view Pending and Active Wagers. However, it seems unusual that Wagers between friends which were completed are nonetheless shown on the main home page. Fix: A simple fix would be to list Wagers completed (or otherwise) as a section on my personal profile (beneath the name, photo, perhaps bio, etc.) 14. [H6: Recognition Rather than Recall] - SEV 3 On the page on which the user can renegotiate a Wager, the Renegotiate button (yellow with the circular arrow) is difficult to understand upon first use. It somewhat resembles the Reload or Refresh button that an Internet browser might have, and this could be difficult for users to understand without an explanation message of any sort. Fix: A pop-up dialogue box with an explanatory message, or a new icon design could help to better clarify this. 15. [H8: Aesthetic and Minimalist Design] - SEV 1 The header font choice (I believe it is Tally) is aesthetically distracting. I could see it as being part of the brainstorming narrative (maybe to mimic a casual bet placed between friends), but believe it wasn t the right font choice in final execution. Fix: You can find really nice handwritten fonts here and personally recommend a font like Watch Typeface or Little Antelope which are simple to read and more neutral in style. 16. [H2: Match Between System and the Real World] - SEV 2 Is there another word than Punishment? It s true, Punishment may be the most accurate term. Whenever there is a game, What s the punishment? is thrown around. However, seeing it displayed on the screen, it feels like a heavier word than the lightheartedness of this app. Fix: Maybe use a word such as Penalty. 17. [H8: Aesthetic and Minimalist Design] - SEV 1 Background looks like distracting static that dates the app. I think the design would benefit from a minimalist white background. Fix: If the theme of the app is an intense green, maybe a couple tones of green to diversify and emphasize what are important task flows.
18. [H4: Consistency and Standards]- SEV 3 There isn t that much consistency with font choices that indicate what are higher level actions versus lower level information. New wagers and updates on wagers are communicated in a clean, sans-serif font (a) whereas task items are indicated in a handwritten font (b). This convolutes what actions are lower level or higher level: are app-related communications sans-serif or handwritten? Are fonts determined by task, which may be confusing for the user? Fix: I would recommend that task prompts such as Goal and Reward are in the sans-serif font to delineate between app-motivated queries and user-input information. I would highly recommend this article and this one on font hierarchy to best address what I find is most confusing about the current Wager typography design. a. b. Example: There s a discrepancy between what is higher level information and what is lower. With how the Add friend / Send wager page is organized, Add Charlie as a friend to view wager history feels like lower level information that should be in sans-serif font as opposed to the handwritten font that it is. I would categorize this as an H6 because fonts
are easy and good indicators for the user to be able to mentally organize what the app is telling them is an action item versus what is app-side instructions or user information. Fix: change Add Charlie as a friend to view wager history to Sans Serif and read this essay on font hierarchy 19. [H1: Visibility of System Status] - SEV 2 I wish active wagers were organized either by showing the deadline or by some other measure of priority. If I have a wager deadline coming soon, will it be shown higher on the list? Currently, there s no way to tell whether I could be more concerned about one active wager than another. Fix: Add a prioritization method (a deadline indication in the information summary would work) that s easily viewable. Here s an example. 20. [H2: Match Between System and the Real World] - SEV 4 I noticed that a user has to trade wagers. Can one person wager against another without having to accept a wager against themselves? For example, what if I m Sandip s friend and I just want to keep him accountable for studying 8 hours, but that an independent wager from losing ten pounds? Also, the timelines for the pictured tasks don t exist on similar timelines: does Sandip have to consistently study physics for 8 hours per week until November 10th? Which Friday is he not allowed to go out on? Is there a way to make sure the intensity of wagers is equal if the system
requires a wager be given for a wager? Or can the system be adjusted so that wagers can be independent of each other? Fix: Consider alternatives or an onboarding process that clearly states the relationship of the game. c. 21. [H7. Flexibility and Efficiency of Use] - SEV 3 There s only one flow one can go through to send wagers; think it can be streamlined, particularly if someone is already my friend. Fix: Make this actionable from multiple different paths (like directly when viewing the friend, or when on the friends list if you make a friends list)
22. [H4: Consistency and Standards] - SEV 2 Referencing the image above: can I send a wager before I add Charlie as a friend? Can I view wager history later if I choose to hit the Send Wager button? The navigation at this particular action is confusing. What would happen if I tried to make a wager with someone I m not friends with yet? Is this allowed, and if so, should it be? Fix: Get rid of one of the buttons. Although it is important that the user feel that they have options, sometimes options create black holes of decisions more conducive to bugs 23. [H7: Flexibility and Efficiency of Use] - SEV 1 When I go to search a friend, is there a certain handle I should use? Instagram has @ whereas Facebook is a direct spelling of a person s name; is there a format I should use to find someone? How will I know that person is the correct person I m looking for? Fix: Display handles under the names in a lower-level font so that it s clear what the user should search for in looking for people. Here s a great example of what I mean. 24. [H3 User Control & Freedom] - SEV 1 The deadline seemed to be hard-coded (although I m not sure if this is just a factor of the med-fi prototype). Fix: An option to edit this would be useful. 25. [H4: Consistency & Standards] - SEV 3
How is the search function in the create wager screen and after clicking the search button different? Is one just for creating wagers with existing friends, and the other just for searching for/adding friends? Fix: Providing more information would be helpful. 26. [H3: User Control and Freedom] - SEV 2 Would a user be able to make a wager private? I may not want people seeing that I m trying to lose 10 pounds. Fix: Create a button that creates the option to make a Wager private. 27. [H2: Match Between System and the Real World] - SEV 2 The message tab on the bottom right would intuitively seem to me like a messaging / communications tab to talk to friends. Fix: Would consider redesigning the logo on the button so that it is more indicative of the wager page it represents. (something about betting?) 28. [H1: Visibility of System Status] - SEV 3 Since most of what is being accomplished through the app could be accomplished through a text conversation or by talking with a friend, it would be beneficial to flush out the active wager section to keep users informed about what is going on and to provide updates. Fix: There is not one right approach to this, and it depends on the kind of wager, but for example it could require users to update their progress in a certain time interval (or somehow track it automatically) to then send it to the other person to keep them engaged and motivated to win the wager. 29. [H4: Consistency and Standards] - SEV 1 When Navigating to the wager tab, I can click to go to the active wagers. However, if I go through task 3 (countering wager), when it brings me to the wager screen I can not click on the active wagers button. Fix: Make it accessible.
30. [H3. User Control and Freedom] - SEV 2 Would be good to have an emergency exit after I send a wager I didn t mean to. Fix: Add a delete option. 31. [H3. User Control and Freedom] - SEV 2 When I click on profile, I can t get out of it. Fix: A back button or an x button may be helpful. 32. [H3. User Control and Freedom] - SEV 2 No recovery option if I choose the wrong person after searching. Fix: A back button would be helpful. 33. [H3. User Control and Freedom] - SEV 4 No recovery option if I choose send wager after choosing a person I m stuck there until I make a wager. Fix: A back button or an x button could be helpful. 34. [H6. Recognition Rather than Recall] - SEV 2 I see no place where I can see a list of all the friends I currently have. Fix: Add a friends list. 3. Summary of Violations Category # Viol. (sev 0) # Viol. (sev 1) # Viol. (sev 2) # Viol. (sev 3) # Viol. (sev 4) H1: Visibility of Status 0 0 2 1 0 3 H2: Match Sys & World 0 1 2 1 1 5 H3: User Control 0 1 4 1 1 7 H4: Consistency 0 1 2 3 0 6 H5: Error Prevention 0 0 0 0 0 0 H6: Recognition not Recall 0 1 2 1 0 4 # Viol. (total)
H7: Efficiency of Use 0 1 0 2 0 3 H8: Minimalist Design 0 4 1 0 0 5 H9: Help Users with Errors 0 0 0 0 0 H10: Documentation 0 0 0 0 1 1 Total Violations by Severity 0 9 13 9 3 34 4. Evaluation Statistics Severity / Evaluator A Evaluator B Evaluator C Evaluator D Evaluator E Evaluator sev. 0 n/a n/a n/a 0 0 sev. 1 11% 56% 22% 0 sev. 2 23% 31% 15% 38% sev. 3 33% 56% 22% 22% sev. 4 100% 33% 66% 66% total (sev. 3 & 4) 50% 50% 33% 33% total (all severity levels) 29% 41% 24% *Note that the bottom rows are not calculated by adding the numbers above it. 5. Summary Recommendations Overall, I think the main thing that inhibits the user experience is the ambiguity regarding the wagers, specifically regarding guidelines and monitoring of progress for the wagers. In other words, the way that the wager is currently structured is a little bit unclear for users. In some places, the wager seems to be a one way bet (one person, one goal, one punishment, one reward) whereas in others (like where the wagers are sent) it seems to be a two person thing (each person with a different goal, reward, punishment). For example, the current layout of sending wagers is a little bit confusing. I am not exactly sure how the different goals, rewards, and punishments
interplay within being grouped as one wager. I think it would make sense to either make each person have the same set of goals, punishments, and rewards or to just make each wager an individual wager. Additionally, it would be nice for a user to be able to view a list of their past wagers as well, whether they were completed or not. Additionally, I think it is recommendable to incorporate an onboarding process for users that acts as a sort of tutorial, without explicitly being a tutorial. This is a beneficial way to teach users how to navigate the app and use the important functions, without actually making it seem like a full tutorial is required. Additionally, it can be an easy way to prompt them to invite friends to join the app, as they need friends on the app to set wagers with. Aside from that, I have included some more minor suggestions that I think will help the user interface be more intuitive and robust that you can see above. Additionally, I would highly recommend this article and this one on font hierarchy to best address what the confusing organization of the current Wager design. Severity Ratings 0 - don t agree that this is a usability problem 1 - cosmetic problem 2 - minor usability problem 3 - major usability problem; important to fix 4 - usability catastrophe; imperative to fix Heuristics H1: Visibility of System Status Keep users informed about what is going on H2: Match Between System & Real World Speak the users language Follow real world conventions H3: User Control & Freedom Exits for mistaken choices, undo, redo Don t force down fixed paths
H4: Consistency & Standards H5: Error Prevention H6: Recognition Rather Than Recall Make objects, actions, options, & directions visible or easily retrievable H7: Flexibility & Efficiency of Use Accelerators for experts (e.g., gestures, kb shortcuts) Allow users to tailor frequent actions (e.g., macros) H8: Aesthetic & Minimalist Design No irrelevant information in dialogues H9: Help Users Recognize, Diagnose, & Recover from Errors Error messages in plain language Precisely indicate the problem Constructively suggest a solution H10: Help & Documentation Easy to search Focused on the user s task List concrete steps to carry out Not too large