One of the central goals for this project was to provide an effective representation of wheelchair basketball games, which required a graphical user interface, with simple representations of collected data on the games. This had to fulfil functional requirements 1.7 and 1.10, by translating the converted data from the database and analysis system to something viewable by the user, and design decisions were further informed by non-functional requirements 2.3, 2.5 and 2.6, which require responsivity of interface, usability by non-experts, and a system that is not heavily resource intensive.
Most of the architectural design philosophy of this system was informed by the needs of coaches. As such, the most important consideration while designing the interface was ensuring that a clear, easily interpretable representation of the players was available. To facilitate this, most of the interface frame consisted of top down representation of the court, with icons representing the positions of the players and the ball. For simple comparison and reference, another frame contained a video player, with the original video playing simultaneously. Additionally, a simple, time-stamped textual representation of events was provided in parallel. Each of these will be considered in detail in the following paragraphs.
The top-down representation had the goal of being as simple as possible, while still providing an accurate representation of the positions of the ball and the players at any given time. As such, we used a simplified map of the court lines, with simple graphics for the players and balls. The icon for the ball used an image of a standard ribbed basketball, whereas players used a simple trapezium shape, as this was a simple, intuitive representation that clearly showed the player’s current facing direction. Combined with the overlaid ball image and the simple court lines, this provides a clear, simple and accurate representation of the court state.
While the top-down view does an excellent job of representing the players, some data is lost due to the simplistic nature of this representation. As such, the original video footage was added to the interface, to allow side-by-side synchronized comparisons between the representations. Videos can easily be switched between via a right-click menu, or via the menu bar. In order to ensure that the controls are easily usable by non-experts, playing and pausing can be performed by left clicking on the menu frame, via the top menu, or via the time panel, described later. This makes it simple and natural to control the video playback, allowing coaches to readily compare player representation with actual results.
While these representations provide excellent information on the current game state, it was also necessary to provide coaches with information about events that had occurred previously in the game. As such, a scrollable log of such events was added to the design, along with the timestamp of that event’s occurrence. Between these three components, all of the necessary information for a full representation of the game is provided.
One further element of the user interface was produced, in order to ensure cohesion between these disparate components. A simple time control panel, consisting of a play button, a seek bar, and a display of the current game time, was added to the system, ensuring a single unified play time, shared between all other components. This ensures that the various representations are synchronized, regardless of computer processing power, user seeking or even play speed, and makes the interface both intuitive and easy to use.
While these components provide all of the visualisations necessary for the system, two additional functional requirements require fulfilment. Specifically, a simple system exists to allow for conversion of videos into a data format usable by the system, which takes video files and positional data, and uses computer vision to extrapolate positions of players from this. This generated player data can then be saved to a simple file system. Subsequently, the load game button loads this folder structure into memory, allowing it to be easily viewed using the user interface.