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

Wireframes: Interacción, Usabilidad.

on

  • 1,901 views

 

Statistics

Views

Total Views
1,901
Views on SlideShare
1,875
Embed Views
26

Actions

Likes
2
Downloads
56
Comments
0

4 Embeds 26

http://www.linkedin.com 12
http://www.scoop.it 10
http://us-w1.rockmelt.com 3
http://twitter.com 1

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