De instellingenpagina wordt vaak weggelaten uit webprojecten. Het is echter een van de essentiële sjablonen bij het maken van een service.
Vorige maand heb ik een klant gewezen op het belang van het ontwerpen van deze pagina waarmee de gebruiker de applicatie kan aanpassen aan hun behoeften en gebruik. Maar ook het belang voor het projectteam om te bepalen welke functionaliteiten op deze pagina moeten worden opgenomen en alle bijbehorende beheerregels.
De instellingenpagina kan verschillende soorten functies groeperen: accountinformatie, meldingen, afbeeldingsindeling, offlinemodus, opslag, versie, ontkoppeling, enz. Elke service biedt de nodige instellingen, afhankelijk van de functies van de tool. En de lijst kan lang zijn!
De gebruiker wordt daarom vaak ertoe gebracht deze pagina te gebruiken. De UX en de UI moeten, net als de tool zelf, worden overwogen om de cursus en de weergegeven inhoud te optimaliseren.
In dit artikel deel ik 6 tips om na te denken (of te heroverwegen) over deze belangrijke pagina voor uw gebruikers.
#1 Snelle toegang
Ik zie het te vaak om het niet als eerste te vermelden, maar hoewel de functionaliteit door het projectteam als secundair wordt beschouwd, heeft toegang tot deze pagina prioriteit.
Vaak is het verborgen omdat de teams vinden dat het te veel ruimte in beslag neemt in de interface. Maar zoals ik je in de inleiding al zei, instellingen zijn belangrijk voor gebruikers.
Denk er dus aan om de toegang tot parameters op het eerste niveau van uw interface te plaatsen.
Let op, ik zeg niet dat het noodzakelijkerwijs op het eerste niveau van uw hoofdnavigatie moet zijn.
Maar bijvoorbeeld in de Spotify-applicatie heeft de gebruiker toegang tot de instellingen op het eerste niveau van de applicatie: op de startpagina rechtsboven in het scherm.
Spotify-app op iOS
Deze functionaliteit vinden we vaak hier maar ook in de navigatie of bijvoorbeeld op een profielpagina.
#2 Groepselementen
Zoals ik eerder al zei, kan de lijst met beschikbare parameters lang zijn! Het is daarom noodzakelijk om na te denken over het prioriteren van de inhoud.
Een goede gewoonte is om items per categorie te groeperen. Zo kan de gebruiker zichzelf gemakkelijker lokaliseren en door het scherm scrollen door de informatie te scannen.
Dit is een praktijk die we ook in Spotify zien. Elke categorie is beschikbaar op het eerste niveau en op het tweede niveau zijn er de subcategorieën.
Spotify-app op iOS
Het is ook mogelijk om inhoud te prioriteren door secties met titels en ondertitels binnen een pagina, zoals Netflix:
Netflix-app op iOS
Het doel hier is om de toegangspunten zo te organiseren dat de gebruiker snel navigeert naar wat hij zoekt.
Het eerste niveau kan ook worden gebruikt als samenvatting om in één oogopslag te visualiseren wat er in de tool beschikbaar is.
#3 Eenvoudige etiketten
Vergeet niet om de gebruikte termen te vereenvoudigen en beknopt te zijn in de keuze van de formulering.
Sommige lijken misschien voor de hand liggend, maar zijn dat veel minder voor beginnende gebruikers op het gebied van nieuwe technologieën. Het is daarom noodzakelijk om het lexicale veld aan te passen aan uw gebruikers om ze niet te verliezen.
Ook kunnen ze twijfels hebben over wat ze activeren of veranderen in hun instellingen als ze de bewoording niet begrijpen, wat hun ervaring zou kunnen verslechteren.
Een ander belangrijk punt is om duidelijk en beknopt te zijn. Het is beter om lange zinnen op het niveau van de labels te vermijden die de interface zouden kunnen belasten en de leestijd zouden kunnen verlengen.
Een goede gewoonte om de labels te begeleiden en de betekenis van de laatste te ondersteunen, die we met name in het voorbeeld van Netflix zien, is om bijvoorbeeld de pictogrammen voor elke categorie te gebruiken.
#4 Beschrijvingen toevoegen
Een andere manier om een label te beschrijven (en te voorkomen dat het te lang wordt) is door een beschrijving toe te voegen die:
- beschrijf de functionaliteit,
- alert op het feedback-effect,
- informeer de gebruiker over de huidige status. Nogmaals, de beschrijving moet beknopt en duidelijk zijn met een lexicon aangepast aan uw gebruikers.
Ik neem mijn voorbeeld van Spotify, waar de applicatie uitleg geeft over de functionaliteit die voor sommige gebruikers verwarrend kan zijn:
Spotify-app op iOS
#5 Toon huidige keuze
Een pluspunt in uw interfaces is om de huidige selectie aan de gebruiker weer te geven naast het label van de parameter.
In de taalselectie heeft de gebruiker bijvoorbeeld noodzakelijkerwijs een actieve parameter: als zijn interface in het Frans is, kan het verstandig zijn om deze op het eerste niveau weer te geven naast de knop om de taal te wijzigen.
In het voorbeeld van Netflix stelt de applicatie de gebruiker in staat om te kiezen tussen twee soorten videokwaliteit (standaard en optimaal). Hier bevindt de "standaard" actieve keuze zich op het eerste niveau en het pijlpictogram begeleidt de gebruiker als hij zijn parameter wil wijzigen.
Netflix-app op iOS
#6 Gebruik het juiste onderdeel
Zoals we in de voorbeelden in dit artikel kunnen zien, of het nu Spotify of Netflix is, doen de functionaliteiten een beroep op verschillende componenten (inputs, toggles (ook wel switches genoemd), lijsten met keuzerondjes of checkboxes, etc.).
Afhankelijk van de actie van de gebruiker is het interessant om de gebruikte component aan te passen, bijvoorbeeld:
- Het tekstveld: speciaal voor accountidentificatievelden.
- De toggle wordt vaak gebruikt voor het directe effect van het kiezen tussen 2 opties (aan/uit).
- De lijst om de gebruiker de keuze te geven uit verschillende mogelijke opties.
De CTA voor uitloggen of om een functie te resetten.
Al deze acties kunnen ook bevestiging door de gebruiker vereisen. Vergeet niet om modaliteiten aan te maken om de keuze aan de gebruiker te valideren door de gevolgen uit te leggen en hem de mogelijke waarschuwingen of feedback van validatie terug te sturen na een actie (validatie, registratie, gedane betaling, enz.)
Ik deel hier een artikel dat ik onlangs heb gepubliceerd over het maken van modals. Mogelijk vindt u interessante begrippen om te integreren voor uw parameterinterfaces of in uw toepassing!
# Concluderen
De instellingenpagina is een scherm dat u kunt verwachten bij het ontwerpen van uw interface, hoewel het niet direct gerelateerd is aan de hoofdfunctionaliteit van uw applicatie of uw website.
Dit is de pagina die de instellingen van de verschillende functies en toegang tot de verbindings- en ontkoppelingsfuncties centraliseert (als authenticatie mogelijk is op uw product).
Voor bepaalde toepassingen is het ook de plaats voor het beheer van zogenaamde “Premium”-rekeningen en dus van het volledige financiële aspect van de dienstverlening.
De instellingenpagina kan ook zijn waar u de gebruiker op de hoogte stelt van verwijzingen die uw gebruikersdatabase kunnen uitbreiden!
Vergeet ook niet om deze ruimte te gebruiken om uw gebruikers informatie te verstrekken over de updates die in de toepassing zijn geïmplementeerd. Dit maakt deze pagina interactief en benadrukt het volledige potentieel van uw tool!
Afbeeldingsbron: https://undraw.co/illustrations
Alexa CUELLAR UX-UI-ontwerper @UX-Republic
