# Interface Détournement

Loup Cellard

► To cite this version:

Loup Cellard. Interface Détournement. The Techno-Galactic Guide to Software Observation, 2018. [hal-04798265](https://hal.science/hal-04798265v1)

HAL Id: hal-04798265

https://hal.science/hal-04798265v1

Submitted on 30 Nov 2024

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>

Distributed under a Creative Commons Attribution 4.0 International License
## METHOD::
# Interface Détournement

<figure><img src="image_2.png" /></figure>

**WARNING::** We are under the black magic of capitalist digital interface making! Critical radars will detect some conceptual gibberish over here!

<figure><img src="image_3.png" /></figure>

**WHAT::** Satirical détournement of your favorite bullshit website interface, through parody and poetry. Heal your eyes and brain by scratching and diffracting the surface of eveyday browsing.

<figure><img src="image_4.png" /></figure>

**URGENCY::** If you have the feeling that some words are imposed to you and want to reclaim a power of saying/naming.

<figure><img src="image_5.png" /></figure>

**WHEN::** When you reach your limit and can no longer tolerate the jargon of the digital economy and the rhetorics of Silicon Valley.
<figure><img src="image_6.png" /></figure>

R E M E M B E R

Be careful in planning your interface hoax. You might get caught and accused of fake news design and circulation.

<figure><img src="image_7.png" /></figure>

SOURCE:

The *Interface Détournement*-method was developed by Loup Cellard.

EXAMPLE:

Example of an interface template study by Henrik Jan Grievink

► P.156)
<figure><img src="image_8.png" /></figure>

Interface template study by Henrik Jan Grievink
1. Choose a particular website where you want to intervene. You can pick an interface in relation to:

* contestable content: bullshit slogans and jargon, problematic rhetoric, unnecessary content that is interesting to reframe, etc.

* problematic interface issues: unreadability, problems of orientation/disorientation, interaction design issues, etc.

2. Open the "developer tool" of your browser. With this tool you will be able to visualize and modify locally the content of your website (the html rendering) and the way it is styled (the CSS file).

3. Then you have to adopt a strategy of intervention guiding your détournement. Here is a list of proposed strategies:

* The classical détournement: play with the interface content, replace textual elements, add others with a good dose of humour and irony.

* The layout and template observation: study the interface layout by removing all the textual content. The layout will appear, after having done this exercise on several interfaces you will be able to compare the regularities between websites. Then feel free to move elements and reconstruct the interface the way you want.

4. After having done your détournement, you can share the outcome of your work as a hoax: present the new interface you have done just as if it was a mundane and "real" one. Observe the reactions of the tested credulous and refine your détournement with their insights. You can also take a screenshot of your work and send it to an audience.
<figure><img src="image_9.png" /></figure>

Try Upside Down Business

<figure><img src="image_10.png" /></figure>

# Reinventing Earthquake computing

Introducing Upside Down Interfaces and Dumb Synchronisation — a slow way to work together.

Example of an interface detournement of the dropbox website
<figure><img src="image_11.png" /></figure>