# 1.8 Interaction Storyboard

{% tabs %}
{% tab title="✓ TASK" %}
Create an [interaction storyboard](https://docs.idew.org/principles-and-practices/practices/design-practices/interaction-storyboards) with a sequence of 3-6 sketched screen mockups to show how a user would interact with your smart device’s web app to perform a task. Be sure to select a primary task that is central to the purpose of your product.

{% hint style="info" %}
**REMINDER:** As you decide what tasks your web app could perform, keep in mind the ways your web app can interact with your Photon device through [Particle Cloud](https://docs.idew.org/code-internet-of-things/references/particle-cloud):

1. A web app can **get the value of a Photon device variable**
2. A web app can **call a custom function on a Photon device**
3. A web app can **get event notifications from a Photon device**
   {% endhint %}

[Sketch Templates for Phone, Tablet, and Desktop](https://drive.google.com/open?id=1Xq2I690nLybxSX_k1b0SKzcH40PCmbY3)

### **❏ Deliverable**

Submit an image (photo, scan, etc.) of your team's interaction storyboard.
{% endtab %}

{% tab title="➤ EXAMPLE" %}
![Interaction Storyboard for Task using Smart Light Web App](https://content.gitbook.com/content/goqWCUMzVNRBT8UQLHnY/blobs/wagnOvr6jjNwTAtjwyZn/iot-ui-storyboard-example.png)

![Interaction Storyboard for Task using Smart Thermostat Web App](https://content.gitbook.com/content/goqWCUMzVNRBT8UQLHnY/blobs/qI7MzvTwrbtzzWmXqxwF/thermostat-ui-storyboard.jpg)

<br>
{% endtab %}

{% tab title="★ RUBRIC" %}

| **✓- Below Standard**                                                                        | **✓ Meets Standard**                                                                                                  | **✓+ Exceeds Standard**                                                                                                                                                                                                                                                                         |
| -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Interaction storyboard sketches are unclear, incomplete, or do not represent a primary task. | Interaction storyboard sketches clearly show screen layout and task flow for completing a primary task using web app. | Interaction storyboard sketches demonstrate clear focus on utility, usability, and user experience: task represents useful function; user interface layout and task flow are easy to understand and efficient to use; interaction has other aspects contributing to satisfying user experience. |
| {% endtab %}                                                                                 |                                                                                                                       |                                                                                                                                                                                                                                                                                                 |
| {% endtabs %}                                                                                |                                                                                                                       |                                                                                                                                                                                                                                                                                                 |