7 november 2015 • mei 16, 2018 at 12:45 pm Qdraw

De zoektocht naar jouw ideale land

Er vind op dit moment een immigratiestroom plaats in Europa. Honderden mensen komen uit verschillende landen naar Europa in de hoop op een betere toekomst. Maar in welk land kan deze ‘hoop op een beter toekomst’ werkelijkheid worden? Om zelf te kunnen kiezen heb heb ik een visualisatie gemaakt op basis van de beschikbare data. Wil je het zelf uitproberen, de visualisatie staat online

Update januari 2016

Er is een update van deze webapp. Deze vernieuwde versie is te zien op: Github


De zoektocht naar jouw ideale land ; | foto 1

Dit bericht is geschreven door: Dion

Tags: ,

Gecategoriseerd in:

5 juni 2015 • mei 4, 2018 at 4:14 pm Qdraw

Spokenjagers, een node.js realtime game

In dit artikel ga ik het hebben over het eerste begin van de technische realisatie van mijn project Spokenjagers: jaag in de echte wereld op virtuele spoken.

Om mijn werk beter te kunnen kaderen ga ik het eerst hebben over mijn voorkennis. Voorheen ben ik bezig geweest met projecten waarin Clientside Javascript, jQuery, een beetje PHP en WordPress gebruikt werden.

Ik ben begonnen met de belangrijkste functionaliteit: Het realtime weergeven van de huidige gebruiker op de kaart. Op Github is een demo te vinden waarbij de geolocatie realtime wordt weergegeven.

Voordat je dit script kunt uitvoeren moet je node.js wel geïnstalleerd hebben. Op de website van node.js kun je installers vinden voor verschillende platformen.

Het is belangrijk dat npm geïnstalleerd is. Npm staat voor Node Package Manager en komt mee met node.js. In de package.json staan de dependencies (benodigdheden). Deze benodigdheden kunnen worden geïnstalleerd door het commando: “npm install” uit te voeren in de map met het script.

Ik heb deze realtime geolocatie demo onderzocht en deze omgebouwd zodat er meerdere gebruikers worden weergegeven. Kort samengevat heb ik het zo gemaakt dat alle gebruikers worden verzameld en worden gedeeld met alle andere actieve gebruikers. Iedere gebruiker krijgt een uniek identificatie getal en deze wordt zichtbaar gemaakt op de kaart.

Er wordt over websockets gezegd dat het problemen gaat opleveren bij extreem veel gebruikers. Wanneer je meer dan 70.000 actieve gebruikers hebt dan is dit zeer nadelig voor de performance.

Wanneer je aan het ontwikkelen bent met node.js is het handig om nodemon te gebruiken. Nodemon is een gratis scriptje dat kijkt of je bestand veranderd is. Wanneer het bestand gewijzigd is wordt het draaiende node.js script opnieuw opgestart. Nodemon kun je globaal installeren door het volgende commando uit te voeren: “npm install nodemon -g”

Het is daarnaast belangrijk om de input te valideren. Dus om te controleren wat je voor geolocaties binnen krijgt. Tijdens de beginperiode zorgden lege geolocaties er voor dat het script vast liep. Een manier om dit te voorkomen is door te controleren of een de input een getal en geen nul is.

Omdat GPS een product is van het Amerikaanse leger worden de locaties met opzet minder nauwkeurig aangeleverd. Dit heeft tot gevolg dat de gebruiker kan gaan stuiteren op de kaart. Dit stuiter-effect heb ik opgelost met een filter.

Ik ben deze app verder gaan uitwerken door elke keer kleine functionaliteiten toe te voegen en tussentijds vaak de werking te testen.

Een werkende versie van de Spokenjagers-game is te vinden op https://qdraw.herokuapp.com/ (link werkt mogelijk niet meer). Dit spel werkt zowel op je mobiel, tablet als laptop.


Hoe ik met node.js ben begonnen om een realtime game te maken ; node.js, ontwerp, prototyping | foto 1

Dit bericht is geschreven door: Dion

Tags: , ,

Gecategoriseerd in:

5 juni 2015 • mei 31, 2015 at 4:05 pm Qdraw

De brug tussen ontwikkelaars en ontwerpers

In de tijd dat beeldschermen grote vierkante dozen waren er voor het web twee beroepen. De webdesigner en de webdeveloper. De ontwerper maakt een grafisch ontwerp met Adobe software en deze wordt omgezet door webdeveloper naar een werkende website.

Inmiddels kan het web veel meer dan alleen een statische pagina met tekst en beeld tonen. Wanneer je bijvoorbeeld naar Gmail gaat dan is de interactie tussen jou en de web-app super belangrijk. Op deze manier is de lijn tussen het werk van een ontwerper en developer steeds waziger geworden.

Als ontwerper hoef ik niks van code af te weten

Met het juiste gereedschap hoeft een ontwerper niet te kunnen coderen. Er zijn tools die een nette, functionele en responsive website kunnen maken. Er is tenslotte ook zo iets als specialisatie.

Met tools zoals Macaw.co en Webflow.com kun je een nette site maken. Deze tools maken gebruik alleen maar gebruik van drag ’n drop en leveren als output nette code.

Door mij niet bezig te houden met code kan ik mij beter specialiseren in ontwerp. Trends en technieken komen en gaan in design-land.

Waarom zou ik als ontwerper toch bezig moeten zijn met programmeren?

Je leert jezelf beter kennen door te weten wat je niet weet. Wanneer je bepaalde concepten binnen web development compleet negeert kun je hier ook niet je voordeel uit halen. Probeer het eerst en dan kun je later altijd nog zeggen dat je voor dit concept bewust niet kiest.

Om bij het ontwerpen realistische beloftes te kunnen doen is het noodzakelijk om inzicht te hebben in het development proces. Op deze manier verspil je minder tijd aan dingen die onmogelijk zijn binnen het budget.

Wat je als ontwerper wil

Een eenvoudige site als freelancer aanbieden

Wanneer je als freelancer werkt en niet zulke grote budgetten hebt om van een ontwerp een werkende site te maken. Vervolgens hoef jij of je klant je niet bezig te houden met de onderlinge communicatie.

Meer controle op het werk.

Elke artiest wil volledig controle over het werk. Ik heb er bewust voor gekozen om dit op deze manier er uit te laten zien en laten werken omdat…

Waarom ik als developer iets van design af hoor te weten.

Kennis van design helpt je om een beter overzicht te krijgen van het project. Op deze manier worden ontwerp-keuzes duidelijker en plaatst de ontwikkelaar zich dichter bij de eindgebruiker. Als ontwikkelaar ben je ook bezig hoe het voor de eindgebruiker gaat werken. Uit interviews met Apple medewerker Mark Kawano blijkt dat iedereen binnen Apple op een bepaalde manier met design bezig is.

Op zoek naar de balans tussen design en development

Het is altijd belangrijk om de verwachtingen zo veel mogelijk te belanceren. Het is zeker belangrijk dat een ontwerper zicht heeft op het development-proces. Het is ontwerper niet relevant om specifieke functie in de iOS ontwikkel omgeving te kennen. Daarnaast is het voor een developer niet noodzakelijk om super goed te kunnen werken met Illustrator.

Samenwerken en communicatie is de sleutel tot succes. Het is belangrijk dat je in het zelfde universum leeft. Zo is belangrijk om elkaar te kunnen aanvullen in plaats van ieder voor zich binnen bepaalde kaders te werken.


De brug tussen ontwikkelaars en ontwerpers ; dionweb, 2006, pc | foto 1

Bronnen:
designmodo, vanseodesign, webdesignerdepot, smashingmagazine

Dit bericht is geschreven door: Dion

Tags: , ,

Gecategoriseerd in:

28 mei 2015 • mei 29, 2015 at 5:13 pm Qdraw

Flowcharts helpen om een helikopterblik te krijgen

Flowcharts zijn er om overzicht te krijgen in processen, algoritmes en workflows. Op deze manier krijg je een helikopterblik van het proces. Het wordt over het algemeen gebruikt om een proces makkelijker te visualiseren, of om fouten in het proces te kunnen vinden.

Verbeteren van de Workflow

Het sneller en beter maken van je werkmethodieken gaat niet automatisch. Veel taken zul je onbewust uitvoeren, een manier om dit in kaart te brengen is om alle stappen uit te tekenen d.m.v. een flowchart. Nadat deze stappen in beeld zijn kun je beginnen met verbeteren. Je hebt dus door het uitwerken van het proces een nul-meting gedaan.

Programmeren

Bij het werken met subroutines en procedures is het handig om te werken met flowcharts. Wanneer er gewerkt wordt met objects dan wordt er met een andere variant van de flowchart gewerkt, namelijk een uml state diagram.

Troubleshooting Guides

Om tot een oplossing te komen bij een veel voorkomend probleem en de juiste vragen niet te vergeten worden flowcharts gebruikt. Op deze manier signaleer je het probleem en kun je de oplossing realiseren.

Nu zelf aan de gang

Er zijn verschillende manieren om snel een flowchart te kunnen maken. Zo is Microsoft Visio een goede tool om snel een flowchart te maken. Dit programma werkt alleen op een Windows computer.

Drawio is een goede manier om gratis flowcharts te maken . Wanneer je naar draw.io gaat kun je hier direct mee aan de slag!


Flowcharts helpen om een helikopterblik te krijgen ; flowchart, Stroomdiagram | foto 1

Dit bericht is geschreven door: Dion

Tags: , ,

Gecategoriseerd in:

14 mei 2015 • april 8, 2015 at 4:08 pm Qdraw

Wat is UX-Design?

UX-Design staat voor User Experience Design. Bij UX-Design staat de gebruiker centraal. Bij UX-Design probeer je om producten of diensten te verbeteren door te leren van de interactie tussen de gebruiker en het product.

UX-Design is een container begrip waar verschillende vakgebieden onder vallen. In dit artikel ligt deze vakgebieden uit.

Interaction Design (IxD)

Het vakgebied Interaction design (IxD) richt zich op het gedrag tussen mens en computer. Interactie is een wederzijdse actie op elkaar. Dit een wisselwerking. Interaction Design is er voor de structuur en het gedrag van interactieve systemen. Interactieve systemen zijn zowel fysiek als digitaal.

Visual Design (VD)

Een Visual Designer richt zich op digitale visuele communicatie. Een visual designer zorgt in de eerste plaats voor de vormgeving. Je bouwt verder op het werk van de Interaction Designer zodat het product er goed uit ziet en werkt. Visual design is grafisch ontwerpen voor digitale media.

Informatie Architectuur (iA)

Informatie Architectuur gaat over de relatie en samenhang die de informatie tot elkaar heeft. Om tot een goed interactie-ontwerp te komen ben je een goed overzicht van de informatie nodig.

User Research

Om de keuzes te kunnen onderbouwen die gemaakt zijn maak je gebruik van gebruikersonderzoek. Er zijn verschillende manier om gebruikersonderzoek te doen, zo is het mogelijk om d.m.v. eye-tracking kijkpatronen te analyseren en optimaliseren.

Usability

Het zo makkelijk mogelijk maken voor de gebruiker. Voor de eindgebruiker is het belangrijk dat het product zo effectief en efficiënt mogelijk werkt. De weg hierna toe wordt Usability genoemd.


Wat is UX-Design ; ux-design, ontwerp, infographic | foto 1

Dit bericht is geschreven door: Dion

Tags: , ,

Gecategoriseerd in:

7 mei 2015 • mei 3, 2015 at 6:47 pm Qdraw

Microinteracties

Het klikken op de like-button op Facebook is een microinteractie. Een microinteractie heeft maar één enkele taak. Deze interacties zijn kleine onderdelen in de user interface.

Microinteracties maken het verschil, ze zijn vaak klein en onzichtbaar. Weinig mensen zullen deze interacties bewust registeren. Ondanks dat een interactie niet opvalt wordt deze onbewust waargenomen en een duidelijke interactie zorgt er voor dat de site lekker loopt.

De theorie over microinteracties

Triggers

Een interactie wordt gestart door een trigger, deze kan handmatig of automatisch zijn. Wanneer de gebruiker op een knop klikt dan is dit een handmatige trigger. Een automatische trigger kan bijvoorbeeld starten op basis van tijd of locatie.

Rules

De regels bepalen wat er wel of niet kan. Zo wordt er in een regel bepaald wat er gebeurt wanneer je op een specifieke knop klikt. In een andere regel wordt bepaald wat er gebeurt als een sms-bericht binnenkomt.

Feedback

Er is nu wel interactie, maar waar heeft de gebruiker nu interactie mee? Door feedback (op het scherm) te geven weet de gebruiker wat er op dit moment gaande is. Bij microinteractie probeer je de feedback zo minimaal mogelijk te houden. Less is more. Maar het is de bedoeling dat de gebruiker wel weet waar het systeem mee bezig is.

Loops

Een loop is reeks commando’s waarbij aan het einde van de reeks teruggesprongen wordt naar het begin. Een microinteractie hoeft niet onmiddellijk een reactie te geven dit kan ook nog maanden duren voordat er iets mee gebeurd. Een loop waarbij de input niet direct zichtbaar is wordt een long-loop genoemd.

Deze tekst is geschreven op basis van het boek Microinteractions van Dan Saffer. De voorbeelden zijn van LittleBigDetails.


Microinteracties ; ios, ios8, weekdagen, weekdays, microinteractions | foto 1


Microinteracties ; dropshadow, ios, ios8, microinteractions | foto 2

Dit bericht is geschreven door: Dion

Tags: , ,

Gecategoriseerd in:

23 april 2015 • augustus 23, 2017 at 8:12 am Qdraw

Experience Prototyping

Het doel van experience prototyping is om een snelle en goedkope preview te hebben van hoe de gebruiker het product gaat ervaren. In dit artikel ga ik het hebben over de theorie en geef ik een voorbeeld van hoe ik experience prototyping in een project heb toegepast.

Wat is Prototyping?

Prototyping is het ontwikkelen en testen van een proefmodel of simulatie van een nieuw product. Een prototype is eerste model van een nieuw product. Een prototype kan handmatig worden gemaakt of soms wordt dit gewoon geprint met een 3d-printer. Zo kan d.m.v. prototyping de werking of passing van onderdelen worden getest en de productie worden voorbereid.

Wat is Experience Prototyping?

Bij het experience prototyping draait het om de ervaring van de gebruiker. Het doel van het prototypen is om het ontwerp concreet te laten ervaren. Op deze manier ervaren de gebruikers en klanten de interactie.

Hoe weet ik of een concept dat ik ontwikkeld heb ook gaat werken?, door prototyping. Bij prototyping is het doel om kansrijke concepten snel, goedkoop en zo vaak mogelijk in de praktijk uit te proberen.

Uit een prototype wordt de kennis gehaald om uiteindelijk het eindproduct te realiseren. Prototypes zijn er om van te leren. Een prototype is niet een eindproduct dat nog niet af is. Wat werkt wel er en wat werkt er niet is een belangrijkste vraag. Op deze manier weet ik wat er kan worden geschrapt of verbeterd.

Case: Ghosthunter (werktitel)

Ghosthunter is een concept voor een game. De uitwerking zal in een app-vorm zijn. De beloning is de sociale motivatie om naar buiten te gaan en te bewegen. De spelers werken zich in levels naar boven maar door niets te doen kunnen de levels ook naar beneden gaan. De game speelt zich fysiek af op een locatie. Er zijn drie rollen. De speler kan kiezen tussen binnen en buiten en de derde rol is de rol van het spook.

Buiten kan de speler spoken aanvallen door fysiek door de ruimte te bewegen. De kans dat de speler wint van het spook is afhankelijk van het level en de ervaring van de speler.

Binnen kan de speler zijn teamgenoten en de spoken saboteren. Saboteren kan door te geven of te nemen van levens en wapens. Je kunt zowel de spoken als de buitenspelers saboteren.

De spoken bewegen autonoom en zijn de tegenstanders die de mens aanvallen. Als gebruiker kun je niet kiezen om spook te zijn, de spoken worden afgehandeld door de computer.

Ervaringen Experience Prototyping (kaartspel)

Om het spel te kunnen testen heb ik er kaarten van gemaakt die een status aangeven, namelijk binnen en buiten. De scheidslijn tussen binnen en buiten is in dit spel dun.

Het is belangrijk dat speler het verschil tussen de binnen en buiten rol weet. Uit het prototypen blijkt als men voor het eerst het spel start dat de binnen en buiten-rollen onduidelijk zijn. Bij de uitwerking van het spel moet hier nog aandacht aan besteed worden. Wanneer de (binnen en buiten) rollen duidelijk zijn dan zie ik dat de spelers hier gebruik van gaan maken en dit wordt als positief ervaren.

Een ander item is dat het onduidelijk is dat de sterkte van de spoken verschilt. Op basis van deze test ga ik opnieuw overwegen of dit verschil ook aanwezig moet blijven.

Ik merk dat het argument “Werk het nu eerst nog maar verder uit” bij sommige mensen sterk naar voren komt. Maar het idee is dat ik met weinig tijd en middelen al tot nieuwe inzichten kan komen. Het is wel handig om een tech-demo te maken om alvast wat functies te kunnen testen. Deze nieuwe inzichten leiden tot een innovatiever product. Door te vroeg met een specifieke uitwerking te starten beperk je jezelf in de mogelijkheden om veranderingen door te voeren.

Ervaringen Experience Prototyping (tech-demo)

Om het spel nog beter te testen heb ik besloten om een tech-demo te gaan maken. In het vorige prototype is de ervaring nog niet goed zichtbaar. Door het prototype op straat uit te gaan proberen ga ik kijken of de ervaring beter zichtbaar is.

In deze demo speelt de locatie een belangrijke rol, de kaart is de playground. De locatie van de gebruiker is redelijk onnauwkeurig en dit is frusterend voor de spelers. Het wordt daardoor minder leuk om het spel te spelen.

In deze tech-demo is nog niet duidelijk wat er van de speler verwacht wordt omdat er maar één functionaliteit is uitgewerkt. Deze functionaliteit is het laten zien van alle spelers op de kaart. Zo is het op dit moment nog niet mogelijk om jezelf te herkennen op de kaart.

In deze demo is te zien dat het nog lastig is om een houding als speler aan te nemen. Het is misschien wel een beetje ongemakkelijk omdat er over een drempel gestapt moet worden. Om de speler deze stap te laten maken is het noodzakelijk dat de speler overtuigd wordt om daadwerkelijk naar buiten te gaan. Aan deze motivatie werk ik nog, maar deze zal in de sociale hoek liggen.


Experience Prototyping ; Experience Prototyping, proces, voorbereiding, papier | foto 1


Experience Prototyping ; Experience Prototyping, ontwerp, testen | foto 2


Experience Prototyping ; | foto 3


Experience Prototyping ; | foto 4


Experience Prototyping ; tech-demo, app, ghosthunter | foto 5

Dit bericht is geschreven door: Dion

Tags: , , ,

Gecategoriseerd in: