Er is een fout die vooral bij mooie websites voorkomt. De vormgever heeft iets bedacht dat er prachtig uitziet, maar niemand herkent de knop als knop. Er staat een streepje onder een woord dat geen link is. En blauwe tekst die dat wel is.
Je bezoeker leert jouw site niet opnieuw. Hij gebruikt de patronen die hij overal kent.
Wijk je daarvan af, dan moet hij nadenken. En nadenken kost aanvragen.
Daarom is een goede interface zelden de origineelste. Hij is de duidelijkste.
Alles wat je ziet en aanraakt op een scherm.
Wat is UI?
UI staat voor user interface, in het Nederlands gebruikersinterface. Het is alles wat je op een scherm ziet en bedient.
Denk aan knoppen en velden, menu’s, kleuren, pictogrammen en de afstand ertussen. Alles wat zichtbaar is, hoort erbij.
Het verschil met UX
De interface is de zichtbare laag. UX gaat over de hele ervaring: of iemand zijn doel bereikt en hoe dat voelt.
Je kunt een prachtige interface hebben met een slechte ervaring. Vier mooie schermen achter elkaar kunnen samen een omslachtige route vormen.
Waaruit een goede interface bestaat
Vijf bouwstenen
Knoppen die er als knop uitzien.
Voldoende contrast tussen tekst en achtergrond.
Ruimte tussen elementen, zodat het oog kan rusten.
Een duidelijke rangorde: het belangrijkste valt het meest op.
Terugkoppeling na een handeling.
Die laatste wordt het vaakst vergeten. Iemand klikt op verzenden en er gebeurt niets zichtbaars.
Wat er dan gebeurt
Hij klikt nog een keer, en nog een keer. Zo krijg je drie dezelfde aanvragen binnen.
Een knop die verandert in verzenden en daarna in verzonden, lost dat op. Dat is een kleine toevoeging met een groot effect.
Consistentie boven originaliteit
Bij het consistentie gaat het erom dat dezelfde dingen er hetzelfde uitzien. Elke knop met dezelfde functie heeft dezelfde vorm en kleur.
Dat klinkt saai en het is precies wat een site rustig maakt. Je bezoeker leert je site in een paar seconden.
Hoe je dat vasthoudt
Door je keuzes vast te leggen in plaats van ze per pagina te maken. Een vaste set kleuren, knopvormen en afstanden.
Anders sluipt er na een jaar een derde knopkleur in. Meer daarover lees je bij design system.
Herkenbare patronen
Een winkelmandje rechtsboven, een menu bovenaan, een logo linksboven dat naar je homepage linkt.
Die herkenbare elementen zijn geen gebrek aan fantasie. Ze zijn een afspraak waar het hele internet zich aan houdt.
Waar je wel mag opvallen
In je kleuren, je beeld en je typografie. Daar zit je eigen karakter.
Niet in waar je menu staat of hoe een knop eruitziet. Dat is de plek voor duidelijkheid, zie usability.
Wie het ontwerpt
Bij een groot project een aparte ontwerper. Bij een gemiddelde bedrijfssite doet je bouwer het meestal zelf.
Vraag in beide gevallen naar de onderbouwing. Waarom staat dit hier en waarom valt dat het meest op?
Vergeet toegankelijkheid niet
Contrast, focusrandjes en herkenbare velden horen bij het ontwerp en niet bij de bouw. Achteraf toevoegen is duur.
Klikt iemand op verzenden en gebeurt er niets zichtbaars, dan klikt hij nog een keer. En nog een keer.
Zo krijg je drie dezelfde aanvragen binnen van dezelfde persoon. Een knop die verandert in verzonden, lost dat op.
De derde knopkleur
Die sluipt er vanzelf in zodra meerdere mensen aan je site werken. Niemand besluit dat, het gebeurt gewoon.
Vastleggen is daarom geen luxe maar onderhoud. Een vaste set kleuren, knopvormen en afstanden voorkomt het.
Vraag naar de onderbouwing
Bij een ontwerp is de vraag niet of je het mooi vindt. De vraag is waarom iets daar staat en waarom het opvalt.
Een ontwerper die dat kan uitleggen, heeft nagedacht. Kan hij het niet, dan is het smaak, zie UX.
Meer vragen over UI
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is UI?
Wat is het verschil tussen UI en UX?
Waaruit bestaat een goede UI?
Waarom is consistentie in een interface belangrijk?
Wie ontwerpt de UI van een website?
Moet een interface origineel zijn?
Wat is UI?
De interface is de zichtbare laag: knoppen, kleuren, velden. UX gaat over de hele ervaring.
Dus of iemand zijn doel bereikt en hoe dat voelde onderweg.
Je kunt een prachtige interface hebben met een slechte ervaring. Vier mooie schermen achter elkaar kunnen samen een omslachtige route vormen.
Elk scherm klopt dan, de reis niet.
Onthoud het zo: de interface is wat je ziet, de ervaring is wat er gebeurt. Je hebt ze allebei nodig en ze worden vaak door dezelfde persoon gemaakt, maar het zijn andere vragen.
Onthoud het zo: de interface is wat je ziet, de ervaring is wat er gebeurt. Je hebt ze allebei nodig.
Vraag bij een ontwerp altijd of je erin kunt klikken. Op stilstaande schermen zie je niet of de route klopt. Ze worden vaak door dezelfde persoon gemaakt en het zijn andere vragen. Vraag dus door als een offerte alleen ontwerp noemt. Dan weet je precies wat er wordt opgeleverd en wat niet.
Wat is het verschil tussen UI en UX?
UI staat voor user interface, in het Nederlands gebruikersinterface. Het is alles wat je op een scherm ziet en bedient.
Denk aan knoppen, velden, menu’s, kleuren, pictogrammen en de afstand ertussen. Alles wat zichtbaar is, hoort erbij.
Het is de zichtbare laag van je website. Wat eronder zit aan techniek merkt je bezoeker niet.
Een goede interface valt niet op. Hij zorgt dat je zonder nadenken vindt wat je zoekt.
Dat is meteen de reden dat de mooiste interface niet altijd de beste is. Wijk je af van wat mensen kennen, dan moeten ze nadenken, en dat kost je aanvragen.
Kijk naar je eigen site en vraag je af of elke knop er als knop uitziet. Dat is de eerste toets.
Wijk je af van wat mensen kennen, dan moeten ze nadenken. En nadenken kost je aanvragen. Een goede interface valt niet op. Hij zorgt dat je zonder nadenken vindt wat je zoekt.
Waaruit bestaat een goede UI?
Uit vijf bouwstenen die allemaal even saai klinken.
Knoppen die er als knop uitzien. Voldoende contrast tussen tekst en achtergrond. Ruimte tussen elementen, zodat het oog kan rusten.
Een duidelijke rangorde, waarbij het belangrijkste het meest opvalt. En terugkoppeling na een handeling.
Die laatste wordt het vaakst vergeten. Iemand klikt op verzenden en er gebeurt niets zichtbaars.
Dan klikt hij nog een keer, en nog een keer. Zo krijg je drie dezelfde aanvragen binnen. Een knop die verandert in verzenden en daarna in verzonden, lost dat op.
Controleer of er terugkoppeling is na elke handeling. Klik zelf een keer op verzenden en kijk wat er gebeurt.
Gebeurt er niets zichtbaars, dan klikken mensen nog een keer. Zo krijg je drie dezelfde aanvragen binnen. Kijk daarnaast of het belangrijkste ook het meest opvalt. Staat je offerteknop even zwaar als je nieuwsbriefknop, dan klopt je rangorde niet. Loop dat na op je belangrijkste pagina, want daar telt het het zwaarst.
Waarom is consistentie in een interface belangrijk?
Omdat je bezoeker je site dan in een paar seconden leert. Dezelfde dingen zien er hetzelfde uit.
Elke knop met dezelfde functie heeft dezelfde vorm en kleur. Dat klinkt saai en het maakt je site rustig.
Je houdt dat vast door je keuzes vast te leggen in plaats van ze per pagina te maken. Een vaste set kleuren, knopvormen en afstanden.
Anders sluipt er na een jaar een derde knopkleur in, en daarna een vierde.
Dat gebeurt vanzelf zodra meerdere mensen aan je site werken. Vastleggen is dus geen luxe maar gewoon onderhoud.
Leg je kleuren, knopvormen en afstanden een keer centraal vast. Niet per pagina beslissen.
Anders sluipt er na een jaar een derde knopkleur in. Dat gebeurt vanzelf zodra meerdere mensen aan je site werken. Vastleggen is dus geen luxe maar onderhoud. Zonder afspraak groeit je site vanzelf uit elkaar. Leg die afspraken vast bij wie je site beheert, dan blijft het staan.
Moet een interface origineel zijn?
Liever niet op de plekken waar mensen iets moeten vinden.
Een winkelmandje rechtsboven, een menu bovenaan, een logo linksboven dat naar je homepage linkt. Die patronen zijn geen gebrek aan fantasie.
Het zijn afspraken waar het hele internet zich aan houdt. Je bezoeker leert jouw site niet opnieuw.
Waar je wel mag opvallen: in je kleuren, je beeld en je typografie. Daar zit je eigen karakter.
Niet in waar je menu staat of hoe een knop eruitziet. Dat is de plek voor duidelijkheid, en duidelijkheid levert nu eenmaal meer op dan verrassing.
Houd je aan de patronen die iedereen kent: logo linksboven, menu bovenaan, winkelmandje rechtsboven.
Val op in je kleuren, je beeld en je typografie. Daar zit je karakter, en niet in de plek van je menu. Die patronen zijn geen gebrek aan fantasie. Het zijn afspraken waar het hele internet zich aan houdt. Duidelijkheid levert nu eenmaal meer op dan verrassing.
Vraag je je af of je site duidelijk genoeg is voor iemand die hem niet kent? Stuur me de link via het formulier hieronder. Ik kijk of je knoppen herkenbaar zijn, of je rangorde klopt en waar bezoekers moeten nadenken. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: User interface, gebruikersinterface, schermontwerp
