Creating User Interaction & Design Diagram
- Rushikumar (Rush) Bhatt
A User Interaction & Design (UI & D, UI&D, or UID) diagram visually depicts how the form "flows" (i.e. the workflow that takes place) when a user submits the form. When a form that has workflow (i.e. at least custom stage), the UID diagram is comprised of 7 components, outlined in the components table below.
Components Table
Note: Color is used for highlighting the component that is being exemplified
| # | Name | Shape | Part of | Definition | Example |
|---|---|---|---|---|---|
| 1 | Stage (Leap) |
| Leap Stage, with a label of either START or END, indicating Leap's initial and terminal points |
| |
| 2 | Stage (Custom) |
| Custom Stage, with a verbatim label as the name of the stage, that your form will go next to, upon user submitting the form Note: At a bare-minimum, if your form does not go to another (custom) stage, then by default it will go to the (Leap's) terminal stage. In which case, the initial stage will be pointing to the terminal stage (i.e. Component #1 (Labeled START) pointing to Component #1 (Labeled END) |
| |
| 3 | [what:who] | N/A - Text only | Stage component(s) (#1, #2) | This is a short way to annotate what can be done by who at/on that stage. What can be C (Create), R (Read), W (Write), D (Delete) Who is a number which corresponds to a Role |
|
| 4 | Straight Arrow |
| Arrow, with a same label as the submit button, indicating the flow from one stage (non-pointy end) to next stage (pointy-end) |
| |
| 5 | Curved Arrow |
| Curved arrow, with a same label as the submit button, indicating that upon submitting the form the form will "come-back" (i.e. remain within the same stage as prior to the form being submitted |
| |
| 6 | Role |
| Arrow component (#4, #5) | Role indicator, with label of Role #(s) described within Emails section below the diagram. Only annotate the arrow with the role component, if an OPEN role user is triggering the stage/workflow progression. |
|
| 7 |
| Arrow component (#4, #5) | Email notification, sent by Leap, with label of Email #(s) described within Emails section below the diagram. If the submit action triggers multiple emails, annotate the arrow that shows an email component per notification. |
|
Draw.io is a good resource for creating UI & D (or UID) diagrams. Below is a "skeleton" (i.e. bare-bones) version of a UID diagram, in two different flavors: shadow / plain, that one can use to jump start their diagram. It is pre-filled with basic construct of the diagram and you can start from this. Be sure to change anything in red font color to tailor it to your application. Of course, you may change decide to change static parts; do so, as you see fit. Lastly, if you have no need for mentioning any notes, you may remove the third column in the footer of the diagram called "NOTES"
| Name | Preview | Download |
|---|---|---|
User Interaction & Design Diagram Note: Change anything that is in red color as necessary/needed. |
| [PROJECT_NAME]_UID_Diagram.drawio |
User Interaction & Design Diagram - Plain / No Shadows Note: Change anything that is in red color as necessary/needed. |
| [PROJECT_NAME]_UID_Diagram_NS.drawio |
