Designing for the internet of streams

‘It’s time to stop publishing web pages’ – Anil Dash (2012)

Chances are if you’ve designed for the web recently you’ll have hit the point where you’re designing some kind of stream. Whether your client wants a flow of news and images or products, or more likely your stream is the whole product (YouTube, Twitter, Pinterest, Facebook, etc). Blame the mobile viewport, blame Twitter, blame Google. Get it out of your system. The Web layout as you knew it is gone. The services that people demanded shaped the way things were delivered. Embrace it. It’s beautiful really. There’s no design discipline out there that morphs and changes itself to the beat of the user like the design of information.

Hail the era of the internet of streams.

Kinks in the river

‘Now is the time for the medium of the web to outgrow its origins in the printed page’ – John Allsopp (2000)

As we’ve moved from the page model to the stream model we are finally free from the legacy (but not all the learnings) from print design. With this though we have lots of new challenges. New difficulties with hierarchy. Order and serial positioning effects. The fatigue of infinite scroll. Recently Facebook previewed a change to its newsfeed called chronology by actor, to make your feed ordered by time as opposed to relevance, as it seeks to capitalise on being the place to experience what is happening now. Facebook is trying to wrangle and bridge and re-route the social stream of information it’s designing. Twitter’s stream, as it breaks out of its 140 characters, continues to morph with ads and imagery damming its flow. Interruptions and kinks in the river. And that’s just designing for passive content. When you add in active conversations, showing on the screen at the same time, it can make your brain hurt. In time, are we on the way to making a mess of this?

Principles to help the flow

When things get complicated, it’s time to turn to principles and design patterns. Principles to help guide us, patterns to get stuff done. Where there aren’t patterns, we’ll need to build new ones (‘pull-to-refresh’, whether you agree or disagree with the merits of its discoverability, is a pattern of the internet of streams). There are a number of principles that we can use to help us design better for our newish world. Here are some to start, a few essentials, and some to thought-provoke.

Order is the experience

The way you choose to order your stream defines the experience. Twitter by time. Facebook by relevance (for now). Helpfully you’ve only got five different ways you can order information, full stop, as TED creator Richard Saul Wurman lays it out in his book Information Anxiety 2: Location, Alphabet, Time, Category and Hierarchy (LATCH for short). Every stream you see, from Pinterest to Gmail, is a variant of LATCH. Choose wisely, or be very careful if you cross all of these.

Let go of control

John Allsopp wrote in A dao of web design back in 2000 that ‘the journey begins by letting go of control’. Now in Allsopp’s brilliant article that was as much about how we publish pages. The rise of devices, amongst other things has forced us to that conclusion. But we also need to embrace the flexible way our users may approach our system. No matter how you want people to use it, someone will use it almost opposite to how you intended. You’ll order by time and then find someone skips to the bottom of the list and works backwards to the top. You prioritised by time, they prioritised by last read. See?

Use Smart Defaults

The way the stream is set up matters a lot. People are more likely to find strange interface work-arounds than customise a system. Furthermore what I see when return to a stream sets up my interaction with it. Why did I return to the same stream ten minutes later. To re-read the things I had already read?

Design for different modes of information seeking

This is a no brainer, but always seems to be overlooked. Donna Spencer laid out four modes of information seeking in 2006: Known item (like search), Exploratory (think discovery) Don’t know what you need to know (catchy, think looking for one thing but actually need another), and Re-finding (think favourites and bookmarking). Look back over your stream, or look at a popular one now. Have they really designed well for all of these? Really? I’m not so sure.

Design for rhythm

This is a flow of content, most likely being swiped by a thumb (not yet by the glance of an eye). There is a cadence to the way that people scan through information. Pauses tell stories.Thumbs hover. Can the system adapt itself to the cadence of the user? 

Design for depth

The nature of the stream is that it lets you dive in and out of deeper content. This gives you a couple of challenges. One is about axis. Often the stream will run on one axis (say Y), deep content on another (say X). You’ve also got Z if you’re brave. You need to set up the orientation of the stream, and then use smart transitions to help users pass between modes while maintaining their context. These microinteractions are the cutting edge for the stream wrangling interaction designer. Their examples are all over the web.

Performance Matters

None of all this will matter if content isn’t delivered to meet people’s expectations, and that is no mean feat when we are talking about streams of realtime and rich data. There is a wealth of writing, advice and work on this. Suffice to say, as many have said as much, performance is design.

Beyond the Sea

There will always be a place for documents and articles. There will always, we hope, be a Wikipedia. Not everything will work as a stream, but where it does, we need to push how we’re designing to the next level.

That said, there are those that will tell you you should be designing outside the magic box of the screen. Hell, they’re even right. But we’ve also got to design to the rhythm of the people, not just the imagination of Silicon Valley. 

This is hard. Where there aren’t patterns, we’ll need to build new ones. Smart scroll bars that show where I paused. Longpress to rewind my browsing. Branching, damming, u-bending patterns to marshall the flow of information.

If we’re not in it for this, then what for? Get out there and make the internet better.

Selected references:

Richard Saul Wurman /  Information Anxiety 2 (2000) http://www.informit.com/articles/article.aspx?p=130881&seqNum=6
Anil Dash / Stop Publishing web pages (2012) http://dashes.com/anil/2012/08/stop-publishing-web-pages.html 
John Allsopp / A dao of Web design (2000) http://alistapart.com/article/dao/ 
Donna Spencer / Four modes of Information seeking (2006) http://boxesandarrows.com/four-modes-of-seeking-information-and-how-to-design-for-them/
Brad Frost / Performance as Design (2013) http://bradfrostweb.com/blog/post/performance-as-design/

Matt Theakston is senior experience designer at TH_NK.