Een paar woorden over termen
UX staat voor Gebruikerservaring. De term verwijst naar het gevoel dat de gebruiker krijgt bij interactie met de interface: hoe gemakkelijk/moeilijk het is om een actie uit te voeren om het gewenste doel te bereiken.
UI staat voor Gebruikersinterface. Het concept definieert de uiterlijke kenmerken van het product: ontwerpkleuren, gebruiksgemak, tekstleesbaarheid en andere visuele elementen.
Ontwerp. Dit is constructie/ontwerp, waarbij de constructie van een object wordt gecreëerd en gepresenteerd in een bepaalde vorm.
UX en gebruikersinterface Design is het creëren van verschillende interfaces waarbij visuele presentatie en bruikbaarheid even belangrijk zijn.
Wat is het verschil tussen UX en UI?
Wat is het belangrijkste verschil tussen UX- en UI-ontwerp? UX design is verantwoordelijk voor de functionaliteit van het product en de emoties die gebruikers ervaren. Hoe eenvoudiger de interface, hoe gemakkelijker het is om het resultaat te krijgen en de doelactie uit te voeren.
UI-ontwerp omvat de visualisatie van een prototype dat is ontwikkeld op basis van de ervaring van de doelgroep. Dit is werk aan de grafische weergave van de interface: illustraties, menu’s, knoppen, lettertypen, enzovoort.
Het verschil tussen UX en UI is het verschil in taken. Aangezien gebruikerservaringen verschillend zijn, moet UX-ontwerp de acties van bezoekers analyseren, gedragsprototypes maken en testen uitvoeren, wat de UX-ontwerper doet. Het belangrijkste doel van een UI-ontwerper is om de gebruiker uit te leggen hoe het product te gebruiken.
Maar in de praktijk zijn UX en UI nauw met elkaar verbonden en is het niet altijd mogelijk om hun grenzen te bepalen.
Wat verenigt UX met UI?
Hoewel UI en UX verschillende concepten zijn, moeten ze samen voor een gemeenschappelijk doel worden gebruikt. Door UI/UX op te splitsen in twee onafhankelijke taken, blijkt dat de UX-ontwerper de sitenavigatie ontwikkelt en dat de UI-ontwerper gewoon de knoppen tekent zonder echt na te denken over hun functionaliteit. Zelfs met het hoogwaardige werk van elke individuele specialist kan de interface onbruikbaar blijken te zijn.
Het moet ook duidelijk zijn dat een UX / UI-specialist niet alleen over webdesign gaat, maar ook over andere interfaces, ook offline. Daarom is het belangrijk om het competentiegebied van een specialist te verduidelijken.
Niet altijd begrijpt een UX-ontwerper UI en vice versa. In sommige gevallen is het handiger om nauw gefocuste specialisten bij teamwerk te betrekken. Maar wanneer UI- en UX-ontwerp worden gedaan door verschillende mensen die geen interactie met elkaar hebben, is het risico op een inferieur product groot. Bijvoorbeeld:
- moeilijk te gebruiken interface met verbazingwekkend ontwerp – zwakke UX, goede gebruikersinterface;
- zeer eenvoudig te gebruiken onopvallende interface – hoogwaardige UX, zwakke gebruikersinterface.
De combinatie van UX en UI bepaalt de bruikbaarheid (bruikbaarheid – gebruiksgemak), dat wil zeggen de eenvoud en het comfort van het werken met de site.
Hoe hoger het niveau van bruikbaarheid van de site, hoe handiger het is voor bezoekers. De gebruiker moet gemakkelijk de nodige informatie vinden, niet in de war raken door de functionaliteit en structuur, en tegelijkertijd esthetisch plezier beleven aan de interactie met de bron. Bezoekers zullen snel een webbron verlaten en naar concurrenten gaan wanneer het gebruik van een webbron onhandig is.
Top UX-tips voor webontwikkelaars
We hebben wat nuttigs voorbereid UX-tips voor ontwikkelaars. Laten we ze in meer detail bekijken:
Handhaaf visuele hiërarchie
Elke pagina heeft een gedefinieerde visuele hiërarchie. Als u niet bekend bent met het concept, volgt hier de definitie: “Visuele hiërarchie wordt bepaald door de opstelling, grootte, kleur en contrast van elementen op een webpagina. Het bepaalt hun relatieve belang en de volgorde waarin het oog ze waarneemt”.
Webontwerpers gebruiken visuele hiërarchie om de aandacht van bezoekers eerst op de belangrijke elementen te vestigen. Hiervoor wordt nagedacht over positie (hoger of lager), afmetingen (groter of kleiner), visuele effecten (video’s, afbeeldingen, iconen) en contrast (negatieve ruimte). De combinatie van deze technieken versterkt het effect.
Iedereen ziet een grote video hoog op de pagina, omringd door contrasterende negatieve ruimte. Aan de andere kant zullen maar weinig mensen letten op de kleine grijze tekst op een witte achtergrond, verborgen naast de voettekst van de site.
Gebruik een beschrijvende titel met zoekwoorden
De titel bovenaan de startpagina is beschrijvend of nutteloos.
Als dat laatste het geval is, kan de bezoeker zijn eerste vraag niet beantwoorden: “Ben ik op de juiste plek terechtgekomen?” De titel is een unieke kans om een zoekwoorduitdrukking te gebruiken en relevantie aan te geven. Maar veel marketeers schrijven iets slims of vaags.
Regel nummer één: een duidelijke kop is beter dan een slimme. Het hoeft alleen maar het bedrijf uit te leggen en u in een goed daglicht te stellen.
Ontwerp lange pagina’s. Beantwoord alle vragen.
Meer pixels betekent meer ruimte voor reacties, bezwaarbehandeling en sociaal bewijs. Als de bezoeker het antwoord op een belangrijke vraag niet heeft gevonden, scrollt hij verder. Alle korte pagina’s onderbreken het conversieproces.
Gebruik geen stockfoto’s van mensen
Er is een tijd voor gratis stockfoto’s, maar we raden u aan dezelfde lachende beelden als vuur te vermijden. Ze werken nooit. Integendeel, ze wekken wantrouwen op.
Bedrijven komen in de verleiding om stockfoto’s te gebruiken omdat het een gratis product van hoge kwaliteit is. Dezelfde gezichten glimlachen echter van miljoenen andere sites – en dit vernietigt het vertrouwen.
Verbeter het navigatiegemak
Het is cruciaal voor gebruikers om te weten waar ze zijn, hoe ze daar zijn gekomen, hoe ze naar de gewenste pagina kunnen gaan en hoe ze kunnen terugkeren naar de hoofdpagina. Het lijkt erop dat dit voor de hand liggende dingen zijn, maar veel mensen negeren ze, dus controleer of de navigatie duidelijk en gebruiksvriendelijk is. Sommige elementen zijn heel gemakkelijk erin te implementeren.
Markeer de naam van de pagina waarop de gebruiker zich bevindt in het menu met kleur, lijn of watermerk. Voeg “breadcrumbs” toe – een interface-element dat de volgorde van de secties weergeeft waarmee de gebruiker de laatste pagina bereikt.
Elk element van de “breadcrumb” moet klikbaar zijn, dat wil zeggen dat de gebruiker door te klikken naar elk niveau van de keten kan gaan. In een mobiele versie of een applicatie wordt om ruimte te besparen meestal alleen de naam van de vorige pagina aangegeven, waardoor de gebruiker naar de directory een niveau hoger kan gaan.
Behoud de status van de vorige pagina
Zorg ervoor dat de gebruiker bij het werken met de site de acties die hij al een keer heeft uitgevoerd niet hoeft te herhalen.
Als de gebruiker enkele gegevens heeft ingevuld of filters heeft toegepast, naar de volgende pagina is gegaan en vervolgens heeft besloten terug te gaan, mogen de eerder ingevoerde waarden niet opnieuw worden ingesteld.
De noodzaak om formulieren opnieuw in te vullen of filters te selecteren is erg vervelend, en met een grote waarschijnlijkheid zal de gebruiker nooit de bestemmingspagina bereiken – ze stoppen met winkelen en zullen geen gegevens opnieuw invoeren.
Let op knopen
Controleer of de knoppen een duidelijk te onderscheiden status hebben:
- normale conditie;
- wijzigen bij muisaanwijzer;
- ingedrukte staat;
- inactieve knop;
- gerichte knop (gebruikt bij het navigeren met het toetsenbord).
Meestal wordt dit weergegeven met een kleur, mat of lijn. Het verschil moet merkbaar zijn. De gebruiker merkt het verschil misschien niet als de actieve knop blauw is gemarkeerd en de inactieve knop hetzelfde is, maar alleen een beetje lichter. Door de moderne lay-out kun je experimenteren met kleur en de transparantie van de knop, waardoor deze gloeit of een schaduw werpt.
Controleer of alle interacties eenduidig worden geïnterpreteerd
Dubbelzinnige bewoordingen of badges in een slecht doordachte UX zijn verwarrend en maken de site-ervaring ineffectief.
Niet alleen afbeeldingen zijn belangrijk, maar ook UX-teksten – die tolereren geen verwarring. Als de gebruiker bijvoorbeeld iets moet verwijderen of annuleren, dan zou het bevestigen van de annuleringsactie niet in overeenstemming moeten zijn met het sluiten van het dialoogvenster. Een win-winoptie is om een vraag te stellen in een dialoogvenster en de keuze te geven tussen “Ja” of “Nee”.
Als u switcher-knoppen gebruikt, geeft u bovendien met kleur of transparantie aan of de switcher is ingeschakeld of niet.
Negeer servicepagina’s niet
Servicepagina’s geven onvoorziene situaties aan die zich voordoen bij het werken met de site: problemen op de site, niet-bestaande pagina’s of gebrek aan zoekresultaten. In plaats van simpelweg een bug aan gebruikers te melden, kunt u die pagina’s gebruiken voor nuttige doeleinden, zoals het opbouwen van vertrouwen, het verkopen van iets of het helpen van de gebruiker bij het maken van een keuze. Bijvoorbeeld:
- fout 404 (pagina niet gevonden): rapporteer dat een dergelijke pagina niet bestaat en vraag de gebruiker om de link naar de hoofdpagina of een interessant gedeelte te volgen;
- fout 503 (service niet beschikbaar): betreur het dat er aan de service wordt gewerkt en schrijf wanneer deze ongeveer zullen eindigen;
- fout 403 (toegang geweigerd): u adviseren om naar andere delen van de site te gaan of u te registreren;
- en als het gewenste product niet wordt gevonden, biedt u de gebruiker aan om vergelijkbare of populaire producten te bekijken door er een link naar toe te voegen.
Het is duidelijk dat de foutmelding bij de gebruiker negatieve emoties oproept. Daarom kunt u proberen de indruk te verzachten door humor te gebruiken.
Maak het web milieuvriendelijker
In het huidige hedendaagse tijdperk, waarin we een groot deel van ons fysieke leven transformeren in hun virtuele tegenhangers, is het van cruciaal belang om rekening te houden met de ecologische voetafdruk van websites.
We kunnen echter nog steeds een verschil maken als eindgebruikers bewuste keuzes maken en webdesigners mindfulness beoefenen en een deskundige benadering van duurzaam online ontwerpen. Een geweldig website-ontwerpbureau denkt altijd aan deze dingen.
