Author: Steve Callanan, CEO, WIREWAX

WIREWAX is a connected video experience that is used by thousands of creators and served to millions of viewers every day - therefore, the visual appearance, functionality and ergonomics of the player that carries that experience is absolutely critical.

Out with the old

In with the new

It's been a few years since the WIREWAX player has seen a refresh. The incumbent player was designed to cater for big changes in the accessibility of interactive video across devices and at the cusp of mass mobile adoption. Bigger UI and thumb-sized buttons were designed to make the use across smaller screens more user-friendly while retaining some simplicity and usability on desktop and tablet too.

In the same way that we all instantly identify the red and grey functional appearance of the YouTube player or the sky-blue, rounded buttons of the Vimeo player - the blocky, utilitarian appearance of the scrubber and utility bar of our player became synonymous with WIREWAX and viewers often told us they could instantly identify a WIREWAX video by its player design.

While it certainly served a purpose, and will have a special place in our hearts, we long-felt the accessibility of the UX took precedence over visual beauty and current practicalities. Mobile users are now becoming much more savvy and familiar with collapsable or finer touch-points that require far less safeguarding; and, we believe the player 'skin' should complement the video not dominate it. What's more, other areas of the WIREWAX branding and messaging moved towards more finesse and subtlety in design, the player just took a little longer to deliver.

The reason for that delay may not be immediately obvious, but a video player skin is your audiences' vessel for serving interactive video content, it is absolutely imperative that the environment that they consume content is a well-crafted and considered user experience. Designing a video player skin is like designing the inside of a car; you have to have the steering wheel and pedals in the conventional and expected place (play/pause lower-left, a scrubber/progress bar along the bottom), anything unusual or exotic here is just confusing to the user and can be seen as pointless and gimmicky - trust me, we've tested it. Everything else should be fully-loaded but intuitive and careful not to overwhelm or distract the driver/viewer from doing what they are ultimately there to do. It needs to be a beautiful and comfortable place while aiding, assisting and... staying out of the way.

For those reasons, designing a new player skin that will serve today's users and retain flexibility and agility for the future is no overnight task. Firstly, we knew there were two essential features we wanted to include this time around; timeline preview thumbs and timeline tag markers. The first is now a standard across many other video players; it's a quick way of getting a small, visual preview of what appears in other parts of the video. It's simply an image sprite of up to 100 snapshots of the video taken at regular intervals. It's simple, yet not having it feels like a restricted user experience - as if you have some sort of temporal blindness, only seeing the video frame you're being presented with - so this is a welcome addition. We've taken a slightly different approach to its appearance by only revealing preview thumbnails while dragging the timeline scrubber or hovering while paused; this means it keeps clear during normal interactions and touch devices get the same preview experience - something other players haven't been able to deliver.

Timeline tag markers

Timeline tag markers are simply a way of seeing which scenes feature interactive tags. Previously no indicators meant that you wouldn't know if you were about to reach a scene with tags or if a video had tags at all. Now small round markers don the timeline to mark the times of scenes that have tags. Desktop users can hover over the markers to reveal the number of tags in the scene.

These are the only two features that are clear and bold, the other UI features are kept minimal and as unobtrusive as possible. Volume sits adjacent to the play/pause button and appears on hover - hiding when possible and hidden entirely on devices that have their own external volume controls. Switching between video quality renditions is hidden behind a 'settings' button and, despite there being up to 16 different renditions for any WIREWAX video, we've limited options to SD or HD and the player will figure out the appropriate rendition for your request. In normal conditions we'll serve whatever we think is the best rendition for your device and bandwidth capability but we found sometimes viewers want to override these - either larger, higher quality files - because they want to see a richer experience and don't mind some buffering or - smaller, lower quality files to save data or improve playback in low bandwidth capacities - our player will figure it out - there's no need to provide hundreds of options here. More settings options will also occasionally appear in this hidden sub menu too.

Fullscreen is now pushed into the more conventional position, lower-right and sharing options have been moved into the upper-right corner. Hitting the share button reveals a small menu; embed or share on Twitter or Facebook; gone is Google+, sorry Google.

One of the most hotly debated UI changes was the decision to drop the triangle that has donned the upper-right corner of every WIREWAX video since the beginning of time. It became a trademark and a simple but recognizable flag to indicate this is a WIREWAX video. However, with the timeline tag markers and the persistent WIREWAX logo in the upper-left corner, it was hard to justify its existence, especially as the filled shape is part of a now bygone design ethos. This leads us to the persistent WIREWAX logo; rather than tucked away behind a hover state, as in previous designs, the logo remains visible at all times revealing the logotype on hover. The original clickable WIREWAX logo has always been a major traffic driver to our website and a way for new viewers to quickly discover more about the tech. We wanted to make this more accessible and available to touch device users too. WIREWAX users can choose to disable branding in the video settings in the Studio.

Navigation is now much more intuitive and mobile friendly. While the scrubber bar will collapse after a period of interactivity or if out of range, it will retain a 1-pixel tall progress bar and a smaller marker so viewers can still see overall playback progress without it obscuring the view. Touch users simply need to tap the lower part of the frame to reveal. Keeping their finger in the frame and dragging allows them to quickly seek the timeline (revealing preview thumbnails - raised slightly higher to see them over your finger) or tapping the scrubber to jump to a timeline position instantly.

One of the most hated things to see when watching online video is the buffering or loading graphic - fondly referred to as the 'throbber' here at WIREWAX. There is nothing detested more than a rotating circle of mind-numbingness in the middle of your video, paralysing you from seeing more for an unknown period of time. Unfortunately, despite advances in video technology, the way browsers handle video, switchable renditions and faster connections, video is always susceptible to bad connections or poor bandwidth because it's infinitely larger than any other digital asset and loads while you watch. If anything throttles the speed that data can be received - the end user feels the pain, no matter how hard systems work to prevent it. For that reason, the throbber is with us for a while yet, but we believe it doesn't need to be such an infinite sign of doom. After lots of user testing and experimenting with the least infuriating animation, we've gone with something we hope you'll find significantly more digestible... although we hope you rarely see it.

This leads me to my final point which is all about beautifying the experience. Yes, a player needs to perform, complement the video and stay out of the way, but when it does need to be in-vision, it should be elegant and pleasing to the eye; not just in its static state but in its animations and transitions too. Flow, movement and grace are as important as good design so you'll see finesse and fluidity in the way elements appear/disappear or morph into others. The transition from play to pause, the reveal of the settings menu or volume control are animations that we've laboured over. A misplaced millisecond in a transition or the wrong choice of quadratic animation would kill this fine-tuned experience.


WIREWAX Player in action