Free Energy

Gebruikerservaring (User Experience)

De checklist hieronder is een bijlage bij de opdracht Free Energy.
Gebruik de checklist om je voor te bereiden op het ontwerpen en bouwen van twee pagina’s van een website waarin je de module opneemt.
Je gaat dezelfde websites die je voor usability beoordeeld hebt nog eens bekijken, maar nu op het onderdeel User experience.

  • Kopieer de tekst van de checklist en plak deze in een google sheets bestand.
  • Maak achter elk beoordelingscriterium een dropdownmenu (invoegen – dropdownmenu)
  • Maak in het dropdownmenu 5 opties (van 1 tot 5)
 
  • Ga door elk punt en beoordeel hoe goed de website voldoet aan de genoemde criteria.
  • Benoem 3 sterke punten van de onderzochte websites.
  • Benoem 3 verbeterpunten voor de onderzochte websites.
  • Lever de uitwerking van de checklist in via de inlevermap.
    Dit zal onderdeel zijn van de eindbeoordeling van de opdracht.
    Het is niet toegestaan om voor het uitvoeren van deze opdracht AI te gebruiken.
    Bij de beoordeling kunnen vragen gesteld worden over het gepresenteerde onderzoeksresultaat.
  • Vermeldt duidelijk de url van de onderzochte websites en jullie namen.
  • Gebruik je bevindingen bij het vormgeven van de website voor jullie opdracht.
 

Checklist

2.1. Visueel ontwerp

  • Is de visuele presentatie aantrekkelijk en professioneel?
    • Het ontwerp is consistent, met een duidelijke kleurenschema en branding.
    • Beelden en iconen zijn van hoge kwaliteit en dragen bij aan de gebruikerservaring.
  • Is de website visueel aantrekkelijk zonder te druk te zijn?
    • De website is overzichtelijk, zonder overdaad aan tekst, afbeeldingen of advertenties.
 

2.2. Laadsnelheid

  • Laadt de website snel op verschillende apparaten?
    • De website laadt binnen 3 seconden op desktop.
    • De website laadt binnen 5 seconden op mobiele apparaten.
 

2.3. Consistentie en herkenbaarheid

  • Zijn de lay-out en interactie-elementen consistent op de hele website?
    • Knoppen, menu’s en formulieren hebben een consistente stijl en werking.
  • Is het duidelijk dat je op de website van een leverancier / installateur van zonnepanelen bent?
    • De branding is duidelijk zichtbaar op elke pagina (bijv. logo, huisstijl).
 

2.4. Interactiviteit en feedback

  • Geeft de website directe feedback bij interactie?
    • Knoppen veranderen van kleur of stijl bij hoveren of klikken.
    • Formulieren en interacties worden bevestigd met meldingen of feedback (bijv. “Uw aanvraag is verzonden”).
 

2.5. Emotionele impact

  • Voelt de website veilig en betrouwbaar aan?
    • Er is een gevoel van veiligheid door gebruik van vertrouwde kleuren en iconen (bijv. slotjes voor beveiligde betalingen).
    • Er is duidelijke informatie over privacy en veiligheid (bijv. privacybeleid, SSL-certificaat).
 

2.6. Toegankelijkheid

  • Is de website toegankelijk voor mensen met beperkingen?
    • De website kan worden bediend met een toetsenbord.
    • Er zijn beschrijvingen voor afbeeldingen (alt-teksten) en video’s.
    • De tekst is groot genoeg en er is voldoende contrast tussen tekst en achtergrond.
 

2.7. Content specifiek voor zonnepaneelbedrijven

  • Worden de producten en diensten duidelijk uitgelegd?
    Elk zonnepaneelsysteem of installatiepakket heeft een overzichtelijke uitleg, inclusief specificaties zoals vermogen, rendement en garantie.

  • Zijn er handige tools beschikbaar, zoals een terugverdientijd-calculator of subsidiecheck?
    De website biedt hulpmiddelen zoals calculators voor terugverdientijd, energiebesparing, of een check voor subsidies en regelingen.

  • Is er duidelijke informatie over prijzen, financieringsopties en voorwaarden?
    Kosten en financieringsmogelijkheden zijn helder gecommuniceerd, zonder verborgen kosten of onduidelijke voorwaarden.

2.8. Algemene indruk

  • Hoe ervaar je het gebruik van de website als geheel?
    • De website voelt professioneel en betrouwbaar aan.
    • Het was gemakkelijk om de gewenste informatie te vinden en taken uit te voeren.

De vormgeving

Je gaat een visueel ontwerp maken voor een website van een leverancier/installateur van zonnepanelen. Dit ontwerp zal onderdeel zijn van de website die jullie gaan bouwen en waar de zonnepanelenmodule in opgenomen wordt.
Gebruik de bevindingen van jullie UX-analyse en het functioneel ontwerp om een gebruiksvriendelijke, aantrekkelijke en toegankelijke website te creëren.

Doelgroepanalyse
Bepaal de doelgroep van de website. Denk aan mensen die geïnteresseerd zijn in zonnepanelen en verduurzaming, zowel particulieren als bedrijven. Wat vinden zij belangrijk in een website? Denk aan gemak, betrouwbaarheid, en duidelijke informatie over producten en diensten.

Kleurenschema en Branding 
Kies een kleurenschema dat past bij duurzaamheid en energie. Zorg voor consistentie in het gebruik van kleuren, logo’s en lettertypes door de hele website heen. Denk aan de associatie van groen en blauw met duurzaamheid en energie.

Homepagina Layout
Ontwerp de homepagina. Dit is de eerste indruk die gebruikers van de website krijgen. Zorg ervoor dat de pagina aantrekkelijk is, met een duidelijke kop, call-to-action (bijv. “Vraag nu een offerte aan” of “Ontdek onze zonnepanelen”), en een overzichtelijke structuur. Voeg visuele elementen toe zoals foto’s van zonnepanelen, installateurs of duurzame energie.

Productpagina Layout
Maak een ontwerp voor een productpagina. Deze pagina moet informatie bieden over de zonnepanelen, de installatieprocessen en de voordelen van de producten. Denk aan afbeeldingen van de producten, specificaties, en een duidelijke call-to-action zoals “Bestel nu” of “Meer informatie”.

Consistentie en Navigatie
Zorg ervoor dat de navigatiebalk duidelijk en gemakkelijk te begrijpen is. Houd de indeling consistent op elke pagina. Zorg voor herkenbare interactie-elementen, zoals knoppen en formulieren, die in lijn zijn met de branding van de website.

Interactiviteit en Gebruiksvriendelijkheid
Maak een ontwerp dat interactief is. Denk bijvoorbeeld aan knoppen die van kleur veranderen als je eroverheen beweegt, en duidelijke feedback bij het invullen van formulieren of het klikken op links.

Test en Feedback
Vraag medeleerlingen om jullie ontwerp te beoordelen en geef elkaar feedback. Gebruik deze feedback om verbeteringen door te voeren.

Te leveren producten:

  • Een volledig uitgewerkt visueel ontwerp van ten minste twee pagina’s (homepagina en productpagina) met aandacht voor kleurgebruik, branding en interactie.
    Als je het ontwerp maakt in een tekenprogramma op je laptop, lever dan JPG-bestanden in.
    Je mag het ontwerp oom met de hand op papier maken. Scan of fotografeer de ontwerpen om ze alsnog digitaal in te kunnen leveren.
  • Minimaal 2 pagina’s (prototype) gemaakt met HTML/CSS. In één van de pagina’s is de correct werkende rekenmodule opgenomen.
    Heb je er behoefte aan om je HTML/CSS vaaardigheden op te halen? Dat kan op deze pagina!
  • Een korte toelichting op hoe jullie de UX-principes hebben toegepast in jullie ontwerp.
  • Een overzicht van de kleuren, lettertypes en iconen die jullie hebben gebruikt.
 

Lever het ontwerp en de toelichting in via de inlevermap.