SlideShare una empresa de Scribd logo
1 de 21
Descargar para leer sin conexión
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                                     2 de 19

viernes 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 19

viernes 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 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 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 19

viernes 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 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
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 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
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 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.




                                                     http://vimeo.com/9761869




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

viernes 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 19

viernes 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 19

viernes 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 19

viernes 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 Digitaria




viernes 11 de noviembre de 11

Más contenido relacionado

Similar a Wireframes: Interacción, Usabilidad

Hablemos un poco de Arquitectura de Información y Wireframes
Hablemos un poco de Arquitectura de Información y WireframesHablemos un poco de Arquitectura de Información y Wireframes
Hablemos un poco de Arquitectura de Información y WireframesRodrigo Vera
 
Sba design guide_0127_spanish[1]
Sba design guide_0127_spanish[1]Sba design guide_0127_spanish[1]
Sba design guide_0127_spanish[1]vladimirsgm
 
Wireframes, Definiciones.
Wireframes, Definiciones.Wireframes, Definiciones.
Wireframes, Definiciones.Rodrigo Vera
 
Arquitecturas de redes
Arquitecturas de redesArquitecturas de redes
Arquitecturas de redeskattya225
 
Tecnología e innovación ica ingenieria
Tecnología e innovación ica ingenieriaTecnología e innovación ica ingenieria
Tecnología e innovación ica ingenieriaCESEIC
 
DISEÑO DE LA ARQUITECTURA DEL SOFTWARE
DISEÑO DE LA ARQUITECTURA DEL SOFTWAREDISEÑO DE LA ARQUITECTURA DEL SOFTWARE
DISEÑO DE LA ARQUITECTURA DEL SOFTWAREjose_rob
 
Diseñode portales etapa3-v8junio
Diseñode portales etapa3-v8junioDiseñode portales etapa3-v8junio
Diseñode portales etapa3-v8junioitaipcurso
 
Diseno de la arquitectura
Diseno de la arquitecturaDiseno de la arquitectura
Diseno de la arquitecturaFatima Cham
 
La Red Yanina Brahona Navarro y Richar Soria Vasquez.
La Red  Yanina Brahona Navarro y Richar Soria Vasquez.La Red  Yanina Brahona Navarro y Richar Soria Vasquez.
La Red Yanina Brahona Navarro y Richar Soria Vasquez.Ichal24
 
Arquitectura de Redes
Arquitectura de RedesArquitectura de Redes
Arquitectura de RedesNeovictril
 
Presentacion InterfacesMaterialesEducativosInv
Presentacion InterfacesMaterialesEducativosInvPresentacion InterfacesMaterialesEducativosInv
Presentacion InterfacesMaterialesEducativosInvgregoriar
 
Diseño de arquitectura del software
Diseño de arquitectura del softwareDiseño de arquitectura del software
Diseño de arquitectura del softwaredeahesy najera garcia
 
Arquitectura basada en objetos de computación distribuida en la configuración...
Arquitectura basada en objetos de computación distribuida en la configuración...Arquitectura basada en objetos de computación distribuida en la configuración...
Arquitectura basada en objetos de computación distribuida en la configuración...Tensor
 
Presentación UX Luis_Correa2010
Presentación UX Luis_Correa2010Presentación UX Luis_Correa2010
Presentación UX Luis_Correa2010Luis Correa
 

Similar a Wireframes: Interacción, Usabilidad (20)

Hablemos un poco de Arquitectura de Información y Wireframes
Hablemos un poco de Arquitectura de Información y WireframesHablemos un poco de Arquitectura de Información y Wireframes
Hablemos un poco de Arquitectura de Información y Wireframes
 
Sba design guide_0127_spanish[1]
Sba design guide_0127_spanish[1]Sba design guide_0127_spanish[1]
Sba design guide_0127_spanish[1]
 
Yaneth
YanethYaneth
Yaneth
 
Comp
CompComp
Comp
 
Comp
CompComp
Comp
 
Yaneth
YanethYaneth
Yaneth
 
Wireframes, Definiciones.
Wireframes, Definiciones.Wireframes, Definiciones.
Wireframes, Definiciones.
 
Arquitecturas de redes
Arquitecturas de redesArquitecturas de redes
Arquitecturas de redes
 
Tecnología e innovación ica ingenieria
Tecnología e innovación ica ingenieriaTecnología e innovación ica ingenieria
Tecnología e innovación ica ingenieria
 
DISEÑO DE LA ARQUITECTURA DEL SOFTWARE
DISEÑO DE LA ARQUITECTURA DEL SOFTWAREDISEÑO DE LA ARQUITECTURA DEL SOFTWARE
DISEÑO DE LA ARQUITECTURA DEL SOFTWARE
 
Diseñode portales etapa3-v8junio
Diseñode portales etapa3-v8junioDiseñode portales etapa3-v8junio
Diseñode portales etapa3-v8junio
 
Diseno de la arquitectura
Diseno de la arquitecturaDiseno de la arquitectura
Diseno de la arquitectura
 
La Red Yanina Brahona Navarro y Richar Soria Vasquez.
La Red  Yanina Brahona Navarro y Richar Soria Vasquez.La Red  Yanina Brahona Navarro y Richar Soria Vasquez.
La Red Yanina Brahona Navarro y Richar Soria Vasquez.
 
Arquitectura de Redes
Arquitectura de RedesArquitectura de Redes
Arquitectura de Redes
 
Pujol redes.
Pujol redes.Pujol redes.
Pujol redes.
 
Presentacion InterfacesMaterialesEducativosInv
Presentacion InterfacesMaterialesEducativosInvPresentacion InterfacesMaterialesEducativosInv
Presentacion InterfacesMaterialesEducativosInv
 
Corba
CorbaCorba
Corba
 
Diseño de arquitectura del software
Diseño de arquitectura del softwareDiseño de arquitectura del software
Diseño de arquitectura del software
 
Arquitectura basada en objetos de computación distribuida en la configuración...
Arquitectura basada en objetos de computación distribuida en la configuración...Arquitectura basada en objetos de computación distribuida en la configuración...
Arquitectura basada en objetos de computación distribuida en la configuración...
 
Presentación UX Luis_Correa2010
Presentación UX Luis_Correa2010Presentación UX Luis_Correa2010
Presentación UX Luis_Correa2010
 

Wireframes: Interacción, Usabilidad

  • 1. Wireframes interaccion, usabilidad - por Rodrigo Vera y Yerko Pezzopane viernes 11 de noviembre de 11
  • 2. ? 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
  • 3. - 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 19 viernes 11 de noviembre de 11
  • 4. - 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 19 viernes 11 de noviembre de 11
  • 5. - 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
  • 6. 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 19 viernes 11 de noviembre de 11
  • 7. 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 19 viernes 11 de noviembre de 11
  • 8. 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
  • 9. 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
  • 10. 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
  • 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
  • 12. 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 19 viernes 11 de noviembre de 11
  • 13. 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
  • 14. 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 19 viernes 11 de noviembre de 11
  • 15. 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
  • 16. 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
  • 17. 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 19 viernes 11 de noviembre de 11
  • 18. 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 19 viernes 11 de noviembre de 11
  • 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 17 de 19 viernes 11 de noviembre de 11
  • 20. 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 19 viernes 11 de noviembre de 11
  • 21. 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