Issuu on Google+

Wally User Experience Expert Review #1 By Jeremy Kong Farhood Basiri • LIS4381 • Wally – Smart Personal Finance for iPhone • October 16th, 2013

Jeremy Kong • Wally – Smart Personal Finance • Review 1 • October 2013

1


INTRODUCTION This report details my review of the user experience for the Wally iPhone app; build version 1.4 from October 2013. To obtain a comprehensive understanding of the application and its features, I first spent an extended amount of time using the app while taking notes of issues or points of frustration that I encountered. After this initial stage, I used the app to track my purchases over the next week to see how it performed in everyday situations, as utilizing the app in the real world creates a different user experience than sitting down and meticulously analyzing the app. Usage periods relevant to this review: • 7 October 2013 afternoon in Tallahassee, Florida: calm home setting • 9 October 2013 mid-day in Tallahassee, Florida: busy public setting • 9 October 2013, afternoon in Tallahassee, Florida: calm home setting • 10 October 2013, evening in Tallahassee, Florida: calm public setting • 12 October 2013, afternoon in Tallahassee, Florida: busy home setting • 12 October 2013, evening in Tallahassee, Florida: busy public setting I compiled my notes, findings and analyses into the following sections. 1. The Out-of- box Experience (OOBE) focuses on users first contact with the app. 2. The Usefulness/Data Quality section focuses on accuracy and reliability of the data provided. 3. The Interaction section analyzes the mechanics of the user interface and critiques the individual functions of the app. 4. The final section is Aesthetics, Graphics and Branding, which focus on the use of color, graphics and visuals throughout the application. Each section features a major issue as well as several other issues that arose through my use of the application. A solution or suggestion is provided to remedy each of these issues.

Jeremy Kong • Wally – Smart Personal Finance • Review 1 • October 2013

2


1. OUT-OF-THE-BOX EXPERIENCE Top issue: The user is immediately required to enter personal information and is unable to use the application if they do not go through with this process. When a new user downloads and launches the application, this is referred to as the out of box experience. This initial user experience is of the utmost importance because it is this process that forms and leaves a lasting impression on the user, which if positive, can encourage the user to habitually use the application, but if negative, may cause the user to cease using the application or worse, delete the app altogether. Example: User X downloads the Wally app for the first time and wants to record their recent purchase of a pair of shoes. User X would need to: 1) Open the Wally app 2) Swipe through 6 introduction screens 3) Enter their full name 4) Enter their e-mail address 5) Enter their date of birth 6) Select their gender 7) Select “Start using Wally” 8) Input “100” for the amount spent 9) Select “What” 10) Select “Personal” from the “Aspects” category 11) Select “Clothes” 12) Select “Shoes” from the options beneath the categories 13) Select “Done” 14) Select “Save”

Recommendation: Do not require personal information from the user at start up.

Figure 1: User is asked to provide personal information

Providing personal user information neither alters the functionality of the app nor enhances the user’s experience, but instead causes the user to question why they are being asked to provide this information. The explanation given for this requirement is so that the developer can notify the user of major updates; however, users are already notified of updates through the app store. As well, iOS 7 now has a setting where the user can have their apps updated automatically. A major point of frustration arises when the user discovers that they are unable to bypass this step and find instead that if they do not enter their personal information, they are denied access to the main functions of the app. If the user did not have to perform these extra steps, all of their actions would be dedicated towards the main function of the application, recording an expense. From Apple’s iOS HIG: "Delay a login requirement for as long as possible. It’s best when users can navigate through much of your app and use some of its functionality without logging in. Users often abandon apps that force them to log in before they can do anything useful.” Jeremy Kong • Wally – Smart Personal Finance • Review 1 • October 2013

3


Other out-of-box experience issues: “Pull and release” gesture is used in an unexpected way. A “pull and release” gesture is used to add a new expense. This gesture is commonly used to refresh the page and load new content. This is the first time I have seen this used to input new information into the application. I discovered this gesture entirely by accident while interacting with the main content. I had to backtrack to the main page in order to see what I did and how I ended up on this page.

Figure 2: Pull and release gesture used to add an expense in Wally

Figure 3: Pull and release gesture used to refresh content in Mail

Recommendation: Remove the “pull and release” gesture and instead have the user select the existing plus icon in the navigation bar to add a new expense. From Apple’s iOS HIG: "Avoid creating custom gestures that invoke the same actions as the standard gestures. People are used to the behavior of the standard gestures, and they don’t appreciate being expected to learn different ways to do the same thing.” While the “pull and release to refresh” gesture is not included as one of the standard gestures outlined by the Apple’s iOS HIG, it is a gesture that users are familiar with, whether they have used it in a 3rd party app, such as Facebook or Instagram, or with one of the native iOS apps, such as Mail. Removing this gesture from the Wally app will not hinder the user, as they are already familiar with the basic gesture of tapping an icon to perform an action. The plus icon used for adding a new expense is also a familiar one that is found within many of the native iOS apps, which eliminates any possible confusion regarding what action will be performed should the user tap on the icon.

Jeremy Kong • Wally – Smart Personal Finance • Review 1 • October 2013

4


2. USEFULNESS, TRUSTABILITY, DATA QUALITY Top issue: Location data is sourced from Foursquare and the majority are usergenerated locations that do not apply to a user attempting to record an expense. Data quality is important for a number of reasons. First, good quality data is encouraging to the user and reinforces a sense of trust and reliability to the application. Good quality data can also help enhance the usability and effectiveness of your application. In Wally, users are able to add a location to their expense. The location services are powered by Foursquare. This means the developers of Wally do not have to provide the location information themselves. However, because the information is not generated or maintained by the developer, the developers do not have control over the quality of the data provided. This becomes an issue when adding locations because the intended use of Foursquare is different than the intended use of Wally. This disparity has an effect on the usefulness of the data provided to the user. To test the accuracy of the location services, I generated a new expense from my home and analyzed the nearby location results. I expected to see businesses and establishments such as the Sweet Shop or Wolff Tan, which are two of the closest businesses to my house. However, my query was met with a series of fictional locations that range from the “Da Roof” to “Hell”. Out of all the results I was given, only five were viable options that could be applied to a purchase or expense being added. A user who does not realize this information is from Foursquare would assume that these locations are provided by the application and their developers and may be interpreted as unhelpful and unprofessional.

Recommendation: Change the location provider to a service like Yelp, which features active businesses. This would eliminate the unhelpful user generated options and narrow the choices down to locations the user would record an actual expense from.

Figure 4: Location data is user generated and is not relevant to the function of this app.

Jeremy Kong • Wally – Smart Personal Finance • Review 1 • October 2013

5


Other data-related issue: Unclear labels and icons can be misunderstood. When designing an app, one universal objective is to make your app as user friendly as possible. Your user should know what the result of their actions are before they perform them, whether that is tapping an icon or interacting with a menu. The top issue with the usefulness of the app’s main function, recording and tracking expenses, has to do with the labeling and with the placement and choice of color. The first issues arise when inputting a new expense or purchase. The left button is labeled “What” and features a box icon on it. From the icon and label, it is difficult to understand what the button is for at first glance. The intended use of this button is to access the categories and aspects of each purchase so the user has a better understanding of their spending habits. Changing the description of this button to something more descriptive would clarify its use. This change would also affect the “Where from” button. Previously the labels were both questions, now to maintain cohesion between the two icons, the “Where from” label should be changed to “Locations” so both of the labels are now descriptions.

Figure 5: "What" button allows the user to select a category and aspect

Recommendation: Change the “What” label to “Type of Expense” and the “Where from” label to “Locations”. These are more descriptive labels for the action being performed and remove any ambiguity.

Jeremy Kong • Wally – Smart Personal Finance • Review 1 • October 2013

6


3. INTERACTION Top Issue: The “Scan & Save” function does not accurately record the information from receipts. Wally possesses a feature that allows the user to take a picture of a receipt to record their expense instead of manually inputting the information. However, after multiple tests this function does not perform as accurately as expected. The results of my field tests are as follows:

Figure 6: Test Receipt #1

Figure 7: Results of Scanning Test Receipt #1

There are two issues with the data collected from test receipt #1. First, the app incorrectly identified the receipt to be from Skyview Apartments. After scanning this receipt I discovered that the app does not scan the name of the business the receipt is from, but instead uses the user’s current location to identify the location of the expense. This is inconvenient because it would require the user to scan their receipt as soon as they get it, while they are still at that business or location. Otherwise, they would have to go in and manually enter or change the location had they chosen to wait until they got home, like I did, to do the scan. While this is not a significant inconvenience, the app did not perform as I expected. My expectation was that the app would read the location at the top of the receipt and then use that information to search for the correct location. The second issue is with the amount recorded. The app recorded the subtotal cost of $4.88, instead of the total amount paid, $5.25. This forced me to go in and input the correct amount manually. In review, for this receipt, I would have been better off manually inputting the information from the beginning, as none of the information recorded was correct.

Jeremy Kong • Wally – Smart Personal Finance • Review 1 • October 2013

7


Figure 8: Test Receipt #2

Figure 9: Results of scanning test receipt #2

In this second test, I bought coffee at Starbucks in Strozier Library and scanned my receipt while still at Starbucks, to again test the accuracy of Wally’s location services. While Wally accurately recorded the total amount paid on the receipt, it still had difficulty identifying the location. Because the location was misidentified, the category chosen was incorrect also. This example shows the most accurate results I recorded while testing the usability of the Scan and Save feature. Even when Wally does record the amount of the receipt correctly, errors are still common and because of this it is still easier for the user to manually input their information from the very beginning of the process. The time saved by scanning the receipt is negligible when the time taken to correct mistakes is factored in.

Recommendation: Remove the “Scan and Save” feature and continue to test and improve the feature until the results are more reliable and accurate. While it may seem counterproductive to remove this feature, it is important to view the application from a user experience perspective. If the feature does work, as advertised, with little to no errors or extra effort required on the part of the user, then it is an effective and helpful feature that will speed up the user’s ability to input new purchases. However, because the feature does not work as intended, users do not see it as a work in progress. They see it as a broken feature, as a part of the application that does not work and this generates a feeling that the app is unfinished and unprofessional. To avoid this possible confusion, the best course of action is to remove the “Scan and Save” feature until the feature is more reliable.

Jeremy Kong • Wally – Smart Personal Finance • Review 1 • October 2013

8


Other interface related issues: Review screen animations are not fluid and interactive elements are not clearly identified. When navigating the Review screen, a flat navigation structure is currently used, meaning that user can remain on the same screen while navigating between different categories of content. A flat navigation system usually has a navigation bar with icons that represent the different category choices. In Wally, the user must swipe left and right on the date to change the information filter from weekly, to yearly, to monthly. When the user opens the application for the first time, they are notified that they can “Swipe left or right to review different time periods”. This message is displayed in the bottom third of the screen, suggesting that the user is able to swipe on the main content and to navigate to the various time periods. This is not the case as swiping in the area that the notification was displayed in only moves the content back and forth horizontally but does not change the time period. The user can only navigate between the time periods if they swipe on the top bar that displays the date; this is counter-intuitive to the message that appears during the user’s first use.

To review different time periods, the user must swipe this bar.

But this message suggests that the user should swipe down here to change time periods.

Figure 10: Review screen

Recommendation: Add fluid transitions between time periods and allow the user to change time periods by swiping anywhere on the main content.

Jeremy Kong • Wally – Smart Personal Finance • Review 1 • October 2013

9


Other interface related issues: Plan screen features interactivity that is not labeled or indicated using key colors or labeling. The Plan section of the application has a number of minor problems that affect the user experience. The first issue is with the slider bar at the top of the screen, this slide manipulates the amount the user wishes to save per month. However, this bar inexplicably uses a different color when the key color, teal, is used throughout this page.

Recommendation: Change the color of the slider bar to teal; this creates visual continuity. Another issue is with the four tiles that display the statistics from the selected month. If the user taps on these icons, daily information is revealed. However, there is no indication that these tiles are interactive. Hiding the daily information behind these tiles is not a logical placement for them and users should not be expected to look there to find this information. Instead, creating a decided “Today” button and placing it on the navigation bar will allow the user to always have access to the information pertinent to daily spending.

Recommendation: Remove the “Recurring Expense” button from the right side of the navigation bar and replace it with a button labeled “Today”. This button takes the user to a similar page with the current day’s financial information. The “Today” button should not have a border, as per Apple’s iOS HIG. From Apple’s iOS HIG: “In a content area, add a button border or background only if necessary. Buttons in bars, action sheets, and alerts don’t need borders because users know that most of the items in these areas are interactive.”

Other interface related issues: Broke the app when entering information, had to quit and restart the app to fix it. I encountered this problem when entering information into Wally on my second device. While switching between the birth date and gender fields, I tapped the button to advance to the next screen. This next screen has one final button that grants the user entry into the application, however the button is hidden behind the gender selection view. Because the gender selection view does not have a cancel or submit button and there is no way to scroll or manipulate the content, the app became unusable and I was forced to quit and close the application and restart it in order to use the application again.

Recommendation: Add a cancel button to the gender selection view to avoid potentially breaking the app.

Figure 11: Gender selection view prevents the user from accessing the app.

Jeremy Kong • Wally – Smart Personal Finance • Review 1 • October 2013

10


Other interface related issues: The Settings menu contains icons that inappropriately indicate the type of interactivity. Passcode toggle is misleading. The first issue in the Settings page is the Passcode feature. The Passcode feature currently utilizes a toggle to toggle on and off. When the user turns the Passcode on, a screen pops up prompting them to enter their four-digit passcode. However, once the Passcode is turned on, there is no way to change your current passcode other than turning the feature off completely and starting from the beginning. Another issue with this method is that if you forget your passcode, all your data becomes inaccessible and the developers at Wally cannot do anything to reset your password.

Recommendation: Change the toggle to a right facing chevron or arrow. Changing the toggle to a chevron indicates that there is a submenu beneath “Passcode” that has additional options or settings. An example of this can be found in Apple’s native Settings menu where a chevron is used in conjunction with the “Passcode Lock” menu option. In addition to this change, a submenu should be created to allow users to turn the passcode off or change their passcode. While this submenu only has two options, properly labeled menu options are more clear and easy to understand for the user.

Figure 12: Current Passcode menu option in Wally

Figure 13: Proposed Passcode menu option found in Settings

Chevron indicates a submenu when a view appears. The chevron is misused again in the following two menu options; Week Start and Financial Month Start. In both of these cases, selecting the menu option does not open up a submenu to the right as the chevron suggests, but opens a view from the button of the screen like the one used for the Daily Reminder date entry.

Recommendation: Create a submenu that contains the available choices, such as the one used for Currency. Figure 14: Chevrons indicate a submenu.

Jeremy Kong • Wally – Smart Personal Finance • Review 1 • October 2013

11


Receipt Scan portion is unclear and ambiguous. The Receipt Scan option states that the feature is currently in beta and has a toggle that indicates the feature is turned on. The label is not descriptive either; it is not clear what happens automatically. As well, there is no explanation for what this feature does if you turn it off, as the receipt scan is still available regardless of the toggle’s state.

Recommendation: Add an explanation of the toggle’s effect underneath the option. Figure 15: Receipt Scan settings option

Daily Reminder menu limits the user’s choices. The Daily Reminder menu option also features a chevron, which suggests that the view will slide to the right, revealing a submenu. However, pressing this option opens up a modal view where the user selects the time they want to be reminded at. This modal view also restricts the choices the user has, and only allows notifications to be sent on the hour. This method of time selection is inconsistent with the methods previously used in the application.

Figure 16: Date selection for Daily Reminder

Figure 17: Date selection when adding a new expense

Recommendation: Remove the chevron and replace the current date selection method with the method shown from the new expense view. Jeremy Kong • Wally – Smart Personal Finance • Review 1 • October 2013

12


4. Aesthetics, Graphics and Branding Top Issue: Interactive areas missing key color. From Apple’s iOS HIG: “Consider choosing a key color to indicate interactivity and state. Key colors in the built-in apps include yellow in Notes and red in Calendar. If you define a key color to indicate interactivity and state, make sure that the other colors in your app don’t compete with it.” In Wally, the key color is teal and it is used effectively in the navigation bar to indicate that the icons at the top are interactive. When adding an expense there are three items that are not colored teal, but that are interactive as well. Without color and without a border of any sort, the only indication that these areas are interactive is the call to action label “Add a note…”. While this does prompt the user and indicates interactivity, adding color would reinforce the notion that the user can Figure 18: Using a key color would indicate interactivity to the user.

also interact with these items.

Recommendation: Add the key color, teal, to these areas to indicate interactivity.

Other Aesthetic Issues: Menu is void of color and contrasts with the colorful nature of the rest of the application. Wally as a whole is a very bright application, that uses color effectively to draw the user’s attention and categorize items. However, the menu is completely void of all colors and creates a noticible contrast to the colorful home screen. Adding color to the menu would make the menu options contrast with the dark background

Recommendation: Add key color to the labels and create multicolored icons. From Apple iOS HIG: “Pay attention to color contrasts in different contexts. For example, if there’s not enough contrast between the navigation bar background and the bar-button titles, the buttons will be hard for users to see. A rule of thumb is to start with a contrast of at least 50% between colors that need to be distinguishable. Test the result by viewing it on a device in different lighting conditions, including outdoors on a sunny day.”

Figure 19: Menu is lacking color.

Jeremy Kong • Wally – Smart Personal Finance • Review 1 • October 2013

13


Other Aesthetic Issues: Colors used to categorize purchases are the same colors used to differentiate the days of the week. Color is a powerful tool that can be used to improve the user’s experience or distract them from the task at hand. While color is used well in Wally to differentiate between each of the categories, the use of color becomes confusing when the user is reviewing their purchases on the home screen. The source of the confusion is because the colors used for the categories are re-used here to indicate the different days of the week. This creates the formation of multiple associations or connections between items that are not necessarily connected and do not need to be grouped by color. An example of this is shown to the right.

example of

In this example two expenses have been added, one for groceries and another for a personal expense. As shown on the left hand side, color is used to categorize and differentiate the two expenses. However, the color used for the groceries is the same color that is used to represent Tuesday. This also occurs with the color used for the personal expense and the color used to represent Monday. This visually connects the expense with an incorrect day of the week, which can be confusing for the user.

Recommendation: Remove the color from the days of the week and instead use a gradient to represent the amount the user spent that day.

Figure 20: Example of matching colors on the home view

Closing thoughts: The app is very efficient and intuitive. With a few small changes, the user experience can be further improved and streamlined to improve an already excellent app.

Jeremy Kong • Wally – Smart Personal Finance • Review 1 • October 2013

14


Wally User Experience Review