Share
Eine der bemerkenswertesten Änderungen im Web im Jahr 2011 war die Einführung der neuen Benutzeroberfläche von Google in einer Reihe seiner Produkte. In diesem Artikel werde ich den Denkprozess hinter den Entscheidungen der Benutzeroberfläche von Google betrachten und feststellen, was wir aus ihren Methoden und Prinzipien lernen können.
Miniaturansicht von Alex Patrascu
Googles ursprüngliche Homepage…
… Der neue aktualisierte Look.
Die Aufgabe von Google besteht darin, die Informationen der Welt zu organisieren und allgemein zugänglich und nützlich zu machen.
Es ist offensichtlich, dass sich das Web seit den Anfängen von Google drastisch verändert hat. Benutzer erleben das Internet auf eine ganz andere Art und Weise als zuvor und betrachten es auf verschiedenen Geräten. Google hat Änderungen vorgenommen, um dies zu berücksichtigen. Es wurden auch Änderungen vorgenommen, um die Vielzahl der Google-Produkte zu vereinheitlichen und zusammenzuführen, so dass der Nutzer beim Navigieren zwischen Produkten reibungslos arbeiten kann. Google erklärt:
Unser Ziel ist es, Ihnen ein nahtloseres und konsistenteres Online-Erlebnis zu bieten, das unabhängig von dem von Ihnen verwendeten Google-Produkt oder dem verwendeten Gerät funktioniert.
Die von Google eingeführte neue Erfahrung basiert auf drei grundlegenden Gestaltungsprinzipien. Sehen wir uns diese an.
Die Idee dabei ist, dass der Benutzer sich auf die Aufgabe oder den Job konzentrieren kann, die er schnell und einfach erledigen möchte. Dies wird erreicht, indem unnötiges Durcheinander beseitigt und wichtige Elemente und Werkzeuge in den Vordergrund gestellt werden. Dies wird auch durch einfache Ergänzungen erreicht, z. B. das Hinzufügen kräftigerer Farben für den Aufruf von Aktionen oder das Ausblenden bestimmter Navigationselemente, wenn sie nicht verwendet werden.
Mithilfe dieser Methoden kann die Benutzeroberfläche von Google ihren Nutzern helfen, sich unbewusst auf die Aufgabe zu konzentrieren, die sie zu erledigen versuchen, und die Frustration durch die Benutzererfahrung abbauen.
Eine der größten Änderungen seit dem Start von Google ist die Art und Weise, wie Benutzer auf das Web zugreifen. Wir verwenden nicht mehr nur Google-Produkte auf unseren Desktops, sondern verwenden sie jetzt auf einer Vielzahl von Geräten, von Smartphones und Tablets bis hin zu hochauflösenden Monitoren und Fernsehern. Die Idee hinter "Elastizität" besteht darin, Benutzern ein nahtloses visuelles Erlebnis beim Übergang zwischen verschiedenen Geräten zu ermöglichen.
Obwohl die Technologien, die hinter Google und seinen Produkten stehen, recht komplex sind, möchten sie diese Komplexität nicht in ihrem Design darstellen. „Effortless“ bedeutet, den Look einfach, sauber und konsistent zu halten.
Das neue Branding von Google basiert auf Vertrauen, Schönheit, technologischer Reinheit und Innovation - Larry Page
Im Mittelpunkt der Neugestaltung von Google steht die neue Google Bar, die die alte horizontale schwarze Leiste ersetzt, die oben auf dem Bildschirm angezeigt wurde. Google erkannte, dass diese alte Bar einen wertvollen Platz auf unseren Bildschirmen einnimmt (30px, um genau zu sein). Daher entschied sie sich, ihr neues Aussehen zu verleihen, um sie an ihre neuen Gestaltungsprinzipien anzupassen.
Die neue Menüleiste umfasst das Google-Menü sowie Such- und Google Plus-Tools. Es hält die Suchleiste und die Navigation über alle Produkte hinweg gleich und ermöglicht einen einfachen Wechsel zwischen den Produkten. Um ein Produkt zu wechseln, fahren Sie einfach über das Google-Logo, wo Ihnen ein Dropdown-Menü angezeigt wird, mit dem Sie mühelos zwischen Google Mail, Docs, Maps, YouTube und anderen Produkten wechseln können.
Eddie Kessler (Technischer Leiter bei Google) erklärt
Vereinheitlichen, vereinfachen und verabschieden Sie sich von der alten Navigationsleiste!
Das Navigieren zu machen und das Teilen für die Benutzer extrem einfach zu gestalten, ist ein wesentlicher Bestandteil unserer Bemühungen, das Google-Erlebnis insgesamt zu verändern. Deshalb freuen wir uns sehr über diese Neugestaltung.
Links: Ein Design des Google + -Logos von Alex Alex Patrascu Rechts: Zeigt das Google + -Menü und die Benutzeroberfläche an Jede Google-Produkt-Benutzeroberfläche zu analysieren, wäre ein ganzes Buch für sich. Daher habe ich mich für diesen Artikel entschieden, um einige der beliebtesten Produkte von Google hervorzuheben.
Die Redesign-Veröffentlichung von Google fiel mit einem der am häufigsten besprochenen Webprojekte in diesem Jahr zusammen. Google +. Google + präsentierte vielleicht einige seiner neuen Gestaltungsprinzipien mehr als jedes andere Google-Produkt. Nach der Vorfreude auf die Veröffentlichung ist dies das Produkt, wenn ein Produkt erforderlich ist, um Nutzer zu Google zu locken. Es demonstriert ihre Design-Ideale auf wundervolle Weise und für Tage nach meinem Beitritt war ich fasziniert von der Einfachheit des Designs.
Das verdanken wir zum Teil dem Teammitglied von Andy Hertzfeld UI / UX, das bei Google Plus gearbeitet hat. Viele Leute haben Vergleiche zwischen Googles Stil und Apples gezogen, und das liegt möglicherweise daran, dass Andy in den 80er Jahren von Apple angestellt wurde, um am Macintosh-Projekt zu arbeiten. Andys Rolle in diesem Projekt bestand zum Teil darin, neben Joseph Smarr am Konzept der "Kreise" zu arbeiten.
Andy erklärt die Idee hinter Kreisen:
Die Idee, Menschen zu kategorisieren, war ziemlich offensichtlich. Dann gab es die Kernidee des Kreiseditors, der versuchte, das so lustig und einnehmend zu machen, etwas, das man tun möchte, weil es langweilig werden kann. Deshalb wollten wir den Benutzer dafür belohnen, ein Lächeln auf sein Gesicht ziehen und versuchen, es so angenehm zu machen, dass sie es weiterhin tun.
Google Plus ist jetzt ein wesentlicher Bestandteil der Gesamtstrategie von Google. Es kann in den meisten Google-Produkten integriert sein und ist mit einem Button sogar in den Suchergebnissen zu finden. Google hat es uns sehr leicht gemacht, das zu teilen, was wir in unseren Suchergebnissen finden. Der Begriff "soziale Suche" bedeutet jetzt mehr denn je und ich bin zuversichtlich, dass die Suche eher in diese Richtung geht. Google unterstützt dies durch die Angabe:
Mithilfe der Google Social Search können Sie relevante Inhalte aus Ihren sozialen Verbindungen, einem Satz Ihrer Online-Freunde und Kontakte ermitteln. Inhalte von Freunden und Bekannten sind für Sie manchmal relevanter und sinnvoller als Inhalte von beliebigen Personen. Zum Beispiel ist eine Online-Filmprüfung nützlich, aber eine Filmprüfung Ihres besten Freundes kann sogar noch besser sein.
Der neue Google Mail-Look. Berichten von CBS zufolge gab es in Gmail im November 2010 193,3 Millionen aktive Nutzer. Um diese Nutzer an Bord von Google zu behalten, haben die Gmail-Benutzer die Erfahrung von Google Mail im Einklang mit ihren Gestaltungsgrundsätzen optimiert, um die Benutzerfreundlichkeit zu verbessern. Sie haben dies getan, indem sie folgende Änderungen vorgenommen haben:
Die Konversationen in Google Mail wurden vollständig überarbeitet, um das Durchsuchen von E-Mail-Threads zu erleichtern. Der Konversation wurden Profilbilder hinzugefügt, sodass Sie mit der Benutzeroberfläche persönlicher an Konversationen teilnehmen können. Dies hilft auch beim Versuch zu verfolgen, wer was gesagt hat. Durch die Entfernung vieler Elemente aus der ursprünglichen Benutzeroberfläche konnten sie ihre Benutzer auf die Kommunikation mit Kollegen und Freunden konzentrieren.
Die Navigation der linken Seitenleiste wurde neu gestaltet und kann jetzt angepasst werden. Sie können die Größe des Chatbereichs beliebig groß oder klein ändern oder vollständig ausblenden, indem Sie auf das kleine Symbol unten links in der Seitenleiste klicken. Wie bei allen neuen Produkten können Sie sich jetzt mithilfe der Tabulatortaste oder der Pfeiltasten durch die Benutzeroberfläche von Google navigieren. Dies gibt dem Benutzer wieder die Freiheit, auf die bequemste Weise zu ihnen zu navigieren.
Dieses Bild zeigt die neue erweiterte Suchfunktion von Gmails E-Mail ist für jeden Internetbenutzer ein wichtiges Werkzeug. So sehr, dass wir zwischen uns jeden Tag geschätzte 294 Milliarden E-Mails versenden. Es ist zwingend notwendig, dass wir alle E-Mails finden, die wir in unserem Posteingang verteilt haben (ich weiß, dass ich ungefähr 10.000+ habe). Google hat dabei geholfen, die bisherige Standardsuche zu übertreffen. Benutzer können nun auf die Such-Dropdown-Liste klicken, in der ein erweitertes Suchfeld angezeigt wird, in dem Sie mit nur wenigen Klicks einen Filter aus einer beliebigen Suche erstellen können.
Egal, ob Sie das neue Aussehen von Google mögen oder nicht mögen, es ist zweifellos ein Erfolg. Es wurde in den letzten Monaten sehr viel im Internet diskutiert und hat viele Fans gewonnen. Ein Teil des Erfolgs könnte in der Art und Weise sein, in der Google Änderungen umgesetzt hat. Anstatt sich dafür zu entscheiden, den gesamten neuen Look auf einmal zu starten, haben sie sich dafür entschieden, Änderungen schrittweise und normalerweise nach Produkt zu veröffentlichen. Bei der Auswahl dieser Methode konnten sie Feedback von Benutzern einholen und entscheiden, welche Entscheidungen sich bewährt haben und welche Maßnahmen in der nächsten Phase neu bewertet werden müssen.
Die Veröffentlichung in Etappen hat auch andere Vorteile. Durch die Bereitstellung der Veröffentlichungsdaten jeder UI-Phase über einen Zeitraum von mehreren Monaten kann Google seine UI-Änderungen mit viel Medienhype umgeben. Jeder, von der BBC bis zur New York Times, hat über die Änderungen von Google geschrieben, ganz zu schweigen von den vielen Tweets und Kommentaren, die auf verschiedenen Websites bezüglich der Änderungen veröffentlicht wurden. Nun kann das sicherlich nicht schlecht fürs Geschäft sein!
Wenn Sie sich die obigen Farbbeispiele ansehen, können wir feststellen, dass Google die Farbpalette begrenzt hat. Sie verwenden Blau und Rot, um die wichtigen Merkmale hervorzuheben, die beide Farbvarianten des ursprünglichen Google-Logos sind.
Abbildung einiger neuer Schaltflächen und Symbole von Google Im Rahmen ihrer neuen Designstrategie hat Google eine Reihe neuer Schaltflächen für das gesamte Sortiment eingeführt. Diese Schaltflächen sind klar, einfach und prägnant und demonstrieren Googles Designprinzip "Fokus" recht deutlich. Sie haben eine Kombination aus HTML5 und CSS3 verwendet, um sie zu erstellen. Eine Auswahl, die für alle überraschend sein mag, ist, dass die Schaltflächen keine Schaltflächen sind und keine Ankertags sind, sondern mit divs erstellt werden, deren Rollenattribut auf "Schaltfläche" gesetzt ist. Dies wird verwendet, um anzuzeigen, dass ein generisches Tag die Rolle eines Standard-Widgets spielt, wie in diesem Fall eine Schaltfläche. Dies ist nützlich für Personen, die möglicherweise über ein Gerät wie einen Bildschirmleser auf die Website zugreifen.
Google hat subtile CSS3-Farbverläufe verwendet, um die Tasten anzuheben und ihnen das gewisse Extra zu geben Pop indem Sie einen subtilen Schlagschatten am unteren Rand des Hover-Buttons einfügen. Die Schaltflächen sind im Allgemeinen in zwei Kategorien unterteilt: "Stand Alone" und "Links, Mitte, Rechts". Bei jeder Kategorie gibt es zwei verschiedene Größen: "Standard" und "Groß". Durch die Wahl dieser vier Stile kann Google seinen Nutzern eine einheitliche Benutzererfahrung bieten.
Ein Faktor, der zu einer guten Benutzererfahrung in jedem Design führt, ist die optische Attraktivität. Google hat dies erlaubt, indem es Benutzern ermöglicht wird, die Bildschirmdichte für bestimmte Produkte anzupassen. Diese Option wird in GMail, Reader, Docs und anderen textintensiven Apps angezeigt. Die Anzeigedichte ist in drei Voreinstellungen aufgeteilt. Komfortabel, gemütlich und kompakt und passen sich der Bildschirmdichte Ihres Computers an. Ich bin mir sicher, dass diese Art von Bildschirmdichteoptionen bei einer Reihe von anderen Web-Produkten immer häufiger angezeigt werden.
Nachdem ich die neuen UI-Prinzipien von Google in den letzten sechs Monaten intensiv untersucht habe, kann ich Ihnen sagen, was ich beobachtet und aus der Strategie gelernt habe, die sie umgesetzt haben. Als eine der größten Marken im Internet; Sie haben (vor allem) klar verstanden, dass Einfachheit und eine einheitliche Erfahrung der Schlüssel sind.
Einfachheit und eine einheitliche Erfahrung sind der Schlüssel.
Es hat mich auch gelehrt, die Intensität vieler meiner UI-Elemente zu reduzieren. Muss der Schlagschatten wirklich 80% Deckkraft haben? Kann es auf vielleicht 20 - 30% gesenkt werden? Als Designer möchten wir, dass die Leute bemerken, dass wir zusätzliche Anstrengungen unternommen haben, indem wir diesen Schatten oder das Hervorhebungszeichen hinzugefügt haben. Dies kann manchmal zu einer Überkompensation führen, wenn es hervorgehoben wird. Wenn Sie es subtiler machen, können wir manchmal einen stärkeren, geschmeidigeren Effekt erzielen, der für die Augen angenehm ist und genauso wahrgenommen wird. Dasselbe Prinzip kann für Eigenschaften wie den Grenzradius angewendet werden. Versuchen Sie, diese von den üblichen 5 oder 10 Pixeln auf 1, 2 oder 3 Pixel zu reduzieren. Natürlich sollten diese Behandlungen nicht auf jedes Projekt angewendet werden, machen aber auf jeden Fall einen Unterschied, wenn Sie sich für ein "sauberes" Design entscheiden.
Wir können auch lernen, dass sich das Internet heutzutage an einem ganz anderen Ort befindet, als es früher war. Mit den neuesten Nachrichten, dass Internet Explorer seine Browser automatisch aktualisieren wird, können wir uns jetzt auf die neuesten Web-Technologien verlassen, um mit den meisten Browsern zu funktionieren. Google hatte vielleicht eine Idee davon, da keines seiner neuen Produktdesigns in etwas unterhalb von Internet Explorer 8 funktioniert. Wir können jetzt potenziell mit dem Design beginnen, ohne die Browser-Beschränkungen zu berücksichtigen. Wir sollten jetzt die Zeitersparnis neu ausrichten, um die geräteübergreifende Kompatibilität für andere Geräte und Bildschirmauflösungen zu schaffen, um die ultimative Benutzererfahrung zu gewährleisten.
Was halten Sie von den neuen Änderungen der Benutzeroberfläche von Google? Sind Sie ein Fan oder empfinden Sie sie als schmerzhaft? Ich würde gerne Ihre Kommentare dazu hören, was Sie denken.
Accentsconagua