Interactive Elements + Apple Devices = Next level of user interactivity
Apple devices are a craze. And it is evident from its benchmark sales record being broken every year with a new addition to the Apple device family. Apple’s philosophy of “Design should serve a purpose” that translates into UI of their devices along with the exterior aesthetics is what drives innovation and business alike for the tech giant.
Walking in their footsteps, Uplers always try to make an already enjoyed experience of opening an email in Apple device, even more enjoyable. Sit tight as the Uplers list out the different email advancements to delight Apple subscribers.
From the first prototype of email sent in 1971, emails have come a long way. Addition of HTML and CSS properties have enabled emails to
become a feature-rich medium of communication. Sadly, very few email clients support them out of box.
Thankfully, Apple’s native email clients have stood apart from the crowd.
As per a Litmus survey, Apple devices clasp 52% market share when it comes to preference for viewing emails.
This makes Apple devices a playground for email marketers. To provide a better UX each time, they are in the quest for the next best thing, which may or may not be compatible with other email clients. So email marketers experiment with different interactive elements (usually experienced in webpages) right inside their inboxes, tagging such emails with the nickname ‘Mailable Microsites’.
Keyframes help in animating different elements within an image on the basis of user actions. Elements flutter away, flip, dissolve or zoom out when clicked or tapped. This increases user’s curiosity and leverages into improved UX.
Most websites use keyframe animation but Apple mail is one of the few email clients that supports keyframe animation.
For emails stuffed with images, the clutter can be drastically reduced by implementing a rotating banner which auto-rotates in preset durations. Being completely automated, it doesn’t require any user interaction.
Try Sample EmailTo highlight the features of its newly launched bikes, Rei sent an email with an auto-rotating banner.
As the content is categorized into neat sections, subscribers only need to tap on a category to read further. Accordions bestow an email with a clean, clutter-free look.
Try Sample EmailTo highlight the features of its newly launched bikes, Rei sent an email with an auto-rotating banner.
Travel Planner company Butlin’s email hides the above navigation into a neat hamburger menu when viewed in a mobile device.
Domestic appliance manufacturer, Nest showcased its products using slider effect for increasing user interaction, which in turn boosted customer engagement.
Sliders, too, showcase a series of images but the change requires user interaction. Here, the user has the freedom to read or skip showcased information.
Try Sample EmailDomestic appliance manufacturer, Nest showcased its products using slider effect for increasing user interaction, which in turn boosted customer engagement.
With the help of 3 different types of navigation menus, emails can hide their navigation to provide easy accessibility.
Try Sample EmailTravel Planner company Butlin’s email hides the above navigation into a neat hamburger menu when viewed in a mobile device.
If the load time of a landing page exceeds 4 seconds, the visitor is bound to abandon mid-way. With integrated forms in the email, the subscriber doesn’t need to be redirected to a landing page for lead generation.
User fills the form after catering the information right in the email, thus improving the chances of conversion. Apple mail supports radio buttons, checkboxes and text box. With permutations and combinations these elements can help in asking better questions to help create better customer persona.
Try Sample EmailBuilding upon the functionality of the aforementioned integrated forms, embedded search can help provide value addition to transactional emails.
Siri is a helpful search assistant, but embedded search in emails can add to the experience, allowing Apple subscribers to search for a specific item in the database right from the email.
Try Sample EmailYou can convey more in less with an embedded video in email. Since it is hosted on an external hosting site, there are no deliverability issues. With current internet technologies & high speed bandwidth, video playback shall be seamless.
An overnight success when first rolled out in 2009, video tag was dropped support with iOS9 update. But with the latest iOS10 update, Apple subscribers can once again enjoy embedded video in the native email client.
Try Sample EmailIn the above email by Charity:Water, they featured a campaign specific video that played on interaction
Paperless Post celebrated their seven year with sale announcement combined with an animation.
For those skeptical to include a video yet wishing for some animation can make use of animated GIF in emails to maintain the user experience without worrying about playback issues.
GIFs are a series of images that cycle based on pre-set time duration. This conveys the information expected from video in a file size only slightly larger than a static image. Since Apple mail doesn’t disable images by default, GIFs shall certainly grab attention.
Try Sample EmailA countdown timer in the first fold triggers dormant behavior and hints subscribers to take action. The fear of missing out urges them to take action and eventually they become a part of your sales funnel. The Ecommerce industry has garnered the most by integrating countdown in emails.
Countdown timers are achieved with CSS coding with a fallback in GIF. So depending on the time of open, the countdown gets adjusted to the correct moment, giving subscribers an accurate idea regarding how much time is left.
Try Sample EmailClothing retailer Charming Charlie ensured that their subscriber shall take action by combining a countdown clock along with a ‘Buy One, Get One’ offer.
Tooltip is a small “hover box” with information that appears above the item being clicked/ hovered over by the user. The popup content is visible only once the information icon/ CTA has been clicked; thus catering to only those who are interested.
Try Sample EmailWith diminishing attention span, the chances of textual statistics getting skimmed over are high. A graph with rising columns can catch the eye.
Try Sample EmailThis email by Gwynnie Bee, makes good use of the scratch effect by asking subscribers to choose one from the 3 offers.
A hint of suspense always spices up the wait. Imitating the real-life coupon, scratch in email offers a discount coupon which is revealed to subscribers via the scratch effect.
Whenever a subscriber taps or hovers above the scratch section, the coupon code is displayed. This ups the subscriber’s anxiety, enhancing the chances of interaction with the email.
Try Sample Email'Flip on hover' or 'Flip on tap' effect in email catches the eye. In the example below, flip effect puts together the information with associated imagery, without increasing the length of the email.
Flip effect combined with Apple’s Retina display can work wonders. Even though this is supported in desktop and mobile versions of Apple mail, a flip effect can be useful for mobile devices wherein space is a constraint.
Try Sample EmailAt Uplers, we practice what we preach, and hence, we used the flip effect in our Easter email to offer free Godiva chocolates.
This infographic consists loads of interactivity. For ease of reference, we share with you an ebook here that we already created. Benefit from it; download the ebook here.