Configurator Usability Challenge: Ordering online from Outback Steakhouse
This is the second post in an ongoing series of product configurator reviews in which I review the online configuration process on websites.
Recently I placed my first online order with Outback Steakhouse for curbside pickup. I appreciated the ability to order online but found some usability concerns that I'd like to outline in this post. Prior to this online order, I was neither aware of online ordering or curbside pickup at Outback. This is mostly due to the fact that we do not frequently dine there (2-3 times per year on average).
The purpose of this post is to articulate how user experience in a physical store environment (in this case, the Outback restaurant) is not always reflected online. Companies large and small need to factor the physical experience requirements with the virtual experience requirements. If an Outback restaurant was presented like their online ordering experience is presented, there would be few repeat purchasers.
On with the screen shot reviews:
Step 1: Main Menu
My initial reactions:
- No search. This is an area that I haven't seen many online restaurants embrace, yet. If I know what I want, I should be able to search for it. However, I can somewhat understand why it's not offered because restaurants generally try to emulate their physical menus -- which obviously do not offer searching capabilities.
- One long, scrollable menu. The left-hand navigation is a series of anchor points. This was an interesting concept that didn't bother me, but came across as non-standard. This layout would be more of a problem if there were a lot of pictures.
- Lack of pictures. The only menu item with a picture is the Aussie-Tizers at the very top. This is an online merchandising faux pax. Hard to up-sell someone, especially with food, if you can't see what it looks like -- this is why restaurants typically have the "dessert cart" to show off / upsell their desserts when you think you can't fit anything else in your stomach.
Step 2: "Configuring" Baby Back Ribs?
- Clicking a red link in the left column forces the right column of the browser window to refresh.
- OK, I see Baby Back Ribs on the right-hand side of my screen.
- I have to click on links in the right-hand side to further configure this order (i.e. "click to substitute").
- Usability concern: Clicking on links generally takes me away to another page (I want to order Baby Back Ribs -- will I need to re-add them to my cart after leaving this page because I'm not clicking "Add to Order" yet?). Very non-standard.
Step 3: "Configuring" the sides
- I "click to substitute" Aussie Fries for a Signature Side Salad (if you've ever ordered fries with a curbside pickup order from any restaurant, you know that the fries are soggy by the time they make it back to your house).
- I don't understand what "Special Instructions" are for. In my first pass through their site (before taking screenshots), I entered my salad dressing type here. The last thing I wanted was a salad without salad dressing.
Step 4: Choose side salad type
- Right-hand part of the page has refreshed again, now asking me for a salad type. Again, not that I personally need them, but showing pictures here would really help upsell to other types of sides/salads. Instead I go for the old faithful "House Salad."
Step 5: Choose salad dressing
- Page refreshes again and asks me for the salad dressing type. For some reason, this is a drop-down menu instead of radio buttons like the previous page. Subtle interface issues like this make for additional usability concerns when switching question/answer display types.
Step 6: (Upsell time) Salad or Soup?
- I just completed 3 separate clicks to override Aussie Fries for a Salad, chose my salad type, then chose my salad dressing. Now I'm being asked if I want a side salad? This configurator is not intelligent enough to detect if you've already ordered what it's asking you for.
- "Click add to order to proceed" is counter-intuitive. If I don't want anything, then I shouldn't be taking the action to "add to order" my "No soup or salad" option. A simple "no thanks, skip this option" would be more appropriate wording.
Step 7: Additional add-ons?
- I just got finished making it through 6 separate pages and I still have not added Baby Back Ribs to my order.
- Again, trying to up-sell without supporting photos of these "Add-on Mates"
- Like in step #6, counter-intuitive use of "click Add to Order to proceed"
- And the mysterious "special instructions" field still exists -- I'm not sure what instructions I would add here? It would help if they provided examples of what information they would look for here.
Step 8: Completed Baby Back Ribs "configuration"
- 8 pages later and many more clicks than that, I have added Baby Back Ribs to my order. That's quite a few clicks and now I'm really hungry.
- Other concerns about this page include:
- Tax is only estimated and may vary by store location. There is technology available to accurately calculate tax for each individual store.
- "No Add-On Mates, Thank you (click Add to Order to proceed" is an actual "option" on this order. This is not user-friendly.
- Would like to see the ability to duplicate an item in the order
Overall User Experience Analysis
The non-standard navigation (split left & right columns), numerous clicks for ordering Baby Back Ribs, no indicator as to how many steps are in the process to configure an item on the order, and the overall lack of standard online shopping functions (photos, sorting by price/name, searching, etc.) put this site near the bottom of the "easy of use" list for me, personally.
Had this been a local mom & pop restaurant, I would have called in my order because I would not have trusted the website enough. Because Outback is a well-known brand name, I was able to look past these usability flaws and place my order online. I would speculate that by making usability improvements to eliminate these barriers, they would see more curbside orders being placed online and their call-in orders would decrease.
Product configurators should imitate real life guided selling
In the real world, if a waiter would have walked through the same set of questions I had answered on the website, it would have aggravated me: When I substituted the side salad for Aussie Fries, I should not have been asked again if I would've liked a side salad for an additional $2.50. This is where product configurators online need to reflect real-life scenarios and not function like a computer running through a list of questions.
Fortunately, most people "get" the restaurant ordering experience and can look past these usability flaws. However, for manufacturers and retailers selling products which consumers do not purchase often, product configurators must be highly intuitive, helpful, and be positioned to up-sell but most importantly to answer questions about the basic options being presented to consumers.
Stop “Marketing for the Sake of Marketing”
Online marketers, brand managers, and channel marketing managers: Why are we in business?
- To build our mailing list?
- To "get more traffic" to our site?
- To increase average time spent on our site?
- To increase average pageviews per visit on our site?
- To get more new users to visit our site (no matter how qualified)?
- To get more followers on twitter?
- To get more fans on Facebook?
None of the above.
These are by-products of a marketing campaign. In fact, these are not even indicators to suggest positive or negative performance of a campaign. Why? Because they are not relevant to a consumer/customer. If these are listed as goals of a campaign then this is "marketing for the sake of marketing."
What is relevant to a consumer/customer?
Growing your mailing list by 10% does nothing if that 10% never buys your products. Increasing time spent on your website does not suggest you've tapped a resource for new brand advocates, either (it may however suggest you've created additional roadblocks preventing site visitors from completing desired tasks in a short amount of time).
Meaningful messaging that triggers action leading to a conversion -- this is marketing and it's why we're in business. Anything else is just noise that makes your brand irrelevant to your target audience.
Online designers and agencies not quite shaking “print” mentality with web interfaces
A trend I've been seeing more of lately on websites is taking usability a step backwards by reverting to old tactics that sacrifice usability in order to retain the "design aesthetic."
Above (via the Ford website): How is reading this much copy in a small, scrollable area convenient or easy for online shoppers?
This mentality reminds me of the early days of web development where print designers tried to make the transition to designing for the web without understanding the constraints and ways to leverage the web medium for interface design. A design would be done, printed and viewed for approval, and then the content would be crammed in to fit with the design aesthetic. This is not how the web works! Users scroll, websites offer interactive features, and there are ways to expand design templates elegantly.
Concern over "below the fold" syndrome
There's a valid concern that content appearing "below the fold" (below the initially viewable area in the browser without scrolling) on a website is not seen and not clicked on as often. Usability and eye-tracking studies have proven this. However, in the below full-screen example, we've done a disservice to the end-user by putting copy into such a small, scrollable area that it renders it rather useless:
This is a case where the template design fails to accommodate the content on the site. When the template doesn't work for the content, it results in usability issues. When you have supplemental content to display in an interface on a website, it's best to leverage the benefits of the interactive medium. See the below example in our product configurator:
Above: Here we have more information available to further explain these options. So as to not overwhelm the end-user, we don't want to always display all content on screen so we give them the option to "learn more."
Above: After clicking "learn more," we use an animation to give the effect that the "learn more" text is extending the length of the "inside mount" option. This is a much more elegant and user-friendly way of retaining the design aesthetic while maintaining the usability of the site. See it in action anywhere you see the "learn more" link.
Voice of the consumer should prevail
These design deficiencies really should get flushed out with "best practices" documentation and usability testing and the voice of the consumer or end-user should prevail. While its tempting for online product managers to create aesthetically-pleasing sites, this can't get in the way of the usability and the reason why the consumer is visiting your site in the first place - for information to purchase. Impede their research and they'll quickly be on another website looking at competitive products.
User Experience Success: Mint.com has made “doing the bills” a joint effort
In our household, I manage the bills. Years ago I installed Quicken on my Mac and used it as a central way for managing all of our finances: credit cards, checking accounts, savings accounts, investments, loans, etc. To this day, it is still the primary financial management software I use.
Since my wife was never one to enjoy talking about our bills, and because I had always done it, there was never really a way for her to easily become engaged in the process which she neither liked or, quite frankly, was good at! Then came along Mint.com.
I'm the DBA, she's the business user
The relationship we've had prior to the use of Mint.com was very much like the DBA (Database Administrator) and the Business User requesting reports. Businesses with poor business intelligence and reporting solutions suffer from inundating DBAs (Database Administrators) with writing queries and developing custom reports every time a business user wants to see sales performance vs. a budget.
Without an easy-to-use reporting solution businesses suffer when Business Users are not engaged in analyzing data. The same was true here -- Quicken, a desktop application, had no user-friendly way of distributing budgeting or reporting data on a regular basis to my wife. I had to be the one to generate it because, simply put, the user experience and usability was just not where it needed to be for her to be engaged.
Mint.com is the dashboard we needed for our personal finances
While my wife still doesn't dare open Quicken to manage our finances, Mint.com offers us easy, straight-forward access to balance alerts and budgeting. What's even better is the iPhone app where she can quickly pull up our budget for the month while she's out shopping and have instant understanding of where we are financially. This, combined with weekly summaries of spending vs. budget puts our finances at her fingertips without the complexity of knowing how to use Quicken.
User experience & usability win, again.
The Mint.com model is proof that simplicity in an application that is easy to use is a winning combination. As was pointed out by adaptive path, Quicken's acquisition of Mint.com this past week equated to $5 Million value per employee, making an incredible case of user experience being the winning anecdote to Mint.com's success.
Take a complicated process, make it easy, and you will win.
Mint won our family over by taking the complication of weekly bills and budgeting by making it quick, fun, and easy to understand. Online businesses that focus on similar principles will trump their competition.
Usability Challenge: When your products can be made in over 100 billion combinations
(This is the first post in a series in which I intend to review online product configurators across industries. We've built a product configurator from the ground up because no viable off-the-shelf options were available for our complex products. This has resulted in complete immersion of website usability, consumer insights, and an intimate understanding of the challenges in offering made-to-order products online.)
I work in the home decor industry, blinds and shades in particular. The shopping process for understanding, selecting, ordering, and installing custom blinds and shades can be daunting if it's unclear what is available to you as a consumer. Plus, when it comes to home decor and fashion, there is a lot of emotion involved -- how you furnish your home says a lot about you and your family so the last thing you want to do is make a very expensive design mistake.
More Options = Better. Right?
Not necessarily. However, the Blinds and Shades industry is an old industry rooted in differentiation by product options and colors. In an industry determined to never be outdone by its competitors, window treatment manufacturers both benefit and suffer from being able to cater to the millions of variations of window sizes in consumers' homes to the unique decor tastes of consumers laying down their hard-earned money. The engineering and manufacturing behind the products is complex, but when it comes to presenting an ordering screen to an untrained user, it's a whole new challenge.
DIY Product Configuration & Ordering
The problem that has manifested is an industry offering such confusing products that only a designer or decorator could assist a consumer in purchasing. So, how does one create a website to help DIY'ers who choose to go at it on their own?
When taking all of the products, colors, options, and manufacturing limitations into consideration across 100+ billion ordering combinations, this makes for a very complex product configurator. Mocha or Chocolate colored finish? Inside or out-side mounted installation? Motorized or cordless control mechanism? What type of decor do you have in your room? What type of room will this blind or shade be installed in? If you've gone through the process of outfitting your home with new blinds, you know that it's challenging.
Key components to a product configurator are all about usability
Usability in a product configurator means:
- Showing options with photos or videos
- Offering feature/benefit statements for each option
- Categorize options into digestible steps
- When a conflict is detected, provide messaging in plain English and in a relevant location.
Step 1: Showing options with photos or videos
One of the fundamentals. Consumers will buy what they can see. Case in point, here is a $1,530 "Track Pack" option on the Ford Mustang without pictures:
Step 2: Offering feature/benefit statements for each option
A couple years back I was looking at Ford Mustangs on Ford's website. In the configurator, I was presented with an option of a rearend gear ratio of 3.73. I went back recently and took a screen shot of this because Ford is still doing it. What's wrong with this picture?
I don't know what the factory default rear axle ratio is. Being a "car guy," I know the benefits of gearing up or gearing down, but without being able to compare this option to what's offered by default, it's hard to justify the $495 price tag. I have to leave the product configurator and search around on the site to see if they've listed the default rear axle ratio specifications somewhere.
Step 3: Categorize options into digestible steps
Oh, how it's daunting to enter into a product configurator without an understanding of how many steps or questions there are to answer. Blinds and Shades in particular can be upwards of 25 questions just to get to a completed configuration. The tricky part is dividing the total number of questions into logical buckets or steps. Consumers do not configure products in linear fashion, particularly when comparing pricing online, changing options, and running into option conflicts. They hop around, jumping out of predefined order. It's important to categorize questions so a consumer and quickly remember where they saw an option.
Step 4: When a conflict is detected, provide messaging in plain English and in a relevant location.
Again, Ford is on the right track by showing the conflict, but what is always difficult to decipher is the why behind conflicts like this:
What's happened here is the 3.73 rear axle package is already included in the "Track Pack" option. In order to understand this however, I have to separately click on the "Track Pack" option and the "Rear Axle Package" option to see if I can come to my own conclusion as to why these two options cannot be ordered together.
In the case of blinds and shades, I've configured a Cellular Shade that is 83" wide X 60" tall:
I've chosen the "cordless top down/bottom up" option but I see an error message that explains the why behind the conflict, not simply "this option cannot be ordered." It allows me to either alter my measurements on my shade or choose another control option. I don't have to click around on the options to understand why this particular option cannot be ordered.
Blog by Eric Long
I'm an experienced online marketer, information architect, digital strategist, and social media enthusiast. I'm passionate about providing outstanding cross-channel experiences for considered purchases (with a focus on mass customization).
About Eric Long
Recent Tweets
- New blog post: Mass Customization, Considered Purchases, & Mental Models - Why Usability & Content Strategy Matter http://t.co/ABOwvq1Z 1 month ago
- Looking for a Manager of Web & App development to come work for us and manage a team of Sr. PHP & Ajax Developers: http://t.co/16BhmKjx 1 month ago
- UX Practitioners Will Excel in an Increasingly Digital World: http://t.co/QH6cgr5 5 months ago
- UX practitioners have bright futures with more & more marketers needing help understanding relevancy for when/why to use new technologies. 6 months ago
- We're looking for a Manager of Interactive Design & UX to come work for us: http://t.co/0U1AbN8 7 months ago