Forrige innlegg
Neste innlegg
Til toppen
Til toppen




2013:
Elefantzonen ble oppdatert for siste gang i 2011.
Nå finner dere meg på binka.no.





Lesbarhet på nett

Information Architects har en post om lesbarhet på nett. Den er verdt å lese for alle som publiserer bokstaver på internett, men spesielt de som publiserer lange tekster. Da jeg leste den for første gang gikk et stort lys opp for meg. Kanskje du også kan få deg en aha-opplevelse?

  1. Finn en bok.
  2. Finn en nesten hvilken som helst blogg på nettet.
  3. Åpne boka på en side med mye tekst.
  4. Hold den opp ved siden av skjermen.
  5. Still deg spørsmålet: Hvorfor er teksten på skjermen så fryktelig liten?

Vi er vant til at tekst på nett blir smått. Men hvorfor er vi egentlig det? Det trenger ikke være sånn. Det kan fungere på trykk, men på skjerm blir alt mye mindre. En fin, skumrende boks av tekst som passer inn i helheten. Men hvor lett er det å konsentrere seg om informasjonen som står der? Slutt å gni nesa mot skjermen! Med skjermoppløsning på 1680 x 1050 er det på tide å dra lesbarheten med i omveltningen.

Å lære av sine egne feil

Jeg fikk mye positiv oppmerksomhet for det forrige designet mitt, og tusen takk for det! Så hvorfor ville jeg egentlig bytte? Jeg har fått høre ting som at det passet godt til innholdet, er koselig, unikt og blir lagt merke til. Alt dette er veldig bra. Men det veier likevel ikke opp for sine feil og mangler som jeg nå har lært at man kan gjøre annerledes. Dette går igjen i de fleste blogger og nettaviser:

  1. Tekststørrelsen er for liten.
  2. Det er for mange forstyrrende elementer i margene.

Tekststørrelse

Standardstørrelsen er i de fleste nettlesere er 16px. De er laget for å vise 16px som default, 100%, standard. Likevel bruker de fleste nettaviser underlig nok 12px. Mange blogger som viser hovedinnholdet sitt i så lite som 11px. Og her kommer vi – 16px – KABOOM! Det er litt uvant i starten.

«Faktisk er det ikke så stort. Med en gang du begynner å bruke den tenker du «Oi, alt annet er jammen smått!» Fysisk er 16pt på nett like stort som 11pt i print. Jepp, skjermen er lenger unna, noe som også spiller en stor rolle.»
(Information Architects til Wilsonminer)

Luft

Men jo større tekststørrelse du har, jo mer luft trenger du. Hvis du bare skrur opp tekststørrelsen på bloggen din uten videre kan det hende det vil føles klovneaktig og beklemt. Det er fordi du har tilpasset bloggen din til liten tekst, og kanskje ikke har tilpasset den med nok luft. Den større teksten vil ikke ha nok rom til å utfolde seg på. Øyet blir kjempestressa og aner ikke hvor det skal se. Alt er informasjon. En bakgrunnsfarge, en tekstfarge, et fontskifte. Leserøynene synes det er veldig hyggelig med et tydelig skille mellom hva som er hovedinnhold og hva som nesten ikke er viktig i det hele tatt (kill your darlings!).

Når du skal organisere informasjonen på bloggen din er det lett å tenke på alt det fine du kan fylle opp sidebaren med for at leserne skal ha noe å leke med og orientere seg etter mens de leser teksten din. Men husk, pynt og dilldall er en måte å rømme fra teksten på.

Om du skulle ta hensyn til alt dette føler du kanskje at bloggen din ser bleik og tom ut. Men det er bare fordi du er vant med rotet i sidebaren. Det er ditt rot, så du merker det ikke. Men leserne merker det. Prøv, eksperimenter, spør noen andre om deres mening, og du vil høre det: Ah, *puster inn og ut* – det var jammen deilig med luft!

Linjehøyde og linjebredde

Linjer som ligger for tett forstyrrer leservennligheten fordi den øvre og den nedre linjen blir tatt inn av øyet samtidig. For god lesbarhet trenger du en linjehøyde som ikke er for lav, men heller ikke for høy. Ved feil linjeavstand bruker leseren energi på feil områder og blir fortere sliten. Det er ikke særlig snilt. Husk at øyet er på luksus-spa i teksten din. Ikke la det anstrenge seg. La leseren lene seg tilbake i stolen og nyte lesningen.

Det samme gjelder hvor ofte en linje blir kuttet i et nytt linjeskift. Er linjene for korte blir teksten humpete og stacatto. Er de for lange og det virker som en evighet til neste linjeskift mister leserne tålmodighet. 66 tegn per linje er anbefalt for nett.

Kontrast

Det er viktig å velge tekstfarger med omhu. #333 på #FFF er optimalt. Med #000, som er den mørkeste fargen du kan få på nett, kan kontrasten risikere bli for stor igjen og derfor slite på øyet.

Men kontrast handler også om størrelser. Skill viktig info fra mindre viktig info med å gjøre noe større og noe mindre. Skal du ha en sidebar, ikke la tekststørrelsen i denne være like stor (eller liten) som i hovedinnholdet.

Bli uavhengig av bilder

Mange bloggere sier: «Tekst på nett blir kjedelig uten bilder.» Skribenter som meg synes dette er veldig trist. Bokstavene også. De er egentlig mye mer spennende enn de får lov til å vise. Fordi de har blitt undertrykt i mikroskopiske størrelser hele denne tiden har de ikke fått lov til å snurre seg rundt. Så slipp dem fri! Sett typografien først, tilpass alt annet etter den. Bilder er fint det også, men ikke bruk det for å skjule teksten. Webdesign er 95% typografi.

If you can’t make your website look nice without text in images, I am afraid that you will have to start again from scratch.
(Information Architects)

Test skrifttyper

Typetester.org kan du prøve forskjellige skriftstiler og hente CSS-koden til dem.

Øverst i høyre hjørne står base font size, det er her du skal endre tekststørrelsen. Under size på det grønne feltet er størrelsene oppgitt i em. La den være på 1em i starten og endre heller på base font size. 1em betyr 100%. Hvis base-fontstørrelsen er 16px og size står på 1em betyr det at fonten er 100% av 16px, altså 16px.

Under leading kan du redigere linjehøyden i em. 1.5em betyr at linjehøyden er 150% eller 50% større enn fontstørrelsen som du har valgt som base.

En blogg er en bok

Noen ganger tenker jeg at å designe en blogg er som å innrede et rom. Putte de riktige bøkene i bokhylla, de riktige platene i CD-hylla. Stemning. Koselig. Pent. Invitere lesere.

Men egentlig, hvor har vi fått det fra at bloggen er et viruelt rom? Hvorfor ikke zoome inn og se på det vi vanligvis leser ting på. Nemlig en bok. Det er ikke noe overflødig pynt eller linkelister i margene i en bok. Hvorfor kan ikke leservennligheten på en blogg være like god som i en trykket roman? Skjermene har forandret seg, men blogger og nettaviser har ikke. Bygg ut i bredden og høyden. Forstørr. I starten var jeg litt bekymret for at all denne forstørringen ville gjøre sidene milelange, scroll etter scroll. Og det ble de. Men det gjør da ingenting! Å scrolle er nemlig som å bla om sidene i en bok, rene sider, fulle av luft.

Initially it is more difficult to create a good layout with a big font size, but that difficulty will help you design a simpler, clearer site. Cramming a site with information isn’t difficult, but making it simple and easy-to-use is.
(Informationarchitects.jp)

Binka Hei! Takk for at du leser på Elefantzonen! Jeg er Binka og jeg blogger om å studere Tekst & Skribent på Westerdals, om grafisk design, notatbøker og om å være forfatterspire. Ta med deg en RSS-feed, og følg meg på Twitter, Facebook eller Bloglovin. Du vet, sånn at du ikke går glipp av noe.

[aktt_tweets count="1"]
12 kommentarer Kommentarer RSS Skriv en kommentar

til «Lesbarhet på nett»

  1. 1

    For en inforik post!Denne siden må jeg lese mer på. Jeg ante ikke at det var så mye å tenke på, faktisk. Jeg liker det du skriver om at man skal være uavhengig av bilder, for det er jo det jeg prøver på selv. Og en blogg er absolutt som en bok!

  2. 2
  3. 3
    Reidun Beate sier:

    Jeg sliter aldri med å lese små skrift, men vet at mange ikke gidder å lese lange tekster på nett av den grunnen. :S

    SV: Ja jeg vet det. Jeg glemmer det hele tiden, men jeg lover å bli flinkere. Verste jeg vet er at folk ikke linker og slikt også gjør jeg en liten synd selv. Huff. Beklager virkelig. :(

  4. 4
  5. 5
    Kristine sier:

    Eg likar det du skriv, og du har fått meg til å tenka på noko eg ikkje har tenkt på før, for å sei det slik.

    Har du nokre idiotsikre tips for korleis ein kan gjera bloggen litt meir lesevennleg? :) (Liksom, for sånne som meg som verkeleg vil, men vel, ikkje får det heilt til)

    :)

    (Føler eg spammar bloggen din i desse dagar)

  6. 6
    Binka sier:

    @ Elisabeth Iskrem: Jeg er glad du fikk noe ut av det. Man kan fint greie seg uten bilder, ja, men det betyr ikke at det ikke er noe minus å bruke bilder (tvert imot!), bare man ikke bruker bilder som et substitutt for god typografi.

    @ Devendra Banhart: :)

    @ Reidun Beate: Sliter du ikke med det, virkelig? Du er heldig. Du må ha et veldig godt syn. :) Kanskje man bare ikke tenker på at det kunne vært bedre? Og når man finner en ny løsning så bare: «Wow, tenk at jeg hadde den bittelille skriften før, da!» :)

    @ Elisabeth: *neier*

    @ Kristine: Så bra at jeg fikk deg inn på nye tanker! Det er veldig kult. Jeg syntes nå egentlig jeg ga mange tips i dette innlegget her, da. :) Men kanskje jeg skal lage en liten liste med hva man helt konkret kan gjøre. Ja, det kan jeg ordne.
    (Fortsett å skrive kommentarer, Kristine, det er bare fint! Så lenge du holder deg til temaet er det jo dette kommentarfeltet er til.)

  7. 7
    Monica sier:

    Merkelig at du skriver ett slikt innlegg, like etter at jeg har vurdert å lage bloggen min om til bare EN spalte, nemlig bare teksten..:) Hvorfor har jeg ikke gjort det ennå? Irriterende! Jeg har alltid syntes at det er så praktisk med tre spalter, med masse stæsj, enkelt å finne alt da. Men det er jo helt sant at fokusen forsvinner fra teksten da, og DET ønsker jeg ikke. Ble inspirert av denne teksten. Tusen takk! :)

  8. 8
    Maja sier:

    For noen supre tips! Tusen takk :)

  9. 9
    Monica sier:

    Takk for inspirasjon! Påvirket av gode tips har jeg nå endret utseendet på bloggen min..:) Det er ikke meningen at den skal være LIK din, -den er jo egentlig ikke det, men vi har ganske lik smak når det gjelder bakgrunn ser jeg.

    Klems, Monica

  10. 10
    Undre sier:

    Flinke du, Binka!

    :D

  11. 11
    Binka sier:

    Takk for så fine kommentarer :)

  12. 12
    Vutarie sier:

    ooh ja, kan du ikke lage sånn liste som kristine lurte på? sånn for oss som kanskje ikke kan så veldig mye (eller ingenting) om html og css og sånt

Følg Elefantzonen med RSS