Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0

...

Our final design has 3 main components: the video feed, the input form, and the recorded statistics. 

Image Added
Video Feed:

The video feed is the source for the statistics. One user of SETistics can replace a traditional team of two stat-takers by combining the spotter (who calls out what is happening in the match) & the recorder (who writes down the called out stats on paper) into one. The large video size provides comfortable viewing for our users while custom video controls (context-sensitive playing and pausing) increases efficiency.

Input form:

To generate statistics, users interact with the input form. The input form consists of the input fields, feedback icons, and submit button grouped together below the video feed. The linear layout suggests a left-to-right workflow when entering statistics, while the automatic focus switching grants efficiency. Though learnability is not the primary objective for this design, the textfield hint text and drop down menus allow users to use external consistency as a learning tool. Dynamic visual feedback within the icons and colored highlighting prevents slips from becoming recording errors, thus improving safety.  Image Added

Recorded Statistics:

Once statistics are entered, they become visible on the Recorded Statistics section after animating into the top row. Affordances for selecting rows are provided via  highlighting and edit/delete buttons that slide out during mouse-over events. Command shortcuts are displayed here in the same manner as they were in the input form to fulfill internal consistency. Statistics are chunked together by separating statistics from different points with a line divider, allowing users to quickly find a statistic for editing. Invalid parts of statistics are shown in red text, again providing internal consistency, with the red highlighting in the input form.

...

  • Menus display upwards for efficiency and aesthetic -> don't need to scroll down (scrolling down brings up layout issues and takes time)… sacrificed a bit of external consistency, but we believe our "drop-ups" still feel familiar as they have almost exactly the same look & feel as standard drop downsdowns 

Image Added

  • Single letter commands hurt safety slightly as one letter differences can now register as correct even if the user did not intend to type that. However, it significantly increases efficiency and visual feedback helps prevent such slips from become actual recording mistakes. Safety is also aided by the fact that statistics are easily editable. 

Image Added

  • Editing used to be done within the record statistic in the statistic's row. Affordances for editing in recorded statistics were poor and editing itself was inefficient. Switched to editing within input form. Clicking on edit populates input form, allows for quick edits due to pending-delete feature, and pushes changes to record statistics.
  • Input form is set up to clearly indicate workflow. Statistics are filled in left to right, with the submit button on the far right of the input field. Statistics pushed into recorded statistics animate into their respective rows further right.
  • Video player included to cut two-person job down to one-person (spotter & recorder -> just recorder). Large, dynamically set size allows for great visibility. Automatic pause occurs when a user starts typing a stat, edits a stat, or views the recorder statistics in export format. Automatic play occurs when user submits a stat. These features increase efficiency (no need for user to manually play pause) while allowing more statistics to be taken at a higher quality. Video can be seeked manually to skip downtime to allow users to catch up from statistics-heavy points.

...

  • Providing feedback for valid & erroneous input:  Dynamic green and red highlighting respectively within input form as user types. Black & Red text in Recorded Statistics once statistic is entered.

Image Added

  • Space and tab advance keyboard focus along the input field. Hitting enter submits statistic. Shift-tab pushes focus back

...

  • Editing moved out of recorded statistics and into the input form

Image Added

  • Rows of recorded statistics have selecting affordances through individual highlighting during mouse-over. Sliding edit/delete buttons added.

Image Added

  • Hotkeys added for switching between input fields (F1, F2, F3, F4, F5) to increase efficiency.

...

  • Export statistics in human-readbale printer-friendly formatting 

Image Added

  • Buttons for switching between SETistics and recorded statistics views are given affordances of links (blue text with change in color on mouse hover)

...

  • Greyed out input fields for start/end positions  until player and shot type were entered. Positions are only relevant for certain shot types. Stats are irrelevant without knowing which player did the action.
  • Switch order of input fields to reflect optional nature of start/end positions. Outcome is used more often than positions so it comes first. This way stat takers won't have to tab through start/end positions to enter an outcome.
  • Export supports CSV formatting (for use in other applications, such as Excel, for additional organization and/or analysis)

Image Added

  • Single letter commands for efficiency. Start/end positions now dynamically set by knowing if player is home or away player, allowing single letter commands for start/end position.
  • Improved start/end position visual feedback by increasing contrast of the drawn arrow. Arrow is now thicker and bright yellow.
  • Chunked statistics by point. Thick, darker lines separate statistics from different points. Different points are identified when a kill or error is recorded.
  • Homogenous recorded stats. All statistics in recorded statistics are displayed in the same manner: only shortcut commands are displayed.
  • Manual play/pause button (F8 since there is nice mapping on mac computers: F8 has a play/pause icon on it) to increase user control.

Image Added

Implementation

Implementation design decisions:

...