JSON-LD – How to use Linked Data for a better User Experience

In 1989 Tim Berners-Lee published a memo in which he described the former structure of the World Wide Web. The basic idea of this project was to make people able to jump from one document to another whenever someone referred to it in his work. What Tim was aiming at was a system that could help scientists to save the time spent in searching for references and referred papers.

In 2009 the very same guy was invited to attend a TED conference where he suggested the idea of an Internet built on Linked Data (from now on LD).

LD is great for computers and, if presented in the right way, also for humans. LD is basically a set of relationships between data: think about Facebook where every click we make creates a relation between us and something else, like a new friend, a movie, a photo etc. All these relationships generate a huge and detailed network, populated by meaningful links. All these data is accessible and readable by computers thanks to the data-structure that they can get access to.

WordLift uses a format called JSON-LD to allow your data to be readable for machines and converted, analyzed or displayed in third party websites and applications.

LD helps creating accessible content outside a website. Near our office in Rome there is a tailor’s shop called Sartoria Scavelli, they sell bespoke suits and realize high couture tailoring products using the finest fabrics on the market and delivering an impeccable service.

Sartoria Scavelli runs a simple but well organized website, they use WordLift to write blog posts about fine fabrics, seasonal trends and the history of iconic garments (like ties or polo shirts).

Sartoria Scavelli has created an entity on WordLift for the shop and has linked every relevant information to it, so that when someone searches for Sartoria Scavelli on Google Search, a Google Card (Knowledge Graph) appears with every useful information the user needs to locate the shop and know everything about its services and the fabrics used; this happens both because of the information added with WordLift both because the website is powered by Google My Business.

How could the tailor’s shop use the same technique to help his readers have a better experience on their website? They could grab the data created using WordLift and create custom widgets. This is the very same technique used by Google when displaying cards on the side of the search.

In the first days of the Internet there where fewer display options, imagine that custom colours were not even supported, yet. Users had to stick to plain text pages and almost no layout at all. The experience they where facing was almost unfriendly as reading plain code. Thirty years after we can see how much interfaces have changed. The experience offered to users is immersive and tailored for their habits and devices.

Nowadays deliver a tailored user experience to every one, is barely impossible: screen sizes and supported technologies are a Pandora’s box that every front-end engineer have to face. On the other side delivering raw data and letting the device handle the visualization is way more simple than before.

With JSON-LD you can create data visualization tailored to the UX experience you chose for your website, like a suit made by Sartoria Scavelli to fit your shape perfectly. Just take a look for now, we’ll be back soon with another post to tell you how.

Below is the JSON-LD created by WordLift to represent how Linked Data was used to annotate this blogpost. The file can be downloaded from data.wordlift.io.