Posted in: Archive
Some of the more astute among you will have noticed Pinterest’s recent upgrade, including a roll out of Analytics, larger pins and other minor changes to the network.
One of the smaller details that stood out for me, was the photo loading. Pinterest lazy load photos – i.e. they only bring them back when the user needs to see them in their viewport, based on how far down the page you are. It’s a common technique designed to take the pressure off bandwidth, and provide a better speed for users from the application. This is nothing new, and they’ve been doing it since way their inception.
What is new – are the placeholders behind the photos.
Each and every photo has a different coloured placeholder designed in such a way to match the dominant focus colour contained within the photo. You can see it from the screengrab below:
What is particularly interesting, is that the effort required to pull of something like this. What seems like a relatively small user experience benefit, requires a relatively large amount of engineering input.
For the more technical amongst you, Pinterest are having to determine the majority of colours contained in all the pixels of an image, (a technical challenge I was faced with recently for a personal project) and save that in their database with each and every pin of a photo, and for what?
Just to show a placeholder in the listings that is closest to the colours of the image which is about to be loaded into its place. This results in a slightly better experience for the end user, as the eye doesn’t have to adjust as much to the contrasts and colours contained within the final image loaded in. But it’s soo minor a change, many of you will not have noticed it, nor appreciated the engineering that had to be enlisted to make it happen.
I can only imagine the conversation coming from the design team asking the programmers to store a single majority colour for each of the images in their database. They’ve had to do it historically as well, so if they weren’t already storing this information (which seems likely) – then a process of running it over the millions of images contained in their network, likely took days if not weeks to run.
That’s what separates a good products from a great products, when the attention to detail on the smallest of details doesn’t go unchecked, and is a fine example of how great web companies are design lead.