729G87 Interaction Programming

Lecture 5

Johan Falkenjack, johan.falkenjack@liu.se

Lecture overview

• Context; from analysis to specification
• Specifying interaction
• Implementation

Project

Project recap

• Same groups as during assignments
• Choose your project category
• Deliverables
  • GUI analysis: select exemplars for your category and analyse them
  • Specification: describe how the user interacts with the interface in order to use the required functionality for your category
  • Implementation: implement the interface according to your specification
• Point requirements
  • https://www.ida.liu.se/~729G87/about/examination/

Deliverable: GUI analysis

• Deadline: Dec 12
• 1-3 points
• Analysis of
  • interactive components
  • which components are used to implement functional requirements
• The interactive components on the web page that are used to implement the functional requirements for your category should be your focus
  • → what you write about in "Implementation of functional requirements"
  • → what you include in your component inventory

Lesson on wireflows

• Dec 12, 8.15-10.00 in P30 with Charlie
• Bring your own scenarios!

Optional supervision meeting

• Dec 13, 15.15-17.00 in R34 with Charlie, R35 with Emma, R36 with Johan
• short presentation of findings in GUI analysis
• Q/A, discussion regarding specification and implementation
• Supervision signup link

Deliverable: Specification

• Deadline: 17 Dec
• Specification of interactive components used to implement functional requirements.
• Annotated wireflow diagrams should be the main content of your specification.
• Focus on functional requirements.

• Do NOT submit Figma links as your specification. You can use Figma to draw your wireflow diagrams. The idea is NOT to prototype your interface in Figma.

Deliverable: Implementation

• Optional bonus project points (1-3)
• Project presentations, January 17

Categories

(Hopefully you've already started thinking about this)

Categories

• Each category has a description + a number of functional requirements
• Your final implementation must fulfill these functional requirements
• After selecting a category, decide on a subcategory
• Categories
  • Online store
  • Product customiser
  • Product showcase with non-standard navigation
• See https://www.ida.liu.se/~729G87/project/categories/

GUI Analysis

GUI analysis

• A kind of precedent design that focuses on the GUI
• Examples of other related methods
  • Competitor analysis
  • Genre analysis
• Purpose: to guide and inform your specification

Choosing exemplars

• Choose exemplars that represent your subcategory
• An exemplar should be thoughtfully selected as a representative of what is typical for your subcategory
• Exemplars should fulfill the functional requirements of your subcategory

GUI analysis, sections

• Description: list functional requirements, describe subcategory
• GUI component inventory: What GUI components are used? We are only interested in the GUI components that are related to the functional requirements.
• Implementation of functional requirements: What functions are the GUI components used for? These functions will be subfunctions of your functional requirements.
• GUI interactions: Describe the interactions of the GUI functions

Process

• Center the process around the functional requirements of your category.
• Exemplars: Make sure the functional requirements are implemented, choose what you think is a good example.
  • If aiming for 2-3 points, make sure some interactions include animation or movement
• Implementation of functional requirements: Make notes of which components you want to highlight in this section before you start compiling your GUI Component inventory.

Screenshot tools

• Full page screenshot in Firefox or Chrome (not just the visible view)
• Snip & Sketch (Windows)
• Skitch (Mac)
• Shottr (Mac)
• For things that are only visible a short time: record a video of screen and screenshot the video

Context

from analysis to specification

Three design phases of creating a software product

• Concept phase
  • What is the product? Why is it needed? What does it solve?
• Processing/Cultivation phase
  • What content and functionality should be included? How do the workflows look like?
• Detailing
  • Look and feel of the user interface

Specifying interaction

How can we describe an interactive artifact?

• Words are not enough. We need to use visual descriptions.
• Images are not enough. Interaction is movement.
• What qualities of interactivity can we describe / specify?

• Wireframes
• State transition diagrams / flowcharts
• Wireflow diagrams

Interactivity attributes

What qualities does interactivity have?

Examples of interactivity attributes

Youn-kyung Lim, Sang-Su Lee, and Kwang-young Lee. 2009. Interactivity attributes: a new way of thinking and describing interactivity. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI '09). Association for Computing Machinery, New York, NY, USA, 105–108. https://doi.org/10.1145/1518701.1518719

Examples of interactivity attributes

Youn-kyung Lim, Sang-Su Lee, and Kwang-young Lee. 2009. Interactivity attributes: a new way of thinking and describing interactivity. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI '09). Association for Computing Machinery, New York, NY, USA, 105–108. https://doi.org/10.1145/1518701.1518719

Wireframes and state transition diagrams / flowcharts

Wireframes

• A blueprint of the layout of an interface.
• Used to define and plan - show all parts of the UI.
  • information hierarchy: what content goes where, positioning
  • interaction: what interactive components are placed where
• Use to organize your ideas, help you achieve consistency.

• A wireframe is not about pretty colors and aesthetics.

Wireframe Example

CC BY 2.0 - Rob Enslin - https://www.flickr.com/photos/doos/3931846833/

Pros and cons of wireframes

• Do not take much time to produce
• Focus on content and layout
• Suitable for showing layout and content of static pages/views
• Unable to capture or display dynamic aspects of the page/view

Flowcharts and state transition diagrams

• Diagrammatic descriptions of workflows / processes
• E.g.
  • steps required to complete a task (user perspective)
  • back-end logic of system (system perspective)
• Lack UI context

Flowchart Example

Wireflow diagrams

Wireflow diagrams

• Design-specification format that combines wireframe-style page layout designs with a simplified flowchart-like way of representing interactions
• Wireframes that show workflow and UI
• Can be augmented with annotations

• Important: Indicate "hotspots" and use arrows to show next step in flow

Wireflow diagrams

• You can also include "partial" wireframes, i.e. wireframes that focus on part of the screen.
• Use e.g. to show changes within a component if you do not want to redraw the entire screen.

Wireflow Example

Example: Annotation showing how a new element is added to view

Example: Annotation showing animation movement

Example: Focus on part of interface

See wireframe, flowchart, and wireflow examples on https://www.nngroup.com/articles/wireflows/

Wireframe tools

• Penpot - https://penpot.app/
• Axure - installed on Windows computers at IDA
• Figma - https://www.figma.com/
• MockFlow - https://www.mockflow.com/
• NinjaMock - https://ninjamock.com/
• Pencil - http://pencil.evolus.vn/
• Wireframe.cc - https://wireframe.cc/

General diagramming tools

• Draw.io - https://app.diagrams.net/
• Inkscape - https://inkscape.org/
• Vanila Wireflow - https://wireflow.co/
• yEd - https://www.yworks.com/products/yed
• MS Visio - Available through Lisam (Microsoft 365)

Specification

Specification requirements

• Short textual description that describes the functionality and features of the envisioned implementation.
• Take into account the patterns found in your GUI analysis, motivate deviations.
• Annotated wireflow diagrams; use annotations to describe interaction.
• What input triggers which behaviour in the user interface (click, hover, drag, etc.).
• Specification must fulfill all functional requirements of your chosen category.

Implementation

Implementation requirements

• Must implement functional requirements of your category.
• You are allowed to modify your specification - but you have to document changes.
• Must be able to publish project in the same way as assignments. I.e. as a static web page.
• Single Page Application - one HTML file.
  • Show/hide or create/remove elements as needed.

Using third-party frameworks

• Keep in mind that there is a learning curve to use a framework even if development time may be shortened.
• Limited supervision.
• If you use React/Vue/etc. make absolutely sure that you can generate a static website.
  • (E.g. React does not do this out of the box; needs extensions + code modifications compared to "vanilla" React.)

Project presentations

• Pitch format presentations
• 5 minute presentation
• The concept: What services will be provided via your UI
• The problem: Show/demonstrate some existing examples
• Your solution:
  • Demonstrate a few interactions from your interface
  • Show your code for some interactions