Share
En av de mest bemerkelsesverdige endringene på nettet i 2011 var utrulling av Googles nye brukergrensesnitt på tvers av en rekke produkter. I denne artikkelen skal jeg se på tankeprosessen bak Googles brukergrensesnitt og bestemme hva vi kan lære av deres metoder og prinsipper.
thumbnail av Alex Patrascu
Googles opprinnelige hjemmeside ...
... det nye oppdaterte utseendet.
Googles oppgave er å organisere verdens informasjon og gjøre den universelt tilgjengelig og nyttig.
Det er åpenbart å se at nettet har endret seg drastisk siden Googles tidlige dager. Brukerne opplever nettet på en helt annen måte enn før og ser den på en rekke forskjellige enheter. Google har tatt med forandringer for å reflektere dette. Endringer har også blitt innført for å forene det store spekteret av Google-produkter og bringe dem sammen slik at brukeren har en jevn opplevelse når de navigerer mellom produkter. Google forklarer:
Vårt mål er å gi deg en mer sømløs og konsistent online opplevelse - en som fungerer uansett hvilket Google-produkt du bruker, eller hvilken enhet du bruker den på.
Den nye opplevelsen som Google introduserer er basert på tre grunnleggende designprinsipper. La oss ta en titt på disse.
Ideen her er å la brukeren fokusere på oppgaven eller jobben som de ønsker å få gjort raskt og enkelt. Dette oppnås ved å fjerne unødvendig rot og bringe til forkant elementer og verktøy som betyr noe. Dette oppnås også ved enkle tillegg, for eksempel å legge til sterkere farger for å ringe til handlinger eller skjule bestemte navigasjonsartikler når de ikke er i bruk.
Ved å bruke disse metodene kan Googles brukergrensesnitt hjelpe sin bruker ubevisst å fokusere på oppgaven de prøver å oppnå, og lette frustrasjonen fra brukeropplevelsen.
En av de største endringene siden Google startet, er måten brukerne får tilgang til på nettet. Ikke lenger bruker vi bare Google-produkter på våre skrivebord, vi bruker dem nå på en rekke enheter fra smarttelefoner og nettbrett til høyoppløselige skjermer og TV-er. Tanken bak 'elastisitet' er at brukerne får en sømløs visuell opplevelse som de overgår mellom ulike enheter.
Selv om teknologiene som brukes bak Google og dets produkter er ganske komplekse, ønsker de ikke å skildre denne kompleksiteten i deres design. "Uanstrengt" handler om å holde utseendet enkelt, rent og konsistent.
Googles nye merkevarebygging vil være basert på tillit, skjønnhet, teknologisk renhet og innovasjon - Larry Page
Sentralt i redesignet av Google er den nye Google-linjen som erstatter den gamle horisontale svarte linjen som satt øverst på skjermen. Google innså at denne gamle baren tok opp verdifullt sted på våre skjermer (30px for å være presis), så besluttet å gi det et nytt utseende for å knytte seg til deres nye designprinsipper.
Den nye menylinjen inneholder Google-menyen, sammen med søk og Google Plus-verktøy. Det holder søkefeltet og navigasjonen det samme på tvers av alle produktene, og gjør det mulig å bytte mellom produkter enkelt. Hvis du vil bytte et produkt, ruller du bare over google-logoen, der du vil bli presentert med en rullegardinmeny, slik at du kan bytte "uanstrengt" mellom Gmail, Dokumenter, Maps, YouTube og andre produkter..
Eddie Kessler (teknisk ledelse hos Google) forklarer
Forenkle, forenkle og si farvel til den gamle navigasjonslinjen!
Å gjøre navigering og dele super enkelt for folk er en viktig del av vår innsats for å forandre den samlede Google-opplevelsen, og derfor er vi veldig glade for dette redesignet.
Venstre: Et design av Google + -logoen av Alex Alex Patrascu Høyre: Viser Google + -menyen og grensesnittet For å analysere hvert Google-produkt brukergrensesnittet ville være en hel bok på egenhånd, så til fordel for denne artikkelen har jeg valgt å markere et par av Googles mest populære produkter.
Googles redesignutgivelse sammenfalt med en av de mest snakket om webprosjekter i år; Google +. Google + viste kanskje noen av deres nye designprinsipper mer enn noe annet Google-produkt. Etter påvente av utgivelsen, hvis noe produkt trengs for å lokke brukere til Google, så er dette den. Det demonstrerer deres design idealer vakkert, og i flere dager etter at jeg hadde sluttet seg, fant jeg meg selv fascinert på enkelheten av designen.
Kreditt for dette gjelder delvis for Andy Hertzfeld UI / UX teammedlem som jobbet på Google Plus. Mange har tegnet sammenlikninger mellom Googles stil og Apples, og dette kan uten tvil skyldes at Andy tidligere har vært ansatt av Apple på 80-tallet for å jobbe med Macintosh-prosjektet. En del av Andys rolle i dette prosjektet var å jobbe sammen med Joseph Smarr på "sirkler" konseptet.
Andy forklarer ideen bak sirkler:
Ideen om å kategorisere folk, det var ganske tydelig. Så var det kjernen ideen til sirkel redaktør som prøvde å gjøre det morsomt, engasjerende, noe du ville ønske å gjøre fordi det kan bli kjedelig. Så, vi ønsket å belønne brukeren for å gjøre det, sette et smil på ansiktet og prøve å gjøre det så hyggelig de fortsetter å gjøre det.
Google Plus er en integrert del av Googles samlede strategi nå. Det kan bli funnet inkorporert over flertallet av Googles produkter, og det er enda en knapp i søkeresultatene. Google har gjort det svært enkelt for oss å dele det vi finner i søkeresultatene våre. Betydningen av begrepet "Sosialt søk" er nå mer relevant enn noensinne, og jeg er sikker på at søket går mer i denne retningen. Google støtter dette ved å si:
Google Social Search hjelper deg med å oppdage relevant innhold fra dine sosiale forbindelser, et sett med dine online venner og kontakter. Innhold fra dine venner og bekjente er noen ganger mer relevant og meningsfullt for deg enn innhold fra en tilfeldig person. For eksempel er en online film gjennomgang nyttig, men en film gjennomgang fra din beste venn kan bli enda bedre.
Det nye Gmail-utseendet. Ifølge rapporter fra CBS-nyheter hadde Gmail rapportert 193,3 millioner aktive brukere fra november 2010. For å holde brukerne om bord, har Google strømlinjeformet Gmail-opplevelsen i tråd med deres designprinsipper for å forbedre brukeropplevelsen. De har gjort dette ved å gjøre følgende endringer:
Samtaler i Gmail har blitt helt nyutformet for å muliggjøre lettere lesing når tråling gjennom e-posttråder. Profilbilder er lagt til i samtalen, og gir grensesnittet muligheten til å hjelpe deg med å engasjere samtaler mer personlig. Dette hjelper deg også når du prøver å holde oversikt over hvem som sa hva. Ved å fjerne mange gjenstander fra den opprinnelige brukergrensesnittet har de fått brukerne til å fokusere på å kommunisere med kolleger og venner.
Den venstre sidebarnavigasjonen har blitt omformet og leveres med muligheten til å tilpasse den. Du kan endre størrelsen på chatområdet til å være like stort eller lite som du vil, eller gjem det helt ved å klikke på det lille ikonet nederst til venstre i sidefeltet. Som med alle de nye produktene, er du nå i stand til å navigere deg rundt Googles grensesnitt ved å bruke fanen eller piltastene, igjen gi brukeren friheten til å navigere på den mest hensiktsmessige måten til dem.
Dette bildet fremhever Gmails nye forbedrede søkefunksjon E-post er et viktig verktøy for enhver webbruker. Så mye, faktisk at mellom oss sender vi en estimert 294 milliarder e-post hver eneste dag. Det er viktig at vi kan finne alle e-postene vi har spredt rundt innboksen vår (jeg vet at jeg har rundt 10 000 +). Google har gitt en hjelpende hånd på den måten som overgår det forrige standard søket. Brukere kan nå klikke på søkedisplayet som viser et avansert søkepanel som lar deg lage et filter fra et hvilket som helst søk på bare noen få klikk.
Enten du liker eller misliker det nye utseendet til Google, er det ingen tvil om at det har vært en suksess. Det har veldig mye vært et samtalemne på nettet de siste månedene, og har fått mange fans. En del av suksessen kan være i den måten Google har rullet ut, endrer seg. I stedet for å velge å lansere hele det nye utseendet på en gang, har de valgt å frigjøre endringer i trinn og vanligvis etter produkt. Ved å velge denne metoden har de vært i stand til å samle tilbakemeldinger fra brukerne og bestemme hvilke beslutninger som har fungert og hva som skal revurderes for neste fase.
Å frigjøre den i etapper har også andre fordeler. Ved å lagre utgivelsesdatoer for hver UI-fase i løpet av flere måneder, kan Google omgjøre deres brukergrensesnittendringer med mye mediehype. Alle fra BBC til New York Times har skrevet om Googles endringer, for ikke å nevne de mange tweets og kommentarer som har blitt lagt ut på ulike sider angående endringene. Nå som absolutt ikke kan være dårlig for virksomheten!
Ved å se på ovenstående fargeeksempler kan vi se at Google har begrenset fargepaletten sin. De bruker blå og rød for å markere viktige funksjoner som begge er fargevarianter av den opprinnelige Google-logoen.
Illustrerer noen få Googles nye knapper og ikoner Som en del av deres nye designstrategi har Google introdusert et nytt sett med knapper over hele serien. Disse knappene er klare, enkle, konsise og viser Googles designprinsipp for "fokus" ganske tydelig. De har brukt en kombinasjon av HTML5 og CSS3 for å lage dem. Et valg som kan komme som en overraskelse for alle er at knappene egentlig ikke er knapper, det er heller ikke ankeretiketter, men er faktisk opprettet ved hjelp av divs med en rolleattributt satt til "knapp". Dette brukes til å indikere at en generisk tag spiller rollen som en standard widget, som i dette tilfellet en knapp. Dette er nyttig for folk som kan få tilgang til nettstedet via en enhet som en skjermleser.
Google har brukt subtile CSS3 gradienter for å gi sine knapper løft og har gitt dem den lille ekstra pop ved å legge til en subtil dropshadow til bunnen av knappen på svingeren. Knappene er vanligvis gruppert i 2 kategorier "stå alene" og "venstre, mellom, høyre". Med hver kategori har 2 forskjellige størrelser "standard" og "stor". Ved å velge disse 4 stilene over hele sitt utvalg, kan Google gi en samlet opplevelse for sine brukere.
En faktor som oppmuntrer til en god brukeropplevelse i ethvert design er visuell appell. Google har tillatt dette ved å tillate brukerne å tilpasse skjermens tetthet på enkelte produkter. Dette alternativet vises i GMail, Reader, Docs og andre teksttyper. Skjermens tetthet er delt inn i tre forhåndsinnstillinger. Komfortabel, koselig og kompakt, og disse tilpasses avhengig av skjermens tetthet på datamaskinen din. Med medieforespørsler som allerede er populære, er jeg sikker på at disse typer skjermdensitetsalternativer vil begynne å vises over en rekke andre webprodukter.
Etter å ha studert Googles nye UI-prinsipper ganske intensivt de siste seks månedene, kan jeg fortelle hva jeg har observert og lært av strategien de har implementert. Som en av de største merkene på Internett; de har klart forstått (fremfor alt annet) at enkelhet og en samlet opplevelse er nøkkelen.
Enkelhet og en samlet opplevelse er nøkkelen.
Det har også lært meg personlig å slippe intensiteten på mange av mine brukergrensesnittelementer. Skal fallskyggen virkelig være 80% uklarhet? Kan det senkes litt til kanskje 20 - 30%? Som designere vil vi at folk skal legge merke til den ekstra innsats som vi har gått på, ved å legge til den skyggen eller høydepunktet og noen ganger har en tendens til å overkompensere for dette ved å ha det skiller seg ut. Noen ganger ved å gjøre det mer subtilt kan vi oppnå en større, jevnere effekt som er behagelig på øynene og blir lagt merke til like mye. Det samme prinsippet kan brukes på egenskaper som grenseradius, prøv å toning dem ned fra de vanlige 5 eller 10px til 1, 2 eller 3 piksler. Selvfølgelig bør disse behandlingene ikke brukes på hvert prosjekt, men absolutt gjøre en forskjell når du velger en "ren" design.
Vi kan også lære at nettet er i et helt annet sted i dag, sammenlignet med hvordan det pleide å være. Med de siste nyhetene at Internet Explorer skal automatisk oppdatere nettleserne, kan vi nå begynne å stole på den nyeste webteknologien for å arbeide over de fleste nettlesere. Google har kanskje en ide om dette fordi ikke deres nye produktdesign fungerer i noe under Internet Explorer 8. Vi kan nå potensielt begynne å designe som vi vil uten så mange nettleserbegrensninger. Vi bør nå tilpasse tiden som er lagret fra dette til å skape kompatibilitet på tvers av enheter for andre enheter og skjermoppløsninger, for å gi den ultimate brukeropplevelsen.
Hva synes du om Googles nye brukergrensesnittendringer, er du en fan eller finner du vondt? Jeg vil gjerne høre dine kommentarer om hva du synes.
Accentsconagua