Specification

The purpose of the specification deliverable is to specify the interactions between the user and the graphical interface.

Create wireflow sketches for all functionality related to the functional requirements of your chosen category. You can divide your wireflow sketches into several sketches by enumerating them and annotating your sketches with crossreferences to related sketches.

Your specification should take into account the time available for the implementation: try to create a specification for a product that is of excellent quality without needing more than the available time to implement it.

Your specification should take into account that your project implementation should be done as a single web page.

Deliverable

Submit your specification as a PDF via Lisam with the following:

1. Your names, liuid:s and group name
2. How many points you are aiming for
3. Short textual description of your project (see below)
4. Annotated wireflow diagrams for your implementation (see e.g. https://www.nngroup.com/articles/wireflows/)

The annotated wireflow diagrams should be the main content of the specification.

Wireflow diagrams

• Clearly indicate “hotspots”/“targets” (for touches/clicks etc) that lead to the next step in the flow.
• Draw an arrow from the hotspot to the wireframe shat shows what happens as the result of the interaction.
• You can annotate the details of the interaction in your wireflow diagram using either text or a visual description

Tools

You do not have to use software to create the wireflow sketches, clearly drawn sketches are perfectly fine. However, if you want, there are several software options, e.g.

• Adobe XD
• Axure (installed on Windows computers at IDA)
• Figma
• MockFlow
• NinjaMock
• Pencil
• Wireframe.cc

IMPORTANT: The purpose of using these tools for the specification is to draw the wireflow diagrams. Do NOT submit Adobe XD/Figma links as your specification.

Specification levels

You can score between 1-3 points on your submitted specification according to the criteria below:

Important: In your submission, specify how many points you are aiming for.

1 point

1. The specification must have a short textual description that describes the functionality and features of the envisioned implementation.
2. The specification must take into account the patterns found in your GUI analysis. Deviations must be motivated in the textual description.
3. The design specification must specify the interaction of the implementation. Which (user) events trigger which behaviours in the user interface.
4. The specification must contain annotated visual descriptions of interaction.
5. The design specification must fullfill all requirements specified in the functional specification of your chosen category.
6. wireflow diagrams according to the above requirements

2 points

• requirements for 1 point are fulfilled
• most, but not all key interactions are detailed (see below) in the specification

3 points

• requirements for 1 point are fulfilled
• all key interactions are detailed (see below) in the specification

Key interactions & level of interaction details

Key interactions are those interactions that relate to the functional requirements for your category.

For 1 point, it is sufficient to specify where interaction occurs and what the “end result” is.

For 2 and 3 points detailed interaction descriptions should explicitly specify e.g. if no animation is involved (e.g. “window pops up without any animation”) in the interaction or if there is animation involved in the interaction, and in that case what kind of animation (fade, movement etc). However, you do not need to specify the timing/easing etc of the animation.

A non-detailed description of an interaction leaves room for interpretation by the developer to decide how much effort should go into the implementation of the interaction.