<p>Published on <a href="https://blog.prototypr.io/interaction-design-for-black-holes-415cd3ea2195?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Cam Sackett </p>
<p>What happens to a cat when it falls into a black hole?</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*oR1ycsF8CDIqH4MsPsRckg.gif">(This animation may not appear if you have slow internet). If the image does not display, you can see it here: <a href="https://youtu.be/Ueq_KGGkHrc">https://youtu.be/Ueq_KGGkHrc</a></p>
<h3>Introduction</h3>
<p>As an interaction designers, we are often thinking about how people connect with a product and how we can help them have a delightful experience. We set out to design a short digital publication that teaches people about the wonder of our universe — particularly, black holes.</p>
<h4>Goal</h4>
<p>For this case study, we wanted to accomplish 3 things:</p>
<p>1. Design an enjoyable experience as well as pushing some boundaries by doing some creative experimentation using animation, sound design, VR, AR, and other interactive elements.</p>
<p>2. Bridge the gap between the digital and physical—Design a creative integration of AR on print and how to encourage participation in both print and digital publications. The primary devices we chose to design for were iPads and other tablets.</p>
<p>3. Consider the usability of both print and electronic media when experienced as a whole. Moreover, I want to highlight some of the challenges and complications of combining media and how we overcame some of them through design iteration and user testing.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*H3NIg4D_3CCmZ0Cb99ViVw.jpeg"></p>
<h3>Design process for Black Holes</h3>
<p>We’ve never seen one, so finding content for this project was bound to artistic expression. That said, I tried my best to be accurate with the information about what we do know about black holes. This project was meant to be creative, fun, and educational.</p>
<p>Now let me break down the process for you.</p>
<h3>Ideation</h3>
<p>I started out with some sketches in order to get a sense of how the publication would flow and to brainstorm ideas for both digital and print media.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vZyduBIn_iXZei852WkkEg.png">Layout for Digital Publication</p>
<h4>Layout</h4>
<p>In the beginning the layout for the digital publication was to have a cover, intro media, table of contents and at least 4 pages where the background would be seamless. At first I wanted to include video and HTML objects. The list then grew to include animations, audio and VR.</p>
<p>I like the idea of pages being seamless yet I want the reader to somewhat feel like they are in outer space. In the end, the table of contents was discarded. Also, I went away from page swiping navigation entirely because I don’t want the reader to be “turning” pages, they should feel like they are being “pulled” into the publication as a black hole pulls in surrounding matter.</p>
<p>For the digital publication, I needed interactive content that could visually explain black holes and for the print, I needed something that was simply fun and interactive.</p>
<p>What happens if something fell into a black hole? How can I show this visually and how can I show this on paper in an interactive way? One day I was doodling a cat and I thought, wouldn’t it be interesting to throw a cat into a black hole? Sometimes, you just have to run with ideas.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/480/1*SeXzKt1F8bHGHbIHH8qOGA.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*E1MXQHAKGO_MyqvKiVth2A.png"></p>
<p>Throwing cats into black holes led to the question, what if the reader could fall into a black hole themselves? This led to the idea for the interactive experience on the print media side. With Alternate Reality, the reader could scan the print media, then look around outer space and be pulled into a black hole; the iPad or tablet would act as the viewing lens.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XShJRJdl_dt-4GG5EMyLWw.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*anvwpCwtdM-zfLpQYwvQ1w.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Urkm81uXY5k0FaYl0KCjfg.png">Some Sketch artboards for the Black Holes project</p>
<p>Now that the the print media and the digital publication’s flow (the reader being “pulled” in rather than “turning” pages) was established, I built a design system as well as wireframes and surface comps in Sketch.</p>
<p>After having gathered and created content, I set out to build a prototype.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*H3NIg4D_3CCmZ0Cb99ViVw.jpeg"></p>
<h3>Prototype</h3>
<h4>Digital publication</h4>
<p>Let’s talk about animation and sound design. These were some of the main components I wanted to explore for the digital publication.</p>
<p><strong>Animation</strong><br />Since the idea is to have the reader feel as though they are drifting in space and being “pulled” in, I chose a more exploratory and interactive way of navigating through content rather than setting it up like a traditional digital book, going from page to page by swiping.</p>
<p>The animation for the title screen with “Black Holes” etching its way into space as well as the thousands of particles moving in a circle was done with some javascript.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FIvvyGMNgKXc%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DIvvyGMNgKXc&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FIvvyGMNgKXc%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="640" height="480" frameborder="0"><a href="https://medium.com/media/e4d8fdd493bd4c74410ea9a3c5ba3ec0/href">https://medium.com/media/e4d8fdd493bd4c74410ea9a3c5ba3ec0/href</a></iframe></p>
<p>I designed a circular menu system that plays off that idea of being “pulled” in.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*mXzFLpwO3e-3P5d1ITh5Vg.gif">Navigation Menu Expand/Collapse Animation</p>
<p>When jumping from page to page, each button would glow to help the reader know which page they were on.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*EoeN8BdgC2H-hhVVhDkNUg.gif">Page Navigation Wayfinding Animation</p>
<p>Instead of swiping to move between sections, I designed range sliders that the reader could manipulate in order to navigate through sections. In this example, the reader starts with the birth of a star and can move through a star’s life to its eventual death descending into a black hole.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aPWqmhxQVfD-js76x-Vwpg.gif">Section Navigation Range Slider Animation</p>
<p>Screen transitions were designed to be fluid.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/684/1*AhNm8WOkPBFUJoCvZ4c1pQ.gif"><img alt="" src="https://cdn-images-1.medium.com/max/684/1*hXQdpQ4nBJgCapCpHwN3_A.gif">(These animations may not appear if you have slow internet). If these images do not display, you can see them here: <a href="https://youtu.be/3nI3bh7f1gM">https://youtu.be/3nI3bh7f1gM</a>)</p>
<p>At one point you can drag a floating astronaut-cat and drop it into a black hole.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qiiodmtxJH7hhGKLXPzilA.gif">Meow</p>
<p><strong>Sound design</strong><br />Sound design was supplementary but an important design component for this project. I love using sound for <strong>framing </strong>(eliciting positive or negative feelings about a design, and to influence behaviors and decision making).</p>
<blockquote><p>Sound design helps create a delightful experience. It also gives people feedback that they are on the right path.</p></blockquote>
<p>The beautiful intro music on the cover page is called <a href="https://hildurgudnadottir.bandcamp.com/track/baer"><em>Baer</em></a>, written and performed by icelandic cellist, <a href="https://www.hildurness.com/">Hildur Gudnadottir</a>. For the remainder of the publication, I wrote a piece called <a href="https://www.soundtrap.com/playlink/107f31cc-4eed-4b7f-9f6f-f1bf628b7bbb/"><em>Expanse</em></a> and used it as the background music. For me, both pieces capture that floating and expanding feeling as well as creating a underlying sense of being slowly “pulled” in.</p>
<p>After you’ve entered the black hole—entered the digital publication— you are floating in space with only one option, to expand (pun intended).</p>
<p>Each time you tap a button, it plays a note that matches the background music.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FeCnNTOBT8Ag%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DeCnNTOBT8Ag&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FeCnNTOBT8Ag%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="640" height="480" frameborder="0"><a href="https://medium.com/media/19ab7715d430be84971be189b0c2fa9a/href">https://medium.com/media/19ab7715d430be84971be189b0c2fa9a/href</a></iframe></p>
<h4>Print</h4>
<p>For the print, I considered doing a companion booklet but in the end determined that a companion poster would work better, especially for demonstrating AR and bridging the gap between the digital and print.</p>
<p>Since we have never seen a black hole and most images are represented by an artist’s expression, it was appropriate to have an “art” poster. I think a poster works better as a marketing tool; When the reader purchases the digital publication, they receive a free poster that they can hang on their wall. It is always present. The AR component pulls people in, leading to new interest from friends/visitors as well as extending longevity for owners as it encourages revisiting the digital publication.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*EK8-MTHKpgFGwf5VGwMQug.jpeg">GW170104 Spiral Orbit</p>
<p>For the poster, I chose <a href="http://auroresimonnet.com/">Aurore Simonnet’s</a> conception of two merging black holes similar to ones detected in the <em>GW170104 system </em>by LIGO (The Laser Interferometer Gravitational-Wave Observatory).</p>
<p>When a person’s scans the poster, they will be pushed into space and be able to see what it is like to fall into a black hole. I used an Augmented Reality tool called <a href="https://zap.works/">Zapworks</a>.</p>
<p>Zapworks allows you to design an AR experience and then place something called a Zapcode on the things you want to add your AR content to. In this case, a poster. Then you use the Zappar app to “unlock the magic and bring the [AR experience] to life.”</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*PMwq0LQd44ImDnUmE8zcXw.png">Zapworks guide from the Black Holes poster<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Dv-FUbmXEHcbBdsmP2VHDQ.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*0pI0fE0DWH6fSrKZ6Eo2Qg.png">Black Holes Poster<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*H3NIg4D_3CCmZ0Cb99ViVw.jpeg"></p>
<h3>Testing</h3>
<p>Before I did any user testing for the digital publication and poster, I did some personal testing to make sure the publication worked and to flush out any technical issues.</p>
<h4>Digital Publication</h4>
<p>I primarily tested navigation and usability.</p>
<p>Everything worked great in a browser. I then tried pushing the project through iBook Author but the software couldn’t handle the animations very well and would crash at screen transitions. I have had success with iBooks before but after a lot of tweaking and file compression, iBooks stilled proved to be an awful experience. I determined the VR, video backgrounds, and animations were just too much for iBooks.</p>
<p>I then sent it through <a href="https://www.magplus.com/">Mag+</a> which thankfully handled everything much better.</p>
<h4>Print</h4>
<p>I mainly tested scanning the Zapcode at varying distances and in different lighting. The furthest away I could scan was about 2 feet and 4 inches away. This was significantly impacted by the amount of direct light on the Zapcode. It was interesting in how much light played a factor.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F8iA5Ydnm4Rk&amp;src_secure=1&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D8iA5Ydnm4Rk&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F8iA5Ydnm4Rk%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/ada93e7fcf85a1aff4cc0652e90d1009/href">https://medium.com/media/ada93e7fcf85a1aff4cc0652e90d1009/href</a></iframe></p>
<p>(We did actually measure the distance with a ruler).</p>
<h3>User Testing</h3>
<p>I did user testing with 5 people for both the digital publication as well as the companion poster.</p>
<h4>Navigating through the Digital Publication</h4>
<ul>
<li><strong>Result:</strong> 4 out 5 people were able to navigate through the publication smoothly. The 1 person who didn’t navigate through smoothly was confused as what to do on the intro screen. One is supposed to tap on “Black Holes” in order to be pulled into the publication.<br /><strong>Change on next iteration:</strong> I set a timer to automatically enter the publication after 15 seconds.</li>
<li><strong>Result:</strong> 3 out 5 people had issues with the range slider not displaying text at the appropriate time on Page II.<br /><strong>Change on next iteration: </strong>I fixed some timing on the timeline as well as some code which solved the problem of text not displaying.</li>
<li><strong>Result: </strong>1 out 5 people had the publication crash upon first use.<br /><strong>Change on next iteration:</strong> I tried to recreate this several times but it never happened again, so I’m not quite sure what happened. I put it on a issues log and if it were to happen again in the future, I’d notate and try to recreate the crash again.</li>
</ul>
<h4>Scanning the Zapcode</h4>
<p>For user testing on print, I followed the same process I did with personal testing. I tested scanning the Zapcode at different distances. The overall results were the same as the personal test.</p>
<p>The Zapcode worked really well. The only main problem as mentioned before was lighting. We scanned it in the dark with a flashlight as the only light source and it worked fine. So light plays a big part in how effective the Zapcode scan is.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F0ETDhrPC6yg&amp;src_secure=1&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D0ETDhrPC6yg&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F0ETDhrPC6yg%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="1280" height="720" frameborder="0"><a href="https://medium.com/media/6481e645146982fafd0bd8b6d6841280/href">https://medium.com/media/6481e645146982fafd0bd8b6d6841280/href</a></iframe></p>
<p>One of the most important and insightful phases of the design process is user testing. If we don’t do this, our designer bias kicks in or we may deliver a product based off of assumptions.</p>
<blockquote><p>When we test our assumptions about the people interacting with our products, sometimes we are “punched in the gut.” As designers, we should never release a product without doing some testing.</p></blockquote>
<h3>Conclusion</h3>
<p>This project required a lot of iterations as well as testing. It was a very involved project that included many different facets: animation, VR, video, images, sound and audio, print, and AR technologies. It taught me how to design for systems better, to consider the usability of both print and electronic media and how that is experienced as a whole. I was able to overcome the challenges and complications of combining media and pull it together into a cohesive experience.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=415cd3ea2195" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/interaction-design-for-black-holes-415cd3ea2195">Interaction Design for Black Holes</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Interaction Design for Black Holes

Top Stories