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

Jonas Söderström • 2023
Typografi

Trä
ff
#20 • Onsdag 10 maj
Jonas Söderström • Vt 23 • UX Writing • Nackademin

View Slide

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.)

•
🫣

View Slide

Repetition

View Slide

Tre sorters user research
•Intervjuer (i kontext)

•Observationer (dito)

•Data

View Slide

Sätt vi inte är förtjusta i
•Enkäter

•Fokusgrupper

View Slide

mvongrue/ Flickr
Knottrighet
Gummiblandning
Fokusgrupper

View Slide

Varför spelas det
inte mer?

View Slide

De flesta bollar

såg ut så här

View Slide

thenoodleator/ Flickr
En boll med en inbyggd mikro-
pump, som kan ”poppa ut”

View Slide

Jonas Söderström • 2023 Faisal AlKhudairy/ Flickr
Marknadsandelen?

View Slide

luzer/ Flickr
Från 32 % till 64 %

View Slide

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

View Slide

”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

View Slide

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?

View Slide

6 K-KOMPASSEN
KONTEXT
KUNSKAP
KOMMUNIKATION
 
& KOOPERATION
KONTROLL
KONSEKVENSER
KONKURRENS

View Slide

VI SÖKER INSIKTER, INTE STATISTIK
30 personer
 
5 statistiska
sanningar
5 personer
 
30 insikter

View Slide

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

View Slide

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?

View Slide

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!

View Slide

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!

View Slide

Webbtypografi

View Slide

A
Läsning är ingen naturlig aktivitet

View Slide

Läsning och
förståelse är målet
Typogra
fi
är verktygen

View Slide

Vilket typsnitt är bäst?

Storlek?

Hur långa rader?
Grunderna

View Slide

”En undersökning visar …”
Ta det med en nypa salt.

View Slide

• 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

Display-typsnitt
(eller rubrik-typsnitt)
vs bröd-typsnitt

View Slide

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

Mission
Impossible
SVINDLANDE
HÖJDER

View Slide

Brödtext
 
och allmänt

View Slide

Aalborg
Två grundtyper
Aalborg Antikva

Serif-typsnitt
Linjär

Grotesk

Sans serif
Anses numer lika lättlästa
g
g
Serif
Serif

View Slide

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

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

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

Älgbix
Verdana
Älgbix
Älgbix
Calibri
Trebuchet
Älgbix
Open Sans
Älgbix
Lucida
Grande
Arial
Älgbix

View Slide

Skillnader i bokstavsformer
skapar olika grad av svärta
eller ljushet i textbilden
Man strävar normalt efter en ”lagom” svärta

View Slide

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

Slutna former
 
eller öppna

View Slide

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

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

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

• Atkinson Hyperlegible

View Slide

En annan detalj
e a s e a s
Adobe Garamond
Helvetica

View Slide

x-höjd
xnh73 %
Century Gothic
xnh55 %
Adobe Garamond

View Slide

xnh
xnh
xnh
xnh
73 %
69 %
52 %
72 %
Cochin Myriad
Century Gothic
Trebuchet
xnh
Open Sans
72 %
xnh55 %
Adobe Garamond
xnh63 %
Minion

View Slide

Proportioner

View Slide

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

… för rubriker

View Slide

… men också för knappar

View Slide

… och en
smalare för
opinions-
artiklar
NY Times har
en måttligt
smal rubrikstil
 
för nyheter …

View Slide

WCAG:s riktlinjer
 
för typografi

View Slide

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

View Slide

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.

View Slide

Maximal radlängd
≈ 56 tecken = två alfabet

View Slide

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

View Slide

Radavstånd
Kan vara viktigare än storlek för god läsbarhet

View Slide

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
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
Ju längre
rader,
 
desto mer
radavstånd

View Slide

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
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
Kortare
rader,
 
mindre
radavstånd

View Slide

Brödtext ska ha
extra radavstånd…
…men rubriker
minskat radavstånd!

View Slide

Rubrik med enkelt
radavstånd

View Slide

Rubrik med
 
0,7 radavstånd

(224/194 p)

View Slide

VERSALER
 
vs
 
gemener

View Slide

NO TIME TO DIE
Överdelen av bokstäverna är de vi känner igen – vi läser i överkant
NO TIME TO DIE

View Slide

Kerning
Anpassa avståndet mellan speci
fi
ka bokstavspar
L A
LA
T A
TA
V
V A
A 👎
👍

View Slide

Spärrning
Att generellt minska bokstavsavståndet
 
mellan alla bokstäver
Knipning
Knipning
Knipning

View Slide

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.)

•
🫣

View Slide

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
🥂

View Slide

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

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

Jonas Söderström
PRO

More Decks by Jonas Söderström

Other Decks in Design

Featured

Transcript

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

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

Jonas Söderström PRO

More Decks by Jonas Söderström

Other Decks in Design

Featured

Transcript

Jonas Söderström
PRO