Stop med at være så firkantet
Som designmedarbejder er du bekendt med (og muligvis bidrager til) den øgede brug af cirkler i alle elementer af design.
Fra hjemmet indretningsprodukter som rundrammede spejle og udskriver til håndværktøj i hardwareforretningen er cirkler overalt. Cirkler har endda rullet sig ind på vores hjemmesider, der vises i overskrifter, menuer og sommetider smager dab midt på siden.
Et par designsites har endda skabt blogindlæg, herunder store skærmbilleder af den kreative brug af cirkler i webdesign. Men der er lidt sagt om psykologien bag brug af cirkler i design, eller hvordan brugerens svar på cirkler effektivt kan indarbejdes i det voksende fænomen for mobil brug.
Vi ved, at vi kan lide cirkler, men hvorfor? Og hvordan kan en webdesigner bedst bruge cirkler til at optimere brugeroplevelsen i responsivt design?
Cirkler og hjernen
Kognition og opfattelse
Cirkler appellerer til folk, fordi de er lettere at forstå end former og objekter med hårde linjer.
Øjet er trukket til cirkler og oplysningerne i, og de er hurtigere og lettere for hjernen at behandle end hårdkornede firkanter og rektangler.
Schweizisk matematiker og fysiker Jurg Nonni, forfatter af Visual Perception, foreslår at fjerne kanter gør det muligt for os at opdage et objekt hurtigere. Ifølge Nonni, "Et rektangel med skarpe kanter tager faktisk en smule mere kognitiv synlig indsats end for eksempel en ellipse af samme størrelse. Vores "fovea-eye" er endnu hurtigere ved at optage en cirkel. Kanter involverer yderligere neuronale billedværktøjer. Processen er derfor bremset. "
Kendte og trøstende kurver
Ud over hjernens kognitive evne til at behandle cirkler hurtigere, end det kan behandle kvadrater og rektangler, behandler vi kendte oplysninger og genstande hurtigere end dem, vi ikke genkender.
Alle genkender cirkler, og folk lærer at forbinde former med specifikke handlinger og resultater, som f.eks. Det universelle røde ottekants "STOP" tegn. Ifølge Apples retningslinjer for OS X Human Interface, "Folk lærer at forbinde visse adfærd med specifikke elementer baseret på deres udseende. For eksempel genkender folk trykknapper ved deres afrundede form. "
En effektiv brug af cirkler i ikoniske menupunkter på Azonmedia S serviceside.
Vi støder på cirkler, ovaler og afrundede genstande på mange varme og ikke-truende måder på tværs af kulturer og miljøer. Skyer, æg, solen og månen i naturen ser alle ud til det blotte øje. Smiley ansigter, kager, tærter, kurvede figurer er alle behagelige for sanserne.
Vores hjerner reagerer godt på cirkler og kurver, mens vi opfatter hårde kantede objekter som hårdere, mere definerede og med potentiale til at være en trussel.
Cirkler og brugeroplevelsen
Cirkler er effektive i webdesign af netop disse grunde.
Online brugere er notorisk utålmodige, og fordi cirkler lettere opfattes og forstås, tager det mindre tid at behandle de oplysninger, de repræsenterer.
Mobilbrugere er endnu mere utålmodige. De er også optaget, ofte på farten, multi-tasking, og bruger en pegefinger eller tommelfinger til at navigere deres håndholdte enhed. De ønsker deres oplysninger nu. Cirkler hjælper mobilbrugere med at finde de oplysninger, de søger efter mere effektivt.
Cirkler og tommelfingre
En anden måde cirkler er gavnlige i et mobilt første og lydhørt designmiljø er deres egnethed som elementer i touchscreen-grænseflader.
Når touchscreen-smartphones og tabletbrugere bruger fingeraftryk, glider eller tommelfinger deres vej til de oplysninger, de søger, er det fornuftigt at bruge cirkler til at lede brugeren. Ikke alene efterligner de fingerspidsformen, vi forbinder cirkler og afrundede kanter med trykknapper, og vores hjerner behandler hurtigt de nødvendige handlinger.
web-udvikler Oliver James Gosling
Når du indarbejder cirkler i en touchscreen-mobilgrænseflade, skal du designe til den mindste skærm. Tekst eller billeder i cirklen skal stadig være lette at læse, og størrelsen skal forblive mindst en fingers størrelse eller 44 pixels.
Cirkler og skærmrum
Den gode nyhed om at bruge cirkler i responsivt design er, at CSS3 forenkler kodningskravene meget.
Den dårlige nyhed er, at cirkler tager meget fast ejendom og resulterer i mere åbent skærmområde.
Da skærmrummet på smartphones og tablets kan være ret lille, hvordan kan du introducere cirkler uden at bekymre dig om at de bliver så små, at de er umulige at læse, trykke eller klikke?
En simpel mobil grænseflade
Det hjælper med at holde din mobil grænseflade enkel. Som øjet er trukket til cirklen alligevel, er der ingen mening i cluttering op resten af skærmen med indhold brugeren vil savne.
Medmindre de er en del af overskriften eller logoet, skal du bruge cirkel til mindst en eller to på hver side. Prøv at bruge en cirkulær søgeknap, eller brug en til dit opkald til handling som "ring her" eller "tilmeld dig her."
Gravitate Design bruger cirkler og farver til at tiltrække øjet til logoet, porteføljen og teksten på hjemmesiden.
Baggrunde og deleknapper
Som med ethvert designelement skal brugen af cirkler passe til indhold, produkt eller service, stil og branding af webstedet. Det bør forbedre brugeroplevelsen og forenkle grænsefladen.
Hvis brug af en opfordring til handling ikke er relevant for webstedet, eller hvis navigations- og menupunkterne simpelthen ikke fungerer inden for en cirkel, skal du overveje at inkorporere en cirkel i baggrunden. Brug en større cirkel i baggrunden for at trække øjet til det vigtigste indholdstykke på siden (halvt transparent bag teksten).
Husk, indholdet er, hvad mobilbrugeren er her for i første omgang. Opmuntre brugerengagement ved at vælge runde sociale medier deleknapper i stedet for de rektangulære muligheder.
Cirkulære ikoner i lydhør design
En af de mere populære måder at indarbejde cirkler på i hjemmesider er som ikoner i en menu. Dette passer til lydhør design, da det erstatter langvarig og / eller forvirrende tekst med et enklere billede.
Buza bruger cirkler til at supplere den vertikale mobilmenu.
Et cirkulært ikon tager mindre plads, hvilket giver mere plads til indhold. Det ser godt ud, og brugeren behandler hurtigt, hvad det repræsenterer.
Ovaler eller afrundede rektangler
Måske er du ikke klar til at pakke dine arme rundt om en stor gammel cirkel. Det er okay. Men hold ikke fast med hårde kanter.
Tilføj nogle afrundede rektangler eller ovaler til dit lydhørste designværktøj. De glatte hjørner gør det nemmere at fokusere på indholdet inden for kurverne, i stedet for at henlede opmærksomheden på yderkanterne.
Slutord
Mens webdesignere kan bruge timer, der agoniserer over fordelene ved cirkler eller rundkantede rektangler versus skarpe kanter, når det kommer til at glæde brugeren med mobildesign, handler det hele om indholdet. Brugeren ønsker engagerende og nyttigt indhold præsenteret i en enkel og let at finde interface. Alt andet er sekundært.
Selvom lydhurtigt webdesign søger at reagere på miljøet, bør det også svare på brugernes behov. Brugere genkender cirkelens velkendte form, opfatter den hurtigt og kan nemt pege det klikbare punkt på skærmen. Brug en simpel cirkel i dit næste responsive design projekt. Dine brugere vil takke for det.
Bruger du cirkler til dine opkald til handlinger? Spiller du det sikkert med subtilt afrundede rektangler? Lad os vide i kommentarerne nedenfor.
Fremhævet billede / miniaturebillede, cirkler billede via Shutterstock