Consistentie behouden in uw UI-ontwerp

Consistentie in UI-ontwerp is een oud schoolprincipe en enigszins vergeten in sommige van de hedendaagse web- en applicatie-ontwerpen. Het lijkt erop dat ontwerpers ervoor kiezen om consistentie uit hun interfaces weg te laten.

In het geval van het ontwerpen van mobiele applicaties kiezen sommige ontwerpers ervoor om de hardware-standaardinteracties opnieuw uit te vinden, opnieuw te creëren of zelfs volledig te verbreken met hun eigen unieke interfacepatronen. Hoewel het verbreken van de consistentie tussen de hardware-UI-regels en uw apps-ervaring misschien geen slecht idee is, kan het breken van uw eigen apps-consistentie dat wel zijn.

Drie stappen voor consistent UI-ontwerp

Er zijn in wezen drie soorten consistentie waar u aan moet denken bij het ontwerpen van uw web- en mobiele app-ontwerpen:

• 1. Blijf consistent met de richtlijnen en het gedrag van de gebruikersinterface van het apparaat
• 2. Blijf consistent met andere vergelijkbare sites of applicaties
• 3. Blijf consistent met uw eigen ontwerp

Voor dit artikel wil ik me meer concentreren op de derde - het behouden van de consistentie in uw eigen gebruikersinterface. Dit is nogal een groot probleem, vooral omdat je je gebruikers niet in je eigen app wilt verwarren of verrassen.

U wilt niet dat een gebruiker van uw startpagina naar een subpagina gaat en verschillende stijlen of zelfs enorm verschillende gebruikersinteracties ziet. Dit soort dingen kan gebruikers verrassen of in sommige gevallen zelfs wegjagen. Consistentie is niet alleen belangrijk voor de algemene bruikbaarheid van de site, het kan ook de conversie aanzienlijk verhogen.

Consistente structuur en interacties

Dit is de sleutel tot het creëren van een consistente gebruikersinterface. Soms vergeten we bij het ontwikkelen hoe de structuur en interactie de algehele gebruikerservaring gaan beïnvloeden. Maar net zoals blauwdrukken en plannen maken belangrijk is bij het bouwen van een huis of gebouw, is het ook belangrijk voor het creëren van een consistente, bruikbare gebruikersinterface. Er zijn een paar dingen om over na te denken en vooruit te plannen voordat u begint met het schrijven van code.

• 1. Bedenk hoe u elementen consistent op uw site of app kunt plaatsen.
• 2. Bedenk welke UI-patronen u gaat gebruiken.
• 3. Plan welke invoerelementen u nodig heeft.
• 4. Zoek uit welke pictogrammen je nodig hebt en kies of ontwerp een goede iconenset die ze allemaal omvat.

Elementplaatsing is een enorme manier om de verrassing bij de gebruiker te verminderen en consistente, betrouwbare verwachtingen te creëren. Houd uw navigatie op dezelfde plaats, niets irriteert een gebruiker sneller dan het verplaatsen of verdwijnen van navigatie-elementen. Bewaar ook logo's en andere merkartikelen op dezelfde locaties op de hele site.

"Niets irriteert een gebruiker sneller dan het verplaatsen of verdwijnen van navigatie-elementen"

Als u een zijbalk gebruikt, schud de zijbalk dan niet te veel door te veranderen wat er in aanwezig is van pagina tot pagina. Een deel hiervan kan relevant zijn voor de inhoud op de pagina, maar vermijd het verwijderen of zelfs verplaatsen van algemene importelementen zoals zoekformulieren. Een groot ding om consistent geplaatst te blijven, zijn de links en knoppen voor inloggen en gebruikersinstellingen.

Overweeg UI-patronen

Plan vooruit en bedenk welke UI-patronen u nodig heeft. Heeft u een galerie nodig? Modalen? Accordeons? Zijbalken? Het vooraf plannen van ontwerppatronen helpt u niet alleen om uw app sneller te ontwikkelen en te ontwerpen, maar door na te denken over de ontwerppatronen die u nodig heeft, kunt u uw inhoud ook van tevoren uitzoeken, wat u ook veel tijd kan besparen.

Dit lost ook problemen op en beantwoordt vragen van tevoren, op deze manier wanneer u naar een sectie of pagina op uw site komt waarvoor een UI-beslissing vereist is, u deze al heeft gemaakt en u niet betrapt wordt op het creëren van een mengelmoes van ontwerppatronen op uw hele site.

Denk ook van tevoren na over uw formulieren. Bedenk welke vormelementen je nodig hebt en zoek uit welke elementen je niet nodig hebt of die je zou kunnen vervangen. Formulierelementen kunnen sowieso eng of zelfs lastig zijn voor gebruikers om te navigeren, dus als u bepaalde invoer die struikelblokken kunt verwijderen, kunt elimineren of verwisselen, doe het dan.

"Als je bepaalde inputs die struikelblokken kunnen zijn, kunt elimineren of omwisselen, doe dat dan."

Dit is ook een geweldige manier om de besluitvorming uit het ontwikkelingsproces te verwijderen. Het consistent houden van vormen in zowel stijl, structuur als interactie kan soms een conversieratio maken of breken.

Nogmaals, plan het hoofd. Plan van tevoren uit welke pictogrammen u nodig heeft. Een supersnelle manier om uw consistentie te verknoeien, is door halverwege de ontwikkeling van uw app te zijn wanneer u ontdekt dat u afdrukpictogrammen nodig heeft, en besef dan dat u zich niet meer kunt herinneren waar u uw pictogrammen hebt of zelfs als u kunt zoek een afdrukpictogram dat overeenkomt met de rest van uw pictogrammen.

Dit is niet eens een stijlkwestie, maar een interactieve. Gebruikers zullen wennen aan het uiterlijk van bepaalde pictogrammen en deze snel kunnen herkennen. Maar als u een patchwork-pictogrammenset gebruikt, brengt u uw gebruiker in de war of maakt u het zelfs moeilijk voor hem om te zien wat bepaalde pictogrammen vertegenwoordigen.

Consistente stijl

De stijl en het ontwerp van elk UI-element is belangrijk en het behouden van de onderlinge consistentie is ook belangrijk voor de gebruiker. Net zoals het belangrijk is om consistente pictogrammen in te stellen, is het belangrijk dat uw app een algehele ontwerpconsistentie heeft. U denkt misschien dat bepaalde knoppen cool zijn, hoewel ze niet in de buurt komen van het algehele ontwerp of kleurenschema van de site, maar dit zal uw gebruiker alleen maar verwarren en er lelijk uitzien.

Bij het ontwerpen van een UI-kit zijn er een paar dingen waar u rekening mee moet houden om consistentie te creëren:

• 1. Kleurenschema
• 2. Stijl
• 3. Grenzen
• 4. Type en lettertypen
• 5. Grootte
• 6. Achtergrondafbeeldingen
• 7. Effecten

Kleuren

Zoals ik eerder al zei, houd je UI-kleur consistent met het algemene kleurenschema van je site. Zelfs als u call-to-action ontwerpt waarbij u wilt dat knoppen opvallen en worden opgemerkt, moet u ervoor zorgen dat uw call-to-action geen lelijk compliment is voor uw algehele kleurenschema. Gebruik hulpmiddelen zoals Kuler of ColorSchemer om u te helpen bij het selecteren van kleuren die goed bij elkaar passen.

Als ik het heb over het consistent houden van je stijl, heb ik het over het niet gebruiken van een gekke verloopknop met slagschaduwen en schuine randen als de rest van het siteontwerp plat is en geen schaduw of verloop heeft. Behalve dat u consistent blijft met het algehele site-ontwerp, blijft u consistent met de stijl van uw UI-elementen. Als u een bepaalde kleur of lettertypestijl op uw invoerlabels gebruikt, blijf er dan bij en gebruik deze op alle labels.

Grenzen

Ahh, grenzen. Te vaak zie ik sites die drie of vier verschillende dikten of radiussen van de knoprand gebruiken en dit kan echt verwarrend zijn. Houd al uw grenzen aan knoppen, ingangen, selecties, galerijen, afbeeldingen en alle andere UI-elementen consistent met elkaar. Dit betekent niet dat u op de randradius moet gebruiken, u kunt het verwarren door een paar waarden te hebben of zelfs één stijl consistent op elk element te gebruiken.

Type en lettertypen

Het gebruik van hetzelfde type en dezelfde lettertypen in uw elementen is een vrij belangrijk ding, vooral als het gaat om formulierelementen. Houd de kopteksten consistent en gebruik ze niet voor veel lettertypen, ook al vindt u ze allemaal leuk - u kunt ze opslaan voor andere projecten. Invoer en knoppen moeten lettertypestijlen hebben die bij elkaar passen of elkaar aanvullen, zodat formulieren gemakkelijk leesbaar en voorspelbaar zijn.

Grootte

De grootte van lettertypen en andere elementen moet consistent of complementair zijn. De kopteksten en titel van pagina's moeten allemaal consistent blijven, zodat uw gebruiker weet dat die tekstregels in feite overeenkomen met kopteksten en titels. Consistente grootte is ook van toepassing op elk UI-element van inhoudsregio's, links, navigatie-elementen of zijbalken. Wijzig de grootte van deze bestanden niet zo drastisch tussen paginaweergaven, zodat de gebruiker ze onmiddellijk kan herkennen wanneer de pagina wordt geladen.

Achtergrondafbeeldingen

Probeer uw achtergrondafbeeldingen niet teveel te veranderen. Dit gebeurt tegenwoordig niet veel zoals vroeger, maar het is nog steeds een goed idee om uw achtergrondafbeeldingen niet van paginaweergave naar paginaweergave te veranderen. Als je dat doet, probeer dan de afbeelding op de een of andere manier aan elkaar te relateren, zodat de pagina's hun consistentie niet verliezen. Door de achtergrondafbeelding te veranderen, vooral grote, kan de site onsamenhangend aanvoelen en kan de gebruiker het gevoel krijgen dat hij uw site zelfs volledig heeft verlaten, dus probeer deze verleiding echt te vermijden.

Effecten

Effecten, met name lichteffecten, kunnen ervoor zorgen dat een geweldig site-ontwerp helemaal niet logisch is voor de gebruiker. Als u bijvoorbeeld een markering op de knop gebruikt die eruitziet alsof er een licht bovenop schijnt, gebruikt u hetzelfde verlichtingseffect op afgeschuinde tekst in knoppen of afgeschuinde tekstinvoer.

Eerlijk gezegd, dit is echt geen groot succes om de gebruiker te verslaan, maar voor de kieskeurige kijker kunnen ze de inconsistentie van je effecten opmerken en afgeleid raken van wat ze zouden moeten doen met je app of site.

Verveel je niet

Ontwerpen voor consistentie kan soms alledaags of zelfs saai aanvoelen en misschien wil je gewoon iets in je ontwerp gooien om de gebruiker een verrassing te bezorgen, en dat is echt geweldig.

Het is goed om de gebruikers scherp te houden, maar schud de dingen niet zo erg dat ze zo ontmoedigd of verward raken dat ze vertrekken en ergens anders heen gaan. Een beetje consistentie kan een lange weg gaan.