Ieri Google ha lanciato una massiccia riprogettazione del proprio social network, Google+. Non si limitavano a mescolare oggetti, ma ridefinivano completamente l'intera esperienza visiva. Un aggiornamento così importante merita un'edizione speciale delle nostre serie sulla critica del web design.
Lascia che gli altri parlino di noiose vecchie liste di caratteristiche, unisciti a noi mentre saltiamo dentro e diamo un'occhiata in giro per vedere cosa c'è di meglio e cosa c'è di peggio dal punto di vista di un designer. Scopriremo ogni parte dell'interfaccia e vedremo se c'è qualcosa da imparare.
Se desideri inviare il tuo sito web in una futura Critica del design, ci vogliono solo pochi minuti. Facciamo pagare $ 49 per criticare il tuo design - molto meno di quanto paghi per un consulente per dare un'occhiata al tuo sito! Puoi saperne di più qui.
Il vecchio Google+
Prima di immergerci nel nuovo design, diamo un'occhiata alla versione originale di Google+, mostrata di seguito.
Come puoi vedere, è un'esperienza piuttosto scarsa con molti spazi bianchi. Il layout organizza il contenuto in tre colonne con una barra orizzontale in alto per la ricerca, l'aggiunta di foto, la visualizzazione delle tue cerchie, ecc. Il layout qui è in realtà abbastanza simile al design attuale di Facebook.
La sensazione generale è pulita e semplice, ma anche un po 'fredda e impersonale. Ciò ha reso il sito facile da raccogliere e utilizzare, ma forse non ha aiutato molto il concetto di rendere la pagina il proprio hub di comunicazione personale.
Il nuovo Google+
Il nuovo Google+ riduce drasticamente lo spazio bianco e i sentimenti di scarsità. In confronto, l'interfaccia sembra caricata con funzionalità e pulsanti. Hanno mantenuto la forte personalità bianca ma hanno completato questo con una sfumatura di grigio.
Questo può sembrare un cambiamento banale, ma in realtà è un tentativo molto intenzionale di creare una forte gerarchia visiva sulla pagina. Dove la vecchia pagina era un mare di bianco con una singola area di grigio nella parte superiore, questa pagina utilizza questi due colori per distinguere chiaramente le parti primarie e secondarie del contenuto. I tuoi occhi fluttueranno intorno alla pagina, dando un significato chiave alle parti più leggere dell'interfaccia.
disposizione
Questa volta il layout è molto più complicato. È una versione modificata del vecchio layout a tre colonne con un po 'di nidificazione. C'è ancora un'ampia sezione principale fiancheggiata da due strette barre laterali, ma quella sezione principale ora è divisa in due forti sotto-colonne. Tutto il contenuto della pagina ha una posizione fissa, scorre solo l'area del contenuto principale.
Se spogliamo tutto e guardiamo le ossa della pagina, vediamo un wireframe piuttosto complesso.
Uno dei cambiamenti concettuali più significativi che si sono verificati è che il vecchio layout conteneva i vari cerchi amici in una striscia verticale sul lato sinistro e le icone di navigazione nella parte superiore, mentre il nuovo layout colloca la navigazione in una striscia verticale di icone lungo il lato sinistro e le tue cerchie in una barra orizzontale nella parte superiore.
Questo modello di navigazione lato sinistro basato su icone è qualcosa che è diventato estremamente popolare nella progettazione dell'interfaccia utente di Mac e stiamo iniziando a vederlo specchiato nelle interfacce web. Uno dei più importanti sostenitori di questo formato è stato Twitter per Mac (in precedenza Tweetie), che ha generato una serie di interfacce simili in app come Reeder, Sparrow e Raven.
La nuova pagina Google+ viene fornita con un vocabolario da imparare. La striscia sul lato sinistro è il? Nastro? che contiene varie? applicazioni.? La scatola del contenuto principale è la? Scheda? e l'area di scorrimento al di sotto di ogni post con commenti, +1, ecc. è il cassetto delle attività.
Problemi di allineamento
Il nuovo layout fa molto per rendere Google+ un 'applicazione più ricca di funzionalità e fa sicuramente un buon uso del contrasto per evidenziare le parti importanti della pagina. Non ho davvero alcun problema con lo schema generale del layout, ma non posso fare a meno di notare alcuni problemi di allineamento che ritengo riducano l'estetica.
Per i principianti, la casella del contenuto principale e il pulsante di ritrovo si trovano entro un paio di pixel di essere perfettamente allineati lungo i loro tratti in alto. Sfortunatamente, per un nitpicker come me, un paio di pixel si sentono a un miglio di distanza. Ci sono alcuni capricci di design che mi infastidiscono più velocemente di due cose che sono quasi allineati. Per saperne di più su questo argomento, controlla? Perché è quasi una parola sporca nel design.?
L'effetto è ancora peggiore se fai un passo indietro e guarda tutti e quattro gli elementi in quest'area. L'indirizzo email dell'utente, la casella del contenuto primario, la casella di ritrovo e l'area di notifica si estendono tutti a intervalli casuali e sembrano non avere alcuna logica dietro il loro posizionamento.
Questo esempio non è un caso isolato, ci sono alcuni altri casi in cui gli oggetti appena manca un allineamento verticale o orizzontale. Scopri in che modo il logo di Google+ sotto è spostato in modo maldestro rispetto alla linea verticale forte stabilita dalla navigazione in basso.
Icon Design: ulteriormente da semplice
Storicamente, Google è sempre stato conosciuto per la sua totale mancanza di design. Ogni prodotto che usciva sembrava essere la soluzione più semplice che si potesse immaginare. L'immagine del marchio Google rappresentava un rifiuto totale di seguire lo stile visivo del web 2.0 lucido e sfarzoso, popolare nei primi anni 2000, in favore di lasciare che il contenuto parlasse da sé.
Negli ultimi anni, Google ha iniziato a prendere le distanze da queste idee mentre i suoi prodotti mostrano una quantità sottile ma sempre crescente di complessità e dettagli di progettazione. Le icone nel nuovo Google+ servono come esempio perfetto di questa nozione.
Si noti come le forme astratte semplici e i colori solidi abbiano lasciato il posto a un'immagine più coesa di una casa, che contiene tratti e sfumature sottili.
Ripetizione degli effetti al passaggio del mouse
Mentre siamo sul tema delle icone, diamo una rapida occhiata ad alcuni degli aspetti minori dell'interazione del sito, ovvero gli effetti al passaggio del mouse. Il tema generale qui è che le icone sono grigie e contrastano molto poco con lo sfondo. Quindi, al passaggio del mouse, l'icona diventa a colori. Puoi vederlo in azione sulla barra laterale:
La ripetizione è uno dei tuoi strumenti più forti come designer e Google lo sta brandendo bene qui. Lo stesso effetto da grigio a colore viene ripetuto in un paio di altri punti della pagina.
Tuttavia, sono un po 'incoerenti con questo effetto. Ci sono alcuni punti in cui penso che sarebbe stato opportuno continuare la ripetizione, ma hanno scelto di andare con un altro effetto casuale. Nell'esempio seguente, le icone diventano forme di pulsanti al passaggio del mouse.
Nuova barra laterale
A destra della sezione dei contenuti principali, c'è una nuova barra laterale con varie funzionalità progettate per aiutarti a ottenere il massimo da Google+. Si noti che questo è un altro posto in cui vediamo il colore sul trucco hover.
Questa area è molto ben progettata con ogni sezione chiaramente organizzata e distinta. È interessante vedere che Google ha raccolto un'idea da Twitter sotto forma di un elenco di argomenti di tendenza. Puoi vedere che gli utenti hanno già adottato la sintassi dell'hashtag, un affascinante esempio di come trasferiamo automaticamente i nostri comportamenti sui social network indipendentemente dal fatto che gli sviluppatori tengano conto di quel comportamento o meno.
È sempre importante sia anticipare che osservare il comportamento della propria base di utenti e considerare azioni che sembrano gravitare verso piuttosto che tentare di cambiarle. Ciò renderà la tua piattaforma molto più intuitiva e facile da adottare.
Profilo
Prendendo una pagina dal nuovo playbook timeline di Facebook (e forse Path), il nuovo profilo Google+ consente non solo un'immagine avatar principale ma un'immagine di copertina? (lo stesso termine usato da Facebook).
La parte che si distingue chiaramente da Facebook è la foto del profilo innegabilmente enorme, che si trova sul lato destro invece che a sinistra. Mostrate di seguito a dimensioni reali, queste immagini vengono visualizzate ad un enorme 250px per 250px, che non è sicuramente coincidente esattamente con le doppie immagini del profilo quadrato 125px di Facebook.
Una cosa che trovo interessante è il fatto che l'immagine di copertina effettivamente esce dalla scatola dei contenuti principale. Di solito lo apprezzo quando i designer intenzionalmente tirano fuori un inaspettato trucco come questo, ma ad essere onesti, lo trovo abbastanza distraente qui. Non appena viene caricata una pagina del profilo, i miei occhi saltano dritti verso la strana sovrapposizione.
Qual è il verdetto?
A partire dal mese scorso, Google+ avrebbe superato i 100 milioni di marchi per utenti attivi. Nessuno può definirlo un numero limitato, soprattutto considerando che Instagram ha appena prelevato un miliardo di dollari da Facebook per la sua piattaforma e 30 milioni di utenti.
Inoltre, se consideri che Twitter abbia solo 140 milioni di utenti attivi, sembra che Google+ stia rapidamente puntando allo slot numero due nei social media. Tuttavia, questo non è abbastanza per avvicinarsi a rivaleggiare con la base di utenti attivi di Facebook, che è da qualche parte nella gamma di 800 milioni.
Il nuovo design mostra che Google non ha intenzione di abbandonare questo progetto come ne hanno tanti altri in passato. Stanno sicuramente cercando di creare un'esperienza più piacevole per attirarti e farti tornare indietro. La domanda è, funzionerà?
Per rispondere a questo, dobbiamo speculare su cosa trattiene le persone dall'adozione di Google+. La risposta ovvia è che Google+ si sente un po 'ridondante quando si dispone già di un account Facebook, ancora di più se si è attivi sia su Facebook che su Twitter. Un'altra possibilità è che mentre il vecchio Google+ non era certamente brutto, sembrava forse un po 'sterile e privo di personalità.
Possibili obiettivi dietro il nuovo design
Da questo possiamo azzardare un'ipotesi per almeno due possibili obiettivi dietro la riprogettazione. Il primo sarebbe quello di differenziare ulteriormente Google+ da altri social network. Cercare di affermare che sono semplicemente migliori di Facebook nel suo stesso gioco non è l'opzione migliore, i ragazzi di Google devono stabilire una pietra miliare concettuale chiaramente unica per cui le persone dovrebbero venire al loro sito. Ad esempio, Twitter ha fatto un ottimo lavoro per evitare di replicare la funzionalità di Facebook e di stare in piedi non come un'alternativa ma come un proprio prodotto distinto.
Il secondo obiettivo sarebbe quello di ridurre la sterilità e iniziare a trasformare Google+ in un luogo amichevole e accogliente, facile da navigare e persino divertente da usare.
Hanno incontrato questi obiettivi?
Se analizziamo il design in termini di questi obiettivi, possiamo valutare meglio se è stato un successo. Questo esercizio ci fornisce punti chiari da confrontare piuttosto che accecare ciecamente nell'oscurità nel tentativo di trovare ciò che funziona e cosa no.
Per quanto riguarda il primo obiettivo, Google ha compiuto alcuni progressi in alcune aree e forse si è ritirato un po 'in altre. Complessivamente, il nuovo layout rappresenta un ulteriore salto da Facebook rispetto a quello precedente. A prima vista, un utente fedele di entrambi non si scamberebbe mai l'uno per l'altro, il che è una buona cosa.
Inoltre, piccoli tocchi come posizionare i filtri del cerchio lungo la parte superiore e continuare a dare risalto agli hangout assicurano che le poche innovazioni di Google siano al centro e al centro. Questo progresso è in contrasto con altre aree come la nuova immagine di copertina, che effettivamente fanno sentire il social network Di Più come un clone di Facebook, non meno. Mi sarebbe piaciuto vederli mostrare un pensiero unico in quest'area piuttosto che prendere in prestito il nuovo formato di Facebook.
Il secondo obiettivo sembra essere stato una delle principali preoccupazioni nell'aggiornamento del design. Il nuovo Google+ crea un ambiente più invitante.Anche se è forse sul punto di essere ingombra, soprattutto se confrontato con la vecchia versione, sembra un servizio più solido con tutte le cose che stanno accadendo nella tua home page.
C'è molta enfasi sui volti. Inizia con la tua nuova enorme immagine del profilo e prosegue attraverso la home page dove vedi una grande barra laterale della chat piena di volti amichevoli oltre a suggerimenti per le persone che potresti conoscere e agli utenti che potrebbero interessarti. Google vuole che tu faccia amicizie, per essere tirato dentro l'esperienza abbastanza da non vederlo quando non ci sei. Più amici significa più interazioni, il che significa più motivi per tornare.
Cosa pensi?
Google+ mi è sembrato essere fuori dai riflettori negli ultimi mesi. Tuttavia, questa percezione era apparentemente viziata come in realtà stavano salendo tranquillamente ma costantemente i grafici con un numero impressionante di utenti giornalieri attivi. Indipendentemente da ciò, anche se stavano iniziando a svanire nell'interesse pubblico, il nuovo design è stato programmato perfettamente per far sì che tutto il web ne parlasse ancora una volta. Anche se questa fosse l'unica ragione dietro l'aggiornamento, probabilmente pagherebbe.
Tuttavia, come ho spiegato sopra, penso che alcuni obiettivi più profondi fossero al lavoro qui. Ora che hai letto i miei pensieri, è ora che tu salti nella conversazione. Quali obiettivi pensi che Google stia cercando di ottenere con il nuovo design? Hanno effettivamente tirato fuori queste intenzioni?
Inoltre, Google+ è destinato alla fine a seguire Wave, Buzz e altri tentativi sociali falliti o continuerà la sua crescita costante e diventerà uno dei più importanti social network del web?