Friction Design Archive - User contributions [en]

Template:Friction Pattern

2026-07-27T12:19:20Z

Hmiguel:

<noinclude>
Template for structuring Friction Design Patterns.
</noinclude>
<includeonly>
<div class="friction-header" style="clear: both;">
<div style="font-size: 1.1em; line-height: 1.6em; color: #444; margin-bottom: 20px; border-bottom: 1px solid #ccc; padding-bottom: 15px;">
'''Summary:''' ''{{{Summary|}}}''
</div>

== Pattern Description ==
{{{Description|}}}

== Interaction Design Implications ==
{{{Implications|}}}

== Usage ==
{{{Usage|}}}

== Examples ==
{{{Examples|}}}

== Metadata & Relations ==
{| class="wikitable" style="width:100%"
! scope="row" | Heuristic Violations
| {{{Violates|}}}
|-
! scope="row" | Sub-patterns
| {{{Subpatterns_Display|}}}
|-
! scope="row" | Related Patterns
| {{{Related_Display|}}}
|-
! scope="row" | Source
| {{{Source|}}}
|-
! scope="row" | License
| [{{{License|}}} CC BY 4.0]
|}

[[Category:Pattern]]
{{#set:
|Archive_Category=Pattern
|Pattern_Name={{{Name|}}}
|Summary={{{Summary|}}}
|Description={{{Description|}}}
|Implications={{{Implications|}}}
|Has_Heuristic_Violation={{{Violates|}}}|+sep=,
|Source={{{Source|}}}
|License={{{License|}}}
|Subpatterns={{{Sub1|}}}
|Subpatterns={{{Sub2|}}}
|Subpatterns={{{Sub3|}}}
|Subpatterns={{{Sub4|}}}
|Related_To={{{Rel1|}}}
|Related_To={{{Rel2|}}}
|Related_To={{{Rel3|}}}
|Related_To={{{Rel4|}}}
}}
</div>
</includeonly>

Template:Property Audit Row

2026-07-27T12:18:19Z

Hmiguel: Blanked the page

2026-06-25T10:14:45Z

Hmiguel:

Frictiondesign:About

2026-06-25T10:12:40Z

Hmiguel: /* Team */

Frictiondesign:About

2026-06-25T10:12:26Z

Hmiguel:

Frictiondesign:About

2026-06-25T10:12:10Z

Hmiguel: /* Team */

2026-06-25T09:57:48Z

Hmiguel:

MediaWiki:Citizen-footer-desc

2026-06-25T09:56:38Z

Hmiguel:

This archive collects Tactics, Patterns, Models, Taxonomies, Toolkits, Archetypes, Principles, Symptoms, Philosophies, Manifestos, and Emerging Approaches related to Friction Design.

[[File:FDA logos v03.png|500px]]

This work is financed by national funds through the Portuguese funding agency, FCT - Fundação para a Ciência e a Tecnologia, within the project «2023.14448.PEX» [DOI 10.54499/2023.14448.PEX].

MediaWiki:Citizen-footer-desc

2026-03-18T14:28:01Z

Hmiguel:

/* CSS placed here will be applied to all skins */

/*Import Hanken Grotesk */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap');

:root {
--font-family-sans: 'Hanken Grotesk', sans-serif;
--font-family-serif: 'Hanken Grotesk', sans-serif;
}

body, .mw-body, .citizen-body {
font-family: 'Hanken Grotesk', sans-serif !important;
font-weight: 400;
}

.firstHeading.mw-first-heading {
font-size: 1.5em;
font-weight: 800 ;
margin-bottom: 0.2em ;
}

/*About button on homepage css override */
.fda-hero-button .oo-ui-buttonElement-button {
background-color: #2323ff !important;
border: none !important;
box-shadow: none !important;
padding: 0.75rem 1.5rem !important;
font-family: 'FH Lecturis' !important;
color: #f7f7f7 !important;
border-radius: 0 !important; /* Remove rounded corners */
}

.fda-hero-button .oo-ui-buttonElement-button:hover {
background-color: #f7f7f7 !important; /* white on hover */
color: #2323ff !important; /* blue text on hover */
}

.fda-hero-button .oo-ui-buttonElement-button:focus {
outline: none !important;
box-shadow: none !important;
}

/* Hide the sitenotice on all pages by default */
#siteNotice {
display: none;
}

/* Show the sitenotice only on the Main Page */
body.page-Main_Page #siteNotice {
display: block;
}

/* Hide the footer title */
#footer-sitetitle {
display: none !important;
}

/* FULL-WIDTH HERO — */

.fda-hero {
padding: 2rem 1rem;
text-align: center;
background-color:#DADADA;
}

.fda-hero-inner {
margin: auto;
padding: auto;
text-align: center;
box-sizing: border-box;
}

.mw-body {
padding-left: 1rem;
padding-right: 1rem;
font-size: 1.1rem;
line-height: 1.5;
}

@media (min-width: 1024px) {
.mw-body {
padding-left: 8rem;
padding-right: 8rem;
margin-left: 3rem;
margin-right: 3rem;
font-size: 1.7rem;
line-height: 1.6;
}

.citizen-footer__siteinfo {
margin-left: 8rem;
}

.fda-hero-inner {
margin: 0 10rem;
padding: 0 8rem;
text-align: center;

}

.citizen-footer__bottom {
padding: 0 0 0 10rem;
}
}

@font-face {
font-family: 'FH Lecturis';
src: local('FH Lecturis Rounded Bold'), local('FH-Lecturis-Rounded-Bold'),
url('/mediawiki/resources/Fonts/FHLecturisRounded-Bold.woff2') format('woff2'),
url('/mediawiki/resources/Fonts/FHLecturisRounded-Bold.woff') format('woff'),
url('/mediawiki/resources/Fonts/FHLecturisRounded-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}

/* Apply to h1 and h2*/
h1, h2 {
font-family: 'FH Lecturis', sans-serif;
font-weight: 700;
color:var(--color-primary);
}

/* Hide the entire sidebar container */
body.page-Main_Page .citizen-page-sidebar {
display: none !important;
visibility: hidden !important;
}

/* Logo Row -------- Begin*/

.logo-row {
display: flex;
flex-direction: row;
justify-content: left;
align-items: left;
gap: 2rem;
flex-wrap: nowrap;
overflow-x: auto; /* Add horizontal scroll if needed */
white-space: nowrap; /* Prevent line breaks */
}

/* Hero Banner -------- Begin*/

.hero-banner {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
color: black;
text-align: left;
border-radius: 25px 25px 0px 0px;
}

.hero-content h1 {
font-size: 4.55rem;
margin: 0 0 1rem 0;
font-weight: 900;
border-bottom: none;
}

.hero-subtitle {
font-size: 1.5em;
margin: 0 0 2.5rem 0;
line-height: 1.5;
color: #878787;
font-weight: 700;

}

/* Hero Banner -------- END*/

/* Cards Styling -------- Begin*/

.category-card {
background: var(--color-surface-1);
border: 1px solid var(--color-border);
color: var(--color-base);
padding: 1rem;
}

.category-card:hover {
border-color: var(--color-primary--hover);
background: var(--color-surface-2);
}

.category-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
//margin: 2rem 0;
padding: 2rem 2rem 2rem 0rem;
}

.card-title {
font-size: 1.3em;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--color-base--emphasized, #000);
}

.card-description {
color: var(--color-base--subtle, #54595d);
font-size: 0.9em;
line-height: 1.4;
margin: 0;
}

.card-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
text-decoration: none;
}

/* Cards Styling -------- END*/

/* Hero Search_V03-------- BEGIN */

.hero-search-trigger {
margin: 2rem auto;
max-width: 16rem;
cursor: pointer;
background: var(--color-surface-1);
border-color: var(--color-border);
color: var(--color-base);
text-align: center;
font-family: 'Satoshi', sans-serif;
font-size: 1.1em;
font-weight: 600;
transition: all 0.3s ease;
}

.hero-search-trigger:hover {
border-color: var(--color-primary--hover);
background: var(--color-surface-2);
}

/* Hero Search_V03-------- END*/

/* ===== Friction Design Archive Color Theme ===== */

:root {
/* Primary Colors */
--color-primary: #2323FF; /* Blue - Main brand color */
--color-primary--hover: #0000EE; /* Blue - Hover states */
--color-primary--active: #000000; /* Black - Active states */

/* Accent Colors */
--color-accent: #0099FF; /* Light blue - Buttons, highlights */
--color-accent--hover: #0000EE; /* Blue - Button hover */
--color-success: #5D2DE6; /* Violet - Success states */

/* Surface Colors */
--color-surface-0: #F7F7F7; /* Light gray - Main background */
--color-surface-1: #FFFFFF; /* White - Cards, content areas */
--color-surface-2: #dedede; /* dark gray backgrounds */

/* Text Colors */
--color-base: #000000; /* Black - Main text */
--color-base--emphasized: #000000; /* Black - Headers, important text */
--color-base--subtle: #B5B5B5; /* Gray - Secondary text, metadata */

/* Border Colors */
--color-border: #B5B5B5; /* Gray - Borders, dividers */
--color-border--lighter: #F7F7F7; /* Light gray - Subtle borders */

--width-layout: 400px; /* Good balance - reduces width but still comfortable */

}

/* ===== Apply Theme to Citizen Skin ===== */

/* Main background */
.citizen-body {
background-color: var(--color-surface-0);
color: var(--color-base);
}

/* Header */
.citizen-header {
background: var(--color-surface-1);
border-bottom: 1px solid var(--color-border);
}

/* Links */
a {
color: var(--color-primary);
}

a:hover {
color: var(--color-primary--hover);
}

/* Buttons */
.citizen-button--primary {
background: var(--color-accent);
color: white;
border: none;
}

.citizen-button--primary:hover {
background: var(--color-accent--hover);
}

/* ----------------TEST ZOONE ---------------- */

.fda-hero {
text-align: center;
padding: 3rem 1rem;
}

/*
.fda-hero-subtitle {
max-width: 700px;
margin: 0 auto;
color: #555;
font-size: 1.1rem;
}
*/

.fda-hero-button {
padding: 0.75rem 1.5rem;
display: inline-block;
font-family: 'FH Lecturis';
background-color: #2323ff;
color: #f7f7f7;
}

.fda-hero-button:hover {
background-color: #f7f7f7 !important; /* white on hover */
color: #2323ff !important; /* blue text on hover */
}

.fda-intro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
padding: 2rem 0;
}

.fda-section-title {
font-size: 1.6rem;
font-weight: 600;
margin-top: 2rem;
}

.fda-card-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(4, 1fr);
margin-top: 1rem;
}

.fda-methodology-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-top: 1rem;
}

@media (max-width: 1023px) {
.fda-methodology-grid {
display: block;
}

.fda-def-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-top: 3rem;
}

.fda-def-item h3 {
margin-bottom: .3rem;
}

.fda-link {
margin-top: .5rem;
font-weight: 600;
}

Request Additional Confirmations

2026-03-18T14:26:55Z

Hmiguel:

{{Friction_Pattern
|Name=Request Additional Confirmations
|Summary=Confirmation steps in the interface that slow the user down, encourage reflection, and prevent impulsive or automatic decisions.
|Description=Request Additional Confirmations introduces extra confirmation steps that require users to consciously verify their actions before proceeding. The goal is to mitigate cognitive biases, prevent automatic or impulsive decisions, and promote a more deliberate and reflective user experience.
|Usage=Designers can use this pattern in situations where user actions have important consequences or where errors may be costly. It may be implemented via dialog boxes, additional confirmation prompts, or progressive disclosure steps that require users to acknowledge information or validate choices before proceeding.

== Sub Patterns ==
* '''TBD''': No specific sub-patterns were identified.

|Examples=
* '''TBD''': No specific examples were identified.
|Implications=
* '''Medium level of intervention''': Breaks conventional usability principles by intentionally adding friction and slowing down the user flow.

* '''Efficiency vs. Quality''': May reduce efficiency or frustrate users if overused but improves decision quality and reduces errors in high-stakes contexts.

|Violates=Nielsen: Flexibility and efficiency of use, Shneiderman: Keep users in control, Nielsen: Error prevention

|Subpatterns_Display=TBD
|Sub1=
|Sub2=
|Sub3=
|Sub4=
|Related_Display=[[Remind of Consequences]], [[Provoking Deliberate Interaction]], [[Confront the User]], [[Offer Multiple Points of View]]
|Rel1=Remind of Consequences
|Rel2=Provoking Deliberate Interaction
|Rel3=Confront the User
|Rel4=Offer Multiple Points of View
|Source=Silva, Flávia Catarina Pereira da. 2024. “Design de fricção em interfaces gráficas: estratégias e padrões para promover processos metacognitivos no utilizador.” masterThesis. [https://ria.ua.pt/handle/10773/45001].
|License=https://creativecommons.org/licenses/by/4.0/
}}