Inhoud

Content is king!

De inhoud komt op de eerste plaats, want het internet is een informatiemedium. Een relevante inhoud betekent ook een relevante website.

De informatie moet ook up-to-date gehouden worden, want up-to-date inhoud zorgt voor een betere zoekmachineranking.

Context is kingdom! (… or God!)

Inhoud:

• op maat van de bezoeker.
• volgens leeftijd, interesse …
• die zich aanpast volgens datum en/of tijd.

Citaat

“If Content is King, then Context is God.”
– Gary Vaynerchuk^[1] (ondernemer)

Soorten inhoud

De informatie van een website kunnen we onderbrengen in categorieën:

• Navigatie
• Teksten
• Niet-tekstuele media
  • Audio
  • Beelden (illustraties of foto’s)
  • Video
• Secundaire informatie
• Gestructureerde informatie

Informatiearchitectuur

IA is het structureel ontwerp van informatie.

houdt zich bezig met:

• Ordenen van de inhoud op de pagina’s
• Onderling organiseren van de pagina’s
• Labeling (naamgeving)
• Zoeken

Job/functie: Informatiearchitect
Stappen: Sitemap, Wireframes, Wireflow

Informatie indelen

De informatie van een website kunnen we op verschillende manieren indelen.

Exacte informatie-indeling

• Alfabetisch
• Chronologisch
• Geografisch
• Taal

Vage informatie-indeling

• Thematisch
  Onderwerp, categorie, tags
• Doelgroep
• Taak
  Actie, diensten, gebruikersinteractie
• Metafoor

Hybride informatie-indeling

Mengvormen van exacte en vage informatie-indelingen.

Informatiestructuren

De informatie op een website kunnen we op verschillende manieren structureren (opbouwen):

• Sequentieel (lineair)
• Hiërarchisch
• Als een web

In de praktijk hebben veel websites een combinatie van verschillende informatiestructuren.

Taak

Lees verder over navigatie in het onderdeel UI > Navigatie

Labelen

Wat is een label?

Definitie

Een label is een naam en/of icoon voor een stuk inhoud.

Een label wordt vooral gebruikt voor:

• navigatie;
• knoppen;
• formulierinput.

Tips voor labelen

• Wat gebruiken andere apps (websites, mobiele apps)?
  Een gebruiker heeft door ervaring vaak al een bepaald verwachtingspatroon. Dit verwachtingspatroon noemt met een mentaal model.
• Kies één bepaalde syntaxis.
  Kies een van de volgende, maar mix niet:
  • Werkwoord, bijv. “registreren”
  • Zelfstandig naamwoord, bijv. “registratie”
  • Vraag, bijv.: “Wil je registreren?”
• Gebruik een passende, samenhangende terminologie:
  • Kinderlijke termen
  • Vaktermen
  • Wetenschappelijke termen

Taak

Wat is er verkeerd aan deze lijst?

• Insecten
• Kikkers
• Reptielen
• Vissen
• Vogels
• Zoogdieren

De granulariteit is gemixt: “Kikkers” is een groep uit de klasse amfibieën, terwijl de andere woorden allemaal klassen zijn.

Goed

Mix de granulariteit niet.

Taak

Wat is er verkeerd aan deze lijst?

• Hoeden
• Jassen
• Hemden
• Riemen
• Sokken
• Schoenen

De lijst is onvolledig: “Broeken” ontbreekt.

Goed

Streef volledigheid na.

Labels op webformulieren

Definitie

Een webformulier (Eng. web form) is een interactief stukje van een webpagina met invulvelden, radioknoppen en/of aanvink. Een formulier heeft bijna altijd minstens een verzendknop.

Het inputveld moet altijd een label omschrijving krijgen.

Voorzie eventueel ook placeholdertekst (tijdelijke invulling).

Opgelet

Een veelgemaakte fout op webformulieren is dat er alleen placeholdertekst als label gebruikt wordt. Daardoor moet de gebruiker soms de ingevulde tekst wissen om te weten wat er nu weer ingevuld moest worden.

Floating labels

De placeholdertekst wordt het label zodra het inputveld focus krijgt. Het label wordt opnieuw placeholdertekst als de focus weg is zonder dat er tekst ingevuld is.

Voorbeeld

Material Design / Components — Text Fields / Labels (opens new window).

Geraadpleegde bronnen

• Smith, M.D. (2013, October). How the Float Label Pattern Started (opens new window).

Tekst voor het web

Schrijven voor het web:

• Voor de lezer
• Voor de zoekrobot (Zoekmachineoptimalisatie): SEO

Let op de Engelse schrijfwijze van optimization.

Niet-tekstuele media

De het gebruikte materiaal moet aansluiten bij Tone of Voice.

Opgelet

Let op met auteursrecht!
Bijv. zelfs als je zelf het onderwerp van een foto bent, dan nog heeft de fotograaf auteursrecht op de foto.

Zie ook

• https://mediawijs.be/dossiers/dossier-mediamakers/wat-het-portretrecht-het-recht-op-afbeelding (opens new window)
• http://www.sofam.be/nl/news/68/Sociale-netwerken-en-het-auteursrecht-van-de-fotografen (opens new window)

Beeldmateriaal moet naar het meest geschikte bestandsformaat geëxporteerd worden:

• Rasterafbeeldingen: JPEG, PNG, GIF, PDF …
• Vectorafbeeldingen: SVG, PDF …

Zodat een goed compromis tussen bestandsgrootte en beeldkwaliteit gevonden wordt.

Grotere bestanden zorgen voor langere laadtijden en voor meer dataverbruik, wat vooral op mobiele netwerken een probleem vormt.

Tip

Gebruik specifieke diensten om er (deels) de verantwoordelijkheid voor auteursrecht en dataverbruik op af te schuiven.

• Video: YouTube, Vimeo …
• Muziek: SoundCloud …
• Sociale media: Facebook, Instagram, Twitter, LinkedIn …
• …

Secundaire informatie

Contactgegevens

Vermeld (wanneer van toepassing) ook deze informatie:

• Adres;
• E-mail;
• Telefoon;
• Openingsuren;
• …

Juridische informatie

• Gebruiksvoorwaarden, Algemene Voorwaarden;
• Privacybeleid, cookiebeleid;
• Disclaimers;
• Auteursrecht;

Voorbeeld

Copyright © 2020 Arteveldehogeschool
Hoeft niet echt want in België heb je dat automatisch als auteur.

Gestructureerde informatie

• Komt (meestal) uit een database.
• Maakt het mogelijk om items te vergelijken.
• Maakt het mogelijk om producten of items op meerdere manieren te sorteren.
• Maakt het mogelijk persoonlijke configuraties op te zetten.

---

1. Kadanoff, M. (2012, September). “IF CONTENT IS KING, CONTEXT IS GOD,” said Gary Vaynerchuk (opens new window). Open Marketing. ↩︎