Dagelijks heb ik in opdracht te maken met verschillende stakeholders in een project. Afhankelijk van de functie en de belangstelling voor de discipline UX-UI-design heeft iedereen een andere kennis van de gebruikte termen.
In de loop van de missies heb ik een groot aantal concepten verzameld en het is een woordenschat die ik graag had gehad toen ik begon en die ik daarom geleidelijk heb geconsolideerd om toekomstige studenten of nieuwelingen in de digitale wereld te helpen.
Ik heb daarom een reeks artikelen voor u opgesteld waarin elk concept wordt uitgelegd, zodat u ernaar kunt verwijzen. We sluiten deze serie daarom af met de laatste 20 concepten. Als je ooit beide delen wilt raadplegen - upstream, zijn hier de links: partie 1, partie 2 et partie 3.
#1 _ Lay-outs
Carrousel
Met de carrousel kunt u door inhoud zoals afbeeldingen, kaarten, enz. bladeren met behulp van horizontale navigatie. We vinden ze vaak op de startpagina van een website om het nieuws te presenteren.
accordeons
Met accordeons kunnen gebruikers delen van de inhoud uit- en samenvouwen. Ze zijn erg handig voor het organiseren van inhoud en het tonen van een duidelijk gedefinieerde hiërarchie aan de gebruiker.
Opdelen
Vaak onderaan een pagina organiseert paginering de inhoud in pagina's. We vinden daarom het nummer van elke pagina. Soms zijn sommige verborgen, afhankelijk van het nummer. Een goede gewoonte is om altijd de eerste en de laatste te behouden. Een andere goede gewoonte, om het gebruik te vereenvoudigen, is het weergeven van de knoppen “vorige” en “volgende”.
item
Een item is een element van een lijst. Dit is een belangrijk element omdat we dit vaak meerdere keren zullen herhalen door de weergegeven gegevens aan te passen.
Lijst
Het bestaat uit een reeks elementen die elkaar in alfabetische, numerieke of zelfs willekeurige volgorde opvolgen.
Daar kunnen verschillende componenten worden genest, zoals tekst, afbeeldingen, status, knop, enz.
Rasterlijst
Rasterlijsten geven een verzameling afbeeldingen weer in een georganiseerd raster. In tegenstelling tot de lijst zijn de elementen verticaal en horizontaal gerangschikt, en niet langer in een enkele verticale kolom zoals de lijst.
Kaart
De kaart is een onderdeel waarmee u binnen dezelfde groep kunt groeperen.
Bijvoorbeeld een titel, inhoud en een afbeelding om een mediaartikel te materialiseren. Of een afbeelding, een titel en een aankoopknop op een e-commercesite.
#2 _ Formulieren
Vorm
Met formulieren kunt u door de gebruiker ingevulde informatie opvragen. Hij zal elementen in het systeem invoeren, aanvullen of toevoegen en deze vervolgens indienen.
Veld (invoer in het Engels)
In dit veld kan de gebruiker informatie invoeren. Deze informatie kan verschillende vormen aannemen, zoals beschreven in de volgende concepten.
Tekstvelden
Met tekstvelden kunnen gebruikers tekst invoeren en bewerken. Dit kan een enkele lijn zijn of meerdere lijnen.
Vloek
Met de schuifregelaar kunnen gebruikers door een reeks waarden bewegen. Het wordt voornamelijk gematerialiseerd door een interactieve bar. Bijvoorbeeld om het volume aan te passen of om binnen een audio-/videotrack te bewegen.
Dropdownlijst (Dropdown of “select” in het Engels)
In de vervolgkeuzelijst kunt u kiezen tussen twee en een onbeperkt aantal opties.
Selectievakje
Met dit selectievakje kunnen gebruikers een of meer opties uit een lijst selecteren. Het is een onderdeel waarmee de gebruiker keuzes kan aangeven uit een lijst met voorstellen. Grafisch gezien wordt een aangevinkt vakje over het algemeen anders gematerialiseerd (dankzij een pictogram of een kleur), terwijl een niet-aangevinkt vakje leeg blijft. Een vakje kan ook grijs worden weergegeven als de keuze niet mogelijk is.
Radio knop
Met het keuzerondje kan de gebruiker één optie uit een set selecteren. Grafisch wordt een keuzerondje weergegeven door een cirkel. Net als bij het selectievakje wordt de selectie van de gebruiker op een andere manier gematerialiseerd (met behulp van een pictogram of een kleur).
Schakelen/schakelaar
De schakelaar wordt gebruikt voor binaire opties. Hiermee kunt u de status van een enkel element activeren of deactiveren.
Het is als een schakelaar, de schakelaar kan slechts twee standen aannemen (bijvoorbeeld: aan/uit-knop).
Placeholder
Een tijdelijke aanduiding is een attribuut dat standaard wordt gebruikt om tekst in bepaalde formuliervelden weer te geven. Het geeft de gebruiker aanwijzingen om een veld in te vullen. Bijvoorbeeld om het verwachte formaat van een datum, een adres of een telefoonnummer door te geven.
#3 _ Acties
knoop
Met een knop kunnen gebruikers met één tik of klik acties en keuzes maken.
De knop is een van de belangrijkste onderdelen van een interface omdat hij de gebruiker langs belangrijke paden leidt: bijvoorbeeld om een product aan te schaffen, een abonnement af te sluiten of om te registreren.
Pandrecht
Een link is een manier om van de ene pagina naar de andere te gaan. Door op een link te klikken, krijgt de gebruiker rechtstreeks toegang tot de gezochte informatie.
Aan de ontwerpkant is het belangrijk om ze duidelijk te identificeren. Vaak worden ze weergegeven met onderstrepingen en kleur.
FAB (zwevende actieknop)
De zwevende actieknop is een knop die net even anders is dan de knoppen die we gewend zijn op platforms. Het bijzondere is dat het in de interface zweeft, boven de inhoud. Zwevende actieknoppen worden meestal rechtsonder in het scherm van je favoriete applicaties geplaatst. Ze worden gebruikt in interfaces om hoofdacties voor gebruikers te groeperen.
Zoekbalk
De zoekbalk is een wat bijzonder invoerveld omdat je hiermee elementen kunt zoeken of filteren. De zoekopdracht kan cross-site zijn of op een specifieke functionaliteit.
Conclusie
We sluiten daarom onze reeks van de kleine UX-UI-woordenlijst af met deze begrippen. Het lijdt geen twijfel dat we een nieuwe serie opnieuw zullen lanceren om u te begeleiden bij nieuwe concepten (die tot nu toe waarschijnlijk niet bestaan!). Bedankt dat u ons volgt en aarzel niet om contact met ons op te nemen als een concept u nog steeds problemen bezorgt!
Om de eerste drie delen te bekijken, zijn hier de links: partie 1, partie 2 et partie 3.
Als u ooit uw kennis wilt verdiepen en wilt oefenen met het ontwerpen van een webinterface, biedt het trainingscentrum van UX-Republic de training “UI Design, the fundamentals” aan. Hier is de link voor meer informatie.
Alexa CUELLAR, UX-ontwerper @UX-Republic
