1. Innovid Knowledge Base
  2. Creative
  3. Creative Best Practices

Interactive CTV Design Best Practices

Last Updated:

This guide will provide you with best practices for designing beautiful Interactive CTV video creatives. 

INTERACTIVE CTV GENERAL BEST PRACTICES AND CHECKLIST

GENERAL BEST PRACTICES

10_foot_ui_2.png

10_foot_UI_.png

 

  • Watching TV is a “lean back” experience
  • Your iCTV designs should have:
    • Clear and minimalistic content
    • Large font
    • Actionable and clear Call-to-Action (CTA)
    • Let your creative “breathe.” Avoid large chunks of text or long sentences
IMAGE AND VIDEO QUALITY

image_and_video_quality.png

  • Video Resolution Requirements:
    • 1920x1080 px
    • Content of the video doesn’t have to be a 16:9 ratio
    • 15 to 30s video length
  • We strongly recommend:
    • A Constant Bitrate (CBR) larger than 15 Mbps
    • These video specs are mostly relevant to pre-roll but should be consistent across all ad experiences
  • Image Specs:
    • Upload a high-quality JPG or PNG image
    • All images inside the Expand Format: 1920x1080px with a max size of 3 MB
    • Overlay Image: cropped to the minimum working area
    • Overlay Carousel: crop all images to the same dimensions
SAFE ZONES 

Safezones.png

  • Your design should fill the entire screen however, we strongly recommended keeping important elements such as logo or text within the 90x60px frame around the panel.
  • We strongly recommend:
    • That you avoid including important text/imagery outside of these safe zones.
  • The safe zone markers can be found in all of our PSD templates on the ICTV Resources page.
ROKU AD COUNTER 

roku_ad_counter.png

  • “Ad X of Y” message appears on Roku devices. Factor in the Roku Ad Counter as part of your overall safe zones
    • Specifically for Expand units, factor in the Roku Ad as well because it also appears inside the format
CLEAR FUNCTIONALITY AND NAVIGATION 

Functionality - "OK" Button Interactions:

image__9_.png
  • Use a dynamic remote to encourage interaction.
  • If the ad uses the “OK” button to stimulate interaction. Include a clear and bold button design accompanied by a short message. 
    • Average button size: ~ 400x150px 

Navigation - Arrows: 

cf2.png

  • If the ad has navigation elements, make the arrows bold and clear. In addition, also consider adding paginations (see below). 

Navigation - Paginations: 

expand5_focusmode.gif

  • In addition to adding arrows or focus mode (see Expand - Focus Mode below) to your design, you can include pagination dots to let the user know:
    • How many frames are in the unit 
    • Where they are currently in the unit 

Navigation - Menu: 

image__7_.png

  • If the ad has a browse-able “MENU," show the user which part of the menu is “highlighted” at any given moment
  • If there is a video player, include a clear and bold "PLAY" or "WATCH MORE" icon
BEST DESIGN PRACTICES BY FORMAT
QR CODES 

cf4.png

  • We recommend focusing the messaging on scanning the code

    • Bold and simple messages are the most effective for driving QR scans. Ideally, marketers should incorporate language like "Scan to try" or “Scan the code to...”

qrcode3.png

  • We recommend using these INNOVID placeholders in your design mocks.
    • QR image size:
      • Max: 500x500 px
      • Min: ~350x250px
  • Assign a portion of the creative to include a square where the QR code image will live.
  • We strongly recommend: using a shorter URL which will create a larger and less complex code image that will be easier for the viewer to scan

qrcode2.png

  • If possible, include an icon of a hand scanning the QR code
OVERLAY 

overlay1.png

  • Must include:
    • Short message (ex: More Questions About Bud Light Seltzer?)
    • Bold Call-to-Action (CTA) (ex: Click to Watch)
    • Brand logo
    • Brand colors/imagery

overlay2.png

  • We strongly recommend:
    • Include space for a dynamic remote (Ex: Nintendo Switch Remote - Highlighting "A" Button)
    •  A lower 3rd design
    • Max Height: ~300px
  • Shape/layout suggestions:
    • Coast-to-Coast layout
    • Floating “banner” 
    • Non-boxed overlay
OVERLAY CAROUSEL 

overlay3.png

  • Instead of a single Overly image, users can browse a series of Overlay images.
    • Try keeping a unified line of design between the various Overlay images so the user feels a consistent and coherent experience when browsing. 
  • To make it clear that users can navigate between overlay images, add a navigation bar:

    • Arrows

    • Paginations

      • “Hint” at the next frame

  • We strongly recommend
    • Include space for a dynamic remote
    • A lower 3rd design
    • Max overlay height: ~300px
  • Shape/layout suggestions
    • Coast-to-Coast layout
    • Floating “banner” 
    • Non-boxed overlay
RENDERED OVERLAY

overlay5.png

  • The timeline is yours
    • Apply a rendered Overlay that enables you to animate anything you want in your creative
      • Render your animation on top of the pre-roll video
  • Shape and layout suggestions:
    • A lowe 3rd-design
  • We strongly recommend:
    • Keeping it simple
    • Include a familiar "button-shaped" Call-to-Action (CTA)
      • Make the CTA a big part of the overlay design
      • Messaging should be short and clear
    • Fit within TV safe zones
CANVAS

canvas1.png

  • Must include
    • Area for pre-roll creative (any size/position)
    • Brand logo
    • Brand colors/imagery
    • Main message/Call-To-Action (CTA)
  • We strongly recommend
QR CODE CANVAS 

image__10_.png

  • Must include

    • QR Code CTA image. QR Code CTA Message should be 50 characters or less

    • Brand landing page URL—Innovid to create QR code

  • We strongly recommend
    • Focus your messaging on the large QR code
      • Include a compelling CTA
      • This should be a short copy message that focuses on scanning the QR code.
CANVAS CAROUSEL 

canvas5.png

  • We strongly recommend
    • You can have a creative layout with the Canvas design as your pre-roll and an overlay Carousel on top. 
    • In this scenario, we recommend that you include clear and bold navigation (arrows/paginations) as well as including space for a dynamic remote
EXPAND 

Define The Goal: 

image__9_.png

  • Define the goal or main focus inside the Expand Carousel. For example:

    • Image gallery/“hotspots” or products

    • Video gallery/carousel of videos

    • Shop-able gallery with QR code

Expand - Fixed Gradient and System Controls:

image__8_.png

  • The lower third of every panel inside an Expand unit contains a subtle black gradient and the system controls buttons (exit, browse, etc. )
  • This cannot be changed or removed and is part of the PSD template. Keep this in mind when placing your elements at the bottom of the screen

 Expand - Navigation:

GIF_BL3_.gif

  • “Fake” a Navigation Menu:
    • When browsing LEFT / RIGHT you are navigating between individual images, but we recommend keeping a Consistent design between the frames.
    • This can be achieved by having a fixed layout to your top or bottom and each next image will highlight a different “tab"

Expand - Focus Mode:expand9.png

  • Adding Focus Mode will help to show the user where they are in the unit or what element is meant to grab their attention.
    • We recommend keeping the same line of design from the overlay to the expanded slate as well.
  • If you have an expanded carousel with multiple frames, considering adding a clear indication for the user as to which “tab” or “section” of the ad they are on at any given moment.

Expand - Introduction Screen:

expand6.png

  • Consider adding an intro screen: 

    • Depending on your creative, you can design the first panel as a “welcome” screen with info and the buttons on the left and right

  • Hint at the next frame:

    • In some designs, you can include a “hint” of the next frame (see “shark” example gif below)

Expand - TV2Mobile Feature:

expand12.gif

  • Must include:

    • Clear navigation markers

    • Brand logo / colors / imagery

  • We strongly recommend:
    • Consider including a special feature such as TV2Mobile or QR code. This is launched by pressing "UP." We strongly recommend devoting the top third of the screen for the actual creative. The CTA to drive users to press "UP" can be anywhere on the screen.
  • Consider using some of these initial layouts to get your ideas started
TV2 MOBILE 

tv2mobileinjustice2.gif

  • Must include
    • Fixed keypad design or a QR code image in prominent viewing position
  • We strongly recommend: 
    • Branding: Include the same branded look and feel as the rest of the ad
    • Clear Call-to-Action (CTA): to enter the user’s number or scan the QR code.

TV2 Mobile - Keypad Design:

keypaddesign.gif

  • CTV Composer offers a number of fixed keypad template positions that cannot be changed.

TV2 Mobile - Pre-Roll:

b2b35de0-0a9c-4797-954e-3771eb2b768f.png

  • Design a strong call-to-action using the brand’s look and feel, utilizing the design guidelines for our overlays

TV2 Mobile - Expand:

Cadillac_tv2m_gif.gif

  • This screen will appear if the user presses "UP" on their remote. It is best practice to devote a specific area in the top third of the screen to the "UP" interaction. 

  • Add a strong call-to-action with a "UP" arrow icon.

  • A specific call-to-action (“Get a $5 coupon now”, “Send me the full video”) works better than a generic call-to-action (“Learn more”) 

SURVEY 

8c577572-0b3f-4d35-b7cc-d7f821e93c22.png

  • Must include
    • Lower 3rd design
    • Simple background image/branding
    • Short question (1 line recommended)
    • Answer Blocks
    • Thank You Screen

Survey - Answer Blocks:

1f040bca-5013-4cbc-b2f0-9f9ce8c861e8.png

  •  Text: Roughly 18 characters per block

  • Number of blocks: 2-4 answers is the recommended amount

  • Recommended size - 380 x 100px

  • Highlight mode: Each answer block design should have 2 states for when the user “selects” their answer

Survey - Various Layouts:

8dc03211-24b1-45a8-b7ae-acbc5fcba4a1.png

  • The mechanics behind this format is are that of an overlay carousel which leads to a final result image.
    • Navigating between overlays on iCTV ads can be done by pressing "LEFT/RIGHT" OR "UP/DOWN" so you can apply any layout to your design:
      • Lower third overlay
      • Side by side canvas

Survey - Various Results Screen:

5f6bc1b7-3ab5-4e6e-b9f0-15f9caea1cf3.png

  • Instead of a single result image, you may design a separate result screen per answer block.
  • We strongly recommend:
        • Keeping the same design between the answer and result screen.

Articles in this section

Was this article helpful?
0 out of 0 found this helpful