Cheating or good design?
8 June 2012
Dmitry Fadeyev on a clever technique used by iOS when switching apps:
[…] when you switch apps, the device saves a screenshot of what the last screen looks like for that app so that when you switch back again, that saved screenshot is the first thing you see. This is done to buy time for the app to fully load.
A commenter on this post notes that this technique is used in other interactive systems and is documented in Jef Raskin’s “The Humane Interface: New Directions for Designing Interactive Systems” (something I cannot verify as I do not own the book).
Somewhere else I’ve noticed this technique being used is in Safari on Lion. Within Safari there’s a gesture that does the same as the ‘back’ button – swiping left to right with two fingers takes you back to the previous page you were looking at. There’s a big visual clue that this is happening – the page you’re currently on moves over to the right to reveal the page you’re going back to ‘underneath’. This technique is also used to replicate the behaviour of the ‘forward’ button in Safari, it’s just the gesture (right to left) and the visual clue (next page slides in from right to left) that differ.
The page that you see ‘underneath’ looks to be an image of the page, rather than the page itself. What’s more, it looks to be a badly compressed image. This is very apparent when you look at a site with lots of links rendered in small point sizes. The best example I’ve found is the Autosport website.
This is the Autosport website as rendered by Safari. If you navigate away to a different page and swipe to go ‘back’, here’s what you see:
Look at the compression, particularly around the smaller blue links. If you’re not getting it, here’s a closeup of the Autosport website as rendered by Safari:
And here’s what Safari shows if you swipe to go back:
Look at all the noise in the graded boxes at the top and around the blue text links.
So it seems Safari is using the same technique as iOS here, showing an image – a badly compressed one – of the previous page for immediacy and speed.
In this case the technique falls down a bit, partially due to the compression giving the game away but also because there’s a very obvious visual ‘jerk’ when the actual HTML renders back in.