Wireframes: Interacción, Usabilidad.

Wireframes -

interaccion, usabilidad por Rodrigo Vera y Yerko Pezzopane

viernes 11 de noviembre de 11

?

-

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 viernes 11 de noviembre de 11

2 de 19

-

Relacion entre AI y diseno Desarrollo

Diseño de interfaz

Arquitectura de información

El Wireframe es el puente que une la Arquitectura de Información y Diseño. Pasa de la “mentalidad estructural” de un mapa de contenidos, dónde decidimos y ordenamos los contenidos de nuestro sitio web, a la emocionalidad del Diseño de Interfaz. 

Estrategia

Wireframes: Interacción, Usabilidad por @rots y @ypezzopane viernes 11 de noviembre de 11

3 de 19

-

Relacion entre AI y diseno Desarrollo

Diseño de interfaz Wireframes Arquitectura de información

El Wireframe es el puente que une la Arquitectura de Información y Diseño. Pasa de la “mentalidad estructural” de un mapa de contenidos, dónde decidimos y ordenamos los contenidos de nuestro sitio web, a la emocionalidad del Diseño de Interfaz. 

Estrategia

Wireframes: Interacción, Usabilidad por @rots y @ypezzopane viernes 11 de noviembre de 11

3 de 19

-

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 viernes 11 de noviembre de 11

4 de 19

Utilidad de los wireframes

_

<

_ < _ <

Productividad

Tiempos

Costos

Wireframes: Interacción, Usabilidad por @rots y @ypezzopane viernes 11 de noviembre de 11

La principal ventaja de los Wireframes, es que ofrecen una 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 retrase por falta de definición o que el resultado se aleje mucho de lo que se esperaba.

5 de 19

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 viernes 11 de noviembre de 11

6 de 19

Son simples y no tienen distracciones visuales tales como color o imágenes

Wireframes: Interacción, Usabilidad por @rots y @ypezzopane viernes 11 de noviembre de 11

7 de 19

Pueden ser dibujados a mano o creados con alguna aplicación computacional

Wireframes: Interacción, Usabilidad por @rots y @ypezzopane viernes 11 de noviembre de 11

8 de 19

Siempre van acompañados de una explicación acerca de las zonas e interacciones

Wireframes: Interacción, Usabilidad por @rots y @ypezzopane viernes 11 de noviembre de 11

9 de 19

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 viernes 11 de noviembre de 11

10 de 19

-

Interaccion

Define la estructura y el comportamiento de productos y servicios interactivos, creando experiencias únicas entre las personas y los diferentes sistemas que utilizan.

Wireframes: Interacción, Usabilidad por @rots y @ypezzopane viernes 11 de noviembre de 11

Generalmente se centra en sistemas de información complejos, siendo en las interfaces digitales donde más se aplica.

11 de 19

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 viernes 11 de noviembre de 11

12 de 19

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 viernes 11 de noviembre de 11

13 de 19

Diseño centrado en el usuario, diseñando para y por el usuario.

Wireframes: Interacción, Usabilidad por @rots y @ypezzopane viernes 11 de noviembre de 11

14 de 19

Diseñar sistemas fáciles de usar y navegar. Diseño consistente.

Wireframes: Interacción, Usabilidad por @rots y @ypezzopane viernes 11 de noviembre de 11

15 de 19

Diseño de prototipos navegables para detectar problemas de interacciones y usabilidad.

http://vimeo.com/9761869

Wireframes: Interacción, Usabilidad por @rots y @ypezzopane viernes 11 de noviembre de 11

16 de 19

Diseño de prototipos navegables para detectar problemas de interacciones y usabilidad.

http://vimeo.com/9761869

Wireframes: Interacción, Usabilidad por @rots y @ypezzopane viernes 11 de noviembre de 11

16 de 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 viernes 11 de noviembre de 11

17 de 19

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 viernes 11 de noviembre de 11

18 de 19

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