Träff #15a • Webbtypografi • 21 nov • ht 23 • UX Writing • Nackademin

Transcript

1. Jonas Söderström • 2023 Typografi Trä ff 15 • Tisdag 21 november Jonas Söderström • Ht 23 • UX Writing • Nackademin
2. Jonas Söderström • 2022 Repetition UX research
3. Jonas Söderström • 2022 Vad undersöker vi? ▸ Hur kan vi öka tiden varje besökare spenderar hos oss? ▸ Undrar om de kan handla nu när vi fl yttat ”köp”- knappen? ▸ Hur gör folk med all frukt? Finns det någon affärsmöjlig- het där? ▸ Vilka saker är viktiga för den som ska hyra båtplats i kommunen? Design / detalj Affär / förutsättningar
4. Jonas Söderström • 2023
5. Jonas Söderström • 2023 Intervju och obser- vation i miljö
6. Jonas Söderström • 2023 Boktips: Steve Portigal: Interviewing users rosenfeldmedia.com
7. Jonas Söderström • 2022 Webbtypografi
8. Jonas Söderström • 2023 A Läsning är ingen naturlig aktivitet
9. Jonas Söderström • 2023 Läsning och förståelse är målet Typogra fi är verktygen
10. Jonas Söderström • 2023 Vilket typsnitt är bäst? Storlek? Hur långa rader? Grunderna
11. Jonas Söderström • 2023 ”En undersökning visar …” Ta det med en nypa salt.
12. 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.
13. Jonas Söderström • 2023 Display-typsnitt (eller rubrik-typsnitt) vs bröd-typsnitt
14. 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
15. Jonas Söderström • 2023 Mission Impossible SVINDLANDE HÖJDER
16. Jonas Söderström • 2023 Brödtext och allmänt
17. 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
18. 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
19. 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
20. 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 Ä
21. Jonas Söderström • 2023 Älgbix Verdana Älgbix Älgbix Calibri Trebuchet Älgbix Open Sans Älgbix Lucida Grande Arial Älgbix
22. 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
23. 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
24. Jonas Söderström • 2023 Slutna former eller öppna
25. 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
26. Jonas Söderström • 2023 Ill Bokstavsformer och bokstavspar bör vara distinkta! Ill Helvetica Tahoma Ill Trebuchet nh Arial Avenir nh Ill Atkinson Hyperlegible lo b Helvetica Trebuchet lo b lo b Atkinson Hyperlegible
27. Jonas Söderström • 2023 Bokstavsformer och bokstavspar bör vara distinkta! bd Helvetica BBC Reith bd bd Atkinson Hyperlegible ij Helvetica Tahoma ij Mabry ij ij Atkinson Hyperlegible pq Helvetica BBC Reith pq pq Atkinson Hyperlegible
28. Jonas Söderström • 2023 • Atkinson Hyperlegible
29. Jonas Söderström • 2023 En annan detalj e a s e a s Adobe Garamond Helvetica
30. Jonas Söderström • 2023 x-höjd xnh73 % Century Gothic xnh55 % Adobe Garamond
31. Jonas Söderström • 2023 xnh xnh xnh73 % 52 % 72 % Cochin Century Gothic Trebuchet xnh Open Sans 72 % xnh55 % Adobe Garamond xnh63 % Minion Liten x-höjd Stor x-höjd
32. Jonas Söderström • 2023 Proportioner
33. 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
34. Jonas Söderström • 2023 … för rubriker
35. Jonas Söderström • 2023 … men också för knappar
36. Jonas Söderström • 2023 … och en smalare för opinions- artiklar NY Times har en måttligt smal rubrikstil för nyheter …
37. Jonas Söderström • 2023 Bra typsnitt: • PT Sans • Open Sans • Ubuntu • Myriad • Lato • Atkinson Hyperliegible • BBC Reith • PT Serif • Georgia • Adobe Garamond • Minion • Times
38. Jonas Söderström • 2022 WCAG:s riktlinjer för typografi
39. Jonas Söderström • 2023 WCAG om textstorlek • Minst 16 punkter för huvudsaklig text (brödtext) • 16 punkter ≈ 21 pixlar • Ingen definitiv riktlinje, men en genomgående rekommendation
40. Jonas Söderström • 2023 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.
41. Jonas Söderström • 2023 digitill.se
42. Jonas Söderström • 2023 Maximal radlängd ≈ 56 tecken = två alfabet
43. 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
44. Jonas Söderström • 2023 Radavstånd Kan vara viktigare än storlek för god läsbarhet
45. 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
46. 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
47. Jonas Söderström • 2022 Hur justera värden för text? • De exakta måtten hanteras i css-koden (cascading style sheets), där man anger värden för till exempel • line-height (radavstånd), • letter-spacing, och • word-spacing. • Skriv css själv – eller ha en dialog med frontend-utvecklare och uppmärksammar dem på WCAGs värden. • Använder man en “färdig” plattform, som Wordpress, fi nns möjlighet att använda färdiga designer med mallar, och många av dem framhåller att de är WCAG-säkrade.
48. Jonas Söderström • 2022 Hur justera värden för text? (2) • I en del plattformar kan man komma åt css- fi len direkt • W3schools har en (tror jag) komplett lista med css-egenskaper, som också ger exempel på värden och vila resultat de ger: • https://www.w3schools.com/cssref/index.php
49. Jonas Söderström • 2023 Brödtext ska ha extra radavstånd… …men rubriker minskat radavstånd!
50. Jonas Söderström • 2023 Rubrik med enkelt radavstånd
51. Jonas Söderström • 2023 Rubrik med 0,7 radavstånd (224/194 p)
52. Jonas Söderström • 2023 VERSALER vs gemener
53. 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
54. Jonas Söderström • 2023 Kerning Anpassa avståndet mellan speci fi ka bokstavspar L A LA T A TA V V A A 👎 👍
55. Jonas Söderström • 2023 Spärrning Att generellt minska bokstavsavståndet mellan alla bokstäver Knipning Knipning Knipning
56. Jonas Söderström • 2022 Ibland har vi fixerad text: pdf-er, powerpoints, Word …
57. Jonas Söderström 2023 Textdesign Hur vi gör fi xerad text maximalt läsbar, till exempel i pdf:er eller i presentationer (Powerpoint). Alla exempel med ojämn högermarginal.
59. While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate.
60. While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Håll ihop tankar och uttryck över radbrytningar.
61. While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Håll ihop tankar och uttryck över radbrytningar. • Mellan preposition och sitt huvudord (i Stockholm) • Mellan verb och verbpartikel (bryta av) • Mellan antals-si ff ra och sitt huvudord (100 slajds) • Mellan bestämd artikel och sitt huvudord (ett bord) • I sammansatta uttryck (project manager) • Efter första ordet i en mening • Efter första ordet i en bisats (… sajten, som …) Bryt inte:
62. Håll ihop tankar och uttryck över radbrytningar. Gäller även rubriker!
63. While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Se om du kan dela stycket i två (eller fl era), för att skapa mer en mer lätthanterlig textmassa. När ett stycke har en kort eller väldigt kort utgångsrad: Leta efter en mening som börjar längre in på raden, och som börjar en ny tanke. While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate.
64. While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Även om det vita utrymmet på slutraden är litet: se om det fi nns någon mening som börjar nära slutet av en rad.
65. While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Nytt stycke med kort utgångsrad! Fortfarande gäller att dela upp texten efter tanke-innehållet. Bryt inte mellan två meningar som hänger tätt ihop.
66. While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Två alternativ: indrag i början av raden, eller lite extra avstånd mella styckena.
67. While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Två alternativ: indrag i början av raden, eller lite extra avstånd mella styckena.
68. While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Två alternativ: indrag i början av raden, eller lite extra avstånd mellan styckena.
69. While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate.
70. While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Finns det något mer vi kan göra?
71. While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Jag använder ofta kursiv för att signalera citat eller titlar, men också för en medelstark betoning. Finns det mer vi kan göra?
72. While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Typogra fi är tonläge.
73. While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Från detta …
74. While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. … till detta.
75. Jonas Söderström • 2023 SEO, Ev besök av ux-”writer” Uppgift 3 = ni får inlämningsuppgift Testa text, användnings- tester Tisdag December 5 Flöden, Kundresa Tisdag December 12 Tisdag November 28 Tisdag December 19 UX-process