De volgende generatie in webdesign

Jeremy Osborn en Andrew Miller zijn het dynamische duo achter Gymnasium, het gratis online cursusplatform voor creatieve, online en marketingprofessionals van werving- en selectiebureau Aquent. De heren hebben een wereld aan ervaring op het gebied van design, online en gebruikerservaring en delen hier hun toekomstvisie.

Wat zijn de belangrijkste ontwikkelingen in webdesign van dit moment?

Andrew: “Nu we steeds meer richting responsive design gaan, dreigt dat wat we echt nodig hebben, door alle beschikbare tools ondergesneeuwd te raken door dat wat mogelijk is. We worden overspoeld door glimmende speeltjes – nieuwe tools en apps – die beloven al onze problemen op te lossen. In die stortvloed zien wij opmerkelijke nieuwe thema’s opkomen, zoals:

• Rapid prototyping als centraal onderdeel van het ontwerpproces
• Content is leidend in design
• Zelfdocumenterende workflows”

Waarom is ‘responsive’ zo’n populair onderwerp?

Jeremy: “We zitten op het kantelpunt dat meer mensen internetten vanaf mobiel dan vanaf de desktop. Grote en kleine bedrijven beseffen dit en zoeken naar manieren om relevant te blijven voor hun klanten. Dit biedt gigantische kansen voor iedereen die het ambacht van webdesign beheerst, maar er zijn ook talloze uitdagingen.”

Wat is het verschil tussen adaptief en responsief ontwerp?

Andrew: “De eenvoudigste manier om het verschil te beschrijven is als volgt. In een adaptief ontwerp creëert een ontwerper meerdere versies van een website, één voor ieder apparaat. Een telefoongebruiker bezoekt een URL en wordt automatisch doorgestuurd naar de mobiele versie van de site. Iedere versie heeft indien gewenst zijn eigen opmaak, typografie, navigatie en andere UI-componenten, maar dan geoptimaliseerd zijn voor een specifiek device.

“In een responsief ontwerp maakt de ontwerper één versie van een website, die zich vervolgens als door magie aanpast aan het apparaat vanwaar de URL wordt bezocht. Een website met drie kolommen en een dropdown- of flyout-menu dat reageert op een muis, kan ook een enkele kolom hebben met navigatie die beter past bij touch bediening.

“Beide methoden hebben voor- en nadelen, zowel zakelijk gezien als vanuit het oogpunt van content, SEO, ontwerp, ontwerp, prestatie, gebruiksvriendelijkheid, etcetera.

“Gezien het grote aantal sites dat nog niet mobielvriendelijk is, zijn er heel veel bedrijven die nog moeten bepalen welke aanpak het beste bij hen past. En ze moeten echt iets gaan doen, zeker na de aanpassingen in het Google-algoritme van afgelopen april, waardoor mobiel-onvriendelijke sites lager scoren in zoekresultaten.”

Waarom wordt prototyping een centraal onderdeel van het ontwerpproces? 

Jeremy: “In traditionele manieren van werken werd het prototype specifiek gebouwd om gebruikers te testen of de flow en functionaliteit van het ontwerp te demonstreren aan belanghebbenden. Prototypen bestonden uit statische ontwerpelementen (draadmodellen, comps).

“De revisies, als gevolg van terugkoppeling na testen of demonstratie, moesten ook worden verwerkt in het statische ontwerp van het prototype (meestal om de stakeholders een plezier te doen). In dit geval was het prototype een eindproduct. Ontwerpers konden statisch denken en hun ideeën in statische vorm laten zien.

“Responsive webdesign vraagt van ontwerpers dat zij dynamischer denken en daadwerkelijk begrijpen hoe hun lay-out werkt op legio devices. Net zoals een ruwe schets nodig is om ideeën uit te werken, voor ze worden vertaald naar draadmodellen en lagen (comps), zo kunnen ontwerpers beginnen met een ruw prototype dat meeverandert. Een prototype kan problematische navigatie of contentstructuur veel beter aan het licht brengen dan welke statische afbeelding dan ook.”

Wat zijn zelfdocumenterende workflows? 

Andrew: “Dit is vrij nerdy, maar het idee raakt de UX-principes van minder documentatie-om-de-documentatie. Het betreft de ontwikkeling en het gebruik van tools die in feite hun eigen documentatie genereren. Een voorbeeld is een geautomatiseerd script dat een stijlgids creëert, rechtstreeks uit CSS.

“Dus als de kleur wijzigt van alle primaire navigatie-elementen (het liefst natuurlijk door één waarde of variabele te veranderen), dan past de stijlgids zich zelf aan. Voor wie in browsers kan ontwerpen, zijn er meerdere mogelijkheden om dit te realiseren. En er zijn plugins voor Sketch (bijvoorbeeld), waarmee een ontwerper zijn werk kan aanpassen en die de veranderingen automatisch doorvoeren in de documentatie.

“Het punt is, dat als je de tijd neemt dit van tevoren op te zetten, dit later enorm veel tijd en energie bespaart in het maken van documentatie. Het gaat dan vanzelf.”

Hoe zien jullie de toekomst van webdesign?

Jeremy: “Meer specialisatie. UX-ontwerpers in de hoofdrol. Bedrijven die intensief nadenken over het sneller maken van hun websites. Best practices voor mobiele gebruikersinteractie, zoals voor complexe navigatie, data-tabellen en afbeeldingen.“

Andrew: “Nog meer verschillende soorten devices. Integratie van meerdere schermen en meerdere apparaten. Dit gebeurt al, maar wat we daarmee doen is op dit moment vrij primitief.

“Schermloze ervaringen worden ook belangrijk. User Experience veronderstelt een scherm, maar interfaces kunnen zo minimaal zijn als een lampje dat van kleur verandert of een enkele knop. We hebben nu al apparaten die betekenisvolle informatie communiceren op een niet-visuele manier.

“Zoals de Apple Watch laat weten dat er een telefoongesprek of een tekstbericht is door een ander zoempatroon. Trillende fietshandvatten die de fietser laten voelen dat er een auto in hun dode hoek rijdt. Het UX-kader moet opgerekt worden, zowel aan de kant van het scherm als van het apparaat. Van superultramega HD-schermen tot horloges en zelfs kleiner.“