UEFA Match Logging iPad App
UI Centric was commissioned by the Union of European Football Associations (UEFA), which oversees Europe’s soccer leagues, to build an iPad app prototype for video tagging and tracking of soccer match highlights. The intent behind the tool was to create an app that would allow users to “tag” match highlights and save a log of those events with the appropriate keywords naming the players involved and the type of highlight. These tags would then be used to make these video clips and match highlights searchable, allowing UEFA to create a database of video clips for the media to license.
The user’s experience begins at a dashboard screen where he or she can quickly resume viewing and logging a match video that was previously started or quickly find other match videos to watch.
Users can also save and organize video clips into folders in the "My Clips" section of the app, to quickly find and rewatch or resume watching them later.
The video logging app features a main dashboard for selecting clips or entire matches to view and log as well as a “My Clips” section where users can resume viewing previously watched matches and see a list of the clips they have chosen to save. However, the real standout portions of the experience are the actual video player as well as the clip logging and telestrating portions of the app.
By default the video playback mode features minimal UI chrome to ensure no crucial footage is covered with noisy buttons or distracting toolbars. However, a few simple gestures allow the user to quickly access the primary controls of the player. Swiping up from the lower edge of the screen brings up a video timeline that lets the user jump to a particular time stamp in the match, as well as seeing markers for each point in the clip where a log or telestration was added. A simple tap on the screen during playback pauses the video and shifts the user into logging mode.
By default video plays edge to edge on the screen of the iPad, but since most video is shot in 16x9 while the iPad has an aspect ratio of 3x4, the edges of the video are cut off. Users can toggle out of this mode by tapping the zoom out arrows in the lower right corners.
Whenever a log or telestration is created, it appears on the timeline with a custom icon to indicate whether it’s a logged clip or a telestration.
Upon entering the logging mode view, the UI shifts, revealing a list of keywords that can be used to log a match highlight from the point of pause. The video camera also decreases in size and up to alternate camera angles will display below if additional angles are available.
When it comes to actually logging a clip, the goal was to keep the user from needing to type on the iPad’s touchscreen, since that can be a difficult task. To do this we used a smart taxonomy of words, and a syntax of actor, action, outcome. To start, the app displays a list of players on the two teams involved in the match. Once a player has been selected, the app automatically displays a list of actions, sorted by the frequency with which they are used over time. Once an action is selected, a list of outcome words displays. In other words, based on each word or phrase the user selects, the app automatically filters the keywords to show those that would make the most sense. So if the user selects an action like “shot on goal,” the app knows to suggest outcomes that would be tied to this action such as “wide right,” “over the net,” or “on target - blocked.” However, if the word the user is looking for does not automatically appear high up on the list of suggested words, the user can scroll down through the list of words. Additionally, to more quickly reach an obscure word or phrase, the user can use category filters to jump to things like actions or players or emotion.
As much as possible, user input was designed to be minimal and intuitive such as dragging to fast forward or rewind video, swiping up and down to toggle the visibility of the video timeline and even tapping to select keywords for logging as opposed to using a keyboard to type out a log.
In addition to tagging match highlights, many other key actions can be performed from the logging screen. For example, the user can switch camera angles from this screen, or tap and drag his or her finger on the primary video screen to scrub through the clip. Dragging the screen to the right scrubs forward in time while dragging to the left scrubs backwards in time. There’s also a telestration mode that can be accessed via the icon nav in the top right of the logging mode screen. In telestration mode, users can add a variety of illustrations, including both pre-set shapes as well as freehand drawings, to a still video frame.
To begin telestrating, the user first selects a shape or the pen tool (which allows for free form drawing). The user can also customize the color he or she is using for telestrations.
Once a user drags and drops a shape onto the screen to set its general size and placement, he or she can fine tune the size by touching and dragging a single corner or rotate or reposition the shape by touching and dragging multiple corners at the same time.