Webdesigners guide til Google Glass

Når jeg ser opp på skjermen like over mitt høyre øye, tenker jeg på alle de tingene som Google Glass er: fremtiden, en kommunikasjonsenhet (og en flott en der), en samtale, et kamera, informasjon bokstavelig talt rett inn foran ansiktet ditt, og med den siste oppdateringen, en nettleser.

For meg er nettleseren like interessant som det var uunngåelig. Det var åpenbart noen begrensninger som Glass-teamet måtte tenke på, samt noen helt nye problemer. Og nå er det ute, er det omtrent 10.000 Glassforskere som bruker det. Jeg er sikker på at snart vil det bli millioner. Og kort tid etter vil våre arbeidsgivere, kunder og kunder si: "Jeg vil at nettstedet mitt skal fungere på Glass."


Hva er Google Glass?

Glass er Googles nye (fremdeles i beta) -produkt som fester en liten skjerm foran øyet ditt. Du kan da bruke enheten til å ta bilder, utføre Google-søk, ringe, tekst, videochat og mer.


Det er for øyeblikket ikke tilgjengelig for forbrukerkjøp - de som eier det, ansøkte å være i Glass Explorer. Ryktet har det at Glass vil være tilgjengelig for forbrukskjøp en gang i 2014, min gjetning er i andre eller tredje kvartal. Jeg ble fortalt at totalt sett er det ca 10.000 sett i det vild akkurat nå.

I en nylig oppdatering, XE7, ga Google ut en nettleser for hodet settet.

Hva om konkurranse?

Google kan ha vært den første til å kunngjøre noe slikt, og er definitivt det største selskapet, men det betyr ikke at Google Glass er det eneste produktet av sitt slag der ute. For en gang er det Glass Up som hevder å gjøre det samme som Google Glass gjør.


Så skrev PCWorld om flere andre selskaper som jobber med lignende teknologi.

Det er også klokker, armbånd og annen brukbar teknologi som blir populær. Apple har varemerket iWatch, Pebble Watch er utrolig populært, og elementer som Jawbone UP og Fitbit er i markedet full kraft. Sammen med Google Glass vil det være en hel rekke enheter som kan ha nettlesere, og som webutviklere, bør vi være forberedt!


Interagere med Glass 'Browser

Først, la oss se på hvordan Glasss nettleser fungerer. Fra nå av kan du ikke gå direkte til et nettsted. Du utfører et Google-søk og velger nettsteder basert på resultatene.

Skjermbilde fra mashable.com

Velg ett av resultatkortene for å følge linken, og Glass vil ta opp nettsiden. Du kan deretter bla ved å skyve en finger langs berøringslinjen (som strekker seg fra rundt øret til forsiden av templet ditt, eller du kan plassere to fingre på berøringslinjen og "se deg rundt" på siden. Du kan klikke "på koblinger ved å sitte på dem og trykke på berøringslinjen - du har en liten sirkel på skjermen som fungerer som en peker. Endelig kan du zoome: To fingre tilbake for å zoome inn, to fingre fremover for å zoome ut.

Så vidt jeg kan fortelle, er dette de eneste samhandlingene du har; Du kan ikke fylle ut skjemaer, for eksempel. Bare vis og velg.

Merk: Dette er fortsatt et beta-produkt, så jeg bør nevne at disse interaksjonene kan endre seg når glasset slippes ut til forbrukerne.

Det er på grunn av dette at vi som webutviklere bør være oppmerksomme på hvordan vi utvikler våre nettsteder. Som det viser seg, er prinsippene jeg skal diskutere ikke alt det nye, men foreslå en fremtidsmessig tilnærming til webdesign; viktig som utstyr som Glass (eller til og med Apples fabelaktige iWatch) blir utgitt til markedet.


Grunnleggende prinsipper å huske på

Prinsipper for å utvikle for Glasshengslet på to utrolig utbredte ideer i webutvikling akkurat nå: Responsive Web Design (RWD) og en mobil første tilnærming.

Hvorfor vise normale nettsteder virker ikke

Stasjonære / ikke-lydhøre nettsteder gjengir seg fint i Glass-nettleseren, akkurat som de gjør på Android- eller iOS-enheter. Teksten er imidlertid utrolig vanskelig å lese uten zoom; Det samme gjelder for å velge koblinger. Det er et visst nivå av presisjon du trenger når du velger en lenke ved å se på den. På en desktop versjon av et nettsted er denne presisjonen ofte ikke der.


Merk: På tidspunktet for denne skrivingen omdirigerer scranton.edu til et mobilnettsted med muligheten til å hente hele nettstedet. I begynnelsen av august vil de bytte til en responsiv nettside.

Mobil først!

For et par år siden skrev Luke Wroblewski en fantastisk bok, Mobile First. I den diskuterer han en hel rekke emner, blant annet hvorfor det er viktig å vurdere mobilopplevelsen først når du utvikler et nettsted, og deretter bygge derfra. Som Luke sier det:

Hvis du designer for mobil først, kan du opprette en avtale på forhånd om hva som betyr mest. Du kan da bruke samme begrunnelse til skrivebordet ...

I utgangspunktet er poenget med en mobil første tilnærming å bestemme det viktigste innholdet og presentere det på en tilgjengelig måte. Når du utvider til større skjermer, vil du oppdage at de fleste av de ekstra (eller mindre viktige) funksjonene faktisk er unødvendige.

Wroblewski presenterer også en annen teori, som jeg vil vurdere grunnlaget for hvorfor en mobil første tilnærming er så viktig: med mobilbrukere har du bare "ett øyehull og en tommel". På grunn av dette, må grensesnittet være enkelt nok til å bruke sammen med bare de.

Med Google Glass er det minst halv sann i bokstavelig forstand. Du har bare ett øyeboll. Når det gjelder tommelen, har du enten en finger eller ingen fingre, avhengig av hvordan du ser på den. Som vi oppdaget tidligere, kan du ikke nå ut og berøre nettstedet du ser på. Du bruker bare fingrene som et hjelpemiddel for å se hvor du vil.


Implementere mobil først for glass

Du er mest sannsynlig kjent med Responsive Web Design. Dette er ideen om at vi skal få våre nettsider til å svare på skjermene som de blir sett på. Med Google Glass betyr dette et visningsport på 427x240px. Men som du kan forestille deg, er det litt mer komplisert enn det.

Det er visse ting vi kan gjøre ved hjelp av medieforespørsler for å sikre at våre nettsteder fungerer godt på Glass, hvor du bruker litt mer enn ditt øye for å kontrollere nettsiden.

Gjør nettstedet lesbart!

Først og fremst vil vi at våre nettsteder skal være enkle å lese, selv på Glass. Slik ser et innfødt kort på Google Glass ut:


Jeg foreslår ikke at vi driller våre design ned til noe sånt, men vi bør huske at visning av skjermen er som å se et 25-tommers HD-skjermbilde fra åtte meter unna. Vi ønsker ikke at brukerne må zoome inn mye, og da må de flytte hodet rundt for å se på hele nettstedet. Vi vil at de skal kunne få informasjonen de kom til nettsiden for å komme raskt og enkelt. Når vi designer, bør vi huske å:

  1. Bruk egnet skriftstørrelse. Glassbrukere har ikke lyst til å holde enheten nærmere ansiktet deres for å lese teksten.
  2. Bruk kontrasterende farger. Du vil skape en merkbar forskjell mellom bakgrunnen og teksten for brukerne, spesielt hvis det er spesielt lyst ute, eller mye skjer i bakgrunnen. Jeg sier ikke endre hele designet bare for Glass, men det er noe å huske på under designprosessen.
  3. Gjør linkene åpenbare. De bør skille seg ut på en stor måte fordi dette er virkelig den eneste måten en bruker vil samhandle med ditt nettsted. Faktisk…

Gjør bruk av koblinger enkelt!

Ankre skal være store, enkle mål for brukerne. Du vil ikke ha at de sirkler hodene sine bare for å kunne flytte til en annen side på nettstedet ditt. Lag koblingsblokker som skiller seg ut og gjør brukerne oppmerksomme på hele klikkbart område slik at de vet hvor nøyaktig de må være.

Velger en lenke på nettstedet mitt (merk markøren)

Bruk samtaler til handling generøst

Helt inngangsbaserte nettsteder skal ikke fungere godt med Glass-nettleseren. På dette tidspunktet har brukerne funnet nettstedet ditt på grunn av et Google-søk de utførte. Sørg for at du presenterer informasjonen din på en enkel måte, og deretter gi brukerne handlinger du kan gjøre. "Ring her", ?? eller "Send oss ​​e-post til ..." Vis dem en adresse de kan plugge inn i Glass for å få veibeskrivelse. Gi dem ting de kan gjøre uavhengig av nettstedet ditt.

Tips: Annonser er djevelen. Jeg dro til et nettsted med en popup-annonse på Glass og det gjorde nettstedet helt ubrukelig fordi "X" var på et sted der jeg ikke kunne se for å klikke på den. Kanskje glemmer annonser på Glass for nå (eller for alltid).

Raskt utseende: Casabona.org

Nettstedet mitt (casabona.org) fungerer overraskende godt på Glass, fordi jeg ved et uhell fulgte de ovenfor nevnte konvensjonene. Jeg vil kanskje øke skriftstørrelsen litt, så det er lettere å lese, men navigering gir for øyeblikket ingen problemer.

RWD og Mobile First er to svært sterke søyler som vi bør stole på. Jeg redesignte nettstedet mitt godt før Google Glass på grunn av det jeg lærte av å lese om disse fagene, og det viser seg at de fikk meg mest av veien der. Faktum er at vi ikke vet hva som er rundt hjørnet der nettet er opptatt.

Fra Brad Frost er Dette er nettet

En kommentar om testing og utvikling

De aller fleste mennesker har for øyeblikket ikke Google Glass, og det kan derfor være vanskelig å teste testingen. Det er noen metoder for testing, inkludert Googles Mirror API, ulike tredjepartsløsninger og en uoffisiell emulator. Alle eller ingen av disse løsningene kan til og med fungere; Når du skriver dette, har de fleste ikke blitt oppdatert for å inkludere den nye nettleseren.

På samme måte synes det ikke å være mange eksempler på personer som designer spesielt for Glass, eller eksempler på hvilke nettsteder som ser ut til Glass ... det kan være noe å tenke på :)

Hvis du er interessert i å utvikle innfødte Google Glass-apper, kan du gå videre til Googles Mirror API for noen gode opplæringsprogrammer!


Hold det enkelt

Innpakning, jeg vil fortelle deg hva utviklerne på Google I / O sa i år: hold det enkelt. Interaksjon med glass må være lett og lett.

Jeg har bare bare skrapet overflaten her. Glass-nettleseren er fortsatt relativt ny, og det er litt å oppdage. I min kommende eBok, også tittel, Webdesigners guide til Google Glass, Jeg skal dypere inn i glassets nettleser, hva jeg skal huske på for fremtidige bygg av glass (XE8 og utover), og se på noen få casestudier for det som allerede er der ute.

Som Glass tar av, mistenker jeg at vi først vil se utviklere opprette separate nettsteder optimalisert for Glass- f.eks. glass.website.com. Imidlertid bør vi forsøke å holde seg til prinsippene som er fremsatt av Luke W og Ethan Marcotte for å skape gode webopplevelser agnostiske av enheten. Glass kan være det første av sitt slag, men det vil absolutt ikke være det siste.

Så hva tror du? Vil nettsteder på Glass (eller til og med Glass generelt) være en hit? Ville en opplæring om optimalisering av et nettsted for Google Glass være verdt? Jeg gleder meg til å høre dine tanker i kommentarene!