Toepassing van Design Systems voor platforms

Toepassing van Design Systems voor platforms

Bram Rietveld
Bram Rietveld - 5 april 2019
Carbon Design System van IBM - carbondesignsystem.com

Om aan de behoeften van je gebruiker te voldoen en de conversie te verbeteren, is het noodzakelijk om je website zo nu en dan uit te breiden en aan te passen. Er worden functionaliteiten toegevoegd, nieuwe algoritmen bedacht en pagina’s verbeterd. Met de beste intenties proberen zowel opdrachtgever als bureau het maximale uit de website te halen. Het platform is flink gegroeid en alles ligt op koers… toch?

Als je wat beter kijkt, zie je dat alle verbeteringen en uitbreidingen hun sporen hebben nagelaten. Er is een grote variëteit aan titels, uitlijningen, knoppen, kleuren en cards ontstaan. Deze inconsistenties zorgen voor een slechte gebruikerservaring en onverzorgde uitstraling. Het is bovendien ingewikkeld en inefficiënt (duur) om alle uitzonderingen en afwijkingen door de tijd heen te onderhouden en door te ontwikkelen.

Om de gebruikerservaring en online uitstraling van een groeiend platform in goede banen te leiden, gaan we bij Zicht steeds systematischer te werk. Een methode die we aan het verkennen zijn en bij een aantal projecten gaan toepassen is ‘Design System’.

Wat is een Design System

De laatste jaren liggen Design Systems nogal onder de aandacht. Boeken worden erover geschreven, events georganiseerd en systemen ontwikkeld. In Het omvat alle beste ontwerpprocessen, uitingen en componenten van het merk. Uiteindelijk stelt zo’n systeem je team in staat het design van een product op grote schaal consistent te houden.

Al enige tijd zijn de grote spelers op het internet bezig met het ontwikkelen van systemen die hun producten met elkaar verbinden. Denk hierbij aan Carbon (IBM), Lightning (Salesforce), Nachos (Trello) of Photon (Firefox).  Je kunt zien dat deze organisaties niet alleen een componenten bibliotheek en styleguide hebben, maar ook vertellen over hun principes en visie over het merk. Dit maakt dat je kunt spreken over een design system.

Uitleg van Jan Toman (2017) hoe een Design System zich verhoud tot een styleguide en een componenten bibliotheek. The Design System Schema.
Uitleg van Jan Toman (2017) hoe een Design System zich verhoud tot een styleguide en een componenten bibliotheek. The Design System Schema.

 

“Een design system is een systematische benadering voor het ontwikkelen en onderhouden van consistente gebruikersinterfaces die de merkwaarden communiceren en de gebruikerservaring versterken – op een samenhangende wijze.”

Willem Plaisier - Frankwatching

Wanneer kun je een Design System gebruiken?

Je zult misschien wel denken: “Mooi verhaal. Dat zijn grote internationale merken, dus hoe kan dit werken voor mij?”.  Je kunt er al profijt van hebben als jouw organisatie te maken heeft met de volgende situaties, zoals gedeeltelijk beschreven door Willem Plaisier (2018) op frankwatching.nl:

  • Je producten moeten een gemeenschappelijke uitstraling en werking hebben;
  • je producten op regelmatige basis tweaks of uitbreidingen hebben;
  • je producten maken gebruik van een steeds terugkerende functionaliteit;
  • developers die niet telkens willen te hoeven nadenken over hoe ze iets moeten oplossen;
  • er verschillende partijen zijn die werken aan je online aanwezigheid;
  • je verkoopt Software as a Service (SaaS) – als white label of met verschillende thema’s;
  • telkens terugkerende design fouten - is niet alleen slordig, maar gebruikers raken ook hun weg kwijt binnen de interface;
  • je wilt dat de producten ‘on-brand’ en consistent zijn;
  • er is steeds discussie over stijl en functionaliteit, en
  • je wilt dat de producten efficiënter - en dus goedkoper - ontwikkeld worden.

De voordelen van een Design Systeem

Al met al zijn dit enkele voordelen:

  • Consistentie;
  • schaalbaarheid;
  • herbruikbaarheid;
  • snelheid;
  • iteraties mogelijk per component;
  • minder “cowboy-design”, en
  • het stelt non-designers in staat om mooie dingen te ontwikkelen.

Een organisatie die zichzelf onder de loep nam was: Hubspot. Het inhouse design team heeft een analyse gemaakt van alle verschillende onderdelen die zij tegenkwamen op hun eigen platform. Hieruit concludeerden zij dat na alle updates en uitbreidingen een wildgroei ontstaan is aan interface elementen, zoals je hieronder kunt zien.

Is een Design System een stap te ver?

Hierboven heb je kunnen lezen wanneer een Design System een uitkomst kan zijn voor jouw organisatie, maar hoe zit het wanneer er geen capaciteit of budget is? Een Design System is overbodig wanneer :

  • Je development team klein is en goed communiceert (misschien is een betere documentatie voldoende);
  • je product niet actief ge-update hoeft te worden, en
  • je product niet genoeg budget oplevert of de financiering niet lang meer loopt. (een design system geeft pas over een langere periode rendement).

De nadelen van een Design Systeem

Skjold (2018) legt op Medium een aantal nadelen bloot en legt uit waarom. Al met al zijn dit enkele nadelen:

  • Het beperkt de ontwerper in creatieve vrijheid (je bent gebonden aan wat er in het Design System staat);
  • wanneer te letterlijk genomen wordt het ontwerp saai;
  • na verloop van tijd kan het Design System minder flexibel worden voor de behoeften die het moet dienen;
  • het vergt discipline van het gehele team om het systeem levendig te houden, en
  • het opzetten van een Design System vergt tijd.

“I think there’s different scales to a design system. Not everyone should aim to do a Lightning Design System from day one. I feel like you can start with super small abstractions around your color system, your typography, a few things like this.”

Kaelig Deloumeau-Prigent - Developer, Shopify

Wat doet Zicht?

We zien ‘design system’ als een manier van werken om:

  • De dialoog over design te verbeteren tussen de verschillende disciplines en opdrachtgever;
  • samenhang te vergroten tussen de onderdelen strategie, branding, content, webdesign, wedevelopment, beheer en optimalisatie;
  • over een grote periode (3 - 5 jaar) de kwaliteit van een platform te bewaken;
  • efficiënter te werken, en
  • het beheer van complexe platform overzichtelijk te houden.

Het is slim af te wegen in welke mate je zo’n systeem wil gaan inzetten en voor wie. Je moet zorgen dat het team en de klant achter je staan. Zorg dat er genoeg geld en tijd beschikbaar is en zorg dat iedereen de motivatie op kan brengen om het Design System levend te houden. Lukt het niet om een Design System aan te leggen? Begin dan klein. Ik weet zeker dat alles wat je documenteert bijdraagt aan een kwalitatief, consistent en efficiënt gebouwd product.

Voor een aantal van onze eigen klanten en TicketTrigger producten zie ik ook nog kansen; ook zij zijn namelijk constant aan updates en uitbreidingen onderhevig. Mijn handen jeuken bijna om samen met mijn collega’s de best practices van ieder product te bundelen en een eerste stap te zetten naar een Design System.