interaccion, usabilidadWireframes

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 2 de 19

viernes 11 de noviembre de 11

Relacion entre AI y diseno- -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. Arquitectura de información

Estrategia

Diseño de interfaz

Desarrollo

Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 3 de 19

viernes 11 de noviembre de 11

Relacion entre AI y diseno- -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. Arquitectura de información

Estrategia

Diseño de interfaz

Desarrollo

Wireframes

Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 3 de 19

viernes 11 de noviembre de 11

-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

Utilidad de los wireframesLa 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.

_ <

Tiempos

_<

Productividad_ <

Costos

Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 5 de 19

viernes 11 de noviembre de 11

Utilidad de los wireframesAdemá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

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

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

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

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

Wireframes: Interacción, Usabilidad por @rots y @ypezzopane

Interaccion-

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

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

11 de 19

viernes 11 de noviembre de 11

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

UsabilidadEs 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

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

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

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

Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 16 de 19

http://vimeo.com/9761869

viernes 11 de noviembre de 11

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

Wireframes: Interacción, Usabilidad por @rots y @ypezzopane 16 de 19

http://vimeo.com/9761869

viernes 11 de noviembre de 11

17 de 19

Ventajas de los wireframesDefinen 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

10 consejos para mejorartus 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

Gracias.

Yerko Pezzopane (@ypezzopane)

Diseñador GráficoDirector de Arte en Multiplica Chile

Rodrigo Vera (@rots)

Diseñador GráficoJefe de Redes Sociales y Consultor UX en Digitaria

viernes 11 de noviembre de 11