Interactive Design best practices
Last Updated: October 2022
global Enterprise Innovation
For INTERNAL ONLY
Create an engaging interactive design
Interactive modules best practices
Hover and Click on for more information
| Interactive design best practices
Good design uses visual hierarchy strategically to attract the viewer to the “whole” composition and leads them through its “parts” by creating different levels of priority and intuitive flow.
The motive should be to keep the basic elements of the user interface, as simple as possible, so the user interacts with it spontaneously and effectively.
CASE STUDIES
A fast page load time is essential. It affects search engine rankings, has a great influence on customer’s satisfaction for the online experience and more likely converting to sales.
Prompts above the elements, such as "images on this page are shoppable" increased module interactions by 960%
Combine the animation effects that balance each other out, such as Assets fading in at the same direction one after another. Make it slower and easier for the eyes to digest.
Understanding your customers is a crucial factor for being able to choose the right design elements, layout, templates, animation, interactivity and navigation.
When designing an overlay, make sure that it is shown fully on screen without the CTA being cut off. Click to find out more.
Full bleed modules performed substantially better than modules occupying partial width of the page: +256% module interactions occurred and +454% clicks
Hotspots that had circles and “bounced” had 339% more module clicks than static hotspots with no background
7
8
9
Visual HIERARCHY
Less is MORE
OPTIMISE Your Assets
Be STRATEGIC
ANIMATE Wisely
Always PROMPT Users
Dynamic Hotspots INCREASE CLICKS
Design in FULL BLEED
Be mindful of the ASPECT RATIO
3
2
1
6
5
4
Making things pretty is no longer enough for designers. Nowadays, if your design isn't engaging, it translates to unsuccessful design. Interaction design focuses on creating engaging interfaces with well thought out behaviors. Understanding how users and technology communicate with each other is fundamental. With this understanding, you can anticipate how someone might interact with the system, fix problems early, as well as invent new ways of doing things. Below we will cover 9 ways to create an engaging interactive design.
Optimise images to about 600kb (or 1mb at the most), videos to max 1.5gb (or a LOT less - think MP4) and crop Image to the canvas size
This illustrates how important it is to phase user journeys when rolling out new products or features to allow the user time to build an interaction pattern with a specific feature—a perfect example of this is how lost we felt at first when Apple removed the home buttons from our phone, apps had to build in prompts for users to guide them through the new interactivity features and gestures, while this feels like second nature to us now
Full bleed modules performed substantially better than modules occupying partial width of the page 1. +256% module interactions occurred and +454% clicks 2. As shown by the blue boxes on the right, Allure module was 60% wider in pixels than the SELF module 3. The only differentiated elements of the modules were size and position Additionally, in one example, a module that occupied the full width of a webpage performed better than an identical module that was parallel to other content within the width of the page, such as a display ad in the right rail.
Not unlike the prompts in subheadings, module hotspots that “bounced” and had contrasting backgrounds had 339% more clicks than hotspots that were static and had no overlay between the + and the background
When designing an overlay, we want to make sure that the CTA is visible and not cut off user's active screen (Example 1). It helps to place the hotspot close to where the CTA will show in the overlay (Example 2), eg: when you have 2 row of images, place the hotspots at the bottom of the front card on bottom row. Place the overlay/pop-ups where the relevant image is located (example 4), eg: if the images are on the top row, it only make sense for the overlay to show on the top row vs to have all overlays shown in the middle. Or have the overlay the same size as the front card and appear on top of them (example 2). Play around with the co-pilot module size settings (Example 3). Decrease the size to medium if need be.
How to improve the load time:
Delete all unused fonts, swatches, assets and layers
Turn on all Experience optimisation settings
Click the mocks for more information
Challenge
Create a Victoria’s Secret Holiday shopping destination for Vogue audiences.
Victoria's Secret on Vogue
APPROACH
• Condé Nast built a custom interactive sponsored page on Vogue and a series of custom content posted on the Vogue Instagram • A study quantified brand lift, shopping behavior, and emotional resonance with the content.
• GQ created a 3-Question interactive quiz to help consumers find the perfect tequila to complement their holiday persona. • A brand study quantified the brand impact for the five brands featured in the content.
Create engaging content for Proximo Tequila brands for entertaining in Holiday 2020.
Proximo Spirits on GQ
• Condé Nast created a custom article on Allure - leveraging a shoppable unit inclusive of key product information • A brand study quantified the brand impact for the brand featured in the content.
Create an interactive article displaying the Adidas Ultraboost 21 for an Allure audience
ADIDAS on ALLURE
Brand Familiarity 1.4x above Nielsen benchmark
RESULTS
+7%
Brand Affinity 1.4x above Nielsen benchmark
+13%
Purchase Intent 1.8x above Nielsen benchmark
Jose Cuervo Reserva is for entertaining
+15%
Recommendation Intent for Jose Cuervo Reserva 1.4x above CN benchmark
+11%
Purchase Intent 1800 Cristalino 1.8x above CN benchmark
Emotional Reach vs. Instagram Higher than EyeSee benchmark
5X
Brand Recall
+6%
Product Penetration Higher than EyeSee benchmark
+152%
While you can embed the modules anywhere within the body of a branded article, be thoughtful about where the experience will make the most sense for the user! We do not recommend placing it at the very top (for page loading reasons), or at the very bottom (for low engagement) It needs to be a cohesive part of the narrative
Example 1
Example 2
Example 3
Example 4
MOBILE-FIRST approach
A “mobile-first” approach involves designing a desktop site starting with the mobile version, which is then adapted to larger screens (contrary to the traditional approach of starting with a desktop site and then adapting it to smaller screens). Generally speaking, a mobile-first approach means building your website with your mobile users in mind, with the main goal of improving these mobile users’ experience on your site. Below we cover 6 reasons why Mobile-First approach is so important:
BOOSTING Conversion Rate
GOOGLE DEFAULT Indexity
MOBILE-READER Audience
Offer an IMPRESSIVE UX
Content is KING
Easier to SCALE
74% of the users use their thumbs to browse and you need to make sure that your CTAs are placed in a thumb-friendly locations to increase the conversion probability.
In 2019, a staggering 63% of US search traffic originated from a mobile device. This means that a website's mobile version is the one that should take preference, and Google acknowledges this with mobile-first indexing.
In 2012, smartphone sales have overtaken PC sales. Mobile internet usage has surpassed desktop usage in 2016 and people have spent more time on the internet from mobile ends. 74% of our audience are mobile-readers.
Give the audience a seamless mobile experience. The design should be simple: the navigation should be easy, UI should be intuitive, photos must be high-quality yet aligning to the content, and much more.
Mobile has the most limitations, screen size, and bandwidth to name a few, and so designing within these parameters forces you to prioritize content ruthlessly. It organically leads to a design that’s more content-focused, and therefore user-focused.
Practicing the mobile first principle allows designers to create a product for multiple ends in a smooth and efficient way instead of ruthlessly removing those good features to get an afterthought.
TechNical Best Practice
Hover for more information
How to USE CEROS Templates
All category Ceros templates can be found in your account. All templates include Mobile and Desktop version, arranged in a Universal Folder naming convention for ease of use. The templates are in mixed Vogue and GQ branding. Below we cover step-by-step on how to use the Ceros templates:
Once logged into admin.ceros.com with your login and password, choose a folder and click the plus button to open a new experience. Add a suitable title for the project and select 'Template' from the two options.
Select: Start from template
Once filtered, choose the template you would like to use by double-clicking it.
Choose a template
On the type dropdown, select 'Master Commercial Templates'. This will show whole range of available templates in desktop and mobile version.
Choose Master commercial templates
Step 01
Step 03
Step 02
Swap the styling of the template with the branding in Figma Brand Guidelines. Ensuring all elements (Font, Swatches, Button, Design Elements and Layout) are 100% correct.
Edit the styles according to brand guidelines
Step 06
Preview screen will pop-up allowing you to view the design and layout. Once you are sure this is the template, click 'Use This Template' button on the top of the preview screen.
confirm the template
Step 04
The chosen template will be duplicated automatically to your new experience. Make sure to delete irrelevant layout from the pagination and also check the mobile layout.
Template duplicated
Step 05
Ceros Publish Checklist
This guide will take you through the best practises and things you need to check before publishing. These steps help increase SEO, loadtime and help your analytics teams identify how content is performing.
Step 09
• 6-13 words is proven to be best for SEO. • Make sure it includes key words. • Make sure it states the brand/sponsor name. • The URL must be lower case with no spaces.
Settings panel is opened in top right of studio
SEO settings are on the second tab.
Performance settings are on the last tab.
Display layout settings are accessed from the cog next to the mobile icons.
Name Your Experience & URL
Step 10
• Make sure the checkbox is unchecked. • Add the H1 title and the H2 description of the piece into the first two boxes. • Add the parent page (e.g. Vogue.com/content) where the content is embedded into the canonical URL box.
Add your H1, H2 & Canonical URL
Step 11
Tick all three boxes.
Turn ON all performance optimisation settings on
Once a mobile version has been set up, you can choose to switch by device or breakpoint. We would suggest leaving this as the default.
Switch to mobile 'by device'
Step 13
Once you click publish, select the copy full hieght button. It will save the relevant Ceros embed code to your clipboard.
Copy the 'Full Height' embed code
If you want to go that extra mile please follow the steps outlined on Ceros educate site:
Further Optimisation
• Your canvas size should directly reflect the device you are intending users to view on • Recommended canvas width: 1280 for desktop, 540 for mobile, 768 for tablet • Excessively large experiences on mobile devices or older computers can result in poor performance.
Ensure Canvas Size is Appropriate for Intended Device
• Optimise images (up to 1.5mb - recommended around 600kb in 72 dpi) and videos (less than 1.5gb) • Multiple videos on one Page may also cause performance issue • Images should be correctly cropped to the canvas size • Ensure correct formats are used:
Check for excessively large media
→ JPG for rectangular images, and images with no transparency → PNG 24 for semi-transparent graphics → PNG 8 or GIF for text, logos or other flat graphics with no transparency → GIF when utilizing a short animation on repeat
Canvas settings are on top of layers panel
• Any content that will be embedded needs to be switched to 'Full Width' in the drop down in canvas settings. • Check all pages are the same length if embedding a multipage document.
Switch to 'full width'
Make sure: • All link outs go to the correct web addresses • All interactions perform correctly • Animations perform smoothly without lag or jerkiness • Any hotspots are easy to find (such as close buttons)
Test Interactions / Animations
Step 07
• Check videos for correctly applied options. i.e. turn off controls, autoplay, etc • For mobile Experiences, be sure videos visually indicate they can be tapped to play • If the experience is being embedded, ensure the page heights are all the same and that there are no pinned objects , otherwise a scrolling embed will have to be used
Check Videos and Embed code
Step 08
Make sure: • Make sure all hotspots have unique names • Check that Hotspots are not hidden behind other objects and do not have animations applied to them • Ensure that Menus, Pinned Groups, and Show/Hide objects display above other content (unless specifically requested not to) • Ensure that you arrange the folders according to your layout, so that the next person working on the file will easily find the assets. • Delete all unused assets, swatches and fonts
Check folders configurations
After checking Step 1- 10, do a final publish and double-check all animation and interaction to ensure everything is done correctly. Have your colleagues triple-check it as well before releasing to the public eyes.
Publish the experience
Step 12
It is now required to follow the naming convention as follows: COUNTRY_ADVERTISER_SITE_LIVE DATE_MODULETYPE_MODULETEMPLATE_ DESCRIPTION/VERSION_PACKAGEID eg: ES_VOLCAN_GQ_030122_SHOP_CLICK-TO-FLIP_DE-MI-TIERRA/V3_N76354632 The Date will follow DDMMYY format. Since the analytics measurement will be centralised, it is also required to have the Campaign Name in English.
Follow the NAming COnvention for Analytics purposes
eko.khong@condenast.com
EKo Khong
COntact
Thank you!
interactive-design
SLACK Channel
