Post on 19-Dec-2014
description
Mauricio Angulo S.Programador | Divulgador | Asesor de UX
email > mauricio@tesseractspace.comblog > tesseractspace.com/blogtwitter> twitter.com/mauricioangulo
www.tesseractspace.com
De Móvil a Google Glass
Google Glass
• Qué es Google Glass y cómo funciona
• Diferencias de diseño entre apps
para smartphone y Glass
• Principios de desarrollo para Glass
• Lineamientos de diseño y usabilidad
para Glass
para siempre hace un año hace un mes ahora
Smartphone vs GlassAunque ambos son Computo Móvil, hay diferencias importantes a tener en cuenta:
Acción Smartphone Glass
InteracciónBotones físicos, teclado físico o virtual, voz
Touch panel, voz y gestos
InterfaseVisual y táctil, con controles e hipertexto
Principalmente texto
PantallaGrande en formato vertical u horizontal
Pequeña, en formato horizontal
Conectividad Celular, WiFi, Bluetooth, etc. WiFi y Bluetooth, limitada
Batería De 5 a 10 horas De 3 a 5 horas
Memoria Expandible Limitada
Apps Locales y web apps Locales y remotas
Desarrollo de apps para Google Glass
Glassware (sust.)
Se refiere a los Servicios web que pueden enviar y recibir contenido hacia y desde Glass.
Al desarrollar Glassware tienes dos opciones del API. Escoge la correcta basada en tus necesidades. Si necesitas:
Mirror API(HTML5)
GDK(Java)
Interacción con el usuario en tiempo real
Acceso alhardware
Funcionalidaddesconectada
Independenciade plataforma
Infraestructuracomún
Funcionalidadintegrada
¡O usa ambas!
El API de Mirror Glassware puede invocar el Glassware de GDK por medio de un elemento de menú. Es posible usar este modelo híbrido para reutilizar propiedades web ya existentes que pueden tener funcionalidades completas en Glass.
Desarrollando Glassware con el GDK
Desarrollando Glassware con el Mirror API
REST
Tu usuario Glass del usuario
1. El usuario se autentica
El usuario ve un cat fact
Glass se sincroniza3. Se inserta un cat
fact
2. Glassware almacena
las credenciales
POST /mirror/v1/timeline HTTP/1.1Host: www.googleapis.comAuthorization: Bearer {auth token}Content-Type: application/jsonContent-Length: 26
{ "text": "Hello world" }
HTTP/1.1 201 CreatedDate: Tue, 25 Sep 2012 23:30:11 GMTContent-Type: application/jsonContent-Length: 303
{ "kind": "glass#timelineItem", "id": "1234567890", "selfLink": "https://www.googleapis.com/mirror/v1/timeline/1234567890", "created": "2012-09-25T23:28:43.192Z", "updated": "2012-09-25T23:28:43.192Z", "etag": "\"G5BI0RWvj-0jWdBrdWrPZV7xPKw/t25selcGS3uDEVT6FB09hAG-QQ\"", "text": "Hello world"}
Bienvenido al PHP Quick Start del API de Mirror
Principios de diseño para Google Glass
1. No estorbes al usuario
Glass está diseñado para estar ahí cuando lo necesites y para que no estorbe cuando no lo necesites.
Tu Glassware debe funcionar de la misma manera. Ofrece funcionalidad interesante que mejore el momento al usuario sin que lo invada.
2. Sé relevante
Muestra información en el lugar y tiempo correcto para cada uno de tus usuarios.
Las experiencias más relevantes son también las más sorprendentes y llevan a una mayor satisfacción con el usuario.
3. Evita lo innesperado
Las funcionalidades innesperadas son peores en Glass que en otros dispositivos debido a que Glass está más cerca de los sentidos del usuario.
No envies contenido con demasiada frecuencia o en momentos inoportunos. Siempre deja claro al usuario cuál es la intención de tu Glassware.
4. Diseña para personas
Diseña interfases que usen imágenes, una voz casual y gestos naturales.
Enfócate en el modelo de de uso haz-y.olvida donde el usuario puede realizer una acción rápidamente y continuar con lo que estaba haciendo.
¿Cómo se ve todo desde allá arriba?
just now
Modelos de interacción y bloques de construcción en Google Glass
Timeline (sust., obj.)
Es una colección de Tarjetas organizadas de manera cronológica que Glass utiliza para presentar información al usuario.
Presente PasadoFuturo
Static Cards (sust., obj.) – Mirror API
Se insertan en el histórico del Timeline, se enfocan en una sola cosa, son visualmente claras y son simples de leer.
Live Cards (sust., obj.) - GDK
Contienen información que es importante en el momento. Se actualizan constantemente y se mantienen frescas y relevantes.
Menús (acción., obj.)
Las Tarjetas normalmente tienen menús que el usuario puede tocar o verbalizar para invocar acciones. Glass permite usar los menús predefinidos o crear menús personalizados.
Inmersiones (vista, acción.)
Pueden invadir temporalmente el Timeline para ofrecer experiencias personalizadas e interactivas en Glass.
Arrastra hacia abajo para regresar
Comandos (acción)
Glass usa gestos tradicionales pero también tiene capacidad para activación por voz y gestos de movimiento.
Diseñando para Google Glass
Pantalla de Glass
4.7“, 1184 x 720 px
Moto X Glass
1.5“, 640 x 360 px
3:1
Pantalla de Glass
10:34“ok glass”
640 px
360 px
Regiones de una Tarjeta
1. Área principal
2. Imagen con texto
3. Autor y contenido
4. Con columna izquierda
5. Lista
Colores
Colores
Tipografía
Glass muestra la mayoría del texto en esta tipografía
Glass muestra el texto en 26 px en esta tipografía
Redacción para Glass
Tienes un espacio limitado para texto. Sigue estas recomendaciones al redactor texto para tu Glassware:
• Se breve y conciso.• Usa vocabulario sencillo.• Habla como humano.• Pon lo más importante al principio.• Evita la repeitición
Redacción para Glass
just now
Extender duración de la grabaciónExtender videoEnviar un mensaje a MauricioEnviar mensaje
/*--------------------------------------- *//* RESET */* { margin: 0; padding: 0; border: 0; font: inherit; color: inherit;}
/*--------------------------------------- *//* BASIC COMPONENTS */
/* Base card size, colors, and fonts. */article { width: 640px; height: 360px; display: block; overflow: hidden;
position: absolute; top: 0px; left: 0px;
background-color: #000; color: #fff;
font-family: 'Roboto';
https://mirror-api-playground.appspot.com/assets/css/base_style.css
?ok, ¿preguntas?
Links útiles
Documentación para desarrollo
https://developers.google.com/glass/
Google Mirror API PlayGround
https://developers.google.com/glass/tools-downloads/playground
Google Mirror Quickstart Code
https://developers.google.com/glass/develop/mirror/quickstart/index
Mauricio Angulo S.Programador | Divulgador | Asesor de UX
email > mauricio@tesseractspace.comblog > tesseractspace.com/blogtwitter> twitter.com/mauricioangulo
www.tesseractspace.com
De Móvil a Google Glass