UX- en UI-ontwerp: wat is het verschil?

Wat is UX design?

UX staat voor user experience. In de praktijk is het het gevoel dat gebruikers hebben bij interactie met een bepaald digitaal product, zoals een website of applicatie.

UX design is een diverse discipline die put uit veel verschillende vakgebieden, waaronder psychologie, marketing, marktonderzoek, design, business en technologie. Het combineert dit alles en probeert een aantrekkelijk en praktisch resultaat voor de klant te creëren.

UX design kan worden toegepast op zowel digitale als fysieke producten. Het wordt echter vaak gecombineerd met website-ontwerp. Een goed uitgevoerd UX-ontwerp zorgt voor een duidelijke website waar klanten binnen enkele minuten kunnen vinden wat ze nodig hebben. Als gevolg hiervan is de kans kleiner dat ze vertrekken en hun aankoop niet voltooien.

De term ‘gebruikerservaring’ dateert uit de jaren 1990. Het werd bedacht door Donald Norman, een cognitief wetenschapper bij Apple.

Interessant is echter dat de eerste hints van UX terug te voeren zijn tot de jaren 1950, toen de Amerikaanse industriële ingenieur Henry Dreyfuss op het toneel verscheen. Hij werd beroemd door het ontwerpen van machines en het verbeteren van hun bruikbaarheid. Zijn ideeën waren erop gericht om individuele producten mensen goed van dienst te zijn en zo gebruiksvriendelijk mogelijk te maken.

Walt Disney was ook verantwoordelijk voor een belangrijke verschuiving in UX-design. Experts beschouwen hem als de eerste UX-designer. Hij was geobsedeerd door het creëren van magische, meeslepende en perfecte gebruikerservaringen in zijn sprookjes.

Laten we de jaren 1970 niet vergeten, die het tijdperk van personal computing inluidden. UX-design begon zich uit te breiden, maar het had geen naam. Pas toen Donald Norman het een naam gaf.

Belangrijkste principes van UX-ontwerp

Als je het hebt over ‘goed UX design’, denkt iedereen aan iets anders. Daarom zijn er een paar belangrijke principes die het duidelijk definiëren.

1. Zet de gebruiker altijd op de eerste plaats

Bij UX design staat de gebruiker centraal. Dit klinkt misschien eenvoudig en voor de hand liggend, maar door verschillende factoren, zoals de perceptie van de klant, kan het door de ontwerper worden vergeten.

Een uitstekend UX-ontwerp dient de gebruikers en helpt hen hun problemen op de gemakkelijkste en snelste manier op te lossen. Een e-shop is een overzichtelijke website waar de producten zijn onderverdeeld in een paar hoofdcategorieën. Er is een zoekbalk en natuurlijk een eenvoudig betalingsproces.

Het UX-design mag geen extra problemen opleveren. Anders kan het een persoon ontmoedigen om de site te kopen of te browsen en ervoor zorgen dat ze iets missen.

2. Eenvoud, hiërarchie en consistentie staan centraal

Eenvoud, hiërarchie en consistentie stellen gebruikers in staat om binnen enkele seconden te vinden wat ze nodig hebben en te doen waarvoor ze kwamen. Elk van deze functies doet dit op een andere manier:

• Eenvoud – een site hoeft niet het meest originele ontwerp te hebben om voor een gebruiker gemakkelijk te navigeren te zijn. Eenvoud gaat meer over het beperken van onnodige elementen en stappen die de gebruikerservaring bemoeilijken.
• Hiërarchie – de juiste plaatsing van kleuren, lettertypen en andere elementen zorgt ervoor dat gebruikers gemakkelijk door de site kunnen navigeren. Ze zullen heel snel alles vinden wat ze nodig hebben, waardoor hun kansen om aankopen te doen, zich te abonneren, enz. automatisch toenemen.
• Consistentie – het gebruik van dezelfde kleuren, lettertypen en andere merkgerelateerde elementen op alle platforms die u gebruikt om met de gebruiker te communiceren, verbetert en stimuleert ook de gebruikerservaring.

3. Eerst functionaliteit, dan design

UX design is bedoeld om individuele activiteiten, zoals het vinden van producten of winkelen, gemakkelijker te maken voor gebruikers. Hoewel de look en feel van een digitaal product belangrijk zijn, komt functionaliteit altijd op de eerste plaats.

4. Inspiratie moet komen van het bekende

Veel UX-ontwerpers maken vaak onconventionele en over-the-top producten waarvan mensen niet weten wat ze kunnen verwachten. Dit zorgt voor onnodige obstakels voor hen, waardoor ze uiteindelijk de app of website verlaten.

Met andere woorden, een goed UX-ontwerp moet gebaseerd zijn op gevestigde ontwerpkaders. Gebruikers moeten deze kaders kennen en er gemakkelijk doorheen kunnen navigeren.

Wat lost UX design op?

UX-design omvat verschillende gebieden, waaronder:

• Interactieontwerp – ook bekend als IxD, is het proces waarbij wordt ontdekt hoe een persoon omgaat met een product om het proces te vereenvoudigen en de beste ervaring te bieden. Daarnaast gaat interaction design over het observeren van hoe het product zich gedraagt wanneer de andere partij het gebruikt, dat wil zeggen welke feedback het geeft en hoe een persoon zou kunnen reageren.
• Gebruikersonderzoek – u kunt het gebruiken om gebruikers te begrijpen en hun problemen te ontdekken. Op basis van deze informatie kunt u effectieve oplossingen ontwerpen om uw product aan te passen zodat het gebruiksvriendelijk en praktisch wordt.
• Informatiearchitectuur – wordt gebruikt om gebruikers te helpen bij het navigeren door de producten en informatie die u verstrekt. Het richt zich met name op het efficiënt organiseren en structureren van content.
• Webaanpassingsvermogen – zorgt ervoor dat de gebruikersinterface goed wordt weergegeven op verschillende apparaten, van desktop tot tablet tot mobiel.
• Inhoud – de inhoud op de site is ook belangrijk voor UX. Artikelen, productbeschrijvingen en andere tekst hebben een aanzienlijke invloed op de ervaring van de gebruiker. Het is dus belangrijk om te controleren of de tekst geschikt is voor de locatie, betrekking heeft op afbeeldingen of andere visuals en relevant is.
• Persona’s maken – UX-designers kunnen de informatie die ze verzamelen gebruiken om persona’s te creëren waarvoor ze vervolgens websites, apps en andere producten ontwerpen.
• Andere gebieden – UX omvat tientallen verschillende gebieden, zoals bruikbaarheid, toegankelijkheid en virtual reality.

Deskundig advies

In UX en AI is een persona een personage dat de behoeften, doelen en gedragingen van een bepaalde groep mensen vertegenwoordigt. Het helpt om gebruikers te begrijpen en waardevollere en betere inhoud te creëren.

Wat is AI-ontwerp?

UI is een afkorting voor “user interface”. Dit ontwerpgebied richt zich op de esthetiek van een producten de grafische vormgeving. UI omvat alles wat u op een website of applicatie ziet, zoals afbeeldingen, tekst, banners, knoppen, enz.

UI is van vitaal belang omdat het gebruikers kan overtuigen om op de site te blijven en een aankoop te doen. Het heeft ook een aanzienlijke invloed op UX omdat het deze kan verbeteren. Een mooie en functionele site zal mensen een veel beter gevoel geven dan een rommelige site waar het ene element op het andere is gelaagd en geen betrekking heeft op het geheel.

De geschiedenis van UI begon in de jaren 1970 met de introductie van de Xerox Alto-computer, de eerste met een geavanceerde gebruikersinterface. Dit wordt ook wel een grafische gebruikersinterface of GUI genoemd.

De Xerox-computer had overlappende vensters, pop-upmenu’s en pictogrammen of knoppen voor elke functie, wat betekende dat hij kon worden gebruikt door mensen zonder speciale IT-opleiding.

Deze verandering maakte computers toegankelijk voor een breder scala aan mensen en verbeterde de algehele gebruikerservaring.

Soorten UI-ontwerp

UI-ontwerp heeft een paar basistypen, namelijk:

• Grafische gebruikersinterface (GUI) – is een van de meest voorkomende soorten interfaces die worden gebruikt om websites en applicaties te maken. Het stelt gebruikers in staat om te communiceren via handige pictogrammen en knoppen die ze klikken met een muis of trackpad. Een goed voorbeeld van een GUI is het startscherm of desktop.
• Voice user interface (VUI) – ook bekend als spraak gebruikersinterface. Zijn taak is om spraak te herkennen om spraakopdrachten te begrijpen. Het wordt momenteel veel gebruikt. Voorbeelden van VUI’s zijn populaire spraakassistenten zoals Siri, Google Home of Alexa van Amazon.
• Menugestuurde interface – We kunnen dit ook wel een menugestuurde interface noemen. Daarbinnen communiceren gebruikers met een programma of systeem via een reeks menu’s. Deze menu’s zijn opties of opdrachten die worden geselecteerd met behulp van een aanwijzer, touchscreen of toetsenbord. Menugestuurde interfaces zijn bijvoorbeeld te vinden in geldautomaten.
• Opdrachtregelinterface – is een op tekst gebaseerde interface waar u opdrachten typt. De commando’s werken vervolgens samen met het besturingssysteem. Dit interfacetype was in het verleden gangbaar, maar je komt het vandaag de dag nog steeds tegen, bijvoorbeeld bij het gebruik van Node.js.
• Virtual Reality (VR) – Virtual reality creëert de illusie van de echte wereld. Het staat nog in de kinderschoenen, maar ontwikkelt zich vrij snel, dus je zult het steeds meer zien als een AI-ontwerper.

Wist je dat…?

De spraakgebruikersinterface werd lang voor de opkomst van spraakassistenten gebruikt door AI-ontwerpers. Ze gebruikten het om websites te optimaliseren voor mensen met een handicap.

Belangrijkste AI-principes

Er zijn een paar belangrijke principes die kenmerkend zijn voor AI van goede kwaliteit. Dit zijn:

Eenvoud

Dit is hetzelfde als UX. Een eenvoudig UI-ontwerp maakt het gemakkelijk voor gebruikers om door een website of app te navigeren, zodat ze zich kunnen concentreren op waar ze voor zijn.

Een goed voorbeeld van een eenvoudige gebruikersinterface is Google Home. U vindt alleen de zoekbalk, knoppen en wat extra informatie.

Consistentie: Het gebruik van elementen die op de een of andere manier hetzelfde of vergelijkbaar zijn, maakt het voor gebruikers gemakkelijker om aan het ontwerp te wennen en te anticiperen op wat er op de volgende subpagina zal staan. Dit versnelt de aankoop van bijvoorbeeld producten of diensten.

De Facebook-website is een goed voorbeeld van consistentie. De bovenste balk en de zijbalk lijken erg op elkaar en zijn altijd aanwezig, waardoor gebruikers snel toegang hebben tot verschillende secties, waar ze ook zijn.

Visuele hiërarchie

Dit is waar de UI en UX samenkomen. Door elementen correct te rangschikken, kunt u de aandacht van gebruikers trekken en het navigeren op de site of applicatie vergemakkelijken. U kunt ook hiërarchie gebruiken om specifieke informatie te markeren en ervoor te zorgen dat bezoekers deze niet missen. In het geval van een e-shop kan dit betekenen dat afgeprijsde producten bovenaan de hoofdpagina worden geplaatst.

Terugkoppeling

Gebruikers hebben onmiddellijke feedback nodig bij interactie met elementen van een website of applicatie. Dit geeft hen een gevoel van controle en stelt hen gerust dat wat ze doen effect heeft.

Feedback kan de vorm aannemen van visuele of auditieve signalen. Sommige apps, zoals Messenger, gebruiken zelfs een combinatie van de twee.

Toegankelijkheid

Goede AI moet ook zorgen voor toegankelijkheid, zodat een persoon met een handicap het digitale product kan gebruiken.

Toegankelijkheid moet factoren omvatten zoals het aanpassen van kleurcontrast of lettergrootte. Overweeg daarnaast om spraaklezen of toetsenbordnavigatie in de website of app op te nemen.

duidelijkheid

Dit gaat over het presenteren van informatie op een duidelijke manier die uw doelgroep kan begrijpen. Als u een e-shop of een website heeft die gericht is op het grote publiek, kies dan voor eenvoudige taal, gemakkelijk leesbare lettertypen en kleuren die het bladeren door de inhoud niet in de weg staan. Een lichte achtergrond met een donker lettertype is ideaal.

Esthetiek en visuele aantrekkingskracht

AI richt zich voornamelijk op de look en feel van het product, wat een aanzienlijke invloed heeft op hoe een persoon zich voelt bij het gebruik ervan. Daarom houdt u zich als UI-ontwerper bezig met het creëren van een aantrekkelijke, boeiende en aantrekkelijke interface die aansluit bij het merk of zijn branding.

Aanpasbaarheid

Dit punt richt zich op het aanpassen van de website en app aan verschillende schermformaten. Dit is een belangrijk kenmerk van AI-ontwerp in de wereld van vandaag, waar mensen verschillende apparaten gebruiken, van mobiele telefoons tot tablets tot computers.Wist je dat…?

Het vermogen van een website of app om zich aan te passen aan verschillende schermen wordt ook wel “responsiveness” genoemd?

Elementen van UI-ontwerp

UI-ontwerp werkt met verschillende elementen. De meest voorkomende die je tegenkomt zijn:

• Kleuren – het is niet nodig om het te overdrijven. Als je ze combineert, gebruik dan vergelijkbare tinten om te voorkomen dat er agressieve contrasten ontstaan.
• Lettertype – het moet leesbaar zijn, zodat het niet moeilijk wordt voor mensen om met de app te communiceren. Voel je vrij om er meer dan één te gebruiken binnen het UI-ontwerp. Zorg er echter voor dat alle lettertypen die u kiest, samenwerken.
• Afbeeldingen kunnen foto’s, verschillende grafische elementen of infographics zijn. Ze verbeteren een website of ander digitaal product en geven aanvullende informatie.
• Animaties en effecten – deze zijn een interessante aanvulling op een website of applicatie en kunnen de aandacht vestigen op specifieke informatie. Zorg er echter voor dat u ze niet afleidend en onaangenaam maakt bij het kiezen ervan.
• Kleine grafische elementen – deze omvatten knoppen en formulieren die tekst opsplitsen, de aandacht trekken en de pagina gemakkelijker te navigeren maken.

Wat is de focus van UI-ontwerp?

De functieomschrijving van een UI-ontwerper omvat doorgaans:

• Analyse van gebruikers en hun voorkeuren
• Uitzoeken hoe gebruikers zich voelen over de producten (website, applicatie, enz.)
• Prototyping van gebruikersinterfaces
• Interactieve elementen en animaties maken en gebruiken
• Aanpassing van het product voor alle schermformaten
• Implementeren van ontwerpoplossingen

De verschillen tussen UX en UI design

Het belangrijkste verschil tussen UX en UI-ontwerp is dat UX zich richt op de algehele ervaring van de gebruiker bij interactie met een product. Omgekeerd draait het bij UI allemaal om het visueel presenteren van een website, applicatie of andere interface.

UX zoekt ook naar en lost de problemen van mensen op bij het gebruik van het product. UI bouwt vervolgens voort op de UX-oplossingen en probeert ze esthetisch aantrekkelijk, spannend en intuïtief te maken.

Gedurende het hele ontwerpproces komt UX op de eerste plaats. De gebruikersinterface komt daarna zodra de ontwerper de problemen heeft geïdentificeerd en oplossingen heeft bedacht.

En vergeet niet dat je UX niet alleen in de digitale wereld hoeft te gebruiken. Het heeft ook zijn plaats in het ontwerp van fysieke producten. Aan de andere kant is UI alleen van toepassing op de digitale wereld, d.w.z. websites, mobiele apps enzovoort.

Verschillen tussen UX- en UI-ontwerpers

De vaardigheden die nodig zijn voor een UX- en UI-ontwerper zijn minimaal verschillend. Beiden moeten samenwerken, communiceren en openstaan voor nieuwe ideeën. Ze moeten zich ook op hun gemak voelen bij het onderzoeken van gebruikersgedrag en het maken en testen van prototypes.

Enkele verschillen zijn het feit dat een UX-ontwerper een kritische denker moet zijn en informatiearchitectuur moet begrijpen. Een UI-ontwerper daarentegen moet een creatieve instelling en kennis van responsive design hebben.

Een UX-designer richt zich meer op bruikbaarheid en bruikbaarheid, terwijl een UI-ontwerper zich richt op interactiviteit en merkkenmerken (lettertypen, kleuren, enz.).

UX- en UI-ontwerptools

Als UX- en UI-ontwerper heb je verschillende tools om het hele proces te versnellen en te stroomlijnen en te zorgen voor nauwkeurige resultaten. Enkele van de meest populaire zijn:

• Figma – een krachtige tool die u kunt gebruiken voor zowel UX als UI. Het is een cloudgebaseerd platform dat realtime teamsamenwerking mogelijk maakt en tientallen functies heeft voor het ontwerpen, testen en prototypen van ontwerpen.
• Adobe XD is ideaal voor design en prototyping en kan eenvoudig worden uitgebreid met andere Adobe-tools. Voordelen zijn onder meer gebruiksgemak, hoge prestaties, duidelijkheid en realtime samenwerking.
• Doolhof – Een geavanceerde tool voor het testen van gebruikerservaringen waarmee u kwantitatieve en kwalitatieve gegevens over uw gebruikers kunt verzamelen. Het is vooral handig wanneer u snelle feedback nodig heeft om de ontwerpen die u gaat implementeren te valideren.
• Sketch – een tool die speciaal is ontworpen voor het MacOS-besturingssysteem. Het richt zich voornamelijk op vectorafbeeldingen, maar heeft tientallen andere functies. Je kunt het ook eenvoudig integreren met platforms zoals InVision, Zeplin of Abstract.
• Webflow – een populaire tool voor webdesign en -ontwikkeling. Hiermee kunt u responsieve en visueel aantrekkelijke websites maken zonder code te schrijven. De belangrijkste voordelen zijn onder meer een visuele editor met intuïtieve drag-and-drop-functionaliteit, tools voor het maken van boeiende animaties en snelle, veilige hosting.
• InVision – een andere geavanceerde tool voor prototyping en samenwerking. Het heeft tientallen functies waarmee u het gedurende het hele ontwerpproces kunt gebruiken – van het eerste concept tot het eindproduct. InVision is eenvoudig te gebruiken, gemakkelijk te begrijpen en aanpasbaar aan uw behoeften.

Wat is bruikbaarheid?

Het is een kenmerk dat beschrijft hoe een persoon een product of dienst kan gebruiken om zijn doel te bereiken. Veel mensen verwarren het vaak met UX design omdat het onder die paraplu valt. Ze zijn echter niet hetzelfde.

Het verschil tussen de twee concepten is dat UX een complex geheel is dat zich richt op de volledige interactie van de gebruiker met het product. Bruikbaarheid daarentegen richt zich alleen op de vraag of het product voor een persoon gemakkelijk te gebruiken is en of het aan zijn verwachtingen voldoet.

Het bruikbaarheidsniveau van een ontwerp is gebaseerd op hoe de functies voldoen aan de behoeften van mensen. Volgens de Nielsen Norman Group is deze functie de op één na belangrijkste binnen UX en UI, net na bruikbaarheid. Neem het dus niet lichtvaardig op.

De essentiële elementen van bruikbaarheid

Bruikbaarheid wordt gekenmerkt door een aantal essentiële elementen, zoals:

• Efficiëntie – een ontwerp dat voldoet aan de bruikbaarheidseisen en gebruikers in staat stelt om individuele taken gemakkelijk, snel en zonder obstakels uit te voeren.
• Betrokkenheid – bruikbaarheid motiveert mensen om te genieten van het gebruik van een digitaal product en er regelmatig naar terug te keren.
• Fouttolerantie – de gebruikersinterface moet duidelijk zijn, zodat de gebruiker zo min mogelijk fouten maakt. Deze kunnen het proces van het kopen of gebruiken van een applicatie verlengen en tot frustratie leiden.
• Onthoudbaarheid – bruikbaarheid maakt het voor een persoon gemakkelijk en snel om te leren hoe een systeem, website of applicatie te gebruiken. Op deze manier zullen ze, wanneer ze terugkeren, geen probleem hebben om snel een aankoop te doen of enkele van de functies te gebruiken.