CD review feedback 17/01/2025

[lisavanmansom]

CD review feedback 17/01/2025

Krijn

• Try to apply Progressive Enhancement principles to the chatbot
• There's a difference between Firefox and Chrome
• Try to keep visual enhancements in CSS
• Make buttons unavailable without JS
• Menu doesn't work without JS

Charley:

Result-page:

• Is there a possibility to have more understanding for user where in the mourning stage or how many mourning stages you have.
• The design is doing what it needs to be do, it is a calm-vibe;
• Question: can you see the process as stages more to make it more consistent;
• Maybe make a timeline in the details element, search for a pattern in design, look at timeline in navigation;
• Make more consistency with font, letter-spacing etc.
   

Introduction-pages:

• first page: double text, welcome double, hover state is not very clear (not seeing difference, too subtiel)
• 2nd page: privacy is first, but is it really that important, maybe it’s better to change the order, and maybe change how privacy is designed
• Third page: maybe make the animation is a bit fast, not really consistent with the rest of the designed animations, but the overview is really well, ve

Multiple task-pages: 

• foreground and background on cards are not like the design

Egor:

• More consistency in folder structure;
• Make different js-files in lib for maintaibility;
• By font add the license;
• You can add small readme’s inside folders with instructions about the files, for example if there not finished;
• In the Readme, the installing-process description, add code like npm install
• More folders for components, like split images and icons for structure;
• Use css for blur background element instead of an image, it’s better for performance.
   

Julia:

• Introduction: change the design, the buttons placement is annoying if you’re trying to skip it fast, if you’re making it sticky it wil solve that problem;
• Form: make transition hover faster (0.2s) and not ease-in-out but for example quadratic.
• Progress-bar: make it white and give it a lower opacity, this will make it look less dirty;
• Use css for blur background element instead of an image, it’s better for performance.

Taken vanuit feedback

• css for blur background element instead of an image
• Feedback form-page verwerken

[lisavanmansom]

Feedback form-page verwerken

Form hover

Make transition hover faster (0.2s) and not ease-in-out but for example quadratic.

uitwerking

  label:has(input[type=radio]) {
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

Form progress-bar

Make it white and give it a lower opacity, this will make it look less dirty;

uitwerking

--progress-bg: #ffffff7b; 

Form browser test

There's a difference between Firefox and Chrome

uitwerking

De CSS-filters zien er anders uit in firefox, intenser, door een mediaquery te gebruiken en de CSS-filter aan te passen is het daardoor minder intens dan in andere browsers.

 .gradient {
        background-color: var(--rt);
        border-radius: 100%;
        filter: blur(100px) brightness(1.7);
        height: 20em;
        opacity: 0.8;
        pointer-events: none;
        transform: scale(2);
        width: 20em;
   
        /* removes brightness filter when viewed in firefox */
        @-moz-document url-prefix() {
            filter: blur(500px);
        }
    }

Make buttons unavailable without JS

For example over at https://dropandheal.agency.fdnd.nl/form-intro — there's a 'Volgende' button that doesn't do anything without JS/CSS. Try disabling this button in layer 1 (HTML).

uitwerking

Door gebruik te maken van de attributes hidden = false worden buttons hidden die geen functie hebben als Javascript uit staat. De core-functionaliteit van de page is het invullen van de form en als de JS en CSS wegvallen is het van belang om te zorgen welke button van toepassingen is voor de gebruiker.

  let hidden = true;

    onMount(() => {
      hidden = false;
    });

</script>

<div hidden={hidden}>
    <button class="curButton" type="button" on:click={prevStep} disabled={currentStep === 0}>
      Terug</button>
    <button class="curButton" type="button" on:click={nextStep} disabled={currentStep === questions.length - 1}>
      Volgende</button>
    {#if currentStep === questions.length - 1}
      <button type="submit">Bekijk uw resultaat</button>
    {/if}
  </div>

<button class="submitButton" type="submit">Bekijk uw resultaat</button>