Searchbar component enhance

[Jason2426]

Wat er moet gebeuren

• Analyse, wat is er al en hoe zou ik dit eventueel kunnen verbeteren.
• Ontwerp, het maken van verschillende UI states die handig/logisch zijn maar ook pleasurable.
• Bouwen, het component verbeteren op wat er al is d.m.v info van analyse en verschillende stijlen ervan.
• Testen op toegankelijkheid, performance en pleasurability

Het leuk voor mezelf maken zodat het motiverend genoeg is..

[Jason2426]

Analyse

Voor het verbeteren en enhancen van wat ik nu al heb is het even belangrijk om op een rijtje te zetten wat ik al heb gemaakt en welke technieken en methodes ik heb gebruikt.

• Het design nagemaakt die we opgeleverd hebben gekregen van de opdrachtgever, deze zou ik kunnen herontwerpen aangezien het heel simpel is en visueel nog niet geoptimaliseerd.
• Variables gemaakt in Svelte 4, dit kan ik vervangen door hoe het gedaan wordt in Svelte 5.
• Een lijst / reactive / dynamisch element met de gefilterde items erin, dit zou ik met Svelte 5 kunnen vervangen
• Two way binding, om de gebruiker input te vergelijken met een van de items in de lijst. Al een krachtige manier.

Dus samengevat, in Svelte 5 is er een nieuwe methode om variables te declareren wat ik zou kunnen aanpassen daarnaast zijn er nu ook volgendsmij andere manieren om een reactief element of variable te maken dus hier kan ik ook nog naar kijken.

Voor het ontwerp zou het nog veel beter kunnen, ik vindt het opgeleverde design best saai en zou hier graag verandering in willen brengen ook voor de toegankelijkheid d.m.v een leuke focus state bijvoorbeeld (Tip van Joost). Hier ga ik mee beginnen.

[Jason2426]

Ontwerp

Het ontwerp is simpel en werkt maar ik denk dat er nog wat verbeteringen doorgevoerd kunnen worden, onder andere het kleurcontrast, visuele hints zoals een zoek icoon, leuke animatie en een niet saaie focus state.

Het contrast voor de zoekbalk in het opgeleverde ontwerp resulteert in niet perfect wat natuurlijk wel kan dus de kleuren zal ik al eerste rekening mee houden.

Zoals ik al eerder zei denk ik dat er nog visuele hints misten, dit heb ik geprobeerd toe te voegen en daarnaast ook verschillende versies en states uitgewerkt om te kijken hoe het eruit zou zien. Helaas kan ik de animaties nog niet maken in Figma maar deze zal ik in de browser gaan ontwerpen. Bekijk de screenshot hieronder.