1. Wireframes
interaccion, usabilidad
-
por Rodrigo Vera y Yerko Pezzopane
viernes 11 de noviembre de 11

2. ?
Que son los wireframes?
-
El Wireframe es una
jerarquización de contenidos
distribuida visualmente y una
esquematización de la interfaz.
Gráficamente, son estructuras
muy simples y están enfocados a
visualizar la distribución de los
contenidos dentro de una
pantalla.
Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 2 de 19
viernes 11 de noviembre de 11

3. -
Relacion entre AI y diseno
-
El Wireframe es el puente que
Desarrollo une la Arquitectura de
Información y Diseño. Pasa de la
“mentalidad estructural” de un
mapa de contenidos, dónde
Diseño de interfaz decidimos y ordenamos los
contenidos de nuestro sitio web, a
la emocionalidad del Diseño de
Arquitectura de información Interfaz.
Estrategia
Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 3 de 19
viernes 11 de noviembre de 11

4. -
Relacion entre AI y diseno
-
El Wireframe es el puente que
Desarrollo une la Arquitectura de
Información y Diseño. Pasa de la
“mentalidad estructural” de un
mapa de contenidos, dónde
Diseño de interfaz decidimos y ordenamos los
contenidos de nuestro sitio web, a
Wireframes
la emocionalidad del Diseño de
Arquitectura de información Interfaz.
Estrategia
Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 3 de 19
viernes 11 de noviembre de 11

5. -
Relacion entre AI y diseno
-
Pasar de la AI al Wireframe,
compete varios procesos de un
desarrollo de interfaz digital.
Será importante en esta
traducción aspectos
estratégicos, definiciones de
buenas prácticas del
benchmark y la definición de
los contenidos.
Luego, valiéndonos del árbol de
contenidos, podremos plasmar
una correcta jerarquía de
contenidos en nuestro esquema.
Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 4 de 19
viernes 11 de noviembre de 11

6. Utilidad de los wireframes
< La principal ventaja de los
Wireframes, es que ofrecen una
_
Productividad
perspectiva basada solamente
en la arquitectura del
contenido, obviando el diseño y
evitando elementos
accidentales que puedan
distraer (colores, tipografías,
imágenes, textos, etc.).
_
_
<
<
Esto último, ayuda a que el
proyecto en desarrollo no se
Tiempos Costos retrase por falta de definición o
que el resultado se aleje mucho
de lo que se esperaba.
Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 5 de 19
viernes 11 de noviembre de 11

7. Utilidad de los wireframes
Además, son una excelente
herramienta de comunicación y
discusión entre arquitectos de
información, programadores,
diseñadores y clientes.
Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 6 de 19
viernes 11 de noviembre de 11

8. Son simples y no tienen distracciones visuales
tales como color o imágenes
Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 7 de 19
viernes 11 de noviembre de 11

9. Pueden ser dibujados a mano o creados con alguna
aplicación computacional
Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 8 de 19
viernes 11 de noviembre de 11

10. Siempre van acompañados de una explicación
acerca de las zonas e interacciones
Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 9 de 19
viernes 11 de noviembre de 11

11. Se utilizan en la creación de cualquier tipo de
interfaces digitales (web, móviles, ATM, etc.)
Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 10 de 19
viernes 11 de noviembre de 11

12. Interaccion
-
Define la estructura y el Generalmente se centra en
comportamiento de productos y sistemas de información
servicios interactivos, creando complejos, siendo en las
experiencias únicas entre las interfaces digitales donde
personas y los diferentes más se aplica.
sistemas que utilizan.
Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 11 de 19
viernes 11 de noviembre de 11

13. Definir y diseñar todas las interacciones. Todas las interacciones se
plasman en wireframes creando una consistencia en el diseño de
interacciones con llamados, botones, mensajes, etc.
Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 12 de 19
viernes 11 de noviembre de 11

14. Usabilidad
Es la disciplina que estudia la
forma de diseñar sitios web para
que los usuarios puedan
interactuar con ellos de la
forma más fácil, cómoda e
intuitiva posible, para conseguir
objetivos específicos con
efectividad, eficiencia y
satisfacción en un contexto de
uso especificado.
La Usabilidad es una manera de
medir la calidad de la
experiencia del usuario cuando
interactúa con un sistema, y
como tal, dependerá de cada
persona determinar si dicha
medida es plena, mediana o
inexistente
Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 13 de 19
viernes 11 de noviembre de 11

15. Diseño centrado en el usuario, diseñando para y
por el usuario.
Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 14 de 19
viernes 11 de noviembre de 11

16. Diseñar sistemas fáciles de usar y navegar.
Diseño consistente.
Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 15 de 19
viernes 11 de noviembre de 11

17. Diseño de prototipos navegables para detectar
problemas de interacciones y usabilidad.
http://vimeo.com/9761869
Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 16 de 19
viernes 11 de noviembre de 11

18. Diseño de prototipos navegables para detectar
problemas de interacciones y usabilidad.
http://vimeo.com/9761869
Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 16 de 19
viernes 11 de noviembre de 11

19. Ventajas de los wireframes
Definen qué quiere tu cliente y cuáles son sus objetivos
Permite la comunicación fluida entre el equipo de trabajo y el cliente
Las correcciones son objetivas, basadas en contenidos y funcionalidad
Se evitan las discusiones gráficas
Se reducen los tiempos de trabajo y costos
Permiten visualizar interacciones y flujos
Se pueden identificar problemas de Interacción, Usabilidad,
Accesibilidad, etc. que puedan presentarse más adelante
Como es una estructura simple y enfocada en los contenidos, permite al
diseñador tener plena libertad al momento de diseñar la interfaz
Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 17 de 19
viernes 11 de noviembre de 11

20. 10 consejos para mejorar
tus wireframes
Simple sobre todas las cosas
Usa la mayor cantidad de contenido real posible
Siempre trabaja en escala de grises
Evita usar imágenes, logos e iconografía
No te limites a usar una aplicación digital, ¡dibuja!
Define muy bien la estrategia y los contenidos antes de empezar
Siempre haz wireframes antes de diseñar
Explica las zonas e interacciones
Discute los wireframes con tu equipo de trabajo
Corrige problemas detectados en wireframes, no en diseño
Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 18 de 19
viernes 11 de noviembre de 11

21. Gracias.
Yerko Pezzopane (@ypezzopane)
Diseñador Gráfico
Director de Arte en Multiplica Chile
Rodrigo Vera (@rots)
Diseñador Gráfico
Jefe de Redes Sociales y Consultor UX en Digitaria
viernes 11 de noviembre de 11