ALEX CLAYTON

Proto.io Exploration

Alex Clayton's redesign work of Proto.io.

 
 

+

TIME

FEBRUARY 2016

 
 
Proto.io
 
 

+

INTRODUCTION

I've spent a lot of time using Proto.io to create interactive prototypes for demonstration and usability testing. It's one of my favorite tools for rapid and extensive prototyping; however, there are some things that I would change to improve it. 

Below are some examples in wireframe fidelity to highlight those changes. I've tried to maintain Proto.io's general interaction and layout style within the solutions. To create these examples, I used Sketch and Principle.

Note: Proto.io released a major site redesign as I was creating these examples which prevented me from adding more to this project.

 
 



 
 
 

+

Deleting Screens

 
 

In Proto.io, when containers are being deleted, a popup notifies the user when it's not being used anywhere. It's a really nice touch to know that it's probably not needed and can safely be deleted. Taking this same style and applying it to screens, it would be helpful to know if there are any interactions directed at those screens and where to find them.

 
 
Proto.io Delete Screens
 
 

When the screen gets deleted, the interaction area no longer links to anything. In some instances, it's okay to leave it that way. In many instances from my experience, that interaction area now needs to link to something else. When prototypes become large, it becomes difficult to remember and manage all of them.

In the example above, I've added the lightning bolt icon that's currently being used in Proto.io on the screen line to indicate if there are any interactions directed at that screen. When Screen 2 is deleted, it notifies the user that the screen has no interactions directed at it. When Screen 1 is deleted, it shows that Screen 3 and Screen 4 have interaction areas directed at Screen 1. 

 
 



 
 
 

+

Interaction Areas

Interaction areas currently don't have any content on them to quickly see where the it's linking to. Knowing what the interactions are requires tapping the area to open the editing menu. The menu lists the interactions and shows what the trigger (tap, swipe, etc.) is but no other information without tapping the edit button and reading through all of the details.

 
 
Proto.io Interaction Areas
 
 

In the example above, I made a simple menu list with items called "Home", "About", and "Contact". The menu item "About" shows the two interactions for that area ("Tap > Go to Screen > Screen 2" and "Swipe Up > Hide Item > Progress Bar") to quickly see interaction details. Additionally, when the editing menu appears, the same information shows under the title (i.e., "Interaction 1").

In cases where the interaction areas are small, this amount of text wouldn't be an ideal solution. One solution for these scenarios be just having an icon in the corner that could be tapped to open the editing menu and quickly see the interactions.