Xtem. Stemmen per thema via internet. Functioneel ontwerp (concept) Ontwerp: Erik Koopman Social innovation designer Juni 2013 Versie 0.

Transcriptie

1 Xtem men per thema via internet Functioneel ontwerp (concept) Ontwerp: Erik Koopman Social innovation designer Juni 2013 Versie 0.2

2 Xtem Ontwerpvisie Modulair ontwerp Layout opbouwfase Layout groeifase Basisfunctionaliteiten Ideeën Over dit functioneel ontwerp Dit functioneel ontwerp omvat de ontwerpvisie, grafische uitwerking en technische detaillering voor de bouw van de website Xtem.nl. Doel van Xtem.nl is om een stevig en duurzaam fundament te creëren voor het collectief ontwikkelen van stemmen en kennis delen per thema via internet. Iedereen kan deelnemen en bijdragen aan dit initiatief. Wie 10 jaar geleden uitlegde hoe Wikipedia, Facebook en Twitter werken werd sceptisch aangekeken Visie: Online platform voor Democratie & Innovatie Wie in deze tijd van snelle verandering uitlegt hoe stemmen via internet is te realiseren wordt sceptisch aangekeken Plan van aanpak Financiën Functioneel ontwerp Hoe denk jij over de toekomst van onze democratie? Bouwen website Xtem.nl Ontwerp: Erik Koopman, social innovation designer Opdrachtgever: Platform Bestuurlijke Innovatie 2.0

3 Inhoud Ontwerpvisie Waarom Xtem 5 Doelen & Kaders 5 Meest ideale eindbeeld Xtem 6 Programma van eisen 7 Plan van aanpak 8 Lange termijn visie 9 Planning 10 Modulair ontwerp Opbouw website 12 Zelflerende website (1) 13 Zelflerende website (2) 14 Drag & Drop 15 Open ontwerp 16 Embedcode 17 Layout opbouwfase Responsive design 19 Sjabloon 20 Voorpagina 21 Voorpagina mobiel 22 men 23 Mindmap 24 Innovatie 25 Themapagina 26 Community 27 Layout groeifase Responsive design (beta) 29 Voorpagina 30 Voorpagina mobiel 31 men 32 Wat wil Nederland 33 Innovatie 34 Themapagina 35 Community 36 Basisfunctionaliteiten Mindmaps (visie) 38 Mindmap (widget) 39 Themamondmap (principe) 40 Visualiseren thema's 41 Basiscontentelement 42 Prioriteren (ranking) & Slepen 43 men/beoordelen (rating) & Reageren 44 Actieve pollmodule 45 Voorkeurstemmen (resultaten) 46 men extern 47 Toevoegen content 48 Nieuwe content modereren 49 Betrouwbare stemmer 50 Ideeën voor doorontwikkeling Xtem.nl Diverse ontwerpideeën 52

4 Ontwerpvisie Uitgangspunten, doelen en voorwaarden voor een innovatieve website

5 Waarom Xtem Doelen & Kaders Oude politiek houdt vast aan oud systeem Het huidige systeem van representatieve democratie (1848) voorziet in algemeen kiesrecht voor mannen (1917) en vrouwen (1919). Dit systeem is toe aan vernieuwing omdat: Het vertrouwen in de politiek sterk is gedaald, 61% van de Nederlandse bevolking geeft de politiek een onvoldoende (bron: CPB). De macht in de huidige democratie ligt niet bij de bevolking, maar bij grote politieke partijen, ambtelijke instanties, media en machtige lobby. De maatschappelijke situatie is volledig veranderd. In de 19e en begin 20e eeuw was het merendeel van de bevolking niet of beperkt opgeleid. Informatie was beperkt en traag beschikbaar. In de 21e eeuw wordt iedereen opgeleid. Informatie is via internet en sociale media direct toegankelijk. Kleine elites binnen politieke partijen bepalen in grote lijnen de verkiezingsprogramma's en het regeerakkoord. men op voorkeuren per politiek thema door de bevolking is niet mogelijk. Op lokaal nivo is experimenteren met bestuurlijke vernieuwing alom zichtbaar. Nationaal houden gevestigde politieke en ambtelijke belangen star vast aan bestaande systemen. Moet de bevolking nu stil gaan zitten afwachten? Xtem.nl: Experimenteren met bestuurlijke vernieuwing op nationaal nivo Wat zijn de beste werkvormen voor uitbreidingen innovatie van de democratie op nationaal nivo? Hoe zijn duurzame participatie, meer transparantie en effectief gebruik van internet te realiseren. Hiervoor is geen eenduidige oplossing voor handen. Belangrijk is om breed te experimenteren met nieuwe mogelijkheden. Doelen Xtem Xtem.nl wenst zich tot ontwikkelen tot barometer en kompas voor de Nederlandse politiek. De doelen zijn: men per politiek thema: representatief, wetenschappelijk onderbouwd onderzoek naar voorkeuren en prioriteiten in Nederland Voor Nederland, door Nederland: de website is volledig gericht op kennis delen, co-creatie en community Breed draagvlak m.b.t. werkmethodieken: brede maatschappelijke acceptatie van Xtem > bezoekers per maand: hoe meer deelnemers, hoe groter de kracht en invloed van Xtem in de media en politiek Sociale en economische netwerking stimuleren: mensen verbinden m.b.t. maatschappelijke en economische interesses, activiteiten en innovatie Aanjagen van bestuurlijke vernieuwing op nationaal nivo Randvoorwaarden voor de organisatie van Xtem De kaders voor de opbouw en organisatie van Xtem.nl zijn: Nadruk op het faciliteren van participatie in democratische processen Iedereen kan deelnemen en bijdragen Volledige en directe transparantie van alle activiteiten en processen, alle informatie is open data, m.u.v. privacygerelateerde items Zelflerende website en community Onafhankelijk en zelfvoorzienend Platform Bestuurlijke Innovatie (PBI) kiest met Xtem.nl voor experimenteren met stemmen per thema via internet op nationaal nivo. De reden is omdat de nationale politiek en overheid op dit terrein geen activiteiten ondernemen. Xtem.nl is een concreet project. Dit breed uitgewerkte functionele ontwerp biedt tools om te experimenteren met nieuwe vormen van stemmen en online samenwerking. De nadruk in het ontwerp ligt op het ontwikkelen van een onafhankelijk, zelflerend en zelfsturend online platform dat nieuwe vormen van participatieve democratie faciliteert. Iedereen kan deelnemen en bijdragen.

6 Meest ideale eindbeeld Xtem Hoofdlijnen voor ontwerp, inclusief ontwerpconsequenties: 1. men per thema Participatieve democratie via internet Publiek/community bepaalt de onderwerpen, niet de organisatie (invoer alle content via frontend) 2. Deelname door alle groepen in de samenleving Vrouwen, mannen, alle generaties, alle opleidingsniveaus, alle bevolkingsgroepen Integratie van stemmodules e.d. in externe websites vergroot bereik enorm 3. Hoge bezoekersaantallen Hoe meer deelname, hoe groter de druk op de politiek om Xtem in de gaten te houden Bezoek en deelname dienen makkelijk, leuk en interessant te zijn 4. Breedgedragen, representatieve resultaten Hoe hoger de kwaliteit, hoe groter de druk op de politiek om Xtem serieus te nemen Betrouwbaar stemmen (analyseren wie deelneemt) combineren met waarborgen privacy 5. Efficiënt online kennis delen Publiek goed voorlichten over politieke thema's Efficiënt kennis verzamelen en aanbieden m.b.t. agenda's, achtergronden, perspectieven, links e.d. 6. Open standaarden Waarborgen van interactie tussen technische toepassingen op korte en lange termijn Website en content integreren goed in alle browsers, externe content management systemen e.d. 7. Zelflerende website Community voorziet in, en modereert, alle content Publiek/community bepaalt de onderwerpen en innovatie, de organisatie faciliteert de processen 8. Zelfvoorzienende website Organisatie voorziet in eigen inkomsten, waarbij onafhankelijkheid wordt gewaarborgd Fondsen, donatie, verhuur van actieve stemmodules voor intern gebruik door organisaties 9. Transparantie & Open data Alle informatie, m.u.v. privacygerelateerde data, is vrij beschikbaar voor iedereen > 95% van alle data is direct online beschikbaar, delegaties uit community hebben inzicht in overige 5% 10. Duurzame innovatie Xtem o.g. is over 10 jaar breed geïntegreerd in alle politiek-bestuurlijke systemen Xtem vernieuwd voortdurend (doorlopende iteratie) en stimuleert actief open innovatie

7 Programma van eisen Uitgangspunten voor ontwerp: 1. De gehele website wordt ontworpen in HTML 5 en vaak toegepaste open standaarden, en functioneert optimaal in de top 5 van browsers bij alle schermformaten (responsive design) 2. De website, alle modules en alle contentelementen dienen geschikt te zijn voor drag&drop via muis- en touchbediening 3. Uitgangspunt voor functionaliteit en design is KISS: Keep It Simple and Straightforward 4. De opmaak van alle modules heeft een identieke opbouw met aan-/uitschakelbare functionaliteit (o.a. tabbladen) zodat externe webdevelopers en designers, met open data, eigen variaties en childthemes kunnen ontwikkelen en aanbieden in een (toekomstige) proeftuin, lab o.g. 5. Alle invoer van content verloopt via de frontend van de website, alleen programmeren en informatiebeveiliging worden uitgevoerd via de backend van de website. Alle activiteiten in de backend worden via de frontend verantwoord en door de community geverifieerd 6. Modules voor stemmen en prioriteren dienen eenvoudig en snel zijn te embedden in pagina's van externe websites, inclusief synchronisatie 7. Agenda's van de Eerste en Tweede Kamer, SER en Europese Unie worden ingeladen, dagelijks geupdate en in gelijke opmaak gepresenteerd 8. Alle data is open data, m.u.v. privacygerelateerde informatie (keuze aan deelnemers), welke aansluit bij vaak toegepaste open standaarden 9. Mindmaps dienen geschikt te zijn voor toekomstige zoekoptimatisatie en vergelijking met tags op externe platformen voor het automatisch aanvullen van mindmaps 10. De database is geschikt voor het schaalbaar en betrouwbaar verwerken van grote (pieken in) bezoekersaantallen 11.

8 Plan van aanpak De ontwikkeling van Xtem.nl omvat de volgende fasen: Fase Focus Werkzaamheden Opstartfase Ontwerp & Investeerders Uitwerken idee, functioneel ontwerp en vinden van investeerders Bouwfase Bouwen & Optimaliseren Bouwen website en contentstructuur, testen basisfunctionaliteiten Groeifase Community & Betrouwbaarheid Doorgroeien naar > regelmatige bezoekers website en opbouwen van brede community Effectfase Integratie in nationale politiek Doorgroeien naar > deelnemers en waarborgen van Kwaliteit & Representativiteit Dit functioneel ontwerp is gericht op de bouwfase en groeifase. Opbouwfase website Gestart wordt met het ontwikkelen van een website met basisfunctionaliteiten zoals responsive design, drag-drop, mindmap, actieve polls, prioriteiten, themapagina's en content toevoegen via de voorzijde van de website. Zodra de alfaversie gereed is gaat de website live en wordt via Twitter en de actieve pollmodule om input gevraagd m.b.t. de doelstellingen en basisfunctionaliteit van Xtem. Gelijkertijd wordt gestart met het opbouwen van mindmaps van maatschappelijke, economische en politieke thema's. Webdevelopers en designers worden via de website en Twitter gevraagd om voorstellen in te dienen voor widgets en child theme's. Aan de community wordt gevraagd om feedback te geven en te stemmen op de beste voorstellen. Doel is om aan het eind van de opbouwfase alle basisfunctionaliteiten goed in de praktijk te hebben getest en geoptimaliseerd. Groeifase website Beweging in de website krijgen en houden en een brede community ontwikkelen is een grote uitdaging. Het prioriteren van politieke thema's en actieve polls m.b.t. nieuws en agendapunten in de Tweede Kamer vormen hiervoor de basis. Het stemmen vindt plaats op zowel Xtem.nl en externe websites welke een door Xtem aangeboden embedcode van polls integreren in de eigen website. Op deze wijze worden meerdere doelgroepen bereikt. Doel is om breed gedragen en representatief onderzoek te initiëren en realiseren.

9 Lange termijn visie De bouw van moderne gebouwen begint met het neerzetten van de basisstructuur (skelet). Daarna volgen de gevels en dakopbouw (t.b.v. grote installaties). Dan volgt de inrichting. Tenslotte volgt het in gebruik nemen van het gebouw. Xtem.nl kent een gelijke opbouw en werkwijze. Xtem.nl start na de bouw van de website met het inrichten van het fundament, begane grond en dakopbouw. Daarna volgen stapsgewijs de 1e en 2e verdieping. Volledige transparantie en verantwoording van activiteiten en resultaten staan hierbij centraal. Lees van onder naar boven. Testen Proeftuin / Uitkijk Doorontwikkelen Open netwerking Ontmoeting per thema Interactie per thema Samenwerking per thema Open analyse Evaluatie per thema Sterkte-zwakte analyses Verbetervoorstellen Open innovatie Innovatie per thema Meekijken bij pilots Nieuwe initiatieven Groeifase Open community Organisatie Moderatie Verbeteren website Open newsroom Nieuws en actualiteit Agenda's 2e Kamer/EU Opstellen persberichten Open kennisbank Themapagina's Factmediatheek Wetenschappelijke onderbouwing Startfase Alle doelgroepen Start Open platform Vrije toegang Iedereen kan deelnemen Actief bijdragen men per thema Mening (rating) Prioriteiten (ranking) Openbare telling Open data Alle data, excl. privacy Resultaten per poll/thema Verantwoording organisatie Representatieve resultaten Fundament Techniek Beheer website Informatiebeveiliging Controle door community Privacy Privacybescherming Informatiebeveiliging Controle door community Database Beheer database Informatiebeveiliging Controle door community

10 Planning Xtem.nl wordt ontwikkeld overeenkomstig de volgende planning. Huidige fase: Uitwerken idee, functioneel ontwerp en vinden van investeerders 2012 Voorjaar 2013 Najaar 2013 Voorjaar 2014 Najaar Startfase Opbouwfase Groeifase Effectfase Definitieve naam Eerste prototype Werkende demo Versie 1.0 Versie 1.5 Versie 2.0 Enz. Functioneel ontwerp Grafisch ontwerp HTML-pagina's Test Iteraties Iteraties Iteraties Technisch onderzoek Beta Verbeteren Verbeteren Verbeteren Financiën Focus Demo Mindmap + men Betrouwbaarheid & Open innovatie DWDD Communicatie Uitnodigen via Twitter Wat kies jij Wat wil NL Integratie in nationale politiek

11 Modulair ontwerp Fundamenten voor ontwerp, zelflerendheid, zelfregulatie en zelforganisatie

12 Opbouw website Xtem.nl start met lege mindmappagina's waarop deelnemers hun thema's benoemen. Iedereen kan hieraan bijdragen. Het totaal van alle individuele mindmaps vormt de basis voor de collectieve mindmap. De structuren voor de navigatie en database worden hierop gebaseerd. Wie doorklikt op mindmapitems komt op themapagina's/kenniskaarten waar thema's en trefwoorden worden gedefinieerd en voorzien van foto's en kennis. Individuele mindmaps Hoofdpagina's Enz. Voorpagina Menu Actueel men Alle polls Mijn prioriteiten Wat wil NL Overzicht van alle prioriteiten Innovatie Nieuwe ontwikkelingen Collectieve mindmap Themapagina's / Kenniskaarten Structuur website Trefwoorden / Tags Overzicht thema's Zoekoptimalisatie Inrichting database Hoofdthema Thema Subthema Subthema Subthema Hoofdthema... Subthema... Thema... Subthema... Per themapagina / kenniskaart Opbouwfase Definitie 's Mindmaps per thema Groeifase en later Polls + Prioriteiten Kennisbank Debat Analyse Subthema Voorstellen

13 Zelflerende website (1) Voor Nederland, door Nederland is het uitgangspunt voor de ontwikkeling van Xtem.nl. Gekozen is om, idem als bij Wikipedia, om alle content via de voorzijde van de website door websitebezoekers te laten invoeren. Tekst verwijderen zoals bij Wikipedia is niet mogelijk. Wel is het mogelijk om content een positieve of negatieve stem te geven. Op deze wijze komen breed gedragen content en keuzes boven aan de lijst te staan. Content toevoegen vanaf de voorzijde wordt stapsgewijs uitgebreid. Begonnen wordt met mindmaps maken, daarna volgt polls toevoegen, enz. De achterkant van Xtem.nl omvat uitsluitend webbeheer, informatiebeveiliging en keuzes van de community m.b.t. functionaliteit, standaarden en design te integreren in de website. Alle moderatie wordt verricht door de community. Conceptontwerp: Xtem Actueel Wat wil NL Innovatie + i Zoeken Thema's Plaats nieuws Aanmelden Maak een poll Start een mindmap Kennis toevoegen Voorstel indienen Overzicht nieuwe items

14 Zelflerende website (2) Doel: Zelfregulerende community mogelijk maken Functie 1: Items met meest voorkeuren staan/rouleren bovenaan de lijst Functie 2: Consistentie in beoordeling. Elk item groot (blog, voorstel) of klein (mening, definitie mindmapitem) wordt op identieke wijze beoordeeld. Gekozen is voor een brede beoordelingsmethode. Terugbrengen van het aantal beoordelingsmogelijkheden is een optie als de praktijk dit vraagt. Conceptontwerp: Mijn mening m.b.t. dit thema: Populair Nieuw Alles Ik Mijn mening i Resultaten Meest gekozen optie Vaak gekozen optie Vaak gekozen optie Jouw reactie Optie X Optie Y +3 Heel goed / Helemaal mee eens +2 Goed / Mee eens +1 Ja, mits 0 Geen mening -1 Nee, mits -2 Slecht / Mee oneens -3 Heel slecht / Helemaal mee oneens Niet relevant / Offtopic Spam Widgetnaam

15 Drag & Drop Doel: Alle website onderdelen zijn versleepbaar. Functie 1: Functie 2: Personaliseren: Aanpassen pagina's, zoals persoonlijke dashboards, naar eigen voorkeur door verslepen en toevoegen van widgets Rangschikken: Contentelementen (mindmapitems, titels, antwoorden polls, items op prioriteitenlijst, feiten, teksten, meningen e.d.) naar eigen voorkeur verslepen voor het samenstellen van lijsten/overzichten, mappen, analyses en voorstellen Conceptontwerp: Widget verplaatsen Rand ingedrukt houden Prioriteren Dashboard / Map / Analyse Basiscontentelement Basiscontentelement Basiscontentelement Basiscontentelement Basiscontentelement Basiscontentelement Veld ingedrukt houden Basiscontentelement Geselecteerde content Veld ingedrukt houden Slepen tussen widgets Basiscontentelement Basiscontentelement Veld ingedrukt houden Slepen tussen widgets Basiscontentelement Basiscontentelement Basiscontentelement Basiscontentelement

16 < < Xtem Ontwerpvisie Modulair ontwerp Layout opbouwfase Layout groeifase Basisfunctionaliteiten Ideeën Open ontwerp Doel: Community laten meebouwen aan en meebeslissen over opmaak widgets en design website Functie 1: Functie 2: Externe webdevelopers en designers kunnen via child themes voorstellen voor ontwerp en optimalisatie van de website indienen De beste voorstellen (meeste stemmen) bepalen het definitieve ontwerp van Xtem.nl Elke doelgroep (kinderen, vrouwen, senioren) kan in de toekomst, via zijn/haar profiel, een voorkeur websitelayout kiezen Opmerking: De parent theme vormt de basis voor de website in de opbouwfase Conceptontwerp: Xtem Wat wil NL Innovatie + i Thema's Aanmelden Xtem Wat wil NL Innovatie + i Thema's Aanmelden Principe parent theme: Elk onderdeel in het parent theme heeft een eigen kleurnummer Parent theme > Child theme > Parent theme Childtheme Rand widget #A1A1A1 #... Werkwoord + Thema Tags Pollvraag Resultaten Werkwoord + Thema Tags Pollvraag Resultaten Rand tabblad #A2A2A2 #... Rand contentelement #B1B1B1 #... > Nieuws Tweede Kamer Overig > Nieuws Tweede Kamer Overig Vlak menu 1 #FFFFFF #... 2 polls 1 poll 2 polls 1 poll Vlak menu 2 #F1F1F1 #... 1 poll 3 polls 2 polls 1 poll 3 polls 2 polls Tekstsoort 1 # #... Tekstsoort 2 # #... Blog Blog Organisatie Xtem & Resultaten Organisatie Xtem & Resultaten Organisatie Xtem & Resultaten

17 Embedcode Doel: Alle doelgroepen bereiken Website voor publieke opinies zoals trekken vaak een beperkte groep deelnemers aan (veelal blanke mannen tussen jaar). Xtem.nl kiest er voor om extern stemmen en kennis delen mogelijk te maken. Polls en themapagina's worden hiervoor, idem als YouTube-video's, voorzien van embedcodes. Iedereen van individuele blogs tot portals, belangenverenigingen en professionele media kan de embedcodes in hun (HTML5-)webpagina's opnemen. Xtem.nl zet alle individuele polls om in collectief, transparant en representatief onderzoek. Modules voor extern stemmen en kennis delen voorzien tevens in een brede marketing van Xtem.nl. Conceptontwerp: Portal 1 Portal 2 Portal... Blog 1 Blog 2 Blog men men men men men men men Media 1 Xtem.nl men Media 2 Embedcodes Resultaten persberichten men Prioriteiten totaalbeeld Database Voorstellen per thema Actualiteiten Input deelnemers Agenda Tweede kamer Community men Media... men Versterken van maatschappelijke dialoog Uitgangspunten voor beleid en partijprogramma's Definitief besluit door Tweede Kamer

18 Layout opbouwfase Ontwikkelen mindmaps & Optimaliseren basisfunctionaliteiten

19 < < < < Xtem Ontwerpvisie Modulair ontwerp Layout opbouwfase Layout groeifase Basisfunctionaliteiten Ideeën Responsive design Doel: Website geschikt maken voor alle schermmaten (mobiel, tablet, monitor, tv) Notitie: Indeling grid is onderdeel van definitief ontwerp Conceptontwerp: Xtem Alfa Xtem Alfa Actueel Mindmap Innovatie i Xtem Alfa Actueel Mindmap Innovatie i Zoeken Xtem Alfa Actueel Mindmap Innovatie i Zoeken Thema's 3 Aanmelden Thema's 3 Aanmelden Thema's 3 Inlognaam 3 Thema's Inlognaam mindmap Mindman Nederlandse politiek Tags Uitleg Ga naar mindmap Doe mee Doelstellingen Xtem Functioneren mindmapmodule Functioneren actief stemmen Opmaak website Techniek database > > > Maak mindmaps Tags Uitleg Doelstellingen Xtem Doe mee mindmap Functioneren mindmapmodule Functioneren actief stemmen Opmaak website Proeftuin Ga naar mindmap > Waarom Xtem of Meedoen Direct naar Alerts Maak mindmaps Tags Uitleg... Doe mee Doelstellingen Xtem Functioneren mindmapmodule Functioneren actief stemmen Opmaak website Techniek database Ga naar mindmap Proeftuin Nieuwsbrief Alerts Blijf op Kom in actie de hoogte NL in beeld Cartoons Blogs Tabs rouleren galerij Twitter Facebook Nieuw Tweet Tweet Tweet Waarom Xtem of Meedoen Direct naar Alerts Maak mindmaps Tags Uitleg mindmap Doe mee Doelstellingen Xtem Functioneren mindmapmodule Functioneren actief stemmen Opmaak website Techniek database Ga naar mindmap Proeftuin Nieuwsbrief Alerts Blijf op Kom in actie de hoogte NL in beeld Cartoons Blogs Tabs rouleren galerij Twitter Facebook Nieuw Tweet Tweet Tweet Blog Techniek database Tweet Tweet Organisatie Xtem & Resultaten Blog Blog Organisatie Xtem & Resultaten Organisatie Xtem & Resultaten Organisatie Xtem & Blog Organisatie Xtem & Resultaten Organisatie Xtem & Resultaten Organisatie Xtem & Resultaten Organisatie Xtem & Resultaten Organisatie Xtem & Resultaten Organisatie Xtem & Resultaten

20 < Xtem Ontwerpvisie Modulair ontwerp Layout opbouwfase Layout groeifase Basisfunctionaliteiten Ideeën Sjabloon Algemene opmaak Xtem.nl LOGO Menu 1 Menu 2 Zoekwidget Menu 3 Widget Menu 4 Menu 5 (Menu)widget Widget (Menu)widget Widget Widget Widget Widget Widget Widget Widget

21 < Xtem Ontwerpvisie Modulair ontwerp Layout opbouwfase Layout groeifase Basisfunctionaliteiten Ideeën Opbouwfase: Voorpagina De demo / alfa-versie van xtem.nl is gericht op het publiekelijk testen van modules, functies en opmaak Thema's Dropdown (idem Amazon.com) Mijn favorieten 3 Reacties op mijn input Uitleg voor nieuwe bezoekers of snellinks voor ingelogden en bekende IP-adressen Xtem Alfa Actueel Mindmap Innovatie i Zoeken 3 Thema's Waarom Xtem Indien ingelogd of bekende IP Direct naar Alerts mindmap / Slider Doe mee NL in beeld Cartoons Aanmelden Nieuwsbrief Alerts Banner Blogs Over Xtem, site map, FAQ, contact etc. Aanmelden / Inlognaam (Instellingen) Schermgrootte Alerts Houd mij op de hoogte Delen Twitter, facbook e.d. RSS Nieuwsfeeds Slider: Informatie over maken mindmaps en testen van basisfunctionaliteiten Wat zijn belangrijke thema's voor jou? Tags Uitleg Ga naar mindmap Tabs rouleren Uploaden en taggen van foto's t.b.v. slider, polls, themapagina's e.d. galerij Links naar polls, taken (doe mee) en testpagina's voor nieuwe functionaliteit (proeftuin) Doe mee Doelstellingen Xtem Functioneren mindmapmodule Proeftuin Twitter Tweet Nieuw Meer Alle nieuwe posts en polls op de website worden (automatisch) gemeld via sociale media Functioneren actief stemmen Opmaak website Tweet Techniek database Tweet Tweet Standaard blogfunctie voor o.a. organisatienieuws en resultaten van polls Blog Organisatie Xtem Gesponsord door Resultaten polls

22 Opbouwfase: Voorpagina mobiel De mobile versie van de website komt overeen met de hoofdkolom van de desktop-/tabletversie Menubalk alleen op voorpagina Xtem Thema's 3 Level 1 Level 2 Level 3 Ontwikkeling Xtem: De website van Xtem ziet er aantrekkelijk uit. Top 10 Level 3 Alles Mindmap Welke politieke thema's vindt jij belangrijk? Ik Mee eens: Ingeklapt veld Direct stemmen via stemvakje Mee oneens: Ingeklapt veld Direct stemmen via stemvakje Mee oneens mits: Ingeklapt veld Direct stemmen via stemvakje Aanmelden > Xtem i Zoeken (instand search) Actueel Wat wil Nederland Innovatie Debat Thema's Mijn favorieten Mijn inbox Community Aanmelden & Instellingen Mee eens mits: Ingeklapt veld Direct stemmen via stemvakje Helemaal mee eens: Ingeklapt veld Direct stemmen via stemvakje Blog Organisatie Xtem Organisatie Xtem Organisatie Xtem

23 < Xtem Ontwerpvisie Modulair ontwerp Layout opbouwfase Layout groeifase Basisfunctionaliteiten Ideeën Opbouwfase: men De stempagina in de opbouwfase omvat polls over functioneren van modules en opmaak van de website Xtem Alfa Actueel Mindmap Innovatie i Zoeken 3 Thema's Aanmelden Menuwidget t.b.v. stemmen Uitleg Actieve polls Prioriteiten Mijn keuzes Maak een poll Verbeteren Xtem: Wat vind jij van werkwoord en onderwerp? Top 10 Alles Ik Nieuwsbrief Alerts Banner Banner Wat wil NL Wat wil jij Menuwidget t.b.v. alerts Testen van module Actief stemmen Alert 1 Alert 2 Mee eens: Ingeklapt veld Direct stemmen via stemvakje Mee eens mits: Ingeklapt veld Direct stemmen via stemvakje Mee oneens: Ingeklapt veld Direct stemmen via stemvakje Helemaal mee eens: Ingeklapt Direct stemmen via stemvakje Welke functionaliteit op Xtem dient als eerste te worden verbeterd? Thema Functionaliteit Q A Thema Functionaliteit R E Thema Functionaliteit S I Thema Functionaliteit T T Thema Functionaliteit U Q Testen van module Prioriteiten Mee oneens mits: Ingeklapt Direct stemmen via stemvakje Laatste reacties Filter Testen van module Overzicht polls Populair Nieuw Alles Doelstellingen Xtem Functioneren mindmapmodule Ik Welke functionaliteit op Xtem Onderwerp + Thema uu:mm dient Mee oneens als eerste mits: te Tekst worden... verbeterd? Onderwerp + Thema uu:mm Helemaal mee eens: Tekst... Testen van module Reacties Functioneren actief stemmen Opmaak website Onderwerp + Thema uu:mm Mee oneens: Tekst... Techniek database Onderwerp + Thema Mee eens mits: Tekst uu:mm

24 < Xtem Ontwerpvisie Modulair ontwerp Layout opbouwfase Layout groeifase Basisfunctionaliteiten Ideeën Opbouwfase: Mindmap Xtem begint de ontwikkeling van de website met lege mindmaps. Het totaal van alle individuele mindmaps vormt de collectieve mindmap De documentatie van widgets, database en andere techniek wordt eveneens als mindmap opgezet Menuwidget t.b.v. mindmap Menuwidget t.b.v. alerts Raster overeenkomstig Google Maps Werking mindmap: zie basisfunctionaliteit Uitleg Collectieve mindmap Mijn mindmaps Maak een mindmap Alert 1 Alert 2 Xtem Alfa Actueel Mindmap Innovatie i Zoeken 3 Thema's Totaaloverzicht / Themanaam + Level 1 Level 2 Level 3 i Ontwerp 1 Klik op raster om te starten Level 3 Level 4 = Thema Level 1 Level 2 Level 3 Level 3 Aanmelden Nieuwsbrief Alerts Level 1 Level 2 Level 3 Bewerken Level 3 Toevoegen aan favorieten Aanpassen van collectieve mindmap Toevoegen en verwijderen wordt zichtbaar gemaakt als + of x x x x 1x klikken op contentelement opent menu met keuzes voor: Level 1: Hoofdthema (categorie) Level 2: Thema Level 3: Subthema Level 4: Gerelateerd item Level A: Stakeholdercategorie Level B: Stakeholdergroep Level C: Stakeholder Level D: Indirect belanghebbende Kleur relaterend aan hoofdthema = Definitie thema/trefwoord Afbeeldingen bij thema/trefwoord Item verwijderen 2x klikken op contentelement opent themapagina

25 < Xtem Ontwerpvisie Modulair ontwerp Layout opbouwfase Layout groeifase Basisfunctionaliteiten Ideeën Opbouwfase: Innovatie Alle nieuwe functionaliteit en design wordt direct getest en beoordeeld via de proeftuin Menuwidget t.b.v. proeftuin Menuwidget t.b.v. community Xtem Alfa Actueel Mindmap Innovatie + i Zoeken 3 Thema's Functionaliteit Design Voorstellen Community > Nieuwscentrum > Organisatie > Websitebebeer > Proeftuin Proeftuin Functionaliteit Nieuws toevoegen Maak een poll Markeer tekst Structuur database Open standaarden Aanmelden Nieuwsbrief Alerts Banner Banner Design Voorstellen Test toevoegmodule > Plaats nieuws > Maak een poll > Markeer tekst > Maak een mindmap > Verwijzen naar externe blogs > Snel kennis toevoegen > Voorstel indienen >... Zie basisfunctionaliteit Testen module Plaats nieuws Organisatie Xtem Resultaten polls Testen module Maak een poll Testpoll 1 Testpoll 2 Testpoll 3 Testpoll 4 Testpoll 5

26 < Xtem Ontwerpvisie Modulair ontwerp Layout opbouwfase Layout groeifase Basisfunctionaliteiten Ideeën Opbouwfase: Themapagina Themapagina's krijgen een gestandaardiseerde opbouw (idem als tabbladen in kantoormappen) Xtem Alfa Actueel Mindmap Innovatie i Zoeken 3 Thema's Aanmelden Thema's Dropdown (idem Amazon.com) Themafoto Definitie mindmapitem/trefwoord Menuwidget t.b.v. thema/trefwoord 's bij mindmapitem/trefwoord Themamenu Definities galerie Themamindmap Polls Stakeholders Themanaam Definitie / Introductie (inklapbaar veld) Best gewaardeerde definitie... Beeldgalerie (inklapbaar veld) Naam Naam Naam Banner Alerts Banner Alle velden, m.u.v. eerste veld, zijn standaard ingeklapt op mobiele apparaten N.t.b. (uitklapbaar veld)

27 Opbouwfase: Community In samenwerking met deelnemers wordt de communitypagina ontwikkeld Xtem Alfa Actueel Mindmap Innovatie + i Zoeken 3 Thema's Aanmelden Community Community Nieuwsbrief Alerts Menuwidget t.b.v. community > Nieuwscentrum > Organisatie > Websitebebeer > Proeftuin Taken Voorstellen Geschat Gereed Door Taak 1 1:00 dd-mm 2 Banner Banner Taak 2 8:00 dd-mm 0 Taak 3 2:00 dd-mm 1 Taak 4 1:00 dd-mm 2 Taak 5 4:00 dd-mm 3 Nieuwe leden > Overzicht leden

28 Layout groeifase Ontwikkelen community & Uitbreiden content en functionaliteit

29 < < < < Xtem Ontwerpvisie Modulair ontwerp Layout opbouwfase Layout groeifase Basisfunctionaliteiten Ideeën Responsive design (beta) Doel: Website geschikt maken voor alle schermmaten (mobiel, tablet, monitor, tv) Notitie: Indeling grid is onderdeel van definitief ontwerp Conceptontwerp: Xtem Xtem Actueel Mindmap Innovatie + i Xtem Actueel Mindmap Innovatie + i Zoeken Xtem Actueel Mindmap Innovatie + i Zoeken 2 Thema's 3 Aanmelden 2 Thema's 3 2 Aanmelden Thema's 3 2 Aanmelden Thema's 3 Aanmelden Werkwoord + Thema Tags Pollvraag Resultaten Nieuws Tweede Kamer > Werkwoord + Thema Tags Pollvraag Waarom Xtem of Meedoen Direct naar Alerts Community Nieuwscentrum Webbeheer Proeftuin Werkwoord + Thema Tags Pollvraag Resultaten Plaats nieuws Maak een poll Alerts Blijf op Kom in actie de hoogte Wat wil NL Mijn prioriteiten 1 4 Thema 63% 2 1 Thema 61% 3 3 Thema 56% 4 2 Thema 42% 5 11 Thema 31% Waarom Xtem of Meedoen Direct naar Alerts Community Nieuwscentrum Webbeheer Proeftuin Werkwoord + Thema Tags Pollvraag Resultaten Plaats nieuws Maak een poll Alerts Blijf op Kom in actie de hoogte Wat wil NL Mijn prioriteiten 1 4 Thema 63% 2 1 Thema 61% 3 3 Thema 56% 4 2 Thema 42% 5 11 Thema 31% > 2 polls... 1 poll... 1 poll... 3 polls... 2 polls... > Resultaten Nieuws Tweede Kamer EU 2 polls 1 poll 1 poll 3 polls > Nieuws Tweede Kamer EU 2 polls 1 poll 1 poll 3 polls 2 polls NL in beeld Cartoons Tabs rouleren Blogs Nieuws Tweede Kamer EU 2 polls 1 poll 1 poll 3 polls 2 polls NL in beeld Cartoons Tabs rouleren Blogs Blog Organisatie Xtem & Resultaten Organisatie Xtem & Resultaten Organisatie Xtem & Resultaten Organisatie Xtem & 2 polls Blog Organisatie Xtem & Resultaten Organisatie Xtem & Resultaten Blog Organisatie Xtem & Resultaten Organisatie Xtem & Resultaten galerij Populair Reacties Nieuw Tabs rouleren Blog Organisatie Xtem & Resultaten Organisatie Xtem & Resultaten galerij Populair Reacties Nieuw Tabs rouleren