This Sat­urday at the Touch the News design chal­lenge at the Moz­illa Fest­ival, I was in team 6 with Heather Les­son, Peter O’Shaughnessy, Carlo Frinolli, Nick Smith, Gavin McFar­land and Chris War­ring.

We focused on how people con­sume news on the iPad with regard to loc­a­tion, time of day and time avail­able to spend on news.

We dis­cussed on the needed changes in font sizes and lay­out needed for vari­ous read­ing pos­i­tions, dis­cussed Craig Mod’s Bib­lio­type art­icle (A List Apart: A Sim­pler page) and pro­to­type.

Then we dis­cussed how the news site could use time of day and loc­a­tion as inform­a­tion to learn from vari­ous user set­tings (font sizes, lay­out) to what cat­egor­ies of news the user is read­ing at home, work, in the morn­ing, etc. to adjust accord­ingly the sug­ges­tions of related articles.

The major issue we tackled with was: given a known time to spend with the iPad (while com­mut­ing, etc.) how do you choose what to read? How do you know what can be read in that time?

The idea was that for example you have 15 minutes avail­able while com­mut­ing, you open the (iPad optim­ised) web­site of Boston Globe, how do you choose what you read?

In the past year there were a lot of dis­cus­sions on news apps vs news sites on iPad, on magazines as down­load­able issues vs web sites. One thing that users con­stantly appre­ci­ated on a down­load­able issue was that each issue had a finite num­ber of pages, and the act of fin­ish­ing an issue gave them a sen­ti­ment of satisfaction.

A site has a poten­tially infin­ite num­ber of pages, there­fore you won’t have this feel­ing of sat­is­fac­tion, espe­cially that you can­not asses the size of an art­icle, the time needed to read.

For (even most of the digital, down­loaded) magazines you have the num­ber of pages eas­ily grasp­able, but on the web, for a long scrolling art­icle (or even a pagin­ated one) in an unboun­ded medium we have only the scroll­bar? that’s good enough when you’re on the art­icle page, but on the homepage, where you have to make a choice what can we have? the num­ber of words?

Inspired by one of the iA Writer features, we thought that read­ing time instead of num­ber of words would be a good indic­ator of not only volume but also time needed to engage in a sat­is­fact­ory man­ner with an article.

There­fore, given 15 minutes, how do you know which art­icles you can read from the Boston Globe’s homepage? By list­ing the estim­ated time to read next to each title!

But, num­bers are ugly, hard to com­pare across the page. Moreover, our gen­eral per­cep­tion of time is ter­rible and when we engage with con­tent it is com­pletely skewed (think inter­est­ing vs bor­ing, emo­tional impact, etc.). For­tu­nately we solved this prob­lem before in the kitchen.

What if we’ll have a timer on the news site? Let’s say I have, hmmm, 10, 12, 15 minutes … what can I read in this time?

We have two issues to solve: how to have a vis­ible yet unob­trus­ive timer on a web page on iPad, and how to align the time set with the time to read needed by each art­icle without show­ing num­bers on them.

The solu­tion was to have the timer as a slider on the left of the dis­play, you pull it down and while adjust­ing it, all art­icles on the page will have a small bar on top that will show the time to read of that art­icle versus the time on the slider (for example, timer set at 15 minutes, the full width of a bar on top of an art­icle heading/​link will rep­res­ent 15 minutes, while the col­oured por­tion of the bar will rep­res­ent the time to read of that article).

This is enough inform­a­tion to visu­ally com­pare if an art­icle or sev­eral will fit in the set time and to allow you to choose the time limit that will allow you to engage with a really inter­est­ing art­icle (think I would like to read these 3 art­icles on the cul­ture sec­tion, then make din­ner, when would be that … instead of time box­ing the read­ing you reor­gan­ise your activities).

Moreover, if an art­icle won’t fit on that inter­val, it will auto­mat­ic­ally have instead of the time bar on top, a but­ton to “Read Later”.

Here are the sketches made in the morn­ing session:

Illus­trated here are also what is hap­pen­ing if in the middle of an art­icle the timer times out (time to read is estim­ated, and the app should learn in time the user’s actual time to read, which also is depend­ent on loc­a­tion, font sizes and cat­egory of content).

So, on time out, a semi-​transparent pane could be dis­play over the half of the con­tent. The reader can just push it down with a swipe (snooz­ing the timer), or it can re-​adjust the timer slider, or just press the “Read Later” but­ton on that pane. If he does so, these events can be used to meas­ure the engage­ment with that par­tic­u­lar content.

Also, on that semi-​transparent pane it is pos­sible to dis­play other choices, for example if the rest of the art­icle might take another 7 minutes to read (estim­ated on the actual read­ing speed on that page), sug­ges­tions for shorter related art­icles can be dis­played there, or a simple way to share the art­icle with a friend, col­league, etc.

Later in the after­noon ses­sion we dis­cussed pros and cons on dis­play­ing the time as bars, small clocks, num­bers, etc. and Gavin cre­ated sev­eral mock-​up images (see below) to test them on iPad for get­ting the actual feel­ing of hav­ing (a static) slider and time bars on screen as well to present the concept for the end of the design jam.