Reflection Point: Patterns and Flows
Focus: Twitch
By Oreofe Aderibigbe UXA Ishioka PT
I’m using this write-up to reflect on my experience with Twitch, more specifically the web platform which I tend to use more than the mobile app. Twitch is a streaming service that allows content creators to live-stream their videos to viewers around the world. The content of these videos vary but gaming live-streams are the most popular and are the primary use case for the platform. I use Twitch to watch live streams of my favorite artists and music makers as a way to connect with these artists and also gain an insight into their process. It’s also a way to connect with other members of the community through the provided messaging features on the website.
From a design perspective Twitch follows the same patterns as other video-focused platforms by extending a majority of webpage landscape to the video player and providing playback control features like pause and volume control (fast-forward and rewind are only available during playbacks of old streams). The streaming page, shown below also contains the ‘stream chat’ on the right-hand panel and the followed and recommended lists on the left.
A noticeable pattern here is that these panels are collapsable, giving the user the ability to increase the amount of space given to the video player without necessarily going into fullscreen mode. This is especially useful when using a split-screen on a mac/pc to have two windows side-by-side.
Ellipses are also used on the page to hide extra menus that are less engaged by the user. One can also notice that the nav bar centers the search box and the text entry is displayed instead of hiding it behind the click of the ‘magnifying glass icon. For a platform like Twitch with thousands of content creators, searching plays an important role in the user experience.
Due to a large amount of content on the app, sorting and categorization filtering are essential tools needed to help users make sense of the information.
As shown above, Twitch has classified all its content under four main tags prominently displayed using the brightly colored navigation buttons at the top of the page. These tags house more specialized categories based on the genre/flavor of the content offered. The category design pattern contains the image of the category, the title, the number of viewers, and the tag(s) it belongs to. These categories can then be sorted either by recommendation/viewership count. Going one level deeper into the categories various streaming channels are presented which are then given more nuanced and specific tags to further distinguish or show commonality between each stream depending on how a user may want to interpret this information. The pattern for streams mirrors that of categories, there’s a distinct image (usually a screenshot from the ongoing stream), a title, the streamer use id, and then tags the video belongs to. Each video clip also has the ‘live’ signifier to make sure a user knows the difference between an ongoing stream or a past recording.
Twitch's core flows for a consumer is either engaging with an already familiar streaming channel or browsing through Twitch to find new channels. These two use cases are expanded upon below in the task flow.
