TEI MI: Glanceability— Designing a Multi-UI interaction for Navigation

At home prior to today (Thursday), I had done some brief wire framing, laying out designs just so we can quickly jump into user testing / modification of design and quickly end the day by filming and editing.

Josefine brought up and idea for user testing that is by getting users to reenact the real situation of running towards a train track in a rush with both hands occupied. She showed us Google WearOS design guideline, that is testing the interface by shaking, since people who wear watches are regularly in motion. We wanted to perform this test to see if our design is still usable at a glance during rapid movement.

It was difficult to find subjects since most groups were keen on focusing on their own since time was quite tight. In the end, we found Julija’s group and had Julija, Therese, and Victor try out our design.

We had all three of our subjects run on the hallway outside the IOIO lab, we asked them to first, close their eyes while we attach the watches, then put the bags in their hands, and finally, we walked to the end of the hallway and asked them to run towards us acting as if “in a hurry” and try glancing at the watch face without paying too much attention to it.

After the runs, we asked a few questions regarding how the experience felt, how clear the information was displayed, if they knew what the icons represented and if the information was recallable.

Therese and Julija had a harder time recalling the information and understanding what the icons meant (mostly had trouble understanding what the train car icon meant), but Victor was quick to recall the information and knew what all the icons meant. Victor commutes every day from Lund to Malmö so maybe that’s why he’s familiar with these icons.

Other feedback we gathered:

• Clock and departure time confused as one another? Is it the current time or is it the departure time, since it’s the only “time” displayed people think it’s the current time instead of departure time.
• Icons too close to each other and too small, maybe divide them so it’s easier to differentiate
• Color distracting, too “pink”

After the user tests, we re-designed our wireframes, dividing the screen into two separate pages so the information on the screen are interchangeable. The first screen would display the departure time, underneath an additional time representing the countdown, and the track number. The second screen, changeable by a tap (we chose a tap because swiping takes more motion), displays the train car number and seat number.

Our information hierarchy follows what we believe is the order of what commuters check when catching a train, it goes—

Departure time -> Time left -> Track # -> Car # -> Seat #

This solves the issue with the icons and information between too small and too crammed, now that we’ve divided them up there’s more space to enlarge the information.

Regarding color, we simply removed the gradient effect and made the background one solid color, either black or white. The black design we’re using for our video and the white design we’re using for the wireframe. Black designs are more prevalent in current watch-faces. The white design is for the purpose of wire framing.

• 

• 

After settling on our designs, we went out and began our filming sessions. The black interface is the one attached to our watch, acting in our scenes. The white one we used in the end, using the inspiration from the Google Wear OS ad I’ve mentioned before, to create a GIF using a clear plastic board. This represented the “wire frame” deliverable of our project.

There’s not much to say about the filming session, we essentially followed our storyboard created yesterday, making sure the interaction of our multiple UIs are clearly shown.

Concept—

In the video, a subject hooks up the phone with the watch by tapping the two interfaces together, then the phone can be put away, as the subject runs towards the designated departure destination, they glance to check for the track number, car number and seat number.

For the music, we chose the piece In the Hall of the Mountain King from the Peer Gynt Suite, written by Edvard Greig and James Last, we thought this piece was suitable because it has a good build-up that creates a mood of suspension and nervousness, which was perfect for our mood of being in a hurry. Weronika used her music engineering skills to make the transitions seamless.

Here’s the final video—

Icons—

There’s no real reason why we chose the icons we did, we agreed as a group which icons are the clearest and most representative for the information we’re trying to convey. One can argue that having text is clearer but a watch face is tiny and the text would practically become unreadable.

We understand that icons might not be the best way to convey meaning / not as intuitive to comprehend as there’s symbolism involved which requires “training” to understand. Therefore, we discussed that this would be more suitable for commuters who are familiar with these types of symbols.

We also discussed after completing all the deliverables that red and green might not have been a good color choice for colorblind users, but we thought it was the most reasonable colors to use at least for the video.