Proof of Concept V2

In PoC-V2 wordt de feedback verwerkt die uit de user test van PoC-V1 is verkregen. Naast deze feedback zijn er nog andere functionaliteiten die besproken zijn met mijn developer begeleider geïmplementeerd. 

PoC-V2 Video

 

De volgende feedback is de feedback uit de user test die opgelost/geïmplementeerd zijn in dit proof of concept.

1. De image input veld bij de user profile pagina schaalt niet mee (13 inch scherm).
>Prioriteit: Medium
>Mogelijke oplossing: Maak het input veld responsive zodat het op kleiner schermen onder de afbeelding komt of smaller wordt.

Het was gemakkelijk om dit probleem op te lossen door de structuur en de CSS aan te passen waardoor het input veld wel meeschaalt met het formulier. Dit is gedaan met behulp van flex box. 

User profile is nu responsive

 

2. Bug: Notificaties hebben geen achtergrond kleur. (Noty alerts)
>Prioriteit: High

Het kostte enige tijd om te vinden waar het probleem met de Noty alert vandaan komt. Uiteindelijk bleek dat de blue.bundle.css (die standaard met Backpack komt) bij de Noty alert messages ook geen achtergrond heeft. Dit is de file die gekopieerd is om de custom_backpack_bundle.css te maken. Het probleem blijkt in één van de node_module files te zitten die een niet werkend thema importeert. Door hier een ander thema in te laden werkt de achtergrond. 

Rechts boven is nu een Noty alert zichtbaar met achtergrond.

Origineel in blue.bundle.css

@import "node_modules/@digitallyhappy/backstrap/src/scss/_backstrap_miscellaneous";

Aangepast naar:

@import "node_modules/@digitallyhappy/backstrap/src/scss/blue";

3. Notificaties toevoegen bij acties zoals het verbergen/tonen van artiesten/nummers.
>Prioriteit: Medium
>Mogelijk oplossing: Voeg een alert functie toe aan de verberg/toon knop.

Na het oplossen van de Noty alert probleem is er een alert toegevoegd aan de verberg/toon knop in de Top artiesten en Topnummers tabellen. Dit was gemakkelijk toe te voegen door de alert documentatie te volgen. De message veranderd gebaseerd of het item verborgen of getoont wordt.

public function visibility($id)
{
    $track = TopTrack::where('id', $id)->first();

    if ($track->status === false) {
        $statuschange = true;
        $statusmessage = 'Het nummer is verborgen';
    } else {
        $statuschange = false;
        $statusmessage = 'Het nummer is zichtbaar';
    }
    \Alert::add('success', $statusmessage)->flash();

    TopTrack::where('id', $track->id)->update(['status' => $statuschange]); // Get all Top-artists from db
    return redirect()->back();
}

4. Het verschil tussen het disabled field en een normaal field is niet goed te zien.
>Prioriteit: Low
>Mogelijk oplossing: Gebruik attribute disabled op input field zodat het veld geen focus krijgt en pas de achtergrondkleur aan naar een donkerdere grijs.

Als vierde was het disabled veld aan de beurt. Dit is opgelost door de readonly status te veranderen naar Disabled. Daardoor krijgt het veld ook geen focus attribute mee. De focus zorgden voor een groene rand waardoor het veld er aanpasbaar uit zag. Daarnaast is de achtergrondkleur aangepast zodat deze een tint donkerder is.

Disabled field in PoC-V1 met de attribute Readonly en een lichte achtergrondkleur.

Disabled field in PoC-V2 met de attribute Disabled en een donkere achtergrondkleur.

 

5. Test: Wat gebeurt er als er 1000+ rijen in de database zijn, zoekt het zoekveld dan net zo snel?
>Prioriteit: High

Een van de testpersonen vroeg zich af wat er gebeurt met de snelheid van de zoekfunctie wanneer er gezocht wordt door meer dan 1000+ items. Het zoekveld bij de tabellen filtert bij elke letter de tabel op inhoud. In de user test zaten er ongeveer 50 items in de tabel waarbij deze zoekfunctie snel reageert. Om dit te testen is er met behulp van de seeder functie van laravel 1000 rijen toegevoegd met mock data aan een tabel. 

Bij het testen met 1000 rijen was er nauwelijks verschil te merken daarom is er nog een test gedaan met 10.000 rijen en ook hier was er geen verschil in snelheid te merken. Dit lijkt voor nu geen problemen op te leveren.

Zoek veld test met 1000 rijen in de tabel

Zoek veld test met 10.000 rijen in de tabel

 

 Problemen/verbeteringen die zijn onderzocht maar niet geïmplementeerd:

1. De multiselect optie moet steeds opnieuw worden aangeklikt om een item aan toe te voegen.
>Priority: Low
>Mogelijke oplossing: Wanneer de multiselect wordt geopend moeten meerdere items aangevinkt kunnen worden en pas worden toegepast wanneer er op een knop “toepassen” wordt gedrukt.

Om dit op te lossen moet er een custom filter input field worden gemaakt. Dit is interessant om verder te testen wanneer Backpack toegepast wordt in de praktijk. Voor het PoC is dit geen belangrijke feature.

2. De reset knop voor het resetten van alle filter, sorteer en zoekfuncties in een tabel is moeilijk te vinden.
>Prioriteit: Low
>Mogelijke oplossing 1: De reset knop moet zichtbaarder in de pagina staan waarbij de functie duidelijk is.
>Mogelijke oplossing 2: De reset filters knop moet ook de sorteer en zoekopties resetten en daarmee altijd zichtbaar zijn als er wordt gesorteerd, gefilterd of gezocht.
>Mogelijke oplossing 3: Er moet een extra functie worden toegevoegd aan de sorteer kolom momenteel is dat “ascend, descend” hier zou reset aan toegevoegd moeten worden.  

Het beste is om de mogelijke oplossingen samen te voegen. Het is mogelijk om de reset knop aan te passen, in PoC-V2 is de tekst van de knop aangepast naar “Reset tabel” om al een duidelijke functie te geven aan de knop.

De overige problemen uit de test analyse zijn implementatie keuzes die zijn gemaakt voor die PoC die verder niet relevant zijn voor het aantonen van de mogelijkheden en limitaties van Backpack.

Charts

In PoC-V2 zijn de charts verder onderzocht en geïmplementeerd. De meeste van de charts die standaard bij consoletvs komen (chartjs, highcharts, c3, Frappe charts, Echart etc) werken met dezelfde functies waardoor ze met het voorbeeld van Backpack allemaal werken, behalve Frappe charts. Tijdens het zoeken naar documentatie/voorbeelden voor het implementeren van Frappe charts kwam er een demo project van Backpack naar voren met daarin een aantal chart voorbeelden met o.a een voorbeeld van Frappe Charts. Deze demo's zorgen voor een basis voor het opzetten van de charts.

Voor de charts zijn er een aantal verschillende datavisualisaties opgezet met de data uit de database en elke met een andere chart library. 

datavisualisaties met chartjs (Links en rechts boven), Highcharts (Links onder), Frappe charts (Rechts onder)

 

Responsive table

Als laatste is er gekeken naar de responsiveness van de tabel. De tabel heeft standaard een responsiveness, echter werkt dit met kolom prioriteit. Aan elke kolom kan een prioriteit worden gegeven, op basis van deze prioriteiten wordt er bepaald welke kolom wordt verborgen wanneer de tabel te breedt wordt. het kan dus zijn dat je op je mobiel maar 2 kolommen te zien krijgt, de rest zit achter een details menu.

Het is mogelijk om teksten op karakters af te breken zoals hier bij nr15:

De titel van nr15 wordt afgebroken op karakter.

Een probleem ontstaat echter bij de genres kolom. De genres worden allemaal individueel in een tag gezet omdat het een Array is. De genre kolom neemt vervolgens de volledige tabel breedte in beslag omdat ze niet op karakter worden afgebroken. Om dit op te lossen is er geprobeerd om een maximale kolombreedte aan de genre kolom te geven. Dit lijkt uit de documentatie niet mogelijk te zijn. Daarom is er in het PoC-V1 de kolom versmald met CSS.

In PoC-V2 is er gekeken of dit op een betere manier opgelost kan worden. Door een Display: flex en een flex-wrap op de spans te zetten worden de genres automatisch onder elkaar gezet en prioriteit gegeven aan de andere kolommen in de tabel. Nu schalen de kolommen beter mee. 

td > span {
    display: flex;
    flex-wrap: wrap;
}

Voorbeelden hoe de tabel responsive werkt met/zonder extra css

Conclusie

Het niet kunnen instellen van een vaste kolombreedte is een minpunt voor de tabel. Er zijn kolommen die standaard niet zoveel ruimte nodig hebben zoals id’s. Met CSS is dit wel op te lossen maar het zou beter zijn als hier meer opties voor waren. 

Verder is de feedback die vanuit de user test is gekomen vrij gemakkelijk op te lossen. Sommige punten zullen nog extra onderzoek nodig hebben om te bepalen of het aanpassen de tijd en moeite waard is. Voor nu is PoC-V2 samen met de bevindingen van de usertest voldoende om een advies te geven of Backpack een geschikt alternatief is voor Orchid.