• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Wireframes: Interacción, Usabilidad
 

Wireframes: Interacción, Usabilidad

on

  • 930 views

Definiendo el rol de los wireframes dentro del proceso de usabilidad para la creación de productos digitales.

Definiendo el rol de los wireframes dentro del proceso de usabilidad para la creación de productos digitales.

Statistics

Views

Total Views
930
Views on SlideShare
930
Embed Views
0

Actions

Likes
3
Downloads
22
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Wireframes: Interacción, Usabilidad Wireframes: Interacción, Usabilidad Presentation Transcript

    • Wireframes interaccion, usabilidad - por Rodrigo Vera y Yerko Pezzopaneviernes 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 19viernes 11 de noviembre de 11
    • - 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 19viernes 11 de noviembre de 11
    • - 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 19viernes 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 19viernes 11 de noviembre de 11
    • 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 19viernes 11 de noviembre de 11
    • 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 19viernes 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 19viernes 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 19viernes 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 19viernes 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 19viernes 11 de noviembre de 11
    • 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 19viernes 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 19viernes 11 de noviembre de 11
    • 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 19viernes 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 19viernes 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 19viernes 11 de noviembre de 11
    • 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 19viernes 11 de noviembre de 11
    • 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 19viernes 11 de noviembre de 11
    • 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 19viernes 11 de noviembre de 11
    • 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 19viernes 11 de noviembre de 11
    • 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 Digitariaviernes 11 de noviembre de 11