Share
Een van de meest opvallende veranderingen aan het web in 2011 was de introductie van de nieuwe gebruikersinterface van Google voor een reeks van zijn producten. In dit artikel ga ik kijken naar het denkproces achter de UI-beslissingen van Google en bepalen wat we kunnen leren van hun methoden en principes.
thumbnail door Alex Patrascu
Oorspronkelijke startpagina van Google ...
... de nieuwe bijgewerkte look.
De missie van Google is om informatie over de wereld te organiseren en universeel toegankelijk en bruikbaar te maken.
Het is duidelijk om te zien dat het internet sinds de eerste dagen van Google drastisch is veranderd. Gebruikers ervaren het web op een heel andere manier dan voorheen en bekijken het op verschillende apparaten. Google heeft veranderingen aangebracht die dit weerspiegelen. Er zijn ook wijzigingen geïntroduceerd om het uitgebreide assortiment Google-producten te verenigen en samen te brengen, zodat de gebruiker een soepele ervaring heeft tijdens het navigeren tussen producten. Google legt uit:
Ons doel is om u een meer naadloze en consistente online ervaring te bieden, een die werkt ongeacht welk Google-product u gebruikt of op welk apparaat u het gebruikt.
De nieuwe ervaring die Google heeft geïntroduceerd, is gebaseerd op drie fundamentele ontwerpprincipes. Laten we deze eens bekijken.
Het idee hier is om de gebruiker toe te staan zich te concentreren op de taak of taak die hij snel en gemakkelijk wil uitvoeren. Dit wordt bereikt door onnodige rommel te verwijderen en items en hulpmiddelen die van belang zijn naar de voorgrond te brengen. Dit wordt ook bereikt door eenvoudige toevoegingen, zoals het toevoegen van vetere kleuren voor oproep tot acties of het verbergen van bepaalde navigatie-items wanneer ze niet in gebruik zijn.
Door deze methoden te gebruiken, kan de gebruikersinterface van Google onbewust de gebruiker helpen zich te concentreren op de taak die ze proberen te bereiken, waardoor de frustratie van de gebruikerservaring wordt verminderd.
Een van de grootste veranderingen sinds Google is begonnen, is de manier waarop gebruikers toegang hebben tot internet. We gebruiken niet langer alleen Google-producten op onze desktops, we gebruiken ze nu op verschillende apparaten, van smartphones en tablets tot monitoren met hoge resolutie en tv's. Het idee achter 'elasticiteit' is om gebruikers een naadloze visuele ervaring te bieden bij de overgang tussen verschillende apparaten.
Hoewel de technologieën achter Google en zijn producten vrij complex zijn, willen ze deze complexiteit niet in hun ontwerp weergeven. 'Moeiteloos' is om het uiterlijk eenvoudig, schoon en consistent te houden.
De nieuwe branding van Google is gebaseerd op Trust, Beauty, Technological Purity and Innovation - Larry Page
Centraal in het herontwerp van Google staat de nieuwe Google-balk die de oude horizontale zwarte balk vervangt die zich aan de bovenkant van het scherm bevond. Google realiseerde zich dat deze oude bar op onze schermen een kostbare plaats innam (30px om precies te zijn), dus besloot om het een nieuwe look te geven die paste bij hun nieuwe ontwerpprincipes.
De nieuwe menubalk bevat het Google-menu, samen met de zoek- en Google Plus-hulpmiddelen. Het houdt de zoekbalk en navigatie op alle producten gelijk en maakt schakelen tussen producten eenvoudig. Om een product te wisselen, rolt u eenvoudigweg over het Google-logo, waar u een vervolgkeuzemenu te zien krijgt waarmee u 'moeiteloos' kunt schakelen tussen Gmail, Documenten, Maps, YouTube en andere producten.
Eddie Kessler (Technical Lead bij Google) legt uit
Unify, vereenvoudig en zeg vaarwel tegen de oude navigatiebalk!
Navigeren en delen is supereenvoudig voor mensen is een belangrijk onderdeel van onze inspanningen om de algehele Google-ervaring te transformeren. Daarom zijn we erg enthousiast over dit nieuwe ontwerp.
Links: een ontwerp van het Google + -logo door Alex Alex Patrascu Rechts: het menu en de interface van Google + weergeven Om elk Google-product te analyseren, is de gebruikersinterface een volledig boek, dus in het voordeel van dit artikel heb ik ervoor gekozen een paar van de populairste producten van Google te vermelden.
De herontwerpuitgave van Google viel samen met een van de meest spraakmakende webprojecten van dit jaar; Google +. Google + heeft misschien sommige van hun nieuwe ontwerpprincipes meer getoond dan welk ander Google-product dan ook. Na de anticipatie van de release, als een product nodig is om gebruikers naar Google te lokken, is dit het enige. Het demonstreert hun ontwerpideeën prachtig en dagen nadat ik me had aangesloten, merkte ik dat ik gebiologeerd was door de eenvoud van het ontwerp.
Dit wordt deels toegeschreven aan het UI / UX-teamlid van Andy Hertzfeld dat aan Google Plus werkte. Veel mensen hebben vergelijkingen gemaakt tussen de stijl van Google en de appels. Dit kan te wijten zijn aan het feit dat Andy eerder in dienst was bij Apple in de jaren 80 om aan het Macintosh-project te werken. Een deel van Andy's rol in dit project was om samen met Joseph Smarr te werken aan het concept 'cirkels'.
Andy legt het idee achter cirkels uit:
Het idee om mensen te categoriseren, dat was vrij duidelijk. Toen was er het kernidee van de cirkeleditor die probeerde dat leuk, boeiend te maken, iets dat je zou willen doen omdat het vervelend kan worden. Dus we wilden de gebruiker belonen voor het doen, een glimlach op zijn gezicht toveren en proberen het zo leuk te maken dat ze het blijven doen.
Google Plus is nu een integraal onderdeel van de algemene strategie van Google. Het is te vinden in de meeste producten van Google en de plus één knop is zelfs in de zoekresultaten. Google heeft het voor ons heel eenvoudig gemaakt om te delen wat we vinden in onze zoekresultaten. Dit betekent dat de term 'sociaal zoeken' nu relevanter is dan ooit en ik heb er alle vertrouwen in dat het onderzoek meer in deze richting gaat. Google ondersteunt dit door te verklaren:
Google Social Search helpt u relevante inhoud te ontdekken via uw sociale connecties, een reeks online vrienden en contacten. Inhoud van uw vrienden en kennissen is soms relevanter en betekenisvoller voor u dan inhoud van willekeurige personen. Een online filmrecensie is bijvoorbeeld handig, maar een filmrecensie van je beste vriend kan nog beter zijn.
De nieuwe Gmail-look. Volgens rapporten van CBS-nieuws had Gmail in november 2010 193,3 miljoen actieve gebruikers gemeld. Om die gebruikers aan boord van Google te houden, hebben ze de Gmail-ervaring gestroomlijnd in overeenstemming met hun ontwerpprincipes om de gebruikerservaring te verbeteren. Ze hebben dit gedaan door de volgende wijzigingen aan te brengen:
Gesprekken in Gmail zijn volledig opnieuw ontworpen om gemakkelijker te kunnen lezen bij het trawlen door e-mailthreads. Profielafbeeldingen zijn toegevoegd aan het gesprek, waardoor de interface de mogelijkheid heeft om u persoonlijker in gesprekken te betrekken. Dit helpt je ook bij het proberen bij te houden wie wat zei. Door veel items uit de oorspronkelijke gebruikersinterface te verwijderen, hebben ze hun gebruikers toegestaan om zich te concentreren op communicatie met collega's en vrienden.
De navigatie aan de linkerzijbalk is opnieuw ontworpen en kan worden aangepast. U kunt de grootte van het chatgebied zo groot of klein maken als u wilt, of het volledig verbergen door op het kleine pictogram linksonder in de zijbalk te klikken. Zoals met alle nieuwe producten, kunt u nu navigeren door de interface van Google met behulp van de tab- of pijltoetsen, waardoor de gebruiker opnieuw de vrijheid heeft om op de meest handige manier te navigeren.
Deze afbeelding markeert de nieuwe verbeterde zoekfunctie van Gmail E-mail is een belangrijke tool voor elke internetgebruiker. Zoveel zelfs dat er tussen ons elke dag naar schatting 294 miljard e-mails worden verzonden. Het is noodzakelijk dat we alle e-mails kunnen vinden die we rond onze inbox hebben verspreid (ik weet dat ik ongeveer 10.000+ heb). Google heeft op deze manier een helpende hand geboden die de vorige standaardzoekopdracht overtreft. Gebruikers kunnen nu op de vervolgkeuzelijst Zoeken klikken, waardoor een geavanceerd zoekvenster wordt weergegeven waarmee u in slechts enkele klikken een filter kunt maken vanuit elke zoekopdracht.
Of je de nieuwe look van Google nu leuk vindt of niet leuk vindt, het lijdt geen twijfel dat dit een succes was. Het is de laatste paar maanden heel wat gespreksonderwerp geweest op het web en heeft veel fans bereikt. Een deel van het succes zou kunnen liggen in de manier waarop Google veranderingen heeft doorgevoerd. In plaats van ervoor te kiezen om de hele nieuwe look in één keer te lanceren, hebben ze ervoor gekozen om wijzigingen in fases en meestal per product uit te brengen. Bij het kiezen van deze methode hebben ze gebruikersfeedback kunnen verzamelen en kunnen beslissen welke beslissingen hebben gewerkt en wat opnieuw moet worden geëvalueerd voor de volgende fase.
Het stapsgewijs vrijgeven heeft ook andere voordelen. Door de releasedata van elke UI-fase in de loop van verschillende maanden te organiseren, kan Google hun UI-wijzigingen omgeven met een heleboel mediahype. Iedereen van de BBC tot de New York Times heeft geschreven over de wijzigingen van Google, om nog te zwijgen van de vele tweets en opmerkingen die op verschillende sites zijn geplaatst met betrekking tot de wijzigingen. Dat kan zeker niet slecht zijn voor het bedrijfsleven!
Door naar bovenstaande kleurvoorbeelden te kijken, kunnen we zien dat Google het kleurenpalet beperkt heeft gehouden. Ze gebruiken blauw en rood om de belangrijke kenmerken te benadrukken die beide kleurenvarianten zijn van het oorspronkelijke Google-logo.
Een paar van Googles nieuwe knoppen en iconen illustreren Als onderdeel van hun nieuwe ontwerpstrategie heeft Google een nieuwe reeks knoppen in het assortiment geïntroduceerd. Deze knoppen zijn duidelijk, eenvoudig, beknopt en laten duidelijk het Google-ontwerpprincipe van 'focus' zien. Ze hebben een combinatie van HTML5 en CSS3 gebruikt om ze te maken. Een keuze die voor iedereen als een verrassing kan komen, is dat de knoppen eigenlijk geen knoppen zijn, en ook geen ankertags, maar in feite zijn gemaakt met divs met een rolattribuut ingesteld op "knop". Dit wordt gebruikt om aan te geven dat een generieke tag de rol speelt van een standaardwidget, zoals in dit geval een knop. Dit is handig voor mensen die mogelijk toegang zoeken tot de site via een apparaat zoals een schermlezer.
Google heeft subtiele CSS3-gradiënten gebruikt om hun knoppen op te laten heffen en hen dat beetje extra te geven knal door een subtiele slagschaduw toe te voegen aan de onderkant van de knop bij zweven. De knoppen zijn over het algemeen gegroepeerd in 2 categorieën 'stand-alone' en 'links, midden, rechts'. Met elke categorie met 2 verschillende maten 'standaard' en 'groot'. Door te kiezen voor deze 4 stijlen in zijn assortiment, kan Google een uniforme ervaring bieden voor zijn gebruikers.
Een factor die een goede gebruikerservaring in elk ontwerp stimuleert, is visuele aantrekkingskracht. Google heeft dit toegestaan door gebruikers toe te staan de schermdensiteit van bepaalde producten aan te passen. Deze optie wordt weergegeven in Gmail, Reader, Documenten en andere zware apps. De weergavedichtheid is opgesplitst in drie voorinstellingen. Comfortabel, gezellig en compact en deze passen zich aan de weergavedichtheid van uw computer aan. Met mediaqueries die al populair zijn, weet ik zeker dat dit type schermdichtheidsopties over een aantal andere webproducten zal verschijnen.
Nadat ik de afgelopen zes maanden de nieuwe UI-beginselen van Google behoorlijk heb bestudeerd, kan ik je vertellen wat ik heb waargenomen en heb geleerd van de strategie die ze hebben geïmplementeerd. Als een van de grootste merken op internet; ze hebben duidelijk begrepen (boven alles) dat eenvoud en een verenigde ervaring de sleutel is.
Eenvoud en een verenigde ervaring zijn de sleutelwoorden.
Het heeft me ook geleerd om de intensiteit op veel van mijn UI-elementen te laten vallen. Moet de slagschaduw echt een dekking van 80% hebben? Kan het een beetje worden verlaagd tot misschien 20 - 30%? Als ontwerpers willen we dat mensen de extra inspanningen waar we naar toe zijn gegaan, opmerken door die slagschaduw of highlight toe te voegen en soms hebben ze de neiging om te overcompenseren door deze te laten opvallen. Soms kunnen we door het subtieler te maken een groter, gladder effect bereiken dat aangenaam is voor de ogen en net zo goed wordt opgemerkt. Hetzelfde principe kan worden toegepast op eigenschappen zoals grensradius, probeer ze te verzachten van de gebruikelijke 5 of 10 px naar 1, 2 of 3 pixels. Natuurlijk moeten deze behandelingen niet op elk project worden toegepast, maar het maakt wel degelijk verschil wanneer u kiest voor een "schoon" ontwerp.
We kunnen ook leren dat het internet tegenwoordig op een heel andere plek staat, vergeleken met hoe het vroeger was. Met het recente nieuws dat Internet Explorer zijn browsers automatisch gaat bijwerken, kunnen we nu gaan vertrouwen op de nieuwste webtechnologieën om in de meeste browsers te werken. Google had er misschien een idee van, aangezien geen van hun nieuwe productontwerpen ergens anders onder Internet Explorer 8 kan worden gebruikt. We kunnen nu mogelijk gaan ontwerpen zoals we willen zonder zo veel browserbeperkingen. We moeten nu de tijd die hieruit wordt bespaard, opnieuw afstemmen op compatibiliteit van andere apparaten en schermresoluties om de ultieme gebruikerservaring te bieden.
Wat vindt u van de nieuwe UI-wijzigingen van Google, bent u een fan of vindt u ze lastig? Ik zou graag uw opmerkingen horen over wat u denkt.
Accentsconagua