Esta es mi presentación en el evento Mobile Day 2015 de Software Guru, y es la segunda parte de la presentación que hice en el WIAD 2015 sobre patrones de diseño para app moviles, en particular sobre patrones responsivos para mover apps entre pantallas y plataformas, así como una breve introducción al modelo interactivo basado en Tarjetas (Cards)

1. Patrones de diseño
responsivos
Mauricio Angulo S.
Consultor en Experiencia de Usuario
email > mauricio@tesseractspace.com
twitter > @mauricioangulo
www.tesseractspace.com

2. Experiencia del Usuario

4. función afinidad+ =
1 2 3 4A B

5. http://bit.ly/1CymVsq

6. “...métodos estructurados para
describir buenas prácticas de diseño
en un campo de conocimiento”
- Wikipedia
Patrones:
”...formas para derivar y describir
soluciones de diseño”
- Prof. Michael Hughes

8. “Un patrón describe un problema que ocurre
una y otra vez en nuestro entorno y contiene la
solución mínima para ese problema, de manera
que esa solución se puede utilizar un millón de
veces sin realizarla de la misma manera dos
veces.”
- Christopher Alexander
Patrones:

11. Patrones de
diseño centrados
en el usuario
Un proyecto está centrado en
el usuario cuando se diseña
con la meta específica de
satisfacer sus deseos y
necesidades de manera
valiosa, simple y disfrutable.

12. Tipos de patrones:
1. Interfase y layout:
Diseño de UI y editorial
2. Estructura de la información y
dinámicas de navegación:
Índices, tablas de contenido, contenido
relacionado, controles de navegación
Contenido:
Taxonomía de contenido, estrategia de
comunicación.

14. Patrones de diseño
responsivos

15. Las estrategias de diseño responsivo
deben asegurar que la legibilidad y la
navegación sean posibles con el menor
esfuerzo entre dispositivos.

17. Guías de estilo vs
Lenguaje de patrones
Guía de estilo:
● Basada en reglas
● Basada en estructuras
● Enfocada en el lenguaje
● Orientada a productos
● “Presenta esta clase de
contenido de esta
manera”
Patrones:
● Heurístico
● Basado en comportamientos
● Enfocada en la información
● Consistente entre productos
● “En este escenario, haz que
el contenido actúe de esta
forma”

18. Guías de estilo vs
Lenguaje de patrones
General Específico
Principio
Guía
heurística
Patrón

19. 1. Unidades de medición:
Consistencia entre pantallas con diferentes
densidades.
2. Responder a la orientación:
Considerar la orientación en dispositivos portátiles.
3. Tamaño(s) de pantalla:
Considerar tamaños y aspectos de las pantallas
4. Estrategias responsivas:
Obtener la mejor funcionalidad en diferentes
dispositivos
Así que quieres hacer
apps responsivas...

20. Unidades de medición:
la rejilla

21. Unidades de medición:
la rejilla
Dispositivos
1 cuadro de rejilla
en pixeles
La mayoría de las laptops y PCs 8 px
Laptops y tablets con HDD (High density display) 16 px
Smartphones arriba de 4”, Tablets de 10” o TV HD 18 px
La unidad de medida responsiva es el cuadro de rejilla (grid unit).
Este cuadro define un ritmo visual que será usado en todas las
medidas, desde el tamaño de los elementos hasta el espacio entre
ellos, márgenes, etc. deberá utilizas 1 GU (Grid Unit) como medida
base.

22. Patrón de diseño basado en
la rejilla
1/1
1/2 1/2
1/3 2/3 3/3
1/4 2/4 4/43/4
1/8 2/8 4/83/8 6/85/8 8/87/8

23. Patrones mezclados en la
rejilla
8/87/8
1/4 3/4
1/3 1/2 1/2

24. 1/2
2/2
1/2 1/21/3 2/3
1/11/1
1/2 1/2
1/2
3/3
Grupos anidados en la rejilla

25. 1/2
2/2
1/3
2/3
1/1
1/2 1/2
1/2
3/3
Grupos anidados en la rejilla

26. Respondiendo a la
orientación
Orientación de smartphone:
vertical
Orientación de tableta:
horizontal
Considera usar orientación
horizontal cuando desees utilizar
toda la pantalla para un solo tipo
de contenido, como un video, una
fotografía o un videojuego.
Considera usar orientación
vertical para ayudar al usuario a
usar la app de manera extensa,
como leer una revista o redactar
un correo largo.

27. Tamaños (y densidades)
de pantallas

28. Estrategias responsivas
Para facilitar el uso organiza los
elementos visuales de manera
relativa entre ellos y las orillas de la
pantalla.
Decide cómo tu app podrá mostrar
más o menos contenido en cada
orientación.

29. Estrategias responsivas
Si el contenido de la app es más
grande que la pantalla -por ejemplo,
al navegar en un mapa- muestra
más contenido dependiendo de la
orientación y la pantalla
Una app en tableta podría mostrar
más contenido en su vista principal
que en un teléfono.
Si el contenido de la app tiene un
tamaño fijo y puede escalar de una
pantalla a otra hacia arriba o hacia
abajo.

30. Estrategias responsivas:
Papercraft (Material)

32. Tarjetas. Tarjetas en todas partes

39. Patrones para tarjetas
Contexto
Foco
Acciones

40. Patrones para tarjetas
Contexto Acciones
Foco
Contexto
Foco
Acciones
Contexto AccionesFoco
Registro Teaser Alerta

41. Patrones para contenedores de
tarjetas
Narrativo Exploratorio Conversación Flujo

42. http://bradfrost.github.io/this-is-responsive/

43. www.cardstack.io

44. ?
?? ?

45. http://bit.ly/19526qs

46. El primer jueves de cada mes a las 19:30 hrs:
- Un tema diferente por mes
- Tres expertos por tema
- ¡Pizza y...
- … cerveza gratis!
Más información en www.uxnights.com

47. ¡Gracias!
Mauricio Angulo S.
Consultor en Experiencia de Usuario
email > mauricio@tesseractspace.com
twitter > @mauricioangulo
www.tesseractspace.com