Case study – Usability testing of VSCO Cam

Vsco Cam, produced by Visual Supply, is a stylish and powerful mobile-end photo-processing application that has a record of 4.5 stars in both the App Store and Google Play. Vsco has a large number of loyal users, and there are many of the most beautiful photos I've seen in their grid (which is built into the online photo stream). In May 2014, they succeeded in investing 40 million of billions of dollars.

The goal of

usability testing

The usability problems and pain points of VSCO are identified through 6 basic tasks. 3 of these tasks come directly from the brief written by the App Store's small series:

The photography application of Visual Supply has brought a lot of amazing tools to photographers and amateurs. Non-modified interface design style can make it easier for you to use filters, adjust the exposure, and share your creations with others.

To test these key features, I found 5 mobile users with different backgrounds and conducted an "underground" usability test. My 5-person requirements are simple: they are iphone or Android phone users, familiar with some of the basics of photography (such as filters, cropping, exposure, etc.) and have never used VSCO cam applications.

test task take a picture. Add filters to your photos. Crop the photo. Adjust the exposure of the photo. Add a photo from your phone album. Share photos with social networks. Analysis

I asked the users to download and open Vsco Cam on their phone, and then use my own mobile phone to shoot the test. When the test is over, I'll look at the videos again and record the key information I found on the sticker.

As shown above, the horizontal units at the top of the matrix (orange stickers) represent each user under test, the left longitudinal units (blue stickers) represent different testing tasks, and the rest of the color stickers represent the degree of success of the various tasks that are measured.

Next we look at the specific test results. To illustrate, in the following picture, the Green arrow points to the correct operation flow, and the red arrow represents the error operation being measured. (The description text in the picture is small, click the picture to see the big picture;

Recommended reading: A summary of practical experience in mobile application usability testing

Task 1: Photo

Click the picture to view the larger image

All success! Each was tested in VSCO Cam successfully completed the photo task. It's a good start.

Task 2: Add filters for photos

We've got a problem from here, and no one has been tested to complete the task successfully on the first attempt. In the photo selection screen, they constantly click on the wrong icon, as shown in the three Red Arrows to the left of the following figure.

Click the picture to view the larger image

In fact, to do this correctly, the user first needs to select a photo, at the bottom of the interface will appear Edit menu, click on the second edit icon to add filters, as shown in the green arrows in the middle of the above figure. When users do not understand this for the first time, they will directly try a variety of actions that are visible by default in the interface.

However, once the user understands the filter's entry and selects a filter (as shown on the right side of the illustration above, Task 2 completes), the next step is much more obvious, because there are only two things they can do here:

Click on the filter thumbnail previously selected and adjust the filter effect parameters. Click on the bottom of the menu bar in the closed state. Tasks 3 and 4: Crop photos and adjust exposure

In the last step of the previous task, the user is clicked on the bottom of the menu bar, expand the menu bar, the obstacle appears again. Here a total of 5 misoperation, 4 of which will cause the task process interruption, some of the test will try to click the "Undo Operation" button, some will click the "Restore Original" button, in addition to the click Confirmation and cancellation of the operation. And only click on the button in the menu bar wrench, you can launch a new function menu, where you can find the cutting and exposure adjustment function.

Click the picture to view the larger image

Task 5: Add a photo from your phone album

Click the picture to view the larger image

This task is more difficult than imagined for the user being tested. The correct way to do this is to click on the big gray button with the "+" symbol, as shown by the Green arrow on the left of the figure above. But this button in the interface of the comparison between the low, and "+" it is difficult for users to clearly understand its function. The user's attention is drawn to a few brighter icons at the top and bottom, and click Try.

In addition, some users pointed out that in the surrounding is a white bright icon of the interface environment, so dark a gray button, feel like it is not available or clickable meaning.

Task 6: Share photos with social networks

Click the picture to view the larger image

After the previous 5 tasks of the toss, the user has been tested for each interface has more awareness, the application of the overall more familiar. In addition, because the Share button icon itself is also very clear, so most users can be relatively easy to find this function, and complete the task.

Unless there is internal data, it's hard to tell how many actual users will have enough time to try after the initial start, and how much patience they will have to continue using the basic functionality and setbacks.

two key issues 1:vsco Cam's operating process is non-linear and lacks the necessary guidance and hints for novice users.

One of the design challenges facing VSCO cam is how to get new users to start as quickly as possible with a feature-rich but process-non-linear application.

As the App Store explains, Vsco Cam's user base is wide range, but both professionals and photographers, from the moment they start vsco cam, are "novice users". A wide range of powerful functions on the one hand to create such a valuable application, on the other hand, because of the complexity of the problem will have a negative impact. The difficulty lies in how to get the novice user familiar with the operation and stay, rather than leaving in frustration.

The non-linear flow of VSCO cam allows multiple use cases to exist in parallel compared with Instagram and other relatively simple photographic applications. Unlike the traditional "take pictures, make drawings, and share", the app allows users to achieve goals through a variety of processes through different parameters.

During the test, one of the tested users tried 29 times to complete a task. I encourage him to think aloud, express feelings through words, and assume I am not present. As a result, the test user said:

"To tell you the truth, if you're not here, I'll just smash the application and throw it away." ”

Improvement Suggestions

Provide some slide styles or other forms of novice guidance to help new users understand the most critical interfaces and features as quickly as possible.

Although a bit cumbersome, but if done properly, the function will become clear, it is worthwhile. When novice designers are booting, follow some of the best practice patterns available today, allowing users to exit the instructional boot at any time and provide access to these boot content in the future.

Recommended reading: Rethinking the Novice teaching model of mobile application and the Novice guide design of mobile application

Today, Vsco Cam's official blog has some instructional videos, but the application itself is not available.

So they might try to give some brief guidance on the core features within the application, such as taking photos, using filters, sharing, and so on, and teaching videos on blogs can still be useful for more minor features.

Problem 2: Unreasonable visual level of interface

Let's review tasks 2 and 5 (add a filter to a photo, add a photo from a phone album). In these two links, the novice user's cognitive load surges, they are faced with a variety of icon forms of functional options, the interface failed to pass a reasonable level of relationship to tell users which functions and the main goal of the current link is most relevant.

Improvement Suggestions

Reduce the contrast of the top two white icons in the interface. These two icons, one for filtering photos, one for switching the photo list view mode, are the accessibility features that are likely to be used in specific situations, and are not associated with the user's most important image editing class target.

And the bottom two buttons although in the visual weight is very high, but also have high truth, one is the global menu, one is the camera interface entrance, so you can not take care of them.

For the "+" button used to add photos from the system album, you can try to increase the contrast, at least not as easily understood as "not clickable" style.

Summary

Of course, all of these suggestions came from me personally, based on only 5 usability tests that were tested. I'd rather have the opportunity to see the real data of VSCO cam to verify the problems I found. In any case, for a mobile application, constantly discovering problems, making assumptions, iterating, and validating--this cycle is essential.

Miaoshouhuichun: A guide to usability testing and optimization of Web sites

Author Steve Krug Another masterpiece after the bestseller don ' t make Me. The book details a simplified usability testing method that allows anyone to test their web sites, applications, and other products as quickly and frequently as possible, eliminating the most serious usability problems in the bud ...

Related books recommended

The translation represents the original author's point of view. Welcome to comment, or to the translator Weibo to further exchange discussions.

Original site to compile the article. If you want to reprint, please specify: This article from is for Web English original: https://medium.com/user-research/vsco-cam-usability-test-5ae0dfb66d1b translator information: C7210-ux player , interactive designers, cat slaves, guitar fucker, is now working in Tencent Isux (Shanghai)