Categories: User Experience Design

Interactive Menus in Email to improve UX

Email marketing is becoming challenging with every passing day. More and more marketers adapt to innovative emailing techniques to stand out from the crowded inbox. Take symbols in the subject lines, responsive coding or white-space, marketers catch up with the latest email trends and try providing unique user experience to email recipients.

So, what is the next big thing in the email? Big data? Wearable devices? Or maybe, interactive emails? Well, the next big transition email marketing will witness is about interactive email experience.

Instead of sending out same old fashioned emails using templates, sending an interactive email will improve the overall UX and engagement. Initially, landing pages used to get an extensive support from various browsers in terms of compatibility, but now even most email clients support interactive email elements quite well so why not capitalize on the new wave of interactive emails?

Let’s understand the kind of interactive email possibilities:

Navigation and menus
Accordion and Tabs
Flip effects
Image gallery

And, there is so much more you could incorporate in your emails to make them look interactive and enhance the engagement from these campaigns.

Interactive menus in email

With more and more companies wanting to send more information to the recipients, it is now imperative to send navigation in email. Sending out emails with navigation will benefit the marketers as well as users. While marketers will be able to supply more information, users can just skim through the content without actually reading the verbose copy.

So, what are the advantages of sending out emails with menus?

Application in multiple industries.
Menus in email are easily achievable and useful to a variety of industries. Consider a scenario of Media Company that has a lot of information to share in terms of various news sections in their emails, how would they do it nicely without having menus in email? Consider E-commerce companies with many products to cross sell, how about having sleek menus in email? With growing companies in the shared economy space Air bnb for an example, menus in email would be quite useful.
Improved UI and UX
Often, companies enable users to take an action on the landing page associated with an email campaign. With the use of menus in email, there will be an overall improvement in the UI and UX of emails. Emails would turn mailable microsites going further.
Quick action and boost in conversion.
Navigation in email will be helpful for quicker actions and conversion. How? Well there are many email tools available that will help marketers to not only integrate forms within email, but also allow recipients to checkout in the email. So, users can now browse through various products, select the ones they like and convert within the inbox without flipping a lot of landing pages.
Optimized for on the go viewers.
With an option to add drop down menus in email, instead of hiding the content or putting the header into the footer, marketers can stack up the content and utilize header menus judiciously to provide better user experience. This will also let users decide on the kind of information they want to consume.

Practical Uses

E-commerce websites for new product launches, recommendations and cross selling
Technology websites for more tabbed information sharing within their newsletters or promotional services emails
News and media websites that wants to share a huge piece of information stacked up into various menus
Travel and hospitality services that wants to share various tour options with their prospects or customers using emails
Manufacturing companies who wants to send out processes to their stakeholders can also use menus in email

And, there are so many more industries that can use menus in email for effective content spanning. There are different samples of menus email marketers can use. To view a few samples on your mobile phones, go to the website of Email Monks.

Left to Right Drop Down Menu - Simple Drop Down Menu - Popping Drop Down Menu

Compatibility

Well, using interactive menus in mobile is mostly compatible with all the major email clients. As a limitation Windows based clients might not support such menus well. In our third sample, you can find animation which will only work as simple menu in the desktop view however work well in the mobile. The navigation might work as different links when viewed on desktop.

Other Limitations

These menus will only work with email systems that support external CSS. Those of you who would like to implement something like our 3rd sample will need to ensure their ESP provides VML coding support for navigation to render well, especially outlook client in desktop view.

Simple Drop Down Menu

Few Best Practices on Interactive Menus in Email

Make the right decision for responsive navigation bars in regards to stacking content, placement (center, left or right) etc.
Don’t overload creative with too many categories. It will create a clutter and make it hard to act upon.
Make sure there is lot of padding around the text with minimum 14 px. Font size making it easily tappable.
Make them dynamic so that when you change a menu on your website it could automatically change within emails.
Check and test your code’s compatibility.

Kevin George

Kevin heads the marketing, branding and alliances for EmailMonks. Kevin comes with more than a decade of marketing experience with various online and digital companies. Feel free to share your thoughts with him on Twitter.

Next 10 UX Design Trends for App Designers »

Previous « 6 UI Rules You Should Never Break

View Comments

romain D says:

July 31, 2015 at 12:03 pm

Great if you have a super list of users having recent smartphone and using mailbox that do understand CSS3 transition property, jquery... or do not simply strip out CSS file... But how would you know that when it come to huge email campaign ? This in real world this unlikely to happen before a few years fellows.