Friday, May 30, 2014

The scroll troll and the very bold fold

The scroll was once the bane of UX screen elements. In the early days, when screen resolutions were significantly lower, there was precious little that could be accommodated over the formidable 'fold'. Yes, precious. There was less noise and only the very important content was sifted, pruned and polished so that it would grab the reader's attention.

To access any more details, we had to, rather crudely, click on the 'more...' link and go to another page, or  very dexterously so as to use that deceptive little scrollbar tucked away on the right hand side of the page. Or we had to jump devices and use the keyboard for hitting the up/down keys. 

(Image courtesy: Google images)

Technology advanced, screen resolutions went higher. But the formidable fold was still respected and the scroll was avoided, up until the advent of the touch-screen smartphones.

The touch screen phones invented interaction paradigms of the sort only seen in sci-fi movies. Gestures! 

(Image courtesy:

The 'scroll' now had a fancier name: 'the swipe' or 'the flick'. What was better, is that the scroll got more powerful. Not only could you scroll anywhere on the screen, without being restricted by a thin scroll bar, you could also scroll at different speeds. And the horizontal scroll became the new navigation parameter for accessing next and previous pages.

Even then, for the first year or two, the users did not fully realise the tremendous potential of that these afforded. As with all devices or applications, 80% of the  users effectively utilise only 20% of the available features ; and for touch screen devices, the users had ensured that "the swipe" and "the pinch" were the winners. With the 'scroll' being the winner by a massive margin.

Suddenly, the fold was no longer formidable. It practically vanished. people started swiping and scrolling through pages, as fast as their eyes could scan. The preciousness of 'reading the content' got lost somewhere in all this frenzy. Images and typography became the rulers. because we had to now design pages that would catch the eye in the middle of a whizzing swipe.
Pinned navigation, and widgets became essential elements on the screen in order to bring some stability in all this motion.

Also arrived the 'lazy load' feature, where the page would automatically load the next set of content once the user had scrolled to the bottom the current set. Thereby, creating a virtually endless level of scrolling. Most E-commerce sites have adopted this pattern extensively.
Funnily, in the midst of all this new zippy stuff, the basics are often forgotten. The extensive continuous loading of content, which pushed aside good ol' pagination, does not allow user to "memorise" where the object they like might be found again. This interaction pattern while being very good for browsing behaviour, might not necessarily be the best for converting to actual purchase on the E-comm site. Also, very few sites actually implement a 'back to the top' button that can be very neatly pinned on the lower right corner of the page.

It simply reinforces the belief that basics need to adapt to newer advances, but basics are called the basics for a very good reason. It is important to realise the logic and carry it forward along with the technology. 

No comments:

Post a Comment

Itna sannataa kyun hai, Bhai?