Styling van je InSite en OutSite

Met InSite en OutSite van AFAS is veel mogelijk. Door alle informatie die je kunt ontsluiten is het soms lastig om de juiste manier te vinden dit te presenteren. 

Op deze pagina gaan we in op een aantal designprincipes die je helpen om overzichtelijke en gebruiksvriendelijke pagina's en een goede navigatiestructuur te bereiken.

Design is hoe het werkt, 
niet hoe het eruit ziet


Een InSite of OutSite die er gelikt uitziet, waar jij de complimenten voor krijgt. En dat met een goed design in jouw huisstijl. Dat is wat je wil! Het is een kwestie van tijd, focus en de juiste aanpak. Dáár willen we je bij helpen. Zo bereiken jouw collega’s, klanten of potentiële klanten makkelijker, sneller en fijner hun doelen op jouw site.

Het design van je site is dus belangrijk voor het oog, maar is onlosmakelijk verbonden met de usability van je InSite of OutSite.

Informatie behapbaar en vindbaar maken

Bezoekers, collega’s of klanten komen met een bepaald doel naar jouw website, klantportaal, werkenbij-site of InSite. Je wilt ze het zo makkelijk mogelijk maken om hun doelen te bereiken. Of dit nu gaat om je bedrijfsprocessen of een klant die contact met je wilt opnemen. Je moet slim nadenken over de manier waarop je informatie deelt op jouw site. Sterker nog, door bewust te zijn van een aantal slimme trucs, kun je mensen sturen en helpen om zo makkelijk mogelijk hun doelen op de site te behalen. En hoe je het ook went of keert, het oog wilt ook wat.

Kijk de online sessie terug

Dag van de AFAS Beheerder 2022 

 

De belangrijkste tips uitgewerkt

Lettertype, lettergrootte & regelafstand

Lettergrootte en regelafstand

Vroeger was een lopend lettertype van 10 of, 12 px heel normaal. Alleen is dit de laatste jaren flink veranderd. Dat komt zeker alleen niet door de vergrijzing. Beeldschermen worden groter, maar ook vooral de schermresolutie wordt groter. Vaak is de afstand van de persoon tot het scherm dan niet meer in verhouding om informatie goed te lezen op het scherm.

Is de grootte van je lettertype nog kleiner dan 14 px? Dan moet je toch eens sterk overwegen er wat aan te doen. Voor je InSite moet het echter wel praktisch blijven. Op de InSite van AFAS zelf gebruiken we standaard 15 px. Op AFAS.nl gaan we tegenwoordig tot wel 22 px voor introductieteksten. Een groot verschil, maar het leest wel heel fijn!

Wat het voor jouw InSite of OutSite moet zijn is lastig te zeggen. Dat hangt van meerdere factoren af. Maar 15 px is wel het minimale voor het lopende lettertype. Kopteksten kan je toepassen van 20 px tot zelfs 48 px. Je kunt dit heel makkelijk voor jezelf testen in de thema-instellingen, zonder dat iemand daar last van zal hebben. Simpelweg de grootte aanpassen, het concept opslaan! Onze ervaring is dat je voor een OutSite je je lettergrootte groter dan maken voor je InSite. Het moet wel praktisch blijven.

Voor de regelafstand is de stelregel dat deze anderhalf keer de lettergrootte is. Bij een lettergrootte van 16 px wordt de regelafstand bijvoorbeeld 24 px en voor 20 px wordt dit 30 px. 

Lettertype (font)

Ziet jouw lettertype er ongeveer zo uit?

Dan is er werk aan de winkel! Het is essentieel dat je lopende lettertype goed leesbaar is. Anders heb je een grote kans dat mensen jouw teksten niet (goed) kunnen lezen. Voor je kopteksten heb je wel de mogelijkheid om een bijzonder lettertype te gebruiken. Je kunt je wel afvragen of dit verstandig is. Vaak zijn lettertypes al vastgelegd in de huisstijl van je organisatie. Het is aan te raden deze altijd te gebruiken.

Er zijn heel wat goed leesbare lettertypes standaard beschikbaar in InSite & OutSite voor je lopende lettertype. Wij zouden één van onderstaande lettertypes aanraden:

  • Arial
  • Noto Sans
  • Nunito
  • Open Sans
  • Roboto
  • Source Sans Pro

Scannend lezen

Waarschijnlijk lees je niet elke letter op een pagina. Dat is helemaal niet erg. 

Koppen zijn belangrijk


Hoe kijk jij zelf naar een site? Grote kans dat je op deze pagina ook al wat teksten overgeslagen hebt. Dat is ook helemaal niet erg, want de meeste websitebouwers haken daar slim op in. De onderwerpen waar je meer over wilt lezen pak je er snel uit doordat er een kop boven staat die je aandacht trekt.

Mensen houden van opsommingen


Achtergronden over de volledige breedte

Een voorbeeld met een achtergrondafbeelding over de hele breedte

 

deze sectie blijft leeg

In dit inhoudsblok laad je de achtergrondafbeelding. De achtergrondafbeelding van het eerste blok met inhoud van een sectie wordt overgenomen in de hele sectie. De achtergrondafbeelding staat op 'volledig overlappen'. Je geeft dit blok een vaste hoogte zodat je op zowel desktop als mobiel de afbeelding goed kan zien.

Dit inhoudsblok heeft rondom marges van 30 px en een witte achtergrondkleur. Hierdoor heb je 'lucht' in het inhoudsblok en steekt het af tegen de achtergrondafbeelding. 

Omdat dit blok niet het eerste blok met inhoud van de sectie is, blijft de achtergrondkleur 'binnen' het inhoudsblok en wordt dit niet overgenomen in de rest van de sectie. 

Dit gehele blok bestaat uit 3 secties in 1 sectierij. De middelste sectie is de uitvulsectie en de twee buitenste secties zijn 200 px breed. De linker en rechtersectie blijven leeg. In de middelste sectie staan 3 inhoudsblokken onder elkaar. Je kunt ervoor kiezen om het bovenste en onderste blok 'tekst met opmaak' uit te schakelen voor mobiel.

deze sectie blijft leeg

Werken met documentsjablonen

Wat is nu precies het verschil tussen een document en een portalpagina en wanneer kies je voor welke?


Documentsjablonen zijn niet anders dan een verzameling van documenten en portalpagina's. Je kunt zowel documenten als portalpagina's aanmaken in een documentsjabloon. Het documentsjabloon kan je zelf ook een naam geven. De naam bepaald de URL die jouw document op portalpagina vervolgens mee krijgt. Je hebt de mogelijkheid om zelf nieuwe documentsjablonen aan te maken wanneer je dit wilt.

Documentpagina's

  • Sjabloon inrichten (vaste opmaak)
  • Wijzigingen in het sjabloon werken overal door
  • Tonen in weergaven (met weergavesjablonen)
  • Lezersniveau instellen (voor autorisatie)
  • Te verplaatsen van documentsjabloon
  • Werken met maximale breedte beperkt mogelijk
  • Documenten kunnen niet worden gekopieerd

Waar gebruik je het voor?

  • Statische websitepagina's
  • Nieuwsberichten

Portalpagina's

  • Per pagina de vrijheid in opmaak en indeling
  • Niet de mogelijkheid om collectief aan te passen
  • Niet te tonen in weergaven
  • Selecties toe te passen (voor autorisatie)
  • Niet te verplaatsen van documentsjabloon
  • Werken met maximale breedte volledig mogelijk
  • Mogelijkheid tot het kopiëren van portalpagina's

Waar gebruik je het voor?

  • Landingspagina's
  • Functionele pagina's

Vragen of hulp nodig?

Heb je een vraag of inrichtingsvraagstuk? Servicemangement helpt je graag verder!