De chat op de website wijzer.amsterdam wordt nauwelijks gebruikt. Mensen snappen niet dat ze een vraag kunnen stellen en gaan op de website zoeken naar hun onderwerp.
Hoe kunnen we ervoor zorgen dat mensen de chat meer gaan gebruiken?
Deze leertaak is onderdeel van het SKC programma van FDND. In een workshop gaan we de opdracht en de oplossing laten zien en daarna kunnen studenten zelf proberen de opdracht te maken.
Wijzer.amsterdam is een project van de Openbare Bibliotheek Amsterdam en de gemeente Amsterdam. Het project is bedoeld om mensen te helpen met vragen over internet en veiligheid.
Op de entree pagina van de website staat een chatbot waar mensen een vraag kunnen stellen omdat ze iets willen weten of iets zoeken. De chat op de website wordt nauwelijks gebruikt. Mensen snappen niet dat ze een vraag kunnen stellen en gaan op de website zoeken naar hun onderwerp.
Hoe kunnen we ervoor zorgen dat mensen de chat meer gaan gebruiken?
Je leert wat een microinteractie is en hoe je een microinteractie kan ontwerpen en maken.
Deze opdracht gaat over de fases analyseren, ontwerpen en bouwen.
In de analysefase inventariseer je wat er moet gebeuren om een taak uit te voeren.
Eerst bekijken we wat het probleem is en waarom een microinteractie een goede oplossing is.
Aanpak
- Open de website wijzer.amsterdam en bekijk en lees alles op de entree pagina.
- Bekijk hoe de chat werkt en wat je er mee kan doen. Probeer bijvoorbeeld "Kan ik veilig online bankzaken regelen?" en kijk wat voor antwoord je krijgt.
- Bedenk waarom mensen de chat niet gebruiken.
In de ontwerpfase neem je ontwerpbeslissingen en zorg je dat je precies weet wat je moet gaan bouwen.
We schetsen de verschillende states van de microinteractie. Bij de schetsen maak je aantekeningen met uitleg en hoe je het kan bouwen.
Aanpak
- Bekijk de website van Dmytro Svarytsevych over microinteractions en kijk of er voorbeelden staan die je voor deze opdracht kan gebruiken.
- Schets eerst de entree pagina van wijzer.amsterdam bepaal waar de microinteractie moet staan.
- Schets verschillende states van de microinteractie.
- Schrijf uitleg bij je schetsen en bebschrijf de rule, trigger en feedback van de microinteractie.
- Schrijf bij de verschillende states welke HTML, CSS en/of JS je nodig hebt om de micorinteractie te maken.
In de bouwfase realiseer je de beslissingen uit de ontwerpfase.
Maak je ontwerp met HTML, CSS en Javascript.
Voor het maken van deze microinteractie heb je de IntersectionObserver nodig en maak je gebruik van de querySelector en de classList in Javascript. In CSS heb je selectors en transition nodig.