Das Web Designer-Handbuch für Google Glass

Wenn ich direkt über meinem rechten Auge in den Bildschirm schaue, denke ich über all die Dinge nach, die Google Glass umfasst: die Zukunft, ein Kommunikationsgerät (und ein tolles Gerät dazu), ein Gesprächsstoff, eine Kamera, Informationen, die buchstäblich im rechten Winkel liegen vor Ihrem Gesicht und ab dem neuesten Update einen Webbrowser.

Für mich ist der Browser so interessant wie unvermeidlich. Es gab offensichtlich einige Einschränkungen, über die das Glass-Team nachdenken musste, sowie einige völlig neue Probleme. Und jetzt, da es raus ist, benutzen ungefähr 10.000 Glass Explorers es. Ich bin zuversichtlich, dass es bald Millionen geben wird. Und bald darauf sagen unsere Arbeitgeber, Kunden und Kunden: "Ich möchte, dass meine Website mit Glass arbeitet."


Was ist Google Glass??

Glass ist das neue Produkt von Google (noch in der Beta-Phase), das vor Ihrem Auge einen kleinen Bildschirm anbringt. Sie können dieses Gerät dann verwenden, um Fotos zu machen, Google-Suchen, Anrufe, Text- und Videochats durchzuführen und vieles mehr.


Es ist derzeit nicht für den Kauf von Verbrauchern verfügbar. Diejenigen, denen es gehört, haben sich für das Programm Glass Explorer beworben. Es wird gemunkelt, dass Glass irgendwann im Jahr 2014 zum Kauf von Verbrauchern zur Verfügung stehen wird, meine Vermutung ist im zweiten oder dritten Quartal. Mir wurde gesagt, dass es jetzt insgesamt etwa 10.000 Sets in freier Wildbahn gibt.

In einem kürzlich durchgeführten Update (XE7) hat Google einen Webbrowser für das Headset veröffentlicht.

Was ist mit dem Wettbewerb??

Google war vielleicht der erste, der so etwas ankündigte, und ist definitiv das größte Unternehmen, aber das bedeutet nicht, dass Google Glass das einzige Produkt dieser Art ist. Zunächst einmal gibt es Glass Up, das behauptet, dasselbe zu tun wie Google Glass.


Dann schrieb PCWorld über mehrere andere Unternehmen, die an ähnlichen Technologien arbeiten.

Es gibt auch Uhren, Armbänder und andere tragbare Technologien, die immer beliebter werden. Apple hat den Namen iWatch als Markenzeichen eingetragen, die Pebble Watch ist unglaublich beliebt und Artikel wie der Jawbone UP und der Fitbit sind voll im Markt. Neben Google Glass wird es eine Vielzahl von Geräten geben, die über Webbrowser verfügen. Als Webentwickler sollten wir darauf vorbereitet sein!


Mit dem Browser von Glass interagieren

Schauen wir uns zunächst an, wie der Browser von Glass funktioniert. Im Moment können Sie nicht direkt auf eine Website gehen. Sie führen eine Google-Suche durch und wählen Websites basierend auf den Ergebnissen aus.

Screenshot von mashable.com

Wählen Sie eine der Ergebniskarten aus, um dem Link zu folgen. Glass wird die Website aufrufen. Sie können dann einen Bildlauf durchführen, indem Sie einen Finger entlang der Berührungsleiste bewegen (die sich um Ihr Ohr herum bis zur Vorderseite der Schläfe erstreckt, oder Sie können zwei Finger auf die Berührungsleiste legen und "herumblicken"). Sie können "klicken" "Auf Links, indem Sie auf sie zentrieren und auf die Berührungsleiste tippen - Sie haben einen kleinen Kreis auf dem Bildschirm, der als Zeiger dient. Schließlich können Sie zoomen: zwei Finger zurück, um zu vergrößern, zwei Finger nach vorne, um herauszuzoomen.

Soweit ich das beurteilen kann, sind dies die einzigen Interaktionen, die Sie haben; Sie können zum Beispiel keine Formulare ausfüllen. Einfach anzeigen und auswählen.

Hinweis: Dies ist immer noch ein Beta-Produkt, daher sollte ich erwähnen, dass sich diese Interaktionen ändern können, wenn Glass für die Verbraucher freigegeben wird.

Aus diesem Grund sollten wir als Webentwickler darauf achten, wie wir unsere Websites entwickeln. Es stellt sich heraus, dass die Prinzipien, die ich besprechen werde, nicht so neu sind, sondern einen zukunftsfähigen Ansatz für das Webdesign vorschlagen. Dies ist wichtig, da Geräte wie Glass (oder sogar Appwells iWatch) auf den Markt gebracht werden.


Grundprinzipien, die im Auge zu behalten sind

Prinzipien für die Entwicklung von Glass Scharnier auf zwei unglaublich verbreiteten Ideen in der Webentwicklung: Responsive Web Design (RWD) und ein Mobile First-Ansatz.

Warum funktioniert das Anzeigen normaler Sites nicht?

Desktop- und nicht reagierende Websites werden in Glass 'Browser so dargestellt, wie dies auf Android- oder iOS-Geräten der Fall ist. Es ist jedoch unglaublich schwierig, den Text ohne Zoom zu lesen. Dasselbe gilt für die Auswahl von Links. Wenn Sie einen Link auswählen, müssen Sie eine bestimmte Genauigkeit angeben. Auf einer Desktop-Version einer Website ist diese Genauigkeit häufig nicht vorhanden.


Hinweis: Zum Zeitpunkt der Erstellung dieses Dokuments leitet scranton.edu auf eine mobile Site um, mit der Option, die vollständige Site aufzurufen. Anfang August wechseln sie zu einer responsiven Website.

Mobile zuerst!

Vor einigen Jahren schrieb Luke Wroblewski ein fantastisches Buch mit dem Titel "Mobile First". Darin erörtert er eine Vielzahl von Themen, unter anderem, warum es wichtig ist, bei der Entwicklung einer Website zuerst auf das mobile Erlebnis zu achten und dann von dort aus zu bauen. Wie Lukas es sagt:

Wenn Sie zuerst für Mobile entwerfen, können Sie im Vorfeld eine Vereinbarung über das Wesentliche treffen. Sie können dann dieselbe Begründung auf den Desktop anwenden…

Im Grunde geht es bei einem mobilen ersten Ansatz darum, die wichtigsten Inhalte zu ermitteln und zugänglich zu machen. Wenn Sie sich auf größere Bildschirme erweitern, werden Sie feststellen, dass die meisten zusätzlichen (oder weniger wichtigen) Funktionen tatsächlich unnötig sind.

Wroblewski stellt auch eine andere Theorie vor, die ich als Grundlage dafür ansehen würde, warum ein mobiler erster Ansatz so wichtig ist: Bei mobilen Benutzern haben Sie nur "einen Augapfel und einen Daumen". Aus diesem Grund muss Ihre Schnittstelle einfach genug sein, um nur diese zu verwenden.

Bei Google Glass trifft dies im wörtlichen Sinne zumindest zur Hälfte zu. Du hast nur einen Augapfel. Was den Daumen angeht, haben Sie je nach Betrachtungsweise entweder einen Finger oder keine Finger. Wie wir bereits festgestellt haben, können Sie die angezeigte Website nicht erreichen. Sie verwenden Ihre Finger nur als Hilfsmittel, um zu suchen, wo Sie möchten.


Mobile First für Glas implementieren

Sie sind wahrscheinlich mit Responsive Web Design vertraut. Dies ist die Idee, dass wir unsere Websites dazu bringen sollen, auf die Bildschirme zu reagieren, auf denen sie angezeigt werden. Bei Google Glass bedeutet dies ein Ansichtsfenster von 427 x 240 Pixel. Aber wie Sie sich vorstellen können, ist es etwas komplexer.

Es gibt bestimmte Möglichkeiten, Medienabfragen zu nutzen, um sicherzustellen, dass unsere Websites auf Glass gut funktionieren. Dort verwenden Sie wenig mehr als Ihr Auge, um die Website zu steuern.

Machen Sie die Website lesbar!

In erster Linie möchten wir, dass unsere Websites auch auf Glas gut lesbar sind. So sieht eine native Karte bei Google Glass aus:


Ich schlage nicht vor, dass wir unsere Designs auf etwas Ähnliches beschränken, aber wir sollten bedenken, dass das Betrachten des Bildschirms wie das Betrachten eines 25-Zoll-HD-Bildschirms aus acht Fuß Entfernung ist. Wir möchten nicht, dass unsere Benutzer viel hineinzoomen müssen und dann den Kopf bewegen müssen, um die gesamte Website zu betrachten. Wir möchten, dass sie in der Lage sind, die Informationen, die sie auf der Website erhalten haben, schnell und einfach zu erhalten. Bei der Gestaltung sollten wir daran denken:

  1. Verwenden Sie eine geeignete Schriftgröße. Glasbenutzer haben nicht den Luxus, das Gerät näher an ihr Gesicht zu halten, um den Text zu lesen.
  2. Verwenden Sie kontrastierende Farben. Sie möchten einen spürbaren Unterschied zwischen dem Hintergrund und dem Text für Ihre Benutzer erstellen, insbesondere wenn es besonders hell ist oder viel im Hintergrund läuft. Ich sage nicht, dass Sie Ihr gesamtes Design nur für Glas ändern müssen, aber es ist etwas, das Sie während des Designprozesses beachten sollten.
  3. Machen Sie Links offensichtlich. Sie sollten sich deutlich abheben, denn nur so kann ein Nutzer mit Ihrer Website interagieren. In der Tat…

Machen Sie die Verwendung von Links einfach!

Anker sollten große, einfache Ziele für Ihre Benutzer sein. Sie möchten nicht, dass sie den Kopf häufig umkreisen, nur um auf eine andere Seite Ihrer Website wechseln zu können. Erstellen Sie Verknüpfungsblöcke, die auffallen und den Benutzer auf den gesamten anklickbaren Bereich aufmerksam machen, damit er weiß, wie genau er sein muss.

Einen Link auf meiner Site auswählen (Cursor beachten)

Verwenden Sie Aufrufe, um großzügig zu handeln

Vollständig input-basierte Websites funktionieren mit dem Browser von Glass nicht gut. Zu diesem Zeitpunkt haben Nutzer Ihre Website aufgrund einer von ihnen durchgeführten Google-Suche gefunden. Stellen Sie sicher, dass Sie Ihre Informationen auf einfache Art und Weise präsentieren und Ihren Benutzern dann umsetzbare Elemente zur Verfügung stellen. "Hier anrufen", ?? oder "E-Mail an ..." Zeigen Sie ihnen eine Adresse, die sie in Glass einstecken können, um Anweisungen zu erhalten. Geben Sie ihnen Dinge, die sie unabhängig von Ihrer Website tun können.

Spitze: Anzeigen sind der Teufel. Ich war auf einer Website mit einer Popup-Anzeige auf Glass und es machte die Website völlig unbrauchbar, da das "X" an einem Ort war, an dem ich nicht darauf klicken konnte. Vergessen Sie vielleicht für jetzt (oder für immer) Werbung auf Glas..

Schnellansicht: Casabona.org

Meine Website (casabona.org) funktioniert überraschend gut auf Glass, zum Teil weil ich die oben aufgeführten Konventionen unbeabsichtigt befolgt habe. Ich möchte vielleicht die Schriftgröße etwas erhöhen, damit sie einfacher zu lesen ist, aber beim Navigieren derzeit keine Probleme auftreten.

RWD und Mobile First sind zwei sehr wichtige Säulen, auf die wir uns verlassen sollten. Ich habe meine Website lange vor Google Glass umgestaltet, weil ich aus diesen Themen gelernt habe, und es stellte sich heraus, dass sie mich am meisten dort hin gebracht haben. Tatsache ist, dass wir nicht wissen, was um das Eck herum liegt, wenn es um das Web geht.

Von Brad Frost Dies ist das Web

Ein Hinweis zum Testen und Entwickeln

Die große Mehrheit der Menschen verfügt derzeit nicht über Google Glass. Daher ist das Testen möglicherweise schwierig. Es gibt einige Testmethoden, darunter die Mirror-API von Google, verschiedene Lösungen von Drittanbietern und einen inoffiziellen Emulator. Alle oder keine dieser Lösungen funktionieren möglicherweise sogar. Zum Zeitpunkt der Erstellung dieses Berichts wurden die meisten nicht aktualisiert, um den neuen Browser aufzunehmen.

Andererseits scheint es nicht viele Beispiele zu geben, in denen Personen speziell für Glass entworfen wurden, oder Beispiele dafür, wie Websites auf Glass aussehen… das könnte etwas zu bedenken sein :)

Wenn Sie an der Entwicklung nativer Google Glass-Apps interessiert sind, besuchen Sie die Mirror-API von Google, um einige großartige Tutorials zu erhalten!


Halte es einfach

Zum Abschluss möchte ich Ihnen sagen, was die Entwickler von Google I / O dieses Jahr gesagt haben: Halten Sie es einfach. Die Interaktion mit Glas muss einfach und leicht sein.

Ich habe hier gerade erst die Oberfläche gekratzt. Der Browser von Glass ist noch relativ neu und es gibt einiges zu entdecken. In meinem kommenden E-Book auch betitelt, Das Web Designer-Handbuch für Google Glass, Ich werde tiefer in die Fähigkeiten von Glass 'Browser einsteigen, was bei zukünftigen Glas-Builds (XE8 und darüber) zu beachten ist, und ein paar Fallstudien für das, was bereits da ist, betrachten.

Wenn Glass abhebt, vermute ich zunächst, dass Entwickler separate Sites erstellen, die für Glass optimiert sind, z. glass.website.com. Wir sollten jedoch versuchen, uns an die Prinzipien zu halten, die von Luke W und Ethan Marcotte aufgestellt wurden, um großartige Web-Erlebnisse zu schaffen, die unabhängig vom Gerät sind. Glas ist zwar das erste seiner Art, aber sicherlich nicht das letzte.

Also was denkst du? Werden Websites auf Glas (oder sogar Glas im Allgemeinen) ein Hit sein? Lohnt sich ein Tutorial zur Optimierung einer Website für Google Glass? Ich freue mich darauf, Ihre Gedanken in den Kommentaren zu hören!