The Gulf
/A central theme of my blog, and more fundamentally, my entire Empathic UX approach to User eXperience, is clarifying the difference, and at times the enormous gulf, between Visual Design and Interaction Design.
Visual Design, attention to the aesthetically pleasing, is very important, whether it be in our choice of mates, homes, cars, or even—as Oxo has proven—our choice of can openers and toilet brushes. There’s nothing wrong with that. It is human nature to respond positively to aesthetics, making them a valuable differentiator in any commodity market. Visuals grab. Visuals attract. Visuals delight users. Visuals also draw attention, in general, and in the specific, to important elements of the U.I.
Visuals bring users “into the tent.”
And visuals don’t come easily. Real talent, enhanced by a significant amount of education and training, are required.
But visuals do not keep them there, any more than an Oxo can opener that doesn’t quite open cans effectively would. This is why Visual Design needs Interaction Design. If a Porsche was just as beautiful but performed like a Smart Car, and used the controls of dishwasher, it wouldn’t win either the Porsche, Smart Car, or Whirlpool buyers. Even its attractiveness actually becomes a deficit because of its raised expectations and the egregious failure to meet those expectations.
Matching the expectations raised by excellent visual design
For argument’s sake, let’s take functionality, the engine, as a given—the Porsche that runs like a Porsche—is an obvious prerequisite, and not the subject of a UX Design discussion.
But what about those dishwasher controls?
Interaction Design, comprising: ease of use, clear feature discovery, predictable and visceral responsiveness, respect for user habits and expectations, consistency, accessibility, usability, feature access where and when needed, and generally repeatable satisfaction of user needs, are what keep those users “in the tent.”
When “pretty” meets “consistently satisfying” market success is born, satisfying both visual appeal and deeper user expectations.
This is not what happened with the latest from Hulu!
Because of the frequent and misplaced belief that “design” = “pretty”, that Visual Design IS User eXperience design, the resulting “pretty” is often only skin deep. The recent update of Hulu exemplifies my point. It’s beautiful, and infinitely less usable than its predecessor. This central misunderstanding as to the very nature of what UX is has led to an almost criminal misuse of corporate funds, user disappointment, and a tragically missed opportunity to enhance a brand that is already struggling against stiff and increasing competition, and partner defections.
Visually, the new Hulu is beautiful!
The font selection and typography are lovely, modern, and very readable. The colors are distinctive, even striking, and clearly part of a well-thought-out color system, conceived to harmonize with a variety of accent colors, corresponding with various categories. As a Visual Design, it is gorgeous, appealing, and richly satisfying. As far as bringing users “into the tent,” a total success!
But it is also the most dramatic example I have seen in a very long time of Visual Design being mistaken for UX design, Visual Design devoid of nearly any attention to Interaction Design, with a beautiful result leading to a total degradation of the resulting User eXperience in the new application.
The minute our users enter “the tent” everything breaks down.
At launch, if individual user profiles had been created in the previous version, the user is presented with those profiles to choose their own specific profile. This information is pulled from the stored memory of that previous version. Here, already, an expectation is created that valuable stored usage information is and will be carried over to this new version, which is always a welcome Interaction experience. An expectation soon to become a major source of user disappointment.
Unfortunately, this is where the Visual Design starts to impinge on, rather than enhance, the Interaction Design. The in-focus item, individual profile name, is highlighted with an overline. While I respect the designer who offered this suggestion (after all, there are only so many ways to highlight a “link” and everyone wants to innovate) this particular innovation flies in the face of the entire history of computing and the habituated reflexes of nearly every person who has ever used a computational device, from mainframes to PC’s, tablets to mobile phones, all the way to IoT interfaces on alarm systems and even refrigerators. There are many in-focus highlighting schemes available, which tap into user habits, but this takes an established paradigm and, figuratively and literally, flips it on its head. This already leads to mild user confusion and interaction friction, as the user, especially while scrolling, is not entirely certain which item is in-focus. Using an established metaphor, nee, the most established metaphor, the underline, and flipping its location upside down, leads directly to this confusion, a confusion, as further exploration verifies, which never lets up throughout the app experience.
A still doesn’t really do justice to how confusing this can be. Motion, i.e., scrolling just adds to the highlight confusion.
After selecting a profile, from the moment of first launch, every user is subjected to the First-Time User Experience; regardless of whether this was their actual first-time use of Hulu. This consists of a request to select your Favorites, a process that takes time and exploration (which I suppose may have been among the business objectives, to encourage exploration of the new U.I.) in order to assemble a personalized viewing list. The previous version had gathered useful stored data as to what the viewer's habits are, and a starter list could easily have been derived from that, allowing the user a much shorter, elimination-style, experience if the “computer guessed wrong”. In fact, the application’s attempt to auto-generate a Favorites list would still be welcomed by users, even if somewhat inaccurate, being viewed as an earnest attempt to lift an annoying burden, as long as the item elimination method is clearly and easily available. In several ad hoc tests, users took anywhere from 10 to 30 minutes to assemble their Favorites list. This was acceptable to brand new users, as even engaging this process is an opt in and easily skipped. To users of the previous version this is an immediate disappointment as the clear user expectation is that their old viewing habits be imported into this new version, which expectation is not met. Those who enjoyed the previous version’s presentation of their viewing habits would reluctantly engage because they did not want to lose this functionality.
So far, though the experience hasn’t gotten anything particularly right, since building the Favorites list can be skipped, it’s also not any sort of a deal breaker, and, yes, it is still much more attractive, it’s still pretty.
It’s when the user accepts their Favorites list and is presented with the “home” screen that the first WTF experience is unleashed! After working for 20 minutes, where did the Favorites list the user just created go? The primary center-stage link is to a business-goal-driven promotional item:
- early on, to an offer for a guided exploration of the new application
- later on, to an in-focus link to view programming that has no relation to the user’s viewing habits data, but only to what the business wants to promote, the holdover construct from schedule-driven programming, called Lineup, a construct which has little or no meaning for millennial users.
There are far more subtle and effective promotion methods available in the streaming media industry, but worst, where’s the list I just spent 20 minutes creating? This is an Epic Fail! What now ensues is fundamental disappointment and a frustrating search for where my 20 minutes of effort could have gone!? The user then attempts to navigate around the U.I., most probably discovering the links directly above the highlighted promotion item. This brings them first to the current focus link, called Lineup. User reaction? “What’s this?” As a further failure of metaphor, Hulu isn’t a particular network, it’s an aggregator, therefore there is no expectation of a Lineup. Second, there is no obvious explanation as to what sort of affiliation defines what or why things are a part of this Lineup. And, third, for our first-time users, additional frustration has been added because it isn’t the Favorites list they just spent 20 minutes creating!
With each exploration to come, the frustration, “where’s my Favorites list?”, gets worse and worse.
The user now explores right, across eight links, and still Favorites isn’t there! Next they may do one of several things: attempt to navigate back to the first of the links, discovering that there is no obvious method displayed in the U.I. (savvy gamers will eventually discover that the B button will return them to the top of the list, but this is far from immediately obvious); or they will navigate back down into the body, just to exit the links; or conversely they will navigate up to the top links, consisting of unfamiliar, and subtle to the point of near invisibility, icons, defaulting to Home. This Home link now introduces a \completely new in-focus highlighting method—a better one—but that’s hardly the real problem. I stand strongly behind the interpretation that, since the user is still searching for their Favorites list, and they’re now on a nearly empty screen with only a couple of links for promotions of New Movies, which they were not currently interested in, they will now select that Home link. Instead of satisfying the undeniable expectation that this will at least revert them to their default state, where this fruitless search for their Favorites began, all this does is shift focus back down to New Movies on Hulu.
Only the, as yet most probably undiscovered, B button brings them to that, while also counter-intuitively shifting focus again to the top links and the Home button. With any luck, the perseverant user will now navigate along the top line, finally next achieving success by highlighting the My Stuff icon and link, revealing their Favorites list in the screen body.
Beyond the First-Time User Experience
Though this U.I. is already fraught with conceptual errors and design misconceptions, at the very least a consistency of naming would have helped and possibly avoided some amount of time spent searching for those Favorites among the weeds of this experience.
This sort of thinking, or lack thereof, is everywhere in the industry and throughout this new experience. The Browse link (we’re getting warm, right next to the Holy Grail, the finally discovered My Stuff, i.e., Favorites link) leads to a short list of high-level categories, where the user can quickly attain further confusion as soon as they begin to scroll through because of the aforementioned overlink highlight. Each of these high-level categories bring the user to selection pages with sub-categories across the top and image links below, all fairly standard and effective.
However, even though the screen real estate remains unused, for possibly aesthetic reasons, the Top links lose persistence and disappear, with the only remaining access being to back up with the B button (admittedly the first expected use of the B button) to regain access. Of course, there had to be a gratuitous exception, which is Genres, which brings the user to a sub-page, with no persistence of navigation, and yet another list, now many, many vertical screens long, consisting of nearly the entire alphabet of categories, and yet another breakdown in consistency and expectation, because, if the user has discovered the aforementioned use of the B button to return to the top of the page, alas, that’s not what the happens here. The user here is bumped back up one level, back to the Browse -> Genres link on the previous screen, where they can click it again and restart their genre search from the top. So, the one page where the (hopefully) established pattern of the B button might be its most useful, for difficult-to-guess reasons, it is not.
If you can’t see it here, Seinfeld is the in-focus link. More on that next.
And lastly, though there are several more small examples, there is one crucial example where Visual Design aesthetics needlessly go into direct conflict with the needs of the interaction User eXperience and demand to be called out. On every one of those final selection pages there is a lovely defocused background image, drawn from the content appearing on the page. It’s quite a beautiful effect and another triumph for what I continue to laud as excellent Visual Design. However—and this is a major however—the choice to draw a harmony color directly from these background images, as the in-focus highlight for selection, frequently renders the selection highlight nearly invisible, especially to the casual viewer and others in the same living room. Since entertainment viewing is most frequently a multi-person activity, if the user driving the selection cannot even ask their companion(s) in the room if they’d like to watch the highlighted selection because they can’t discern which is highlighted, well, that’s a pretty poor experience for all concerned. This is especially unfortunate because, just as the harmonious color is derived algorithmically, so a contrasting color, of equal aesthetic value, could just as easily be derived, being both aesthetically pleasing AND visually functional. This could have been avoided by a 10-minute conversation between the Visual and Interaction designers, if only there had been an Interaction Designer involved.
With sincere regret, I really could continue for several thousand more words, because there are many, many more deviations from best practice, missed opportunities for innovation, and just plain failures to use the data and design resources available to this product, but I have hopefully made my point.
I come to the conclusion that there’s only one reason this happened, and that is the tenacious belief that beautiful Visual design IS UX Design, with a critical missed opportunity as the result.
