The Joy and Struggles of Creating Interactive Infographics
This year I had the opportunity to learn Hype, a powerful program for creating interactive animations. While Hype is a well-designed program that is intuitive to learn, creating interactive infographics presents some unique challenges. Throughout the process I had a lot of fun and I really pushed my technical abilities developing the infographic. The challenges I faced also allowed me to utilize my problem-solving skills.
Click the box above to view the Air Hockey infographic. Enjoy!
The Premise
I was tasked with creating a three part cohesive experience with Hype. I decided to have my experience be related to Air Hockey tables. For the second part of this cohesive experience, I created an interactive infographic about Air Hockey tables. The following details the process behind creating this part of the experience.
Developing Project Scope
The first step in my design process for the Air Hockey table infographic was for me to get an idea for the scope of the project.
I did a little research Online to figure out the main components of an Air Hockey table. I made a list of components on the exterior of an Air Hockey table and a list of the components of the interior. From this list I had a better idea of the assets I would need to make for the project.
Determining Project Scenes
Once I had a general idea of the scope of the project, the next step was to figure out how many scenes I wanted to create. Hype uses scenes to display the content. Initially I drew up plans for four different scenes, but due to time constraints I limited my project to just the exterior scene and the interior scene. I also had two scenes that were used as transitional scenes which will be explained later.
Understanding Scene Navigation
Initially, when I had four scenes, I created a chart that presented the navigation between scenes. My final navigation was much simpler because it only involved navigating between the interior scene and the exterior scene using the two transitional scenes to navigate between them.
Exterior Scene
The starting scene for my Hype project is the exterior scene. In this scene the view is of the outside of an Air Hockey table. There are four elements that can be interacted with. They are the paddles, the puck, the railings, and the table surface.
Whenever the viewer hovers the mouse over any one of these elements, the element highlights, indicating that it is able to be clicked. When the viewer clicks on the element, a text box appears with information about that element.
When the viewer clicks on the down arrow, the top of the table slides vertically out of view and the scene changes to the interior scene.
Transition Scenes
In order for the viewer to be able to move from the Exterior Scene to the Interior Scene and vice-versus, there needed to be two transitional scenes. One transitional scene had the outer parts of the Air Hockey table above the viewport and it slid into place over the interior components.
The other transition scene was the opposite setup. When the viewer clicked on the arrow to change scenes, the arrow also rotated so that there would be a prompt for the viewer to return to the previous scene after the transition was complete.
Interior Scene
The interior scene is similar in functionality to the exterior scene. The elements that are click-able are the blower and the baskets. When the viewer clicks on the up arrow, the top of the table slides back onto the base of the table and the viewer goes back to the exterior scene.
Creating The Assets
I made the Air Hockey table and all of the other assets in Adobe Illustrator in an isometric perspective. I spent some time going over tutorials on how to make isometric art and after practicing for a while I was ready to build my Air Hockey table. Isometric perspective uses a grid with lines running across the page at both 30° and 150° as shown below.
I made three versions of the Air Hockey table. One of the interior, another of the top, and a third of both parts together.
In order to be able to highlight different elements of the Air Hockey table I had to create two versions of each element. I created a default image of the element and a second highlighted view of the element.
This was so that I could make use of the mouse events in Hype. There is a mouse event called OnHover that I used to enable highlighting.
I placed the highlighted image below the default image of each element. That way, when a viewer mouses over the element, the default image’s opacity changes from 100% to 0% allowing the highlighted image to be seen.
The second aspect of these images is that most of the images are rotated from their normal orientation. This is due to a problem I discovered that was caused by the fact that all images are rectangles.
When I created the table surface this became problematic because the area that the image took up was much larger than the actual surface because of the isometric orientation. The surface would highlight even if the viewer’s mouse cursor was not over the actual surface in the infographic. By rotating and cropping the images I was able to greatly reduce the extra image area, allowing for a more accurate user control.
Putting It All Into Hype
The last part of the process was putting it all together in Hype. I placed the different elements in each of the four scenes. Once I had figured out how to give the appearance of highlighting each element, putting everything together in Hype was pretty straightforward.
Hype utilizes multiple timelines to allow you to make many interactions. I made an individual timeline for every element that was to be highlighted and I made a timeline for each element when it was clicked. When an element is clicked the information about it appears .
I did encounter an issue with one block of text from one element overlapping another block of text from another element. I resolved this by making a timeline that made all of the info disappear and played that timeline before playing the timeline that brought the info into view. This worked out well.
Concluding Thoughts
This project presented several challenges that I needed to overcome in order to be successful. Of all the Digital Media projects I have completed so far, this project was one of the most technically demanding. The challenges I faced creating this infographic really forced me to use my problem-solving skills.
The first hurdle was being able to represent a 3D Air Hockey table in a 2D space. I had a lot of fun exploring isometrics and it is something I want to continue to practice. I think it is a useful skill and I would like to improve at it.
The second obstacle I ran into was being able to highlight individual elements. It took a little bit of thinking to figure out a way to do it but I feel like I came up with a solid solution.
I ran into an unexpected problem when I realized that the large empty space around the content-area of each element blocked other elements from being able to be clicked on. At first I thought that there wasn’t a way to get around this problem but then I came up with the solution of rotating and cropping the images and the problem was solved.
The final problem I ran into was with conflicting timelines. When the viewer clicks on one element, the text box with the information for that element would come into the view port. The problem was that if you click on a second element the text box for the new element would overlap the first text.
I needed to be able to make the text be able to disappear for any element once I clicked on another element. My solution to this was to create a timeline that set every text element in the scene to be invisible.
Hype allows you to do a lot with the program but it can be tricky to get everything to work the way you’d like. These four main problems I ran into helped me develop my creative problem-solving skills more. I am really happy with the final result.
Russell Andlauer is a Digital Product Designer at DevSimplified and a UX Freelancer. He is also finishing up his Bachelor of Science degree at Utah Valley University in Interaction & Design. This article relates to the Digital Effects course and is representative of the skills learned.
