Hur man utformar läsbart innehåll för webben

Att designa innehåll är mer än bara att göra något ser bra ut. Du måste skapa en design som folk faktiskt kommer att läsa och hjälpa dem att engagera sig med innehållet. Ibland är det lättare sagt än gjort.

Människor har i allmänhet korta spänningar och du bör inte förvänta dig att de smälter varje ord på skärmen. Men du kan använda vissa designtekniker och element för att hjälpa användare att läsa så mycket som möjligt.

Upprätta hierarki med storlek och skala

Läsbar design börjar med flera nivåer av text. Att skapa en hierarki med tankar hjälper användarna att flytta igenom texten.

Större storlekar är en visuell signal som berättar för användarna att läsa en viss sak först eftersom det är viktigast. De flesta användarnas ögon kommer naturligtvis att flytta från större element till mindre, vilket ger ett fint visuellt flöde.

De flesta användarnas ögon kommer naturligtvis att flytta från större element till mindre, vilket ger ett fint visuellt flöde.

Få ut det mesta av H2, H3 och H4 taggar i designen och skapa en konsekvent skala för underrubriker som kan användas för att bryta upp stora textblock.

Att skapa en skala med konsekventa textplaceringar och storlekar gör det ännu enklare för användarna att navigera i texten. Detta gäller både för långformatinnehåll och till och med kort innehåll på hemsidor, till exempel Narrative, ovan.

Observera hur hemsidan har fyra olika textnivåer i hjälteområdet. Det finns en stor rubrik i färg, med ett kort stycke ovan. Då har kroppsinnehållet en stil med en extra fet linje för betoning. De flesta användare kommer att se orden i den här ordningen: Rubrik, fet text, kroppstext, rubrikrubrik på grund av vikterna, storleken och storleken på bokstäverna.

Välj läsbara teckensnitt

Medan en rolig nyhetstyp eller ett utarbetat manus kan vara mycket roligt att designa med, är det inte alltid det bästa valet för slutanvändaren.

Läsbara teckensnitt är sannolikt faktiskt att läsa.

Här är varför:

  • Mycket läsbara teckensnitt är enklare att skanna.
  • Letterforms är lätta att se i olika storlekar.
  • Brev går inte ihop eller skapar obekväma mellanslag eller former.
  • Dessa teckensnitt används ofta och enkelt för användarna. (Även teckensnitt som liknar varandra, men inte från samma familj, är kända för de flesta användare.)

Egenskaper för en läsbar typsnitt inkluderar:

  • Standardvikt - inte för tjock eller tunn
  • Vanlig x-höjd - inte för kort eller lång
  • Mer avrundade brevformar - så att? O? har en cirkulär form
  • Liten eller ingen snedställd
  • Brev som inte är för nära eller långt ifrån varandra

Titta på de här egenskaperna kan du se att nästan vilken typ av kategori som helst innehåller förmodligen ett läsbart alternativ. Du behöver inte hålla enbart till serifs eller sans serifs; en blandning av andra typsnitt är faktiskt bra. Var noga med att testa våra ord du planerar att använda i den typsnittet för att säkerställa att de är lätta att läsa.

Stackinnehåll för personer som söker

Stackningsinnehållet går tillbaka till hierarkin. Men med ett extra element - tänk på text och icke-textelement när du staplar innehåll.

Om användaren ser ett textblock och en bild på skärmen är bilden nästan alltid det som först får sin uppmärksamhet, vilket gör det viktigt att stapla element på ett sätt som hjälper användarna att flytta igenom dem från bilden till text.

Alzheimers Nya Zeeland, ovan, använder stapling för att få användare till huvudrubriken. Observera hur texten placeras i mitten av bilden med tre personer. Ditt öga går till ansikten först men faller sedan till den subtila animerade cirkeln med text inuti. Sedan flyttade ögat till det mindre, mer sekundära textblocket.

Och här är saken: Allt detta hände så snabbt när du först såg bilden som du kanske inte ens tänkt på det. De flesta användare skannar hela skärmen på samma sätt när de bestämmer om de ska interagera med innehållet eller inte.

Spela upp visuella

Spela upp visuella genom att integrera dem med andra element för en mer nedsänkt design.

Vill du verkligen se till att användarna ser ditt innehåll? Integrera text och bildmaterial på ett meningsfullt sätt. Skapa en hjältebild som använder en intressant visuell, ovanlig färgparing eller kombination av animering och bokstäver för att göra användarna pausade.

Det misstag som designers ibland gör är att skilja varje element i sin egen låda eller i rymden. Spela upp visuella genom att integrera dem med andra element för en mer nedsänkt design.

Octavo Designs, ovan, har en hemsida som du inte kan undvika att bli dras in. Till att börja med finns det en väldigt rolig utseende på en ljusfärgad bakgrund. Texten är väldigt mycket en del av bilden. (Det berör faktiskt koens horn på toppen.) Den här kombinationen av bilder och text drar användarna till innehållet, vilket gör att de vill ha mer.

Håll linjer (och tankar) Kort

Tänk på korta utbrott när du planerar designen. Varje sida eller skärm bör fokusera på en enda tanke och enkla, lättlästa block av text.

Strukturera och organisera tankar för användarna på ett sätt som uppmuntrar läsning:

  • Använd en-till tre-mening stycken
  • Inkorporera punktlistor
  • Använd underrubriker för att bryta upp stora textblock
  • Inkludera länkar för interaktivitet
  • Markera eller fetstil nyckelpunkter
  • Redigera all kopia för tydlighet och korthet

Skapa en kontaktpunkt

Varje design ska ha en kontaktpunkt. Brännpunkten är den del av designen som nästan alla användare kommer att se först. Det är ofta mycket visuellt eller står i stark kontrast till andra delar på skärmen.

Brännpunkten ska fastställa vad designen handlar om och varför användarna ska bry sig om.

I exemplet ovan använder Abingworth en ljusrosa blob som fokuspunkt. Det uppmärksammar på grund av färg och nyfikenhet (vad är det?) Och eftersom det kontrasterar mot det vita, öppna utrymmet på andra sidan skärmen.

Brännpunkten för designen ska vara din bästa bild, illustration eller animation och relatera till nyckelmeddelanden. Brännpunkten ska fastställa vad designen handlar om och varför användarna ska bry sig om. Eftersom det här är första platsen användare kommer att se, sätter det tonen för hur (och om) de kommer att interagera med designen.

Slutsats

Att skapa innehåll som användarna faktiskt kommer att läsa är mer än bara text på skärmen. Det är en kombination av skrivande och visuella element som dra användare in, hjälpa dem att få en glimt av vad designen handlar om och bestämmer sig för att fortsätta att interagera med den.

Medan det låter som mycket, händer allt i fråga om millisekunder. Det finns forskning som säger att de flesta användare har en guldfiskens uppmärksamhetstid - 8 sekunder - dra nytta av den tiden med innehåll som är lätt att läsa.