BLOG & NEWS

The bite size approach to content design

Educative websites the bite size approach to content design - alphabet soup image

I was reviewing a site recently and it struck me how different a brochure site is from an online database site. Then I started looking round for some examples and was struck by the trend towards breaking information down into palatable chunks. I think this trend has come largely from design for small screens where you often have to present one idea at a time and where the discipline created by this means you have to break things down into step by step, bite size pieces.

 

Educative websites the bite size approach to-content design The new fiver micro-site from the Bank of England
The New Fiver microsite from the Bank of England serves up a video and highlights the main points as you scroll down with full screen backgrounds, a 3d viewer and brief texts

 Growth or spread?

I think its tempting when you conceive a site plan to think the site has to be a comprehensive online reference of everything that has ever been written about you or your organisation. That is a perfectly valid way to work if you have a large range of products or services or if you generate a lot of information.

Because there is no cost in terms of materials for creating extra pages there is also a temptation to extend your site and add branches and sections whenever you make a change to your services or products. The danger is that those branches become backwaters as soon as your attention moves on to the next thing, the more extensive a site becomes the harder it becomes to manage and edit.

Search engine optimisation pushes people to fill their pages with key words, another pressure that is likely to bloat your website and make it harder to manage (to say nothing of making it harder for users to read).

Economy of words

The art of editing for print can be a useful model of economy with words that we can learn from and apply to websites. The cost of printing brings with it an automatic pressure to keep things succinct.

 

This design guide one page site encapsulates the bite-size-chunks approach: as the user scrolls they get a new idea in a new 'room' with its own distinct background colour or full screen image.
This Design Trends site from Stream in Berlin, a one-page site, encapsulates the bite-size-chunks approach: as the user scrolls they get a new idea in a new ‘room’ with its own distinct background colour or full screen image.

To grow or to shrink?

I think there are forces at work that are pushing in opposite direction when it comes to designing information systems like websites. On the one hand there is the temptation to sprawl, to extend a website to cover every associated subject and to store everything you have ever written. On the other hand there is the idea that brevity is beautiful, I think this is gaining ground in our information saturated society, the faster, bolder and more surprisingly you can explain yourself the more likely you are to grab someones attention so they will linger long enough to read your article/blog/advert. If you can summarise or introduce an idea in a witty, catchy or dramatic way your audience is likely to respond with interest and pause to check out what is really on offer on your site.

 

The Mailchimp holiday tips site typifies the trend towards brevity and boldness. Each tip comes with a brief headline, a couple of lines of text, a link and a light hearted image. Do not underestimate the deceptive simplicity here, this is a major piece of production work
The Mailchimp holiday tips site typifies the trend towards brevity and boldness. Each tip comes with a brief headline, a couple of lines of text, a link and a light hearted image. Do not underestimate the deceptive simplicity here, this is a major piece of production work

Brochure sites are part of the process of catching peoples attention. A brochure site exists to create an online presence and direct visitors to: call you, email you or visit another site – like an online shop for example. It’s perfectly possibly for a site to play both this role and that of an online reference too but I think it increasingly makes sense to break information down and create sub-sites, micro-sites, event sites and campaign sites that are separate entities that do not bloat or distort the ‘parent’ site.

 

The black lives matter one-pager is part of a series about the power of hashtags. It uses plenty of text but everything is broken up into screen sized chunks so it never looks indegestible
The black lives matter one-pager is part of a series about the power of hashtags. It uses plenty of text but everything is broken up into screen sized chunks so it never looks overwhelming. The page is really long and ends with a link to buy tickets for an exhibition.

Attention grabbing AND informative

My final illustration shows the best of both worlds. It has summarizing headlines and short texts and a lot of video talks. In this way the page/site gives the user the option of delving into the long-form video content or just reading the summaries. It also has plenty of links to related material so the page acts as a portal to even more content.

 

Design Report from Essen International is trend prediction from 2014 and is rich in video. The video carries the 'long-form' content but the document appears quite succinct on the page surface.
Design Report from Essen International is a trend prediction from 2014 and is rich in video. The video carries the ‘long-form’ content but the document appears quite succinct on the page with brief headlines and caption-like texts and intros.

Further examples:

This Uber site uses a video to promote the car service. The site is very simple, has a lot of app-like design features but relies on a high end (& high cost) beautifully shot and edited video production to put the message across.

Periodic table one page with information dropdowns about each element

Scottish weather from ootside – one page interactive one-off.

Type terms a wizard that takes through basic typographical terms, each point of information gets a step of its own so the user punctuates and paces the lesson.

Article by Simon Fell, lead designer at Pedalo with research support by Jaime Bernal User Experience Expert.

Top image: Anh Phan, Unsplash