Träff #20 • Webbtypografi • 10 maj • vt 23 • UX Writing • Nackademin

Transcript

1. Jonas Söderström • 2023 Typografi Trä ff #20 • Onsdag 10 maj Jonas Söderström • Vt 23 • UX Writing • Nackademin
2. Jonas Söderström • 2023 22 maj: Ditt bästa exempel? • Något som du är stolt över? Något som du tycker 
 ”Det här blev faktiskt bra” – stort eller smått. • Var inte blyg! (Alla är snälla här.) • 🫣
3. Jonas Söderström • 2022 Repetition
4. Jonas Söderström • 2023 Tre sorters user research •Intervjuer (i kontext) •Observationer (dito) •Data
5. Jonas Söderström • 2023 Sätt vi inte är förtjusta i •Enkäter •Fokusgrupper
6. Jonas Söderström • 2023 mvongrue/ Flickr Knottrighet Gummiblandning Fokusgrupper
7. Jonas Söderström • 2023 Varför spelas det inte mer?
8. Jonas Söderström • 2023 De flesta bollar såg ut så här
9. Jonas Söderström • 2023 thenoodleator/ Flickr En boll med en inbyggd mikro- pump, som kan ”poppa ut”
10. Jonas Söderström • 2023 Faisal AlKhudairy/ Flickr Marknadsandelen?
11. Jonas Söderström • 2023 luzer/ Flickr Från 32 % till 64 %
12. Jonas Söderström • 2023 FRÅGETEKNIK ÖPPNA FRÅGOR ▸ Ställ frågor utan givna svarsalternativ (ja/nej): ▸ ”Berätta om X” ▸ ”Hur skulle du beskriva 
 den här uppställningen?” ▸ Inte ▸ ”Gillar du X?” ▸ ”Är den här uppställningen överskådlig?” ▸ ”Berätta mer!” ▸ ”Förklara!” ▸ ”Hur menar du då?” ▸ ”När hände det senast?” ▸ ”Vad hände sedan?” ▸ ”Varför det?” LYSSNA, STÄLL FÖLJDFRÅGOR
13. Jonas Söderström • 2023 ”DET VORE BRA OM DEN HADE …” FRÅGETEKNIK ▸ “People will often say, ‘I’d like it better if it could do x.’ 
 It always pays to be suspicious of these requests for new features. ▸ If you probe deeper, it often turns out that they already have 
 a perfectly fi ne source for x and wouldn’t be likely to switch. 
 They’re just telling you what they like.” Steve Krug: Don’t make me think
14. Jonas Söderström • 2023 HITTA DJUPARE DRIVKRAFTER – SIKTA PÅ MAGEN FRÅGETEKNIK ▸ Vad gör dig nöjd, tillfreds, stolt … ▸ … när du går hem från jobbet / efter matchen / efter tvätten 
 / efter köpet? ▸ … när du går och lägger dig? ▸ Vad är det som skaver, gör ont, förstör dagen?
15. Jonas Söderström • 2023 6 K-KOMPASSEN KONTEXT KUNSKAP KOMMUNIKATION 
 & KOOPERATION KONTROLL KONSEKVENSER KONKURRENS
16. Jonas Söderström • 2023 VI SÖKER INSIKTER, INTE STATISTIK 30 personer 
 5 statistiska sanningar 5 personer 
 30 insikter
17. Jonas Söderström • 2023 För statistiska sanningar, sök hellre bland data ▸ Hur många avbryter köpet med artiklar i varukorgen? ▸ Hur få läser de sidor som läses minst på intranätet? ▸ Hur är fördelningen 
 av sökord? ▸ Vilka devicer accessar vilka sidor på unionen.se? Spool: ”The 300- million dollar button” Polisens intranät: över hälften av nyheterna lästes av bara 0,1% Socialstyrelsens sajt 
 är en uppslagsbok Sidan ”Varsel” accessas överväldigande via mobil
18. Jonas Söderström • 2023 BOTH WAYS ▸ Loggar visar att X procent avbryter köpet. Men varför? ▸ Några intervjuade säger att de inte orkar fylla i lösenord. Hur vanligt är det?
19. Jonas Söderström • 2023 Undvik hypotetiska frågor! • Skulle du vilja göra biljettbeställning …? • Vore det vara bra om man kunde se saldot…? • Vill du kunna provläsa kurslitteraturen? • Skulle, Vore, Vill!
20. Jonas Söderström • 2023 Fråga konkret om dåtid eller nutid! • Vad var den senaste konserten du var på? 
 Berätta om hur du beställde biljetter! • När kollade du saldot senast? Hur gjorde du då? • Till förra kursen, hur valde du bland kurslitteraturen? • Vad, när, hur!
21. Jonas Söderström • 2022 Webbtypografi
22. Jonas Söderström • 2023 A Läsning är ingen naturlig aktivitet
23. Jonas Söderström • 2023 Läsning och förståelse är målet Typogra fi är verktygen
24. Jonas Söderström • 2023 Vilket typsnitt är bäst? Storlek? Hur långa rader? Grunderna
25. Jonas Söderström • 2023 ”En undersökning visar …” Ta det med en nypa salt.
26. 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.
27. Jonas Söderström • 2023 Display-typsnitt (eller rubrik-typsnitt) vs bröd-typsnitt
28. 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
29. Jonas Söderström • 2023 Mission Impossible SVINDLANDE HÖJDER
30. Jonas Söderström • 2023 Brödtext 
 och allmänt
31. 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
32. 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
33. 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
34. 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 Ä
35. Jonas Söderström • 2023 Älgbix Verdana Älgbix Älgbix Calibri Trebuchet Älgbix Open Sans Älgbix Lucida Grande Arial Älgbix
36. 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
37. 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
38. Jonas Söderström • 2023 Slutna former 
 eller öppna
39. 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
40. 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
41. 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
42. Jonas Söderström • 2023 • Atkinson Hyperlegible
43. Jonas Söderström • 2023 En annan detalj e a s e a s Adobe Garamond Helvetica
44. Jonas Söderström • 2023 x-höjd xnh73 % Century Gothic xnh55 % Adobe Garamond
45. 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
46. Jonas Söderström • 2023 Proportioner
47. 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
48. Jonas Söderström • 2023 … för rubriker
49. Jonas Söderström • 2023 … men också för knappar
50. Jonas Söderström • 2023 … och en smalare för opinions- artiklar NY Times har en måttligt smal rubrikstil 
 för nyheter …
51. Jonas Söderström • 2022 WCAG:s riktlinjer 
 för typografi
52. Jonas Söderström • 2022 WCAG om textstorlek • Minst 16 punkter för huvudsaklig text (brödtext) • 16 punkter ≈ 21 pixlar • Ingen de fi nitiv riktlinje, 
 men en genomgående rekommendation
53. Jonas Söderström • 2022 WCAG om övriga textattribut • Radavstånd minst 1,5 gånger textens storlek (grad). • Avstånd mellan stycken minst 2 gånger textens storlek. • Bokstavsmellanrum minst 0,12 gånger textens storlek. • Ordmellanrum minst 0,16 gånger textens storlek.
54. Jonas Söderström • 2023 Maximal radlängd ≈ 56 tecken = två alfabet
55. Jonas Söderström • 2023 Långt nere under honom bullrade den nyvaknade staden; ångvinscharne snurrade nere i Stadsgårdshamnen, järnstängerna skramlade i järnvågen, slussvaktarnes pipor visslade, ångbåtarne vid Skeppsbron ångade, Kungs- backsomnibussarne hoppade skallrande fram på den kullriga sten- läggningen; stoj och hojt i fi skargången, segel och fl aggor som fl addrade ute på strömmen, måsarnes skri, hornsignaler från Skeppsholmen, gevärsrop från Södermalmstorg, arbetshjonens klapprande med träskorna på Glasbruksgatan, allt gjorde ett intryck av liv och rörlighet, som tycktes väcka den unge herrens energi, ty nu hade hans ansikte antagit ett uttryck av trots och levnadslust och beslutsamhet och, då han lutade sig över barriären och såg ner på staden under sina fötter, var det som om han betraktade en fi ende; hans näsborrar vidgades, hans ögon fl ammade och han lyfte sin knutna hand, som om han velat utmana den stackars staden Adobe Garamond 47 / 71 p 
 1,25 rader August Strindberg: Röda Rummet (1879) ≈ 58 tecken
56. Jonas Söderström • 2023 Radavstånd Kan vara viktigare än storlek för god läsbarhet
57. Jonas Söderström • 2023 Långt nere under honom bullrade den nyvaknade staden; ångvinscharne snurrade nere i Stadsgårdshamnen, järnstängerna skramlade i järnvågen, slussvaktarnes pipor visslade, ångbåtarne vid Skeppsbron ångade, Kungs- backsomnibussarne hoppade skallrande fram på den kullriga sten- läggningen; stoj och hojt i fi skargången, segel och fl aggor som fl addrade ute på strömmen, måsarnes skri, hornsignaler från Skeppsholmen, gevärsrop från Södermalmstorg, arbetshjonens klapprande med träskorna på Glasbruksgatan, allt gjorde ett intryck av liv och rörlighet, som tycktes väcka den unge herrens energi, ty nu hade hans ansikte antagit ett uttryck av trots och levnadslust och beslutsamhet och, då han lutade sig över barriären och såg ner på staden under sina fötter, var det som om han betraktade en fi ende; hans näsborrar vidgades, hans ögon fl ammade och han lyfte sin knutna hand, som om han velat utmana den stackars staden Adobe Garamond 47 / 71 p 
 1,35 rader August Strindberg: Röda Rummet (1879) Ju längre rader, 
 desto mer radavstånd
58. Jonas Söderström • 2023 Långt nere under honom bullrade den nyvaknade staden; ångvinscharne snurrade nere i Stadsgårdshamnen, järnstängerna skramlade i järnvågen, slussvaktarnes pipor visslade, ångbåtarne vid Skeppsbron ångade, Kungsbacksomnibussarne hoppade skallrande fram på den kullriga stenläggningen; stoj och hojt i fi skargången, segel och fl aggor som fl addrade ute på strömmen, måsarnes skri, hornsignaler från Skeppsholmen, gevärsrop från Södermalmstorg, arbetshjonens klapprande med träskorna på Adobe Garamond 47 / 1 radavstånd August Strindberg: Röda Rummet (1879) Kortare rader, 
 mindre radavstånd
59. Jonas Söderström • 2023 Brödtext ska ha extra radavstånd… …men rubriker minskat radavstånd!
60. Jonas Söderström • 2023 Rubrik med enkelt radavstånd
61. Jonas Söderström • 2023 Rubrik med 
 0,7 radavstånd (224/194 p)
62. Jonas Söderström • 2023 VERSALER 
 vs 
 gemener
63. Jonas Söderström • 2023 NO TIME TO DIE Överdelen av bokstäverna är de vi känner igen – vi läser i överkant NO TIME TO DIE
64. Jonas Söderström • 2023 Kerning Anpassa avståndet mellan speci fi ka bokstavspar L A LA T A TA V V A A 👎 👍
65. Jonas Söderström • 2023 Spärrning Att generellt minska bokstavsavståndet 
 mellan alla bokstäver Knipning Knipning Knipning
66. Jonas Söderström • 2023 22 maj: Ditt bästa exempel? • Något som du är stolt över? Något som du tycker 
 ”Det här blev faktiskt bra” – stort eller smått. • Var inte blyg! (Alla är snälla här.) • 🫣
67. Jonas Söderström • 2023 Genomgång uppgift 3 Måndag Maj 22 Testa text, Skriva för sök Onsdag Maj 24 Avslutning Måndag Maj 15 Vecka 20 Ditt bästa exempel? 
 AMA & det som 
 blev över? Onsdag Maj 17🇳🇴 Vecka 21 🥂