Was wir von Googles neuer Benutzeroberfläche (Bilder und Text) lernen können
|
Die bedeutendste Website-Änderung im Jahr 2011 betraf Google, das für eine Reihe seiner Produkte eine neue Benutzeroberfläche einführte. In diesem Artikel werden die Überlegungen hinter dem Benutzeroberflächen-Design von Google untersucht. Vielleicht können wir daraus einige wertvolle Methoden und Designprinzipien lernen. Geschichte der Google-Benutzeroberflächenreform 1998   Einheitliches Google-Erlebnis Die Webseite von Google hat sich seit ihren Anfängen radikal weiterentwickelt. Benutzer haben mehr Möglichkeiten als je zuvor, das Internet zu erleben und können es auf verschiedenen Geräten ansehen und erleben. Google hat Änderungen vorgenommen, um diese Änderungen widerzuspiegeln. Die Änderungen werden auch vorgenommen, um eine Reihe von Google-Produkten zu vereinheitlichen und sie so zu integrieren, dass Benutzer problemlos zwischen den Produkten wechseln können. Die Erklärung von Google lautet: „Unser Ziel ist es, Ihnen ein nahtloseres und konsistenteres Online-Erlebnis zu bieten, unabhängig davon, welches Google-Produkt Sie verwenden oder auf welchem Gerät Sie es nutzen.“ Das neue Erlebnis von Google basiert auf drei zentralen Designprinzipien. Schauen wir uns diese drei Prinzipien an. Abonnieren Fokus Bei Fokus geht es darum, Benutzern die Konzentration auf die Aufgabe oder Arbeit zu ermöglichen, die sie schnell und einfach erledigen möchten. Beseitigen Sie das Durcheinander und behalten Sie Ihre wichtigsten Inhalte und häufig verwendeten Tools im Blick. Fügen Sie gleichzeitig einfache Dinge hinzu, beispielsweise die Verwendung heller Farben, um nicht verwendete Navigationsfunktionen hervorzuheben oder auszublenden. Auf diese Weise trägt die Benutzeroberfläche von Google dazu bei, dass sich die Benutzer unbewusst auf die Aufgaben konzentrieren, die sie zu erledigen versuchen, und verringert das Risiko von Misserfolgen beim Benutzer. Elastizität Die größte Veränderung seit Beginn der Veränderungen bei Google betrifft die Art und Weise, wie seine Benutzer auf das Internet zugreifen. Google-Produkte werden nicht nur auf Desktop-Computern, sondern zunehmend auch auf Mobilgeräten wie Smartphones, hochauflösenden Tablets und Fernsehgeräten zu finden sein. Der Zweck der „Flexibilität“ besteht darin, Benutzern beim Wechsel zwischen verschiedenen Geräten ein konsistentes visuelles Erlebnis zu ermöglichen. Mühelos – Benutzerfreundlichkeit <br />Obwohl die von Google verwendete Technologie und die Produkte recht komplex sind, möchte das Unternehmen diese Komplexität nicht in seinem Design darstellen. Die Idee der „Benutzerfreundlichkeit“ besteht darin, das Produkt einfach, sauber und konsistent zu halten. „Die neue Marke von Google wird auf Vertrauen, Schönheit, Technologie und Innovation basieren.“ – Larry Page Google-Navigationsleiste  Die neue Menüleiste kombiniert die Navigationsleiste von Google mit der Suchleiste und der Google+-Symbolleiste. Sämtliche Produktfunktionen der Suchleiste und Navigationsleiste bleiben erhalten, ein einfacher Wechsel zwischen den Produkten ist jedoch möglich. Durch einfaches Überfahren des Google-Logos mit der Maus wird ein Dropdown-Menü angezeigt, über das Benutzer effizient und einfach zwischen Gmail, Docs, Maps, YouTube und anderen Produkten wechseln können. Eddie Kessler (technischer Leiter von Google) erklärt: „Vereinheitlichen, vereinfachen und der alten Navigationsleiste Lebewohl sagen! Den Benutzern ein supereinfaches Navigationserlebnis zu bieten, ist ein wichtiger Teil der Veränderung des gesamten Browsing-Erlebnisses von Google und die Richtung, in die wir arbeiten. Deshalb freuen wir uns so sehr über dieses Redesign.“ Google +  Die Neugestaltung von Google fällt mit dem Start eines der wichtigsten Webprojekte des Jahres zusammen: Google+. Google+ demonstriert seine neuen Designprinzipien vielleicht besser als jedes andere Google-Produkt. Was die Erwartungen nach der Markteinführung betrifft, so stand Google+ ganz oben auf der Liste, wenn es ein Produkt gab, mit dem man Nutzer anlocken wollte. Es veranschaulicht perfekt die Designphilosophie von Google und schon wenige Tage nachdem ich dem Kreis beigetreten war, war ich von seinem schlichten Design fasziniert. Google Plus wurde teilweise vom UI/UX-Team von Andy Hertzfeld entwickelt. Viele Leute vergleichen den Designstil von Google mit dem von Apple. Diese Kontroverse könnte auf die Tatsache zurückzuführen sein, dass Andy in den 1980er Jahren bei Apple angestellt war und am Macintosh-Projekt teilnahm. Alles, was Andy im Rahmen des Projekts tun musste, war, mit Joseph Smarr das Konzept der „Kreise“ zu erkunden. Andy erläuterte die Idee dahinter: „Die Idee war offensichtlich, Menschen zu kategorisieren. Zweitens ist die Kernidee von ‚Circles‘, dass es Spaß macht und spannend ist, dass es etwas ist, das man gerne macht. Weil es langweilig werden kann, belohnen wir die Leute für das, was sie tun, zaubern ihnen ein Lächeln ins Gesicht und versuchen, ihnen Freude an dem zu vermitteln, was sie tun.“ Google Plus ist mittlerweile ein fester Bestandteil der Gesamtstrategie von Google. Es wird in die meisten Produkte von Google integriert und die entsprechende Schaltfläche wird sogar in den Suchergebnissen sichtbar sein. Google macht es einfach, unsere Entdeckungen zu teilen. Der Begriff „soziale Suche“ hat mehr Bedeutung als je zuvor und ich bin davon überzeugt, dass die Suche hier die Nase vorn hat. Google sagte: „Google Social Search hilft Ihnen dabei, relevante Inhalte aus Ihrem sozialen Netzwerk zu entdecken und ein Netzwerk aus Ihren Online-Freunden und -Kontakten aufzubauen. Manchmal sind Inhalte von Freunden und Bekannten relevanter und aussagekräftiger als Inhalte von Fremden. Beispielsweise kann eine Filmkritik von einer Online-Site hilfreich sein, aber es wäre nützlicher, wenn die Kritik von einem Ihrer Freunde käme.“ Google Mail  Laut CBS hatte Gmail im November 2010 193,3 Millionen aktive Benutzer. Um diese Nutzer zu halten, hat Google das Design von Gmail vereinfacht, um das Benutzererlebnis zu verbessern. Sie haben die folgenden Änderungen vorgenommen: Vereinfachter Konversationsmodus Der Konversationsmodus in Gmail wurde komplett neu gestaltet, um das Durchsuchen archivierter E-Mails zu erleichtern. Der Konversation werden Profilbilder hinzugefügt, damit Benutzer besser an der Konversation teilnehmen können. Es hilft auch dabei, den Überblick über das zu behalten, was Sie sagen. Anders als die ursprüngliche Benutzeroberfläche ermöglicht das neue Design den Benutzern, sich auf die Kommunikation mit Kollegen und Freunden zu konzentrieren. Gute Navigation Die Navigation in der linken Seitenleiste wurde neu gestaltet und kann vom Benutzer angepasst werden. Benutzer können die Größe des Chatbereichs nach ihren Wünschen ändern oder ihn vollständig ausblenden, indem sie auf ein kleines Symbol unter der linken Seitenleiste klicken. In Kombination mit allen neuen Produkten können Benutzer mithilfe der Tabulator- oder Pfeiltasten auf ihre eigene Weise durch die Google-Oberfläche navigieren, was den Benutzern wiederum eine besonders bequeme Navigation ermöglicht. Erweiterte Suche  Phasenweise Einführung <br />Ob Ihnen der neue Look von Google gefällt oder nicht, es besteht kein Zweifel daran, dass er ein Erfolg ist. In den letzten Monaten wurde es im Internet zu einem heiß diskutierten Thema und hat zahlreiche Fans gewonnen. Ein Teil dieses Erfolgs könnte auf Änderungen zurückzuführen sein, die Google bereits vorgenommen hat. Google bevorzugt stufenweise Rollouts statt einer einmaligen Einführung, da dies oft vom Produkt abhängt. Auf diese Weise können sie Benutzerfeedback in Echtzeit sammeln, entscheiden, was funktioniert, und die nächste Phase des Projekts neu bewerten. Eine schrittweise Einführung hat auch noch weitere Vorteile. Google nutzte die Medien, um für seine Benutzeroberfläche zu werben, indem es in den vergangenen Monaten Neuigkeiten zum Veröffentlichungstermin der Benutzeroberfläche veröffentlichte. Von der BBC über die New York Times bis hin zu anderen Medien berichten alle über die Änderungen bei Google, ganz zu schweigen von den zahlreichen Kommentaren in Community-Foren. Ein tiefer Einblick in die Google-Benutzeroberfläche Farben in der Google-Benutzeroberfläche  Taste  Google verwendet CSS3, um einen abgerundeten und feinen Schaltflächeneffekt mit Farbverlauf zu erzielen, und fügt an der Unterseite der Hover-Schaltfläche einen subtilen Schatten hinzu, um ein besonders modisches Gefühl zu vermitteln. Schaltflächen werden im Allgemeinen in zwei Kategorien unterteilt: „Unabhängig“ und „Links, Mitte, Rechts“. Jede Kategorie hat 2 unterschiedliche Größen: „Standard“ und „Groß“. Durch die Auswahl dieser vier Stile in seinem gesamten Sortiment bietet Google seinen Nutzern ein einheitliches Erlebnis. Komfortabel, gemütlich, kompakt  Fazit <br />Die letzten sechs Monate waren ziemlich intensiv mit der Erforschung der neuen UI-Designprinzipien von Google verbunden, und ich kann Ihnen mitteilen, was ich dabei beobachtet und gelernt habe und welche Strategien sie umgesetzt haben. Als eine der größten Marken im Internet haben sie klar verstanden, dass ein einfaches und einheitliches Erlebnis von entscheidender Bedeutung ist. „Der Schlüssel liegt in der Einfachheit und einem einheitlichen Erlebnis.“ Ich habe dadurch auch gelernt, die Intensität von UI-Elementen abzumildern. Muss der Schatten wirklich 80 % Deckkraft haben? Kann er auf 20-30 % reduziert werden? Als Designer möchten wir, dass die Leute die zusätzliche Mühe bemerken, die wir uns gemacht haben, z. B. indem wir den Schattenprozentsatz reduziert oder den Übergang deutlicher gemacht haben, damit er leichter zu sehen ist. Manchmal können durch subtile Änderungen bessere und sanftere Effekte erzielt werden, sei es um visuelle Effekte zu erzeugen oder die Aufmerksamkeit des Benutzers zu erregen, die erwartete Idee kann erreicht werden. Dasselbe Prinzip lässt sich auf den Rahmenradius anwenden. Versuchen Sie, ihn von den üblichen 5 oder 10 Pixeln auf 1, 2 oder 3 Pixel zu verringern. Natürlich sind diese Vorgehensweisen nicht für jedes Projekt geeignet, aber wenn Sie sich für ein „sauberes“ Design entscheiden, ist dies sicherlich die beste Wahl. Gleichzeitig haben wir gelernt, dass das Internet heute ein ganz anderer Ort ist als je zuvor. Die neuesten Nachrichten über Internet Explorer sind, dass der IE den Browser automatisch aktualisiert und wir uns nun auf die neuesten Webtechnologien verlassen und browserübergreifend arbeiten können. Google verfolgt diesbezüglich möglicherweise einen neuen Ansatz und verzichtet auf die Entwicklung neuer Produktdesigns. Jetzt können wir ohne Browsereinschränkungen entwerfen. Jetzt ist es an der Zeit, unsere Bemühungen auf die Erstellung von Websites zu konzentrieren, die mit allen Geräten und Bildschirmauflösungen kompatibel sind und letztendlich zu einem großartigen Benutzererlebnis führen. |
<<: So betten Sie Dateien im Flash-Videoformat (FLV, SWF) in HTML-Dateien ein
>>: MySQL8.0-Installationsprozess unter Centos7 in VMware Workstation16 und Navicat-Remoteverbindung
Artikel empfehlen
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.18 (Linux)
Dieser Artikel zeichnet das grafische Tutorial zu...
Analyse impliziter Fehler bei der gleichzeitigen Replikation von MySQL 5.7
Vorwort Die meisten unserer MySQL-Onlineumgebunge...
Eine kurze Analyse der Crontab-Aufgabenplanung in Linux
1. Erstellen Sie eine Planungsaufgabe Anweisung c...
Beispielcode für CSS3 zum Erzielen eines Bildlaufleisten-Verschönerungseffekts
Der spezifische Code lautet wie folgt: /*Breite d...
Lösen Sie das Problem, dass bei Verwendung von GDB in Docker keine Haltepunkte eingegeben werden können
Frage Beim Ausführen von gdb im Docker wird ein H...
Einfaches Anwendungsbeispiel für eine rekursive Vue-Komponente
Vorwort Ich glaube, dass viele Studenten bereits ...
MySQL-Variablendeklaration und Analyse gespeicherter Prozeduren
Deklarieren von Variablen Festlegen globaler Vari...
Wie man mit React elegant CSS schreibt
Inhaltsverzeichnis 1. Inline-Stile 2. Importmetho...
Node.js + Express + Socket realisiert einen Online-Chatroom für mehrere Personen in Echtzeit
In diesem Artikel wird der spezifische Code von N...
Analyse und Lösung des a.getAttribute(href,2)-Problems in IE6/7
Kurzbeschreibung <br />In IE6 und 7 wird in...
XHTML-Erste-Schritte-Tutorial: XHTML-Hyperlinks
Es ist keine Übertreibung, zu sagen, dass Hyperlin...
Verwendung des SerialPort-Moduls in Node.js
Inhaltsverzeichnis Zweck Modulinstallation Grundl...
Analyse des Prinzips und der Verwendung von MySQL-Benutzerdefinierten Funktionen
Dieser Artikel veranschaulicht anhand von Beispie...
Docker startet den Implementierungsprozess der MySQL-Konfiguration
Inhaltsverzeichnis Tatsächlicher Kampfprozess Beg...
Mysql-Trigger werden in PHP-Projekten zum Sichern, Wiederherstellen und Löschen von Informationen verwendet
Beispiele: Über den PHP-Hintergrundcode können Si...