Träff #11 • Ingresser , Webbtypografi • Tor 16 mars • vt 23 • UX Writing

Transcript

1. Jonas Söderström • 2023
   Ingresser
   
   
   Typografi
   Trä
   ff
   #11 • Torsdag16 mars
   Jonas Söderström • Vt 23 • UX Writing • Nackademin
   

   View Slide

2. Jonas Söderström • 2023
   Idag
   Lite repetition
   
   
   Liten rubrikuppgift
   
   
   Ingresser
   
   
   UX-bonus: Webbtypogra
   fi
   
   
   

   View Slide

3. Jonas Söderström • 2022
   Repetition
   • Skriv rubriker så läsarna vet vad de kan hoppa över.
   
   
   • Se till att få med nyckelord som tydliggör området.
   
   
   • Försök visa ”vad ger det mig” i rubriken.
   
   
   • Var mer misstänksam mot korta rubriker än mot långa.
   
   
   • Använd verb i rubrikerna.
   
   
   • Använd gärna tilltal - ”du”, ”vi”, ”din” .
   
   
   • Inledningarna ”Så”, ”Då”, ”Därför”, ”Här” … är e
   ff
   ektiva.
   

   View Slide

4. Jonas Söderström • 2023
   Lockande?
   Du kan inte ana vad som hände sen
   

   View Slide

5. Jonas Söderström • 2023
   Men vad ger det mig???
   

   View Slide

6. Jonas Söderström • 2023
   

   View Slide

7. Jonas Söderström • 2023
   Lägg viktiga ord
   
   i främre delen av meningen!
   (Frontloading)
   

   View Slide

8. Jonas Söderström • 2023
   

   View Slide

9. Jonas Söderström • 2023
   Hundratals växter har förbättrat skolans inomhusmiljö
   Krisberedskapsveckan ska få
   fl
   er Timråbor att re
   fl
   ektera över hur man kan lösa
   vardagen vid kris
   Har du ett hjälpmedel du inte använder?
   Årets barnrättsutmärkelse Elefanten till Barnrättsombuden i Västernorrland
   UPPGIFT:
   SKRIV NYA
   RUBRIKER MED
   MAX 30
   

   TECKEN!
   

   View Slide

10. Jonas Söderström • 2023
    Hundratals växter har förbättrat skolans inomhusmiljö
    Krisberedskapsveckan ska få
    fl
    er Timråbor att re
    fl
    ektera över hur man kan lösa
    vardagen vid kris
    Har du ett hjälpmedel du inte använder?
    Årets barnrättsutmärkelse Elefanten till Barnrättsombuden i Västernorrland
    Målgrupp:
    

    Timrå-bor
    

    View Slide

11. Jonas Söderström • 2023
    Max 30 tecken! Till exempel
    De
    fi
    ck Elefantenpriset 2023 (28 tkn)
    

    Timrå kommun prisad (19 tkn)
    

    Elefanten till Timrå bibliotek (30 tkn)
    
    
    Så kan du lösa vardagskrisen (28 tkn)
    

    Så ska Timrå möta kriser (24)
    

    Lös vardagen vid kris och krig
    
    
    Växter ger bättre skolmiljö (27)
    

    Växter hjälpte skolans klimat (29)
    

    Bättre skolmiljö med gröna rum (30)
    
    
    Slutat använda ett hjälpmedel? (30)
    

    Lämna tillbaka hjälpmedel här (29)
    

    Några oanvända hjälpmedel? (
    (Elefant)
    
    
    (Kris)
    
    
    (Skolmiljö)
    
    
    (Hjälpmedel)
    

    View Slide

12. Jonas Söderström • 2022
    Gör gärna rubriker långa,
    om det behövs …
    Ok, det var korta rubriker. Men:
    

    View Slide

13. Jonas Söderström • 2023
    … men skriv korta
    inledningar!
    Gör tröskeln in i texten så låg som möjligt!
    Få och korta meningar!
    

    Inga bisatser!
    

    Enkla och korta ord!
    

    View Slide

14. Jonas Söderström • 2023
    Mest lästa artikel (feb 2007)
    60.000 tecken = 12 sidor
    Eat food. Not too much. Mostly plants.
    Sju ord. Tre meningar. Sex bokstäver.
    

    View Slide

15. Jonas Söderström • 2022
    Det skulle kunna ha varit…..
    Frågan om vilken diet som är den nyttigaste har diskuterats
    under många år av läkare, fysiologer, närimngsforskare. Olika
    experter har haft olika syn på saken, och otaliga förslag till
    dieter har avlöst varandra. Vissa har hållit fram
    medelhavsdieten, medan andra förespråkat en stenålders-
    diet … bla bla bla
    
    
    Men, i själva verket …
    

    View Slide

16. Jonas Söderström • 2023
    Jag har gråtit. Ja, jag har bölat som
    Jag har gråtit. Ja, jag har bölat som ett barn.
    Längsta ord: 6 bokstäver.
    

    View Slide

17. Jonas Söderström • 2023
    Jag har gråtit.
    
    
    Ja, jag har bölat som ett barn.
    
    
    Jag har traskat varv efter varv runt
    lägenheten som en rastlös hund.
    
    
    För det
    fi
    nns ingenting annat att göra.
    3
    
    
    7
    
    
    12
    
    
    7
    Median ordlängd = 4 bokstäver
    

    View Slide

18. Jonas Söderström • 2023
    Kom ihåg:
    • Gör tröskeln in i texten så låg som möjligt
    
    
    • Enkla ord.
    
    
    • Korta meningar.
    
    
    • Ta med det viktigaste.
    
    
    • Starta inte ”djupt” (”Redan de gamla
    grekerna…”).
    
    
    • Starta inte ”mjukt” –
    

    allmänna fraser kring ämnet.
    

    View Slide

19. Jonas Söderström • 2023
    Starta inte ”mjukt”
    

    View Slide

20. Jonas Söderström • 2022
    Det skulle kunna ha varit…..
    Frågan om vilken diet som är den nyttigaste har diskuterats
    under många år av läkare, fysiologer, närimngsforskare. Olika
    experter har haft olika syn på saken, och otaliga förslag till
    dieter har avlöst varandra. Vissa har hållit fram
    medelhavsdieten, medan andra förespråkat en stenålders-
    diet … bla bla bla
    
    
    Men, i själva verket …
    

    View Slide

21. Jonas Söderström • 2023
    NYT
    

    View Slide

22. Jonas Söderström • 2023
    NYT
    

    View Slide

23. Jonas Söderström • 2022
    Starta inte ”mjukt”
    Varför använda en köksplanerare?
    
    
    Att bygga ett nytt kök är en stor dröm för många, men det
    kan vara en utmaning att hitta ett kök som passar din stil och
    dina behov. Med en köksplanerare blir det enklare för dig att
    skapa drömköket precis som du vill ha det.
    
    
    Elgiganten > Meny > Epoq Kök & Tvättstuga > Epoq Designer - Rita ditt eget kök
    

    View Slide

24. Jonas Söderström • 2022
    Skolplattformen
    Ditt barn och ditt barns lärare
    använder Skolplattformen
    dagligen i den kommunala
    grundskolan. Där finns verktyg
    som underlättar planering och
    lärande.
    
    
    Här finns viktig information från
    ditt barns skola, som schema,
    närvaro, bedömning/betyg
    kontaktuppgifter till lärare och
    annan personal.
    
    
    Bla, bla,
    bla
    

    View Slide

25. Jonas Söderström • 2022
    Skolplattformen
    Här finns viktig information från
    ditt barns skola, som schema,
    närvaro, bedömning/betyg
    kontaktuppgifter till lärare och
    annan personal.
    
    
    Bla
    

    View Slide

26. Jonas Söderström • 2022
    Skolplattformen
    Här finns schema, närvaro,
    bedömning/betyg,
    kontaktuppgifter till lärare och
    annan personal, samt annan
    viktig information.
    Det
    konkreta
    först!
    

    View Slide

27. Jonas Söderström • 2021
    ”Har jag covid-19?”
    

    View Slide

28. Jonas Söderström • 2022
    Webbtypografi
    

    View Slide

29. Jonas Söderström • 2023
    A
    Läsning är ingen naturlig aktivitet
    

    View Slide

30. Jonas Söderström • 2023
    Läsning och
    förståelse är målet
    Typogra
    fi
    är verktygen
    

    View Slide

31. Jonas Söderström • 2023
    Vilket typsnitt är bäst?
    
    
    Storlek?
    
    
    Hur långa rader?
    Grunderna
    

    View Slide

32. Jonas Söderström • 2023
    ”En undersökning visar …”
    Ta det med en nypa salt.
    

    View Slide

33. Jonas Söderström • 2023
    • Läsning är extremt komplext och resultaten
    

    kan till stor del vara motstridiga, beroende på
    textens storlek, läsarens avstånd till den,
    belysningen, innehållet etc…
    • Även om ett resultat tycks vara att en design
    läses ”snabbare” eller ”lättare”, kan skillnaderna
    vara små i praktiken.
    
    
    • Människor har ofta en annan uppfattning om
    läshastighet etc, än vad tidtagaruret säger.
    

    View Slide

34. Jonas Söderström • 2023
    Brödtext
    

    och allmänt
    

    View Slide

35. Jonas Söderström • 2023
    Aalborg
    Två grundtyper
    Aalborg Antikva
    
    
    Serif-typsnitt
    Linjär
    
    
    Grotesk
    
    
    Sans serif
    Anses numer lika lättlästa
    g
    g
    Serif
    Serif
    

    View Slide

36. Jonas Söderström • 2023
    A
    Typsnittsformer
    A
    Linjär
    
    
    Grotesk
    
    
    Sans serif
    Antikva
    
    
    Serif-typsnitt
    
    
    Medieval-
    antikva
    
    
    Garald
    Didon
    
    
    Nyantikva
    A
    Mekan
    
    
    Egyptienne
    
    
    Slab serif
    A
    Real
    
    
    Transantikva
    A
    

    View Slide

37. Jonas Söderström • 2023
    A
    A
    Futura
    
    
    Helvetica
    
    
    Frutiger
    
    
    Garamond
    
    
    Berling
    
    
    Bembo
    
    
    Minion
    
    
    Goudy Old
    Style
    Didot
    
    
    Bodoni
    A
    Rockwell
    
    
    Clarendon
    
    
    Memphis
    
    
    Beton
    
    
    A
    Baskerville
    
    
    Times
    A
    Typsnitt har namn – tidigare ofta efter formgivaren eller uppdragsgivaren (tryckeri/tidning)
    Linjärer har varit populära för skärmar,
    pga sämre upplösning än papper
    

    View Slide

38. Jonas Söderström • 2023
    Olika typsnitt i samma grad
    

    framträder i olika storlek på skärmen.
    Älgx Älgx Älgx
    Monaco 175 p Trebuchet 175 p Adobe Garamond 175 p
    Ä 175 p
    Ä
    

    View Slide

39. Jonas Söderström • 2023
    Älgbix
    Verdana
    Älgbix
    Älgbix
    Calibri
    Trebuchet
    Älgbix
    Open Sans
    Älgbix
    Lucida
    Grande
    Arial
    Älgbix
    

    View Slide

40. Jonas Söderström • 2023
    Skillnader i bokstavsformer
    skapar olika grad av svärta
    eller ljushet i textbilden
    Man strävar normalt efter en ”lagom” svärta
    

    View Slide

41. Jonas Söderström • 2023
    Långt nere under honom
    bullrade den nyvaknade
    staden; ångvinscharne
    snurrade nere i Stads-
    gårdshamnen, järn-
    stängerna skramlade i
    järnvågen, slussvaktarnes
    pipor visslade,
    ångbåtarne vid
    Skeppsbron ångade,
    Kungsbacksomnibussarn
    e hoppade skallrande
    fram på den kullriga
    stenläggningen;
    Långt nere under
    honom bullrade den
    nyvaknade staden;
    ångvinscharne snurrade
    nere i Stadsgårds-
    hamnen, järnstängerna
    skramlade i järnvågen,
    slussvaktarnes pipor
    visslade, ångbåtarne vid
    Skeppsbron ångade,
    Kungsbacksomnibussar
    ne hoppade skallrande
    fram på den kullriga
    stenläggningen;
    Långt nere under honom
    bullrade den nyvaknade
    staden; ångvinscharne
    snurrade nere i Stads-
    gårdshamnen, järn-
    stängerna skramlade i
    järnvågen, sluss-
    vaktarnes pipor visslade,
    ångbåtarne vid Skepps-
    bron ångade,
    Kungsbacksomni-
    bussarne hoppade
    skallrande fram på den
    kullriga stenläggningen;
    ITC Garamond Adobe Garamond Sectra
    

    View Slide

42. Jonas Söderström • 2023
    Display-typsnitt
    (eller rubrik-typsnitt)
    vs bröd-typsnitt
    

    View Slide

43. Jonas Söderström • 2023
    Långt nere under
    honom bullrade den
    nyvaknade staden;
    
    
    Långt nere under
    honom bullrade den
    nyvaknade staden;
    
    
    Långt nere under
    honom bullrade den
    nyvaknade staden;
    Röda Rummet
    
    
    Röda Rummet
    
    
    Röda Rummet
    
    
    Röda Rummet
    
    
    Röda Rummet
    
    
    Röda Rummet
    Brödtext Display
    

    View Slide

44. Jonas Söderström • 2023
    Slutna former
    

    eller öppna
    

    View Slide

45. Jonas Söderström • 2023
    oceas
    Slutna former gör bokstäverna svåra att skilja från varandra i små grader
    oceas
    oceas
    g
    Mabry
    Myriad
    Atkinson Hyperlegible
    Helvetica
    29
    Mabry
    29
    Open Sans
    g
    oceas
    Myriad
    Helvetica
    

    View Slide

46. Jonas Söderström • 2023
    Ill
    Bokstavsformer och bokstavspar bör vara distinkta!
    Ill
    Helvetica Tahoma
    Ill
    Trebuchet
    !"
    Arial Avenir
    nh
    Ill
    Atkinson Hyperlegible
    #$%&
    Helvetica Trebuchet
    lo b lo b
    Atkinson
    Hyperlegible
    

    View Slide

47. Jonas Söderström • 2023
    Bokstavsformer och bokstavspar bör vara distinkta!
    &'
    Helvetica BBC Reith
    bd bd
    Atkinson
    Hyperlegible
    ij
    Helvetica Tahoma
    ij
    Mabry
    ij ij
    Atkinson
    Hyperlegible
    

    View Slide

48. Jonas Söderström • 2023
    • Atkinson Hyperlegible
    

    View Slide

49. Jonas Söderström • 2023
    En annan detalj
    e a s e a s
    Adobe Garamond
    Helvetica
    

    View Slide

50. Jonas Söderström • 2023
    x-höjd
    xnh73 %
    Century Gothic
    xnh55 %
    Adobe Garamond
    

    View Slide

51. Jonas Söderström • 2023
    xnh
    xnh
    xnh
    xnh
    73 %
    69 %
    52 %
    72 %
    Cochin Myriad
    Century Gothic
    Trebuchet
    xnh
    Open Sans
    72 %
    xnh55 %
    Adobe Garamond
    xnh63 %
    Minion
    

    View Slide

52. Jonas Söderström • 2023
    Proportioner
    

    View Slide

53. Jonas Söderström • 2023
    Många sajter/appar
    använder högsmala
    typsnitt (”condensed”)
    
    
    för att få in tillräckligt
    med information på
    smala mobilskärmar.
    Älgbix
    Älgbix
    Älgbix
    Myriad Condensed
    Blair MD ITC
    Myriad Normal
    

    View Slide

54. Jonas Söderström • 2023
    … för rubriker
    

    View Slide

55. Jonas Söderström • 2023
    … men också för knappar
    

    View Slide

56. Jonas Söderström • 2023
    … och en
    smalare för
    opinions-
    artiklar
    NY Times har
    en måttligt
    smal
    rubrikstil för
    nyheter …
    

    View Slide

57. Jonas Söderström • 2023
    Tisdag
    
    
    Mars
    21
    Genomgång
    Uppgift 2
    Ton
    
    
    Avsändar-
    personor
    
    
    Framing
    16.00–18.00
    
    
    Flöden
    

    Ux-research:
    kundresa
    Länkar
    
    
    UX-process
    Torsdag
    
    
    Mars
    30
    Mars
    27
    Vecka 12 Vecka 13
    Torsdag
    
    
    Mars
    23 Måndag
    

    View Slide