Spa Sensation on the Web

Canyon Ranch, the luxury destination spa, makes good use of visual interface design to convey a highly sensory experience for its desktop and mobile web users.

In particular, strategic use of text, shapes, and the size of the shapes along with high-quality video and dramatic contrasts among elements make the site attractive, drawing in even the shortest attention-span users. The elements are among those described in “The Essentials of Interaction Design” in chapter three of “About Face” by Alan Cooper, Robert Reimann, and Dave Cronin.

The elements used in the site make a big impact. Canyon Ranch’s web presence is essentially a travel planning site, but its use of visual interface elements make it seem much more.

Sensory Shove

The site makes excellent use of imagery, especially auto-play video. As Cooper, Reimann, and Cronin point out, it’s how the images are used. Whether on desktop or mobile, the user is greeted by a large, warm moving image.

 

Sensory Imagery: Auto-play video is quiet, intimate and exciting on mobile (above) and desktop (below).

 

Variation Adds Excitement

The images are  of a consistent sensory expressiveness and vivid quality, but there is variation, which adds to the excitement of the visual interface. Only the top “hero” images are auto-play videos. Others are contained in static boxes. Still more are contained in round buttons that provide users with access to another level of the website. Because there are so many images on the site, users are likely to touch them as they scroll past, but even that is part of the experience with images emitting a flash of color when moused even in passing.

 

Shape: The round buttons filled with minimal text and vivid images add variation and excitement.

 

Centering

The typography is simple and its placement plays a roll in the overall message Canyon Ranch wants to convey. In both experiences the text is centered. It’s a very subtle invitations to users to make room for a centering breath or centering experiece.

 

Canyon Ranch is a place to center oneself and beautifully centers the content for visual chai.

 

Arranging Impact

The site content strategy pushes the strongest visual content and the most aspirational content to the forefront. Users might expect to see lots of recipes and healthy living blogs, but these are left for users to find through exploration.

It’s a website that forces the user to breathe slowly and deeply and engage.

Home screen ATK

Delicious Navigation

America’s Test Kitchen (ATK) has long separated itself from its Food Network siblings by its serious approach to cooking and a rich, subscription website. The experience is close to seamless as users are able to access and watch familiar television episodes and the tone of voice mirrors the on-air relationship that the ATK conveys.

While it’s not obvious if it is a fully responsive site, it does seem to be free from the “myth of the mobile user” as described by Peterson. Mobile once meant someone was out and about, and only needed certain types of information, but that is no longer the case. “People want to do everything on their mobile devices that they could do on their desktop computers – that is as long as you let them.”

ATK seems to want users regardless of where they are or the device they’re using. It keeps navigation simple regardless of mobile or desktop experience. It’s clear ATK understands its users desire to explore or solve a problem, and provides easy navigation for those journeys.

Once logged in, one is greeted by familiar faces of the television show, minimal top navigation, easy-to-grasp scrolling, and a search box that indicates the site will look for more than just a recipe.

Home screen ATK

America’s Test Kitchen home screen has all the familiar features: robust search, favorites, and hamburger navigation.

 

Access Favorites with Ease

Other key features from the desktop experience are easy to locate and easy to use. Click on favorites, which bears the same blue strip on the desktop version, and the user will see all the recipes saved. It can be sorted by “collection,” “alpha,” or “date.” The user can view as boxes or a scrolling list. Both views include trademark professional images.

Favorites section on ATK

Favorites are organized and can be viewed in boxes or as a list. Both include images.

 

The navigation on the desktop is fairly simple, and is handily folded into a hamburger on a mobile device.

Hamburger nav ATK

Hamburger navigation mirrors desktop navigation.

 

Opportunity for Improvement

There is room for improvement. ATK is a subscription site, but pushes additional purchases and free trail memberships constantly. It creates a negative experience and can leave the user feeling that a non-subscription site might be just as good.

America's Test Kitchen Hamburger Navigation

Tough to find log in with so many offers

Too many offers

Still trying to log in but still getting offers.

Peterson, Clarissa. Learning Responsive Web Design. O’Reilly. p. 224.

Relax or Stress?

Airbnb.com, booking.com, homeaway.com, and many other vacation rental websites have expanded the universe of what is available to travellers and what travellers expect on vacation.

User experience and how users interact with a booking website and the vacation experience means that homeowners wanting to earn passive income need to be aware of who their users are and what they want. They don’t have to go overboard, but a sense of harmony must prevail in the transition from interacting with the web experience to interacting with the vacation experience. It’s an area that could benefit from the use of personas. Homeowners can identify key interaction moments and design them with personas in mind.

From the images posted on Fingerlakespremierproperties.com of the expansive space to its lux description, it’s clear the owner of this vacation house wanted his or her guests to enjoy their stay.

grand room with view of lake

The author recently stayed at this “premier” property. As you can see from the copy below, the renter’s enjoyment is primary.

copy from website

Guests in Every Size

There’s much to enjoy that the owner delivers on. It’s also apparent, the owner gave a lot of thought to his or her guests. Making sure that the beds are Leeza brand with organic cotton bedding, kayaks for quiet enjoyment on the lake, a fully-equipped kitchen that would please family cook or gourmet chef.

Providing Help

It’s in the kitchen, that it becomes clear that the owner seems to have engaged the idea of personas – making his or her potential renter as real as possible.

In the kitchen, and throughout the house, the owner has left instructions or identifiers to help the renter. These instructions range from the very simple (Figures 1 and 2) to the complex.

Various types of dished labeled.

Figure 1. (Above) Simple instructions show renters where to put dishes and Figure 2 (below) identifies basic spices.

 

Adding Complexity

The instructions vary in complexity, exposing a sense that the owner used an “elastic” persona (Cooper, Reimann, Cronin, Noessel), creating a user-composite of various experiences and backgrounds (Figures 3-5).

document with three remotes

Figure 3 (above) The 57-inch cable-configured TV advertised on the website requires at least two remotes and a page of instruction (Figure 4).

(Figure 5) Not only are the instructions lengthy, they are poorly written. Most users will read: “Turn the TV on and off by pressing the TV …” However, the full instruction is to follow that action by pressing the “power” button.

The instructions for the television are likely not very useful to the persona who has rented the house for the lake views, nearness to the Finger Lakes Wine Trail, or kayaking. That person may well want to watch TV, but probably isn’t expecting a full-page of instructions, including trouble-shooting.

The sound system is an excellent example of “self-referential design” (Cooper) that results when the designer thinks he or she represents the user. The owner has made available a sound system that allows guests to listen to their music . But if the guest is not a sound-system savvy geek, it’s difficult to make sound occur. The owner seems to have used himself or herself as the persona here (Figure 6 and 7). If there’s a failure to connect, the owner suggests the renter’s device is at fault. Interaction expert Donald Norman advocates that the blame should lie with the machine and its designer not the user.

 

sound receiver

Figure 6. (Above) The system offers multiple options for linking and connecting to a personal device, but it’s unclear which conditions should be applied. Figure 7. (Below) The instructions again provide trouble-shooting that likely is helpful to the “owner persona.” If there is a failure to connect, the instructions blame the renter’s device.

Recommendations

It’s a big house, so even though it’s not optimal to design with several detailed personas in mind (Cooper), it’s possible to accommodate a range of users without alienating them.

In the case of the television, the owner might consider a very simple hotel-style TV set up that presents a familiar mental model.

  • The house boasts a television in every bedroom. Those televisions could be configured for the persona who demands a state-of-the-art entertainment experience. The bedroom televisions are appropriate as the house – indicated by the kitchen instructions – is intended for low-tech enjoyment as the primary user.

A similar approach can be applied to the sound system. However, only one major sound system is necessary, so other options will need to be explored.

  • One thought might be to offer fewer device options similar to those offered by Bose systems or Samsung’s wireless audio collection.
Cooper, Alan; Reimann, Robert; Cronin, David; Noessel, Chris "About Face: The Essentials of Interaction Design." Wiley, 2014.

Norman, Donald, "The Design of Everyday Things." Perseus Books Group. Revised & Expanded Edition, 2013.
child in origami star box

Educational and Inspirational

Origamispirit.com delivers a successful user experience, clearly identifying it as a passion-pursuit website by Leyla Torres aimed at teaching and sharing the joys of origami. There’s room for improvement, but even as is, orgamispirit.com provides an enjoyable experience that makes users want to return.

Origamispirit.com clearly understands its users, which, according to Jesse James Garrett* in The Elements of User Experiences, is the core discipline of information architecture. It engages the user in what Garrett calls “the dance”: “The user moved around, and the system responds. Then the user moves in response to the system, and so the dance goes on.”

The visual treatment, consistency from page to page, high-quality video are its best features. The simple graphics and blog-style format along with navigation limited to the top of the page tell me that as an origami beginner, I’ll feel right at home (Figure 1). Yet, I appreciate that it’s not aimed at children. I can make something that appeals to an adult.

Figure 1. Origamispirit.com uses a blog-style format (1), simple graphics (2), and navigation indicate beginners are welcome.

 

Constant Feedback and Orientation

That’s born out as I hover over the top-nav. I easily find the videos. Beginner tutorials are at the top. With each click, I make successful progress toward my goal of finding something I can make (Figure 2). From each page, I can either return to the previous page, go to the “Home” page or choose an adventure by searching for keywords.

Persistent and constant feedback

Figure 2. Persistent page features coupled with affirmative feedback provide a positive experience for the user. From the dropdown list one can select “For Beginners.” The reward is (1) a clearly identified landing page with tips and project visuals. Hover text (2) provides more detail. Once a project is selected, the user will find the same features for every project: Introductory text, video, and tips and suggestions.

 

Community Spirit

Origamispirit.com seems to also be a community. Torres names people who have shared ideas or reference books and experiences she’s enjoyed.

Including time codes on the videos and providing an option to choose a language you want to work in shows a respect for the users time and comfort. Its presence also tells me that Leyla Torres believes this is an experience that crosses cultures and agendas.

The community sensibility is at its best with Torres’s “Fun! – Non-tutorial” section (Figure 3) in the video drop-down list. This section shares the joy and passion, and opens visitors to lesser-known origami experiences.

child in origami star box

Figure 3. The Fun! – Non-tutorial section opens users to ideas and experiences beyond traditional origami.

 

Put-off by Pop-Up

One thing that stood out as particularly off-putting was a pop-up (Figure 4) inviting me to join the email list in exchange for an origami plan. It seems out of place in a craft or art-type community, and unnecessary if I can enroll on the site.  Even the placement – across the top of the page – of the invitation to sign-up for an email subscription seemed aggressive.

email subscription form

Figure 4. The free tutorial felt invasive and out of place and contrary to the community-building feel of origamispirit.com.

 

Recommendations

Community-building could be enhanced with more conventional layout while maintaining the ease of the site.

  1. I recommend moving the “privacy policy” and “contact information” out of the top nav to a footer.
  2. Across the top is an invitation to sign-up for an email subscription. This too could move to the footer.
  3. The Fun! – Non-tutorial section is so rich, I’d recommend moving it to the top-nav where it will gain more visibility.

The visual treatment could benefit from higher contrast. As it is, it feels “soft.” Deeper color tones, a less delicate typeface, or even including male hands in some of the videos give it a more intense feel. However, this is very subjective reaction and doesn’t truly diminish the experience.

*Garrett, Jesse James The Elements of User Experience: User-Centered Design for the Web and Beyond, Second Edition. New Riders, 2011. p. 81.

 

 

 

 

 

 

 

 

Crusader for Usability Testing: A Conversation with Dave Lumerman

photo-40120

“People understand the concept, but they don’t understand that it has to be done.” 

I recently sat down with Dave Lumerman, the in-house usability tester at New York Life. Over the 15 years he’s been with the company, he’s evolved into user-tester after a career in animation, advertising illustration and web publishing. His approach has always been user- focused. In this burgeoning field, he’s had to be strategic in promoting the value of user-testing. He made inroads by taking on the less attractive aspects of web production and honed his user testing expertise. He continues to fight the good fight, showing the ease and cost-effectiveness in testing. But inevitably, he’s found one needs a high level advocate. 

Early on in your career you made yourself useful by creating what you call “good HTML.” What do you mean by that?

At the time (2001) it was the Wild West. Developers were building things based on their mental models which didn’t really equate to the mental models of the business areas they were supposed to be serving. There was no standard. The W3C [World Wide Web Consortium] was still young. There were no standards. Things that should make sense from screen to screen didn’t. You might start out with a button that’s square on one page and a click or two later, now its round and it’s a different color. It wasn’t uncommon to be working in an application, click a button and arrive at a screen that was entirely different as if you went to an entirely different application.

In 2001, web standards were still in the "Wild West" phase.

In 2001, web standards were still in the “Wild West” phase. So I took that on. I created house standards. This is stuff that is considered a no-brainer today. But what I did, what my team did, was to make the developer job easier. That got us a seat at the table.

So how do you go from cleaning up HTML to becoming a usability tester?

We were not considered as important as the web strategy team, but then something happened.

The entire employee benefits enrollment program used to be a collection of paper forms. It was very complicated on paper.  The developers found a way to put it into a web-based system, so an employee could do it all online. The developers showed it to the CEO, and there was blood on the walls when he was done yelling at them. What they created made him feel stupid because he couldn’t figure it out.

The company had made a huge investment, so something had to be done. The developers batted it over to us to fix.  We went through all the paper artifacts. We identified what made sense to translate into an online interface. Not only did we develop the application, but we did something radical. We put in front of actual people. They’d done this way back when there was a usability competence here to deal with mainframe applications.

We included power users, but we also included people who only used a computer to select benefits. Our efforts paid off. We made the investment pay. None of this was recorded. This was just us watching them. Fast-forward 14 years, and it’s all recorded, it’s all standardized. There are things like test scripts. None of this existed then.

So from that milestone, how has your role developed?

It’s a different environment now. We had the best thing you can possibly have at a corporation. We had an advocate. If you attend any conferences they all say the one thing: you have to have an advocate high enough in the organization to effect change. We had that. We never dealt with him again personally, but we has license. All we had to do was mention that story. That’s changed. User-testing is something I find I have to promote.

Design Critique: Council Central (New York Life Agency Portal)

Agency Portal Front Page with IDs

Introduction

Council Central is where the company’s 10,000 sales people can find all information on how to qualify for a sales Council meeting, where each meeting is held, registration and access to presentations post-meeting. It also contains promotional information on the location and activities. The initial launch was well received by the sales force and also by Home Office executives.

That Council Central is accessible from the front page of Agency Portal – and all subsequent pages with Council Central – and that with one additional click of the mouse agents can obtain qualification requirements (tab under masthead) or standings (tab under masthead) is a mark of progress. And it’s a functionality that has been maintained. Fully two years later those functions continue to allow the user get that information in the same easy manner. Ease of locating other Council-related content, however, hasn’t been maintained. These successes and complications are a good jumping off point for improvements.

Suggested changes

The page is called Council Central with the perceived affordance of centrally locating all information relating to Council. Yet the departments that control the various aspects of Council experience (there are at least three) don’t agree on how to support the site. As a result, agents who go to the site find some information, but soon discover what is missing, and then determine a search strategy. The unrealized perceived affordance creates a mistrust about the validity of other perceived affordances.

A combination of improved mapping, leading to improved visibility, and the creation of constraints would make the perceived affordance an actual affordance.

Mappings

  • As you can see from the screen image, there are two places on the site for each Council level. Both lead to the same place, so eliminating the ones in the “Additional Information” (B) section would improve visibility and enable the user to take the correct action.
  • Other dead links and irrelevant information should also be removed, including “Council 2016,” “Ever Wonder How a Council Meeting Is Made?,” and “President’s Council: Don’t Be Left Out in the Cold!”
  • The remaining items in the “Additional Information” section should be moved down to the “Quick Links”(C) section. However, to improve visibility, it would be better to label the section more specifically. The items are intended to direct the user to ideas and strategies that drive sales that help them qualify. So a better, more obvious title would be “Earn Council Credits.” That box would then have a link to “W.I.N. What’s Important Now?,” “Update & Review,” “Social Networking,” and “Social Security Resources.” These are all web locations with information and actions that directly lead to earning Council Credits.
  • The tab labeled “Council Promo App” (tab under masthead) should be removed immediately. It is a dead link leading to expired content.
  • Promotional content should be included in the content for each meeting. If it applies to all four meetings, then it should be contained in an overview section on the main landing page.  The “Council 2016” (B) content could be located in the same overview section.
  • “Council Standings” and “Rules & Eligiblity” are very clear headings and contain the information that a user would expect to find there. Moving “Council Transfers”(tab under masthead) into “Rules & Eligiblity” would tighten up the visibility, and signify to users that they don’t need to be on the lookout for dangling, spare information.

Constraints

One department creates meeting content and another manages logistics. Each posts in locations that are administratively convenient. However, it becomes problematic for the user and also undermines the primary affordance of centrality.

  • A constraint that forces all information to post in Council Central would be effective.
  • I recommend making all sections visible whether they are live or not. This would show users information they need and will need. Users would see a “registration” tab. It wouldn’t be live until registration opens. Similarly, a “Meeting Presentation” tab would be visible and could be live, containing presentations from 2015.
  • This adds value showing users the important content from the previous year. And iniates an unconcious learning process that causes users to go to Council Central  for everything.