Weergave van tabellen

Nadat het was gelukt excel-bestanden in te laden in de webpagina en deze om te zetten naar het .json formaat waarmee ik de data kan manipuleren met JavaScript, heb ik eerst de code geschreven om de html voor een tabel op te bouwen met de juiste captions en headers. Deze tabel wordt vervolgens in de pagina geladen, maar is dan nog niet bijzonder goed leesbaar. Om dat te verhelpen heb ik naar aanleiding van de tests gekozen voor een donkere, maar rustige kleur voor de achtergrond die sterk contrasteert met de kleuren die voor de tekst gebruikt worden.

Het eerste prototype

Het tweede prototype

Zoals hierboven te zien is, heb ik de kleuren omgedraaid, omdat uit de tests bleek dat Roger een donkere achtergrond prettiger ervaarde.

Meerdere sheets

In de eerste versie kon alleen een excelbestand met een enkele sheet worden ingeladen. Toen ik verder testte met verschillende excel bestanden, kwam ik er achter dat het nodig is de gebruiker te laten kiezen tussen verschillende sheets. Zoals hieronder te zien is heb ik daarom toegevoegd dat als er meerdere sheets zijn, de gebruiker kan kiezen welke wordt weergegeven.

Eerst dacht ik alle sheets onder elkaar te zetten en een menu te maken, maar ook nu leek het mij beter de interface vrij te houden van elementen die niet relevant zijn. Daarom wordt de keuze dan ook wel overgeslagen wanneer er maar een enkele sheet in een excelbestand bestaat.

De tabel

De volgende stap was om de tabel zo duidelijk mogelijk vorm te geven. Om het beeld zo rustig mogelijk te houden, heb ik mij daarin beperkt tot het simpele kleurenschema van de vorige pagina's. Daarnaast gebruikt de tabel nu alle ruimte die beschikbaar is, zodat er veel ruimte tussen de verschillende cellen kan bestaan. De padding heb ik om dezelfde reden groter gemaakt. Om goed onderscheid te maken tussen de headers en de cellen, heb ik voor de headers het kleurenschema omgedraaid en de tekst dikgedrukt gemaakt.

Hier zie je de tabel zoals deze in eerste instantie wordt weergegeven. Interactie is nu nog niet mogelijk.

Navigatie

Na de volgende test ben ik aan de slag gegaan om het voor gebruikers mogelijk te maken met de tabel te interacteren. Zodoende heb ik aan alle rijen een tab-index meegegeven, zodat met de tab toets ook de rijen als interactieve elementen worden gezien en door te tabben navigeren door de tabel mogelijk wordt gemaakt. Meer over de iteraties in de interactie is hier te lezen.