On not using units and delimiters

Yes it looks ‘clean’, but it's hella confusing.

Weather apps are a prime culprit at the moment. The default iPhone weather app using a 24 hour clock and centigrade (i.e. most of Europe) is a great example.

image.png

Very hard to read fast and confusing even when assessed carefully.

It's not that you can't work out what everything means from the context, it's just much slower to do so. Don't make me think.

I want zoom back

Why do so many mobile and responsive sites disable zooming?

I'm all for responsive websites (cf. this website), but why does that mean zoom shouldn't work? I might be able to read your lovely big text just fine, but I still have human sized fingers and a small phone screen and I might want to make a link or button half the size of the screen to ensure I accurately hit it first time.

Not to mention the fact you're also making your site less accessible for any physically impaired users, or even just users wearing gloves.

When Steve Jobs first demoed the iPhone, one of the revolutionary things about mobile Safari was that you could use regular desktop sites perfectly well with double-tap and pinch zooming.

Limited functionality mobile sites are misguided and became such a big issue that Android added a Request Desktop Site feature into mobile Chrome to help combat it.

These days it's less of a problem – designers are aware that an increasing proportion of users will access the sites they design primarily on mobile and responsive design is considered best practice.

But I saw this old XKCD linked today: App. It jogged my memory on the zoom issue – an area where we are actually behind on usability vs. the first day of the original iPhone's release when every site implicitly supported it.

Everyone agrees that Hey! Download our app instead! modal prompts are bad.

Everyone agrees that sites that redirect you to their ‘mobile homepage’, ignoring the deep link you followed to get there, are a horrific nightmare.

It does however seem to be acceptable to disable an important mobile browser accessibility feature arbitrarily.

Stop it.

The New York Times explains winter sports

Brilliant series from the New York Times; finally starting to realise the potential of true multimedia* content publishing.

The best is this one about Ted Ligety's carving technique: Giant Slalom

The New York Times' first foray in this area was actually December 2012, with their Pulitzer prize winning Snow Fall feature. Ambitious and excellent, but packaged as a long form essay that somewhat limited its appeal, it also made it seem that the amount of work required might limit this level of production to large feature pieces only. 

The result was a conversation about the future of online journalism, and what tools might be needed to make the creation of stories like this more practical. Tools like ScrollKit.

The winter sports series shows that bite sized immersive content also works extremely well, and that mixed media can explain and illustrate a technical story more succinctly than anything in print (or online-aping-print, as it so often does) ever could.

* if that word hadn't been overused to the point of meaninglessness

Dark Sky vs. Forecast.io

Dark Sky, genius short-term hyperlocal precipitation forecasting app du jour recently underwent a major update.

The Dark Sky team have achieved something quite incredible with their short term forecasting algorithm and their prediction technology has gone on to power a host of other apps. Their radar map visualisations are also both beautiful and functional:

Yup, it's pretty rainy in London

Yup, it's pretty rainy in London

The update was designed to increase the app's scope from its short-term rain-predicting accessory role to fully fledged Main Weather App. But the new design isn't quite as lovely as it could've been and there have been a number of blog posts analysing its issues.

Personally, I think Jared Sinclair's critique is broadly accurate, particularly his thoughts on the lack of axes on the second screen:

On the second panel, the 24 hour temperature graph doesn’t have any bounding guides or axes to give the graph meaning. It’s just a line meandering through negative space. Graphs need axes to be legible.

This snippet hints at the main problem with the app – the difficulty in parsing the visual information, especially where graphs and scales are involved. This is a rather damning indictment for a weather app.

These are hardly insurmountable issues, but they are surprising given that the Dark Sky team launched a fully featured multi-platform weather web app almost a year ago (that clearly informed the Dark Sky update) that is considerably better designed and laid out: Forecast.io.

The most vital part of Dark Sky, the launch screen, is fine, but a quick look at Forecast's launch screen shows you things could be better:

Dark Sky

Dark Sky

Forecast

Forecast

Showing the radar map through the 'glass' of the first screen is clever and gives a nice glanceable hint as to how stormy the area currently is. In my case this afternoon: very.

Beyond this, Forecast is superior in every aspect: it shows the 'next 24 hours' summary on the same screen, it shows an animated symbol for the current weather rather than an arbitrary black circle and it also includes the degree symbol on the main temperature number. That last point might seem minor, but every time I open Dark Sky the lack of units on the big unadorned number always gives me pause.

However it's Dark Sky's second screen – 'next 24 hours' – that's the most problematic:

IMG_1128.PNG

The precipitation graph ('the sky') is tricky to read and a few questions immediately present themselves:

  • Where are we now on the graph – where is the current time? 
  • Why are the precipitation percentages below the time increment markers?
  • Why don't the percentages line up with the time markers?

In Forecast, this graph is accessed directly on the first screen by dragging the next hour graph to the left. This communicates important information about the temporal relationship between the two representations: the coloured blocks start with the hour immediately after the end of the animated next hour graph. This is not at all clear in Dark Sky.

Mid-drag between the first two screens in Dark Sky

Mid-drag between the first two screens in Dark Sky

As can be seen to the right, when swiping between the two screens the transition animation and lack of common vertical alignment breaks any visual connection between the two.

As Jared notes above, the temperature line is even harder to parse. Only Weather Line has ever really pulled off this style of temperature change representation well and the desire to include it in Dark Sky seems to have prompted the decision to move the next 24 hour information on to a second screen of its own.

Forecast includes this temperature information on the precipitation bar itself. To me, this makes a lot more sense than the line-in-space of Dark Sky.

Dr. Drang mostly defends Dark Sky in his blog post about it, but does have some criticisms, all of which I agree with. One in particular is relevant to this post – Dr. Drang suggests that the detailed secondary weather information revealed by tapping on the black circle in Dark Sky could be more concisely presented elsewhere: 

They’d have been better off taking a cue from Apple’s weather app and having this text fill just the top portion of the first screen when tapped. That would also allow the user to connect this secondary information with any upcoming storm because they’d be on the screen at the same time.

Well wouldn't you know, that's exactly how Forecast presents this information:

After tapping the black circle

After tapping the black circle

After tapping the temperature or plus symbol

After tapping the temperature or plus symbol

A final issue is present in the timeline for the live radar map. It's minor, but which of these is easier to understand?

Dark Sky - the red indicator is draggable and controls the animation shown above this bar.

Dark Sky - the red indicator is draggable and controls the animation shown above this bar.

Forecast - the black indicator is draggable, with the red indicator remaining static to indicate the current time.

Forecast - the black indicator is draggable, with the red indicator remaining static to indicate the current time.

Forecast makes a misstep here too, choosing to use an odd 40 minute scale. Dark Sky fixes this but adds fresh confusion by positioning the labels exactly bisecting the indicators.

In addition, when dragging to animate the radar data, Dark Sky gives no indication of the current time making it difficult to work out exactly how the image above relates to the present conditions outside. This is exacerbated by both the indeterminate time labelling and the physical position of the bar. In Dark Sky, it's impossible to manipulate this slider without your thumb obscuring the indicator's position. In Forecast there is room enough underneath the bar to avoid this being an issue.

As a heavy Forecast user and lover, I was excited at the prospect of a native app with the same functionality. The update to Dark Sky should've allowed me to delete Forecast from my Home Screen but it seems like I'll have to wait a little longer.

The data visualisation difficulties present in the iPhone app update are especially frustrating precisely because the team had already nailed them in Forecast almost a year ago. Hopefully some of these clearer and more intuitive representations will come to the new Dark Sky soon and I can finally make a permanent switch.

LEGO DeLorean Time Machine

So this seems to exist:

It was created via the LEGO CUUSOO project. Anyone can pitch a kit idea, and if it gets 10,000 supporters, LEGO might make it. It's like a LEGO version of Kickstarter, except supporting ideas has no financial risk nor inevitable disappointment associated with it.

Moreover, if your kit gets made, you get 1% of the net product sales. Pretty awesome.

Here's the original DeLorean project on CUUSOO that achieved product status.

You can buy the kit here:
UK Amazon link
US Amazon link

Or direct from LEGO.

Very close to making this an early Christmas present to myself...