La guía del diseñador web para Google Glass

Cuando miro hacia arriba en la pantalla justo encima de mi ojo derecho, pienso en todas las cosas que Google Glass es: el futuro, un dispositivo de comunicación (y uno muy bueno en eso), un tema de conversación, una cámara, información literalmente correcta frente a su cara, y desde la última actualización, un navegador web.

Para mí, el navegador es tan interesante como inevitable. Obviamente, había algunas limitaciones en las que debía pensar el equipo de Glass, así como algunos problemas completamente nuevos. Y ahora que está fuera, hay aproximadamente 10,000 Glass Explorers que lo usan. Estoy seguro de que pronto habrá millones. Y poco después, nuestros empleadores, clientes y clientes dirán: "Quiero que mi sitio web trabaje en vidrio".


¿Qué es Google Glass??

Glass es el nuevo producto de Google (aún en versión beta) que coloca una pequeña pantalla delante de su ojo. Luego puede usar ese dispositivo para tomar fotos, realizar búsquedas en Google, llamadas, mensajes de texto, chat de video y más.


Actualmente no está disponible para la compra del consumidor, quienes lo poseen solicitaron estar en el programa Glass Explorer. Se rumorea que Glass estará disponible para la compra del consumidor en algún momento de 2014, supongo que será durante el segundo o tercer trimestre. Me dijeron que, en total, hay alrededor de 10,000 juegos en la naturaleza en este momento..

En una actualización reciente, XE7, Google lanzó un navegador web para el conjunto de cabezales.

¿Qué pasa con la competencia??

Es posible que Google haya sido el primero en anunciar algo como esto, y definitivamente es la compañía más grande, pero eso no significa que Google Glass sea el único producto de este tipo que existe. Para empezar, está Glass Up, que afirma hacer lo mismo que Google Glass..


Luego, PCWorld escribió sobre otras compañías que trabajan en tecnología similar..

También hay relojes, brazaletes y otra tecnología portátil que se está volviendo popular. Apple ha registrado el nombre de iWatch, el reloj Pebble es increíblemente popular, y artículos como Jawbone UP y Fitbit están en el mercado con toda su fuerza. Junto con Google Glass, habrá una gran cantidad de dispositivos que pueden tener navegadores web, y como desarrolladores web, debemos estar preparados!


Interactuando con Glass 'Browser

Primero, veamos cómo funciona el navegador de Glass. A partir de ahora, no puedes ir directamente a un sitio web. Realiza una búsqueda en Google y elige sitios web según los resultados..

Captura de pantalla de mashable.com

Seleccione una de las tarjetas de resultados para seguir el enlace y Glass abrirá el sitio web. Luego puede desplazarse deslizando un dedo a lo largo de la barra táctil (que se extiende desde alrededor de su oreja hasta la parte delantera de la sien, o puede colocar dos dedos en la barra táctil y "mirar alrededor" del sitio. Puede "hacer clic" "en los enlaces centrándolos y tocando la barra táctil: tiene un pequeño círculo en la pantalla que sirve como puntero. Finalmente, puede hacer zoom: dos dedos hacia atrás para acercar, dos dedos hacia adelante para alejar.

Por lo que puedo decir, estas son las únicas interacciones que tiene; No puede llenar formularios, por ejemplo. Simplemente vea y seleccione.

Nota: Este es todavía un producto beta, por lo que debo mencionar que estas interacciones podrían cambiar para cuando se lance Glass a los consumidores..

Es por esto que nosotros, como desarrolladores web, debemos ser conscientes de cómo desarrollamos nuestros sitios web. Resulta que los principios que voy a discutir no son tan nuevos, pero sugieren un enfoque para el diseño web que sea favorable para el futuro; tan importante como los dispositivos como Glass (o incluso el legendario iWatch de Apple) se lanzan al mercado.


Principios básicos a tener en cuenta

Los principios para el desarrollo de Glass dependen de dos ideas increíblemente prevalentes en el desarrollo web en este momento: Diseño web responsivo (RWD) y un enfoque de Mobile First.

¿Por qué ver sitios normales no funciona?

Los sitios de escritorio / que no responden se ven bien en el navegador de Glass, como lo hacen en dispositivos Android o iOS. Sin embargo, el texto es increíblemente difícil de leer sin zoom; Lo mismo ocurre con la selección de enlaces. Hay un cierto nivel de precisión que necesita al seleccionar un enlace mirándolo. En una versión de escritorio de un sitio web, esa precisión a menudo no existe.


Nota: En el momento de escribir este artículo, scranton.edu redirige a un sitio móvil con la opción de abrir el sitio completo. A principios de agosto, cambiarán a un sitio web receptivo.

Móvil primero!

Hace un par de años, Luke Wroblewski escribió un libro fantástico llamado Mobile First. En él discute una gran cantidad de temas, incluyendo por qué es importante considerar la experiencia móvil primero al desarrollar un sitio web, y luego construir desde allí. Como Lucas lo pone:

Si diseña para dispositivos móviles primero, puede crear [un] acuerdo por adelantado sobre lo que más importa. A continuación, puede aplicar la misma lógica en el escritorio ...

Básicamente, el objetivo de un primer enfoque móvil es determinar el contenido más importante y presentarlo de una manera accesible. A medida que se expande a pantallas más grandes, encontrará que la mayoría de las funciones adicionales (o menos importantes) son realmente innecesarias.

Wroblewski también presenta otra teoría, que consideraría una base por la cual un primer enfoque móvil es tan importante: con los usuarios móviles, solo tiene "un globo ocular y un pulgar". Debido a esto, su interfaz debe ser lo suficientemente fácil de usar solo con esos.

Con Google Glass, eso es al menos la mitad de la verdad en el sentido literal. Solo tienes un globo ocular. En cuanto al pulgar, dependiendo de cómo lo mires, tienes uno o ningún dedo. Como descubrimos anteriormente, no puedes acercarte y tocar el sitio web que estás viendo. Usas tus dedos solo como una ayuda para mirar donde quieres.


Implementando Mobile First para Glass

Es muy probable que esté familiarizado con el diseño web responsivo. Esta es la idea de que debemos hacer que nuestros sitios web respondan a las pantallas en las que se están viendo. Con Google Glass, esto significa una ventana gráfica de 427x240px. Pero como puedes imaginar, es un poco más complejo que eso..

Hay ciertas cosas que podemos hacer mediante consultas de medios para asegurarnos de que nuestros sitios web funcionen bien en Glass, donde está usando poco más que su ojo para controlar el sitio web..

Hacer el sitio web legible!

En primer lugar, queremos que nuestros sitios web sean fáciles de leer, incluso en Glass. Así es como se ve una tarjeta nativa en Google Glass:


No estoy sugiriendo que profundicemos nuestros diseños en algo así, pero debemos recordar que ver la pantalla es como ver una pantalla HD de 25 pulgadas desde ocho pies de distancia. No queremos que nuestros usuarios tengan que acercarse mucho y luego tienen que mover la cabeza para mirar todo el sitio. Queremos que puedan obtener la información que recibieron en el sitio web de manera rápida y fácil. Como diseñamos debemos recordar:

  1. Utilice el tamaño de fuente adecuado. Los usuarios de vidrio no tienen el lujo de sostener el dispositivo cerca de su cara para leer el texto.
  2. Usa colores contrastantes. Desea crear una diferencia notable entre el fondo y el texto para sus usuarios, especialmente si es especialmente brillante en el exterior, o si hay mucho en el fondo. No estoy diciendo que cambie su diseño completo solo para Glass, pero es algo que debe tener en cuenta durante el proceso de diseño..
  3. Hacer enlaces obvios. Deben sobresalir en gran medida porque es realmente la única forma en que un usuario interactúa con su sitio web. Como una cuestión de hecho…

Hacer que los enlaces sean fáciles!

Los anclajes deben ser objetivos grandes y fáciles para sus usuarios. No quiere que circulen mucho la cabeza solo para poder moverse a una página diferente de su sitio. Cree bloques de enlaces que destaquen y haga que los usuarios conozcan toda el área en la que se puede hacer clic para que sepan cuán preciso deben ser..

Seleccionando un enlace en mi sitio (note el cursor)

Usa llamadas a la acción generosamente

Los sitios web completamente basados ​​en entradas no van a funcionar bien con el navegador de Glass. En este punto, los usuarios habrán encontrado su sitio debido a una búsqueda en Google que realizaron. Asegúrese de presentar su información de una manera fácil y luego dé a sus usuarios elementos procesables para hacer. "Llame aquí", ?? o "Envíenos un correo electrónico a ..." Muéstreles una dirección que puedan enchufar en Glass para obtener instrucciones. Dales cosas que puedan hacer independientemente de tu sitio web..

Propina: Los anuncios son el diablo. Fui a un sitio web con un anuncio emergente en Glass y lo hizo completamente inútil porque la "X" estaba en un lugar donde no podía mirar para hacer clic en él. Tal vez olvide los anuncios en Glass por ahora (o para siempre).

Mirada rápida: Casabona.org

Mi sitio web (casabona.org) funciona sorprendentemente bien en Glass, en parte porque inadvertidamente seguí las convenciones enumeradas anteriormente. Es posible que desee aumentar un poco el tamaño de la fuente para que sea más fácil de leer, pero la navegación actualmente no proporciona problemas.

RWD y Mobile First son dos pilares muy sólidos en los que debemos confiar. Rediseñé mi sitio mucho antes de Google Glass debido a lo que aprendí al leer sobre estos temas, y resulta que me ayudaron a llegar hasta allí. El hecho es que no sabemos qué hay a la vuelta de la esquina en lo que respecta a la web..

De Brad Frost's Esta es la Web

Una nota sobre pruebas y desarrollo

La gran mayoría de las personas actualmente no tienen Google Glass y debido a eso, las pruebas pueden ser difíciles. Existen algunos métodos de prueba, incluida la API Mirror de Google, varias soluciones de terceros y un emulador no oficial. Todas o ninguna de estas soluciones pueden funcionar; en el momento de escribir esto, la mayoría no se han actualizado para incluir el nuevo navegador.

En ese mismo token, parece que no hay muchos ejemplos de personas que diseñan específicamente para Glass, o ejemplos de cómo se ven los sitios web en Glass ... que pueden ser algo en lo que pensar :)

Si está interesado en desarrollar aplicaciones nativas de Google Glass, diríjase a la API Mirror de Google para obtener excelentes tutoriales.!


Mantenlo simple

Para terminar, quiero decirles lo que dijeron los desarrolladores de Google I / O este año: sea sencillo. Interactuar con el vidrio debe ser fácil y ligero..

Solo he arañado la superficie aquí. El navegador de Glass es todavía relativamente nuevo y hay un poco por descubrir. En mi próximo ebook, titulado también., La guía del diseñador web para Google Glass, Voy a profundizar en las capacidades del navegador de Glass, qué debo tener en cuenta para futuras compilaciones de Glass (XE8 y posteriores), y ver algunos estudios de caso de lo que ya existe..

Cuando Glass despegue, sospecho que primero veremos a los desarrolladores crear sitios separados optimizados para Glass-e.g. glass.website.com. Sin embargo, debemos tratar de mantener los principios establecidos por Luke W y Ethan Marcotte para crear grandes experiencias web de dispositivos. El vidrio puede ser el primero de su tipo, pero ciertamente no será el último.

¿Entonces, qué piensas? ¿Serán un éxito los sitios web en Glass (o incluso Glass en general)? ¿Valdría la pena un tutorial sobre cómo optimizar un sitio para Google Glass? Espero escuchar sus pensamientos en los comentarios.!