La guida di Web designer per Google Glass

Mentre guardo lo schermo sopra l'occhio destro, penso a tutte le cose che Google Glass è: il futuro, un dispositivo di comunicazione (e uno eccezionale), un pezzo di conversazione, una telecamera, informazioni letteralmente nel Davanti al tuo viso, e come l'ultimo aggiornamento, un browser web.

Per me, il browser è tanto interessante quanto inevitabile. C'erano ovviamente alcuni vincoli a cui la squadra di Glass doveva riflettere, così come alcuni problemi completamente nuovi. E ora che è fuori, ci sono circa 10.000 Glass Explorers che lo usano. Sono fiducioso che presto ci saranno milioni. E poco dopo, i nostri datori di lavoro, clienti e clienti diranno: "Voglio che il mio sito web lavori su Glass".


Che cos'è Google Glass?

Glass è il nuovo prodotto di Google (ancora in beta) che appone un piccolo schermo davanti ai tuoi occhi. Puoi quindi utilizzare quel dispositivo per scattare foto, eseguire ricerche su Google, chiamare, inviare messaggi di testo, chat video e altro ancora.


Al momento non è disponibile per l'acquisto da parte dei consumatori - chi ne fa richiesta è nel programma di Glass Explorer. Si dice che il vetro sarà disponibile per l'acquisto da parte dei consumatori nel 2014, a mio avviso è durante il secondo o il terzo trimestre. Mi è stato detto che, in totale, ci sono circa 10.000 set in natura in questo momento.

In un recente aggiornamento, XE7, Google ha rilasciato un browser web per il set di testa.

Che dire della concorrenza?

Google potrebbe essere stata la prima ad annunciare qualcosa del genere e sicuramente è la più grande azienda, ma ciò non significa che Google Glass sia l'unico prodotto del suo genere in circolazione. Per cominciare, c'è Glass Up che afferma di fare la stessa cosa che fa Google Glass.


Quindi PCWorld ha scritto su diverse altre aziende che lavorano su tecnologie simili.

Ci sono anche orologi, braccialetti e altre tecnologie indossabili che stanno diventando popolari. Apple ha registrato il nome di iWatch, il Pebble Watch è incredibilmente popolare e articoli come Jawbone UP e Fitbit sono nel mercato pieno. Insieme a Google Glass, ci sarà tutta una serie di dispositivi che potrebbero avere browser web e, come sviluppatori web, dovremmo essere preparati!


Interagire con il browser di Glass

Per prima cosa, vediamo come funziona il browser di Glass. A partire da ora, non puoi davvero andare direttamente a un sito web. Esegui una ricerca su Google e scegli siti web in base ai risultati.

Screenshot da mashable.com

Seleziona una delle carte risultato per seguire il collegamento e Glass farà apparire il sito web. È quindi possibile scorrere facendo scorrere un dito lungo la barra di contatto (che si estende dall'orecchio alla parte anteriore della tempia, oppure è possibile posizionare due dita sulla barra di contatto e "guardare intorno" il sito. "sui collegamenti centrando su di essi e toccando la barra del tocco- hai un piccolo cerchio sullo schermo che funge da puntatore. Infine, puoi zoomare: due dita indietro per ingrandire, due dita in avanti per rimpicciolire.

Per quello che posso dire, queste sono le uniche interazioni che hai; non puoi compilare moduli, per esempio. Basta visualizzare e selezionare.

Nota: Questo è ancora un prodotto beta, quindi dovrei ricordare che queste interazioni potrebbero cambiare nel momento in cui Glass viene rilasciato ai consumatori.

È per questo che noi, in quanto sviluppatori web, dovremmo essere consapevoli di come sviluppiamo i nostri siti web. A quanto pare, i principi che ho intenzione di discutere non sono del tutto nuovi, ma suggeriscono un approccio al design del futuro; importante come dispositivi come Glass (o anche iWatch favolosi di Apple) vengono lanciati sul mercato.


Principi di base da tenere a mente

Principi per lo sviluppo di Glass hinge su due idee incredibilmente diffuse nello sviluppo web in questo momento: Responsive Web Design (RWD) e un approccio Mobile First.

Perché la visualizzazione di siti normali non funziona

I siti desktop / non reattivi vengono visualizzati correttamente nel browser di Glass, proprio come fanno su dispositivi Android o iOS. Tuttavia, il testo è incredibilmente difficile da leggere senza zoom; lo stesso vale per la selezione dei link. C'è un certo livello di precisione che ti serve quando selezioni un link guardandolo. Su una versione desktop di un sito web, quella precisione spesso non c'è.


Nota: Al momento della stesura di questo documento, scranton.edu reindirizza a un sito mobile con la possibilità di visualizzare l'intero sito. All'inizio di agosto, passeranno a un sito Web reattivo.

Primo cellulare!

Un paio di anni fa, Luke Wroblewski ha scritto un libro fantastico chiamato Mobile First. In essa discute tutta una serie di argomenti, tra cui il motivo per cui è importante considerare l'esperienza mobile prima di sviluppare un sito Web, quindi costruire da lì. Come dice Luca:

Se progetti prima per dispositivi mobili, puoi creare [un] accordo in anticipo su ciò che conta di più. È quindi possibile applicare la stessa motivazione al desktop ...

Fondamentalmente, il punto di un primo approccio mobile è determinare il contenuto più importante e presentarlo in modo accessibile. Man mano che ci si espande verso gli schermi più grandi, si scoprirà che la maggior parte delle funzioni aggiuntive (o meno importanti) non sono effettivamente necessarie.

Wroblewski presenta anche un'altra teoria, che considererei una base per spiegare perché un primo approccio mobile è così importante: con gli utenti mobili, hai solo "un bulbo oculare e un pollice". Per questo motivo, l'interfaccia deve essere abbastanza facile da utilizzare solo con quelli.

Con Google Glass, questo è almeno per metà vero in senso letterale. Hai solo un bulbo oculare. Per quanto riguarda il pollice, a seconda di come lo guardi, hai un dito o no. Come abbiamo scoperto in precedenza, non puoi raggiungere e toccare il sito web che stai visualizzando. Usa le dita solo come aiuto per guardare dove vuoi.


Implementazione di Mobile First for Glass

Probabilmente hai familiarità con il responsive Web Design. Questa è l'idea che dovremmo far sì che i nostri siti web rispondano agli schermi su cui vengono visualizzati. Con Google Glass, questo significa un viewport di 427x240px. Ma come puoi immaginare, è un po 'più complesso di così.

Ci sono alcune cose che possiamo fare usando le media query per assicurarci che i nostri siti web funzionino bene su Glass, dove stai usando poco più del tuo occhio per controllare il sito web.

Rendi leggibile il sito web!

Innanzitutto, vogliamo che i nostri siti web siano facili da leggere, anche su Glass. Ecco come appare una carta nativa su Google Glass:


Non sto suggerendo di sottoporre i nostri progetti a qualcosa del genere, ma dovremmo ricordare che guardare lo schermo è come vedere uno schermo da 25 pollici ad alta definizione da otto piedi di distanza. Non vogliamo che i nostri utenti debbano zoomare molto e quindi devono muovere la testa per guardare l'intero sito. Vogliamo che siano in grado di ottenere le informazioni che arrivano sul sito Web per ottenere rapidamente e facilmente. Mentre progettiamo dovremmo ricordare di:

  1. Usa dimensioni del carattere appropriate. Gli utenti del vetro non hanno il lusso di tenere il dispositivo più vicino al loro volto per leggere il testo.
  2. Usa colori contrastanti. Vuoi creare una differenza evidente tra lo sfondo e il testo per i tuoi utenti, specialmente se all'esterno è particolarmente luminoso o se ci sono molte cose in sottofondo. Non sto dicendo di cambiare l'intero design solo per Glass, ma è qualcosa da tenere a mente durante il processo di progettazione.
  3. Rendi i collegamenti evidenti. Dovrebbero spiccare sul grande perché questo è davvero l'unico modo in cui un utente interagirà con il tuo sito web. Infatti…

Rendi i collegamenti facili!

Le ancore dovrebbero essere obiettivi grandi e facili per i tuoi utenti. Non vuoi che girino intorno alla testa solo per essere in grado di spostarti su una pagina diversa del tuo sito. Crea blocchi di link che si distinguono e rendi gli utenti consapevoli dell'intera area cliccabile, in modo che sappiano esattamente quanto devono essere precisi.

Selezione di un link sul mio sito (notare il cursore)

Usa le chiamate all'azione generosamente

I siti web completamente basati su input non funzioneranno bene con il browser Glass '. A questo punto, gli utenti avranno trovato il tuo sito a causa di una ricerca di Google eseguita. Assicurati di presentare le tue informazioni in modo semplice e quindi di dare agli utenti oggetti utilizzabili da fare. "Chiama qui", ?? oppure "Inviaci un'e-mail a ..." Mostra loro un indirizzo che possono collegare a Glass per ottenere indicazioni stradali. Offri loro le cose che possono fare indipendentemente dal tuo sito web.

Mancia: Le pubblicità sono il diavolo. Sono andato a un sito Web con un annuncio pop-up su Glass e ha reso il sito completamente inutile perché la "X" si trovava in un posto dove non potevo cercare di cliccarci sopra. Forse dimenticarti degli annunci su Glass per ora (o per sempre).

Sguardo rapido: Casabona.org

Il mio sito web (casabona.org) funziona sorprendentemente bene su Glass, in parte perché inavvertitamente ho seguito le convenzioni sopra elencate. Potrei voler aumentare un po 'la dimensione del carattere, quindi è più facile da leggere, ma la navigazione al momento non fornisce problemi.

RWD e Mobile First sono due pilastri molto forti su cui dovremmo fare affidamento. Ho ridisegnato il mio sito molto prima di Google Glass a causa di ciò che ho imparato leggendo questi argomenti, e si scopre che mi hanno preso la maggior parte del modo lì. Il fatto è che non sappiamo cosa c'è dietro l'angolo in cui il Web è interessato.

Da Brad Frost's This is the Web

Una nota su test e sviluppo

La stragrande maggioranza delle persone al momento non ha Google Glass e, a causa di ciò, i test potrebbero essere difficili. Esistono alcuni metodi di test, tra cui l'API Mirror di Google, varie soluzioni di terze parti e un emulatore non ufficiale. Tutte o nessuna di queste soluzioni potrebbero persino funzionare; al momento della stesura di questo, la maggior parte non è stata aggiornata per includere il nuovo browser.

Allo stesso modo, non sembrano esserci molti esempi di persone che progettano specificatamente per Glass, o esempi di ciò che i siti web sembrano sul vetro ... potrebbe essere qualcosa a cui pensare :)

Se sei interessato allo sviluppo di app native di Google Glass, consulta le API Mirror di Google per alcuni fantastici tutorial!


Keep it Simple

In conclusione, voglio dirti cosa hanno detto quest'anno gli sviluppatori di Google I / O: mantieni la semplicità. Interagire con il vetro deve essere facile e leggero.

Ho appena scalfito la superficie qui. Il browser di Glass è ancora relativamente nuovo e c'è un po 'da scoprire. Nel mio prossimo ebook, anche intitolato, La guida di Web designer per Google Glass, Ho intenzione di approfondire le funzionalità del browser di Glass, cosa tenere a mente per le future build di Glass (XE8 e oltre), e dare un'occhiata ad alcuni case study per quello che è già là fuori.

Mentre il vetro decolla, sospetto che prima vedremo gli sviluppatori creare siti separati ottimizzati per Glass- e.g. glass.website.com. Tuttavia, dovremmo cercare di attenerci ai principi stabiliti da Luke W e Ethan Marcotte per creare fantastiche esperienze sul web agnostiche del dispositivo. Il vetro potrebbe essere il primo del suo genere, ma certamente non sarà l'ultimo.

Allora, cosa ne pensi? I siti Web su Glass (o anche Glass in generale) saranno un successo? Vale la pena fare un tutorial sull'ottimizzazione di un sito per Google Glass? Non vedo l'ora di sentire i tuoi pensieri nei commenti!