Raet Online in eigen huisstijl

Je kunt Raet Online in de kleuren van je eigen huisstijl presenteren aan de managers en de medewerkers van je organisatie. Deze huisstijl is alleen voorbehouden aan de medewerkers en managers, die zonder certificaat Raet Online kunnen betreden. De HR-Professionals en de Beheerders werken met in de huisstijl van Raet Online. Voor hen wordt zo het onderscheid duidelijk tussen Raet Online voor hen als 'privé-persoon' (om bijvoorbeeld verlof aan te vragen) en als 'HR-Professional'.

Bij de functie Huisstijlkenmerken wordt uit de doeken gedaan hoe je dat doet, in deze blog gaan we een stapje verder en vertellen we wat meer over de achtergrond, de verdere uitwerking en geven we je wat tips over het maximale effect dat je kunt bereiken met Huisstijlkenmerken.

Diepte in de achtergrond
We beginnen met de achtergrondafbeelding van het bureaublad. Dat kan heel eenvoudig een kleur zijn of een structuur, maar je kunt daarin bijvoorbeeld ook het logo en/of de naam van jouw organisatie in verwerken. Het bepalen van het formaat, de grootte, van de afbeelding wordt besproken in de Help bij de functie Huisstijlkenmerken.

In dit voorbeeld gebruiken we het demonstratiebedrijf van Raet. Hier zie je  het logo zien zonder enig visueel effect

Nu kunnen we wat diepte in de afbeelding brengen door een paar onderdelen reliëf te geven. de objecten. In dit voorbeeld kiezen we het zogeheten plastic relief - een standaard effect in pakketten als photoshop en photopaint. Dat kan héél nadrukkelijk, maar omdat we straks nog een stapje verder gaan, houden we het dit keer beperkt tot een minimaal zichtbaar effect

Alleen aan de is in de kleur rood wat nuancering aangebracht die het gevoel geeft dat deze bol geen platte tekening is, maar een bolling heeft. Om de bol nu wat los te trekken van de achtergrond gaan we wat schaduw toevoegen aan de achtergrond.

Zoals je kunt zien is de bol losgekomen van de achtergrond. Dit minimale ingrijpen werkt maximaal door op het  bureaublad in je eigen huisstijl. Hierna lijkt het of de panelen van Raet Online boven het bureaublad zweven. En omdat deze indruk gewekt wordt, maak je daarmee duidelijk dat de mensen de panelen kunnen verplaatsen en neer kunnen zetten waar het hen het best uitkomt.




Menubalk en titelbalk

De menubalk kun je kleuren naar eigen inzicht. Nou ja, eigen inzicht; de meeste organisaties kennen een huisstijl en voorgeschreven kleuren. De menubalk is altijd aanwezig in Raet Online en het ligt dan ook voor de hand om deze de kleur te geven die dominant is in je organisatie. Daaronder ligt de titelbalk. Ook die kun je een eigen kleur geven. Als de organisatie extra kleuren in het palet heeft, ligt het voor de hand uit dit palet een kleur te nemen.
Het kan zijn dat je aan deze kleur toch wat moet sleutelen. Net als met de menubalk is deze kleur onderhavig aan een paar visuele effecten: aan de bovenkant van de menubalk wordt wat schaduw toegevoegd, aan de onderkant wat licht waarmee een 'verloop' wordt gegeven naar het bureaublad. Deze effecten kunnen ervoor zorgen dat de voorgeschreven kleur uit het palet anders overkomt dan bedoeld is. Een handige site om de nieuwe kleurwaarde uit te zoeken is http://colorschemedesigner.com/ - ook een aanrader wanneer je kleuren tekort komt om van Raet Online een mooie HR Portal te maken.

Titelbalk en achtergrond
De titelbalk is aan de onderkant wit/transparant. Als je de achtergrond van het bureaubladafbeelding naar wit laat aflopen, creëer je een mooi geleidelijke overgang. Een andere, meer volle kleur is ook mogelijk natuurlijk - maar soms wil dat slecht combineren met het verloop in de titelbalk. Dat wordt weer anders als je er voor zorgt dat een witte streep direct onder de titelbalk valt: dan lijkt het net of er de titelbalk belicht wordt van onderen.

Een nieuwe veranderende pagina

Hier komt tekst die straks weer vervangen zal worden

Werken met kleuren

Sommige dingen lijken heel simpel - je vraagt je af waarom je er niet eerder opgekomen bent of waarom je voorganger dat niet al bedacht heeft. 

Raet Online kende tal van knoppen. Meestal grijze blokjes, al dan niet met een beetje reliëf en schaduw waarop je moet drukken om iets gedaan te krijgen. Een verzoek indienen, een wijziging bevestigen, informatie toevoegen, etc. Al die  knoppen kun je zien als een stap in een proces. Dat kan een klein procesje zijn of een lang verhaal van verschillende stappen.

'Waarom die knoppen dan geen proceskleur geven, die consequent wordt uitgevoerd in alle onderdelen van Raet Online?' 'En waarom dan geen kleurtje die iedereen al in z'n systeem heeft zitten?' 'Zoals groen: doorgaan, Oranje: opletten en Rood: stoppen'. Dat hebben we dus gedaan. En zo geven we nu richting aan de volgende logische stap in een proces.

Blauw is de optie
Maar je zult het altijd zien - we redden het niet met deze drie kleuren en hebben er een extra kleur bij moeten halen. Blauw voor de 'optie', voor de extra mogelijkheid. Om maar even een eenvoudig voorbeeld erbij te halen. Als je een verlofaanvraag wilt indienen is de knop Verzoek indienen groen gekleurd. Annuleren is het stoppen van een verlofaanvraag en rood gekleurd. Je kunt ook het bezettingsoverzicht van je afdeling of je eigen verlofoverzicht raadplegen: extraatjes bij het proces Verlof aanvragen. Deze knoppen worden dan blauw gekleurd.

Verplicht in te vullen
Soms moet er iets verplicht worden ingevuld. Zonder deze informatie kan het proces niet verder. Bij de velden waarbij iets verplicht moet worden ingevuld, wijkt de kleur van de omschrijving af. Een rode omschrijving maakt duidelijk dat de informatie verplicht is.

Een vinger is geen muis: grote knoppen

Het marktaandeel van de tabletcomputer (IPad, Galaxytab) groeit explosief. Naar verwachting verdringt deze snel in veel huishoudens de laptop. Met als gevolg een nieuwe vorm van interactie tussen mens en computer. De muis maakt plaats voor de wijsvinger. De interface van Raet Online  introduceert daarom grote knoppen. 

Een hyperlink in een grijs vakje is nu eenmaal op een tablet niet meer 'gemakkelijk te bedienen'. Eerst moet je dat onderdeel van het scherm vergroten voordat je erop kan drukken. Met de introductie van grote knoppen maken we de bediening van Raet Online een stuk makkelijker.
Daarnaast begeleiden vaste kleurwaarden van de knoppen door de processen. Als je iets moet doen op Raet Online dat bijvoorbeeld twee of drie stappen (voor iedere stap een nieuw scherm) dan laat de kleur van de knop je de logische volgende stap zien. Dat klinkt bijzonder, maar is het niet - we gebruiken de kleurcode's die iedereen al kent: groen doorgaan, rood stoppen, oranje opletten en dan blijft er één over: blauw voor de optie, de extra mogelijkheid bij een functie die niet in het directe proces hoort, maar wel handig bij dat proces.

Voorbeeld
Als Karin verlof wil aanvragen op Raet Online, kiest ze eerst voor de blauwe knop Verlof. Op het moment dat ze erop drukt, ligt de knop groen op. Nu komt ze op een scherm met een formulier waarop ze haar verlofperiode kan invullen. Bovenaan het formulier staan drie knoppen. Een groene knop met de pictogram Indienen, een rode knop met het pictogram Annuleren en een blauwe knop het het pictogram Bezettingsoverzicht. Deze optie kan ze gebruiken om de bezettingsgraad van haar afdeling te bekijken in de periode dat zij verlof wil opnemen.
Als haar verlofaanvraag ingediend wordt, belandt deze bij haar manager. Die kan de verlofaanvraag goedkeuren met een groene knop en de pictogram Goedkeuren of Afkeuren met een rode knop. Ook hij heeft een blauwe knop waarop hij de bezettingsgraad kan raadplegen.

Consequent doorgevoerd
In het verlengde van de grote knoppen worden ook de keuzelijsten, waarop u kon drukken op een hyperlink (bijvoorbeeld een lijst met medewerkers) drukgevoeliger zijn of gemaakt worden. De hele regel, inclusief de witruimte erom heen zal reageren op de aanraking met een vinger en de logisch volgende handeling uitvoeren. In geval er meer handelingen mogelijk zijn, kunt voor deze optionele handeling  zullen ook de meeste stukken tekst waarop u kunt drukken

Pictogrammen - heldere wegwijzers

De illustraties op Raet Online worden vervangen door pictogrammen. Een beeldtaal die meer universeel is en te begrijpen voor mensen uit verschillende taalgebieden. Een aantal pictogrammen zijn al zo ingeburgerd, dat ze geen toelichting nodig hebben, zoals de schijfdiagram voor Overzicht, de vuilnisemmer voor Verwijderen en de (inmiddels verouderde) diskette voor Bewaren. Interpreteer de bovenstaande illustratie maar eens....

Pictogrammen kunnen ook makkelijk gecombineerd worden en zo weer een nieuwe betekenis krijgen, een vel papier met een pijl naar boven laat zich al gauw lezen als document uploaden. Met een pijl naar beneden wordt het downloaden en met een envelop wordt het versturen.

Eenvoud wordt snel herkend
Een universeel leesbaar pictogram is eenvoudig is, veel details zijn weggelaten, zo staan er geen letters op een vel papier, zonder letters wordt deze wordt het teken ook wel begrepen. Deze eenvoud maakt het makkelijk om de beeldtaal snel te leren: hebt je eenmaal een pictogram gezien en begrepen, dan herken je de pictogram de eerstvolgende keer makkelijker. Daarnaast blijft een pictogram goed herkenbaar, ook wanneer deze afgebeeld moet worden op een kleine knop die ergens op een pagina verschijnt.

Associëren
Naast de algemeen bekende pictogrammen gebruiken we op Raet Online pictogrammen die tegen een bekende betekenis aanschurken, zoals de esculaap voor Verzuimregistratie, een zonnebader voor Verlof en een kluis voor Bank/girogegevens en hebben we een groot aantal nieuwe pictogrammen ontworpen omdat Raet Online vaker dan eens een terrein betreedt waar helaas nog geen pictogrammen voor gemaakt waren. 

En.... wat heb jij gelezen?
Heb je al de bovenstaande reeks proberen te lezen? En wat is er uitgekomen? Dit is het beeldverhaal. Een gezin overlegt over de vakantie. Vervolgens zoeken en vinden zij een vakantiereis. De man logt in om te kijken op het bezettingsoverzicht of hij die periode ook op vakantie kan. Het is mogelijk en hij dient een verlofverzoek in bij zijn leidinggevende. Die keurt het verzoek goed en ze kunnen nu op vakantie.
Als je het nog niet begrepen had, dan zul je deze pictogrammen de volgende keer wel herkennen en het proces zo voor je zien, dat is de kracht van deze beeldtaal.

De nieuwe lettertypes van Raet Online

De nieuwe interface van Raet Online heeft afscheid genomen van de Verdana als lettertype. Voortaan gebruiken we de Calibri en de Corbel. Deze lettertypen zijn niet zomaar gekozen. Lees hieronder het waarom.

De informatie op Raet Online moet zo toegankelijk zijn. De bezoeker moet snel en gemakkelijk zijn informatie op een pagina vinden. En op het beeldscherm willen lezen. Hij of zij moet daarbij niet de aandrang hebben de informatie te willen afdrukken, iets wat mensen doen als de informatie niet voldoende toegankelijk is. Daarvoor kent de typografie stelregels die in het nieuwe ontwerp van de interface worden toegepast.

Typografie
Deze stelregels vragen om een lettertype om een helder lettertype dat in verschillende groottes goed leesbaar is. Daarnaast moeten tekstregels eindig zijn en bij voorkeur niet meer dan 80 tot 100 tekens per regel bevatten. Ook moet er aandacht besteed worden aan de interlinie, de witruimte tussen de regels: een grotere interlinie vergroot de toegankelijkheid van de informatie en creëert rust op de pagina.

Andere eisen 

Aan de andere kant moet Raet Online ook in staat zijn om bij tijd en wijle om grote tabellen met veel gegevens te tonen waarbij het liefst niet gescrolled hoeft te worden.
Tot dusverre gebruikte Raet Online het lettertype Verdana. Dit lettertype is speciaal ontworpen door Microsoft in 1995 om ook in een klein formaat leesbaar tekst op computerschermen te tonen. Het ontwerp van de Verdana werd afgestemd op de toen gangbare monitoren, met een veel lagere resolutie en pixels die minder scherp toonden.

Nieuw beeldschermen
Deze monitoren worden inmiddels niet meer gebruikt en zijn massaal vervangen door de platte beeldscherm, die zo scherp ogen dat letters rafelig overkomen. Om dit te ondervangen heeft Microsoft de zogeheten ClearType technologie ontwikkeld. Deze technologie maakt optimaal gebruik van de kwaliteiten van de nieuwe generatie beeldschermen en stelt ons in staat om aan de stelregels van de typografie te voldoen.

Nieuwe letters

Vandaar de selectie van de nieuwe lettertypes Calibri en Corbel. Net als de Verdana zijn deze lettertypes zijn door Microsoft ontworpen en vrijelijk gedistribueerd bij Microsoft Office 2003 en later, bij Windows Vista en navolgende besturingssystemen. Hierdoor zijn deze lettertypes bij vrijwel iedereen in gebruik. Zoals u hierboven kunt zien nemen ze minder ruimte in gebruik, brengen daardoor automatisch meer witruimte met zich mee en blijven tegelijkertijd goed leesbaar. 

Raet Online - de nieuwe user interface

Raet Online presenteert een nieuw gezicht. Een gezicht met nieuwe mogelijkheden en die zal leiden tot een nieuwe 'user experience'. Die experience kan helaas niet in één keer tot stand komen, daarvoor is de verbouwing te complex. We doen dit jaar wel grote stappen. Op dit blog kun je de stappen volgen en begrijpen waar we uiteindelijk zullen uitkomen.

Aan de veranderingen die je ziet - en in de toekomst zal ervaren - ligt een complexe operatie. Die moet dan ook gefaseerd worden uitgevoerd. Uiteindelijk leidt die operatie niet alleen tot een nieuw gezicht maar ook tot een gemakkelijke bediening van Raet Online. We gaan medewerkers en managers helpen en begeleiden in de uitvoering van hun taken en de realisatie van hun wensen. We gaan de mensen plezier geven tijdens het gebruik van Raet Online. Of ze nu op het werk achter een pc zitten, in de trein of op de bank met op hun schoot een tablet.

Prettig moeten
Je bezoekt Raet Online omdat het móet. Omdat je verlof wil aanvragen, declaraties moet indienen, een opleiding uit moet kiezen, het verslag van de HR Cyclus moet lezen, je loonstrook wilt bekijken, etc. Geen dagelijkse zaken maar incidentele bezoekjes.
De bezoeker van Raet Online moet daarom begeleid worden in de realisatie van zijn doel. Hij moet zijn bezoek als prettig ervaren: 'ik werd doeltreffend geholpen'. Tezamen met het grote voordeel van 'Self Service': ik kreeg snel wat ik wilde. Zie hier het uitgangspunt van de nieuwe user interface van Raet

Achterliggende redenering
Bij een uitgangspunt hoort een redenering: als mensen het prettig vinden om met Raet Online te werken, gebruiken ze het graag. Ze gaan vervolgens optimaal gebruik maken van al hun mogelijkheden en zullen tevreden zijn met hun werkgever die hen optimaal faciliteert.
Behalve tevreden medewerkers krijgt de werkgever nog iets anders terug. Nuttige 'HR'-informatie. Informatie die hij op zijn beurt weer kan inzetten om het HR beleid te realiseren, waardoor medewerkers betere kansen krijgen in zijn organisatie, waardoor ze zich beter gewaardeerd voelen. Een verbetering van de user experience draagt daaraan bij. Als de user experience niet positief is, wordt de keerzijde duidelijk: een spaarzaam gebruikt systeem, werknemers die hun manager vragen over het systeem stellen of hem het werk laten doen, weinig gebruikte extraatjes, gebrekkige invoer van gegevens en daardoor moeizaam te realiseren HR beleid.

De wereld achter de user experience
Om een nieuwe user experience te creëren gebruiken we beeldtaal, kleurtaal, vereenvoudigde eenduidige menustructuren, bewegende programma-onderdelen, behulpzame wizards, lettertypes en multimedia. Over al deze aspecten gaat dit blog.
Lees dit blog om op de hoogte te blijven van de wijzigingen en de overwegingen achter het nieuwe ontwerp, over de vorderingen. Lees het ook om te reageren en bij te dragen aan een beter Raet Online. Je reacties zijn welkom, meer dan welkom - iedere bijdrage helpt ons in het verbeteren van de 'user experience'.