Sluta vara så fyrkantig
Som designprofessor är du bekant med (och eventuellt bidrar till) ökad användning av cirklar i alla designelement.
Från hemmet inredningsprodukter som rundramade speglar och tryck till handverktyg i hårdvaruaffären är cirklar överallt. Cirklar har till och med rullat sig in på våra webbplatser, som visas i rubriker, menyer och ibland smäller dab mitt på sidan.
Några designsidor har till och med skapat blogginlägg inklusive stora skärmdumpar av kreativ användning av cirklar i webbdesign. Men det har litet sagt om psykologin bakom att använda cirklar i design, eller hur användarens svar på cirklar effektivt kan införlivas i det växande fenomenet mobil användning.
Vi vet att vi gillar cirklar, men varför? Och hur kan en webbdesigner bäst använda cirklar för att optimera användarupplevelsen i responsiv design?
Cirklar och hjärnan
Kognition och uppfattning
Cirklar vädjar till människor eftersom de är enklare att förstå än former och föremål med hårda linjer.
Ögonet är draget till cirklar och informationen i, och de är snabbare och enklare för hjärnan att bearbeta än hårda kanter och rektanglar.
Schweizisk matematiker och fysiker Jurg Nonni, författare till Visual Perception, föreslår att avlägsna kanter gör det möjligt för oss att snabbare uppleva ett objekt. Enligt Nonni, "En rektangel med skarpa kanter tar verkligen lite mer kognitiv synlig ansträngning än till exempel en ellipsa av samma storlek. Vår "fovea-eye" är ännu snabbare vid inspelning av en cirkel. Kanter involverar ytterligare neuronal bildverktyg. Processen är därför bromsad. "
Bekanta och tröstande kurvor
Förutom hjärnans kognitiva förmåga att bearbeta cirklar snabbare än det kan bearbeta kvadrater och rektanglar, bearbetar vi välkänd information och föremål snabbare än de vi inte känner igen.
Alla känner igen cirklar, och människor lär sig att ansluta former med specifika handlingar och resultat, till exempel "STOP" -tecknet med universellt rött oktagon. Enligt Apples riktlinjer för mänskliga gränssnitt för OS X, "Människor lär sig att associera vissa beteenden med specifika element baserat på deras utseende. Till exempel känner folk igen tryckknappar med sin rundade form. "
En effektiv användning av cirklar i ikoniska menyalternativ på Azonmedia S servicesida.
Vi möter cirklar, ovalar och rundade kanter på många varma och icke-hotande sätt i olika kulturer och miljöer. Moln, ägg, sol och månen i naturen verkar alla avrunda till det blotta ögat. Smiley ansikten, kakor, pajer, kurviga figurer är alla tilltalande för sinnena.
Våra hjärnor svarar väl på cirklar och kurvor, samtidigt som vi ser hårda kantade objekt som hårdare, mer definierade och med potential att vara ett hot.
Cirklar och användarupplevelsen
Cirklar är effektiva i webbdesign för exakt dessa skäl.
Online-användare är notoriskt otåliga, och eftersom cirklar lättare uppfattas och förstås, tar det mindre tid att bearbeta den information de representerar.
Mobila användare är ännu mer otåliga. De är också upptagna, ofta på farten, multi-tasking, och använder ett pekfinger eller tumme för att navigera i sin handhållna enhet. De vill ha sin information nu. Cirklar hjälper mobila användare att hitta den information de söker efter mer effektivt.
Cirklar och tummar
Ett annat sätt cirklar är fördelaktiga i en mobil första och lyhörda designmiljö är deras lämplighet som element i pekskärmsgränssnitt.
Som pekskärms smartphones och surfplattformsanvändare trycker du på fingret, glider eller tummar sig till den information de söker, det är vettigt att använda cirklar för att styra användaren. De mimar inte bara fingertoppens form, vi associerar cirklar och rundade kanter med tryckknappar och våra hjärnor behandlar snabbt de nödvändiga åtgärderna.
webbutvecklare Oliver James Gosling
När du införlivar cirklar i ett mobilt gränssnitt för pekskärm, designar du den minsta skärmen. Text eller bilder i cirkeln måste fortfarande vara lättlästa och storleken måste förbli åtminstone en fingerspets eller 44 pixlar.
Cirklar och skärmutrymme
De goda nyheterna om att använda cirklar i responsiv design är att CSS3 förenklar kodningskraven mycket.
Den dåliga nyheten är att cirklar tar upp mycket fastigheter och resulterar i ett mer öppet skärmområde.
Eftersom skärmutrymmet på smartphones och surfplattor kan vara ganska litet, hur kan du införa cirklar utan att oroa dig för att de blir så små att de är omöjliga att läsa, knacka eller klicka?
Ett enkelt mobilt gränssnitt
Det hjälper till att hålla ditt mobila gränssnitt enkelt. När ögat är draget till cirkeln ändå är det ingen uppgift att klämma upp resten av skärmen med innehåll som användaren kommer att sakna.
Om inte de ingår i rubriken eller logotypen, använd cirkeln till minst en eller två på varje sida. Prova med att använda en cirkulär sökknapp, eller använd en för din uppmaning till handling som "ring här" eller "registrera dig här."
Gravitate Design använder cirklar och färg för att locka ögonen på logotypen, portföljen och texten på hemsidan.
Bakgrunder och dela knappar
Som med alla designelement måste användningen av cirklar passa till innehållet, produkten eller tjänsten, stilen och varumärkningen av webbplatsen. Det bör förbättra användarupplevelsen och förenkla gränssnittet.
Om användningen av ett samtal inte är lämplig för webbplatsen eller om navigations- och menyalternativen helt enkelt inte fungerar inom en cirkel, överväg att integrera en cirkel i bakgrunden. Använd en större cirkel i bakgrunden för att rita ögat till det viktigaste innehållet på sidan (halvtransparent bakom texten).
Kom ihåg att innehållet är vad mobilanvändaren är här för i första hand. Uppmuntra användarengagemang genom att välja runda sociala medier dela knappar i stället för de rektangulära alternativen.
Cirkulära ikoner i lyhörd design
Ett av de mer populära sätten att integrera cirklar i webbplatser är som ikoner i en meny. Detta passar bra design, eftersom den ersätter lång och / eller förvirrande text med en enklare bild.
Buza använder cirklar för att komplettera den vertikala mobilmenyn.
En cirkulär ikon tar mindre utrymme, vilket ger mer utrymme för innehåll. Det ser bra ut och användaren behandlar snabbt vad det står för.
Ovals eller rundade rektanglar
Kanske är du inte redo att sätta ihop armarna runt en stor gammal cirkel. Det är okej. Men håll inte fast med kanterna.
Lägg till några rundade rektanglar eller ovaler till din responsiva designverktyg. De släta hörnen gör det lättare att fokusera på innehållet i kurvorna, istället för att uppmärksamma ytterkanterna.
Slutord
Medan webdesigners kan spendera timmar som agoniserar över fördelarna med cirklar eller rundkantade rektanglar mot skarpa kanter, när det gäller att tilltala användaren med mobil design handlar det om innehållet. Användaren vill engagera och användbar innehåll presenteras i ett enkelt och lätt att hitta gränssnitt. Allt annat är sekundärt.
Även om lyhörd webbdesign försöker reagera på miljön, bör den också svara på användarens behov. Användare känner igen cirkelens välkända form, uppfattar den snabbt och kan enkelt peka på den klickbara punkten på skärmen. Använd en enkel cirkel i ditt nästa lyhörda designprojekt. Dina användare kommer tacka för det.
Använder du cirklar för dina uppmaningar? Spelar du det säkert med subtila avrundade rektanglar? Låt oss veta i kommentarerna nedan.