Ghidul Designerului Web pentru Google Glass

Pe măsură ce privesc în sus pe ecran chiar deasupra ochiului drept, mă gândesc la toate lucrurile pe care Google Glass le are: viitorul, un dispozitiv de comunicare (și unul extraordinar), o piesă de conversație, o cameră, informații literalmente chiar în fata de fata ta, și ca de la ultima actualizare, un browser web.

Pentru mine, browser-ul este la fel de interesant precum era inevitabil. În mod evident, existau unele constrângeri pe care trebuia să le gândească echipa de sticlă, precum și câteva probleme complet noi. Și acum, când este în afara, există aproximativ 10.000 de exploratori de sticlă care o folosesc. Sunt încrezător că în curând vor fi milioane. Și imediat după aceea, angajatorii, clienții și clienții noștri vor spune: "Vreau ca site-ul meu să funcționeze pe sticlă".


Ce este Google Glass?

Sticla este noul produs Google (încă în versiune beta) care aplică un mic ecran în fața ochiului. Apoi, puteți să utilizați dispozitivul pentru a face fotografii, a efectua căutări, apelați, trimite text, discuții video și multe altele.


Momentan nu este disponibil pentru cumpărarea de către consumatori - aceia care o dețin sunt rugați să se afle în programul Glass Explorer. Zvonurile spun că sticla va fi disponibilă pentru achiziționarea de către cumpărători în 2014, după cum se știe, în al doilea sau al treilea trimestru. Mi sa spus că, în total, sunt în jur de 10.000 de seturi în sălbăticie chiar acum.

Într-o actualizare recentă, XE7, Google a lansat un browser web pentru capul set.

Despre competiție?

Google poate a fost primul care a anunțat ceva de genul acesta și este cu siguranță cea mai mare companie, dar asta nu înseamnă că Google Glass este singurul produs de acest gen. Pentru început, există Glass Up, care pretinde că face același lucru cu Google Glass.


Apoi, PCWorld a scris despre mai multe companii care lucrează la tehnologii similare.

Există, de asemenea, ceasuri, brățări și alte tehnologii care pot deveni populare. Apple a înregistrat numele iWatch, Pebble Watch este incredibil de popular și articole precum Jawbone UP și Fitbit sunt pe piață forțate. Împreună cu Google Glass, va exista o întreagă serie de dispozitive care pot avea browsere web, iar ca dezvoltatori web ar trebui să fim pregătiți!


Interacționează cu browserul de sticlă

Mai întâi, să vedem cum funcționează browserul Glass. În momentul de față, nu puteți merge direct la un site web. Realizați o căutare Google și alegeți site-uri pe baza rezultatelor.

Captură de ecran de la mashable.com

Selectați una dintre cartelele de rezultate pentru a urma linkul și Glass va afișa site-ul web. Apoi, puteți derula prin alunecarea cu degetul de-a lungul barei de atingere (care se extinde de la ureche în fața templului dvs. sau puteți pune două degete pe bara de atingere și "aruncați o privire în jurul" site-ului. "pe link-uri prin centrarea pe ele și atingând bara de atingere - aveți un cerc mic pe ecran care servește ca un pointer. În cele din urmă, puteți zoom: două degete înapoi pentru a mări, două degete înainte pentru a micșora.

Din câte vă pot spune, acestea sunt singurele interacțiuni pe care le aveți; nu puteți completa formulare, de exemplu. Pur și simplu vizualizați și selectați.

Notă: Acesta este în continuare un produs beta, așadar ar trebui să menționez că aceste interacțiuni s-ar putea schimba până în momentul în care sticla este eliberată consumatorilor.

Din acest motiv, noi, ca dezvoltatori de web, trebuie să avem grijă de modul în care dezvoltăm site-urile noastre. După cum se dovedește, principiile pe care le voi discuta nu sunt tot atât de noi, dar sugerează o abordare prietenoasă cu viitorul pentru designul web; important, deoarece dispozitivele precum Glass (sau chiar Apple's fabled iWatch) sunt lansate pe piață.


Principii de bază care trebuie păstrate în minte

Principii de dezvoltare pentru balama Glass pe doua idei incredibil de raspandite in dezvoltarea de aplicatii web: Responsabil Web Design (RWD) si o abordare Mobile First.

De ce vizualizarea site-urilor normale nu funcționează

Site-urile de pe desktop / non-responsive se redresează foarte bine în browserul Glass, la fel ca și pe dispozitivele Android sau iOS. Cu toate acestea, textul este incredibil de dificil de citit fără zoom; același lucru este valabil și pentru selectarea legăturilor. Există un anumit nivel de precizie de care aveți nevoie atunci când selectați un link uitându-l la el. Pe o versiune desktop a unui site, această precizie nu este adesea acolo.


Notă: La momentul acestei scrieri, scranton.edu redirecționează către un site mobil cu opțiunea de a afișa întregul site. La începutul lunii august, vor trece la un site web receptiv.

Mobile First!

Cu câțiva ani în urmă, Luke Wroblewski a scris o carte fantastică numită Mobile First. În el discută o mulțime de subiecte, inclusiv de ce este important să se ia în considerare experiența mobilă în primul rând atunci când se dezvoltă un site web, apoi se construiește de acolo. După cum spune Luke:

Dacă proiectați mai întâi pentru mobil, puteți crea un acord în avans cu privire la ceea ce contează cel mai mult. Apoi, puteți aplica același raționament desktopului ...

Practic, punctul de vedere al unei prime abordări mobile este de a determina conținutul cel mai important și de ao prezenta într-un mod accesibil. Pe măsură ce vă extindeți la ecrane mai mari, veți găsi că majoritatea caracteristicilor extra (sau mai puțin importante) sunt de fapt inutile.

Wroblewski prezintă, de asemenea, o altă teorie, pe care aș considera o bază pentru motivul pentru care o abordare mobilă este atât de importantă: cu utilizatorii de telefonie mobilă, aveți doar "un ochi și un deget mare". Din acest motiv, interfața dvs. trebuie să fie suficient de ușoară pentru a fi utilizată doar cu acelea.

Cu Google Glass, aceasta este cel puțin jumătate adevărată în sensul literal. Aveți doar un singur glob. În ceea ce privește degetul mare, în funcție de modul în care te uiți la el, aveți fie un deget, fie nu degete. Așa cum am descoperit mai devreme, nu vă puteți atinge și atingeți site-ul pe care îl vizualizați. Îți folosești degetele doar ca ajutor pentru a arăta unde vrei.


Implementarea aplicației Mobile First for Glass

Sunteți cel mai probabil familiarizat cu Responsive Web Design. Aceasta este ideea că ar trebui ca site-urile noastre să răspundă la ecranele pe care le vadă. Cu Google Glass, acesta înseamnă un port de vizualizare de 427x240 pixeli. Dar, după cum vă puteți imagina, este ceva mai complex decât asta.

Există anumite lucruri pe care le putem face folosind interogările media pentru a vă asigura că site-urile noastre funcționează bine pe Sticlă, unde utilizați puțin mai mult decât ochiul pentru a controla site-ul.

Faceți site-ul accesibil!

În primul rând, dorim ca site-urile noastre să fie ușor de citit, chiar și pe sticlă. Iată ce arată cartela nativă din Google Glass:


Nu sugerăm să ne descurcăm desenele până la așa ceva, dar ar trebui să ne amintim că vizionarea ecranului este ca și cum ați fi vizionat un ecran de 25 inci HD de la opt picioare distanță. Nu vrem ca utilizatorii noștri să trebuiască să mărească foarte mult și apoi trebuie să-și miște capul pentru a privi întregul site. Vrem ca ei să poată obține informațiile pe care le-au adus pe site pentru a obține rapid și ușor. Pe măsură ce proiectăm, ar trebui să ne amintim:

  1. Utilizați dimensiunea adecvată a fontului. Utilizatorii de sticlă nu au luxul de a ține dispozitivul mai aproape de fața lor pentru a citi textul.
  2. Utilizați culori contrastante. Vrei să creezi o diferență notabilă între fundal și text pentru utilizatorii tăi, mai ales dacă e în afara luminii deosebite sau se petrece mult în fundal. Nu spun să schimbați întregul design doar pentru Glass, dar este ceva de reținut în timpul procesului de proiectare.
  3. Faceți legături evidente. Ar trebui să se evidențieze într-un mod mare, deoarece acesta este într-adevăr singurul mod în care un utilizator va interacționa cu site-ul dvs. Web. De fapt…

Asigurați-Utilizarea Link-uri ușor!

Ancorele ar trebui să fie mari, ușor de țintit pentru utilizatorii dvs. Nu doriți ca aceștia să-și înconjoare capetele pentru a vă putea muta într-o altă pagină a site-ului dvs. Faceți blocuri de linkuri care ies în evidență și le faceți pe utilizatori conștienți de întreaga zonă care face clic, astfel încât să știe cât de precise trebuie să fie.

Selectarea unui link pe site-ul meu (notați cursorul)

Utilizați apelurile la acțiune cu generozitate

Site-urile complet introduse pe bază de date nu vor funcționa bine cu browserul Glass. În acest moment, utilizatorii vor găsi site-ul dvs. din cauza unei căutări pe Google pe care au efectuat-o. Asigurați-vă că vă prezentați informațiile într-o manieră ușoară și apoi dați utilizatorilor dvs. acțiuni care trebuie făcute. "Sună aici", ?? sau "Trimiteți-ne un e-mail la ..." Arătați-le o adresă pe care o pot conecta în Sticlă pentru a obține indicații de orientare. Dați-le lucruri pe care le pot face independent de site-ul dvs. web.

Bacsis: Anunțurile sunt diavolul. M-am dus la un site cu un anunț pop-up pe Glass și a făcut site-ul complet inutil, deoarece "X" se afla într-un loc în care nu puteam să fac clic pe el. Poate uita de anunțuri pe sticlă pentru moment (sau pentru totdeauna).

Vizualizare rapidă: Casabona.org

Site-ul meu (casabona.org) funcționează surprinzător de bine pe sticlă, în parte pentru că am urmat necondiționat convențiile enumerate mai sus. S-ar putea să vreau să măresc puțin dimensiunea fontului, astfel încât să fie mai ușor de citit, dar navigarea în prezent nu oferă probleme.

RWD și Mobile Mai întâi sunt doi piloni foarte puternici pe care ar trebui să ne bazăm. Am reproiectat site-ul meu cu mult înainte de Google Glass din cauza a ceea ce am învățat de la lectură pe aceste teme și se pare că m-au făcut cel mai mult acolo. Adevărul este că nu știm ce se întâmplă în jurul colțului web.

De la Brad Frost's Acesta este Web

O notă privind testarea și dezvoltarea

Marea majoritate a oamenilor nu au în prezent Google Glass și din acest motiv testarea poate fi dificilă. Există câteva metode de testare, inclusiv Google Mirror API, diverse soluții de la terți și un emulator neoficial. Toate sau niciuna dintre aceste soluții pot funcționa chiar; la momentul scrisului, majoritatea nu au fost actualizate pentru a include noul browser.

În același timp, nu pare să existe o mulțime de exemple de persoane care proiectează în mod specific pentru Sticlă, sau exemple despre cum ar arăta site-urile pe Glass ... care ar putea fi ceva de gândit :)

Dacă sunteți interesat să dezvoltați aplicații native Google Glass, mergeți la API-ul Mirror Google pentru câteva tutoriale minunate!


Nu te complica

Încărcarea, vreau să vă spun ce au spus dezvoltatorii de la Google I / O anul acesta: păstrați-o simplu. Interacțiunea cu sticla trebuie să fie ușoară și ușoară.

Doar că am zgâriat suprafața aici. Browserul de sticlă este încă relativ nou și există un pic de descoperit. În ebook viitoare, de asemenea, intitulat, Ghidul Designerului Web pentru Google Glass, Mă duc mai adânc în capabilitățile browserului de sticlă, ce să țin minte pentru viitoarele construcții de sticlă (XE8 și dincolo) și să analizez câteva studii de caz pentru ceea ce este deja acolo.

Pe măsură ce Glass se decolorează, bănuiesc că vom vedea mai întâi dezvoltatorii să creeze site-uri separate optimizate pentru Glass - de ex. glass.website.com. Cu toate acestea, ar trebui să încercăm să respectăm principiile stabilite de Luke W și Ethan Marcotte pentru a crea o experiență web agnostică de dispozitiv. Sticla poate fi prima de acest fel, dar cu siguranta nu va fi ultima.

Deci ce crezi? Va fi site-ul pe sticlă (sau chiar sticlă, în general) o lovitură? Ar fi util un tutorial privind optimizarea unui site pentru Google Glass? Aștept cu nerăbdare să vă aud gândurile în comentarii!