Hoe kunnen we de bezoeker zo eerlijk mogelijk kunnen informeren naar de specifieke behoeftes.
Een krachtig herontwerp met een uitstekende Informatie Architectuur en duidelijke differentieatie tussen de verschillende diensten van Jeroen.
Als UX designer en onderzoeker heb ik samen met Jeroen belangrijke inzicvhten verzameld en verwerkt tot een passend ontwerp.
Jeroen Saris is een therapeut en opleider voor energetische ontwikkeling. In het herontwerp van zijn website hebben we speciale aandacht gegeven aan de what’s in it for me voor de bezoeker zodat zij op een eerlijke wijze wordt geïnformeerd of de diensten van Jeroen Saris passen bij haar behoeftes.
1: Visibility of System Status
Door de onduidelijke menu lay-out met veel sub menu’s is het moeilijk te begrijpen voor de gebruiker waar je bent.
2: Match Between the System and the Real World
Deze is wel aardig in de menu knoppen, de uitgescheurde papier structuur daagt je uit tot ontdekking.
3: User Control and Freedom
Het is moeilijk je positie in de website te begrijpen door het missen van een navigatie hulp of actieve weergave van knoppen.
door de onduidelijke menu structuur en benaming van knoppen is het onduidelijk waar welke informatie staat.
4: Consistency and Standards
Consistency error, bij aanbod staan bijv. bij reiki achtergrond informatie over reiki niet dat het aangeboden wordt
De knoppen zijn onduidelijk en er is geen goede differentie tussen knoppen en koppen
Koppen:
Knoppen:
5: Error Prevention
Door de onduidelijke benaming van de knoppen maak je als gebruiker snel fouten door op een verkeerde knop te drukken.
6: Recognition Rather than Recall
Door de onduidelijke navigatie moet de gebruiker zelf nadenken waar ze zijn en waar ze naar toe kunnen, daardoor raak je als gebruiker snel de weg kwijt.
7: Flexibility and Efficiency of Use
Door de content die op de homepage is geplaatst is het niet duidelijk wat er te vinden is
De wisselende content in de rechter balk is in flexibel en je moet telkens wachten als gebruiker om content te krijgen.
8: Aesthetic and Minimalist Design
De typografie keuze zorgt voor een slechte toegankelijkheid
Naam deelnemer:
Bas
Leeftijd:
24
Dagelijkse bezigheden (werk, opleiding, hobbies):
Videograaf, fotograaf, video editor,
1. Welke website is dit? Van welke organistatie? (SiteID)
Centrum voor energetische ontwikkeling
2. Op welke pagina ben je? (Page name)
systeem opstelling
3. Wat zijn de belangrijkste onderdelen van deze website? (Sections)
Systeem opstelling, speciale systeem opstelling, behandling, contact, menu structuur
4. Tot welk onderdeel behoort de pagina waar je nu bent? (“You are here” indicators)
Dit hoort bij systeemopstelling
5. Welke opties heb je vanaf de pagina waar je nu bent? Waar kun je naar toe vanaf deze pagina? (Local navigation)
dat ik meer info krijg over systeem opstellingen, dat ik reviews kan lezen, dat ik naar home kan gaan, aanbod kan bekijken j.saris geen idee wat dat is, praktische info, extra info en contact
6. Waar ben je in de structuur van de webpagina? (“You are here” indicators)
Ik ben nu op een hoog niveau van de sectie systeem opstelling
7. Hoe kun je zoeken?
niet
8. Bij vraag 3 gaf je aan wat de belangrijkste onderdelen zijn van deze site. Wat verwacht je te vinden of te kunnen doen bij die onderdelen? (Sections)
Dat ik meer info kan krijgen over systeem opstellingen, en ik denk dat ik meer reviews kan zien ofzo
9. Bij vraag 5 gat je aan wat de opties zijn die je
vanaf deze pagina hebt. Wat verwacht je te vinden of te kunnen doen bij die opties? (Local navigation)
10. Welke menu-items van deze website zijn niet helemaal helder?
J. Saris, wat is dat? Praktisch en extra info, geen duiding wat het verschil is
11. Heb je nog ander dingen die je opvallen of die je wil delen?
veel fonts, verschillende headers fonts knoppen en header tekst, erg pixelig, slechte spatiering de zon is creepie,
Het was niet meteen duidelijk dat de website een persoonlijke website is van Jeroen Saris. Deze onduidelijkheid wordt voornamelijk veroorzaakt door de titel.
Ook is de website erg rommelige door het overmatig gebruik van lettertypen, kleuren en tekst formaten.
De menu structuur laat vooral te wensen over, door de onduidelijke benaming.
Wat ik zelf niet verwacht had is dat Bas niet door had J. Saris een persoon is.
Home
De startpagina wordt gebruikt om de bezoeker te vragen of ze opzoek zijn naar nieuwe inzichten, dit passen we zo toe om interesse op te wekken.
Behandelingen
Hier staan alle verschillende behandelingen bijelkaar samen met de speciale behandel methoden die Jeroen aanbied.
Opleidingen
Hier kan je alle informatie vinden over de verschillende opleidingen die Jeroen aanbied, ook kan je hier meteen een afspraak inplannen om je aan te melden voor een opleiding.
Methodiek
Hier vind je alle achtergrond informatie over de behandel methoden de zinnige literatuur ddat geldt als onderbouwing van het expertise van Jeroen.
In deze IA is de informatie zo weer gegeven dat er een duidelijk distinctie is onstaat in de verschillende diensten die Jeroen levert. Daarnaast heb is er rekening gehouden met de informatie hiërarchie zodat de juiste informatie op het juiste moment inzichtelijk is voor de bezoeker.
Brand
De blauwe kleur als basis is gekozen omdat dit nu ook al gebruikt wordt als de primaire kleur van Jeroen Saris. Het is een eerlijke kleur die doet denken aan een heldere zomerdag. Er is geen reden om een goede kleur zomaar weg te gooien het past bij het merk en Jeroen voelt er zich vertrouwd mee. Alle andere kleuren die gebruikt worden in het merk van Jeroen moeten samenwerken met deze kleur
Therapie
De groene therapie kleur verwijst naar de natuur van groei en rust twee thema’s die centraal staan in het werk van Jeroen.
Opleiding
De amber oranje kleur van opleidingen staan voor de warmte en aardse verbinding die essentieel zijn in de werkwijze en opleidingen.
Titels
Voor de titels en headings is er gekozen voor Mulish een vriendelijk duidelijk leesbare letter met geometrische lijnen en rechte hoeken zorgen voor duidelijkheid.
Body
Voor de body teksten is er gekozen voor DM Sans een lettertype speciaal ontworpen voor het gebruik als body tekst met een hoge leesbaarheid ook in kleinere weergave.
Introductie van wat Jeroen Saris te bieden heeft.
Een krachtige titel belooft resultaten, gevolgd door een vraag die Jeroen kan helpen beantwoorden.
De bodytekst geeft een eerste inzicht in de methodiek die Jeroen gebruikt om deze belofte waar te maken. Deze tekst spreekt in op de behoeften van de gebruiker en beantwoordt deels de vraag van de ondertitel.
Twee knoppen, ‘Therapie’ en ‘Opleidingen & Workshops’, leiden direct naar de relevante pagina’s van de productcategorieën die Jeroen aanbiedt. Voor deze knoppen worden de kleuren groen en oranje geïntroduceerd, die door de hele site worden gebruikt om de twee productcategorieën duidelijk te onderscheiden. Boven de knoppen staat een signifier die de bezoeker direct inzicht geeft in wat er achter de knoppen te vinden is.
Er is gekozen voor solide knoppen om extra aandacht te vestigen op gebruikers die direct meer informatie willen over de respectievelijke thema’s.
De afbeelding symboliseert de reis die de bezoeker wil maken: het bos staat voor een natuurlijke aanpak, de rugtas voor de ervaringen die je meeneemt en de gereedschappen die je leert gebruiken. Het afgebeelde persoon, gezien van achteren met de zon in de rug, symboliseert dat je samen op weg bent naar het licht.
Meteen na de hero-sectie beginnen we met een stuk over Jeroen zelf. Dit doen we omdat het belangrijk is voor bezoekers om een relatie met Jeroen op te bouwen. Voor therapie is het essentieel om te weten met wie je praat. Dit stuk dient als introductie tot Jeroens verhaal.
De kop is een duidelijke opsomming van Jeroens eigenschappen.
De knop in primair blauw heeft een goede signaalfunctie. De portretfoto toont Jeroen, zodat bezoekers meteen weten met wie ze gaan praten. Dit helpt bij het opbouwen van een relatie.
In dit contentblok wordt de bezoeker voor het eerst geïntroduceerd met informatie over de mogelijke therapievormen.
Dit blok beslaat 50% van de breedte, waardoor de tekst makkelijker te scannen is dan wanneer deze over de volledige breedte zou lopen. De groene achtergrondkleur dient als een associatieve link met het thema therapie.
Bij de knop ‘Therapie’ staat een extra signifier om duidelijkheid te geven dat je meer informatie over therapie kunt vinden door op de knop te drukken. Er is gekozen voor een outline-stijl knop om niet te veel aandacht weg te nemen. De knop biedt de gebruiker extra vrijheid, zodat ze, zodra ze informatie over een bepaald onderdeel krijgt, meer details kunnen vinden door op de knop te drukken.
De dienstcards beginnen met een foto om een associatieve link te leggen met het onderwerp. Daarnaast geeft de foto een representatie van wat mensen kunnen verwachten van de dienst. De foto’s worden hergebruikt op hun respectievelijke dienstpagina’s.
Hier wordt gebruik gemaakt van een onderstreepte knopstijl om niet te veel aandacht weg te nemen van de rest van de informatie op de card.
Eenvoudige testimonials zijn gestileerd in de primaire kleur van Jeroen Saris. Op de homepage zijn drie testimonials geplaatst om tegemoet te komen aan de diverse behoeften van verschillende gebruikers binnen deze pagina context.
Onder de headings bevindt zich altijd een gekleurde lijn die dient als signifier voor een associatieve relatie met de thema’s.
Het kleurgebruik helpt de gebruiker om te onthouden waar ze zich bevinden. Door de onderscheidende kleuren krijgt de bezoeker een visuele cue over welk onderdeel van de website ze bekijken.
Meteen na de hero-sectie worden de verschillende therapievormen gepresenteerd, zodat gebruikers snel inzicht krijgen in welke therapievorm het beste bij hen past.
Deze opdracht is gemaakt in opdracht van de HAN voor het vak webdesign voor Jeroen Saris mijn therapeut.
Tijdens het ontwerp proces heb ik het volgende geleerd:
In het vervolg wil meer de focus leggen op het ontdekken van verschillende mogelijkheden door simpele praktische prototypes te maken.
Joost,
Het was een waar genoegen om je te begeleiden deze course. Ik heb je leren kennen als een gepassioneerde en energieke (prettig chaotische) student + ontwerper. In de groep neem je het voortouw in feedback, gelukkig doe je geregeld ook een stapje terug om anderen ruimte geven. Want die ruimte neem je geheel organisch in. Je hebt dan ook veel relevante kennis om te delen binnen deze course.
Dat zie ik duidelijk terug in je aangeleverde werk.
Wat je ophaald uit de heuristieken test en cardsorting sessies is relevant en weet je passend te vertalen naar ontwerp oplossingen. Wel heb je de neiging te snel door te schieten naar concrete uitwerkingen wat het experiment en het ontwerpen van varianten binnen oplossingen in de weg zit. Gun je zelf die ruimte en de mogelijkheden die het kan opleveren. Daar zit bij jou de ruimte om te groeien als ontwerper.
Veel succes verder!
Patrick
