CT No.14: Farm-to-table website menu design
Simply radishing, scrambletacular, beefy and fatty IA design theory
If you’ve been craving some content technology news on days other than Thursdays, I have a treat for you. The Content Technologist is on Twitter!
The Twitter account is a mostly a functional development — I need a link burying ground that I’m motivated to keep up to date during the week. Although I gave up on it from 2016-2018, Twitter isn’t the all-time worst as long as you block anyone who bothers you!
Anywho, if you are a twooter, check out the link dump with light occasional commentary. Personal interactions will still be kept to my personal Twitter account, aka my griping grounds.
Did you get to this newsletter from a source that’s not your inbox? Well hell, you can subscribe here.
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.
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.
Next week: less theory and more specifics about actual website and app menus.
Better than a UX stock photo and five times as good as the off-brand
Every stock photo depicting “UX” is a whiteboard crammed with Post-Its. Personally, I avoid Post-It working sessions unless absolutely necessary.
First off, bigger offices always order the off-brand that doesn’t stick nearly as well (I mean, come on Minnesotans: shop local).
Then you can’t read what’s actually on the post-it unless you squint.
Very few people show up truly prepared. The ideas in an in-person brainstorming session… aren’t always the best. (“It’s brainstorming! There are no wrong answers!” hahahahaha no there are no wrong answers but there are certainly poor uses of time)
Someone important always sits out.
Someone else has to transcribe the Post-Its into a document and restickable squares of paper are never as exciting when they’re in a spreadsheet… even a color-coded one.
The function of a Post-It for iterative design is great: it’s an idea you don’t have to commit to! And you can move it around into whatever formation you want… unless it’s the off-brand and you can only move it once.
Today’s tool, Mural, is Post-Its for digital design, which, like sticky notes and all other great inventions, seems completely unnecessary until you use it.
Mural at a glance
I never thought that I would just straight-up pay $12/month for digital sticky notes, but Mural has changed all that. Take my (business’s) money: it is really really great to just move different colored squares and rectangles with ideas on them on a “whiteboard.”
This idea is not groundbreaking. But it works. And it’s fun.
What’s even better: users can host fully online collaboration and whiteboard sessions with Mural. Like, y’all can be in your remote workspaces and be in the same virtual UX stock photo, moving post-its around every time someone has a new idea.
Some rad features:
vote on designs at the end of your virtual collaboration session
set a timer so people can work on their own over time
add external images (like a mood board) and links to other designs
incorporate with Slack, Google Calendar and other common collaboration tools
lock content you don’t want anyone else to move
You have to love a tool that lists all of its updates very cleanly and clearly on its website. It’s like they know how to UX or something!
I have not yet hosted a Mural collaboration session. I did share a few Mural IA iterations with a client team, which enables them to play around with the fundamental ideas. And I will facilitate with Mural very soon.
I would recommend Mural for UX facilitators and ideators, especially if you’re accommodating any remote workers. In this focus group of one, I recommend Mural for me.
The week in content tech news
Highlights below. For the full scoop, check out the Twitter feed.
Silicon Valley is rethinking social media, via The Information. Clearly anyone who had the same gag reflex reaction to Zuck’s First Amendment thoughts…? theory…? half-baked bubble vision? is also in the camp of “let’s rethink this.” Anyway, I’m into TTYL, which reminds me of Theodore Twombly in Her.
How to connect the dots between designers and front-end developers, from the geniuses at Smashing Magazine. Step one: ensure designers and FEDs regularly read Smashing Magazine.
Understanding the difference between pageviews, subscribers and every media metric in between. NiemanLab presents arguments for journos to understand the unit economics of their trade.
If I’m not already paying attention to you, here are a couple of tricks to make my head turn. 1.) Laugh at my jokes. 2.) Write about file formats. On the death of the file format at the very good One Zero.
3.) Introduce conversions. I don’t usually post product updates, but Parse.ly finally fucking introduced conversions, so I can fully get behind them now. Expect a review in coming weeks but oh boy! Parse.ly with conversions! ALL MEDIA/CONTENT ANALYTICS PEOPLE SHOULD BE REJOICING.
This week in free strategy
Believe in the power of iteration and drafting. If time for iterative thinking wasn’t built into your 2019, make some time in 2020. Iterative thinking leaves more time for collaboration, less time for solo geniuses.
Upcoming speaking and events
Making my 2020 speaking calendar! I’m available to present at your event. I promise it’ll be fun. Here’s everything on the docket so far.
“Customizing Your Content Tool Stack for Your Team” at ContentTECH, April 20-22, 2020 in San Diego.
Yeh, it’s just the one, but I anticipate more soon.
Housekeeping | If you like this post, please click the heart, which is Substack’s ranking factor.
Not yet a subscriber?