Feature background

‘Hotspots’ are a user interface (UI) design feature used to draw attention to a product’s key features. They also display contextual information when the user interacts with it.
The screenshots below show an example of hotspots used in an email viewed in a desktop and mobile environment.

Click here to view example in web browser.

The hotspots example comprises:

  • A photograph showing five points of interest – five types of fruit arranged together
  •  Icons are placed in the foreground, adjacent to each point of interest. In this example, the icons feature a plus symbol (+) to hint that they are able to expand or open to reveal more information. The icons are also animated, changing in size to attract the user’s attention
  •  For a user equipped with a pointer device, such as a mouse, the appearance and animation speed of these icons changes when they are hovered over. This provides another visual clue that it’s an interactive feature. This stylistic change on hover interaction is not available for touchscreen users not using a pointer device
  • When clicking or tapping on the icon, information relevant to that point of interest is displayed or opened in the foreground of the photograph container in the form of a ‘popover’
  • The popover is positioned within the confines of the photograph container and occupies much of the container area. This allows the reader to focus on one selected point of interest at any one time
  •  All animated icons that may otherwise be visible in the background are hidden from view to avoid user distraction while a popover is opened

The user can return the popover to its closed state by clicking or tapping on the ‘close’ button from within the panel. For UI familiarity this button is positioned in the top right corner of the popover panel
After closing the panel, the user is returned to the five points of interest with the animated icons.

Why use it?

Hotspots can be useful for providing a visually pleasing and interactive experience for a reader to learn about key pieces of information on a subject. This often allows the subject, such as a consumer product, to be viewed in situ and/or in its entirety, while inviting the user to explore and focus on the highlighted key parts.

When to use it?

A hotspots UI can be used when:
1.    You wish to show the subject in situ or as a whole, and invite the user to explore parts of it in a visual and interactive way
2.    The subject can be communicated using a photograph or diagram showing the key points of focus. For example, a consumer product such as a laptop is photographed from a view angle to show the screen, keyboard, physical size and any other features to be highlighted further to the reader
3.    The subject image occupies an area of suitable size to accommodate the required number of hotspot icons without being obscured.

Which email reading environments support this?

Last updated: 09/18

At the time of writing, the functionality demonstrated in the proof of concept is supported in the following popular email reading environments supported and recognised by Profusion:

  • Apple Mail on Mac (desktop application)
  • Outlook for Mac (desktop application)
  • iPhone Mail (mobile)
  • iPad Mail (tablet)
  • Samsung Mail (mobile)

Please reach out to your Profusion contact for an email environment opens report to determine the estimated percentage of recipients opening in these environments.
For other popular email reading environments not listed above, but listed in Profusion’s Email QA handbook, hotspot functionality email is not supported. Please see the Alternative fall-back presentation of interactive content section within this document for information on measures taken for non-supporting email environments.

Notes for designers and marketers

Unconventional coding practices are used to bring interactive features into an email. In the absence of JavaScript which is unavailable for use in email reading environments, HTML and CSS is instead used to provide the interactive functionality. As a result, there are some constraints that should be incorporated into the design.

Presentation and interactivity

Limitations include:

  • Element(s) to indicate the position of the clickable/tap-able hotspot areas on the image.
  • In the supplied proof of concept, semi-transparent circular bordered icons featuring a plus symbol (+) are used. This aids intuitiveness by showing the user that the icons can open to reveal more. To attract user attention, CSS3 animation is used to repeatedly shrink and expand the icons
  • As another visual clue about the feature’s interactivity, the presentation and animation of these icons changes when the user hovers over it with a cursor. This is intended for recipients using a pointer device capable of hovering. The background and foreground colours, border radius (from a circular to a square shape) and font weight of the icon transition using CSS
  • While it is not essential to use icons in your design, an advantage for this purpose is that they take up less space. They obscure the image canvas less than other design approaches, which is important for when the email is viewed in small viewports such as smartphone screens.
  • While alternative designs  can be used to indicate the hotspot areas, they must be intuitive to the user. The design should communicate that the image hotspot area is interactive before they interact with it
  • Users open the popover by left-clicking or tapping on the icon/element. This provides a more consistent user experience across touchscreen and pointer-equipped devices. It is preferable to using the cursor hover action, which can behave less reliably and introduce design constraints with element positioning and element state transitions. In most cases hover should not be used as the user mechanism to display/hide the popover container
  • As a general guide, the clickable hotspot areas such as icon/popover controls should be no smaller than 35 by 35 pixels.

‘Popover’ container(s)

  • In the proof of concept the hotspot configuration allows one popover to be viewed at any one time. While this configuration is not mandatory, since it could be redesigned to allow multiple popovers to be opened concurrently, the advantages include:

From a user perspective:

  • It allows the reader to focus on the one key point of interest
  • Opening and closing popovers one at a time offers a simpler navigational experience

From a design perspective:

  • More space is available for popover content. A layout with a configuration that allows multiple popovers to be viewed concurrently will afford less available space for each without overlapping. For usability purposes it is not recommended that popovers overlap
  • Popovers should be positioned within the confines of the hotspot image container and, if not sized to cover the container when opened, positioned adjacent to its respective hotspot icon. When the opened popover occupies or covers the hotspot container, the user can focus on the opened key point of interest without potential distractions from the surrounding hotspot interface
  • For most scenarios the design should enable users to return the popover to its hidden/closed state after opening
  •  The proof of concept uses CSS to create a visible transition effect of a popover container between its hidden and visible state. Transition effects are optional UI design enhancements and in this example give the appearance of a popover opening out of the interface. Transition effects may be unavailable in some circumstances, such as for example when the author is faced with hiding or positioning an element in a particular way. In this proof of concept, transition effects are not present between the visible to hidden direction of a popover container for this reason.
  • A popover container can vertically scroll if required. This means that if content held within the container extends beyond that of the popover container height, the user can view it by scrolling within the popover ‘window’. However, we recommend avoiding vertically scrolling containers for the following reasons:
  • The aforementioned supporting email applications (and web browsers if used to view the email) on touchscreen devices do not typically display visible scrollbars. This means the user is unaware that the container is scrollable within the design. While there are methods to encourage scrollbars to display, cross email reading environment combability cannot be guaranteed or will vary
  • Areas of the email that are independently scrollable can frustrate touchscreen users viewing the email (especially viewed using smaller screen devices), when scrolling the email/wider page.

Layouts

  •      Devices with larger viewports, such as desktop computers and tablets, will generally afford a greater visible area that helps accommodate hotspot feature design. For devices with smaller viewports, such as smartphones, implementing a usable hotspot design can be challenging. The proof of concept shows the hotspot feature reworked for the mobile layout of the email with features positioned closer together and font and element sizes reduced. It is useful to consider whether the hotspot design feature for the subject matter is appropriate and usable within the ‘mobile’ layout of the email where less space is available.

Interactive content fall-back

What is a fall-back and why should my interactive email contain it?

As previously mentioned, this interactive feature is not supported in every email reading environment.

An unpredictable user experience, such as loss of functionality and/or presentation and layout issues in the email, may occur when an email featuring interactive content is viewed in an email reading environment that does not support this feature. However, this can be avoided by presenting alternative, non-interactive content within the email when viewed in these environments. This is referred to as a ‘fall-back’; a design and development consideration for interactive emails. Its aim is to progressively enhance the appearance and functionality to provide the best possible user experience across the most popular email reading environments.

These fall-back measures are best-effort attempts that operate on characteristics of email environments that are subject to change. As a result, they are not guaranteed as bulletproof methods.

Fall-back design

In the supplied PSD design for the interactive email, please supply a variant showing how the non-interactive alternative fall-back content should be presented within the email for both desktop and mobile layouts.

Below is a screenshot of the example fall-back content used in the proof of concept hotspots email.

Success!

 

Enjoy the read.





Loading...