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
Er is een update van deze webapp. Deze vernieuwde versie is te zien op: Github
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.
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.
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.
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.
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.
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…
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.
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.
Bronnen:
designmodo, vanseodesign, webdesignerdepot, smashingmagazine
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.
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.
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.
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.
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!
Dit bericht is geschreven door: Dion
Tags: 'flowchart', 'Stroomdiagram', ontwerpGecategoriseerd in: 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.
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.
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 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.
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.
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.
Dit bericht is geschreven door: Dion
Tags: 'infographic', 'ux-design', ontwerpGecategoriseerd in: Design
Tijdens mijn stage bij de Design agency “De Monsters” in Amsterdam heb ik een serie blog posts geschreven,
Op deze pagina is een overzicht te vinden van deze blogposts
Informatie architectuur (16 januari 2015)
Toepassen van de Informatie architectuur (23 januari 2015)
Ontwerpen met een grid (30 januari 2015)
Het design principe Mobile First (6 februari 2015)
Responsive design vs. Adaptive Web Design (13 februari 2015)
Gebruikers-scenario’s (20 februari 2015)
Ideeën toegankelijk maken met een mindmap (27 februari 2015)
Het maken van een wireframing-kit (6 maart 2015)
Gestaltprincipes (12 maart 2015)
Structuur in een projectdocument (19 maart 2015)
Navigatiestructuur (26 maart 2015)
Standing on the shoulders of giants (2 april 2015)
De gouden driehoek van de belichting (9 april 2015)
WordPress vs statische website (30 april 2015)
Microinteracties (7 mei 2015)
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.
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.
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.
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.
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.
Dit bericht is geschreven door: Dion
Tags: 'microinteractions', interactie, ontwerpGecategoriseerd in: Design
