Praktische tips voor 6 veelgebruikte gebruikersinterface-elementen
Het uiterlijk en de bruikbaarheid van bepaalde interface-elementen en functionaliteit zijn cruciaal voor het succes van websites in de huidige markt.
Studies hebben aangetoond dat zelfs een vertraging van een seconde in het denken van de gebruiker de perceptie en interesse in een website zal verzwakken en uiteindelijk de conversieratio van de website zal verlagen.
In bepaalde niches en industrieën kan het gebruik van UI-elementen die niet voor de hand liggen, volkomen aanvaardbaar zijn. De blog- en webontwikkelsector zijn perfecte voorbeelden.
Maar wanneer we gebruikersinterfaces ontwerpen voor niet-technisch onderlegde doelgroepen (wat meestal het geval is bij klantenwerk), moeten we ervoor zorgen dat bepaalde UI-elementen niet te ver afwijken van wat gebruikers gewend zijn.
Dit artikel bespreekt enkele best practices en bruikbaarheidstrekken van zes elementen van de gebruikersinterface en de conventies voor elk daarvan, zodat ontwikkelaars gebruikerservaringen kunnen creëren die zowel mooi als eenvoudig zijn.
1. Uiterlijk van het zoekvak
Op grote websites met veel informatie of productzwaar is zoeken koning. Gebruikers laten hier in het algemeen geen conventionele navigatiebalken in de richting van het zoekvak.
Een zoekvak dat niet onmiddellijk zichtbaar is, heeft een van de twee effecten: 1) de gebruiker gaat ervan uit dat er geen zoekfunctionaliteit beschikbaar is, of 2) de gebruiker vindt de zoekfunctionaliteit na een vertraagde en mogelijk irriterende periode.
Zorg ervoor dat het zoekvak op uw website goed zichtbaar is. Donkere achtergronden en fraaie afbeeldingen zullen de bruikbaarheid schaden , dus het beste is om het wit of lichtgrijs te houden. Zorg er ook voor dat het zoekvak groot genoeg is ten opzichte van andere belangrijke elementen op de pagina, en behoud dus zijn positie in de visuele hiërarchie.
Het zoekvak aan Domein voor IP past goed bij het visuele thema van de website, is oranje en grafisch consistent met zijn omgeving. Maar als een zoekvak op een drukkere website deze behandeling kreeg, zou het waarschijnlijk moeilijk te herkennen zijn.
Het ontwerp is geen belemmering voor Domain by IP, omdat de website één functie heeft: zoeken, wat precies in het midden van de pagina staat. Bovendien zijn ontwikkelaars in een technologische niche minder geneigd om zich aan conventies te houden. Maar deze mate van creativiteit moet worden vermeden op grotere websites waarvan het doelpubliek mogelijk niet zo technisch onderlegd is.
Tijd voor avontuur , ondertussen, houdt zijn zoekvak wit, handig formaat en gemakkelijk te vinden op de pagina:
Ondanks dat het een vreemde taal is, heeft Adventure Time een zeer duidelijk zoekvak, zelfs voor Engelssprekende gebruikers. De grootte en kleur van de doos wordt aangevuld door de afbeelding van het vergrootglas, dat het universele symbool is geworden voor online zoeken. Een gebruiker die op zoek is naar deze functionaliteit zal hier geen probleem hebben.
Dit patroon moet worden gevolgd in alle projecten die zijn getarget op een gevarieerde gebruikersgroep.
Verder lezen:
2. duidelijk gemarkeerde samenvouwbare / uitvouwbare inhoud
Websites profiteren van inklapbare panelen en vervolgkeuzemenu's omdat ze zorgen voor schonere en minder overvolle lay-outs. De verborgen inhoud in deze interface-elementen kan echter de bruikbaarheid van een website beïnvloeden als de aanwezigheid ervan niet duidelijk wordt aangegeven.
Wanneer een gebruiker op een blote link of knop klikt, verwachten ze dat ze naar een nieuwe pagina worden gebracht. Maar wanneer een gebruiker op een koppeling of knop klikt met een indicator voor verborgen inhoud, verwachten ze dat de nieuwe inhoud direct wordt weergegeven (via JavaScript of AJAX) en de mogelijkheid heeft om de inhoud vervolgens te verbergen. Daarom moet een website een scherp onderscheid maken tussen normale links en links die nieuwe inhoud via JavaScript onthullen .
Inklapbare inhoud, zoals in zijpanelen en menubomen, kan worden aangegeven met een pijl, driehoek of Windows Explorer-achtige plus / minus-indicator. Het paneel dat ingelogde gebruikers zien CSS Globe geeft duidelijk aan dat het samenvouwbaar is:
Hieronder is dezelfde pagina nadat het paneel is uitgebreid om een groep functies te onthullen:
Nu de inhoud in het paneel is uitgevouwen, wordt de pijl 90 graden gedraaid, wat suggereert dat dezelfde inhoud nu kan worden verborgen of samengevouwen. Ditzelfde principe kan worden toegepast op drop-down- of fly-out-menu's, hoewel hiervoor geen roterende pijl nodig is. Verrassend is dat deze functie vaak wordt weggelaten, zelfs op professioneel ontworpen websites.
Verder lezen:
3. AJAX-laadindicator
Wanneer u de gebruikerservaring verbetert door inhoud te laden via asynchrone verzoeken, moet u de gebruiker laten weten dat er een AJAX-aanvraag wordt verwerkt. Zonder deze indicator kan de gebruiker stoppen met wachten of zich afvragen waarom er niets is gebeurd als reactie op zijn klik.
Je kunt dit op verschillende manieren doen; een manier is om een "Loading" of soortgelijk bericht in of nabij de locatie te markeren waar de actie zal plaatsvinden, zoals de RSS-lezer van Google doet:
Bovenaan de schermafbeelding is geel gemarkeerde tekst, die wordt weergegeven wanneer op de knop 'Alles markeren als gelezen' wordt geklikt en de gebruiker wordt verteld dat er iets aan de hand is.
Een andere manier om dit aan te geven is met animatie of een ronddraaiend zandloper, dat Windows-gebruikers vertrouwd zouden zijn. Een geanimeerde indicator wordt gebruikt op talloze websites, waaronder tjilpen , waar gebruikers op een knop 'Meer' klikken om oudere tweets te bekijken:
Nadat op de knop is geklikt, en afhankelijk van de snelheid van de clientverbinding met de server, verschijnt er een bekende geanimeerde, wervelende afbeelding die de gebruiker vertelt dat zijn aanvraag wordt verwerkt.
AJAX-afbeeldingen voor het laden van afbeeldingen zijn gratis beschikbaar op een aantal verschillende websites, waarvan u er veel kunt aanpassen aan de afbeeldingen met formaat, kleur en andere opties.
Dit type visuele indicator is belangrijk voor asynchrone verzoeken die geen aanwijzingen voor de client bevatten over welke activiteit wordt geladen.
Een AJAX-achtige indicator kan ook worden gebruikt om niet-AJAX-functionaliteit te verbeteren die zich gedraagt als AJAX en het kost tijd om te laden. Dit kan een fotogalerij zijn die een groter beeld laadt wanneer op een miniatuur wordt geklikt.
AJAX laden van afbeeldingen en andere indicatoren versnellen een pagina niet echt, maar ze verbeteren wel de "waargenomen" laadtijd , wat vaak net zo waardevol is als het verbeteren van de werkelijke laadtijd.
Verder lezen:
4. Locatie van winkelwagen en log-in en registreer functies
Wanneer gebruikers een pagina scannen voor de knop 'Winkelwagen' of 'Nu registreren', zien ze er in de rechterbovenhoek van de pagina voor het eerst uit. Tenzij u een dwingende reden hebt om dit te doen, moet u deze functionaliteit op de vertrouwde locatie bewaren, anders loopt u het risico de gebruikerservaring te vertragen en te verstoren.
Opties en functies die onder deze categorie vallen, zijn onder andere "Bekijk winkelwagen", "Uitchecken", "Inloggen", "Uitloggen", "Registreren", "Link verzenden", "Wachtwoord vergeten?" En zelfs "Neem contact met ons op. "Dit laatste item is meestal de laatste in een horizontale navigatiebalk.
TasteBook bevat vier van dergelijke links in de rechterbovenhoek van de lay-out:
Maui Divers sieraden is een ander goed voorbeeld en bevat ook een afbeelding van een boodschappentas:
5. Vervaldatum formaat op creditcardformulieren
Wanneer een formulier om de vervaldatum van uw creditcard vraagt, is het formaat altijd hetzelfde: de maand, weergegeven met twee cijfers, gevolgd door het jaar, weergegeven met twee of vier cijfers (bijvoorbeeld 03/11 of 03/2011). Het viercijferige formaat is de manier waarop de vervaldatum op de creditcard zelf wordt weergegeven.
De beste manier om deze informatie te verzamelen en de gebruikerservaring te versterken, is om twee afzonderlijke selectievakjes te gebruiken, een voor de maand en de andere voor het jaar. Laat de gebruiker de vervaldatum niet in een enkel tekstvak invoeren, zelfs als u instructies geeft.
Hier is een goed voorbeeld van de betaalpagina van Maui Divers Jewelry:
En hier is een voorbeeld van een slecht ontworpen vervaldatum veld:
Bovendien zou de maandselector niet de namen van de maanden moeten weergeven, maar in plaats daarvan de nummers 01 tot en met 12. Opsommen Er is geen reden om gebruikers te vertragen door ze te laten achterhalen dat "08" "Augustus" betekent.
6. Gemakkelijk identificeerbare koppelingen
Dit zou nooit een probleem moeten zijn, maar helaas maken sommige websites nog steeds niet duidelijk onderscheid tussen links en reguliere tekst in het hoofdgedeelte.
In de meeste gevallen kun je dit verschil het beste aangeven door links een andere kleur te geven en ze te onderstrepen. In sommige gevallen volstaat alleen een sterk contrasterende kleur; maar alleen onderstrepen of alleen maar de kleur iets veranderen is zelden genoeg en zal vaak de toegankelijkheid verminderen.
Cameron.io maakt dit onderscheid goed:
Deze links zouden niet zo zichtbaar zijn als ze slechts onderstreept waren maar niet van kleur waren veranderd. Je zou geen knop ontwerpen die niet op een knop leek, dus waarom zouden tekstverwijzingen in het hoofdgedeelte passen? Aangezien de meeste gebruikers tekst online scannen, moeten ontwerpers ervoor zorgen dat alle links identificeerbaar zijn lang voordat een muis eroverheen wordt gerold.
Verder lezen:
Conclusie
Alle elementen en functies van de gebruikersinterface die in dit artikel worden besproken, zijn cruciaal voor de bruikbaarheid van de website en spelen een belangrijke rol in de perceptie van uw merk door de gebruiker.
Veel kleine verbeteringen kunnen een groot verschil maken in de waargenomen snelheid en kunnen voorkomen dat gebruikers gefrustreerd of ongemakkelijk raken.
Maak uw gebruikersinterface-elementen eenvoudig en gestroomlijnd en volg waar mogelijk conventies. U ziet lagere bouncepercentages, betere conversies en een gestage stroom van terugkerende verkeer.
Exclusief voor WDD geschreven door Louis Lazaris, freelance schrijver en webontwikkelaar. Louis rent Indrukwekkende webs , waar hij artikelen en tutorials over webdesign plaatst.
Hoe kunnen sommige van deze of andere elementen van de gebruikersinterface worden verbeterd? Deel uw mening in de reacties hieronder.