Data Visualisation is a powerful tool for analysing your business data, harnessing the brain’s ability to recognize patterns and shapes. The latest powerful tools enable diagrams, charts and graphics to be created on the web with a speed and interactivity that was unthinkable even five or six years ago. Add to this the ability to draw in the browser in three dimensions and even with virtual reality, then the possibilities are very exciting.
In this article we feature some of the latest examples of Data Visualisation and give you an insight into the tools used to produce them.
Uber Engineering Team
Technology: React, MapboxGL
Uber handles billions of data points every day, and has grown it’s own in-house data visualisation team to make the best use of that data resource. Combining this nab-based data gives city managers and ops teams a real-time visual overview of supply and demand distribution. Read more >
UK Road Accidents
Technology: Mapbox, deck.gl
Not the most cheery of subjects, but this demo by Ryan Baumann of Mapbox is a great example of combining mapping with a large dataset to give real, useful, location-based visuals. Using hexagonal mapping and coupled with an interactive UI enables the density of accidents to be mapped very smoothly and informatively. Read more >
Technology: WebGL, PixiJS
It’s worth waiting for the loading messages to clear, as this fantastic interactive spinning world is one of best designed and implemented of it’s type. Produced by designer Shane Mielke was made to support the Launch It book release, giving feedback on where the book can be bought. Read more >
Happy New Year! We hope you’ve enjoyed a few of our #blogmas articles this season, and for the New Year we take the opportunity to look forward to a few of the developments on the web that we are most excited about. These may not make a huge impact even this year, but just following any progress is going to give a fascinating insight.
AI & Web Development
Although Artificial Intelligence (AI) has taken a hold and is used more commonly than thought (think timelines in Facebook, targeted ads), the progress of this technology is going to be fascinating to watch. AI is going to change all our lives, and if harnessed in the right way can be a hugely powerful tool.
The massive amount of data being stored lends itself to being analysed by AI tools in a way any human can’t possibly imagine. Pure data visualisation is a fantastic tool, but imagine the possibilities if the AI tool could suggest what might happen looking forward, and recognise trends before they happen.
PWA – Progressive Web Apps
This is already a favourite subject of ours, but the blurring of the lines between native mobile apps and web applications is going to be a growing influence in 2019. As more and more APIs are made available to the web browser, being able to access native device features such as camera, file storage and geolocation enables a web app to give a level of performance not before seen.
Having one codebase to build and maintain can be a game-changer for companies looking to develop an app, and that cost saving can make potential projects much more feasible.
Content as King
This is a continuation of a trend that has picked up in the last couple of years, which is to move away from design-heavy website and to put the focus back on the actual content.
As the web matures there is now a real movement to focus on the content – text, imagery, video – that visitors are looking for, and to reduce excessive clutter on the page which only acts as a distraction.
Focus still needs to be given to any branding and ‘feel’ that a client is looking for, but within a clean, easy-to-navigate framework.
Most of us are familiar with the headsets that can take you into an immersive 3D world, but until recently the VR experience depended on dedicated hardware. Developments in modern browser technology though, are bringing closer the ability to use VR via an adapted mobile phone or tablet device. This step will massively accelerate the growth of web VR and with it stimulate growth in applications and reduce development costs.
WebVR is a browser programming interface that allows VR experiences without installing additional software. Depending on the device and browser being used, it is possible now to access VR content through even relatively cheap VR headset setups such as Google Cardboard. Google itself has put together a sample of WebVR experiments which give a flavour of what is currently possible.
If you are fortunate enough to own dedicated VR hardware such as the Occulus Rift, then this too can access the content of WebVR-enabled websites.
The 2D Web
As fascinating as this looks and enticing as it may be to look forward to working in this new online world, one big hurdle remains in the advance of the VR web. Since it’s beginnings over twenty years ago, the web has developed and produced all it’s vast amount of content in 2D. The switch to viewing 3D content on a flat 2D browser is going to take some adaption. Even the best of touch-typers may struggle if viewing in VR and attempting to type on a laptop keyboard. So while it may seem unlikely to imagine this transformation in hardware, don’t forget the transition we’ve already made from using large desktop computers to browse the web, to predominantly hand-held mobile devices.
As these technologies grow in use and the power of mobile devices increase, WebVR should become much more mainstream. As the Google experiments show, even now its possible to produce engaging VR content via a website. Although we’re not there yet, the day when website away. owners put VR tours on their sites can’t be too far away.
In the first of our 12 Blogs of Christmas we have a look back at 2018 and pick out our top five website trends from 2018. These are website and app design and functionality that we’ve seen grow through the year, and may just give a pointer as to where we need to look in 2019. So if these are the top trends – are they the best way to enhance your website and make the most of your online presence? Not necessarily, and we give our verdict on each.
We’re sure you must have experienced the popup welcome when visiting a new website – ‘Can we help?’. Usually on the bottom right of the screen, these advice-offering widgets often feature thumbnail photos of the support person and their name. Nine times out of ten these are automated ChatBots, trained by Artificial Intelligence/Machine Learning to automatically respond with guidance to common visitor requests. The suspicion is that these bots can be helpful, but tend to become an annoyance when continuing to appear on further browsing of the website. So are these ChatBots an annoying passing fad, or can they offer real value to your website visitors? Well, we think they are here to stay and will play a growing part in our web experiences over the next decade. A bit annoying currently, but when it becomes difficult to tell the difference between the bot and a real person then the value of a ChatBot really kicks in. Companies who’ve invested the time in ‘training’ these automated helpers will be a step ahead of their competition.
Verdict: Needs to be used with care currently, but a good investment for the future.
2. Original Illustrations
Website frameworks offer a fantastic way of helping clients get projects up and running quickly, and keeping maintenance costs low. One of the drawbacks though is that website styles, layouts and typography can become very similar unless time is invested in making the project stand out from the crowd. This is where original illustrations have taken a role in adding a wonderful bespoke element to the best of the web.
Verdict: We think illustration can make a real difference, and is well worth the additional initial cost.
3. Data Visualisation
Having worked this year on a large Data Visualisation Portal, we’re perhaps a little biased in thinking that Data Visualisation has been a growing trend for 2018. However, the growth of infographics, mapping and data charting can only help users get the information they are looking for and is a great example of new techniques pushing the boundaries of user interaction. Coding tools including ChartJS, more advanced software such as Tableau, and mapping frameworks similar to MapBox make this a fascinating area to work in.
Verdict: We may be biased, but new techniques make this an exciting field to be involved with.
Microinteractions are those subtle, almost imperceptible, effects that occur when buttons change when you hover over them, or images fade in when scrolling down a page. Although often seen as a ‘nice touch’ that gives a website an added design element, these microinteractions can really help guide and prompt the user through a website path. More advanced interactions can show detailed animation and even morphing of images and text. Developments with the use of SVG images and typography in modern browsers have enabled web developers to let their imagination run free.
Verdict: Becoming a key design element and if used carefully can help guide the user and create a unique style for a website.
5. Progressive Web Apps
Progressive Web Apps or PWAs, are websites which have increased functionality that enables them to give a more app-like experience to the user. On mobile they can give the similar performance of a native iOS or Android app, but run from a website or web app. The huge benefit to client and developer is that the PWA uses only one codebase or set of files, keeping development and maintenance costs much lower than would be needed to maintain separate native and web applications.
Other features which are typical of a PWA are the ability to work offline with locally stored data until a data connection is available, access to device hardware such as camera and geolocation. Our blog post from earlier this year outlined in more detail the rise of the website PWA.
Verdict: The future of the the web and mobile app.
Top 5 Summary
These are the top five web trends that we’ve picked out from 2018, and maybe give some insight into what to look for in 2019. If we were running a top ten then just missing out on the charts were: Content Marketing, Responsive Design (yes, still), Reactive Design and Push Notifications. There’s another blog post in the making!