Share
En av de mest anmärkningsvärda förändringarna på webben 2011 var utbyggnaden av Googles nya användargränssnitt över en rad produkter. I den här artikeln ska jag titta på tankprocessen bakom Googles gränssnitt och bestämma vad vi kan lära av deras metoder och principer.
Miniatyr av Alex Patrascu
Googles ursprungliga hemsida ...
... det nya uppdaterade utseendet.
Googles uppdrag är att organisera världens information och göra den universellt tillgänglig och användbar.
Det är uppenbart att webben har förändrats drastiskt sedan Google: s tidiga dagar. Användarna upplever webben på ett helt annat sätt än tidigare och ser det på en mängd olika enheter. Google har medfört förändringar för att återspegla detta. Ändringar har också införts för att förena det stora utbudet av Google-produkter och föra dem ihop så att användaren har en jämn erfarenhet när de navigerar mellan produkter. Google förklarar:
Vårt mål är att ge dig en mer sömlös och konsekvent online-upplevelse - en som fungerar oavsett vilken Google-produkt du använder eller vilken enhet du använder den på.
Den nya erfarenheten som införs av Google bygger på tre grundläggande designprinciper. Låt oss ta en titt på dessa.
Tanken här är att tillåta användaren att fokusera på den uppgift eller jobb som de vill få gjort snabbt och enkelt. Detta uppnås genom att avlägsna onödig rodnad och föra fram saker och verktyg som är viktiga. Detta uppnås också genom enkla tillägg som att lägga till starkare färger för att ringa till handlingar eller dölja vissa navigationsobjekt när de inte används.
Genom att använda dessa metoder kan Googles användargränssnitt hjälpa sina användare att medvetet fokusera på den uppgift de försöker åstadkomma, vilket lindrar frustration från användarupplevelsen.
En av de största förändringarna sedan Google startade är hur användarna kommer åt webben. Inte längre använder vi bara Google-produkter på våra stationära datorer, vi använder dem nu på en rad olika enheter från smarta telefoner och surfplattor till högupplösta skärmar och tv. Tanken bakom 'elasticitet' är att tillåta användare att få en sömlös visuell upplevelse som de övergår mellan olika enheter.
Även om den teknik som används bakom Google och dess produkter är ganska komplexa, vill de inte porträtta denna komplexitet i sin design. "Effortless" handlar om att hålla utseendet enkelt, rent och konsekvent.
Googles nya varumärke kommer att baseras på förtroende, skönhet, teknisk renhet och innovation - Larry Page
Centralt för redesignen av Google är den nya Google Bar som ersätter den gamla horisontella svarta fältet som satt högst upp på skärmen. Google insåg att denna gamla bar tog upp dyrbar plats på våra skärmar (30px för att vara exakt) så bestämde sig för att ge det ett nytt utseende att binda in med sina nya designprinciper.
Den nya menyraden innehåller Google-menyn tillsammans med sökverktyg och Google Plus. Det håller sökfältet och navigeringen på samma sätt över alla produkter och gör det möjligt att byta mellan produkter enkelt. För att byta en produkt rullar du helt enkelt över google-logotypen, där du kommer att presenteras med en rullgardinsmeny så att du enkelt kan byta mellan Gmail, Docs, Maps, YouTube och andra produkter..
Eddie Kessler (Teknisk ledning hos Google) förklarar
Förena, förenkla och säga adjö till den gamla navigeringsfältet!
Att göra navigering och dela super enkel för människor är en viktig del av våra ansträngningar för att omvandla den övergripande Google-upplevelsen, varför vi är väldigt mycket glada över denna omdesign.
Vänster: En design av Google + -logotypen av Alex Alex Patrascu Höger: Visar Google + -menyn och gränssnittet För att analysera varje Google-produkt skulle användargränssnittet vara en hel bok på egen hand så till fördel för denna artikel har jag valt att markera ett par av Googles populäraste produkter.
Googles redesignutgåva sammanföll med en av de mest pratade om webbprojekt i år; Google +. Google + visade kanske några av sina nya designprinciper mer än någon annan Google-produkt. Efter förväntan om att den släpptes, om någon produkt behövs för att locka användare till Google så är det här. Det demonstrerar sina design ideal vackert och för dagar efter att jag hade gått med mig fann jag mig själv fascinerad på enkelheten av dess design.
Kredit för detta beror delvis på Andy Hertzfeld UI / UX teammedlem som arbetade på Google Plus. Många har dragit jämförelser mellan Googles stil och äpplen, och det kan förmodligen bero på att Andy tidigare varit anställd av Apple på 80-talet för att arbeta på Macintosh-projektet. En del av Andys roll i detta projekt var att arbeta tillsammans med Joseph Smarr på "cirklarna" -konceptet.
Andy förklarar tanken bakom cirklar:
Tanken att kategorisera människor, det var ganska uppenbart. Då var det kärnanvändaren av cirkelredaktören som försökte göra det roligt, engagerande, något som du skulle vilja göra eftersom det kan bli tråkigt. Så vi ville belöna användaren för att göra det, sätta ett leende i ansiktet och försöka göra det så roligt att de fortsätter att göra det.
Google Plus är en integrerad del av Googles övergripande strategi nu. Den kan hittas inkorporerad över majoriteten av Googles produkter och dess plus en knapp är jämn i sökresultaten. Google har gjort det mycket enkelt för oss att dela med oss vad vi hittar i våra sökresultat. Betydelsen termen "Social sökning" är nu mer relevant än någonsin och jag är övertygad om att sökningen går mer i denna riktning. Google stöder detta genom att ange:
Google Social Search hjälper dig att upptäcka relevantt innehåll från dina sociala kontakter, en uppsättning av dina online-vänner och kontakter. Innehåll från dina vänner och bekanta är ibland mer relevant och meningsfullt för dig än innehåll från någon slumpmässig person. En online-filmöversikt är till exempel användbar, men en filmrecension från din bästa vän kan bli ännu bättre.
Det nya Gmail-utseendet. Enligt rapporter från CBS-nyheter hade Gmail rapporterat 193,3 miljoner aktiva användare från och med november 2010. För att hålla dessa användare ombord har Google effektiviserat Gmail-upplevelsen i linje med sina designprinciper för att förbättra användarupplevelsen. De har gjort det genom att göra följande ändringar:
Samtal i Gmail har blivit helt omformade för att möjliggöra enklare läsning när trålning via e-posttrådar. Profilbilder har lagts till i konversationen, vilket ger gränssnittet möjligheten att hjälpa dig att delta i konversationer mer personligt. Detta hjälper dig också när du försöker hålla reda på vem som sa vad. Genom att ta bort många objekt från det ursprungliga användargränssnittet har de tillåtit sina användare att fokusera på att kommunicera med kollegor och vänner.
Den vänstra sidor navigeringen har omformats och levereras med möjlighet att anpassa den. Du kan ändra storleken på chattområdet för att vara så stort eller litet som du vill, eller göm det helt genom att klicka på den lilla ikonen i nedre vänstra delen av sidofältet. Som med alla nya produkter kan du nu navigera dig runt Googles gränssnitt genom att använda fliken eller piltangenterna, och ger användaren en gång friheten att navigera på det bekvämaste sättet.
Den här bilden lyfter fram Gmails nya förbättrade sökfunktion E-post är ett viktigt verktyg för alla webbanvändare. Så mycket faktum att mellan oss skickar vi uppskattningsvis 294 miljarder e-postmeddelanden varje dag. Det är absolut nödvändigt att vi kan hitta alla e-postmeddelanden som vi har spridda runt inkorgen (jag vet att jag har runt 10 000+). Google har tillhandahållit en hjälpande hand så att den överträffar föregående standardsökning. Användare kan nu klicka på sökrutan som visar en avancerad sökpanel som låter dig skapa ett filter från alla sökningar på bara några få klick.
Oavsett om du gillar eller gillar inte det nya utseendet hos Google, är det ingen tvekan om att det har blivit en succé. Det har väldigt mycket varit ett samtal på webben de senaste månaderna och har fått många fans. En del av sin framgång kan vara så som Google har rullat ut ändringar. I stället för att välja att starta hela det nya utseendet på en gång, har de valt att släppa om förändringar i steg och vanligtvis per produkt. Vid valet av denna metod har de kunnat samla användaråterkoppling och bestämma vilka beslut som har fungerat och vad som behöver utvärderas för nästa fas.
Att släppa det i steg har också andra fördelar. Genom att placera utgivningsdatum för varje användargränssnitt under flera månader kan Google omge sina användargränssnitt ändras med massmediahype. Alla från BBC till New York Times har skrivit om Googles förändringar, för att inte tala om de många tweets och kommentarer som har lagts upp på olika webbplatser om förändringarna. Nu kan det verkligen inte vara dåligt för företag!
Genom att titta på ovanstående färgexempel kan vi se att Google har behållit sin färgpalett begränsad. De använder blått och rött för att markera de viktiga funktionerna som båda är färgvarianter av den ursprungliga Google-logotypen.
Illustrerar några av Googles nya knappar och ikoner Som en del av deras nya designstrategi har Google introducerat en ny uppsättning knappar över hela sortimentet. Dessa knappar är klara, enkla, koncisa och visar Googles designprincip "fokus" ganska tydligt. De har använt en kombination av HTML5 och CSS3 för att skapa dem. Ett val som kan komma som en överraskning för alla är att knapparna inte är faktiskt knappar, det är inte heller ankaretiketter men är faktiskt skapade med hjälp av divs med en rollattribut som är inställd på "knappen". Detta används för att indikera att en generisk tagg spelar rollen som en standard widget, som i detta fall en knapp. Detta är användbart för personer som kan komma åt webbplatsen via en enhet som en skärmläsare.
Google har använt subtila CSS3-gradienter för att ge sina knappar lyft och har gett dem lite extra pop- genom att lägga till en subtil droppskugga längst ner på knappen på svävaren. Knapparna är generellt grupperade i 2 kategorier "fristående" och "vänster, mitten, höger". Med varje kategori har 2 olika storlekar "standard" och "stor". Genom att välja dessa 4 stilar över hela sitt utbud kan Google ge en enhetlig upplevelse för sina användare.
En faktor som uppmuntrar till en bra användarupplevelse i vilken design som helst är visuell appell. Google har tillåtit detta genom att tillåta användare att anpassa skärmens densitet på vissa produkter. Det här alternativet visas i Gmail, Reader, Docs och andra text tunga appar. Displaydensiteten är uppdelad i tre förinställningar. Bekväm, Mysig och Kompakt och dessa anpassas beroende på skärmens densitet. Med mediefrågor som redan är populära är jag säker på att dessa typer av skärmdensitetsalternativ kommer att börja visas över ett antal andra webbprodukter.
Efter att ha studerat Googles nya gränssnittsprinciper ganska intensivt under de senaste sex månaderna kan jag berätta vad jag har observerat och lärt mig av den strategi som de har genomfört. Som en av de största varumärkena på Internet; de har klart förstått (framförallt) att enkelheten och en enhetlig upplevelse är viktig.
Enkelhet och en enhetlig upplevelse är nyckeln.
Det har också lärt mig personligen att släppa intensiteten på många av mina UI-element. Skall droppskuggan verkligen vara 80% opacitet? Kan det sänkas lite till kanske 20-30%? Som designers vill vi att folk ska märka den extra ansträngning som vi har gått till genom att lägga till den droppe skuggan eller höjdpunkten och vissa gånger tenderar att överkompensera för detta genom att få det att stå ut. Ibland genom att göra det mer subtilt kan vi uppnå en större, jämnare effekt som är behaglig för ögonen och blir märkt lika mycket. Samma princip kan tillämpas på egenskaper som gränsradie, försök toning dem ner från de vanliga 5 eller 10px till 1, 2 eller 3 pixlar. Självklart bör dessa behandlingar inte tillämpas på varje projekt utan gör viss skillnad när du väljer en "ren" design.
Vi kan också lära oss att webben är på en helt annan plats nuförtiden jämfört med hur det brukade vara. Med de senaste nyheterna om att Internet Explorer automatiskt uppdaterar sina webbläsare kan vi nu börja förlita sig på den senaste webbtekniken för att arbeta över de flesta webbläsare. Google kanske hade en uppfattning om detta eftersom ingen av deras nya produktdesigner fungerar i något under Internet Explorer 8. Vi kan nu potentiellt börja designa som vi vill utan lika många webbläsarbegränsningar. Vi bör nu anpassa tiden som sparats från detta till att skapa kompatibilitet med andra enheter och skärmupplösningar för att ge den ultimata användarupplevelsen.
Vad tycker du om Googles nya användargränssnitt ändringar är du ett fan eller tycker du att de är smärta? Jag skulle gärna höra dina kommentarer om vad du tycker.
Accentsconagua