Pleasurable User Interface

Ontwerp en maak met een team voor een opdrachtgever een interface waar gebruikers blij van worden.

De instructie vind je in: INSTRUCTIONS.md

Inhoudsopgave

• Beschrijving
• Gebruik
• Kenmerken
• Installatie
• Bronnen
• Licentie

Beschrijving

Hoofdpagina

De gebruiker kan op de hoofdpagina de radiostations zien, naar de socials gaan, doorklikken naar de programmeringspagina van een radiostation en naar de bookmarks

Hieronder is de hoofdpagina te zien:

Bookmarks pagina

De gebruiker heeft de mogelijkheid om een show te bookmarken via de radioprogramma’s. De gebookmarkte shows worden opgeslagen op de pagina ‘bookmarks’. Op deze pagina krijgt de gebruiker een overzicht van alle opgeslagen shows van verschillende radioprogramma’s.

thisstation.-.Google.Chrome.2025-05-27.20-14-12.online-video-cutter.com.mp4

• img (bookmarks pagina)

Om onderscheid te maken tussen de radiostations, zijn de shows in verschillende kleuren op basis van het toe behoorde station.

• Blauw voor ‘Veronica’

• Roze voor ‘Slam!’

• Groen voor ‘100%NL’

• img (verschillende kleuren per show)

###Popup De gebruiker krijgt op de radiopagina een popup te zien die de eerst volgende geboomartke show weergeeft afhankelijk van het radiostation. Deze popup laat zien om welke tijd de eerst volgende show zich afspeelt. Als er geen gebookmartke shows zijn komt de popup niet tevoorschijn.

Om de popup te voorzien van een pleasureble UI is er gebruik gemaakt van animaties voor extra user feedback en interactie.

Gebruik

Met deze versie van de website kan je per radiostation per dag de shows bekijken voor die dag, zien welke show er nu speelt en shows bookmarken. Deze bookmarks zijn op de algemene bookmarkspagina te bekijken. Ook is er een popup waarin de eerstvolgende gebookmarkde show te zien is. Deze popup is uiteraard ook te sluiten

Kenmerken

Color contrast test

We hebben de website getest op kleurcontrast en kwamen tot de conclusie dat het contrast niet voldoende is. Hierdoor is voor sommige gebruikers de website moeilijk leesbaar, met namen knoppen of en teksten met een kleurrijke achtergrond.

Hoewel we de huisstijl van de radiostations graag wilden behouden, hebben we gekozen om de gebruikerservaring voorrang te geven. We hebben daarom kleuren geselecteerd die uitstekend scoren op contrast tests en visueel het meest op de oorspronkelijke kleuren lijken.

• img (originele kleuren)

• img (aangepaste kleuren)

Client side scripting

Op de radiopagina is een client side script geschreven wat, als DOMparser en Fetch worden ondersteund, er op de achtergrond een fetch wordt gedaan en een bookmark post uitvoerd zonder dat er reload wordt. Hier wordt ook een loading en succes state toegevoegd met classnames. Deze classnames triggeren de animaties.

Hieronder is de client side script te zien:

pleasurable-ui/views/radio.liquid

Lines 210 to 262 in c4dad0f

	<script type="module">
	if ('fetch' in window && 'DOMParser' in window) {
	document.addEventListener('submit', async function(event) {
	const form = event.target
	console.log(form.outerHTML);
	let type;
	let likedCard = form.closest('article');
	likedCard.classList.add('loading-card')
	if (!form.hasAttribute('data-enhanced')) {
	return
	}
	event.preventDefault()
	form.classList.add('loading');
	// UPDATE DOM
	const response = await fetch(form.action, {
	method: form.method,
	body: new URLSearchParams(new FormData(form))
	});
	console.log(response.status);
	// 200 = OK POST, 204 = OK DELETE
	if (response.status !== 200 && response.status !== 204) {
	console.log('test failed');
	}
	else{
	new Audio('/assets/noti.mp3').play();
	}
	const responseText = await response.text()
	const parser = new DOMParser()
	const responseDOM = parser.parseFromString(responseText, 'text/html')
	const newState = responseDOM.querySelector('[data-enhanced="' + form.getAttribute('data-enhanced') + '"]').closest('article');
	form.classList.remove('loading');
	likedCard.classList.remove('loading-card');
	console.log(responseDOM);
	console.log(newState.outerHTML);
	likedCard.outerHTML = newState.outerHTML
	// remove old state
	let newForm = document.querySelector('[data-enhanced="' + form.getAttribute('data-enhanced') + '"]')
	let updatedCard = newForm.closest('article');
	updatedCard.classList.add('bookmarked');
	newForm.classList.add('bookmarked');
	newForm.querySelector('span').innerHTML = "Bookmarked";
	})
	}
	</script>

Installatie

Om dit project lokaal te installeren en te draaien, volg je de onderstaande stappen:

Vereisten

• Node.js (versie 14 of hoger)
• npm (Node Package Manager, wordt meestal samen met Node.js geïnstalleerd)
• GitHub Desktop (niet per se nodig, maar werkt fijn)

Stappen

1. Clone de repository

   • Ga naar de repository: https://github.com/ColindeGroot/pleasurable-ui
   • Klik op Code (groene knop) -> Open with GitHub Desktop
   • Klik op Clone
   • Selecteer "For my own purposes"

2. Open het project in je codeeditor

3. Installeer de afhankelijkheden

   • Gebruik npm om de benodigde pakketten te installeren door het volgende commando in de terminal uit te voeren:

   npm install

4. Start de ontwikkelserver

   • Start de server met het volgende commando:

   npm start

5. Open de applicatie in je browser

   • De server draait nu op http://localhost:2000. Open deze URL in je webbrowser om de applicatie te bekijken.

Bronnen

Licentie

This project is licensed under the terms of the MIT license.