El día 26 de junio se presentó en nuestro país el tan esperado Apple Watch. Analizamos los elementos de diseño y la navegación del reloj, elementos totalmente nuevos para usuarios de iOS.

1. Marina Jurado @MarinaJG27
The
Watch
Reimagined

2. Contenidos
Introducción
Us
The
Watch
Reimagined
¿Para
qué
sirve?
Análisis.
Sensores
Hardware
Conclusiones
Diseño
de
interacción
Gestos
Interfaz
Navegación
TipograAa
Icono
Tha
Watch
Reimagined.

3. Introducción
Cómo
nos
lo
venden.

4. hCps://www.apple.com/watch/films/#film-­‐us
US

5. hCps://www.apple.com/watch/films/#film-­‐welcome
The
Watch
Reimagined

6. ¿Para
qué
sirve?
Análisis.

7. Sensores
Heart
Rate
Sensor.
Pulsaciones.
GPS.
Usa
el
del
iPhone.
Acelerómetro.
Movimientos,
pasos.
Tha
Watch
Reimagined.
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

8. Hardware
Crown.
Click
para
Home.
Doble
click
para
úlRma
app.
Hold
para
Siri.
Scroll.
Desplazarse.
Zoom.
Side
BuGon.
Acceso
a
contactos.
Apagar
y
encender.
Tha
Watch
Reimagined.
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

9. Conclusiones
Tha
Watch
Reimagined.
Simplifica.
Aprovecha
el
contexto.
La
pantalla
es
muy
pequeña.
iPhone.
Necesitamos
uno
sí
o
sí.
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

10. Diseño
de
interacción
Diseñadoras,
atentas.

11. Gestos
Tha
Watch
Reimagined.
MulL-­‐gestos
No
soportados.
Tap
Interacción
con
un
solo
elemento.
Force
Press
Acceso
al
menú.
Swipes
Right/leY:
navegación
Up:
Glances/Scroll
Down:
NoRficaciones/Scroll
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

12. Tha
Watch
Reimagined.
Subir
y
mantener
la
muñeca
NoRficaciones
y
‘desbloquear’.
Bajar
la
muñeca
‘Bloquear’
la
pantalla.
Gestos
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

13. Tha
Watch
Reimagined.
Interfaz,
tamaño
de
la
pantalla.
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

14. Tha
Watch
Reimagined.
Interfaz,
tamaño
de
la
pantalla.
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

15. Tha
Watch
Reimagined.
Interfaz,
tamaño
de
la
pantalla.
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

16. Tha
Watch
Reimagined.
Interfaz,
elementos
de
diseño.
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

17. Tha
Watch
Reimagined.
Interfaz,
glances.
• Lo
más
parecido
a
un
‘widget’.
• Son
relevantes,
opcionales.
• No
Renen
scroll.
• Sólo
Renen
una
interacción.
• Llevan
a
una
parte
específica
de
la
app.
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

18. Tha
Watch
Reimagined.
Interfaz,
no1ficaciones.
Similares
a
las
de
iPhone,
pero
con
caracterísRcas
diferentes
de
personalización
y
canRdad
de
información.
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

19. Tha
Watch
Reimagined.
Interfaz,
la
app.
Imágenes
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

20. Tha
Watch
Reimagined.
Interfaz,
la
app.
Grupos
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

21. Tha
Watch
Reimagined.
Interfaz,
la
app.
Grupos
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

22. Tha
Watch
Reimagined.
Interfaz,
la
app.
Botones
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

23. Tha
Watch
Reimagined.
Navegación,
paginada.
Navegación
horizontal
para
items
equivalentes.
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

24. Tha
Watch
Reimagined.
Navegación,
paginada.
Navegación
paginada
en
los
glances.
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

25. Tha
Watch
Reimagined.
Navegación,
jerarquica.
Navegación
secuencial
para
items
subordinados.
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

26. Tha
Watch
Reimagined.
Navegación,
jerarquica.
Ejemplo
de
navegación
jerarquica.
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

27. Tha
Watch
Reimagined.
Navegación,
menús.
Acciones
secundarias,
no
necesariamente
relacionadas.
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

28. Tha
Watch
Reimagined.
TipograLa,
Bye
Bye
Helve1ca!
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

29. Tha
Watch
Reimagined.
TipograLa,
Bye
Bye
Helve1ca!
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

30. Tha
Watch
Reimagined.
Icono,
similar
al
de
iPhone.
Recursos
del
workshop
Apple
Watch
Design:
hCp://www.betahaus.es/event/workshop-­‐disena-­‐y-­‐programa-­‐tu-­‐app-­‐para-­‐apple-­‐watch/

31. Gracias
BARCELONA
C.Pujades
51
MADRID
C.MaRlde
Díez
11
LONDON
Coming
Soon
marina.jurado@slashmobility.com
Marina Jurado @MarinaJG27