A difficult job made easier
- Mar 6, 2013
- 6 min read
Updated: Jun 18
I was working for Mirriad, an advertising startup who digitally places products inside TV shows and music videos. Cans of coke, cereal boxes and cars magically appear in the scene as if they had always been there. But they were all added post-production, using computer vision and 3D technology.
One of the technologies used is an application that finds advertising opportunities inside videos using computer vision. Although technically sophisticated and powerful, it was not an easy tool to use. The UI has the complexity an aircraft cockpit.
I will describe what I did to understand fully the users' complex work and design a more usable UI.
MY ROLE
In this project I worked as a user researcher and interaction designer, collaborating with the users and developers of the software.
THE CHALLENGE
The complex application started as a relatively simple tool. But as more and more features were added over time, it become increasingly complicated and unwieldy. The users found it inefficient and frustrating to use. While some of the more difficult to use features were not used at all.
I was asked to redesign the UI to improve its usability. The aim was to make the users' work easier and help them be more productive.
THE RESEARCH
To design a more usable interface, there were two main areas I needed to understand well.
The complex work people did using this application
The sophisticated functionalities it offered
I decided the best way to understand the work people did was to talk to them and observe them while they did their work. So I spent several days sitting with users, known as Content Analysts, to watch them do their work and to ask many questions.
I worked with 3 Content Analysts in total. The first content analyst was an expert who had been using the tool for 2 years. She explained to me how the tool worked, and taught me a lot of the domain knowledge needed to do the work well. She showed me how to work on some typical videos. The 2nd Content Analyst was an expert software user who had been using the application for several months, while the 3rd Content Analyst was an IT novice who had recently joined the company.
I learnt a great deal about a Content Analyst’s work through the contextual inquiry. Including the processes they followed, the different types of video content they dealt with, the various tasks they had to perform, as well the work arounds and pain points they had. Unsurprisingly perhaps, I observed that the users who had a better understanding of the software were more productive at their job.
After doing the research with Content Analysts, I created a task analysis diagram to visualise their process and the key tasks involved.
To understand some of the less well known parts of the application, I asked one of the developers for help. He showed me how each piece of functionality worked, and explained to me the underlying algorithms. I discovered that some of the more complex functionality had a steep learning curve, due to how technical the concepts were. It was clear that the application couldn't become a walk-up-and-use system like an ATM or a ticket vending machine.
DESIGNING FOR THE ACTIVITY
From my research I learnt that the content analysts' work had two distinct stages: Scene Sorting and Opportunity Finding. Scene Sorting is concerned with separating the original video into meaningful segments or scenes. And Opportunity Finding is about identifying places where an advertisement can be placed.
In the original UI, both Scenes and Opportunities were listed in the same view, and were displayed in the same way. This meant it was difficult to know whether something was a scene or an opportunity. To make matters worse, items in the list only showed the id and setting, which was far too little information for finding a specific scene or opportunity. This poor UI design was the cause of several usability problems.
In the redesign, I separated Scene Sorting and Opportunity Finding into two separate views. In both views, I added thumbnails to help people find the item by recognition. For Scenes, I added an editable name field, so that users can identify a scene by the meaningful name they assign it. For Opportunities, I added a location field (where exactly the ad will be placed) and a scene name field to help people easily distinguish between different opportunities.
REDUCE AND ORGANISE
One of the most useful but least understood part of the UI was the scene grid. This was a screen that arranged and ordered groups of frames in ways that facilitated certain tasks. However, I found during my research that this feature was rarely used. And when it was used, people only used a small part of it. The main problem was that the design of the UI was based on the developer’s logical understanding of the underlying algorithms, rather than the user's mental modal of their tasks. (A classic UX problem!) Functionality was organised by the function type and a set of accompanying sorting methods. However, the users didn’t think like developers, to them this representation was unnatural and confusing.
I felt that a UI organised by user task, instead of a developer's taxonomy, would be more understandable and therefore more usable. The table below details the functionalities and their corresponding user tasks.
FUNCTIONALITY | USER TASK |
Shots - Start Frame | Scene Sorting |
Shots - Duration | Opportunity Finding |
Shots - Similarity | Opportunity Finding (QC) |
Shots - Staticness | None |
Blocks - Start Frame | None |
Blocks - Duration | None |
Blocks - Similarity | Opportunity Finding (QC) |
Blocks - Staticness | None |
Scenes - Start Frame | Scene Sorting |
Scenes - Duration | None |
Angles - Start Frame | None |
Angles - Duration | Opportunity Finding |
Angles - Staticness | Opportunity Finding |
You can see in the above table that some of the functionalities were not needed for any task! Displaying these redundant options not only makes the UI unnecessarily complex, but also more likely to cause confusion. So I decided to remove them completely. The remaining (useful) functionality were organised by user task. The results is something much simpler and clearer:
USER TASK | FUNCTIONALITY |
Scene Sorting | Shots - Start Frame |
Scene Sorting | Scenes - Start Frame |
Opportunity Finding | Shots - Duration |
Opportunity Finding | Angles - Duration |
Opportunity Finding | Angles - Staticness |
Opportunity Finding (QC) | Shots - Similarity |
Opportunity Finding (QC) | Blocks - Similarity |
In the redesigned scene grid, I split the functionality into two separate screens: Scene Assistant and Opportunity Assistant. By using single buttons/tabs to represent each piece of functionality instead of two dropdown menus (found in the original scene grid), I was able to name the functionalities in a simpler and more natural way. E.g. 'Shots - Duration' becomes 'Longest Shots', and 'Angles - Staticness' becomes 'Most Static Angles'.
THE RESULTS
The users were delighted after seeing the final wireframe designs. They felt the redesigned UI was much more understandable than the previous UI, and was much easier to use. “This is going to make things so much easier for us!”, said one user. “It’ll be much quicker for new people to pick up”, said another user.
APPENDIX: other usability problems
Redesigning the UI solved many usability problems. However, some of them were related to the behaviour or implementation of the UI rather than it's visual organisation.
Here are some examples of such usability problems I discovered:
When you click on a shot on the timeline, you shouldn't need to press refresh to see the similar shots for the current selected shot. It is not obvious for the user when he/she should press refresh in the scene grid, because there are many situations where refresh isn't required. The GUI should always refresh automatically when shot selection has changed.
In the scene grid “scenes” view, the user is required to press the “build scenes” button to see the results on the screen. The results should be displayed automatically whenever the user navigates to the “scenes” view.
When displaying similar shots, the results should not contain the currently selected shot (which we’re finding similar shots for).
By default, the orange shot similarity highlighting on the timeline should be turned off. The majority of the time when you’re working, the shot similarity highlighting isn’t used, and is a big distraction. Having too much colour highlighting all the time makes the screen look very noisy.
Thumbnails are not clear enough. The lack of anti-aliasing makes the thumbnails looks jagged/distorted. And when you zoom in on thumbnails, the detail doesn't increase because the resolution doesn’t increase.
Scene grid thumbnails should not move or reorder when you click the key to make a shot an advertising opportunity.
