Latest news about Bitcoin and all cryptocurrencies. Your daily crypto news habit.
This article is a five-part series on creating interactive infographics with plain Javascript.
Previously we designed a two-way map locator to enhance user-navigation. In this article, weâll continue to base our UI example on Google Cloud Platform (GCP) products to present content that has a sophisticated architecture.
Watch how we can make product information easy to use.
https://pageii.com/static/node_infographpart4_02_pageii.mp4
Objective
Letâs design a UI to present multifaceted content.
Introduction
There is an advantage in organising information as a hierarchy. You can categorise and step through topics to reveal meaningful relationships.
For example, on a knowledge portal, a zoologist may be interested in a topic concerning Jack Russells. Sheâs going along a specific information path:
Animals > Mammals > Carnivore > Canis > Dogs > Jack Russells
Suppose sheâs also studying on Huskies, Hyenas, and Foxes. What is a good way to represent connected information vis-a-vis Jack Russells? How to provide contextual information without overwhelming the user with a data dump?
One approach is to break up data into small segments and reconnect them across multiple standalone pages. With every page load, users jump through new categories and webpages to find more details. However, it becomes harder to highlight contexture relationships. Too many page loads may also disorientate or frustrate users. The result is degraded user experience.
Thereâs got to be a better way to guide users towards their goals. One part of that equation is solved in our previous discussion. We can put an entire map, or animal kingdom, onto a canvas and still navigate gainfully.
Weâre now left with the âJack Russellâ problemâââthe design challenge of getting the UI to display detailed content one level down without affecting information flow.
Concept
Think of extending each nodeâs information pathway as adding an HTML container. Like using post-it notes, we can âpasteâ these containers onto a browser window to reveal layered information. No page load is required. Weâve basically described an inline UI.
Now comes the exciting part. When a visitor âhopâ from one node to another, these containers swaps in and out to show updated content. Weâll show users whatâs going on by animating the UI.
Animated revealers for layered content
Users can now access detailed content without losing the big picture. Best yet, they are always on top of a consistent and persistent UI.
Tips: If you are writing a Single-Page-Application (SPA) such as React or Angular, create the best user experience by hydrating the routes dynamically. For example, when a user clicks on a backlink that takes her directly to the route animalchart.com/jack-russells, the SPA should pull the relevant data, auto-focus on the node, and fire off the animation without having the user to do anything.
Getting started
Implementation is straightforward.
- The post-it note mechanism is merely a div container that is created or destroyed at runtime.
- Animation is plain CSS with easing effects.
- Data store reuses the legend[] array (from part-one discussion).
Step 1: Prep the canvas
Add a click listener to the main while loop (part-one discussion).
while (item[i]) { ... itemElementName[i].addEventListener("click", showLayeredContent)}
- Add a click listener to each node.
- click will trigger a custom function showLayeredContent.
showLayeredContent runs instructions to:
- Retrieve data from legend[].
- Create a div container for displaying content.
- âpaste/stickâ the container onto the browser window or canvas.
- Stage the containerâs initial position âbelowâ the viewport so that itâll be ready to âslide upâ once activated.
function showLayeredContent(event) { var div = document.createElement('div'); div.id = "some HTML" + deepContent; // add your CSS // add your animation
// attach the new container to the DOM document.body.appendChild(div); // ... add animation to show what's going on anotherLayeredElement(this.id); // ... more "post-it notes", if any
}
- document.createElement(âdivâ) creates the âpost-it noteâ container dynamically.
- div.id = âsome HTMLâ + âdeepContentâ populates the container.
- deepContent contains the actual content. Use this.id as the index key to retrieve records from the legend[] datastore.
- document.body.appendChild(div) appends the container to the DOM for rendering. document.body is generic. Use canvas or your own container element.
- anotherLayeredElement(this.id) adds more containers. In our demo video, we used a total of 3 âstickyâ containers.
Tip 1: Dynamically generate the container element and its CSS so that we can quickly adapt the engine to other projects.
Tip 2: Remember to remove the old containers before swapping in new ones.
Step 2: Guide user actions with animation
Position the first âstickyâ container to the right as a full height element. Itâs entrance is animated in a bottom-to-up motion.
var sticky01 = document.getElementById( myContainerID );
// Stage the container's pre-animation positionsticky01.style.bottom = "-100vh";sticky01.style.right = "0%";
// Attach CSS class to the RHS container.sticky01.classList.add("myCssClass");
// Once your container is ready, animate its entrance.sticky01.style.transform = "translateY(0px)";...
- sticky01 references the first container
Tip: Change translateY to translate3d to take advantage of hardware acceleration for improved performance.
layeredContainerRHS { position: fixed; overflow-y: scroll; top: 0; right: 0; width: 50vw; height: 100vh; zIndex: 9; transition: all 200ms cubic-bezier(0.165, 0.84, 0.44, 1);}
- position: fixed âsticksâ the container onto the canvas UI.
- overflow-y: scroll makes it possible to display unlimited content via vertical scrolling.
- top: 0 sets the pre-entrance position of the container âbelowâ the canvas.
- right: 0, width: 50vw and height: 100vh styles the container to occupy the right side of the browser window.
- zIndex: 9 assigns the layering order.
- transition creates the animation effect. cubic-bezier produces a silky smooth motion.
Step 3: Add multiple âstickyâ containersOpening and closing âstickyâ containers
So far weâve created a full-height âstickyâ container to display detailed information. Meanwhile, users can still browse other topics.
If you wish to tier information into more layers, simply add more containers. In our demo video, weâve added two smaller containers to show summary information:
- An âmiddleâ container for a summary text and feature images.
- A âleftâ container to highlight relevant information, references, or links to external resources. In our example, we used it to reveal a flowchart.
function middleSticky(ID) { ... // "middle" sticky container (#02) div.style.left = "25vw"; div.style.height = "44vh"; div.style.width = "30vw"; div.style.background = "#000"; ... middleSticky.style.transform = âtranslateY(0vh)â; ...}
function leftSticky(ID) { ... // "left-most" sticky container (#03) div.style.left = "0vw"; div.style.height = "21vh"; div.style.width = "25vw"; div.style.background = "#e68717"; ... leftMostSticky.style.transform = âtranslateY(0vh)â; ... }
- translateY(0vh) initiates the starting animation positions:
- Differentiate each container with CSS.
Step 4: Clean up
Once the zoologist is done with any topics, the UI closes the sticky containers to maximise the main navigation UI. In reverse order, âSlide downâ the sticky containers and remove it from the DOM behind the scene.
function closeStickyWindows(id){ div.style.transform= "translateY(0vh)"; setTimeout(() => { div.parentNode.removeChild(div); }, 500);}
- 500 e.g. (last animation starting at 300ms) + (200ms to complete the animation).
- div.parentNode.removeChild(div) removes the DOM element (i.e. garbage collection). Use .remove() if ES6 backward compatibility is not an issue.
Next Steps
Users can browse content in a more granular manner.
In the final part of the series, weâll talk about ideas that gives UIs a human touch.
Links to other parts
Part-one sets the foundation for designing interactive infographics.
Part-two adds navigation features to browse content.
Part-three adds a dynamic mini-map to enhance navigation.
Part-four â Youâre are here.
Part-five demonstrates why it is so easy to create UIs with a human touch.
If you enjoyed this story, you can find more at Pageii Studio.
How to create a progressive UI to enhance presentation was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.
Disclaimer
The views and opinions expressed in this article are solely those of the authors and do not reflect the views of Bitcoin Insider. Every investment and trading move involves risk - this is especially true for cryptocurrencies given their volatility. We strongly advise our readers to conduct their own research when making a decision.