Mi presentación en el taller de apps (Glassware) para Google Glass. Habla de los principios de usabilidad de Glass, los modelos de desarrollo nativo (GDK) y remoto (Mirrror), así como los principios de diseño de glassware.

1. De Móvil a Google Glass
Mauricio Angulo S.
Programador | Divulgador | Asesor de UX
email >
blog >
twitter>
mauricio@tesseractspace.com
tesseractspace.com/blog
twitter.com/mauricioangulo
www.tesseractspace.com

2. Google Glass

3. •
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

9. para siempre
hace un año
hace un mes
ahora

11. Smartphone vs Glass
Aunque ambos son Computo Móvil, hay diferencias importantes a tener en cuenta:
Acción
Smartphone
Glass
Interacción
Botones físicos, teclado físico o virtual, voz
Touch panel, voz y gestos
Interfase
Visual y táctil, con controles e hipertexto
Principalmente texto
Pantalla
Grande 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

14. Desarrollo de apps para
Google Glass

15. Glassware (sust.)
Se refiere a los Servicios web que pueden enviar y recibir contenido hacia y desde
Glass.

16. Al desarrollar Glassware tienes dos opciones del API. Escoge la correcta basada
en tus necesidades. Si necesitas:
GDK
(Java)
Interacción con el
usuario en tiempo real
Acceso al
hardware
Funcionalidad
desconectada
Mirror API
(HTML5)
Independencia
de plataforma
Infraestructura
común
Funcionalidad
integrada

17. ¡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.

18. Desarrollando Glassware con el GDK

19. Desarrollando Glassware con el Mirror API
REST

20. Tu usuario
Glass del usuario
2. Glassware almacena
las credenciales
1. El usuario se autentica
3. Se inserta un cat fact
Glass se sincroniza
El usuario ve un cat fact

21. POST /mirror/v1/timeline HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer {auth token}
Content-Type: application/json
Content-Length: 26
{ "text": "Hello world" }
HTTP/1.1 201 Created
Date: Tue, 25 Sep 2012 23:30:11 GMT
Content-Type: application/json
Content-Length: 303
{
"kind": "glass#timelineItem",
"id": "1234567890",
"selfLink":
"https://www.googleapis.com/mirror/v1/timeline/12345678
90",
"created": "2012-09-25T23:28:43.192Z",
"updated": "2012-09-25T23:28:43.192Z",
"etag": ""G5BI0RWvj0jWdBrdWrPZV7xPKw/t25selcGS3uDEVT6FB09hAG-QQ"",
"text": "Hello world"
}

23. Bienvenido al PHP Quick Start del API
de Mirror

24. Principios de diseño para
Google Glass

25. 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.

26. 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.

27. 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.

28. 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

29. Modelos de interacción y bloques de
construcción en Google Glass

30. Timeline (sust., obj.)
Es una colección de Tarjetas organizadas de manera cronológica que Glass utiliza
para presentar información al usuario.
Futuro
Presente
Pasado

32. 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.

33. Live Cards (sust., obj.) - GDK
Contienen información que es importante en el momento. Se actualizan
constantemente y se mantienen frescas y relevantes.

34. 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.

35. Inmersiones (vista, acción.)
Pueden invadir temporalmente el Timeline para ofrecer experiencias personalizadas e
interactivas en Glass.
Arrastra hacia abajo para regresar

36. Comandos (acción)
Glass usa gestos tradicionales pero también tiene capacidad para activación por voz y
gestos de movimiento.

37. Diseñando para Google Glass

38. Pantalla de Glass
Moto X
Glass
3:1
4.7“, 1184 x 720 px
1.5“, 640 x 360 px

39. Pantalla de Glass
640 px
10:34
“ok glass”
360 px

40. Regiones de una Tarjeta

41. 1. Área principal

42. 2. Imagen con texto

43. 3. Autor y contenido

44. 4. Con columna izquierda

45. 5. Lista

46. Colores

47. Colores

48. Tipografía
Glass muestra la mayoría del texto en
esta tipografía
Glass muestra el texto en 26 px en
esta tipografía

49. 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

50. Redacción para Glass
Extender duración deMauricio
Enviar un mensaje a la
grabaciónvideo
Extender
Enviar mensaje
just now

52. https://mirror-api-playground.appspot.com/assets/css/base_style.css
/*--------------------------------------- */
/* 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';

53. http://www.glasssim.com

55. ?
ok, ¿preguntas?

56. 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

57. De Móvil a Google Glass
Mauricio Angulo S.
Programador | Divulgador | Asesor de UX
email >
blog >
twitter>
mauricio@tesseractspace.com
tesseractspace.com/blog
twitter.com/mauricioangulo
www.tesseractspace.com