Webbdesignerns guide till Google Glass

När jag tittar upp på skärmen strax ovanför mitt högra öga tänker jag på allt det som Google Glass är: framtiden, en kommunikationsenhet (och en bra på den), en konversationsbit, en kamera, information bokstavligen rätt in framför ditt ansikte, och med den senaste uppdateringen, en webbläsare.

För mig är webbläsaren lika intressant som det var oundvikligt. Det var uppenbarligen några begränsningar som glasgruppen fick tänka på, liksom några helt nya problem. Och nu när det är ute, finns det ungefär 10 000 Glass Explorers som använder den. Jag är övertygad om att snart kommer det att finnas miljoner. Och snart kommer våra arbetsgivare, kunder och kunder att säga, "Jag vill att min hemsida ska fungera på glas."


Vad är Google Glass?

Glas är Googles nya produkt (fortfarande i beta) som anbringar en liten skärm framför ögat. Du kan sedan använda den enheten för att ta bilder, utföra Google-sökningar, samtal, text, videoklipp och mer.


Det är för närvarande inte tillgängligt för konsumentköp - de som äger det ansökte om att vara i Glass Explorer-programmet. Ryktet har det att Glass kommer att finnas tillgängligt för konsumentköp någon gång 2014, min gissning är under andra eller tredje kvartalet. Jag fick höra att totalt sett finns det cirka 10 000 uppsättningar i naturen just nu.

I en senare uppdatering, XE7, släppte Google en webbläsare för huvuduppsättningen.

Vad om konkurrens?

Google kan ha varit den första som tillkännager något såhär, och är definitivt det största företaget, men det betyder inte att Google Glass är den enda produkten av sitt slag där ute. Till en början finns det Glass Up som hävdar att göra samma sak som Google Glass gör.


Därefter skrev PCWorld om flera andra företag som arbetar med liknande teknik.

Det finns också klockor, armband och annan bärbar teknik som blir populär. Apple har varumärket heter iWatch, Pebble Watch är oerhört populärt, och saker som Jawbone UP och Fitbit finns i marknaden full kraft. Tillsammans med Google Glass kommer det att finnas en hel mängd enheter som kan ha webbläsare, och som webbutvecklare borde vi vara beredda!


Samverkan med glasens webbläsare

Låt oss först titta på hur Glasss webbläsare fungerar. Från och med nu kan du inte riktigt gå direkt till en webbplats. Du utför en Google-sökning och väljer webbplatser baserat på resultaten.

Skärmdump från mashable.com

Välj ett av resultatkorten för att följa länken och Glass kommer att hämta webbplatsen. Du kan sedan rulla genom att skjuta ett finger längs pekskärmen (som sträcker sig från örat till framsidan av ditt tempel, eller du kan placera två fingrar på pekfältet och "titta runt" på webbplatsen. Du kan "klicka" "på länkar genom att centrera på dem och knacka på pekskärmen - du har en liten cirkel på skärmen som fungerar som en pekare. Slutligen kan du zooma: två fingrar tillbaka för att zooma in, två fingrar framåt för att zooma ut.

Såvitt jag kan säga är det de enda interaktionerna du har; du kan inte fylla i formulär, till exempel. Visa och välj bara.

Notera: Det här är fortfarande en beta-produkt, så jag bör nämna att dessa interaktioner kan förändras när glaset släpps ut till konsumenterna.

Det är på grund av detta att vi som webbutvecklare ska vara uppmärksamma på hur vi utvecklar våra webbplatser. Som det visar sig är principerna jag ska diskutera inte allt det nya, men föreslår en framtidsvänlig inställning till webbdesign. viktigt som apparater som glas (eller till och med Apples fabulerade iWatch) släpps ut på marknaden.


Grundläggande principer att tänka på

Principer för utveckling för glasskärning på två otroligt framträdande idéer i webbutveckling just nu: Responsive Web Design (RWD) och en Mobile First approach.

Varför visas normala webbplatser fungerar inte

Skrivbord / icke-lyhörda webbplatser gör bara bra i Glass-webbläsaren, precis som de gör på Android eller iOS-enheter. Texten är dock oerhört svår att läsa utan zoom. Detsamma gäller för att välja länkar. Det finns en viss grad av precision du behöver när du väljer en länk genom att titta på den. På en desktop version av en webbplats är den precisionen ofta inte där.


Notera: Vid tidpunkten för detta skrift omdirigerar scranton.edu till en mobil webbplats med möjlighet att hämta hela webbplatsen. I början av augusti kommer de att byta till en mottaglig webbplats.

Mobil först!

För några år sedan skrev Luke Wroblewski en fantastisk bok som heter Mobile First. I det diskuterar han en hel del ämnen, bland annat varför det är viktigt att överväga mobilupplevelsen först när man utvecklar en webbplats och bygger sedan därifrån. Som Luke säger det:

Om du designar för mobil först kan du skapa [en] överenskommelse framför på det som är mest viktigt. Du kan sedan tillämpa samma motivering till skrivbordet ...

I grund och botten är punkten i ett mobilt första tillvägagångssätt att bestämma det viktigaste innehållet och presentera det på ett tillgängligt sätt. När du expanderar till större skärmar kommer du att upptäcka att de flesta av de extra (eller mindre viktiga) funktionerna är faktiskt onödiga.

Wroblewski presenterar också en annan teori, som jag skulle överväga en grund för varför ett mobilt första tillvägagångssätt är så viktigt: med mobilanvändare har du bara en ögonboll och en tumme. På grund av detta måste gränssnittet vara enkelt att använda med bara de.

Med Google Glass är det minst halvt sant i bokstavlig mening. Du har bara en ögonglob. När det gäller tummen, har du antingen ett finger eller inga fingrar beroende på hur du ser på den. Som vi upptäckte tidigare kan du inte nå ut och beröra webbplatsen du tittar på. Du använder endast dina fingrar som hjälp för att se vart du vill.


Implementera Mobile First for Glass

Du är troligtvis bekant med Responsive Web Design. Det här är tanken att vi ska få våra webbplatser att reagera på de skärmar som de tittar på. Med Google Glass betyder det ett visningsport på 427x240px. Men som du kan tänka dig är det lite mer komplicerat än det.

Det finns vissa saker vi kan göra med hjälp av mediefrågor för att se till att våra webbplatser fungerar bra på glas där du använder lite mer än ditt öga för att styra webbplatsen.

Gör webbplatsen läsbar!

Först och främst vill vi att våra webbplatser är lätta att läsa, även på glas. Så här ser ett inbyggt kort på Google Glass ut:


Jag föreslår inte att vi borrar våra mönster ner till någonting så, men vi bör komma ihåg att visning av skärmen är som att visa en 25-tums HD-skärm från åtta meter bort. Vi vill inte att våra användare måste zooma in mycket och sedan behöva flytta huvudet för att titta på hela webbplatsen. Vi vill att de ska kunna få informationen som de kom till webbplatsen för att snabbt och enkelt få. När vi designar bör vi komma ihåg att:

  1. Använd lämplig teckenstorlek. Glasanvändare har inte lyxen att hålla enheten närmare sitt ansikte för att läsa texten.
  2. Använd kontrasterande färger. Du vill skapa en märkbar skillnad mellan bakgrunden och texten för dina användare, speciellt om den är särskilt ljus ute, eller mycket händer i bakgrunden. Jag säger inte att ändra hela din design bara för glas, men det är något att tänka på under designprocessen.
  3. Gör länkar uppenbara. De ska stå ut på ett stort sätt eftersom det här är verkligen det enda sättet en användare kommer att interagera med din webbplats. Faktum är faktiskt ...

Gör Länkar Lätt!

Ankare ska vara stora, lätta mål för dina användare. Du vill inte att de cirklar huvudet mycket för att kunna flytta till en annan sida på din webbplats. Gör länkarblock som sticker ut och gör användarna medvetna om hela klickbara området så att de vet hur exakt de behöver vara.

Välja en länk på min webbplats (notera markören)

Använd samtal till handling generöst

Helt inmatningsbaserade webbplatser kommer inte att fungera bra med Glass-webbläsaren. Vid denna tidpunkt har användarna hittat din webbplats på grund av en Google-sökning som de utförde. Se till att du presenterar din information på ett enkelt sätt och sedan ge dina användare handlingsbara saker att göra. "Ring här", ?? eller "Maila oss på ..." Visa dem en adress som de kan ansluta till glas för att få vägbeskrivningar. Ge dem saker de kan göra oberoende av din webbplats.

Tips: Annonser är djävulen. Jag gick till en webbplats med en popup-annons på Glas och det gjorde webbplatsen helt värdelös eftersom "X" var på ett ställe där jag inte kunde titta på att klicka på den. Kanske glömmer annonser på Glas för nu (eller för alltid).

Snabbt utseende: Casabona.org

Min webbplats (casabona.org) fungerar förvånansvärt bra på glas, eftersom jag oavsiktligt följde de ovan angivna konventionerna. Jag kanske vill öka skriftstorleken lite så det är lättare att läsa, men navigering ger för närvarande inga problem.

RWD och Mobile First är två mycket starka pelare som vi borde lita på. Jag redesignade min webbplats bra inför Google Glass på grund av det jag lärde mig att läsa upp om dessa ämnen, och det visar sig att de fick mig mest av vägen där. Faktum är att vi inte vet vad som ligger runt hörnet där webben berörs.

Från Brad Frost's Detta är webben

En anteckning om testning och utveckling

De allra flesta människor har för närvarande inte Google Glass och det kan därför vara svårt att testa. Det finns några metoder för testning, inklusive Googles Mirror API, olika tredjepartslösningar och en inofficiell emulator. Alla eller ingen av dessa lösningar kan till och med fungera. vid skrivandet av detta har de flesta inte uppdaterats för att inkludera den nya webbläsaren.

På samma sätt verkar det inte finnas många exempel på personer som utformar specifikt för glas, eller exempel på vilka webbplatser som ser ut på glas ... det kan vara något att tänka på :)

Om du är intresserad av att utveckla inbyggda Google Glass-appar, gå vidare till Googles Mirror API för några bra handledning!


Håll det enkelt

Förpackning, jag vill berätta vad utvecklarna på Google I / O sa i år: håll det enkelt. Samverkan med glas behöver vara lätt och lätt.

Jag har bara bara repat ytan här. Glasens webbläsare är fortfarande relativt ny och det finns lite att upptäcka. I min kommande ebook, även titeln, Webbdesignerns guide till Google Glass, Jag kommer att dyka djupare in i glassens webbläsare, vad man ska komma ihåg för framtida byggnader av glas (XE8 och bortom) och titta på några fallstudier för vad som redan finns där ute.

När Glass tar slut tror jag att vi först kommer att se utvecklare skapa separata webbplatser optimerade för glas- t ex glass.website.com. Vi bör dock försöka hålla fast vid de principer som framgår av Luke W och Ethan Marcotte för att skapa bra webbupplevelser agnostiska enheter. Glas kan vara det första i sitt slag, men det kommer säkert inte vara det sista.

Så vad tycker du? Kommer webbplatser på glas (eller till och med glas i allmänhet) att bli en träff? Skulle en handledning om att optimera en webbplats för Google Glass vara värt? Jag ser fram emot att höra dina tankar i kommentarerna!