UI Design

Lars Erik Helgemo

3D and 2D design and illustration / Bergen, Norway

UI Design

Designing InkyPen

How do you design a comic reader for a video game console?

This was the question I had to ask myself in 2018, when I was asked to create the design for InkyPen, a comic book reader for Nintendo Switch. While my education is in design, all of my UI design knowledge came from practical experience making games. Because of that, it was comforting to have UI and UX veteran and InkyPen CEO, Ronan Huggard, to learn from.

InkyPen's goal has always been to create the best comic reading experience. This means that interacting with the software can be nothing less than stellar. Creating this experience has of course not been without its share of challenges. To name a few:

  • Designing for multiple methods of input and user status
    • Docked Switch, input through 2 or 1 joycon
    • Handheld Switch, smaller screen means text must be readable in both modes
    • Touch only
  • Create an intuitive workflow for the user from starting the app to reading comics
  • Teaching users how to use the app without being in the way

Through meticulus documentation of controls for every screen in the app and items selected, I was able to convey the intended design to the team's developers.

One of the harder parts to design was how to best use the two controllers. Have you ever read a comic with a gamepad before? Neither had any of us. Other readers could rely on touch input (mobile apps) or the use of keyboard and mouse, which create more or less obvious solutions to certain scenarios. One such scenario is to flip pages while zoomed in on a comic page.

This was a challenge because you want to be able to navigate the page while zoomed in, but also be able to flip pages without having to zoom out. At the same time, you want to be able to move quickly while zoomed in, but also precisely. What we came up with was two speeds for navigation and a "global" flip pages setup.

Taking a cue from First Person Shooter games, the left joystick became the basic input for "move". This would control page flips while zoomed out and general navigation throughout the app.

On the other hand there was the right joystick, which became the aim. This let you quickly move the "crosshair" to the whereabouts of your "target" or in our case: move to the part of the comic you're interested in. It also automatically zoomed in in the direction you moved the joystick, so that you could quickly move where you wanted. From there you could use the left joystick to move around with more precision. The idea being that the assosciation with FPS would subconsciously allow gamers understand how to use the controls. 

we coupled that with using the L/R shoulder buttons  to flip pages regardless if you were zoomed in or not. And even if people didn't discover the shoulder buttons, zooming out was always easily accessible.

© 2019 Lars Erik Helgemo, All rights reserved

Lars Erik Helgemo

3D and 2D designer and illustrator / Bergen, Norway