Types of website nav menus: Farm-to-table web design

This post originally appeared in the October 24, 2019 issue with the email subject line "Farm-to-table website menu design" and a review of UX design workshop tool Mural.

Diner menus vs. farm-to-table

Last week I admitted to a change in approach for my work: I’m far more skeptical of Megamenus than I used to be, mostly because text! Text. So much text. Megamenus are like going to your local diner and having to choose among a burger and fries, pancakes, spaghetti and a lobster… but as an information architecture.

Not that I want entirely skeuomorphic menus either. Light iconography can be successful, but there are still big steps to take — it’s really funny that this icon equals “call now” in 2019. When was the last time you used a handset outside of your office?

Constructing new iconography is also a long shot. It reminds me of the progressive school from Arrested Development that doesn’t believe in letter grades.

But what does it look like when we take a farm-to-table approach to menu and information architecture design?

Watch out for over-description and over-engineering. If we start talking about the things that we’re passionate about (like our products and services and content), it turns out we can go on for days.

Exhibit A: Farm-to-table menu based on how stakeholders (chefs, owners) talk

Hot roast beef sandwich

• The beef from our very local supplier near and dear to our hearts. Our nephew’s best friend owns a farm so we know the meat is good. He’s a good guy, doesn’t use hormones in his cows, gives us a discount. Nice red meat.
• Sauce is necessary. Fatty au jus. So much fat that you bliss out. Don’t pretend that you don’t love fat. And it’s high-quality fat. Still saturated, yeah, but good fat.
• The bread we get. Bread from the bakery down the street. We get a discount here too.
• Benefits. It’ll give you GI issues for days but no worries because our lighting scheme makes even beef look good so your Insta feed will be into the beef.

Egg scramble

• Eggs, scrambled. It’s descriptive as it is, right there. Depending on the day, they may be soft scrambled, but generally we don’t have the patience for that.
• Diced veggies from our nephew’s other best friend’s farm. Whatever’s in season right now, which for most of the year in Minnesota is beets and radishes.

But no one wants us to go on for days. Especially not executives. So in the past decade, we’ve seen the following example much more often.

Exhibit B: The farm-to-table menu you see.

• Hot roast beef sandwich. Bobby’s farm beef. Au jus. Brioche.
• Egg scramble. Bobby’s farm eggs. In-season vegetables.Pretend that the sourcing and menu items are just a bunch of features and benefits mixed together in a bulleted list.

Break it down. What’s the least amount of description you need to provide for the menu to succeed at its job?

Exhibit C: Fancy schmancy minimalist.

• Beef
• Egg That’s a little too minimal, unless I really really trust the chef. But! I see menus like this fairly frequently, especially from agencies that really really want you to fill out a web form and contact them, sight unseen. Might as well just have icons at that point.

Source data. Have I written before about the value of search and user data in informing a content strategy? OH YES I HAVE. Spending time with all the data you have available is a best practice! If you don’t have data available, I recommend finding some — it is readily available from the Google, from Moz, from pretty much any freemium intelligence software.

Look at data about what your users want before you dive into any personal suppositions about what users need, is a best practice. It’s better than, say, just talking about why your product is better and why your brand is the best.

Exhibit D: Purely search data-driven.

• Beef sandwich near me.
• Cheap breakfast near me.

Of course, this approach only takes into account how your customers are getting to your website/restaurant and not what they want to do when they get there… aka, eat.

1. Solving your users’ problem at the menu level. After you’ve spread out all the data and talked about all of your differentiators and spoken with the sales team and the president and looked at the data, take a moment to step back and ask: How will my menu help to solve my user’s problems? Sure, they’ve gotten here, but why are they here and not at the lower-priced diner across the street?

Exhibit E: Problem solving.

• Filling beef sandwich that will ensure you don’t need to eat again for 8 hours. Covered in au jus. Buttery brioche for effect. You’re out to eat. Let go. Let go.
• An egg scramble that will tide you over until your dinner date. Tastes better than you think it should if you’re just thinking about an ingredient list of eggs, cheese and veggies. Semi-healthyish. Greens on the side if you wanna go really healthy, but they are still covered in salt and oil because you know you want flavor. Don’t order if you’re sick of beets. A side of toast recommended.

So what approach should you take for your website or app menu? You can go traditional and look at all of the other menus in your industry and just do the same thing. But if you’re looking for some next-level content navigation, I’d recommend the following:

• Follow all steps above, but lean heavily on items 3 and 4.
• Stop looking at your competitors and start looking at your own search data and website behavior.
• Assume that your content pages/actual food should do a lot of the work for you and lead your users to the next step. (More on this in the near future.)
• Experiment! Iterate! Find your happy medium.

Creating a menu requires some magical thinking and trust that your users will make the right decisions. But as a user, I want to know if the seasonal veggies are beets again, thanks.

Hand-picked related content

• Does your website actually need a blog?
• Flowmapp review
• Best practices for business websites in the 2020s