An Exercise in UX

\ by

Subject: The Whole Foods Recipe Search UI

Objective:

Find a recipe that I (a terrible cook) can make for dinner guests that must be gluten free and vegetarian.

The first look

The UI is clean and pretty straight forward.

I have a number of options for starting my search.

There are two different search inputs and one with an “Advanced Search” option.

Scrolling through the page, I don’t notice anything off the bat that mentions gluten-free or vegetarian. Turns out there are a couple mentions down the page of vegetarian options but I didn’t notice them.

First search attempt:

I try typing gluton free vegetarian in the second search input. The results are a little disappointing considering the input boasts 4003 recipes.

Of course, if I were to have read the error message, I might have realized that I spelled “gluten” wrong. But I’m not a “read the error message” type of guy, so I hit the back button and start looking around.

Further exploration:

Back to the recipes page and I click the “Advance Search” button and discover the filters I needed. The UI seems pretty straight forward at first. I can make selections for Gluten Free, Vegetarian, and Dinner.

As I make my filter selections, I think that it would be nice if the UI reacted to the selections I was making. The number of available recipes could be reducing to reflect my choices instead of just disappearing. Selections that are no longer relevant could be grayed out or otherwise disabled.

Now what?

After I’ve made my filter selections, how do I get to a list of everything that is available to me? I try typing “everything” into the search input and clicking the search button. I get a recipe for Beans. Not exactly going to make for the most impressive dinner party and I can’t help but think that I may have done something wrong. Fortunate for me, I have some experience working on web based search interfaces, so I try hitting the search button without entering any terms in the input box. This does the trick! I now have a list of 88 gluten free, vegetarian main dishes to choose from.

Goal achieved… mostly

At this point, I can peruse the remaining pages of recipes exploring options that meet my criteria. I’m pretty confident that I can find something to cook.

I start reviewing the recipes and by the time I get to page 3, I realize that most of what I’m seeing is way too hard for me to cook. Going back to the “Advanced Search” UI, I see that I can also select “Quick and Easy” from the filters, run the search without a search string and I’m left with 11 recipes to choose from.

Is it just me?

When evaluating UX issues, a lot of things can be pretty intuitive. I know that some of the hurdles I ran into wouldn’t be a problem for most people. I doubt that a lot of people would type “Everything” into a search box but, I’ve seen it done in user testing for other software, so I know it can happen. The best way to know if the problems I ran into with this UI would be to run a user test. So, that’s what I did.

“With 5 users, you can discover 85% of usability problems”

– Jacob Nielson

I asked 5 people to try to find gluton free, vegetarian dinner recipes using the Whole Foods UI and found that not one user went right to the “Advanced Search” link right away.

Two users never found the filters. They stuck with input strings with varying degrees of success.

Without the spelling error, “gluten free vegetarian” yielded 7 results. “Gluton free vegetarian dinner” yielded no results”. Search strings never yielded the 88 appropriate results I got using filters.

When asked why they didn’t go straight to “Advanced Search” the test subject all assumed they were not advanced users.

Some very quick and dirty user testing has confirmed that it is not just me and the UI could use some improvements.

Proposed solutions:

Re-label the “Advanced Search” button

Based on test subject statements, simply re-labeling “Advanced Search” to say “Filter Recipes” is expected to provide the affordance needed for them to understand what capabilities are available via that link.

This is a super low cost improvement that can easily be tested to prove it’s effectiveness.

Expose filters from the start as facets

My belief is that the best solution is to expose the filters as facets to the left of the results. They could be grouped in collapsible divs with the first one opened to display the potential functionality.

The interface should update itself as the filters are applied. This would remove recipes from view as they get filtered out and the total number of results should update.

How do I know if it’s a good solution?

Present 5 new test subjects with the mocked up UI seen above and provide them with a similar task.

I would suggest modifying the test to request that the user find a Middle Eastern rice dish. If a significant number of the test subjects go straight to the facet selections, we can claim success and evaluate implementation.

How do I work with the team on moving this forward?

As we’ve seen, this looks like a solution that works for the user. Typically, that means that it’s a solution that would be approved by the product managers. I would present the problem/proposed solution to them in much the same way I have above. I’d have to be careful not to assume that my proposed solution is the end of the conversation. It’s the beginning and would have to be presented as such. If there are still questions about the measurable benefits of the proposed solutions, more extensive user testing should add the necessary clarity.

We also have to sanity check the designs with the engineers. I did the solution designs using Firebug, so many of the layout and CSS issues come with a level of implementation investigation. I find that the engineers who will ultimately implement the proposal appreciate working like this. Firebugged solutions are lightweight, flexible, and transferable with a reasonable amount of ease. Still, much of the AJAX suggested above would have to be discussed and estimated. We’re still in the early stages of the proposed solution and revision suggestions are welcome and encouraged at this point.

After all of the stakeholders have had an opportunity to evaluate and contribute their own input, we should have a pretty good idea if the idea has legs and should be implemented.

The code:

Click here to get to a .txt file with some html that can be used to replace #main on the Whole Foods Recipes page using Firebug.

Posted in: Professional \ Tagged:

CBS Show “Bull” Imitates TAC

\ by

File under “imitation is the sincerest form of flattery”. CBS has a new prime time show called “Bull”. Haven’t watched it yet but the promos on their website feature TAC software that looks remarkably similar to the TAC software designed and developed by the team I’ve been working with for the past 13+ years.

Posted in: Professional

It’s getting harder and harder to be an Apple fan

\ by

Seems I’m on a trajectory that is taking me from Apple evangelist to Apple apologist and beyond.

My history and affection for Apple products goes back to computer art classes in the early ’90s. There was a ton of innovation going on and every month you could do something new on a Mac that you wouldn’t have thought possible. It was in early 2001, when Mac OS X came out that I fell in love with Apple. My computer stopped crashing once I installed it. It was more beautiful and user friendly but the most important thing was that it had a level of quality that was far and above everything else available for a busy graphic designer.

I was so impressed that I started investing in their stock. That has worked out really well.

We all know what game changers the iPod, then the iPhone/iPad/iPod Touch were. It was a fantastic experience to use any of those devices as they were released.

Eventually, Steve Jobs got sick. He seemed to be doing all he could to pass on a culture of innovation in the time he had left. I wanted to believe that the company could continue as well without his guidance but I’m afraid I’m just not seeing it these days.

What am I seeing?

  • The glass quality on the iPhones/iPod touches seems to be deteriorating. My daughter’s 5th generation iPod touch fell no more than 3 feet onto a wood floor with a rubberized case and the glass shattered.
  • Piss poor design decisions. Look at the power button on the iPhone 5, 6, and 6s. Obviously, poorly placed so that it is difficult to operate without also interacting with the volume buttons and getting unexpected behaviors. Should be a simple fix but 2 releases later, it’s still in the same lousy spot.
  • Accelerated deprecation of hardware. No statistics on this, but it seems that OS updates are requiring me to buy new hardware at an accelerated rate. I used to be able to write this off as the cost of early adoption and technical advancement but there hasn’t been a lot gained with my new products over the old ones and, frankly, the latest OS for my phone and my Macs have been somewhat unstable.

So, what am I left with? A company that is riding it’s own coat tails. Fortunately for Apple, no one is obviously outshining them on the quality and innovation front. There are always opportunities out there to make revolutionary designs and I for one am less inclined to look to Apple for inspiration.

Posted in: Professional

A great article on how “Bling” can ruin a good UI

\ by

www.perceptualedge.com/blog/?p=1532

This article can come off as somewhat stodgy to some, but it presents very good points on the dangers of trying to add vitality to data analytic software.

When the bar chart is absolutely the finest way to display the data and the designer is being pressed to use a less effective display, such as a word cloud, the designer has to sell the bar chart visually as well as empirically. Comparative designs that are user tested should reveal the best option with minimal dissension.

 

Posted in: Boeing, Professional

Joining a new team

\ by

Recently, our offices have been doing something we have taken to calling the “task order shuffle”. One project runs out of money and the team members have to be rapidly dispersed to other teams where they can be useful. It’s a less than ideal situation but, in some environments, it’s unavoidable.

For me, I’ve found that the best way to start adding value to a new team, right away is to start doing user testing on the software. Unless they have been doing it regularly before you got there, it’s a great source of new information and direction that is best gathered by someone new to the group.

Posted in: Professional

Some thoughts on Leadership

\ by

Performance reviews on a curve

I’ve seen situations where managers are told to apply a curve to performance reviews for their direct reports. This makes sense, as it keeps them meaningful and people generally know how they stack up against their peers. Unfortunately, I’ve seen the method applied badly and would like to share some thoughts on what I believe to be best practices.

Find opportunities to provide feedback more often than what is scheduled by the corporate headquarters.

Honest and straightforward communication regarding whether or not a direct report is or isn’t meeting expectations should be a near daily occurrence. Generous praise, constructive feedback and reassurance are much more effective when they are given in response to recent events.

Keep the curve consistent

I’ve seen situations where the curve was changed by external factors and the change was not socialized. This caused people to get evaluations that were substantially lower than their last ones without a change in their effectiveness. Whenever a direct report is going to be held to a new standard, make sure they are well aware of it.

Stay consistent with your feedback

If you praise someone for a behavior such as speaking their mind or taking a risk, be sure to remember that when they try it again and it doesn’t go so well. Make an effort to talk through what made the behavior praiseworthy before and less so the second time.

Use the review process as an opportunity

Almost all managers want all their direct reports to be stellar achievers. Almost all employees want to be seen as stellar achievers and are willing to work towards that end. Performance reviews are a great opportunity to get them there. The manager needs to go into reviews hoping to find ways to help their employees advance their careers. The employees need to go in with similar objectives.

Posted in: Professional

Attaboy for my work with VII

\ by

I got this following a little over a month of work with one of Boeing’s other development groups in the DC area. It was a great project and I was proud to have had a positive impact on it.

From: Crooke, John K
Sent: Friday, November 07, 2014 09:06 AM
To: Lee, Thomas O
Subject: RE: VII Support

Thom,

Let me also thank you for your assistance. Here are some comments I provided to Carlos for his excon meeting, describing the milestone accomplishment of our new website’s creation:
“With leadership from Thom Lee, the look and feel of the new vii website and search portal has been established.
His user-experience centric ideas for the new user interface were influential to the direction of the project.
Thom also established an agile/scrum methodology for task management, which was only in its infancy when he was [unable to continue on the project].
The customer’s system integrator … was [pleased with Thom], particularly because of the ideas he was generating and his leadership in the scrum standups.”
We’ll miss you but we’re grateful for your push in the right direction, and I hope your experience at our customer site was of value to your group as well.

It was a pleasure working with you.

Thanks,

John

Posted in: Boeing

VII Redesign

\ by

Volunteered to travel to Langley VA for the first half of the week for the time being to work with a group called Visual Information Initiative. They’re re-deploying their satellite image search and retrieval software into the C2S cloud and have asked for my assistance with a UI re-design that takes advantage of the faceted search capabilities provided by SOLR. This is going to be a huge improvement.

Posted in: Boeing