Smetti di essere così quadrato
Come professionista del design, hai familiarità con (e possibilmente contribuisci a) il maggiore uso delle cerchie in tutti gli elementi del design.
Dagli oggetti di arredamento per la casa come specchietti rotondi e stampe agli utensili manuali nel negozio di ferramenta, i cerchi sono ovunque. Le cerchie si sono addirittura infiltrate nei nostri siti web, apparendo nelle intestazioni, nei menu e, a volte, nel bel mezzo della pagina.
Alcuni siti di design hanno persino creato post sul blog, tra cui grandi screenshot dell'uso creativo delle cerchie nel web design. Tuttavia, poco è stato detto sulla psicologia dietro l'uso di cerchi nel design, o su come la risposta dell'utente alle cerchie possa essere efficacemente incorporata nel crescente fenomeno dell'uso mobile.
Sappiamo che ci piacciono i cerchi, ma perché? E come può un web designer utilizzare al meglio le cerchie per ottimizzare l'esperienza utente nel design reattivo?
Cerchi e cervello
Cognizione e percezione
I cerchi attirano le persone perché sono più facili da capire delle forme e degli oggetti con linee dure.
L'occhio è attratto dai cerchi e dalle informazioni contenute all'interno, e sono più veloci e più facili da elaborare per il cervello rispetto ai rettangoli e ai quadrati a spigoli vivi.
Il matematico e fisico svizzero Jurg Nonni, autore di Visual Perception, suggerisce che rimuovere i bordi ci permette di percepire più rapidamente un oggetto. Secondo Nonni, "Un rettangolo con spigoli vivi richiede uno sforzo visivo cognitivo un po 'più visibile rispetto ad un'ellisse della stessa dimensione. Il nostro "fovea-eye" è ancora più veloce nel registrare un cerchio. I bordi implicano ulteriori strumenti di immagine neuronale. Il processo è quindi rallentato. "
Curve familiari e confortanti
Oltre alla capacità cognitiva del cervello di elaborare i cerchi più rapidamente di quanto possa elaborare quadrati e rettangoli, elaboriamo informazioni e oggetti familiari più velocemente di quelli che non riconosciamo.
Tutti riconoscono i cerchi e le persone imparano a connettere le forme con azioni e risultati specifici, come il segno "STOP" dell'ottagono rosso universale. Secondo le linee guida per l'interfaccia umana OS X di Apple, "Le persone imparano ad associare determinati comportamenti con elementi specifici in base al loro aspetto. Ad esempio, le persone riconoscono i pulsanti con la loro forma arrotondata. "
Un uso efficace delle cerchie nelle voci di menu iconici su Azonmedia La pagina dei servizi.
Incontriamo cerchi, ovali e oggetti con bordi arrotondati in molti modi caldi e non minacciosi tra culture e ambienti. Nubi, uova, il sole e la luna in natura appaiono tutti a occhio nudo. Faccine, torte, torte, figure sinuose sono piacevoli ai sensi.
I nostri cervelli rispondono bene a cerchi e curve, mentre percepiscono gli oggetti duri come quelli più duri, più definiti e potenzialmente pericolosi.
Cerchi e esperienza utente
I cerchi sono efficaci nel web design proprio per questi motivi.
Gli utenti online sono notoriamente impazienti, e poiché i cerchi sono più facilmente percepiti e compresi, ci vuole meno tempo per elaborare le informazioni che rappresentano.
Gli utenti mobili sono ancora più impazienti. Sono anche occupati, spesso in movimento, multi-tasking e utilizzando l'indice o il pollice per navigare nel dispositivo portatile. Vogliono le loro informazioni ORA. Le cerchie aiutano gli utenti mobili a individuare le informazioni che cercano in modo più efficiente.
Cerchi e pollici
Un altro modo in cui i cerchi sono utili in un ambiente di progettazione mobile e reattivo in primo luogo è la loro idoneità come elementi nelle interfacce touchscreen.
Poiché gli smartphone touchscreen e gli utenti di tablet si toccano, fanno scorrere o sfogliano le informazioni che cercano, è logico utilizzare i cerchi per indirizzare l'utente. Non solo imitano la forma del polpastrello, associamo cerchi e spigoli arrotondati con pulsanti e il nostro cervello elabora rapidamente le azioni richieste.
sviluppatore web Oliver James Gosling
Quando incorpori cerchi in un'interfaccia mobile touchscreen, progetta lo schermo più piccolo. Il testo o le immagini all'interno del cerchio devono ancora essere facilmente letti, e la dimensione deve rimanere almeno delle dimensioni di un polpastrello o di 44 pixel.
Cerchi e spazio sullo schermo
Le buone notizie sull'uso dei cerchi nel design reattivo è che CSS3 semplifica enormemente i requisiti di codifica.
La cattiva notizia è che i cerchi occupano molto spazio e danno luogo a un'area più aperta dello schermo.
Poiché lo spazio sullo schermo su smartphone e tablet può essere piuttosto ridotto, come puoi introdurre le cerchie senza preoccuparti che diventino così piccoli da essere impossibili da leggere, toccare o fare clic?
Una semplice interfaccia mobile
Aiuta a mantenere la tua interfaccia mobile semplice. Dato che l'occhio è attratto dal cerchio in ogni modo, non c'è motivo di ingombrare il resto dello schermo con il contenuto che l'utente mancherà.
A meno che non facciano parte dell'intestazione o del logo, mantieni l'uso della cerchia su almeno uno o due su ogni pagina. Prova a utilizzare un pulsante di ricerca circolare o utilizzane uno per la chiamata, ad esempio "chiama qui" o "registrati qui".
Gravitate Design utilizza cerchi e colori per attirare l'attenzione sul logo, il portfolio e il testo sulla home page.
Sfondi e pulsanti di condivisione
Come per qualsiasi elemento di design, l'uso delle cerchie deve adattarsi al contenuto, al prodotto o al servizio, allo stile e al marchio del sito. Dovrebbe migliorare l'esperienza dell'utente e semplificare l'interfaccia.
Se l'uso di un invito all'azione non è appropriato per il sito, o se la navigazione e le voci di menu non funzionano semplicemente all'interno di un cerchio, considera di incorporare un cerchio sullo sfondo. Utilizza un cerchio più grande sullo sfondo per attirare l'attenzione sul contenuto più importante della pagina (semitrasparente dietro al testo).
Ricorda, il contenuto è ciò che l'utente mobile è qui per il primo posto. Incoraggia il coinvolgimento degli utenti scegliendo i pulsanti di condivisione dei social media attorno alle opzioni rettangolari.
Icone circolari in design reattivo
Uno dei modi più popolari per incorporare cerchi in siti Web è come icone in un menu. Questo si adatta bene al design reattivo, in quanto sostituisce un testo lungo e / o confuso con un'immagine più semplice.
Buza usa cerchi per completare il menu mobile verticale.
Un'icona circolare occupa meno spazio, consentendo più spazio per i contenuti. Sembra buono e l'utente elabora rapidamente ciò che rappresenta.
Ovali o rettangoli arrotondati
Forse non sei pronto per avvolgere le tue braccia attorno a un grande cerchio vecchio. Va bene. Ma non attaccare con bordi duri.
Aggiungi alcuni rettangoli o ovali arrotondati al tuo toolkit di design reattivo. Gli angoli smussati renderanno più semplice concentrarsi sul contenuto all'interno delle curve, invece di attirare l'attenzione sui bordi esterni.
Parola finale
Mentre i web designer possono passare ore agonizzando sui meriti di cerchi o rettangoli a spigoli vivi contro i bordi taglienti, quando si tratta di gradire l'utente con il design mobile, tutto dipende dal contenuto. L'utente vuole contenuti accattivanti e utili presentati in un'interfaccia semplice e facile da trovare. Tutto il resto è secondario.
Sebbene il web design reattivo cerchi di rispondere all'ambiente, dovrebbe anche rispondere alle esigenze dell'utente. Gli utenti riconoscono la forma familiare del cerchio, la percepiscono rapidamente e possono facilmente individuare il punto cliccabile sullo schermo. Usa un cerchio semplice nel tuo prossimo progetto di design reattivo. I tuoi utenti ti ringrazieranno per questo.
Usi le cerchie per il tuo invito all'azione? Giochi sul sicuro con rettangoli leggermente arrotondati? Fateci sapere nei commenti qui sotto.
Immagine in primo piano / miniatura, immagine di cerchi via Shutterstock