User experience principles for OTT layout design

A strong user experience is a fundamental requirement for any app’s success, and we always put user experience principles at the center of our OTT designs. With Accedo One empowering customers to build their own compelling content layouts, principles for user-friendly layouts apply also here. 

Here you will find some recommendations on what to think about when creating video content pages within your streaming app.
‍

1. Strategic use of containers for engagement

Containers are your primary tools for organizing content. Think of them as curated showcases, each with a specific purpose.

‍

• Vary container types for visual interest: Don't just stick to one container style! Think of your content hierarchy when choosing containers, and keep that hierarchy consistent across pages.
  
  • Hero: Use our large, prominent "Hero" containers at the top of your page for newly released, trending, or exclusive content. This is your prime real estate for immediate impact.
  • Highlight: Perfect for content that should take a lower priority than hero content, but that you want to immediately draw users’ eye to - for example, a popular franchise or a director’s best movies. 
  • Carousels: Excellent for presenting a large volume of content within a specific category (e.g., "Trending," "New Releases," or “Continue Watching”). 
  • Grids: Ideal for displaying a broader selection within a genre or category when you want users to quickly scan many options.
  • Lists: Useful for specific collections or when providing more textual information alongside the visual (e.g., "Top 10 Documentaries").
    
    
• Logical grouping and theming for easier content discovery: Group related content together into engaging themes. Instead of just "Movies," consider "Critically Acclaimed Dramas," "Family Favorites," or "Action-Packed Thrillers." Theming by mood, occasion, or specific collections (e.g. “Christmas Favorites” or “Tarantino”) offers additional discovery potential for the user browsing your app.

• Visual hierarchy and prioritization:  Structure information visually to guide users to the most important elements first - place your most important or most relevant content rows higher up on the page. Guide the user's eye from general interest to more specific or personalized recommendations.
  ‍

2. Thumbnails: your content's first impression

Thumbnails are tiny billboards for your content. They can be the make-or-break factor for a user clicking on a video.
‍

‍

• High-quality, compelling imagery:
  
  • Clarity is key: Ensure thumbnails are sharp, high-resolution, and easily understandable, even at small sizes on various devices.
  • Emotional resonance: Use expressive faces or dynamic scenes that convey the tone or genre of the content. 
  • Strategic text overlays (sparse use): If adding text, keep it minimal, bold, and highly readable. It should complement the title and offer a quick value proposition. Avoid clutter.
  • Different images for different purposes: Remember that you can upload different images for thumbnail (shown in carousels) and poster (shown on detail pages) images for maximum impact.
    

• Avoid "clickbait" or misleading visuals: Your thumbnails should accurately represent the content.
  
  

3. Container placement for intuitive discovery flow 

The order of your content rows dictates the user's journey down the page.
‍

‍

• Start broad, then get specific: Begin with general interest categories (e.g., "Featured," "New Arrivals," "Popular"). As users scroll, introduce more niche genres (e.g., "Emotional Dramas," “Slashers”).
  ‍
• "Continue Watching" front and center: For authenticated users, this row should be highly visible, near the top. It provides immediate value and reduces friction for resuming content.
  ‍
• "My List" / "Watchlist" integration: Encourage users to build personal lists and make these easily accessible on your main content pages.

• Mix and match layouts: Don't use the same container type for every row. A Hero container, followed by a Shelf with “Continue Watching” content or new releases, then a Carousel or Highlight Grid with a special collection, keeps the page visually fresh and engaging.
  ‍

4. Enhancing discoverability: beyond the visuals

Even with excellent visuals, a strong backend contributes to a great frontend.
‍

‍

• Effective tagging and metadata: Ensure your content is well-tagged with genres, keywords, actors, directors, themes, etc. This powers search and (with Jump TV integration) recommendation engines, leading to more accurate content surfacing in your containers.
  ‍
• Consider personalization: Personalization is always a powerful engagement factor. Accedo One offers an integration with Jump Recommender - speak to your Accedo One representative if you are interested in exploring this option. 
  ‍‍
• Accessibility: Ensure that there is enough contrast in your app’s color scheme to enable all users to clearly view, scroll through and read all content. For example - gray text on black background makes reading your app more difficult than it needs to be.

By strategically designing your containers and optimizing your video thumbnails and container arrangements, you can transform your Accedo One content pages into dynamic, engaging hubs that keep your viewers coming back for more. Focus on clarity, dynamic content and visual appeal, and you'll create an unparalleled streaming experience.
‍

Interested in learning more about user experience? 

The below article offers a comprehensive overview over some common UX Design principles: 

7 fundamental user experience (UX) design principles