Web Management UX - 2-Web-Management-UX (1) PDF

Web managemen t Vorige week Awareness creëren  Intro tot web & websites Overweging initiëren  Doel van een website (consideration)  Technische opzet van een website Actie stimuleren  Intro tot het web...

Web managemen t Vorige week Awareness creëren  Intro tot web & websites Overweging initiëren  Doel van een website (consideration)  Technische opzet van een website Actie stimuleren  Intro tot het web (conversion)  Intro tot CMS  Zelf aan de slag Loyaliteit creëren Vorige week  Jouw gekozen onderwerp, de lijst van de 5 websites en een moodboard  Werk je sitestructuur uit en maak vervolgens een wireframe voor de homepagina, categoriepagina en contactformulier van je website Vandaag Vandaag UX Wat is UX en driehoeksverhouding Waar heeft onze klant nood aan Wat wensen wij te bereiken met ons bedrijf Wat is er technisch mogelijk met ons budget Jouw bevindingen evindingen & belang van UX  UX & product design draait om psychologie, emotie & opinie.  Binnen het UX domein proberen we de irrationele gebruiker op een rationale wijze te sturen.  Er wordt enorm veel geëxperimenteerd en getest (A/B testing)  Veel in interactie gaan met je gebruiker  Verandering kan veel geld kosten/opleveren. ngry users = angry shareholders UX onderzoek KUBO - context  Schoolplatform & IT Klassen in Gambia  16 vrijwilligers  4 Scholen in Gambia  Impact op >10.000 studenten KUBO - start  Shane, founder, gestart in 2017 met een proof of concept (POC).  Na positief ontvangst van POC gestart aan onderzoek (bachelorproef) rond UX. KUBO – UX onderzoek How to design, test and deliver a user-centred school administration platform for users in a developing er Centered Design Canvas - startpu UCDC – het doel  Helderheid brengen in wat we proberen op te lossen en hoe.  Weten voor wie we dit bouwen en wat hun motivatie en angsten zijn.  Referentiekader om onze oplossing tegen af te toetsen tijdens en na het ontwikkelen. M.a.w. dit in kaart brengen UCDC - KUBO Where do we go from here? kaart brengen van functionaliteiten Een use case is een beschrijving van hoe een gebruiker omgaat met je website/product. Welke stappen worden doorlopen en door wie, wat het resultaat zal zijn en aan welke condities moet worden voldaan. reframes – duiding bij flow of events  In een use case worden de verschillende stappen van een gebruiker omschreven.  Aanvullend hierop kunnen wireframes gebruikt worden om deze stappen te visualiseren. Werkbaar prototype van maken Low fidelity High fidelity wireframe prototypes Werkbaar prototype van maken Low fidelity High fidelity wireframe prototypes Vergelijk Lo-Fi vs Hi-Fi aarom een high-fidelity prototype?  Voldoende detail om te testen met gebruikers.  Lagere kost dan ontwikkelen van software.  Goede basis om mee verder te gaan tijdens ontwikkelingen. Prototype klaar. Wat nu? et’s test & break it! Hoe testen?  Beschrijven van je testscenarios  Bepalen van je testgroepen  Bepalen van je testopstelling  Uitvoeren van het interview  Capteren van de feedback  Verwerken van de feedback Testscenarios  Omschrijf duidelijk de doelstelling die je eindgebruiker moet behalen.  Verwerk geen tips of suggesties in je scenario’s in hoe ze hun doel moeten behalen Testgroepen  Je testgroepen leunen zo dicht mogelijk aan bij je effectieve eindgebruikers.  Voor KUBO waren dit de groepen:  Studenten psychologie met een vak experience design  Studenten kleuteronderwijs  Online testen met de Testopstelling  Zorg ervoor dat je prototype openstaat.  Gebruik camera’s, een microfoon en recording software om het interview op te nemen voor latere verwerking. nterview afnemen  Zorg voor een comfortabele setting zonder afleiding.  Leg het doel uit van het onderzoek.  Licht toe dat er geen foute manieren zijn om te reageren op een bepaalde opdracht.  Bij het afnemen van het interview stuur je de gebruiker niet bij.  Focus op het afnemen van het interview. De verwerking & notities is voor achteraf. Verwerken feedback En nu? Repeat. eenmaal tevreden. Ontwikkelen. Om terug te testen. Conclusie. Best practices Goede UX levert geld op ssentie van volgende slides ssentie van volgende slides Een houvast Een paar laws of UX Laws of UX Jakob’s law  Jakob’s law stelt dat gebruikers verwachten dat jouw website werkt zoals de andere websites die ze kennen.  Dit betekent dat gebruikers een betere ervaring hebben als de site vertrouwde patronen en standaarden volgt.  Afwijken van deze bekende patronen kan leiden tot verwarring en een akobs’s law toepassing Laws of UX Hick’s law  Hick’s law stelt dat hoe meer keuzes iemand heeft, hoe langer het duurt om een beslissing te nemen.  Een overvloed aan opties op een website of in een gebruikersinterface zal de besluitvorming aanzienlijk vertragen.  Het is dus belangrijk om keuzes te beperken of goed te organiseren om snelle en efficiënte besluitvorming Hick’s law toepassing Hick’s law toepassing Hick’s law toepassing Laws of UX F-patroon  Het F-patroon toont aan dat gebruikers webpagina's vaak scannen in een vorm die lijkt op de letter ‘F’.  Belangrijkste leesbewegingen: eerst horizontaal bovenaan, dan een tweede horizontale lijn lager, gevolgd door een verticale scan aan de linkerkant.  Plaats cruciale informatie bovenaan en links op de pagina voor optimale F-patroon toepassing Laws of UX Miller’s law  Miller’s law stelt dat het menselijk geheugen gemiddeld ongeveer 7 (plus of min 2) items tegelijk kan onthouden.  Dit impliceert dat gebruikersinterfaces niet overbelast moeten worden met te veel opties of informatie.  Het is effectief om informatie in kleine, beheersbare delen te presenteren voor betere begrip en Miller’s law toepassing ller is niet gewoon de regel van 7 ller is niet gewoon de regel van 7  Miller’s law wordt vaak verkeerd geïnterpreteerd als een strikte limiet op het aantal elementen in een interface, zoals maximaal 7 navigatielinks.  In werkelijkheid gaat het meer om het efficiënt organiseren van informatie in een interface, niet om het beperken tot een specifiek aantal elementen.  Goed ontworpen menu's of interfaces, waarbij keuzes duidelijk zichtbaar en gemakkelijk te scannen zijn, vereisen geen strikte naleving van deze zogenaamde limiet. Laws of UX Law of proximity  Law of proximity stelt dat objecten die fysiek dicht bij elkaar staan, als een groep worden gezien.  Om effectieve, intuïtieve interfaces te ontwerpen, kun je het best gerelateerde items groeperen en ze dicht bij elkaar plaatsen. aw of proximity toepassing aw of proximity toepassing aw of proximity toepassing t op: UX wetten spelen met elkaar Hick vs Jakob Daarom: meten is weten UX tools Clarity  Gratis te gebruiken  Cookie consent nodig  Simpel in gebruik  Sterke tool voor het optimaliseren van de UX van je website Clarity – UX Inzichten Clarity – boze klikken  Beschrijving: Gebruiker heeft snel op hetzelfde kleine gebied geklikt of getikt.  Mogelijke issues:  Gebruikers zijn interactieve elementen verwachtende, maar krijgen er geen te zien wat leidt tot gebruikersfrustratie.  Visueel element lijkt op een klikbare knop, maar is het niet. arity – Klikken die nergens toe leiden  Beschrijving: Wanneer een gebruiker op een link/knop klikt maar binnen een redelijke tijd geen feedback krijgt.  Mogelijke issues:  Link naar pagina/actie werkt niet.  Het duurt enorm lang om een pagina/actie te laden na de interactie. larity – overmatig scrollen  Beschrijving: De gebruiker heeft meer dan verwacht door een pagina geschoven  Mogelijke issues:  Scrolljacking->Scroll wordt overgenomen door de website.  Er is teveel informatie aanwezig op de website waardoor de gebruiker snel door de content scrollt.  De website is niet duidelijk opgebouw. De gebruiker Clarity – Snel terugkeren  Beschrijving: De gebruiker vond de pagina niet nuttig en keert onder een bepaalde tijdsdrempel terug naar de oorspronkelijke pagina of website.  Mogelijke issues:  De navigatie is versprongen tijdens het klikken waardoor de gebruiker op de verkeerde link heeft geklikt.  De pagina waarop de gebruiker terechtkomt is Clarity – heatmaps Clarity – scroll map  Toont gemiddelde pagina fold (zichtbaar stuk zonder scrollen)  Toont percentages van gebruikers die scrollen naar een bepaalde sectie op je webpagina. (warme en koude Clarity – click map  Toont waar gebruikers op klikken.  Toont de volgorde van de meest geklikte elementen. Clarity – area map  Met de area map kan je specifiek op een bepaalde zone op je pagina gaan kijken waarop het meest geklikt wordt. UX links Links Opdracht Opdracht  Online student discount aanvragen (1 per groep is voldoende)  Maak een UCDC op voor jouw website. (team)  Pas de best-practices van vandaag toe op je wireframes. Motiveer waarom je bepaalde keuzes hebt gemaakt a.d.h.v. notities. (UX/CRO)  Keur de Webflow invite goed (ontvangen via mail) en kies een standaard CMS website of selecteer een gratis template waar een blog/cms is aan gekoppeld. Mail de url van deze template door samen met de naam voor je website. (Team) eadlines en omscrhijving opdracht.