about 1 year ago
When building an Extension, you need to think about two customers: both the creator who will leverage your Extension on their channel and the viewer who will ultimately engage with your Extension. Below are some UI/UX best practices from a blog post by Cheri Saito, Product marketing at Twitch:
Optimizing Extension design for viewers
- Be aware of the Twitch UI. Think through how your Extension will display in different video player modes. For example, theater and full screen mode have a header with stream info on the top of the video player, while standard mode does not.
- Provide visibility options. Enable viewers to consume and interact with content in their own way. For example, consider showing the Extension upon mouseover, make it easy to dismiss or hide, or provide viewers the ability to customize its location and/or presentation.
- Showcase what you’ve created (carefully). Assume that not everyone knows how to interact with your Extension. Subtly nudge discovery of your interactive content to increase engagement.
- Fail gracefully. When operating at scale, sometimes things can go wrong. Build a smart failure handling into your system. For example, for video overlays, you can hide all Extension content if failure is detected, and for panels, you can display an actionable error message.
Optimizing Extension discovery and management for creators
- Provide descriptive detail pages. This is where you make your first impression with creators! Add screenshots of your Extension to the details page and be crystal clear about how the Extension will improve the stream for the creator’s audience.
- Make setup of your Extension easy. Tell the creator exactly what they need to do to if your Extension requires configuration. It’s worth investing the time to make this process as simple as possible to minimize drop-off.
- Use Twitch tools to improve the creator experience. The process of installing and managing Extensions is still new for many users. Leverage the tools we’ve created to guide your customers in the right direction and minimize user confusion or error. For example, did you know you can set a required configuration string to make sure your Extension can’t be activated on a channel page until configuration is complete?
- Take feedback well. The community will often give you both positive and constructive feedback on your Extension. Take this opportunity to engage with your customers and understand their needs!
If you have any questions about the hackathon, please post on the discussion forum.