Designprincipes

De interface van doHockey is ontworpen voor coaches die snel willen zien wat er speelt en daarna direct willen handelen.

Onze principes

• Taak eerst: de belangrijkste vervolgstap staat dicht bij de informatie waarop die is gebaseerd.
• Rustige hiërarchie: koppen, kaarten en acties hebben een voorspelbare volgorde.
• Eén primaire actie: oranje markeert doorgaans de meest logische actie; alternatieven blijven rustiger.
• Consistentie: vergelijkbare handelingen zien er in alle onderdelen hetzelfde uit.
• Begrijpelijke status: cijfers krijgen een label of toelichting, zodat duidelijk is wat ze betekenen.
• Progressieve verdieping: het eerste overzicht blijft compact; details zijn beschikbaar wanneer ze nodig zijn.
• Responsive: inhoud herschikt zich voor kleinere schermen in plaats van alleen kleiner te worden.
• Toegankelijk: tekst, contrast, toetsenbordbediening en duidelijke foutmeldingen krijgen structureel aandacht.

Visuele taal

De basis is licht en rustig, met een donkere inktkleur voor koppen en een gedempte blauwgrijze kleur voor lopende tekst. Het herkenbare koraal-oranje wordt gebruikt als merkaccent en voor belangrijke acties. Iconen ondersteunen tekst, maar vervangen nooit essentiële uitleg. Grafieken geven een profiel of ontwikkeling weer en worden aangevuld met concrete cijfers of acties.

Behulpzame, niet-kritieke aanwijzingen gebruiken een zacht warmgeel vlak met donkere tekst. Zo zijn ze herkenbaar als contexttip zonder te concurreren met de oranje hoofdactie. Waarschuwingen, fouten en geblokkeerde stappen houden altijd hun eigen semantische statuskleur. Per context tonen we bij voorkeur één geprioriteerde tip tegelijk. Een vaste contexttip blijft plat en herkenbaar aan een warme verticale accentlijn. Bij een samengestelde kaart mag juist de selecteerbare kop zacht meekleuren en een korte teksthint verschijnen; zo blijft de hoofdactie herkenbaar zonder een extra knop of meldingkaart.

Samengestelde kaarten met eigen acties zijn nooit blind over hun volledige oppervlak klikbaar. De kop vormt dan de voorspelbare hoofdselectie, terwijl grafieken, cijfers en taakknoppen ruimte houden voor hun eigen bediening. Bij elkaar horende kolommen sluiten visueel op dezelfde onderlijn aan.

Platte taakschermen

In portalen en beheeromgevingen beginnen we met een rustige pagina, heldere typografie, witruimte en subtiele scheidingslijnen. Niet ieder getal of lijstitem heeft een eigen kaart nodig. Op brede schermen staan korte statussen en aandachtspunten waar mogelijk naast elkaar; op mobiel worden ze in een logische volgorde gestapeld met voldoende ruimte om ze aan te raken.

Een kaart gebruiken we wanneer die echt een zelfstandig object of een eigen werkcontext afbakent, bijvoorbeeld een team, formulier of editor. Zo blijft het eerste overzicht compact en kan de gebruiker sneller bij de inhoud waarvoor het scherm bedoeld is.

Typografie

doHockey gebruikt in de publieke site, supportomgeving, coachportal en mobiele app één letterfamilie: Manrope. Een vaste typografische hiërarchie maakt ieder scherm herkenbaar: een duidelijke paginatitel, compactere sectiekoppen, rustige kaarttitels en goed leesbare ondersteunende tekst. Labels, metadata en acties hebben eveneens een vaste rol. Daardoor voelt een taak op mobiel hetzelfde als in de portal, zonder dat alle schermen exact dezelfde afmetingen hoeven te gebruiken.

Koppen zijn compact, zwaar en strak gespatieerd. Lopende tekst krijgt juist extra regelafstand en koraal-oranje bovenlabels worden spaarzaam gebruikt om een onderwerp of volgende stap te duiden. Binnen een kaart gebruiken we maximaal drie tekstniveaus, zodat informatie ook onder tijdsdruk snel scanbaar blijft.