Phase 2 · Information Design Brainstorming
Metaphors for Coaching
| Coaching Information | Real-World Metaphor | Ideas about Coaching Information Design |
| A whiteboard session looks like a | classroom | students gathered around taking notes |
| speech | a speaker delivering a message to an audience | |
| presentation | props and diagrams conveying a point | |
| mission briefing |
plan of attack and sense of unity |
|
| A play diagram looks like a | dance step | motions and steps between pairs of people |
| map | locations and landmarks with predetermined paths to take | |
| graph | a series of vertices and edges | |
| A playbook looks like a | encyclopedia | large indexed tome of subjects |
| catalogue | browse through the images and pick what you need | |
| An armband looks like a | watch | glance at wrist and check the time |
| compass | gain better orientation | |
| decoder | translate a hidden message | |
| A film looks like a | documentary | informative video of an event or events |
| highlight reel | cherry-picked clips of interesting video |
Brainstorming, Principles, and Guidelines
Having narrowed down the important visual aspects of coaching, we considered the Gestalt principles. The primary concern was the visual separation of the major activities to be supported by our design. The Playbook and Armband, we felt, were both equally important. They deserved equal footing in our information hierarchy and in the real estate of our interface.
To demonstrate their equality, we utilized the Gestalt Principle of symmetry, continuity, and similarity on the tabs representing these features. Both tabs are symmetrical about the line dividing them, while the borders share continuity. They are similar in all ways but color, which creates a sense of distinction.
This distinction carries over when the tabs are selected. This changes the entire screen's bordering and background color to match that of the associated tab. This is similarity in the context of color, which alerts the user visually that they have entered the heirarchy of the selected tab. The border also creates a sense of area, drawing focus to the features within.
Rather than clutter the interface with tons of buttons, we tried to allow ample whitespace so that the widgets and text had a pop-out effect. During our brainstorming we performed the squint-test to assure that focus was directed where intended. We kept consistency and parallelism with the add and remove features, which are represented by a plus and a minus sign throughout the various views of the interface. For example, both adding and removing plays utilize the same graphic. Similarly, the same arrow is used to indicate to the user when a view can be scrolled in any direction.
Client Response
The client was generally pleased with the result. However, there were some concerns. Most of the criticism took place regarding the Armband view. He commented that it was a bit too bright, bled together, and that the green play preview thumbnails beside each play name was a little bit "weird." In asking him to articulate, he said that the colors didn't look good next to each other. I would have to agree, but this demo was done in Virginia Tech colors. The finished product would not necessarily share the same color scheme.
Other than the concern about the size of the player icons, he said he really liked the Playbook view. Aside from some comments about small details which would be modified with a better prototype, he seemed to like the proposed flow of information and visual quality of the mockup.