Designing Progressive Enhancement Into The Academic Manuscript

State of play

complex datasets, and sometimes the code used to analyse them, are ultimately reduced to little more than PNG images.

Moving forward

What used to be a the online equivalent of a printed page can now contain entire virtual machines

Example of an embedded Integrated Development Environment (source:

Progressive engagement

Progressive engagement with research artefacts

a research artefact should therefore coax the user into increasingly higher levels of engagement

Progressive enhancement

Progressive enhancement of a single figure: static, interactive, code, external resource.
  1. Start with embedding a lightweight static figure (a snapshot) of the key output of the code. This should represent whatever state the author deems fit to best convey the key finding/narrative contribution of the code in question. This will only serve as the minimum viable experience for skimming purposes (Casual engagement), but also as a safe baseline for when the content is being accessed through less capable devices, as a printable/PDF compatible output, and as a valid snapshot of what state the data was in when it was peer-reviewed (where applicable).
  2. Allow the user to switch the static figure to an interactive output where supported, providing whatever level of UI is needed to appreciate the output in full.
  3. Where appropriate, allow the user to dig behind the output of the interactive figure and directly look at the code behind it. You may at this stage allow minor edits to the algorithm and the ability to run it again in-situ to view the output.
  4. If the user wants to engage further, for example intending to fork or modify the code, or do anything more complex, provide links to the most appropriate external resource where the user can benefit from a more appropriate environment or UI to do their work (e.g., the original GitHub and/or data repository, or an online IDE).

Lightweight implementation example





Product and UX professional. Can be reached at @augmentl. Views are my own.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

An Interview with Lara Penin

Using mental models for better UX design

Mental models in UI-UX design — examples and tips

From the Design Incubator

The Beginning: How I left Paris to become a UX Designer

Practicing What We Teach: Iterative Design Methods for Innovation Education

The PANTONE Key to Existential Crisis

How we helped Erste Bank to simplify mobile banking for almost 300k seniors | Case Study

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Giuliano Maciocci

Giuliano Maciocci

Product and UX professional. Can be reached at @augmentl. Views are my own.

More from Medium



7 key features of great online whiteboards

SharpCloud for workshops