Oké vandaag over het functionele ontwerp korte uitleg nou dat je een fantastisch idee hebt gehad hoe jij een deel van je leven ze kan nu digitaliseren en daarna leuke app mee kan zou kunnen maken voor over je vereniging oh je je school leven al je vrienden over na wat je wil nou zou je toch moeten beginnen met een ontwerpen zijn verschillende soorten ontwerpen we behandelen nu het functionele ontwerp het functionele ontwerp is duidelijk niet het grafisch ontwerp het grafisch ontwerp laat zien hoe iets eruit komt te zien de stad is ook met alle toeters en bellen naar plaatjes en kleuren en mooi enzovoort dat is grafisch ontwerp het functionele ontwerp is eigenlijk niet mooi het gaat er niet om dat het mooie is het laat ook niet zien hoe het eruit komt te zien laat alleen zien wat je er mee kan doen dus dat verschil moet even heel duidelijk voor zijn niet hoe het eruit ziet maar wat je er mee kan doen het is ook niet het technische ontwerp het technisch ontwerp is hoe je het gaat maken hoe het in elkaar zit he dus nou even voorbeeld je hebt een wasmachine de kleur grafisch ontwerp maken dan zie je precies hoe dat ding eruit ziet maar 3d je eventueel maar ik u nog niet weet je niet wat je er mee kan doen dat je daardoor dat we de was mee kan doen dat dat dat dat zie je niet aan de grafisch ontwerp na het functioneel en functionele ontwerp kan dat zichtbaar maken wat je er mee kan doen dat je zit de deur open kan doen dat we volgens de wassing kan dat de bovenin dus de zeep erin kan wat je dan mee kunnen we de knoppen die ik aanraad en wat er dan gebeuren had dat het functionele ontwerp de technisch ontwerp is dat eigenlijk hoe die ene deurs die deur open doet en verscheen dicht doet dat dan bijvoorbeeld pas het programma in werking getreden want anders die deur niet goed dicht zit dan dat gaat het niet werken nou en en hoe je dat ding dan in mijn kz gaan we hebben het over applicatie wel heel wat anders functioneel ontwerp van jouw applicatie gaat er over wat kan de gebruiker en jij allemaal doen met de diep applicatie wat kunnen doen wat van de functies en functionaliteiten ja dus het verschil tussen functies en functionaliteiten laten het zo zeggen functionaliteiten eens wat je er mee kan doen in de functies zijn dan de stappen waardoor een functionaliteit compleet wordt nou een voorbeeld noemen bijvoorbeeld een zoekfunctie dus een functionaliteit van zoeken op uw website en de functie daarin is dat bijvoorbeeld ja de gebruiker moet daar een zoekwoord intikken dus de functie moeten familie te zijn die kan daar iets intikken ik kan force klikken op op opzoeken en wat en doorzocht en dan krijg je het resultaat de functie waarbij een lijst met zoekresultaten getoond worden dus verschillende functies samen vormen de functionaliteit en dat daar die bij de moet je plaats geven in je functionele ontwerp dit is zijn ongeveer de dingen die daar bij die je buik bij nodig hebt om een functioneel ontwerp compleet te maken nee en we beginnen van links we gaan met de klok mee zo naar boven en dan naar rechts en je begin links zie je de float dat noemen we ook wel een stroomdiagram wat gebeurt er en nadat je ergens op klikt bijvoorbeeld welke pagina wat een ach opent of welke functie wat er dan geactiveerd actie-reactie het ene leidt de dikte je ziet ook in stroomdiagram de de keuzes die je gebruiken maakt bij de lopen van jouw website die klikt op contact en het resultaat is dat contact formulier wordt geopend vervolgens voor die zich gegevens in en klik je op zoek mid en de resultaten dat het de derde de het formulier wordt verstuurd bijvoorbeeld via e-mail of de gegevens wat in een database opgeslagen dus actie reactie je doet iets en het levert iets op het leidt tot iets en ik ga vervolgens weer dat het anders leiden dat ze het stroomdiagram dat maakt de functionaliteit inzichtelijk ik zou zeggen dat is de basis van functioneel ontwerp als je dat stroomdiagram goed uit werkte heb je bijna een compleet functioneel ontwerp dat links boven zien we doel doelgroep en doelen dat zijn dingen waar je rekening mee moet houden waar je functioneel ontwerp oftewel dat moet je in gedachten houden van wat is je doelgroep dus heb je misschien wel verschillende doelgroepen heb je misschien publieke gebruikers heb je ook ingelogd te gebruiken dus mensen die een account hebben mensen die geen account hebben die mensen die geen account hebben die doorlopen dus een ander keuze proces dan de mensen die wel een account hebben dus daar geldt een ander andere flow voor nou de doelen is natuurlijk ook waar wil je dat de gebruiker uiteindelijk uitkomt in de flow 100 stroomdiagram zie je een hakjes oranje dat site je doel maar als je webwinkel hebt is het doel is de omzet dat je iets verkoopt dus die moest uiteindelijk wil je dat die gebruiken op uitkomt dus die dingen moet je in gedachten hebben en die moet je er tijd zichtbaar worden in je stroomdiagram gaan we verder en zien we een overzicht van pagina’s dat kan heel handig zijn dat je dat in je functioneel ontwerp laat zien een overzicht van de pagina’s naar begin natuurlijk met de homepagina en laat ik dan eventjes helemaal naar rechts onderaan de zien we naar rechts eigenlijk zie je wireframes hang dat zou bijvoorbeeld dat plaatje wat je daar ziet zou bijvoorbeeld de homepagina kunnen zijn dan kun je in stroomdiagram een hokje pakken en dat noem je home en volgens een pijltje het menu wat op de home komt met daarin alle menu-items webwinkel contact over ons informatie over na waarom is op kunnen klikken en vervolgens als dat klikken komen dus op een andere pagina terecht zo kun je dus in blokjes weergeven home contact elke pagina vanaf welke pagina’s op welke pagina komen maar je kunt het ook ons als rechtsstaat plezier dus een wireframe dat is een een draad diagram eigenlijk een ruwe schets van hoe je website qua structuur en layout eruit komt te zien dus niet grafisch ontwerp maar een ruwe schets wat komt waarop je op je website nou als je dan dat kun je ook als uitgangspunt nemen dat waar je frame west rechtsonder als als startpunt van je functioneel ontwerp dus sommige die die kiezen ervoor om te ik begin met een wireframe van een home pagina we zien vol linksboven is mijn logo naar hoef je niet op te kunnen klikken de onderzoeken slider daaronder ziekte aan een minuut maar ze dus kunnen kiezen en daar onderzoek videootjes dat we afbeeldingen de content wat kon varen op de homepagina en waar kan de gebruiker klikken en wat gebeurt er vervolgens als die daarop geklikt heeft dan gaat die of naar een andere pagina of de wordt een bepaalde functie uitgevoerd die keuze heb je en dat is uiteindelijk wat je hier stroomdiagram gelegenheid dus je stroomdiagram je complete functioneel ontwerp is eigenlijk een combinatie van een stroomdiagram met een met wireframes of een wireframe je kunt kiezen kies een wireframe van homepagina vervolgens laat ik zien waar mijn allemaal heen kan via blokjes u zegt ik prix met de homepagina als wireframe en vol smart ik voor elke subpagina een wireframe en die verbindt ik met pijltjes met elkaar dat is lijkt me wat ingewikkelde maar dat mag ook nou dat is even kort wat je dan aan paar heb dit is een voorbeeld van een stroomdiagram waarbij een een functie en functionaliteit wordt beschreven en waarbij eigenlijk de de verschillende pijltjes en blokjes geven de functies aan de ziet de functie van validatie die geeft de functies van een melding die wordt gegeven mijn functie waarbij de gebruiker ingelogd wordt of nu teruggestuurd wordt is er allemaal functies en samenvoegen vormen ze de functionaliteit van inloggen dus dat is onderdeel van stroomdiagram dit zijn de mogelijke onderdelen van je stroomdiagram de gebeurtenis wat gebeurt er twee validatie kloppen de gegevens die wat ingevuld was gevolgen dus actie reactie wat gebeurt er als iemand echte klikt via gaat over de personen welke doelgroepen maken gebruik van jouw web web applicatie voor applicatie met welke apparaten wordt op mijn applicatie gebruikt in hebben die met elkaar contact communiceren in elkaar bijvoorbeeld een mobiele telefoon met de computer met mijn database met 6 de relatie de relaties tussen de gebeurtenissen tussen de actie in de reactie dat tussen zit een parel dat zijn relatie hoofd staan die ten opzichte van elkaar de buttons heb je natuurlijk je verschillende pagina’s media zoals video en afbeeldingen en 10 meest belangrijk dus zijn gegevens welke informatie wordt op welke plek zichtbaar dat ze allemaal dingen waar je naar zou kunnen kijken je functionele ontwerpen dit is een voorbeeld van een wireframe nou zie je dus wat komt waar is een ruwe schets van een pagina waarbij aangegeven wordt wat waar komt dat ze de zorg de definitie van een weigering ruwe schets van een pagina die aangeeft wat wa komt oké dit is nog een voorbeeld van een stroomdiagram waarbij dus verschillende waar je frames of kwistige pagina’s aan elkaar gekoppeld worden met tussen pijltjes actie-reactie je klikt ergens op en het leidt tot een andere pagina het keuzemenu keuze proces wat te gebruiken doorloopt samenvatting functioneel ontwerp maak duidelijk wat alle functies zijn functies samen vormen en functionaliteit en applicatie zoals jullie die bouwen die heeft een twee of drie functionaliteiten misschien hebben die de 10 maar dat dat dat dan heb je heel veel werk te doen en dan zou zoomen moeten samenwerken en wie weet kom je heel ver maar ga er vanuit dat je twee drie op functionaliteit hebben hebt maar die moet je kunnen onder verdelen in verschillende functies je kunt gebruik maken van wireframe staat en je kan gebruik van flowchart maar je moet gewoon gebruik maken van de flowchart moeten moet stroomdiagram de backbone van je van je functioneel ontwerp is dat stroomdiagram zich inzichtelijk maakt de wat gebeurt er op welk moment als je er het gebruiker erop klikt op een button op een pagina op een link dan krijg je dus een schema van paginas te zien nou uiteindelijk je functioneel ontwerp hier is de basis van je planning en taakverdeling als je dat functionele ontwerp niet hebt is het onmogelijk een planning te maken maak je niet inzichtelijk voor jezelf niet voor de klant en ook niet voor de docent wat je tarik gaat maken en hoe lang jij denk daar voor nodig denkt te hebben en zeker als je samen weg met anderen en je hebt dan heb je een functioneel ontwerp nodig om te kunnen verdelen wie gaat straks aan welke functie werken wie gaat welke pagina uitwerken dat was het volgens mij ja zeker oké succes nog heel verhaal samenvattend functioneel ontwerp geeft alle functies weer van je webapps ik applicatie via stroomdiagram en een wireframe punt

As found on Youtube