ux-testing.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Twan Mellink - UX Testing</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="static/css/style.css">

</head>
<body>
  <!-- Navigatie menu balk en links naar items -->
<section class="ontwerp">
  <nav>
    <div class="logo">
      <a href="index.html"><img src="static/img/png/logo.png" alt="Logo Image"></a>
    </div>
    <div class="hamburger">
        <div class="bars1"></div>
        <div class="bars2"></div>
        <div class="bars3"></div>
    </div>
    <ul class="nav-links">
        <li><a href="index.html">Home</a></li>
        <li><a href="ontwerp.html">Ontwerp</a></li>
        <li><a href="ux-testing.html" class="active">UX Testing</a></li>
        <li><a href="design.html">Design & Toegankelijkheid</a></li>
        <li><a href="html-css.html">HTML & CSS</a></li>
        <li><a href="dns-uploaden.html">DNS & Uploaden</a></li>
        <li><button class="contact-button" onclick="window.location.href='contact.html';">Neem contact op</button></li>
    </ul>
</nav>
<svg class="ontwerp-image" id="wave" style="transform:rotate(0deg); transition: 0.3s" viewBox="0 0 1440 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(121, 63, 243, 1)" offset="0%"></stop><stop stop-color="rgba(24, 170, 253, 1)" offset="100%"></stop></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,10L30,11.7C60,13,120,17,180,30C240,43,300,67,360,78.3C420,90,480,90,540,88.3C600,87,660,83,720,81.7C780,80,840,80,900,76.7C960,73,1020,67,1080,56.7C1140,47,1200,33,1260,28.3C1320,23,1380,27,1440,35C1500,43,1560,57,1620,66.7C1680,77,1740,83,1800,76.7C1860,70,1920,50,1980,40C2040,30,2100,30,2160,38.3C2220,47,2280,63,2340,68.3C2400,73,2460,67,2520,56.7C2580,47,2640,33,2700,38.3C2760,43,2820,67,2880,68.3C2940,70,3000,50,3060,48.3C3120,47,3180,63,3240,60C3300,57,3360,33,3420,28.3C3480,23,3540,37,3600,41.7C3660,47,3720,43,3780,41.7C3840,40,3900,40,3960,48.3C4020,57,4080,73,4140,71.7C4200,70,4260,50,4290,40L4320,30L4320,100L4290,100C4260,100,4200,100,4140,100C4080,100,4020,100,3960,100C3900,100,3840,100,3780,100C3720,100,3660,100,3600,100C3540,100,3480,100,3420,100C3360,100,3300,100,3240,100C3180,100,3120,100,3060,100C3000,100,2940,100,2880,100C2820,100,2760,100,2700,100C2640,100,2580,100,2520,100C2460,100,2400,100,2340,100C2280,100,2220,100,2160,100C2100,100,2040,100,1980,100C1920,100,1860,100,1800,100C1740,100,1680,100,1620,100C1560,100,1500,100,1440,100C1380,100,1320,100,1260,100C1200,100,1140,100,1080,100C1020,100,960,100,900,100C840,100,780,100,720,100C660,100,600,100,540,100C480,100,420,100,360,100C300,100,240,100,180,100C120,100,60,100,30,100L0,100Z"></path></svg>
  <div class="ontwerp-message">
    <h1>UX Testing</h1>
    <h3><a class="tekst-wit" href="#uxtest">UX Testing</a></h3>
  </div>
</section>

<!-- Categorie/blok Usability -->
<section id="uxtest" class="about_us grijs-section">
  <div class="row nomargin">
    <h2 class="section_title">USABILITY TESTING</h2>
  </div>
  <div class="row row2">
    <div>
      <h2>UX Testing</h2>
      <p class="tekst-wit">UX testing, of Usability testing houd in dat we gaan testen of de gemaakte Mid-fidelity wireframe ook daadwerlijk bruikbaar is door gebruikers. Dit is belangrijk omdat als je een ontwerp zelf maakt je natuurlijk weet hoe alles werkt en welke knop wat precies doet. Maar een gebruiker heeft deze informatie niet, en kan een site dus heel anders ervaren. Tijdens UX testing testen we eigenlijk vier onderdelen. Werkt mijn idee, Sluit het aan bij de doelgroep(en), Waar zou ik het ontwerp kunnen verbeteren en zijn er dingen die misschien beter weggelaten kunnen worden. Om op deze manier tot een gebruiksvriendelijke website te komen. </p>
      <p class="tekst-wit">Ik heb voor mijn UX Testing de volgende doelen gesteld voor de test gebruikers. Kijken of de navigatie duidelijk en makkelijk in gebruikt is. Hoe makkelijk is het om de gewilde informatie te vinden en hoe snel de gebruiker het contact formulier kan vinden. Dit heb ik vervolgens getest met de volgende test scenario’s / opdrachten. Navigeer naar de contact pagina. Neem contact op via de website en zoek de informatie over Wireframes op de website.</p>
      <p class="tekst-wit">Deze test heb ik laten uitvoeren door 5 mensen laten uitvoeren. En me hierbij natuurlijk aan de UX testing regels gehouden. Dus niet helpen tijdens de odprachten, de gebruiker heeft altijd gelijkt, wees stil en natuurlijk maar 1 opdracht per keer. Nadat de hele test voorbij was heb ik iedereen gevraagd SUS formulier in te vullen. Hierin staan in totaal 10 vragen, 5 positieve vragen en 5 negatieve controle vragen. Je kan bij elke vraag een cijfer van 1-5 geven op zo aan te geven of ze het er mee eens zijn of juist niet.</p>
      <p class="tekst-wit">Hieruit kwamen een aantal resultaten die ik kon gebruiken voor het 2e mid-fidelity wireframe. De resultaten die er bij mij erg duidelijk uitkwamen waren is dat de site onnodig moeilijk in elkaar zat voor een gebruiker, en dat er teveel extra stappen in zaten. Bijvoorbeeld een extra knop om het contact formulier te laten zien, terwijl deze ook standaard zichtbaar kan zijn. Vervolgens heb ik deze feedback verwerkt in een nieuwe Mid-fidelity wireframe om zo te kijken of ik de genoemde problemen kon oplossen. Vervolgens voor je nog een UX test uit om te kijken of de gebruikers dezelfde problemen niet meer ervaren.</p>
      </div>
    <div>
      <figure>
        <img src="static/img/png/sus.png" alt="foto van een sus rapport">
      </figure>

    </div>
  </div>
</section>

<!-- Footer -->
<div class="footer">
  <b class="tekst-wit">Twan Mellink / 220979 - FDD 2022-2023</b>
</div>
</body>
<script language="JavaScript" type="text/javascript" src="static/js/script.js"></script>
</html>