De 3 C's van gebruikersinterfaces: kleur, contrast en inhoud

Er is een oud bedrijfsmodel waar veel bedrijfsstrategen naar leven: de 3 C's. Het is een herinnering om ons te concentreren op het bedrijf, klanten en concurrenten . Veel kleine bedrijven en websites gebruiken dit model ook. Maar voor ontwerpers zijn de drie C's een beetje anders.

Bij het maken van gebruikersinterfaces moet u zich richten op kleur, contrast en inhoud. Deze drie elementen vormen de basis van een goed ontwerp. Maar elk is een beetje complexer dan het aan de oppervlakte lijkt. Hier leest u hoe u over de drie C's van gebruikersinterfaces nadenkt en deze in uw ontwerpprojecten opneemt.

Ontdek ontwerpbronnen

Kleur

Kleur is voor de meeste gebruikers een van de meest voor de hand liggende visuele elementen. Zowel ontwerpers als niet-ontwerpers kunnen praten over kleur en of een bepaalde tint of palet hen aanspreekt.

Kleur kan op zichzelf volledig emotionele verbanden leggen, zonder andere effecten. Je kunt bijna iedereen een kleurstaal of chip overhandigen en een reactie krijgen over welke kleur dan ook zichtbaar is. Het is ook een grappig ontwerpelement omdat persoonlijke en ontwerpvoorkeuren de neiging hebben om bijna universeel te veranderen in de tijd.

Kleur kan om veel redenen een ontwerp maken of breken, maar in de eerste plaats doet het zoveel dingen en biedt het tegelijkertijd zoveel visuele aanwijzingen dat je het niet kunt negeren.

Kleureffecten:

• Bruikbaarheid en leesbaarheid
• Merkherkenning en naamsbekendheid
• Waar gebruikers kijken en communiceren
• Organisatie en gebruikersstroom
• Algemeen succes van het ontwerp

Gebruik kleur om te maken:

• Navigatie die duidelijk en begrijpelijk is
• Intuïtieve interacties
• Een sfeer voor het project
• Creëer sterke calls-to-action of bruikbare elementen
• Geef een idee van waar het ontwerp over gaat, zoals realiteit versus fantasie

Dit lijkt misschien allemaal een grote opgave voor zoiets eenvoudigs als een mix van rood, groen en blauw.

Dus waar begin je? Ongetwijfeld de belangrijkste variabelen als het gaat om kleur, is het creëren van een palet dat aantrekkelijk is voor gebruikers en spreekt over waar het ontwerp over gaat (zoals branding en sfeer). Een website voor Coca-Cola die blauw als dominante kleur gebruikte in plaats van rood, zou bijvoorbeeld schokkend zijn voor gebruikers.

Een effen kleurenpalet is geworteld in de principes van de kleurentheorie.

Een effen kleurenpalet is geworteld in de principes van de kleurentheorie. Je hebt niet meer dan een paar kleuren nodig om het te laten werken. Twee tot drie kleuren en een goede bibliotheek met lichtere en donkerdere variaties zijn voldoende. Mockplus beveelt de 6: 3: 1-regel aan: kies drie kleuren voor een palet, inclusief een dominante kleur die 60 procent van de tijd wordt gebruikt, een secundaire kleur die 30 procent van de tijd wordt gebruikt en een accentkleur die in de resterende kleur kan zitten 10 procent van het ontwerp. De regel is geworteld in de gulden snede, een steunpilaar van de ontwerptheorie en kan een goed startpunt zijn.

Hier is nog een regel voor het maken van kleurenpaletten in gebruikersinterfaces: begin met zwart en wit. Als het ontwerp zonder kleur kan worden gebruikt, werkt het waarschijnlijk zodra de kleur is toegevoegd. De zwart-witte omtrek geeft u ook een goed idee van het kiezen van kleuren met voldoende contrast (de tweede C) om de bruikbaarheid te verbeteren.

Contrast

Contrast maakt onderscheid tussen elementen. Het helpt bij het creëren van visuele hiërarchie, scanbaarheid en draagt ​​bij aan hoe gemakkelijk iets snel te begrijpen is. Elementen met een sterk contrast maken het de gebruiker gemakkelijk om van het een naar het ander te kijken, waardoor een natuurlijk visueel patroon en gebruikersstroom ontstaat.

De reden waarom contrast zo belangrijk is voor het ontwerp van de gebruikersinterface, is dat het deel uitmaakt van alles wat u doet. Hoe u contrast creëert, hangt af van het type element van het visuele effect dat erbij betrokken is.

U kunt contrast creëren met:

• Kleur
• Grootte
• Richting
• Ruimte
• Vorm

Een belangrijk element van toegankelijkheidsrichtlijnen is contrast omdat het ervoor zorgt dat gebruikers in het ontwerp het ene element van het andere kunnen onderscheiden. Het A11Y-project, dat tot doel heeft de webtoegang gemakkelijker te maken, heeft deze aanbeveling: begin met kleurcontrast door kleuren uit verschillende segmenten van het kleurenwiel of contrasterende kleuren te gebruiken. Vergeet niet dat complementaire kleuren - tegenstellingen op het kleurenwiel - een maximaal contrast bieden.

Hetzelfde concept is ook van toepassing op het creëren van contrast tussen andere elementen. Kies lettertypen uit verschillende families of gebruik dramatisch verschillende formaten om gebruikers te helpen de woorden snel te lezen.

Kortom, het idee achter contrast is dat tegenstellingen elkaar aantrekken.

Gebruik bewegende borden, pijlen of afbeeldingen om de gebruiker te dwingen in een bepaalde richting te kijken en draai de richtingsaanwijzer om voor nog meer contrast.

Het verschil tussen krappe en open ruimte zorgt voor veel contrast. Als je ervoor wilt zorgen dat je tekst gemakkelijk te zien en te lezen is, geef hem dan wat meer ruimte om de aandacht erop te vestigen.

Kortom, het idee achter contrast is dat tegenstellingen elkaar aantrekken. Elementen die schijnbaar anders zijn, kunnen feitelijk samenwerken, zodat beide in één oogopslag te zien zijn.

Om te weten of het contrast werkt zoals u het wilt, moet u aan een aantal factoren denken als u naar de elementen op het scherm kijkt:

• Leesbaarheid: zijn alle woorden en afbeeldingen gemakkelijk te zien en te lezen?
• Duidelijkheid: is het gemakkelijk om het ene element van het andere te onderscheiden?
• Toegankelijkheid: werkt het voor zoveel mogelijk mensen?
• Omgeving: kunnen gebruikers het ontwerp zien en begrijpen op de plaatsen waar het zal worden gebruikt?

Inhoud

De laatste van de drie C's is inhoud. Het ontwerp van de gebruikersinterface kan alleen zo goed zijn als de informatie daarin. Inhoud omvat alles van afbeeldingen tot tekst tot illustraties en pictogrammen tot logo's en merkmerken. Inhoud bevat ook video en elk stukje tekst, van het volledige bericht of verhaal tot blogposts tot kleine stukjes micro-kopie.

Alleen inhoud hebben is niet genoeg. Je moet geweldige inhoud hebben.

Al deze elementen komen samen om het verhaal te vertellen van wat jouw ontwerp en gebruikersinterface speciaal maakt. Waarom zouden gebruikers u hun tijd moeten geven in plaats van iets anders te doen?

En alleen inhoud hebben is niet genoeg. Je moet geweldige inhoud hebben. Inhoud met hoge resolutie. Waardevolle inhoud. Uw inhoud moet beter / groter / specialer zijn dan vergelijkbare inhoud die om de aandacht van gebruikers concurreert.

Dat kan een hele opgave zijn, maar de meeste ontwerpers kunnen deze inhoud creëren door trouw te zijn aan zichzelf en hun merk en berichten. Blijf bij wat je bent en wat je weet. Gebruikers zullen deze authenticiteit zien en hopelijk waarderen door tijd door te brengen met uw ontwerp.

Gevolgtrekking

Nu je gewapend bent met de oude drie C's van het bedrijfsleven - bedrijf, klanten en concurrenten - en drie C's van gebruikersinterfaceontwerp - kleur, contrast en inhoud - heb je de tools en kennis om een ​​ontwerpproject te creëren dat niet van deze wereld is goed. (Of op zijn minst zeer bruikbaar.)

Door beide strategieën in ontwerpprojecten te verwerken, wordt u gedwongen na te denken over hoe u iets kunt creëren dat de website-eigenaar en de gebruiker ten goede zal komen. Je creëert niet alleen zodat het ontwerp mooi is, maar ook zo functioneel.

Opmerking: alle voorbeelden in dit artikel zijn afkomstig uit de Design Shack Gallery. Kijk zeker even rond; het zit vol met geweldig werk en inspiratie.