Player - previewing your prototype

Viewing in a web browser - Proto.io Player

The Proto.io Player is accessible from the 'Preview' button on the top right of the Editor. It opens a new tab in which you preview your project to experience how it looks and feels. You can try out your interactions and animations by using your mouse. You also have the option to navigate between the various screens, using the list or thumbnail view of the screen browser on the right.

The vertical toolbar provides tools related to the Player: show/hide sidebar, zoom, refresh preview (reload project), change device orientation, show/hide interaction hotspots, show/hide click effect, change device skin color and enter fullscreen. The show interaction hotspots feature, which can also be activated by pressing the SHIFT key, highlights the interactive areas on the screen and indicates what type of trigger event has been applied to them.

The various icons shown, depending on the trigger event are seen in the table below.

Tap, click, delayed tap
Tap hold, force touch, press, press up
Touch, release
Swipe, pan, pan start, pan end
Swipe left, pan left
Swipe right, pan right
Swipe up, pan up
Swipe down, pan down
Pinch, pinch out, pinch in
Container page enter, container page change, container scroll, container scroll end, container scroll to
Keydown
Mouse over, mouse out
On drag, on drag start, on drag end, on throw update, on throw complete
On rotate, on rotate start, on rotate end, on rotate throw update, on rotate throw complete
On state enter, on state leave, on state transition start, on state transition end
On input focus, on input blur, on input key up
On change, on checkbox change, on picker change
On slider drag, on slider drag start, on slider drag end, on range drag, on range drag start, on range drag end

 

Just below the screen browser you have 4 options: a toggle for Editors’ comments, Send to mobile, Share (see Sharing your project) and Export to PDF/PNG.

The Editors’ comments toggle button enables and disables the comments and annotations feature among the users who have edit rights (see Setting up Users). Comments and annotations facilitate the communication and collaboration between team members.

Send to mobile is a quick way to send a link to your phone (via SMS) for previewing your prototype. You will be prompted to open it in the Proto.io app.

You can also watch the relevant video tutorial.

 

Viewing on a mobile device (Proto.io app)

One of the many advantages of Proto.io is that it allows you to run and test your prototype on the actual mobile device to experience its look and feel.  

The Proto.io Player App is available for iOS and Android devices.

You can download it here:

For iOS

App Store: https://itunes.apple.com/us/app/proto.io-player/id854504039

For Android

Google Play: https://play.google.com/store/apps/details?id=io.proto.player

 

Key features of the Player App include:

  • Login with your Proto.io account credentials and access all your projects (also switch between accounts).
  • Use the app without the need to login to preview projects shared using Share links.
  • Preview your projects in full screen without any obstructions.
  • Interact with your projects using all supported touch gestures: Pinch, swipe, tap, tap & hold and more.
  • Preview any Proto.io prototype on any device/screen size regardless of the device /screen size it was designed for.
  • Confidently preview your Proto.io prototypes, even when your connection is unreliable or non-existent. This requires having previewed these projects while being online, which results in them being downloaded on your device.
  • Record a user session (interaction, face, audio) for user testing purposes, powered by Lookback (requires a Lookback account). Currently available in the Proto.io app for iOS.

Also see The Proto.io app.



Have more questions? Submit a request
Powered by Zendesk