The Anatomy of Well Designed Business Hours

The way you present your opening hours online can influence the way your users read them and engage with your brand.

Hannah Mussi
Yext Design
4 min readMar 8, 2021

--

This posting expresses the views and opinions of the authors and does not necessarily reflect the views of Yext and its affiliates, employees, officers, directors or representatives.

🎨 by yours truly

The average user spends less than 15 seconds looking at any given webpage. If they aren’t able to find what they’re looking for in that time (or worse: if they can’t easily digest the information), they’re bouncing back to Google to find the answer.

Your customers are asking questions: questions like “is [[brand]] near me open now?” and “is [[brand]] open on New Years?”. Questions that Google can probably answer better than you. And it’s all fine and dandy if the user finds their way back to your business, but what if they click on a Google ad instead? What if they see something shinier or get distracted? You may have just lost a customer because your business hours were confusing or unclear.

Have no fear. Our Consulting Design Team is here and has a few best practices that we want to share. The way you display your business hours online may seem inconsequential in the grand scheme of things, but never underestimate the power of these subtle design tricks that enhance the user experience.

Display an “Open Hours” status.

This little feature often gets overlooked in design, despite having a presence on major third party platforms like Google and Yelp. Whether it says “Open until…” or “Open / Closes at….”, you might not even realize how often you’re looking for it. We recommend displaying this somewhere prominent like the hero at the top of the page (see Anatomy of a Great Website Hero) so that the user can find that information quickly.

Display every single day in an hours list format.

Now let’s get into hours lists. Users like to scan for what they’re looking for, not digest and decipher every word; that takes too long! Listing out every day into a table is familiar and allows users to find open hours for the day they’re looking for quickly. Truncating hours into “Mon-Friday, Sat-Sun” forces us to use our brains a little bit more to remember where those middle days fall. It might seem simple enough, but the goal of user experience is to reduce cognitive load as much as possible so that our customers have a pleasant experience and don’t feel stupid.

Dynamically sort the current day to the top of the hours list and emphasize it.

We recommend dynamically sorting the current day to the top of the list for easy identification. And while our team definitely recommends calling out the current day of the week, how you do that is completely up to you!

Consider variable data like holiday and lunch hours.

If you’re anticipating that you’ll need unique data every now and then, it’s always a good idea to make a note of it so that your users know your hours are up to date and can read it clearly.

Use dropdowns strategically.

Hours lists aren’t the most chic or minimalist. We get it. Especially if you’re toting multiple sets of hours like drive-thru or ATM, your page can start looking a little text heavy. Although these recommendations still stand, we have nothing against tucking the hours list into a dropdown to slim the content a bit. Just be sure that when you do, the current day’s business hours are still visible, and there’s a clear action element to open and close the dropdown.

And there you have it:

Some well-designed business hours! By remembering to display your hours clearly, emphasize the important pieces and consider data variability, you can ensure that your users can find the information they are looking for quickly and effortlessly. Let us know if your team follows these best practices or if there is anything we left out!

--

--

Hannah Mussi
Yext Design

UI Designer @ Yext. Aspiring artiste and devastatingly underprepared