Interaction Map

Visually map your prototype’s UX flow

feature image

One of the most iconic and important Infra A deliverables by a designer is the The UX sitemap or Interaction map: a UX-flow diagram of the website or app’s pages organized hierarchically. But, the challenge is the pain one has to take in manually creating a screen transition diagram or walking the engineering and QA teams through the UX flow. It involves the challenges of devoting extra time to it, integrating with a third party tool and additional efforts.

At CanvasFlip, our aim is to help you at every such speed bump to accelerate your design sprint. This time it’s the interaction map!!

With the interaction map in action, your screen transition diagrams are automatically generated, and customizable, for any prototypes within CanvasFlip!

feature image ( Interaction Map )

Here is how to get your interaction map -

  1. Open the prototype in CanvasFlip studio

  2. Click on the Sitemap icon (device_hub ) on the menu bar (top-left) in “Build mode” OR on the action menu (top-right) in the “Preview mode”

  3. Wooo!! The complete UX Flow is right in front of you!

Clear view of connection-

Huh! We know what’s running in your mind! The complete map looks quite complex. Isn’t it? To make the map simple and readable, just hover on the connection - All the other connections becomes dim highlighting the connection you are interested in.

feature image ( Interaction Map - Zoom In)

How to do it?

Huh! We know what’s running in your mind! The complete map looks quite complex. Isn’t it? To make the map simple and readable, just hover on the connection - All the other connections becomes dim highlighting the connection you are interested in.

Customise your flow

Designers never work on the entire project at once. We go step by step, flow by flow. So, if you want to visualise a particular flow, for eg, the onboarding flow or the searching flow, you can customise it for yourself! This makes analysing and working on a specific flow a breeze..

feature image ( Customize Flow )

How to do it?

  1. Click on “Customize Map” option on the top right menu bar on the interaction map.

  2. Click on the screen you want to start off with.

  3. Select the hotspot and start customizing your interaction map (UX map)

PLUS, there are other useful actions you can perform on the interaction map -

  1. Zoom in and zoom out to see connections and screens.

  2. Export the complete interaction map (UX map) as an image (.png) or a PDF. We know you want to share it across the team!

Need help with Interaction map? Drop a mail to support@canvasflip.com

Hope you loved this feature - Interaction map! Are we missing your favourite feature in the toolkit? Let us know.

Try unlimited prototyping & user testing FREE for 14 days

* Enter a valid email.

* Email is required.

* The E-mail you entered is incorrect.

* Password is required

* Password is too short

* Password is too long

* Your password is incorrect.

 

By clicking "Get Started" I agree to CanvasFlip's Terms of Use