No matter how good your engineers are, the application you are building will not feel the same between two devices. Internet speed, data usage, and device bandwidth are all technical limitations that result in distinct experiences.
Network speed (3G, LTE etc) across the world and network quality across your living room may vary. In addition, each device will have different bandwidth, which will affect the throughput: Bandwidth refers to the data rate supported by a network connection; the overall capacity. Throughput, is the amount of data that can flow through the connection.
Imagine the network connection as a pipe. Differences in network quality are like occasional leaking. The pipe’s size is bandwidth. Throughput is how much water can run through the pipe. Remember that your application is only one of the sources of water.
You will design realistically, when you bring the imperfect pipe into your process. Try adding loading states to your mocks and stalls in your prototypes. It won’t look pretty! But it will help you understand how your app feels on different people’s hands.
Spice up your prototypes considering differences in internet speed, data usage, and device bandwidth. Photo
Technical Constraints of Live Video
Personal broadcasting is built upon empathy. People who need a human connection, who want to share a personal story, start live streaming. Their viewers interact with them by asking questions, making comments, and sending hearts — in real time. This way, the viewers become part of the broadcaster’s narrative. So it’s important that the app does not let the broadcaster feel alone.
Periscope App Store Preview video
Live video technology has unique challenges, such as video latency. Latency is the time between an event being captured on the broadcaster side and when the viewer sees it. The network speed as well as the device settings could increase the latency. If the time difference is noticeable, a broadcaster and their viewers cannot be on the same page. Interaction and empathy goes out of the window. To solve this, our engineers introduce an ‘artificial delay’ by tying comments to the video stream. This way thousands of people are able to watch the same comment and video stream at once.
While engineering enables realtime interaction, design builds emotional connection between the broadcaster and her viewers. The concurrent viewer number and hearts they send show the presence of watchers. One benefit of the heart animation is that it builds empathy with a wide array of emotions. The floating hearts blend in with a joyful music broadcast as well as a heart-breaking news story. Also, when the broadcaster’s friends join her stream, their avatars appear at the bottom of the UI. This way your friends avatars make eye contact with you as long as they are watching your stream in real time.
Cost-Effective and Scalable
Engineers refer to some software actions as costly or expensive. These functions require a lot of resources to be used such as the CPU, storage and memory. In order to scale well, we need to implement cost-effective solutions.
Sometimes engineering reduces cost of operation, and design integrates costly operations into a seamless experience.
For example, our engineers reduce the cost of serving broadcasts to thousands of viewers at the same time. Let alone downloading multiple video streams simultaneously, even a single video is not loaded all at once. Instead each stream is divided into chunks. As the viewer keeps watching, more pieces of video are requested from the server. This way, the device’s memory is not overloaded with unnecessary information.
We display metadata to make up for the time cost of loading a broadcast
On the visible user interface, design accommodates for the time cost of expensive operations. For example, to make up for the time of loading a broadcast, we display relevant metadata. Similar to the credits at the beginning of a film, we warm up the audience by introducing the broadcaster, their avatar, location and the title.
Video (true) if { Min(cost) && Max(resources) }
Alternatively, engineering and design work hand in hand to minimize cost of operation. For instance, it’s costly to load and display the chats in the stream. So, when a chat room has many participants, we display one chat bubble per second. This doesn’t only minimize the data used to load the chats, but also makes it easier to engage with the messages. Additionally, we prioritize displaying the chats that are relevant to each viewer through personalizing their stream. So for two viewers with different follow graphs, messages will appear differently. This way, your chat room represents your community while we scale the same broadcast to thousands of watchers.