Igår rullade Google ut en omfattande omkonstruktion av sitt sociala nätverk, Google+. De blandade inte bara runt några föremål, utan omdefinierade de helt den visuella upplevelsen. En sådan stor uppdatering förtjänar en specialutgåva av vår webbdesignkritikserie.
Låt andra prata om tråkiga gamla funktionslistor, gå med oss när vi hoppar in och ta en titt runt för att se vad som är bättre och vad som är värre ur en designers perspektiv. Vi hämtar varje del av gränssnittet och ser om det finns något att lära oss.
Om du vill skicka din webbplats till en framtida designkritik tar det bara några minuter. Vi tar ut $ 49 för att kritisera din design - betydligt mindre än du skulle betala för en konsult för att kolla på din webbplats! Du kan läsa mer här.
Den gamla Google+
Innan vi dyker in i den nya designen, låt oss ta en snabb titt på den ursprungliga versionen av Google+, som visas nedan.
Som du kan se är det en ganska gles erfarenhet med massor av blankutrymme. Layouten organiserar innehållet i tre kolumner med en horisontell stapel längst upp för att söka, lägga till foton, visa dina cirklar etc. Layouten här är faktiskt ganska påminner om Facebooks nuvarande design.
Den övergripande känslan är ren och enkel, men också lite kall och opersonlig. Detta gjorde platsen lätt för alla att plocka upp och använda men kanske inte hjälpte mycket med konceptet att göra sidan till ditt eget personliga nav för kommunikation.
Den nya Google+
Den nya Google+ sänker drastiskt ned på sparsityens rymd och känslor. Som jämförelse verkar gränssnittet laddas med funktioner och knappar. De har behållit den starka vita personligheten men kompletteras med en grå färg.
Det kan tyckas som en trivial förändring, men det är faktiskt ett mycket avsiktligt försök att skapa en stark visuell hierarki på sidan. Där den gamla sidan var ett vitt hav med ett enda gråområde längst upp, använder denna sida dessa två färger för att tydligt särskilja primära och sekundära delar av innehållet. Dina ögon kommer att flyta runt sidan, vilket ger viktig betydelse för de lättare delarna av gränssnittet.
Layout
Layouten är mycket mer komplicerad den här gången. Det är en modifierad version av den gamla tre kolonnutformningen med lite nestning på plats. Det finns fortfarande en bred huvuddel flankerad av två smala sidor, men huvuddelen är nu uppdelad i två starka underkolumner. Allt innehåll på sidan har en fast position, endast huvudinnehållsområdet rullar.
Om vi släpper ut allt och tittar bara på sidans ben ser vi en ganska komplicerad wireframe.
En av de mest betydelsefulla konceptuella förändringarna som har ägt rum är att den gamla layouten innehöll dina olika vänkretsar i en vertikal remsa längs vänster sida och dina navigationsikoner längst upp, medan den nya layouten placerar navigeringen i en vertikal remsa av ikoner ner till vänster och dina cirklar i en vågrät stapel överst.
Detta ikonbaserade navigeringsmönster på vänster sida är något som har blivit extremt populärt i Mac UI-design och vi börjar se den speglas i webbgränssnitt. En av de viktigaste förespråkare av detta format var Twitter för Mac (tidigare Tweetie), som har skapat en mängd liknande gränssnitt i appar som Reeder, Sparrow och Raven.
Den nya sidan på Google+ har en del ordförråd att lära. Remsan ner till vänster är "bandet"? som innehåller olika? ansökningar.? Huvudinnehållslådan är kortet? och utrymmet under varje post med kommentarer, +1, etc. är aktivitetslådan.?
Justeringsproblem
Den nya layouten går långt mot att göra Google+ verkar som en mer funktionell applikation och det gör definitivt användbar kontrast för att lyfta fram viktiga delar av sidan. Jag har egentligen inga problem med det övergripande layoutschemat, men jag kan inte låta bli att märka några justeringsproblem som jag tycker är att få ner estetiken.
Till att börja med är huvudinställningsrutan och hangoutknappen inom ett par pixlar av att de är perfekt inriktade längs sina övre streck. Tyvärr, till en nitpicker som jag, känner ett par pixlar en mil bort. Det finns få designkvaliteter som irriterar mig snabbare än två saker som är nästan Justerat. För att lära dig mer om detta ämne, kolla in? Varför är nästan ett smutsigt ord i design.?
Effekten är ännu värre om du tar ett steg tillbaka och tittar på alla fyra elementen i detta område. Användarens e-postadress, primära innehållsruta, hangout-box och meddelandefält sträcker sig i slumpmässiga längder och verkar inte ha någon logik bakom placeringen.
Detta exempel är inte en isolerad incident, det finns några andra fall där objekt bara saknar en vertikal eller horisontell inriktning. Kolla in hur Google+-logotypen nedan är felaktig motverkad av den starka vertikala linjen som etablerades av navigeringen nedan.
Ikon Design: Vidare från Enkelt
Historiskt har Google alltid varit känt för sin fulla brist på design. Varje produkt som rullade ut tycktes vara nästan den enklaste möjliga lösningen som du kan tänka dig. Google-varumärkesbilden representerade ett fullständigt vägran att följa den glänsande och snygga webb 2.0-visuella stilen populär i början av 2000-talet för att låta innehållet tala för sig själv.
Under de senaste åren har vi sett Google börjar sakta avstå från dessa idéer, eftersom dess produkter visar en subtil men allt större mängd komplexitet och designdetaljer. Ikonerna i det nya Google+ är ett perfekt exempel på detta begrepp.
Lägg märke till hur de enkla abstrakta formerna och de solida färgerna har gett vägen till en mer sammanhängande bild av ett hus, som innehåller subtila slag och gradienter.
Repetition av Hover Effects
Medan vi är på ämnet ikoner, låt oss ta en snabb titt på några av de mindre interaktionsaspekterna på webbplatsen, nämligen svängverkan. Det allmänna temat här är att ikonerna är gråa och kontrast mycket lite med bakgrunden. Sedan på ikonen blir ikonen fullfärgad. Du kan se detta i åtgärd på sidofältet:
Upprepning är ett av dina starkaste verktyg som designer och Google hanterar det bra här. Samma grå-till-färg-effekt upprepas på ett par ställen över hela sidan.
De är dock lite inkonsekventa med denna effekt. Det finns några fläckar där jag tycker att det skulle ha varit lämpligt att fortsätta upprepningen, men de valde att gå med en annan slumpmässig effekt. I exemplet nedan blir ikonerna i knappformar på svävaren.
Ny sidofält
Till höger om huvudinnehållet finns ett nytt sidofält med olika funktioner som är utformade för att hjälpa dig att få ut det mesta av Google+. Observera att det här är ett annat ställe där vi ser färgen på sväva trick.
Detta område är mycket snyggt utformat med varje sektion tydligt organiserad och distinkt. Det är intressant att se att Google hämtar en idé från Twitter i form av en lista över trending-ämnen. Du kan se att användarna redan har antagit hashtag-syntaxen, ett fascinerande exempel på hur vi automatiskt överför våra beteenden över sociala nätverk om utvecklarna redovisar det beteendet eller inte.
Det är alltid viktigt att både förutse och observera beteendet hos din användarbas nära och tillgodose åtgärder som de tycks gravta mot istället för att försöka ändra dem. Detta gör att din plattform verkar mycket mer intuitiv och lätt att anta.
Profil
Med en sida från den nya Facebook-tidslinjens playbook (och kanske sökvägen) tillåter den nya profilen för Google+ inte bara en viktig avatarbild utan en "täckbild"? (samma term som används av Facebook) också.
Den del som är en märkbar brytning från Facebook är det otvetydigt stora profilbilden, som ligger på höger sida istället för vänster. Nedan visas vid den verkliga storleken, de här bilderna visas med 250px 250px, vilket säkert inte är dubbelt så stort som Facebooks 125px fyrkantiga profilbilder.
En sak som jag tycker är intressant är att omslagsbilden faktiskt bryts ut ur innehållsruten. Jag uppskattar vanligtvis det när designers avsiktligt dra av ett oväntat knep så här men för att vara ärlig tycker jag att det är ganska distraherande här. Så snart en profil sida laddar, hoppar mina ögon direkt till den obekväma överlappningen.
Vad är domen?
Från och med förra månaden korsade Google+ 100 miljoner mark för aktiva användare. Ingen kan kalla det här ett litet nummer, speciellt med tanke på att Instagram bara snatched en miljard dollar från Facebook för sin plattform och 30 miljoner + användarbas.
Om du anser att Twitter bara har 140 miljoner aktiva användare, verkar det som om Google+ snabbt går till nummer två i sociala medier. Men det är definitivt inte tillräckligt för att komma nära rivaling Facebooks aktiva användarbas, som ligger någonstans i 800 miljoner-serien.
Den nya designen visar att Google inte har för avsikt att överge projektet, som att de har så många andra tidigare. De försöker definitivt göra en roligare upplevelse att locka dig och hålla dig tillbaka. Frågan är, kommer det att fungera?
För att kunna svara på det måste vi spekulera om vad som håller folk tillbaka från att anta Google+. Det uppenbara svaret är att Google+ känns något överflödigt när du redan har ett Facebook-konto, ännu mer om du är aktiv på både Facebook och Twitter. En annan möjlighet är att medan den gamla Google+ säkert inte var ful, kände den sig kanske lite steril och tom för personlighet.
Möjliga mål bakom den nya designen
Från detta kan vi våga gissa på minst två möjliga mål bakom omkonstruktionen. Det första skulle vara att ytterligare skilja Google+ från andra sociala nätverk. Att försöka hävda att de är helt enkelt bättre än Facebook i sitt eget spel är inte det bästa alternativet, folk på Google måste skapa en tydligt unik konceptuell hörnsten för varför folk ska komma till deras webbplats. Som ett exempel har Twitter gjort ett utmärkt jobb att hålla sig borta från att replikera Facebooks funktionalitet och stå inte som ett alternativ utan som en egen distinkt produkt.
Det andra målet är att minska steriliteten och börja omvandla Google+ till en vänlig och välkomnande plats som är lätt att navigera och till och med kul att använda.
Mötte de dessa mål?
Om vi analyserar designen i form av dessa mål kan vi bättre bedöma huruvida det var en succé. Denna övning ger oss tydliga poäng att jämföra mot istället för att blinda stabbar i mörkret i ett försök att hitta vad som fungerar och vad som inte gör det.
När det gäller det första målet har Google gjort vissa framsteg på vissa områden och kanske återhämtade sig lite i andra. Sammantaget är den nya layouten ett mycket längre steg från Facebook än den gamla. Vid en blick skulle en trogen användare av antingen aldrig misstaka den ena för den andra, vilket är en bra sak.
Vidare, små ränder som att placera cirkelfiltret längst upp och fortsätter att ge prominens till hangouts, säkerställer att Googles få innovationer är främsta och centrala. Denna framsteg står i kontrast till andra områden som den nya omslagsbilden, som faktiskt gör det sociala nätverket känt Mer som en Facebook klon, inte mindre. Jag skulle gärna ha sett dem visa någon unik tanke på detta område snarare än att bara låna Facebooks nya format.
Det andra målet verkar definitivt ha varit ett stort problem i designuppdateringen. Den nya Google+ skapar en mer inbjudande miljö.Även om det kanske är nära att bli rörigt, speciellt jämfört med den gamla versionen, känns det som en mer robust tjänst med alla saker som händer på din hemsida.
Det finns mycket ökad tonvikt på ansikten. Det börjar med din stora nya profilbild och fortsätter genom hemsidan där du ser en stor chatt sidebar full av vänliga ansikten utöver förslag till personer som du kanske vet och användare som du kanske vill. Google vill att du ska göra vänner, för att få dra nytta av erfarenheten att missa när du är borta. Fler vänner betyder mer interaktioner, vilket innebär fler skäl att återvända.
Vad tror du?
Google+ verkade som om jag skulle gå ut ur rampljuset de senaste månaderna. Men denna uppfattning var uppenbarligen bristfällig, eftersom de i själva verket var tysta men stadigt klättrade i diagrammen med ett imponerande antal aktiva dagliga användare. Oavsett om de började spåra i allmänhetens intresse, var den nya designen helt tidsbestämd för att hela webben skulle prata om dem igen. Även om detta var den enda anledningen till uppdateringen, kommer det sannolikt att löna sig.
Men som jag förklarade ovan tror jag att vissa djupare mål var på jobbet här. Nu när du har läst mina tankar är det dags för dig att hoppa in i konversationen. Vilka mål tycker du att Google försökte uppnå med den nya designen? Gjorde de på ett effektivt sätt dessa intentioner?
Också är Google+ slutligen dömd för att ta vägen för Wave, Buzz och andra misslyckade sociala försök eller kommer det att fortsätta sin stadiga tillväxt och bli ett av de viktigaste sociala nätverk på webben?