Published on <a href="https://blog.prototypr.io/nintendo-deep-dive-interaction-design-d00aaf6cd633?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Cam Sackett 
Nintendo Interaction Design|Part II
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*q_dvqbzajGm0LO4Eh9iVfw.png">
<h3>Overview</h3>
In the last Interaction Design case study, I set out to push the limits of Apple iBooks. For the next iteration, I wanted to push the limits of <a href="https://www.magplus.com/">Mag +</a>, an InDesign plugin for making digital publications. I wanted to try and do something that hasn’t been done before with a digital publication.
For me, innovation and creativity come from getting my hands in the dirt, hacking my design tools and trying to push the limits of those tools. That said, I strive to do this with a filter or lens — keeping in mind the design thinking process: Empathize, Define, Ideate, Prototype, and Test.
<blockquote>As Product Designers, we should remember that a design is never truly finished. The design process is cyclical.</blockquote>
<img alt="" src="https://cdn-images-1.medium.com/max/840/1*m6GDS_vwioCl5J7cq2AKTg.png">Design Thinking Process
My previous digital publication went through the history of Nintendo consoles and highlighted important games for each one. See my previous article: <a href="https://blog.prototypr.io/nintendo-ibook-c78b2aec1637">When is an Apple iBook not an iBook</a>.
<img alt="" src="https://cdn-images-1.medium.com/max/600/1*BTQQBt4bb9H21aEzyq4R2g.gif">NES Original Menu
The previous project implemented a unique way of navigating through a publication that was tailored to a specific audience: Nintendo fans and gamers. The reader would use something that mimicked a game controller to navigate through the pages rather than the conventional tap/swipe of typical digital publications.
<img alt="" src="https://cdn-images-1.medium.com/max/600/1*I0WNICSu45jaaz_e0CMwFQ.gif">NES Original Game Menu<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*z459mcUzKSyfetWRXj5IZg.png">
<h3>Part II — Redesign</h3>
For part II of the Nintendo digital publication, I wanted to improve upon the previous design—take a deep dive into one console, the Nintendo Entertainment System, and the influential games to which it gave prominence: Super Mario Bros., Metroid, and the Legend of Zelda.
I focused on 3 primary pain points:
<ul>
<li>Navigation</li>
<li>Content</li>
<li>Usability</li>
</ul>
<h4>Navigation</h4>
The first thing I redesigned was the controller. In the previous project, the controller enhanced the experience and added authenticity to the design (especially for those who are fans of Nintendo and video games in general).
However, it ended up being kind of a gimmick and not as meaningful as I would have liked. After user testing, I found that most people either ignored the controller completely and continued to tap or swipe, and even if they were familiar with gaming and controllers, they’d still sometimes resort back to tapping and swiping.
To combat this, not only did I improve wayfinding, I did these 3 things:
1. I changed the visuals of the controller from a flat design to a material design, the actual NES controller.
<img alt="" src="https://cdn-images-1.medium.com/max/558/1*R0d8l9hlvJ8BKbz05PtsGA.png">Nintendo Controller
2. I switched the publication from landscape to portrait.
<img alt="" src="https://cdn-images-1.medium.com/max/144/1*PTbGd5MsI5ZWj7SXIwE6eg.png">Landscape to Portrait
This felt more comfortable to grasp and to reach the controller buttons.
3. I only made the controller essential to navigating the main menu screen. Moving Mario with the controller makes the reader feel like they are playing a game. This makes the experience more interactive and immersive.
<img alt="" src="https://cdn-images-1.medium.com/max/900/1*RyM5whx4x3xLskV0XRBS8g.gif">Redesigned Publication Menu
Also, incorporating the recognizable visuals of game scenery on the stage and centering on mapping helped facilitate easy navigation (good mapping between controls and their effects results in greater ease of use).
Through user testing, the new controller setup proved more appropriate and purposeful for navigation. I found readers were not confused this time around (they used the controller and didn’t tap or swipe when they weren’t supposed to).
On all other pages, the publication would revert back to the standard touch gestures.
Lastly, I used two-dimensional layering in a linear fashion so that each section had a clear beginning, middle, and end.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bU3JUJ8aOIqgdLXVeI092g.png">Legend of Zelda
<h4>Content</h4>
The content received a major boost. Looking back, the first time around turned out to be more of a proof of concept for the controller and had minimal content.
Since I was able to prove the concept of navigating with the controller in the first project and perfect that design in the second, this allowed me to focus more on content this time around. For content, I sought internal consistency to cultivate trust.
<h4>Usability</h4>
I wanted to make sure that there was no confusion on when to use the controller and when to navigate a page by standard touch gestures. To accomplish this I had the main menu use the controller for navigation and for each game’s page, I used a long vertical scroll.
<img alt="" src="https://cdn-images-1.medium.com/max/144/1*xfM72yMP151_PRckuTMbTw.gif">Rotate Animation
Another pain point in the previous publication was having no real way to exit the publication — I fixed this in the second by using a rotate animation in the bottom right corner of the screen. When the reader rotates the iPad, they can tap on the sides to exit the publication.
<blockquote>Dynamic content is better than static content. Animations provide more than delight; animations are a powerful tool for effective interaction design.</blockquote>
Below is another good example of animation that helps guide the reader. The use of visible navigation and destination recognition help the reader return to the main menu.
<img alt="" src="https://cdn-images-1.medium.com/max/325/1*tf8ZDu7HeDyQq21uYi5b5Q.gif">How to go back to main menu<img alt="" src="https://cdn-images-1.medium.com/max/428/1*PrNr8Roo-UW5B4uR71Qs5w.png">
The navigation cues remained somewhat the same from the original publication using similar icons and emphasizing iconic representation (the use of pictorial images to improve the recognition and recall of signs and controls).
The icons represent the buttons on the controller allowing the reader to easily know which button to push.
I kept the audio the same as it was in the original publication which already demonstrated a good use of framing (eliciting positive or negative feelings about a design, and to influence behaviors and decision making).
<blockquote>You can hear the audio in action in the video below.</blockquote>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*z459mcUzKSyfetWRXj5IZg.png">
<h3>Preview</h3>
You can view the video below to see a run-through of what the publication is like. I went from the introduction to the main menu to the The Legend of Zelda section. (The digital publication was designed for an iPad). Enjoy!
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F70pfva6T25k%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D70pfva6T25k&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F70pfva6T25k%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="640" height="480" frameborder="0"><a href="https://medium.com/media/c51819cfa517161a2c26b14c4e47b935/href">https://medium.com/media/c51819cfa517161a2c26b14c4e47b935/href</a></iframe>
<h3>Conclusion</h3>
Overall, this iteration improved upon the first, significantly. The controller navigation is more meaningful and purposeful. The wayfinding made more sense for the reader. The redesign is more visually consistent and focused more on content. The second digital publication refined the accessibility and the overall usability was a cut above.
In my first publication, I wanted the reader to feel like they were playing a video game and at the same time feel like they were still reading a digital publication. I didn’t quite get there in the first publication. However, this time around, I think I accomplished that goal. The second publication enhanced the reader’s experience and turned into a truly immersive digital publication that any Nintendo fan will appreciate.
As Product Designers, we should always remember that the design process is cyclical. We’re never done—We should not only return to the prototyping and testing stage, we should circle back to the empathy stage and redefine the problem, repeating the complete design process.
<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=d00aaf6cd633" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/nintendo-deep-dive-interaction-design-d00aaf6cd633">Make Navigation a Game</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.

Make Navigation a Game

Overview

Top Stories