Projet Stampe

Lien vers le pré-questionnaire et questionnaire

Questionnaire test utilisateur

Distribution des tâches

Clara

1. Header
2. Aside
3. Page contact
4. Home
5. A propos

Tiago

1. Page produit
2. Acessibilité / Performance / SEO
3. CSS final

René

1. Footer
2. page catalogue
   • CSS puis importe le main
     • Btn reste à l'intérieur de sa div

Général

Dans les variables d'espacement je propose qu'on change pour rem au lieu de px.

Page catalogue

• Rendre les image responsive un peu (vw et vh)

Notes de cours du 16 février

• Page d'accueil

  • Effet wow
  • Appel à l'action
    • verbe à l'infinitif: 'acheter' 'Découvrer nos produits'
  • Ligne de flotaison
    • Là ou la vue s'arrête lors de l'arrivé sur la page
    • Tout ce qui est essentiel doit être au-dessus de cette ligne
    • Comment faire pour rediriger les gens vers cette section?
      • Footer -> petit flèche qui nous y ramène
    • Pas besoin d'avoir la navigation complète sur la page d'accueil
    • Peut-être avoir le menu burger pour l'effet 'WOW'

• Aujourd'hui

  • Taille de l'image en CSS

    • object-fit: cover
    • object-fit: contain

  • Comment faire des masques

  • color lab

    • Faire des variable de couleurs pale
      • (in oklab, couleur1 40%, couleur2 60%)
      • color-mix

  • backdrop filter

  • Voir 'cool effect css'

  • Ou Kevin Powel CSS effect

  • Get waves.io pour crer des svg et les utiliser

• Prochain cours

  • Animer les SVG

  • Question pour Maxime

Test

• Navigations

• Recherche d'informations

• Fonctionnalité plus précise

• Expérience et ressentis

• Accessibilité (Mobile et tablette)

• Est-ce que la personne réussi à trouver l'informations

  • Peut-elle miser sur un timbre

À corriger

• René -> Aligner menu avec filtre et footer

1. Footer

   • La couleur verte dans le footer est un peu pâle

   • Ajouter le lien 'mission'

   • Changer la première lettre

   • Couleur du logo

   • Droits auteur

     • Couleur
     • Center par rapport à la page svp

   • Lien vers qui est M. Stampee

2. Header

   • Couleur encadré de la barre de recherche

3. Mission

   • Colorer un peu le blanc du texte et lui ajouter du gras
   • Agrandir le texte comme dans p. m. Stampee
   • Ajouter de l'espacement avec l'image (diminuer l'image)

4. Accueil

   • Approcher les titres de section et justifier à gauche
   • Media Query ajouter de l'espacement

5. Enchère

   • Ajouter une pagination
   • Dans le tiltre, ajouter une petit boite de texte d'explication pour timbre authentifié

René Footer Clara -> Accueil

Test utilisateur

• Demander à la testeuse de commenter à voix haute -> vous avez dit celà, qu'est-ce que vous vouliez dire au juste?

• Définir les questions du pré-questionnaire

• Définir les 4 tâches ish

  • Tester la navigation Si vous aviez à aller sur la page d'informations sur M. Stampee, comment vous y prendreriez-vous ?

• Ouverture

  • Ressenti, appréciation visuelle de l'expérience

  • 1 à 10 comment avez-vous trouvé

    1. la navigation
    2. Le choix des couleurs
    3. Hiérarchisation des informations

  • Laisser une boite de texte pour les commentaires généraux

  • Remercier l'utilisateur

  Questions pour Maxim

  • Questionnaire papier ? numérique ? C'est nous qui le remplissons ?

  Questions

  // Pré-questionaire:

--- Profile du testeur / testeuse 1. Âge 2. Genre 3. Domain 4. Scolarité 5. Interesses personnel 6. Avez vous de: _ courriel? _ celulaire? 7. Utilisez-vous de réseau sociaux? Quel.s? Combien de temps par semaine? 8. Faites-vous une collection? De quoi? Il y a combien de temps? 9. Avez-vous déjà faites de achat en ligne? 9.a - sur quel site? 9.b - combien de fois? 9.c - comment s'est passé cette experience? 9.d - quand vous êtes sur un site d'achat, quel est la première chose que vous faites? (Utiliser la barre de recherche? Regarder de site au complét? Regarder dans la categorie du produit que vous voulez et chercher manuelment vous même?) 9.e - quel est la pire chose q'un site d'achat peut avoir / faire?

10. Avez-vous déjà miser sur un enchère virtuel? (si non, sauter à la question 11) 10.a - sur quel site? 10.b - pour quel produit? 10.c - combien vous avez miser? 10.d - avez vous gagner? 10.e - en general, comment s'est passé cette experience? 10.f - quand vous êtes sur un site d'achat, quel est la première chose que vous faites? (Utiliser la barre de recherche? Regarder de site au complét? Regarder dans la categorie du produit que vous voulez et chercher manuelment vous même?) 10.g - quel est la pire chose q'un site d'achat peut avoir / faire? 10.h - recommenderiez ce site à un ami?

11. Pour quel raison vous avez jamais miser sur un site d'enchère en ligne?

    // Post questionaire
    

    1- Comment s'appelle l'enteprise proprietaire du site? 2- Quels sont les services que la compagnie offre? 3- "Overall", comment s'est passé votre experience? 4- Comment trouver des timbres spécifiques sur notre site ? Quels filtres ou catégories utiliseriez-vous ? 5- De zero a 10, racontez votre experience sur: - l'apparence du site - la navigation - trouver le produit que vous chercher - la manière que le site présent ces produits - la manière que le site affiche leur produits vedettes - le contenu - la description des produits (plus: Qu'aimeriez-vous savoir de plus ?)

6- Vous sentez-vous à l'aise pour enchérir sur les timbres ? Le processus est-il intuitif ? 7- Comment jugez-vous la vitesse de chargement des pages de la vente aux enchères ? 8- Avez-vous rencontré des difficultés pour visualiser les images détaillées des timbres ? 9- Envisageriez-vous d'utiliser notre site web pour acheter des timbres lors de futures ventes aux enchères ?