We ran across a pretty interesting piece of interactive this week.  It’s an immersive experience implemented in WebGL for desktop browsers, and that tech facilitates a cutting-edge experience that would be hard to make happen by other means. However, there are some weaknesses in the experience from a usability standpoint, and a few peculiarities of User Experience that we felt were worth digging into.

ANALYTICA PROJECTS | http://analyticaprojects.com

The Analytica Projects website contains not just eye candy, but interactive candy too. The navigation is presented in an engaging, unique manner, where scrolling is coupled with a ‘navigation wheel’ that persists, locked to the browser window. Vertical scrolling (clearly assumed to be the main manner of navigating the experience) smoothly presents page content in a pleasing way to the user, and this scrolling triggers multiple interactive behaviors.  Scrolling down reveals a winding path of a story overlaying high-level messaging shown in huge, heavy type, as background.  At each step along the path, graphical content is revealed to support the story and help tell it pictorially. It’s charming, and the fluid, organic feedback to user input is quite fun to play with. The animation possibilities available via WebGL elevate this rote scroll-and-react experience above the common implementations of this type of behavior. But, for me, the charm is tempered by some negatives, as well.  There is a little sense of loss of control in the interactive, and I hit a couple of points of frustration on this site.  

A dangerous detachment can occur between user input and expected behavior when developers begin to override response to scroll input in ways that differ from default OS behaviors. It’s usually that a scroll-down motion is stopped and forced to only allow a single vertical ‘frame advance’ to the next position down the page. This has been done well, but in many cases it is too unrefined of a concept to feel ‘right’, and it’s sometimes easy to feel aggravated if there’s a need to wait for an animated advance to finish before one can get to lower content on the page.

In the case of the Analytica Projects site, a delay in response to scrolling appears in the experience, and it becomes a bit difficult to accurately scroll to any single specific position in the page flow. There is inertia added to scroll input at this site, in a way that is exaggerated compared to the default scrolling behavior experienced across all browser content and OS interactions. While the motion itself is attractive, that difference is aggravating from a functional perspective. Specifically, OS X allows you to plant fingers on the trackpad, and control, very accurately, pixel-by-pixel scrolling.  Swipe quickly and remove your fingers and you get a nice decelerating scroll that trails off once the inertia has dissipated according to Apple’s algorithm. But if you leave your fingers on the pad, you control the scroll very accurately. This behavior is a nice, natural echo of real-world physics, coupled with a highly functional and usable means of controlling scroll position.  The implementation of scrolling found in the Analytica Projects site is missing this accuracy, and that bothers me more than a little bit.

On the other side of the site’s navigation controls, you can opt to use the navigation wheel that appears at top right, instead of swiping to scroll. The wheel’s state is synchronized to scroll position, and visually reactive during normal scrolling, inviting you to use the wheel to navigate the site.  You can drag to rotate the wheel position on-screen and control your placement on the page, but you get the same delay between wheel position and scroll position that is experienced with trackpad scrolling.  So even there, you don't have very accurate control.

Screenshot of the Analytica Projects website's on-screen navigation.

The navigation wheel could also benefit from a few tweaks for usability that feel like easy wins, even without user testing to back up suspicions of frustration points.  Rollover of the navigation wheel does not reveal page destinations by name—only moving the navigation wheel to the destination reveals the name of what you are looking at.  In a related issue, there is a delay between rotating the navigation wheel to a section, and that section’s name displaying on-screen. It is enough of a delay that a user must use the control slowly in order to scan for information, instead of quickly being able to drag and scan section titles.  The latter delay being shortened greatly, would be a reasonable replacement for the lack of rollover reveal of section titles, but both adjustments would be warranted changes, in my book, to this unique navigation control.

All critique aside, this site really is a showcase of fine communicative design work. WebGL proves to be a great medium for serving up some really compelling interactive that should have users sticking around long enough to soak in a brand.  Don’t try checking the site out on older hardware or browser, but open it up in a modern environment and it’s a delight.

Check out the site @ http://analyticaprojects.com