Interaction Storyboards

An interaction storyboard is a sequence of user interface mockups (sketches, wireframes, etc.) that show the steps in a task as a user interacts with a website or app.

An interaction storyboard allows the design team to design, test, and revise a website or app before coding it. The designers can try different variations for the screen layouts and quickly make revisions based on feedback from other designers, test users, etc.

Early in the design process, designers typically create screen mockups that are low-fidelity sketches or wireframes that just show the basic layout of the user interface – but with limited details and without color. People reviewing low-fidelity mockups tend to provide feedback that focuses more on general features (because people assume the design is still rough), such as:

  • whether the screen layout makes sense to the user

  • whether the user understands the necessary steps to complete tasks

  • etc.

Because it is faster and easier to create low-fidelity mockups, designers can test multiple variations and make revisions until they have sufficient evidence that the general screen layout and task flow makes sense.

Early in the design process, the task(s) that you select for your interaction storyboard(s) should be primary tasks that are central to the purpose of your product. Do NOT select secondary tasks such as: creating an account, logging into the app, adjusting profile settings, etc. Secondary tasks should only be storyboarded after you have already designed and tested the primary tasks.

As the design process proceeds further, designers typically create screen mockups that are more high-fidelity by adding color and details to make the screen look closer to a final version. People reviewing high-fidelity mockups tend to provide feedback that focuses more on details (because people assume the design is closer to final), such as:

  • whether the user finds the fonts, colors, etc. visually appealing

  • whether the user finds the text, images, etc. engaging

  • etc.

However, if your screen layout and task flow don't make sense, it will likely still be apparent even if your screen mockups are high-fidelity – because people will NOT understand how to interact with the website or app.

Last updated