User Experience Design (UXD) flowchart

Inhoud
1. Wat is een functioneel ontwerp (FO)? Terugblik
2. Waaruit bestaat een functioneel ontwerp? Terugblik
3. Een designer is ook een architect.
4. Wat is een flowchart?
5. Waarom een flowchart?
6. Hoe maak je een flowchart van een website of app?
7. Opdracht 8 : Studievragen
8. Opdracht 9 : klas opdracht schets flowchart
9. Opdracht 10 : flowchart
10. Voorbeelden van een flowchart

Richard Slakhorst

1. Wat is een functioneel ontwerp (FO)? Terugblik

Zoals je een bouwtekening nodig hebt voor het bouwen van een huis, zo heb je een functioneel ontwerp (FO) nodig voor het maken van een website, webshop of een App of ander mediaproduct Een functioneel ontwerp is de ‘blauwdruk’ of ‘bouwtekening’ van je website, webshop, App of ander mediaproduct.

Er staat precies in beschreven hoe de website, webshop, App of ander mediaproduct moet werken, welke functionaliteiten erin zitten en hoe de pagina’s eruit gaan zien.

2. Waaruit bestaat een functioneel ontwerp? Terugblik

A. Het is een methode om een aankoopproces of een dienst vanuit het perspectief van de klant te visualiseren.
B. Het beschrijft de ervaringen van een klant gedurende de reis die een klant maakt om zich te oriënteren, of een product of dienst aan te schaffen en beschrijft voor de rest alle functionaliteiten van de webapp-webshop.
C. Het ene functioneel ontwerp (FO) is uitgebreider dan het andere. Het verschilt namelijk per type opdracht wat er in het functioneel ontwerp moet komen, vandaar dat er niet maar één juist format voor een functioneel ontwerp bestaat.

Wel bestaat een functioneel ontwerp (FO) meestal tenminste uit de volgende elementen:
1. Doelgroeponderzoek
2. Doelen van de website voor gebruikers en de onderneming (user story’s)
3. Structuur van de website (flowchart)
4. Uitwerking functionaliteiten per pagina gedetailleerd (wireframes)
5. Input voor design en techniek (basis styletile)
6. Interaction-ideeën (interaction design) (interactive mockups?) (prototype)

3. Een designer is ook een architect

De designer bepaalt ook de structuur van de website, app of een ander mediaproduct.
Het is belangrijk voor de gebruikers dat de informatie op de juiste plek staat, dat het navigatiemenu overzichtelijk is, dat de website werkt zoals je verwacht. Het uitwerken van die structuur begint vaak bij een flowchart. Dit is een schema van de reis die de gebruiker maakt bij het bezoeken van je web-appsite of een ander mediaproduct.

4 Wat is een flowchart?

Een flowchart is een grafische representatie van alle activiteiten / stappen in een proces.
In de flowchart maak je een overzicht van de stappen die een gebruiker op je website of app maakt. Je gaat daarbij uit van een probleem of vraag van de gebruiker.

Het dwingt je goed na te denken over hoe de website / app gebruikt zal worden,
1. welke informatie het belangrijkst is en 2. hoeveel moeite de gebruiker moet doen om te vinden wat hij zoekt. Een groot voordeel van een flowchart is dat het voor iedereen inzichtelijk wordt welke stappen de (verschillende) users zullen maken binnen je website of app. Daarnaast weet de developer hoe hij de stappen in de back-end van de website moet verwerken.

Flowcharts worden ook veel gebruikt bij het analyseren, ontwerpen, documenteren of beheren van processen in diverse vakgebieden. De flowchart van een website wordt ook wel een stroomdiagram genoemd. Doordat een flowchart helpt bij het visualiseren van een proces, kan het proces beter worden begrepen en wordt het makkelijker om eventuele knelpunten te vinden.

5 Waarom maak je een flowchart?

Breng het proces in kaart voordat je begint. Het is verleidelijk om ergens direct in te duiken, maar het is cruciaal om de processtroom eerst in kaart brengen. 1. Om hoeveel taken gaat het? 2. Hoe zijn deze met elkaar verbonden? 3. Op welke manier moeten ze op de pagina verschijnen? Voordat je elementen toevoegt en ze met elkaar verbindt, moet je al deze vragen hebben beantwoord. Als je eenmaal een globaal idee hebt van hoe alles eruit moet zien, kan de pret beginnen.

Je maakt een flowchart in algemene zin
1. Documentatie van een proces, en de relatie tussen de stappen in een proces.
2. Identificatie van het werkelijke en het ideale proces.
3. Het berijpen van problemen en mogelijke verbeteringen.

Je maakt een flowchart specifiek voor jou als ontwerper
1. Je bent aan het ontwerpen en wilt graag iets bouwen wat logisch klopt.
2. Je bent al aan het bouwen, maar je loopt vast in de complexe structuur.
3. Je wilt een ander de structuur van jouw ontwerp uitleggen.

6.Hoe maak je een flowchart van een website of app?

Een flowchart is dus een schematisch overzicht van alle mogelijke stapjes in een proces. De flowchart van de website-structuur is een goed overlegdocument. Vaak komt deze tot stand samen met de opdrachtgever, in een proces van voortschrijdend inzicht. Je kunt de flowchart laten groeien tijdens zo’n samenwerkingsproject en de veranderingen later aanpassen in het document.
– Welke pagina’s zijn er?
– Welke doorklikpaden hebben deze pagina’s?

De niveaus en subniveaus
a. Root : Bovenaan wordt de index-pagina geplaatst met de hele menustructuur. >>DIE WERK JE HELEMAAL UIT<<
b. Level 1: Hieronder worden de pagina’s geplaatst die vanuit de index te bereiken zijn. >3X<
c. Level 2: Hieronder plaats je weer de sub-pagina’s. >3X<
d. Level 3: Sub-sub-pagina’s. >3X>
e. Externe link; Links: www…./nl. > ALLE OP DE PAGANA<

Een flowchart
1. Hoeveel pagina’s bevat de site (elk rechthoekje is een pagina).
2. Hoeveel links bevatten de pagina’s? (-Link: www…./nl)
3. Elk niveau heeft weer een eigen kleur.
4. Hoe vaak moet iemand klikken om bij de voor hem belangrijke pagina te komen?

links:(Link: www…./nl)

Bij grote sites kunnen de flowcharts heel groot zijn.

7. F1M2-VRMG. Opdracht 8: studievragen flowchart

F1M2-VRMG. Opdracht 8: studievragen flowchart 


1 Wat is een flowchart
2 Waarom maak je een flowchart als ontwerper
3 Wat bedoelen we met een designer is ook een architect
4 Waarom maak je een flowchart specifiek voor jou als ontwerper
5 Uit welke niveaus en sub niveaus bestaat minimaal een flowchart

7B. Opdracht 9A: extra klas opdracht schets stroomdiagram

Maak voor het proces van het maken van een kopje koffie een schets stoom diagram flowchart

1 Begin met een startpunt.
2 Vraag de gebruiker om te beslissen welk type koffie hij wil: gewone koffie of cappuccino.

3 Afhankelijk van de keuze:
– Als de gebruiker gewone koffie wil, ga dan naar stap 4.
– Als de gebruiker cappuccino wil, ga dan naar stap 5.

4 Bereid gewone koffie:
– Maal de koffiebonen.
– Zet de koffie.
– Giet de koffie in een kopje.
– Voeg suiker en melk naar wens toe.
– Beëindig het proces.

5 Maal de koffiebonen.
– Zet de koffie.
– Verwarm melk.
– Schuim de melk op.
– Giet de koffie in een kopje.
– Giet de opgeschuimde melk op de koffie.
– Voeg cacaopoeder of kaneel naar wens toe.
– Beëindig het proces.

6 Eindig het proces.

Stoom diagram

8. Opdracht 9: flowchart

F1M2-VRMG Opdracht 9 maak een Flowchart 

Oefening 9 flowchart

De opdracht
Een flowchart is een schematisch overzicht van alle mogelijke stapjes in een
proces van een website of app. Het is een grafische weergave van hoe je door een proces kan lopen.
Je gebruikt een flowchart voor het tekenen van de ‘flow’ van je website, webshop, App of een ander mediaproduct.

  1. Lees en bestudeer de theorie.
  2. Maak een flowchart van de website van de door jouw gekozen museum-website, die je hebt gebruikt voor je user story. Je maakt een flowchart om te onderzoeken hoeveel pagina’s en links jouw museum-website heeft. Zorg dat je compleet bent. Alle pagina’s moeten worden weergegeven in een grafische, overzichtelijk uitgewerkte flowchart. Je visualiseert dus alle klikbare pagina’s en links in de flowchart.

RESULTAAT
Stap 1: Maak eerst een schetsje op papier ( Besprek die met je docent)
Stap 2: Een complete grafische flowchart gemaakt in Illustrator of in Draw Op A3-formaat.

Stap 1

  • Maak eerst een schetsje op papier of met post-its en maak daarna pas de digitale flowchart.




    Deze onderdelen moeten worden verwerkt in de flowchart >>
  • Maak een flowchart met minimaal deze niveaus (dus 4 subniveaus):
    a. Root : Bovenaan wordt de index-pagina geplaatst met de hele menustructuur. >>DIE WERK JE HELEMAAL UIT<<
    b. Level 1: Hieronder worden de pagina’s geplaatst die vanuit de index te bereiken zijn. >3X<
    c. Level 2: Hieronder plaats je weer de sub-pagina’s. >3X<
    d. Level 3: Sub-sub-pagina’s. >3X>
    e. Externe link; Links: www…./nl. > ALLE OP DE PAGANA<

  • 1. Hoeveel pagina’s bevat de site (Elk rechthoekje is een pagina)?
    2. Hoeveel links bevatten de pagina’s? (-Link: www…./nl)
  • 3. Elk niveau heeft een eigen kleur.
  • Ga in duo’s bij elkaar kijken of je alle pagina’s hebt gevonden. Je kunt
    elkaar helpen met het aanvullen en aanpassen van het complete aantal
    pagina’s. Doe dat samen ook online.
  • Maak de digitale grafische weergave in Illustrator op, of met https://www.draw.io
    Werk uit op A3-formaat.

! Let op ! Beoordelingscriteria

• Je hebt de studiewijzer gelezen en bestuurd 
• Je hebt een schetsje op papier of een foto van je post-its.
• Grafische weergave in Illustrator of met Draw, op A3-formaat.
• Compleet aantal pagina’s van de museum website.
• Een flowchart met minimaal de 4 niveaus (zoals hierboven beschreven).
• Vermeld duidelijk welke museum-website je hebt onderzocht.

INLEVERWIJZE
  • Inleveren via Teams 

DEADLINE 
Week 1: start theorie en uitwerken van de opdracht.
Week 2: feedback op je schets einde van die week digtaal inleveren.

8. Voorbeelden van een Flowchart

1

1

2

3

4