Brutal Interface: Visually displays the algorithmic contents/foundations of the interface itself explicitly, showcasing the inner mechanisms
What’s brutalism: Minimalistic Construction, shows the inner structure
Example with the artwork omega: The initial interface appears organised and natural, but over the course of interaction, the interface diminishes and immerges into chaos, inducing a new visual style where there exists the combination of 0s and 1s instead of the original text - considering that the original output text that user confronts is the result of post-produced texts, brutal interface attempts to show the actual naked mechanisms which exist primitively before this post-processed output.
Instance:
let questionText = nextQuestion;
let analysingText = "Hmmmm...";
let omegaText = Array.from(nextQuestion, (char) => (char === " " ? " " : "Ω")).join("");
if (omegaCount < 8) {
//as it is
} else if (omegaCount === 8) {
questionText = "<S.NextQuestion>{questionText}</S.NextQuestion>";
} else if (omegaCount === 9) {
questionText = "<S.NextQuestion>isOmega ? omegaText : {questionText}</S.NextQuestion>";
} else if (omegaCount === 10) {
questionText = "<S.NextQuestion>uiState === "analysing" ? analysingText : isOmega ? omegaText : {questionText}</S.NextQuestion>";
} else if (omegaCount === 11) {
questionText = "<S.NextQuestion>uiState === "analysing" ? analysingText : isOmega ? omegaText : questionText</S.NextQuestion>";
} else if (omegaCount === 12) {
questionText = "<S.NextQuestion>uiState === "analysing" ? analysingText : isOmega ? omegaText : {functionArgs.generate_next_conversation.nextConversationMessage} </S.NextQuestion>";
} else if (omegaCount <= 14) {
questionText = "<S.NextQuestion>uiState === "analysing" ? analysingText : isOmega ? omegaText : {response.data.functionArgs.generate_next_conversation.nextConversationMessage}</S.NextQuestion>";
} else {
questionText = "<S.NextQuestion>uiState === "analysing" ? analysingText : isOmega ? omegaText : {await axios.post("/api/openai/lib/omega/generate-conversation", {
messages: [SYSTEM, ...messages.slice(-8)],
mbti: generateCurrentMBTI(mbtiWeight),
iteration: ARR[iteration % 4],
}).data.functionArgs.generate_next_conversation.nextConversationMessage} {questionText}</S.NextQuestion>";
}
if (omegaCount <= 13) {
return <S.NextQuestion>{uiState === "analysing" ? analysingText : isOmega ? omegaText : questionText}</S.NextQuestion>;
} else if (omegaCount === 14) {
return <S.NextQuestion>{questionText}</S.NextQuestion>;
} else if (omegaCount <= 15) {
return <S.NextQuestion>{stringToBit(questionText)}</S.NextQuestion>;
} else {
return (
<S.NextQuestion
style={{
lineHeight: "20%",
}}
>
{stringToBit(questionText, true)}
</S.NextQuestion>
);
}
From this code you can read that as the omegaCount increases the content actually disminishes/gets disrupted and shows the naked circumstance that covers the actually mechanism of how the code is derived.
Yet limitations exist with the current approach:
This is more of a simulation - it does shows the underlying mechanism, but within the process of displaying such explicitly it is a well-explicitly designed one rather than a natural one.
Inner-structure in Pompidou centre is naturally displayed by reducing/deducting the exterior - same should be the case for the ideal brutal interface. Yet in this case with the omega, it is actually the addition (if-else statement) which aims to explicitly show the inner mechanism, in which it initially aims for showing the inner structure, but ends of faking by showing the simulated inner structure which is actually derived as the result of designed/crafted code to deliver such purpose.
The Brutal Interface visually exhibits the algorithmic elements of the interface itself. It's meant to provide a transparent view of the complex inner workings of the system. Drawing parallels with Brutalism, a minimalist architectural style which emphasizes displaying the core structure of a building, the Brutal Interface aims to provide the same level of stripped-down transparency.
One of the prime examples of the Brutal Interface is the artwork Omega. Initially, Omega's interface appears coordinated and natural. However, upon further interaction, the interface falls into disarray, eventually evolving into a new visual style where 0s and 1s replace the original text. The original output that the user initially interacts with is the result of a series of post-production texts. The Brutal Interface tries to expose the basic, raw mechanisms that exist before the development of this post-processed output.
To provide a specific example, we can analyze the code related to Omega. If we look at certain sections of this code, there's a variable known as "omegaCount" (representing counts in Omega). As this counter increases, the content within the art piece actually disintegrates and showcases the bare conditions that conceal the actual mechanisms of how the code operates.
However, there are certain limitations to this approach. The current implementation still represents more of a simulation than a genuine display of the underlying mechanism. The omegaCount, in essence, is an added feature specifically designed to expose the inner workings, but it fails to naturally reveal the system's inner structure.
In the famed Pompidou Centre, the inner structure is naturally displayed by subtracting the exterior, a concept that could also be applied to the ideal Brutal Interface. Nevertheless, in the Omega artwork, it's the addition of the "omegaCount" that aims to expose the inner workings. Although it attempts to display the inner structure, it ultimately falls short by presenting an artificially simulated inner structure that's the result of purposefully crafted code.
무자비한 인터페이스: 인터페이스 자체의 알고리즘적 내용/기반을 명시적으로 시각화하여 내부 메커니즘을 전시합니다
무브탈리즘이란: 간소한 구성, 내부 구조를 보여줍니다
예술작품 오메가로 예를 들면: 초기 인터페이스는 조직적이고 자연스럽게 느껴집니다. 그러나 상호작용이 진행됨에 따라 인터페이스는 점차 줄어들고 혼란스러워집니다. 그 결과 새로운 시각적 스타일이 생겨나는데, 이는 원래의 텍스트 대신 0과 1의 결합이 존재하는 곳입니다. 사용자가 직면하는 원래의 출력 텍스트는 사후 제작된 텍스트의 결과물인 것을 고려하면, 무자비한 인터페이스는 이 사후 처리된 출력보다 원시적으로 존재하는 실제 벌거벗은 메커니즘을 보여주려고 합니다.
이 코드에서 볼 수 있듯이 omegaCount가 증가함에 따라 실제 내용이 감소하거나 방해되고 코드가 파생되는 실제 메커니즘을 덮는 벌거벗은 상황을 보여줍니다.
그러나 이런 방식에는 한계가 있습니다:
이것은 시뮬레이션에 가깝습니다 - 그것은 기본 메커니즘을 보여주지만, 그러한 것을 명시적으로 표시하는 과정에서 이는 자연스러운 것이 아니라 명시적으로 설계된 것입니다.
폼피두 센터의 내부 구조는 외부를 줄이거나 공제함으로써 자연스럽게 표시됩니다 - 이와 같은 경우에 이상적인 무자비한 인터페이스가 그래야 합니다. 그러나 이 오메가의 경우에는 내부 메커니즘을 명시적으로 보여주려는 목표를 가진 추가사항 (if-else 문장)이 실제로 있습니다. 이것은 초기에는 내부 구조를 보여주려고 하지만, 그 결과는 실제로 그런 목적을 전달하기 위해 설계/제작된 코드로 파생된 시뮬레이션된 내부 구조를 보여주는 것으로 가짜가 됩니다.
Brutal Interface
Naked Interface
Omega
Art
Technology
Algorithm
Interface
Visual
Minimalistic
Construction
Structure
Artwork
Chaos
0s
1s
Text
Output
Post-processed
Mechanism
Primitively
Post-produced
Simulated
Natural
Explicit
Designed
Crafted
Code
Inner-structure
Pompidou Centre
Exterior
Ideal
Addition
If-else statement
Inner mechanism
Inner structure
Simulated inner structure
Designed code
Purpose
Text written by Jeanyoon Choi
Ⓒ Jeanyoon Choi, 2024