Eenvoudig en helder presenteren van de tarieven en de verschillen tussen producten en diensten is belangrijk bij tarievenlijst.
Webdesign van tarievenlijsten
Als marketeer kijk je naar je productenportfolio en benadruk je het onderscheidende kenmerk. Dat wil je ook terugzien in de tarievenlijsten of prijslijsten. Prospects moeten niet verward worden door een overvloed aan informatie, maar alleen de informatie zien waarin zij geïnteresseerd zijn: features (kenmerken), opties en kosten.
Als webdesigner gebruik je deze input om de tarievenlijsten te ontwerpen. Aandachtspunten bij webdesign van tarievenlijsten zijn:
- Welke informatie moet getoond worden en wat laten we weg?
- Hoe benadrukken wij de verschillen? Wat is het onderscheidende kenmerk?
- Kleurgebruik, bijvoorbeeld belangrijke details aangeven door middel van een specifieke kleur.
- Welke stijl past bij het bedrijf?
- Typografie? Denk aan grootte lettertype voor prijzen en producten/diensten.
- Gebruik van pictogrammen (icons)? Pas op voor overdaad.
- Usability ofwel wat gebeurt er als CSS en Javascript uitgeschakeld zijn?
- Accessibility ofwel hoe toegankelijk is de website voor iedereen?
- Responsive ofwel hoe ziet het er uit op een smartphone?
Hoe maak je een tarievenlijst in GenerateBlocks?
GenerateBlocks heeft patronen voor verschillende secties op een webpagina. Zoiets kun je vervolgens eenvoudig aanpassen. WordPress heeft standaard ook patronen, maar je kunt beter die van GenerateBlocks gebruiken (tip: kijk rechts op het scherm nadat je op plus gedrukt hebt). Klik rechtsboven op het GenerateBlocks pictogram of klik onder GenerateBlocks op “Open patroonbibliotheek”
In deze patronen wordt gebruik gemaakt van GenerateBlocks header blocks. Beter voor schermlezers én een semantisch correctere benadering is om gebruik te maken van een lijstweergave (list blocks). Nadeel van het gebruik van list blocks is dat het moeilijk is om een tarievenlijst te maken waarin je een vergelijking maakt tussen producten met betrekking tot onderdelen welke er niet en wel in zitten. Je kan zelf zulke vergelijkingsoverzichten maken door gebruik te maken van HTML-tabelelementen, zie ook dit artikel. Eenvoudiger is gebruik te maken tabel plugin zoals TablePress en wp DataTables. De premium versie van wp DataTables heeft ook een aantal templates voor vergelijkingstabellen. Voor een standaard tarievenlijst c.q. prijslijst is een lijstweergave een goede oplossing.
- Toggle switch: https://generate.support/topic/toggle-for-gp-tab/, zie ook: adminbar https://www.youtube.com/watch?v=pTYQyXfIMEY
- Icons: https://generate.support/topic/put-icon-and-text-to-left/
- Pricing tables: https://generateblocks.com/library/?pattern-category=pricing-table&pattern-type=free
- Pricing table with sticky headline: https://generate.support/topic/pricing-table-w-sticky-headline/
- https://launchhubstudio.com/blog/how-to-make-comparison-tables-web-accessible en https://theadminbar.com/accessibility-weekly/the-html-behind-accessible-tables/
