Som design profesjonell, er du kjent med (og muligens bidrar til) den økte bruken av kretser i alle elementer av design.

Hjemmeinnredningsprodukter som rundrammede speil og utskrifter til håndverktøy på maskinvarebutikken, er sirkler overalt. Sirkler har til og med rullet seg inn i våre nettsider, som vises i overskrifter, menyer og noen ganger smekker dab midt på siden.

Noen designområder har til og med opprettet blogginnlegg, inkludert flotte skjermbilder av kreativ bruk av kretser i webdesign. Det er imidlertid lite sagt om psykologien bak bruk av sirkler i design, eller hvordan brukerens respons på sirkler effektivt kan inkorporeres i det voksende fenomenet mobil bruk.

Vi vet at vi liker sirkler, men hvorfor? Og hvordan kan en webdesigner best bruke sirkler for å optimalisere brukeropplevelsen i responsiv design?

Sirkler og hjernen

Kognisjon og oppfatning

Sirkler appellerer til folk fordi de er lettere å forstå enn former og objekter med harde linjer.

Øyen er trukket til sirkler og informasjonen i, og de er raskere og enklere for hjernen å bearbeide enn hardkanterte firkanter og rektangler.

Sveitsisk matematiker og fysiker Jurg Nonni, forfatter av Visual Perception, antyder at fjerning av kanter gjør det mulig for oss å oppdage et objekt raskere. Ifølge Nonni, "Et rektangel med skarpe kanter tar faktisk litt mer kognitiv synlig innsats enn for eksempel en ellipse av samme størrelse. Vår "fovea-eye" er enda raskere når du registrerer en sirkel. Kanter involverer ekstra neuronal bildeverktøy. Prosessen er derfor bremset. "

Kjente og trøstende kurver

I tillegg til hjernens kognitive evne til å behandle sirkler raskere enn det kan behandle kvadrater og rektangler, behandler vi kjent informasjon og objekter raskere enn de vi ikke gjenkjenner.

Alle gjenkjenner sirkler, og folk lærer å koble sammen former med spesifikke handlinger og resultater, for eksempel "STOP" -skiltet med universal rødt ottekant. Ifølge Apples retningslinjer for OS X Human Interface, "Folk lærer å knytte bestemte oppføringer med bestemte elementer basert på deres utseende. For eksempel gjenkjenner folk trykknappene med sin avrundede form. "

Azonmedia

En effektiv bruk av sirkler i ikoniske menyelementer på Azonmedia S tjenester side.

Vi møter sirkler, ovaler og avrundede gjenstander på mange varme og ikke-truende måter på tvers av kulturer og miljøer. Skyer, egg, sol og månen i naturen ser alle ut til det blotte øye. Smiley ansikter, kaker, paier, svinete figurer er alle gledelig for sansene.

Hjernene våre reagerer godt på sirkler og kurver, mens vi oppfatter hardrevne objekter som tøffere, mer definerte og potensielt å være en trussel.

Sirkler og brukeropplevelsen

Sirkler er effektive i webdesign for nettopp disse grunnene.

Internett-brukere er notorisk utålmodige, og fordi sirkler blir lettere oppfattet og forstått, tar det mindre tid å behandle informasjonen de representerer.

Mobilbrukere er enda mer utålmodige. De er også opptatt, ofte på farten, multi-tasking, og bruker en pekefinger eller tommel for å navigere i håndholdte enheter. De vil ha informasjonen NÅ. Sirkler hjelper mobilbrukere til å finne frem til informasjonen de søker etter mer effektivt.

Sirkler og tommel

En annen måte sirkler er fordelaktig i et mobilt første og lydhørt designmiljø er deres egnethet som elementer i touchscreen-grensesnitt.

Som berøringsskjerm-smarttelefoner og nettbrettbrukere trykker du på fingeren, skyver eller tommel seg til informasjonen de søker, og det er fornuftig å bruke sirkler for å lede brukeren. Ikke bare de etterligner fingertuppformen, vi forbinder sirkler og avrundede kanter med trykknapper og hjernen vår behandler raskt de nødvendige tiltakene.

Gosling

webutvikler Oliver James Gosling

Når du innlemmer sirkler til et berøringsskjerm-mobilgrensesnitt, kan du designe til den minste skjermen. Tekst eller bilder i sirkelen må fortsatt være enkle å lese, og størrelsen må forbli minst en fingertip, eller 44 piksler.

Sirkler og skjermrom

Den gode nyheten om bruk av sirkler i responsiv design er at CSS3 forenkler kodingskravene sterkt.

Den dårlige nyheten er at sirkler tar opp mye fast eiendom, og resulterer i et mer åpent skjermområde.

Siden skjermrommet på smarttelefoner og nettbrett kan være ganske lite, hvordan kan du introdusere sirkler uten å bekymre deg for at de blir så små at de er umulige å lese, trykke eller klikk?

Et enkelt mobilt grensesnitt

Det bidrar til å holde mobilgrensesnittet enkelt. Som øyet er trukket til sirkelen uansett, er det ikke noe poeng i cluttering opp resten av skjermen med innhold som brukeren vil savne.

Med mindre de er en del av overskriften eller logoen, må du bruke sirkelen til minst ett eller to på hver side. Prøv å bruke en sirkulær søkeknapp, eller bruk en til din anrop til handling som "ring her" eller "registrer deg her."

Gravitate

Gravitate Design bruker sirkler og farger for å tiltrekke seg øynene til logoen, porteføljen og teksten på hjemmesiden.

Bakgrunn og delingsknapper

Som med ethvert designelement, må bruken av sirkler passe til innhold, produkt eller tjeneste, stil og merkevarebygging av nettstedet. Det bør forbedre brukeropplevelsen og forenkle grensesnittet.

Hvis bruk av en handling ikke er hensiktsmessig for nettstedet, eller hvis navigasjons- og menyelementene bare ikke fungerer innenfor en sirkel, bør du vurdere å inkludere en sirkel i bakgrunnen. Bruk en større sirkel i bakgrunnen for å trekke øye til det viktigste innholdet på siden (halvtransparent bak teksten).

Husk at innholdet er det mobilbrukeren er her for i utgangspunktet. Oppfordre brukerengasjement ved å velge runde sosiale medier-deleknapper i stedet for de rektangulære alternativene.

Sirkulære ikoner i responsiv design

En av de mest populære måtene å inkludere sirkler til nettsteder er som ikoner i en meny. Dette passer godt med design, vel som det erstatter lang og / eller forvirrende tekst med et enklere bilde.

Buza

Buza bruker sirkler for å utfylle den vertikale mobilmenyen.

Et sirkulært ikon tar mindre plass, noe som gir mer plass til innhold. Det ser bra ut og brukeren behandler raskt hva det representerer.

Ovals eller avrundede rektangler

Kanskje du ikke er klar til å vikle armene rundt en stor gammel sirkel. Det er ok. Men hold deg ikke i hardkanter.

Legg til noen avrundede rektangler eller ovaler til ditt responsive designverktøy. De glatte hjørner vil gjøre det lettere å fokusere på innholdet i kurvene, i stedet for å trekke oppmerksomheten på ytre kanter.

Endelig ord

Mens webdesignere kan tilbringe timer som plager seg over verdien av sirkler eller rundkantede rektangler mot skarpe kanter, når det gjelder å tilfredsstille brukeren med mobil design, handler det alt om innholdet. Brukeren ønsker engasjerende og nyttig innhold presentert i et enkelt og lett å finne grensesnitt. Alt annet er sekundært.

Selv om responsiv webdesign søker å svare på miljøet, bør det også svare på brukerens behov. Brukerne gjenkjenner sirkelens kjente form, oppfatter det raskt, og kan enkelt peke det klikkbare punktet på skjermen. Bruk en enkel sirkel i ditt neste responsive designprosjekt. Brukerne dine vil takke for det.

Bruker du sirkler for samtalene dine? Spiller du det trygt med subtilt avrundede rektangler? Gi oss beskjed i kommentarene nedenfor.

Utvalgt bilde / miniatyrbilde, sirkler bilde via Shutterstock