Gränssnittsdesign · område 5

Guide – Lagar och etik i gränssnittet

Här står det du behöver för uppgiften, och guiden fungerar utan att du varit på lektionen. Slå upp i den när du fastnar.

1. Lagligt och begripligt

Du fick lagarna i Webbutveckling den 9 december: vad en personuppgift är, vad ändamål och laglig grund betyder, och att du bara får samla in det ändamålet kräver. Den här guiden bygger vidare på det och ställer en annan fråga.

2. Formuläret som frågar för mycket

Varje fält har en kostnad. Den som fyller i betalar med tid, uppmärksamhet och en uppgift om sig själv. Kostnaden syns inte i formuläret, men den finns — och den är skälet till att långa formulär överges halvvägs.

Tre frågor om varje fält

Den tredje är den som gör mest skillnad för minst arbete. Ett födelsedatumfält utan förklaring ser ut som nyfikenhet. Samma fält med raden vi frågar för att kunna skicka erbjudanden som gäller där du bor blir ett val. Samma fält, annan upplevelse.

Gå tillbaka till formuläret du byggde i Webbutveckling i höst och räkna fälten. Det är den snabbaste vägen till att se vad det här handlar om.

3. Integritet som förval

Det som är förkryssat är det de flesta väljer. Inte för att de vill, utan för att de inte ändrar. Skillnaden mellan ett förval av och ett förval på är ofta tiotals procent — på samma gränssnitt, med samma text och samma två knappar.

Tre inställningar där det märks:

• Dela min position
• Visa min profil för alla
• Skicka mig erbjudanden

Principen privacy by default säger att den mest integritetsvänliga inställningen ska vara förvald. Det är ett krav i lagen du läste i Webbutveckling. Här handlar det om vad kravet betyder för den som ritar rutan.

4. Cookie-dialogen som designproblem

Webbens vanligaste dialog och dess sämst utformade. Fyra saker att titta på — de är också kolumnerna du behöver för granskningen i uppgiften:

Så granskar du tre dialoger

1. Öppna varje sajt i ett inkognitofönster. Annars kommer den ihåg ditt tidigare val och dialogen visas aldrig.
2. Fyll i fyra kolumner: tjänst, laglig, begriplig, din slutsats.
3. Svara på laglig med det du kan se — finns valen, är de aktiva, finns informationen. Du är inte jurist och behöver inte låtsas vara det.
4. Svara på begriplig med något i utformningen. Nej-knappen är grå text under ja-knappen duger. Den är rörig duger inte.

Den rad som är mest värd är den med ja på laglig och nej på begriplig. Det är hela områdets poäng i en rad, och det är A-nivån i uppgiften.

5. Licenserna i en design

Upphovsrätten till innehållet du publicerar tas i Webbutveckling. Här handlar det om det som ingår i en design, och där ser fällorna olika ut per materialslag:

Orden som avgör i en licenstext: commercial use, attribution required, no derivatives. Läs dem, inte rubriken.

Creative Commons

• BY — namnge upphovspersonen
• SA — ditt resultat måste ha samma licens
• NC — inte kommersiellt

CC är inte en licens. CC BY-SA 4.0 är en licens. Skriver du bara CC har du skrivit att det finns villkor, inte vilka. Det är ett bör-krav i uppgiften.

AI-genererat material

Rättsläget är inte avgjort. Det som är säkert: materialet kan ha byggts på något någon annan äger, och den som använder det tar risken. I uppgiften ska det märkas med vilket verktyg och vad du bad om. Det är ett hederlighetskrav, inte ett juridiskt svar.

6. Mörka mönster: de fyra verktygen

Ett mörkt mönster är ett gränssnitt som är ritat så att du gör något du inte tänkte göra. Du fick veta varför de byggs i Webbutveckling den 15 december: någon mäter en siffra, siffran ska upp, och den ärliga vägen är långsam.

Här handlar det om hur de är gjorda. Fyra verktyg, och det är dem du ska kunna peka på:

Fyra vanliga former: förvalt ja (rutan är kryssad när sidan laddas), svårare att säga nej (nejet finns men tar tre klick till), skuldbeläggande ordval, och uppsägning i labyrint (registrering tar 30 sekunder, avslut tar ett telefonsamtal).

De flesta mörka mönster är lagliga. Att kunna skilja på bryter mot en regel och är ett dåligt designval är ett bör-krav.

7. Omritningen

Omritningen är beviset. En beskrivning av hur det borde se ut är inte samma sak som en bild någon kan titta på och säga ja, nu förstår jag vad valet är.

Så gör du

1. Skärmdump på originalet, beskuren så att mönstret syns läsbart. Zooma in hellre än att visa hela sidan.
2. Rita om i Figma. En skärm. Före och efter bredvid varandra.
3. Gå igenom de fyra verktygen ett i taget: kontrasten, placeringen, storleken, orden.
4. Exportera som PNG och lägg in på din sida.
5. Skriv ungefär 150 ord om vad du ändrade och varför — vilket verktyg, och vilken princip eller lag det hänger på.

Två saker som inte är omritningar: att göra det snyggare, och att ändra innehållet. Samma information, annan hierarki — det är uppdraget.

A-nivån: låt någon annan titta på din efterbild och välja, utan att du säger något. Väljer hen rätt håller omritningen. Det tar fem minuter och det är den enda kontrollen som betyder något.

8. Felsökning