Digital Pieces Want a Compliment
Creating an interactive print piece to compliment a interactive digital piece: how to and why?
As an interaction designer, I mainly work with digital products; Apps, websites, digital magazines, iBooks. I never get to work with print items, and why would I? You can’t make print interactive, right? Wrong. Technology is exploding everywhere and I will admit it gets hard to keep up and predict what is going to be a trend and what is going to be the next big thing. Augmented Reality (AR) is turning out to be the next big thing. This is because it pairs digital products, like apps on our phones, with print materials we use every day. Imagine scanning a business card with your phone and automatically be taken to their website, or programming their contact information into your phone. Imagine being in school and reading through a history book, then scanning an image with your phone and being taken to a video of the event you were reading about. The possibilities are endless and endlessly cool.
Now back to my original question, why should digital products need a companion print book to go along with them? Multiple channels, and multiple sources to keep people’s attention, and multiple ways to display information. By adding a print booklet to go with a digital book, you are allowing the user to have two different mediums to interact with and two different ways to enhance their experience. Now that we can make print items interactive, we have opened up a huge realm to create new user experiences in.
This is immersive authoring taken to the next level.
I was tasked with creating an iBook on any NASA subject I wanted to delve into. I chose life in space (no I’m not some alien freak, I mean what life is like for astronauts in space.) In companion with this project, I was also to create a printed booklet that had information about a specific subject dealing with life in space. Something that had additional information, but did not repeat the same information that the iBook did. They were supposed to be companion items that would allow the user to experience both mediums and learn about the same subject and items dealing with that subject. For my companion booklet I chose to create a timeline of the history of space travel. If you’re going to be learning about what astronauts do up there, might as well learn about how they got up there in the first place and whats been going on.
DESIGNING THE PIECES
I started out with sketching each piece, I was very excited to get started and added a lot of detail to the sketches because I had a good vision of what I wanted. The iBook was going to have a seamless background, with each page being dedicated to a different piece of what a typical day in space looked like. If this were a fully fleshed out digital book, this would only be the first chapter. I had originally planned to make each page a different item about life in space; history of space travel, a day in the life, the longest time spent in space, a deep dive into a space suit. But this ended up not being able to mesh together from page to page because they were such different subjects, and there was no room to fully explain everything I wanted to about each subject. In the end I decided these would be better as different chapters, and I could make each chapter have 4-5 pages that detailed the information I wanted to include. Like I said, if this were a fully fleshed out book, all the chapters would be completed, but for this 3 month project, one chapter will do. As for the booklet, I took the ideas I had for the chapter about the history of space travel and transformed it to fit what I wanted the booklet to be.
The actual design and style for the pieces was harder than the layout and structure by far. I spent a long time looking at pinterest, and designing layouts that I just wasn’t happy with. I wanted a style that was fun and colorful, but still looked professional. After finally messing around with some pieces and colors the flow hit me. I grabbed space graphics, layered color gradients over a starry background and decided on Bebas Nue as my space theme font. Sometimes things just flow and I was surprised when I looked up after designing half my book and it was 1AM.
Once the booklet was completely laid out, and I was hyped about how good it looked I had a renewed passion for designing the iBook which I had originally hit a wall with. Because they are companion items I wanted them to have the same design elements, and be laid out in a similar way. That way, even though the content is not presented in the same way, they would still look the same and feel the same.
INTERACTIVITY & TECHNICAL BRIEF
Okay now we can get to the cool part. As for the iBook, it has scrolling text, pop-up widgets, and videos. Nothing too spectacular, but just enough to spice it up from a regular digital publication. The booklet is where we get to step it up a notch. Using Zapcodes I was able to create scannable items within my booklet that would unlock hidden content about some of the major events in space travel history.
I used the new Zapworks software to create items that would pop-up photos, image galleries, link you to videos, and even play sounds. I had a lot more ideas for this software, but some of it I just could not learn and implement in the timeframe that was given to me. I had dreamed up a 3D space rocket, that would pop up in place of the rocket graphic that was already on the time line. I also wanted to add in a virtual reality 360 photo of a space station that users could spin around and walk through. Unfortunately, I don’t think a 360 tour of a space station even exists, and I was unable to get any virtual reality experience to work in the software. But if it had worked, after scanning the code it would zoom you into the 360 space station and allow you to take a tour of the station. The last big ticket item I wanted to include was a space helmet filter, like the filters they have on Snapchat. It was scan the users face and apply a space suit helmet around their heads. They would be able to take a screenshot of themselves and have a photo to save. Unfortunately, I don’t think this software is able to create this experience yet, I even looked on snapchats website, and they don’t even have a space filter (I’m calling Elon Musk on them.)
Now let’s move away from the can‘ts and dive into the look what I can do’s. I was able to use the Zapworks website developer (aka Zapworks Designer tool) to do all of the AR I used, taking a step away from the studio. I thought it was quite easy to use, and allowed for some decent basic interactive elements. Videos, photos, galleries, sound effects, etc. You could even created multiple scenes and transition between them.
I created some pngs of the moon and some of the planets that I layered over the graphic version I had in the booklet that made them pop out and look 3D. I also included a few YouTube videos and photo galleries. I even created one that had two scenes and transitioned from a pop up of Jupiter to a gallery of the photos taken by the Voyager 1 of Jupiter’s atmosphere and the moon Io.
Here is what the designer tool looks like:
Once you have created the Zapcodes and placed them into your project you can test them with your phone on your laptop screen, just to make sure they actually work. I was very impressed by how easy it was.
USER TESTING AND EXPERIENCE
The audience for my project was supposed to be younger people, aged 12–35. People who would be willing to download an app and use it in this booklet and people who might get a thrill to experience some cutting-edge technology. I would image this booklet could be used in schools or at museums as a way to teach people about space in a uniquely fun way.
Some of the main quantitative testings I wanted to accomplish was how many people would even pull out their phones and take the time to download the app. Then how many would scan each Zapcode and experience the AR. I also wanted to see if my instructions were thorough enough on what app to download, and what to do with it.
Some of the qualitative testings I wanted to accomplish was how the AR changed people’s experiences, and what they thought of it. I also wanted to see how they felt about having a two items (iBook and Booklet) to look through and learn from. Which one did they like better and why? If they would like to use Zapworks and AR more in the future, and where they would like to see it implemented.
Here are my results:
Quantitative:
2/5 people were willing to download the Zappar app to scan the codes on the booklet
0/5 people were able to understand how to work the Zappar app when they downloaded it or I gave them my phone without instruction
4/5 people were able to scan the codes and fully interact with the booklet once shown how to work the app
2/5 people scrolled through the text in the iBook without prompting
5/5 people were able to watch the videos and work through the iBook
Qualitative:
5/5 people thought that having a print item to go along with a digital product improved their experience.
5/5 people thought the AR was cool in the booklet
5/5 people liked the content heavy information provided in the iBook, and the additional shorter/more visual content provided in the booklet
“I liked reading through all the articles in the iBook and watching the videos that went along with them. The booklet was cool because it was a physical thing I could flip through and feel and touch but still interact with digitally. I also liked the difference in content; how the iBook had a lot to read and watch, and the booklet had a lot to look at.“
FINAL THOUGHTS AND EXPERIENCES
From my testing I found a few kinks in the system that made it very hard for people to understand how to work the booklet and iBook. The top most things being that they had to actually download an app specifically to use the booklet. I think this problem might not be as much of a problem if this were in a school setting and the kids already had the app downloaded on school phones. But it is a hard task to get people to download an app for just one thing. I wish that people could just use their phone camera to scan the codes, just like QR codes, I think more people would be willing to interact with the booklet if they didn’t have to first download an app. The next thing that got people confused was not providing any instructions on how to use the app in the booklet, which I did not think about when I was putting in the instructions. If I were to do it again I would be more thorough in the instructions. The last thing that I saw as an issue was the scrolling text in the iBook, I should have put an indicator to show you can scroll instead of assuming people would understand that they could keep going because the content ended on a point that didn’t make sense to stop.
Let’s go back to my original statement, why do digital products need a print companion? According to my testing results, people enjoy having two mediums to work through and gather information from. Having a print piece can be refreshing when everything we see is digital, especially when the print piece implements interactive items. I think that creating multiple pathways for users to experience the same content is a step towards a well rounded future.
As for AR, I think that it will keep evolving and working its way into our everyday lives. I think as designers we should try to embrace these new technologies as much as possible and utilize them to create amazing experiences.
This project opened up a whole new world to me in terms of augmented reality, and introducing print pieces that work alongside digital pieces. I plan to work with these technologies in the future and create truly amazing experiences with them, because the possibilities are endless.
