Kap 7.5 - Etiska designval

Mål

• Förstå hur design kan påverka användarens beslut.
• Känna igen mörka mönster i gränssnitt.
• Skapa tydliga, ärliga och användarvänliga val.

Design styr uppmärksamhet

Storlek, färg, placering och text påverkar vad användaren gör. Det är normalt att guida användaren, men problem uppstår när designen lurar, pressar eller gömmer viktiga val.

Mörka mönster

Mörka mönster är designlösningar som gynnar webbplatsen på användarens bekostnad. Det kan vara svårt att avsluta ett konto, otydliga prenumerationer, förvalda samtycken eller knappar som gör ett nej-val svårt att hitta.

Ansvarsfull design

Etisk design gör viktiga val begripliga. Använd tydliga knappar, ärlig text, rimliga standardval och enkel väg tillbaka om användaren ångrar sig.

Sätt användaren först

Etiska designval handlar inte bara om färg och knappar. Det handlar om att fundera på vilka användare som kan använda sidan, vilka som riskerar att stängas ute och vilka konsekvenser dina tekniska val kan få.

En enkel tumregel är: sätt användaren först. Fråga dig inte bara om något går att bygga, utan också om det är rimligt, begripligt och schysst mot användaren.

Nya HTML- och CSS-funktioner

När du använder nya funktioner i HTML, CSS eller nya filformat behöver du tänka på webbläsarstöd. Alla användare har inte den senaste versionen av Chrome, Firefox, Safari eller Edge.

På Can I use kan du kontrollera om en funktion fungerar i olika webbläsare. Ett exempel är AVIF-formatet. AVIF kan ge små bildfiler, men du bör kontrollera aktuellt stöd och erbjuda ett alternativ om formatet inte fungerar för alla användare.

När du blir bättre på webbutveckling kan du använda principen progressiv förbättring. Det betyder att sidan fungerar på en grundläggande nivå för alla, men kan få bättre bildformat, mer avancerad CSS eller extra funktioner i webbläsare som stödjer det.

<picture>
    <source srcset="bild.avif" type="image/avif">
    <source srcset="bild.webp" type="image/webp">
    <img src="bild.jpg" alt="Beskrivning av bilden">
</picture>

Kan alla använda webbplatsen?

Fundera på om webbplatsen fungerar för personer med funktionsnedsättning. Kan man navigera med bara tangentbordet? Syns fokusmarkeringen? Har bilder alt-text när de behöver det? Är kontrasten tillräcklig?

Detta hänger ihop med kapitlen om tillgänglighet, kontrast och formulär. Etisk design betyder att du inte medvetet gör sidan svår för vissa användare.

Skärmstorlek och responsiv design

Användare kan besöka sidan med mobil, surfplatta, laptop eller stor skärm. En sida som bara fungerar på din egen skärm är inte färdigtestad.

Testa därför både smal och bred vy. Kontrollera att navigation, bilder, formulär, knappar och text fortfarande fungerar. En mobilanvändare ska inte behöva zooma och flytta sidan i sidled för att läsa.

Språk, termer och ton

Använd språk som målgruppen förstår. Om webbplatsen riktar sig till nybörjare ska du undvika onödigt svåra termer eller förklara dem när de behövs.

Om du måste använda nya begrepp kan du lägga till en kort förklaring eller en ordlista. Tonen spelar också roll. En myndighetssida, en spelsida och en skoluppgift kan behöva helt olika språk.

Integritet

Om sidan har formulär som samlar in personuppgifter behöver du tänka på hur informationen hanteras. Fråga bara efter det som behövs och skriv tydligt varför du frågar.

Externa tjänster kan också påverka integriteten. Statistikverktyg, kartor, inbäddade filmer, typsnitt och formulärtjänster kan innebära att data skickas till andra företag. Se kapitlet om GDPR för mer om detta.

Uppkoppling och filstorlek

Utgå inte från att alla har snabb uppkoppling. En sida som känns snabb på skolans eller hemmets nätverk kan vara långsam på mobilnät eller äldre enheter.

Stora bilder och filmer kan göra sidan tung. Optimera därför bilder och video, använd rätt format, minska onödiga filer och testa gärna i Network-panelen. Det är ett etiskt val eftersom långsamma sidor kan stänga ute användare med sämre uppkoppling.

Bildernas innehåll

Bilder kan också skapa etiska frågor. Tänk dig att du fotograferar en person ute på stan och andra identifierbara personer syns tydligt i bakgrunden. Även om publicering ibland kan vara juridiskt möjlig, till exempel i journalistiska sammanhang, betyder det inte alltid att publiceringen är bästa valet.

Du kan välja en annan bild, beskära bilden eller göra personer i bakgrunden oidentifierbara. Som webbutvecklare behöver du alltså inte bara fråga får vi? utan också bör vi?.

Automatiska funktioner kan såra

Automatiska funktioner kan få oväntade konsekvenser. Sociala medier kan till exempel skapa automatiska årsminnen eller sammanfattningar. För vissa användare kan sådant bli roligt, men för andra kan det lyfta fram sorgliga eller känsliga händelser.

Artikeln Using Ethics In Web Design tar upp varför alla som bygger webben behöver tänka på konsekvenserna av sina val. Texten Inadvertent Algorithmic Cruelty är ett känt exempel på hur en automatiserad funktion kan träffa väldigt fel.

Länkar och vidare läsning

• Can I use: kontrollera stöd för HTML, CSS och webbformat
• Can I use: AVIF image format
• web.dev: AVIF
• Lawline: Kan en tidning publicera en bild på mig utan min tillåtelse?
• Smashing Magazine: Using Ethics In Web Design
• Eric Meyer: Inadvertent Algorithmic Cruelty

Fundera själv

• Varför är det bättre att ge AVIF till webbläsare som klarar det, men ha WebP eller JPG som alternativ?
• Varför bör du hålla nere filstorleken även om sidan laddar snabbt på din egen uppkoppling?
• Hur hade du gjort om du tog en bild där privatpersoner syns tydligt i bakgrunden?
• Kan du komma på en automatisk funktion på webben som kan bli olämplig eller sårande i vissa situationer?