wireframes: interacción, usabilidad
TRANSCRIPT
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