Stop met zo vierkant te zijn
Als ontwerpprofessional bent u bekend met (en draagt u mogelijk bij aan) het toegenomen gebruik van cirkels in alle ontwerpelementen.
Van interieuraccessoires zoals ronde spiegels en prints tot handgereedschap bij de ijzerhandel, overal zijn cirkels. Cirkels zijn zelfs naar onze websites gerold, verschijnen in kopteksten, menu's en slaan soms schar in het midden van de pagina.
Een paar ontwerpsites hebben zelfs blogberichten gemaakt, waaronder geweldige screenshots van het creatieve gebruik van cirkels in webdesign. Er is echter weinig gezegd over de psychologie achter het gebruik van cirkels in ontwerp, of hoe de reactie van de gebruiker op cirkels effectief kan worden geïntegreerd in het groeiende fenomeen van mobiel gebruik.
We weten dat we van cirkels houden, maar waarom? En hoe kan een webontwerper de beste cirkels gebruiken om de gebruikerservaring in responsief ontwerp te optimaliseren?
Cirkels en de hersenen
Cognitie en perceptie
Cirkels spreken mensen aan omdat ze gemakkelijker te begrijpen zijn dan vormen en objecten met harde lijnen.
Het oog wordt getrokken door cirkels en de informatie die erin zit, en ze zijn sneller en gemakkelijker voor de hersenen om te verwerken dan hardgerande vierkanten en rechthoeken.
De Zwitserse wiskundige en natuurkundige Jurg Nonni, auteur van Visual Perception, suggereert dat het verwijderen van randen ons in staat stelt om sneller een voorwerp waar te nemen. Nonni: "Een rechthoek met scherpe randen heeft inderdaad een beetje meer cognitief zichtbare inspanning nodig dan bijvoorbeeld een ellips van dezelfde grootte. Ons "fovea-oog" is nog sneller bij het opnemen van een cirkel. Randen omvatten extra neuronale beeldgereedschappen. Het proces wordt daarom vertraagd. "
Bekende en geruststellende bochten
Naast het cognitieve vermogen van de hersenen om cirkels sneller te verwerken dan dat het vierkanten en rechthoeken kan verwerken, verwerken we vertrouwde informatie en objecten sneller dan die we niet herkennen.
Iedereen herkent cirkels en mensen leren vormen met specifieke acties en resultaten verbinden, zoals het universele rode achthoekige "STOP" -teken. Volgens de OS X Human Interface Guidelines van Apple leren mensen bepaalde gedragingen te associëren met specifieke elementen op basis van hun uiterlijk. Mensen herkennen bijvoorbeeld drukknoppen door hun afgeronde vorm. "
Een effectief gebruik van cirkels in iconische menu-items op Azonmedia De servicespagina.
We komen op vele warme en niet-bedreigende manieren cirkels, ovalen en objecten met afgeronde randen tegen in culturen en omgevingen. Wolken, eieren, de zon en de maan in de natuur lijken allemaal rond met het blote oog. Smileygezichten, cakes, taarten, bochtige figuren zijn allemaal aangenaam voor de zintuigen.
Onze hersenen reageren goed op cirkels en bochten, terwijl ze objecten met harde randen zien als harder, meer gedefinieerd en met de potentie om een bedreiging te zijn.
Kringen en de gebruikerservaring
Cirkels zijn effectief in webontwerp om precies deze redenen.
Online gebruikers zijn notoir ongeduldig en omdat cirkels gemakkelijker worden waargenomen en begrepen, kost het minder tijd om de informatie die ze vertegenwoordigen te verwerken.
Mobiele gebruikers zijn nog ongeduldiger. Ze zijn ook bezig, vaak onderweg, multi-tasking en gebruiken een wijsvinger of duim om op hun handheld-apparaat te navigeren. Ze willen NU hun informatie. Met kringen kunnen mobiele gebruikers de informatie die ze zoeken efficiënter vinden.
Cirkels en duimen
Een andere manier waarop cirkels voordelig zijn in een mobiele eerste en responsieve ontwerpomgeving is hun geschiktheid als elementen in touchscreeninterfaces.
Aangezien smartphonetelefoons en tabletgebruikers met de vinger op hun vinger tikken, schuiven of de weg zoeken naar de informatie die ze zoeken, is het zinvol om cirkels te gebruiken om de gebruiker te leiden. Ze bootsen niet alleen de vingertopvorm na, we associëren cirkels en afgeronde hoeken met drukknoppen en onze hersenen verwerken snel de vereiste acties.
webontwikkelaar Oliver James Gosling
Wanneer u cirkels opneemt in een mobiele interface met touchscreen, ontwerpt u naar het kleinste scherm. Tekst of afbeeldingen in de cirkel moeten nog steeds gemakkelijk worden gelezen en de grootte moet ten minste de grootte van een vingertop behouden, of 44 pixels.
Cirkels en schermruimte
Het goede nieuws over het gebruik van cirkels in responsief ontwerp is dat CSS3 de coderingseisen aanzienlijk vereenvoudigt.
Het slechte nieuws is dat cirkels veel onroerend goed in beslag nemen en resulteren in meer open scherm.
Omdat de schermruimte op smartphones en tablets vrij klein kan zijn, hoe kun je dan cirkels introduceren zonder je zorgen te maken dat ze zo klein worden dat ze onmogelijk te lezen, tikken of klikken zijn?
Een eenvoudige mobiele interface
Het helpt om uw mobiele interface eenvoudig te houden. Aangezien het oog sowieso naar de cirkel wordt getrokken, heeft het geen zin om de rest van het scherm vol te graven met inhoud die de gebruiker zal missen.
Tenzij ze deel uitmaken van de koptekst of het logo, moet u ervoor zorgen dat de cirkel minimaal één of twee keer wordt gebruikt op elke pagina. Probeer een ronde zoekknop te gebruiken of gebruik deze voor uw call-to-action, zoals 'bel hier' of 'registreer u hier'.
Ontwerp zwichten maakt gebruik van cirkels en kleuren om de aandacht te vestigen op het logo, de portfolio en de tekst op de startpagina.
Achtergronden en deel knoppen
Zoals bij elk ontwerpelement, moet het gebruik van cirkels passen bij de inhoud, het product of de service, stijl en branding van de site. Het moet de gebruikerservaring verbeteren en de interface vereenvoudigen.
Als het gebruiken van een call-to-action niet geschikt is voor de site of als de navigatie en menu-items eenvoudig niet binnen een cirkel werken, overweeg dan om een cirkel op de achtergrond op te nemen. Gebruik een grotere cirkel op de achtergrond om het belangrijkste stuk inhoud op de pagina te bekijken (semi-transparant achter de tekst).
Vergeet niet, de inhoud is waar de mobiele gebruiker voor is in de eerste plaats. Stimuleer gebruikersbetrokkenheid door ronde sociale media-deelknoppen te kiezen in plaats van de rechthoekige opties.
Circulaire pictogrammen in responsief ontwerp
Een van de meer populaire manieren om cirkels in websites op te nemen is als pictogrammen in een menu. Dit past goed bij het responsieve ontwerp, omdat het langdurige en / of verwarrende tekst vervangt door een eenvoudiger beeld.
Buza maakt gebruik van cirkels om het verticale mobiele menu aan te vullen.
Een cirkelvormig pictogram neemt minder ruimte in beslag, waardoor er meer ruimte is voor inhoud. Het ziet er goed uit en de gebruiker verwerkt snel wat het weergeeft.
Ovalen of afgeronde rechthoeken
Misschien ben je er niet klaar voor om je armen om een grote oude cirkel te wikkelen. Dat is goed. Maar blijf niet bij harde randen.
Voeg een aantal afgeronde rechthoeken of ovalen toe aan uw responsieve ontwerptoolkit. De afgevlakte hoeken zullen het gemakkelijker maken om je te concentreren op de inhoud in de bochten, in plaats van je aandacht te vestigen op de buitenranden.
Laatste woord
Hoewel webontwerpers urenlang kunnen nadenken over de verdiensten van cirkels of rechthoeken met afgeronde hoeken versus scherpe randen, gaat het om de inhoud als het gaat om het behagen van de gebruiker met mobiel ontwerp. De gebruiker wil boeiende en nuttige inhoud gepresenteerd in een eenvoudige en gemakkelijk te vinden interface. Al het andere is secundair.
Hoewel responsief webontwerp probeert te reageren op de omgeving, moet het ook inspelen op de behoeften van de gebruiker. Gebruikers herkennen de vertrouwde vorm van de cirkel, nemen deze snel waar en kunnen eenvoudig het klikbare punt op het scherm vastleggen. Gebruik een eenvoudige cirkel in uw volgende responsieve ontwerpproject. Uw gebruikers zullen u er dankbaar voor zijn.
Gebruik je cirkels voor je call-to-actions? Speel je veilig met subtiel afgeronde rechthoeken? Laat het ons weten in de comments hieronder.
Uitgelichte afbeelding / thumbnail, cirkels afbeelding via Shutterstock