Gränssnittsdesign · område 5

Uppgift 5 – Lagar, rättigheter och etik

Deadline tisdag 22 december kl 23:59. Lämnas som en egen sida på den gemensamma sajten, med en länk från portföljens 05 Lagar och etik.

1. Uppdraget

Du ska visa att du kan resonera om hur lagar, bestämmelser och principer påverkar hur ett gränssnitt utformas — inte genom att referera regler, utan genom att peka på två verkliga gränssnitt och säga vad som skiljer dem åt. Ett som gör rätt. Ett som gör fel. Och en omritning av det som gör fel.

Det här är kursens fjärde kriterium. Det prövas på två ställen i hela kursen: här, och i utvärderingen av slutprojektet i juni. Den här uppgiften bär alltså hälften av det.

Sajten är gemensam med Webbutveckling. Ni bygger en sajt, lämnar in en länk och får två bedömningar. Ditt kapitel är en egen sida på den sajten. Webbutveckling bedömer sajtens innehåll, källor och publicering; här bedöms din sida och ditt resonemang om utformningen.

Gränsen mellan kurserna går så här:

Här handlar det om	I Webbutveckling om
Hur kravet ser ut när användaren möter det på skärmen	Vad lagen kräver av den som publicerar
Licenserna för det som ingår i en design: typsnitt, ikoner, bild, ljud	Vad du får lägga upp: citaträtt, länkning, källhänvisning
Hur mörka mönster är byggda — och hur man ritar om dem	Varför de finns: spårning, datainsamling, incitament

Här handlar allt om utformningen

Vad lagen kräver läser du i Webbutveckling. Ett mörkt mönster är inte olagligt för att det är fult — det är byggt av kontrast, placering och ordval, och det är de tre du ska kunna peka på.

Området är kort: tre pass, 14, 17 och 21 december. Uppgiften är byggd efter det. Den kräver inget nytt verktyg och ingen ny metod — du har Figma sedan område 3, och skärmdumpar tar du redan.

2. Ska-krav

Är alla ikryssade och kontrollerade ligger du på E.

Ska-krav — nivå E

En egen sida på den gemensamma sajten: Ett gränssnitt som gör rätt och ett som gör fel
Ett gränssnitt som gör rätt: skärmdump, vad det gör, och vilken regel eller princip det följer
Ett gränssnitt som gör fel: skärmdump, vad mönstret får användaren att göra, och hur det är byggt — kontrast, placering, ordval
En omritning av det som gör fel, gjord i Figma: före och efter bredvid varandra
Ungefär 150 ord om vad du ändrade och varför
Tre cookie-dialoger granskade: en rad var — är den laglig, är den begriplig, och är det samma sak?
En licensredovisning för sajtens designmaterial: varje bild, ikon och typsnitt med källa och licens
Designportföljens sida 05 Lagar och etik länkar till sajten

3. Bör-krav

Skillnaden mellan att tycka och att observera. Nivå C.

Bör-krav — nivå C

Exemplen är egna fynd ur tjänster du själv använder — inte lektionens
Du kan säga vilken lag eller princip varje exempel hänger på, och skilja på vad som är olagligt och vad som bara är dåligt
Omritningen ändrar utformningen, inte innehållet: samma information, annan hierarki
Analysen av det som gör fel pekar på minst tre konkreta designval, inte på en känsla
Cookie-raderna säger vad i utformningen som gör dialogen begriplig eller inte
Creative Commons-licenserna är angivna med villkoret — CC BY-SA 4.0, inte bara CC

4. Utmaningar

Nivå A. Ta dem när ska- och bör-kraven sitter.

Utmaningar — nivå A

Ett fall där det lagliga och det begripliga inte är samma sak, och du reder ut varför de kan glida isär
Omritningen är prövad på någon annan: hen väljer rätt alternativ utan att du förklarar något
Ett mörkt mönster i en tjänst du själv använder ofta — och vad det har kostat dig
Du kan säga vad AI-genererat material innebär för upphovsrätten i ditt eget fall, med källa
Omritningen är ärlig utan att vara oanvändbar: avsändaren kan fortfarande få det hen behöver

Den sista utmaningen är den mest värda

Att ta bort allt utom en knapp är inte en omritning, det är en amputation. Den som klarar att göra valet tydligt och låta företaget behålla sin fråga har förstått vad mörka mönster faktiskt är: en genväg någon tog för att den ärliga vägen var svårare att rita.

5. Tekniska krav

Krav	Vad som gäller
Var det lämnas	Din sida på den gemensamma sajten. Portföljens `05 Lagar och etik` har en rad och en länk dit — skapa sidan om den inte finns
Omritningen	Gjord i Figma, exporterad som PNG. En skärm, före och efter bredvid varandra
Skärmdumpar	Beskurna så att mönstret syns. Läsbara — zooma in hellre än att visa hela skärmen
Anonymisering	Inga personuppgifter i bild. Täck namn, adresser, konton — också dina egna
Cookie-granskningen	Tabell med fyra kolumner: tjänst, laglig, begriplig, din slutsats
Licensredovisningen	Tabell med fyra kolumner: vad, varifrån, licens, vad licensen kräver
Omfattning	Analysen och omritningens motivering ungefär 400 ord sammanlagt
Var det lämnas in	Sajtens adress i itslearning, på båda kursernas uppgifter — samma länk

Licensredovisningen gäller hela sajten

Inte bara din sida. Det är den naturliga arbetsdelningen: Webbutveckling svarar för källorna till texten, du för licenserna till formen.

6. Bedömningsmatris

Kriterium	E	C	A
Val av exempel	Ett gränssnitt som gör rätt och ett som gör fel, med skärmdump	Båda är egna fynd ur tjänster du använder	Exemplet som gör fel är något du själv drabbats av, och du kan säga vad det kostade
Analys av utformningen	Du beskriver vad mönstret får användaren att göra	Du pekar på minst tre konkreta designval: kontrast, placering, ordval	Du skiljer på vad som är olagligt och vad som bara är dåligt, med stöd
Omritning	Före och efter finns, gjord i Figma	Omritningen ändrar utformningen men inte innehållet	Omritningen är prövad på någon annan och fungerar fortfarande för avsändaren
Lag och princip	Du säger vilken regel eller princip exemplen hänger på	Cookie-granskningen pekar på vad i utformningen som avgör begripligheten	Du reder ut ett fall där det lagliga och det begripliga inte sammanfaller
Upphovsrätt och licenser	Sajtens designmaterial är redovisat med källa och licens	Villkoren är utskrivna och du vet vad de kräver av dig	Du kan redogöra för vad AI-genererat material innebär i ditt fall, med källa

7. Kom igång

Börja samla skärmdumpar nu. Mörka mönster finns i varje app du öppnar i december — avbeställningen som gömmer sig, förkryssade rutor, Nej tack, jag vill inte spara pengar. Ta bilden när du ser det. Att leta upp ett i efterhand är mycket svårare än det låter.
Ta cookie-dialogerna på första passet. Övningen på lektionen är uppgiftens krav — tre dialoger, tre rader. Gör dem där, så är det momentet avklarat.
Välj det som gör rätt sist. Det är lättare att se vad ett bra gränssnitt gör när du redan analyserat ett dåligt. Leta efter motsatsen till det du hittade.
Rita om i Figma, inte i huvudet. Omritningen är beviset. En beskrivning av hur det borde se ut är inte samma sak som en bild man kan titta på och säga ja, nu förstår jag vad valet är.
Skriv licensredovisningen medan sajten byggs, inte efteråt. Frågan var kom den här ikonen ifrån? har inget bra svar tre veckor senare.

8. Vanliga misstag

Analysen är en åsikt. Den är förvirrande och otydlig säger ingenting om utformningen. Knappen som avbryter har samma bakgrundsfärg som sidan och ligger under vikningen säger det.
Omritningen är bara snyggare. Uppgiften handlar inte om estetik. Frågan är om användaren kan se vad valet är och välja det hen vill — inte om det ser modernare ut.
Omritningen tar bort frågan. Ett mörkt mönster löses inte genom att företaget slutar fråga. Det löses genom att frågan ställs ärligt och båda svaren ser ut som svar.
Allt som är dåligt kallas olagligt. Det mesta som är irriterande är fullt lagligt. Skillnaden mellan bryter mot regel X och är ett dåligt designval är precis vad det här kriteriet prövar.
Exemplet som gör rätt är påhittat. En skiss av hur det borde se ut är inte ett gränssnitt som gör rätt. Hitta ett som finns — de är färre, men de finns.
Licensen anges som gratis. Gratis är inte en licens. Villkoret är det som gäller: får du ändra i den, får du använda den kommersiellt, måste du namnge upphovspersonen?
Skärmdumpen visar hela skärmen. Mönstret syns inte i en bild på en hel webbsida. Beskär till det som är poängen.

9. Innan du lämnar in

Måndag 21 december är områdets sista lektion, men deadline är kvällen efter, tisdag 22 december kl 23:59, gemensamt med Webbutveckling. Använd passet till det här:

Titta på din egen sida som en främling. Framgår det vilket exempel som gör rätt och vilket som gör fel, utan att du förklarar?
Räkna designvalen i analysen. Tre konkreta, inte tre omskrivningar av samma sak
Läs de 150 orden om omritningen. Står det vad du ändrade, eller bara att du ändrade?
Kontrollera skärmdumparna för personuppgifter. Namn, adresser, kontonummer — också dina egna
Gå igenom licenstabellen mot sajtens faktiska bilder och ikoner
Kontrollera att portföljens 05 Lagar och etik länkar till sajten, och att länken fungerar
Lämna adressen i itslearning på båda kurserna. Samma länk, två uppgifter

Terminen slutar här

Nästa område börjar den 14 januari och handlar om tillgänglighet och användbarhetstest — där prövas sajten på riktiga personer, och åtgärdslistan du skrev i område 4 betas av i Webbutveckling parallellt.