Stappenplan. De ontwikkeling van een interface doorloopt bij Studio Wolf vier stappen. Deze stappen verduidelijken de weg naar het eindresultaat.

Transcriptie

1 Stappenplan Een interface is in principe alles wat de communicatie tussen de gebruiker en de computer bepaalt of vorm geeft. Het is het deel van de website of webapplicatie dat de interactie met de gebruiker regelt; het raakvlak tussen mens en computer. Deze definitie geeft gelijk aan hoe belangrijk een goede interface daadwerkelijk is. In dit hele stappenplan gebruiken we de term interface ongeacht het middel waarvoor deze gebruikt gaat worden. De ontwikkeling van een interface doorloopt bij Studio Wolf vier stappen. Deze stappen verduidelijken de weg naar het eindresultaat. In gemiddeld tien weken gaan we van concept, sfeerimpressie en interaction design naar een uitgewerkte responsive interface die te gebruiken is op alle apparaten. Na de oplevering blijven we graag betrokken, zodat de interface continu blijft voldoen aan de veranderende eisen van het web, de groei van het bedrijf en de mensen die er gebruik van maken. 1 / Concept (2 weken) In deze stap brengen we elkaars plannen bij elkaar. Aan de hand van een uitgebreid interview proberen we zoveel mogelijk te weten te komen. Denk hierbij aan vragen over het uiteindelijke doel van de interface, de doelgroep van het product en de identiteit van het bedrijf. Op basis van deze informatie maken we een concept dat we gedurende de ontwikkeling gaan omzetten naar een werkende interface. Oosterstraat 29a BTW NL B01 1

2 De conceptstap bestaat uit drie onderdelen: Interview: we willen alles van je bedrijf weten; Analyse: we brengen de identiteit en omgeving van het bedrijf in kaart en denken met je mee; Concept: het uiteindelijke concept dat de basis is van de interface. Interview Aan de hand van een uitgebreid informeel gesprek leggen we de passies, kern, omgeving en doelgroep vast. In dit interview stellen we ook vragen met betrekking tot het project zelf. Denk hierbij verantwoordelijkheden, tijdbeperkingen, enzovoorts. Dit zal overigens niet de enige keer zijn dat we bij elkaar komen. We houden van regelmatig face-to-face contact. Ook goed om te weten: we zijn dol op het nakomen van afspraken. Analyse De resultaten van het interview zetten we om naar een aansluitend interface-concept. We denken mee en kijken goed om ons heen: wat doet de concurrentie, hoe zien bestaande producten eruit, hoe gaan gebruikers met de interface om en wat zijn nieuwe manieren om de ervaring voor diezelfde gebruikers beter te maken? Deze informatie zetten we, indien nodig, om naar user stories die we vervolgens gebruiken voor datgene waar we echt goed in zijn: interface design. Concept Het interview en de analyse resulteren uiteindelijk in het concept. Deze presenteren en bediscussiëren (aan de hand van visuele middelen) uitgebreid. In het concept komen onze en jullie ideeën gecombineerd naar voren. Daarnaast geven we advies over inhoud en structuur, en bespreken we welke kansen internet biedt om jullie diensten op een eerlijke en gebruiksvriendelijke manier eruit te laten spingen. De ruggengraat van de interface staat nu. Oosterstraat 29a BTW NL B01 2

3 2 / Interface design (3 weken) Interface design bepaald de uiteindelijke werking van de toekomstige website of applicatie. Het is de manier waarop de gebruikers deze gaan ervaren, met alle aspecten van dien. Daarbij gaat het niet alleen om schoonheid, maar ook om gebruiksvriendelijkheid (positionering van elementen), beleving en details. Aan details hechten we bijzonder veel waarde. Focus op zowel de kern van het geheel en de mensen die het gaan gebruiken is daarbij van enorm belang. De stap interface design bestaat uit drie onderdelen: Sfeerimpressie: weergeeft de sfeer/beleving van de interface in beeldmateriaal, kleuren, lettertypes en meer; Interaction design: de schematische indeling van de verschillende schermen en de interactie tussen deze schermen; Interface design: het uiteindelijke ontwerp. De samensmelting van de sfeer en het interaction design. Sfeerimpressie Een sfeerimpressie is kort gezegd een gedetailleerd moodboard. Het geeft de sfeer en beleving van de interface weer. Let op dat het niet een daadwerkelijke interface is. Het zijn puur kleuren, vormen, stijlelementen en lettertypes die samen een goed beeld geven, zodat je alvast voorzichtig kunt gaan wennen aan het resultaat. Interaction design In dit proces bepalen we de indeling van de verschillende pagina s, de flow, en de manier waarop de gebruiker gaat interacteren met de interface. Het resultaat van deze stap zijn wireframes. Deze wireframes weergeven de indeling van pagina s zonder opmaak en vormgeving. Simpel is daarbij de sleutel, moeilijke problemen lossen we op met simpele oplossingen. Ook hier houden we rekening met verschillende apparaten waarop de interface moet gaan werken. De link tussen deze wireframes is het uiteindelijke interaction design. Het interaction design geeft een beeld van hoe het geheel gaat samenwerken en hoe we de gebruiker naar z n doel leiden. Dit presenteren we samen met de sfeerimpressie. Oosterstraat 29a BTW NL B01 3

4 Interface design Het uiteindelijke interface design is een samensmelting van de sfeerimpressie en het interaction design. De wireframes krijgen de sfeer van de sfeerimpressie met als resultaat een pixel perfect ontwerp. Je hebt nu een compleet beeld van de interface. Deze ontwerpen spreken we door. Komen we samen tot nieuwe inzichten, dan passen we het ontwerp daarop aan. 3 / Engineering (vanaf 4 weken) Engineering is een belangrijke stap in de ontwikkeling van een interface. Elk apparaat (mobiel, tablet, laptop, TV) stelt verschillende technische eisen aan een interface. Onze engineering zorgt ervoor dat de interface werkt, voor iedere bezoeker, waarop ze ook bekeken wordt. Bij Studio Wolf doet de designer ook de engineering. De designer weet het beste hoe de details in de interface bedoeld zijn. Lang niet alle details zijn expliciet uit de vormgeving (de afbeelding) te halen. Transities, animaties en verschillende versies van de interface voor verschillende apparaten zijn impliciet, en zitten alleen in het hoofd van de designer. Alleen de designer kan deze perfect op elkaar aansluiten, daar kan geen front-end developer tegenop. Engineering bestaat uit vier onderdelen: HTML5/CSS3: de techniek voor het werkbaar maken van de interface in de browser; Javascript: we programmeren dynamische onderdelen en effecten van de interface; Responsive: we zorgen dat de interface prachtig is op alle apparaten, van TV tot mobiel, en van lage tot hoge pixeldichtheid; Defining: het verfijnen van de interface terwijl ontwikkelaars en partners aan het werk zijn. Oosterstraat 29a BTW NL B01 4

5 HTML5/CSS3 Hier maken we van de interface werkbare webpagina s aan de hand van HTML5 (structuur en inhoud) en CSS3 (opmaak). Vanaf dat moment is tekst selecteerbaar, zijn linkjes aanklikbaar en kunnen zoekmachines de pagina s indexeren. We richten de code zo goed mogelijk in, zowel voor zoekmachines als voor ontwikkelaars. Daarnaast houden we ons aan de webrichtlijnen ( en schrijven we altijd valide HTML5/CSS3. Voor alle code die we schrijven maken we gebruik van versiebeheer (git). Wanneer nodig kunnen applicatie-ontwikkelaars aansluiten bij het project en altijd gebruik maken van de laatste versie. Javascript Javascript maakt een interface dynamisch. Denk aan meebewegende onderdelen, uitklapmenu s, dynamische contentvlakken, maar ook effecten en feedback (bij fouten, of juist wanneer iets gelukt is) maken deel uit van Javascript. Omdat Javascript uit veel moderne interfaces niet meer weg te denken is, schijven we deze code zelf. Dan weten we zeker dat de beleving van de interface precies aansluit bij het ontwerp en de interactie zoals deze bedoeld is. Responsive Een groot deel van de bezoekers surft met andere apparaten dan een PC of laptop. Om die reden zijn al onze interfaces standaard responsive (dus ook die van jullie). We hanteren het mobile first principe: we bouwen de interface op vanuit het kleinste apparaat naar grotere schermen en resoluties. Allen met hetzelfde detail en met dezelfde beleving. Defining Nu de interface klaar is, kunnen de ontwikkelaars aan de slag. Vaak zit tussen het interface design en de ontwikkeling van de applicatie of website nog een grijs gebied, namelijk de koppeling van de voorgenoemde twee. Om die reden duiken we zelf de code in. Dan kunnen we samenwerken met de ontwikkelaar en halen we het beste uit de webapplicatie of website. Oosterstraat 29a BTW NL B01 5

6 4 / Overdracht en groeien (1 week en verder) Een webapplicatie of website om trots op te zijn, dat is ons gezamenlijk doel. Een nieuwe interface is slechts een onderdeel daarvan. De andere helft is goede content, onderhoud en regelmatige vernieuwing. Bij de overdracht bespreken we de volgende onderdelen: De overdracht: de sleutel dragen we over aan jou; Verbeteren en groeien: doelen verleggen en blijven voldoen aan de veranderende eisen van het web. Overdracht Het grote moment is daar. De interface is klaar om online te gaan. Bij de overdracht nemen we samen nog een keer de webapplicatie of website door. Eventueel lanceren we het werk in de vorm van een presentatie of training voor grotere groepen. Tot slot blikken we terug op de samenwerking. Het project is klaar en opgeleverd. Verbeteren en groeien We streven ernaar actief betrokken te blijven bij het verder verbeteren van de webapplicatie of website. Onze ervaring is dat interfaces beduidend beter blijven als er regelmatig aandacht aan wordt besteed. Naast het feit dat we doelstellingen bekijken en de interface blijven aanpassen aan de bedrijfsvoering, voeren we ook zelf verbeteringen door. Aanpassingen om te voldoen aan veranderingen op het web en de manier waarop gebruikers de interface gebruiken, maar ook aanpassingen aan de interface als er nieuwe (mobiele) apparaten beschikbaar komen. Meer informatie over ondersteuning van Studio Wolf vindt je in onze voorstellen. Leuk om te weten: mocht je in de laatste fase van dit traject toch nog tot nieuwe inzichten komen, en daardoor wat willen veranderen aan de interface, dan delen we de kosten. We willen allemaal iets moois maken. Oosterstraat 29a BTW NL B01 6