Share
Uno dei cambiamenti più importanti del web nel 2011 è stato il lancio della nuova interfaccia utente di Google su una gamma di prodotti. In questo articolo esaminerò il processo di pensiero dietro le decisioni di interfaccia utente di Google e stabiliremo cosa possiamo imparare dai loro metodi e principi.
Thumbnail di Alex Patrascu
La home page originale di Google ...
... il nuovo look aggiornato.
La missione di Google è quella di organizzare le informazioni del mondo e renderlo universalmente accessibile e utile.
È ovvio vedere che il web è cambiato drasticamente dai primi giorni di Google. Gli utenti vivono il Web in un modo molto diverso da quello di prima e lo visualizzano su una varietà di dispositivi diversi. Google ha apportato modifiche per riflettere questo. Sono state introdotte modifiche anche per unificare la vasta gamma di prodotti Google e riunirli in modo che l'utente abbia un'esperienza fluida mentre naviga tra i prodotti. Google spiega:
Il nostro obiettivo è offrirti un'esperienza online più uniforme e coerente, che funzioni indipendentemente dal prodotto Google che stai utilizzando o dal dispositivo su cui lo stai utilizzando.
La nuova esperienza introdotta da Google si basa su tre principi fondamentali di progettazione. Diamo un'occhiata a questi.
L'idea qui è quella di consentire all'utente di concentrarsi sull'attività o sul lavoro che si desidera eseguire rapidamente e facilmente. Ciò si ottiene rimuovendo il disordine inutile e portando in primo piano gli oggetti e gli strumenti che contano. Ciò si ottiene anche con semplici aggiunte come l'aggiunta di colori più audaci per le chiamate alle azioni o nascondendo alcuni elementi di navigazione quando non sono in uso.
Usando questi metodi l'interfaccia utente di Google è in grado di aiutare il suo utente a concentrarsi inconsciamente sul compito che sta cercando di realizzare, alleviando la frustrazione dalla sua esperienza utente.
Uno dei più grandi cambiamenti da quando Google ha iniziato è il modo in cui i suoi utenti accedono al web. Non usiamo più i prodotti Google sui nostri desktop, li stiamo attualmente utilizzando su una varietà di dispositivi, da smartphone e tablet a monitor e TV ad alta risoluzione. L'idea alla base dell'elasticità è quella di consentire agli utenti di vivere un'esperienza visiva senza interruzioni mentre passano da un dispositivo all'altro.
Sebbene le tecnologie utilizzate dietro Google e i suoi prodotti siano piuttosto complesse, non vogliono rappresentare questa complessità nel loro design. 'Senza sforzo' significa mantenere l'aspetto semplice, pulito e coerente.
Il nuovo marchio di Google si baserà su Trust, Beauty, Purity Technology e Innovation - Larry Page
Al centro della riprogettazione di Google c'è il nuovo Google Bar che sostituisce la vecchia barra nera orizzontale posta nella parte superiore dello schermo. Google ha capito che questo vecchio bar occupava un posto prezioso sui nostri schermi (30 px per la precisione), quindi ha deciso di dargli un nuovo look per legarsi ai loro nuovi principi di design.
La nuova barra dei menu include il menu di Google, insieme alla ricerca e agli strumenti di Google Plus. Mantiene la barra di ricerca e la navigazione uguali su tutti i prodotti e consente di passare da un prodotto all'altro in modo semplice. Per cambiare un prodotto devi semplicemente scorrere il logo di google in cui ti verrà presentato un menu a discesa che ti consentirà di passare "agevolmente" tra Gmail, Documenti, Maps, YouTube e altri prodotti.
Eddie Kessler (Responsabile tecnico di Google) spiega
Unifica, semplifica e saluta la vecchia barra di navigazione!
Rendere la navigazione e la condivisione semplicissime per le persone è una parte fondamentale dei nostri sforzi per trasformare l'esperienza complessiva di Google, motivo per cui siamo molto entusiasti di questa riprogettazione.
A sinistra: un design del logo Google + di Alex Alex Patrascu A destra: mostra il menu e l'interfaccia di Google + Per analizzare ogni UI di prodotto di Google sarebbe un intero libro a sé stante, quindi a beneficio di questo articolo ho scelto di evidenziare un paio di prodotti più popolari di Google.
La riprogettazione di Google è coincisa con uno dei progetti web più discusso di quest'anno; Google +. Google + forse ha mostrato alcuni dei suoi nuovi principi di progettazione più di qualsiasi altro prodotto Google. Dopo l'anticipazione della sua versione, se qualche prodotto ha bisogno di invogliare gli utenti a Google, questo è l'unico. Dimostra magnificamente i loro ideali di design e per giorni dopo essermi unito mi sono trovato ipnotizzato dalla semplicità del suo design.
Il merito va in parte al membro del team UI / UX di Andy Hertzfeld che ha lavorato su Google Plus. Molte persone hanno tratto paragoni tra lo stile e le mele di Google, e questo probabilmente potrebbe essere dovuto al fatto che Andy, precedentemente impiegato da Apple negli anni '80, lavorasse al Progetto Macintosh. Parte del ruolo di Andy in questo progetto è stato lavorare a fianco di Joseph Smarr sul concetto di 'cerchi'.
Andy spiega l'idea dietro i cerchi:
L'idea di categorizzare le persone era abbastanza ovvia. Poi c'è stata l'idea centrale del curatore di circoli che stava cercando di renderlo divertente, coinvolgente, qualcosa che vorresti fare perché diventasse noioso. Quindi, volevamo premiare l'utente per averlo fatto, mettendo un sorriso sul loro volto e cercando di renderlo così piacevole che continuassero a farlo.
Google Plus è ora parte integrante della strategia generale di Google. Può essere trovato incorporato nella maggior parte dei prodotti di Google e il suo vantaggio è un solo pulsante anche nei risultati di ricerca. Google ci ha reso estremamente semplice condividere ciò che troviamo nei nostri risultati di ricerca. Significa che il termine "ricerca sociale" è ora più che mai attuale e sono fiducioso che la ricerca si sta dirigendo più in questa direzione. Google supporta questo affermando:
La Ricerca sociale di Google ti aiuta a scoprire contenuti pertinenti dalle tue connessioni sociali, un insieme di amici e contatti online. Il contenuto dei tuoi amici e conoscenti è a volte più rilevante e significativo per te rispetto al contenuto di qualsiasi persona a caso. Ad esempio, una recensione di un film online è utile, ma una recensione cinematografica del tuo migliore amico può essere ancora migliore.
Il nuovo aspetto di Gmail. Secondo quanto riportato dalle notizie della CBS, Gmail ha registrato un totale di 193,3 milioni di utenti attivi a partire da novembre 2010. Per mantenere gli utenti a bordo di Google, l'esperienza di Gmail è stata ottimizzata in linea con i loro principi di progettazione per migliorare l'esperienza dell'utente. Hanno fatto questo apportando le seguenti modifiche:
Le conversazioni in Gmail sono state completamente ridisegnate per consentire una lettura più semplice durante la navigazione attraverso i thread di posta elettronica. Le immagini del profilo sono state aggiunte alla conversazione, dando all'interfaccia la possibilità di aiutarti a partecipare alle conversazioni in modo più personale. Questo ti aiuta anche quando cerchi di tenere traccia di chi ha detto cosa. Togliendo molti elementi dall'interfaccia utente originale, i loro utenti hanno potuto concentrarsi sulla comunicazione con colleghi e amici.
La barra laterale di navigazione a sinistra è stata ridisegnata e ha la possibilità di personalizzarla. Puoi modificare la dimensione dell'area della chat in modo che sia grande o piccola come desideri oppure nasconderla completamente facendo clic sulla piccola icona nella parte in basso a sinistra della barra laterale. Come con tutti i nuovi prodotti, ora sei in grado di navigare all'interno dell'interfaccia di Google utilizzando la scheda o i tasti freccia, ancora una volta dando all'utente la libertà di navigare nel modo più conveniente per loro.
Questa immagine evidenzia la nuova funzionalità di ricerca avanzata di Gmails L'email è uno strumento importante per qualsiasi utente web. Tanto che in effetti tra noi inviamo circa 294 miliardi di e-mail ogni giorno. È imperativo che siamo in grado di trovare tutte le email che abbiamo sparse nella nostra casella di posta (so che ho circa 10.000+). Google ha fornito una mano che in questo modo supera la precedente ricerca standard. Gli utenti sono ora in grado di fare clic sul menu a discesa della ricerca che rivela un pannello di ricerca avanzato che ti consente di creare un filtro da qualsiasi ricerca in pochi clic.
Se ti piace o non ti piace il nuovo look di Google, non c'è dubbio che sia stato un successo. È stato un argomento di conversazione sul web negli ultimi mesi e ha guadagnato molti fan. Parte del suo successo potrebbe essere nel modo in cui Google ha apportato modifiche. Invece di scegliere di lanciare il nuovo look in una sola volta, hanno deciso di rilasciare le modifiche per fasi e di solito per prodotto. Nella scelta di questo metodo sono stati in grado di raccogliere i feedback degli utenti e decidere quali decisioni hanno funzionato e cosa è necessario rivalutare per la fase successiva.
Rilasciandolo per fasi ha anche altri vantaggi. Presentando le date di rilascio di ciascuna fase dell'interfaccia utente nel corso di diversi mesi, Google è in grado di circondare le modifiche dell'interfaccia utente con un sacco di hype sui media. Tutti, dalla BBC al New York Times, hanno scritto dei cambiamenti di Google, per non parlare dei numerosi tweet e commenti che sono stati pubblicati su vari siti riguardo alle modifiche. Ora che certamente non può essere male per gli affari!
Osservando gli esempi di colori sopra possiamo vedere che Google ha mantenuto la gamma di colori limitata. Usano il blu e il rosso per evidenziare le caratteristiche importanti che sono entrambe varianti cromatiche del logo originale di Google.
Illustrando alcuni dei nuovi pulsanti e icone di Google Come parte della loro nuova strategia di progettazione, Google ha introdotto un nuovo set di pulsanti su tutta la gamma. Questi pulsanti sono chiari, semplici, concisi e dimostrano abbastanza chiaramente il principio di progettazione di Google "messa a fuoco". Hanno usato una combinazione di HTML5 e CSS3 per crearli. Una scelta che può sorprendere tutti è che i pulsanti non sono in realtà pulsanti, né sono tag di ancoraggio, ma di fatto sono creati utilizzando div con un attributo di ruolo impostato su "pulsante". Questo è usato per indicare che un tag generico sta giocando il ruolo di un widget standard, come in questo caso un pulsante. Questo è utile per le persone che potrebbero accedere al sito tramite un dispositivo come uno screen reader.
Google ha utilizzato sfumature CSS3 sottili per aumentare i pulsanti e offrire loro quel tocco in più pop aggiungendo un'ombreggiatura sottile alla parte inferiore del pulsante al passaggio del mouse. I pulsanti sono generalmente raggruppati in 2 categorie 'stand alone' e 'left, middle, right'. Ogni categoria ha 2 dimensioni diverse "standard" e "grande". Scegliendo questi 4 stili in tutta la sua gamma, Google è in grado di offrire un'esperienza unica ai propri utenti.
Un fattore che incoraggia una buona esperienza utente in qualsiasi design è l'attrazione visiva. Google ha consentito ciò consentendo agli utenti di personalizzare la densità dello schermo su determinati prodotti. Questa opzione appare in GMail, Reader, Documenti e altre app pesanti per testo. La densità del display è suddivisa in tre preimpostazioni. Comodo, accogliente e compatto e questi si adattano a seconda della densità del display del tuo computer. Con le query sui media già popolari, sono sicuro che questo tipo di opzioni di densità dello schermo inizieranno ad apparire su una serie di altri prodotti web.
Avendo studiato i nuovi principi dell'interfaccia utente di Google piuttosto intensamente negli ultimi sei mesi, posso dirti cosa ho osservato e imparato dalla strategia che hanno implementato. Come uno dei più grandi marchi su Internet; hanno chiaramente compreso (sopra ogni altra cosa) che la semplicità e un'esperienza unificata sono la chiave.
La semplicità e un'esperienza unificata sono la chiave.
Mi ha anche insegnato personalmente a ridurre l'intensità su molti dei miei elementi dell'interfaccia utente. L'ombra esterna ha davvero bisogno di essere all'80% di opacità? Può essere abbassato un po 'fino al 20 - 30%? Come designer vogliamo che le persone notino lo sforzo extra a cui siamo andati aggiungendo quell'ombreggiatura o l'evidenziazione e alcune volte tendono a sovracompensare per questo facendolo risaltare. A volte rendendola più sottile, possiamo ottenere un effetto maggiore e più regolare, che è piacevole per gli occhi e viene notato altrettanto. Lo stesso principio può essere applicato a proprietà come il raggio del bordo, prova a ridurle dal solito 5 o 10px a 1, 2 o 3 pixel. Ovviamente questi trattamenti non dovrebbero essere applicati a tutti i progetti ma sicuramente fanno la differenza quando si sceglie un design "pulito".
Possiamo anche imparare che il web è in un posto molto diverso al giorno d'oggi, rispetto a come era una volta. Con la recente notizia che Internet Explorer aggiornerà automaticamente i suoi browser, ora possiamo iniziare a fare affidamento sulle più recenti tecnologie web per funzionare nella maggior parte dei browser. Google forse ha avuto un'idea di questo come non del loro nuovo design di prodotto funziona in qualsiasi cosa sotto Internet Explorer 8. Ora possiamo potenzialmente iniziare a progettare come vogliamo senza il numero di limitazioni del browser. Ora dovremmo riallineare il tempo risparmiato da questo nella creazione di compatibilità cross-device per altri dispositivi e risoluzioni dello schermo, per dare la massima esperienza utente.
Cosa ne pensi delle nuove modifiche all'interfaccia utente di Google sei un fan o le trovi così dolorose? Mi piacerebbe sentire i tuoi commenti su ciò che pensi.
Accentsconagua