SlideShare uma empresa Scribd logo
1 de 49
Diseño de aplicaciones
              Conceptos básicos para desarrolladores




Alex de Fuenmayor & Javier Gala

@alexdef • @JaviGala                            BCNDEVCON 2011
Quiénes


                       Alex de Fuenmayor
                       Diseñador Visual y de Interacción
                       Responsable de Diseño de Interacción en Tempos21,
                       Grupo Atos
                       @alexdef • alexdef.com


                                          Javier Gala
                        Diseñador de Experiencia de Usuario
                       @JaviGala • javiergala.wordpress.com




@alexdef • @JaviGala                                          BCNDEVCON 2011
Qué

                 Qué es y por qué del diseño
                 Diseño aplicado al software
                 Principios universales

                 Diseño de Guerrilla
                 Consejos finales


@alexdef • @JaviGala                           BCNDEVCON 2011
Qué es y por qué del diseño




@alexdef • @JaviGala               BCNDEVCON 2011
Qué es




”
         La mayor parte de la gente comete el error
         de pensar que el diseño es cómo se ve.
         La gente piensa que es un barniz, que a los
         diseñadores les dan una caja y les dicen
         “¡Haz que quede bonito!”. Esto no es lo que
         creemos que es el diseño. No es sólo
         cómo se ve o cómo se siente. El diseño
         es cómo funciona.
                                    Steve Jobs, CEO de Apple

@alexdef • @JaviGala                            BCNDEVCON 2011
z

           El diseño resuelve problemas


         Me sorprende la frecuencia
         con la que aquellos fuera de la
         disciplina del diseño asumen
         que lo que hacen los
         diseñadores es decoración.
         El buen diseño resuelve
         problemas. Veen, co-fundador de Adaptive Path
                 Jeffrey
@alexdef • @JaviGala                          BCNDEVCON 2011
z

           El diseño resuelve problemas




”
         Me sorprende la frecuencia con la que
         aquellos fuera de la disciplina del
         diseño asumen que lo que hacen los
         diseñadores es decoración.

         El buen diseño resuelve problemas.

                       Jeffrey Veen, co-fundador de Adaptive Path

@alexdef • @JaviGala                                 BCNDEVCON 2011
z

                       El diseño no es arte




”
         El buen diseño se define por su
         adecuación a la audiencia y
         objetivos, y por su efectividad, no
         por su adherencia al diseño suizo o el
         número de premios que gane.



                                      Drew Davies, diseñador

@alexdef • @JaviGala                            BCNDEVCON 2011
El diseño es inevitable




”
         Las dudas sobre si el diseño es
         necesario o asequible son
         irrelevantes: el diseño es inevitable.

         La alternativa al buen diseño es el mal
         diseño, no el “no diseñar”.

                             Douglas Martin, diseñador y tipógrafo

@alexdef • @JaviGala                                  BCNDEVCON 2011
El diseño es diferencia




”
         El buen diseño es la forma más
         importante de diferenciarnos de
         nuestros competidores.




                              Yun Jong Yong, CEO de Samsung

@alexdef • @JaviGala                            BCNDEVCON 2011
El diseño genera satisfacción




”
         En internet si tienes un cliente
         descontento no se lo dice a seis
         amigos, se lo dice a seis mil.




                                Jeff Bezos, CEO de Amazon

@alexdef • @JaviGala                          BCNDEVCON 2011
z

          El diseño aplicado al software




@alexdef • @JaviGala               BCNDEVCON 2011
z

     Metodología tradicional del diseño




”
         1. Definición del problema
         2. Elementos del problema
         3. Recopilación de datos
         4. Análisis de datos
         5. Creatividad
         6. Materiales - tecnologías
         7. Experimentación
         8. Modelos
         9. Verificación
                                   Bruno Munari, diseñador industrial

@alexdef • @JaviGala                                     BCNDEVCON 2011
El diseño industrial




”
         Nunca diseño un edificio sin antes ver
         el lugar y conocer a la gente que lo va
         a utilizar.




                                   Frank Lloyd Wright, arquitecto

@alexdef • @JaviGala                                BCNDEVCON 2011
Diseño centrado en el usuario




”
         El diseño centrado en el usuario
         significa entender lo que necesitan tus
         usuarios, cómo piensan, y cómo se
         comportan – e incorporar este
         conocimiento en cada faceta de tu
         proceso.


                       Jesse James Garrett, co-fundador de Adaptive Path

@alexdef • @JaviGala                                        BCNDEVCON 2011
Experiencia de usuario




                           Peter Morville, arquitecto de información

@alexdef • @JaviGala                                   BCNDEVCON 2011
Experiencia de usuario




”
         La arquitectura de información define la
         estructura de la información. El diseño de
         interacción hace que podamos manipular y
         contribuir a la información. El diseño visual
         comunica estas posibilidades y crea
         afinidades. La experiencia de usuario es la
         suma total de estas consideraciones.


                                  Luke Wroblewski, diseñador UX

@alexdef • @JaviGala                                BCNDEVCON 2011
z

                       Principios universales




@alexdef • @JaviGala                        BCNDEVCON 2011
z

                       Menos es más




”
         El diseño llama la atención sólo
         cuando falla; cuando tiene éxito
         es invisible.




                                  John D. Berry, Tipógrafo

@alexdef • @JaviGala                          BCNDEVCON 2011
z

            Elementos del Diseño Visual


         Blanco
         Jerarquización
         Tipografía
         Ilustración e imagen
         Color



@alexdef • @JaviGala               BCNDEVCON 2011
z

                       Blanco


         ¿Por qué es tan importante el espacio
         en blanco?

         El contenido necesita espacio para
         respirar.




@alexdef • @JaviGala                    BCNDEVCON 2011
z

                       Jerarquización




”
         Los diseñadores pueden crear la
         normalidad en medio del caos;
         pueden comunicar ideas a través de la
         organización y manipulación de
         palabras e imágenes.



                          Jeffrey Veen, co-fundador de Adaptive Path

@alexdef • @JaviGala                                    BCNDEVCON 2011
z

                       Tipografía




”
         La tipografía debe definir el blanco
         como la arquitectura debe definir el
         espacio.




                                 Albert Hollestein, Tipógrafo

@alexdef • @JaviGala                            BCNDEVCON 2011
z

                         Color




”
         Uno crea su propia decoración. Eliges
         tu color, eliges tu estado de ánimo...
         [Si] estás deprimido, pones un poco
         de amarillo brillante y de repente
         estás feliz.



                           Philippe Starck, Diseñador industrial

@alexdef • @JaviGala                               BCNDEVCON 2011
z

                               Color




                       http://kuler.adobe.com
@alexdef • @JaviGala                            BCNDEVCON 2011
z

              Proporción aurea y retícula



”
         La retícula sitúa los elementos en un área
         espacial dotada de regularidad, lo que los
         hace accesibles; los lectores saben dónde
         encontrar la información que buscan,
         porque las uniones entre las divisiones
         verticales y las horizontales actúan como
         señales indicativas para su localización.




                       Timothy Samara, diseñador gráfico y profesor

@alexdef • @JaviGala                                     BCNDEVCON 2011
z

              Proporción aurea y retícula




@alexdef • @JaviGala                 BCNDEVCON 2011
Teoría de recolección óptima




”
         Cantidad neta de energía obtenida por
         la captura de una presa comparada
         con la energía invertida en la
         obtención de la presa.




                       Robert H. MacArthur y Eric R. Pianka, biólogos

@alexdef • @JaviGala                                       BCNDEVCON 2011
Recolección de información


         Cantidad de información obtenida
         comparada con el tiempo y esfuerzo
         invertido.




@alexdef • @JaviGala                   BCNDEVCON 2011
Patrones de escaneo




@alexdef • @JaviGala                     BCNDEVCON 2011
Patrones y estándares




”
         Ley de Jakob de la experiencia de
         usuario: los usuarios pasan la mayor
         parte de su tiempo en otras páginas.




                           Jakob Nielsen, experto en usabilidad

@alexdef • @JaviGala                                 BCNDEVCON 2011
z

                       Diseño de guerrilla




@alexdef • @JaviGala                         BCNDEVCON 2011
z

                       Diseño de guerrilla


         Definición de producto y éxito
         Análisis competitivo orientado
         Puntos de contacto y fricción
         Bocetos
         Resultados


@alexdef • @JaviGala                         BCNDEVCON 2011
Definición de producto y éxito




”
         Si no puedes explicar algo de forma
         sencilla, entonces es que no lo
         entiendes bien.




                                 Albert Einstein, científico

@alexdef • @JaviGala                          BCNDEVCON 2011
Análisis competitivo orientado




”
         Hace unos días un amigo me habló de su
         primera visita a IDEO. En un momento dado
         vio a una docena de investigadores en una
         cocina improvisada, cada uno con una
         marca diferente de sartén, haciendo girar
         tortitas una y otra vez. Había una persona
         observando y tomando notas con una
         libreta.

                                  Harry Brignull, diseñador UX

@alexdef • @JaviGala                              BCNDEVCON 2011
Puntos de contacto y fricción




”
         Si el punto de contacto entre el
         producto y la gente se convierte en un
         punto de fricción, entonces es que el
         Diseñador Industrial ha fallado.




                           Henry Dreyfuss, diseñador industrial

@alexdef • @JaviGala                               BCNDEVCON 2011
Bocetos




”
         Puedes usar una goma de borrar
         en la mesa de dibujo o un martillo
         en la obra.




                               Frank Lloyd Wright, arquitecto

@alexdef • @JaviGala                            BCNDEVCON 2011
Resultados




”
         Por muy hermosa que sea la
         estrategia, de vez en cuando hay
         que tener en cuenta los resultados.




                                Winston Churchill, estadista

@alexdef • @JaviGala                           BCNDEVCON 2011
Consejos finales




@alexdef • @JaviGala                      BCNDEVCON 2011
No eres tu usuario




”
         Tus usuarios no son tú. No se parecen a ti,
         no piensan como tú, no hacen las cosas
         que tú haces, no comparten tus
         expectativas o suposiciones.

         Si lo hicieran no serían tus clientes; serían
         tus competidores.

                          Mike Kuniavsky, co-fundador de Adaptive Path

@alexdef • @JaviGala                                        BCNDEVCON 2011
Entrevistas




”
         La gente es muy mala prediciendo el
         futuro. Esto incluye a los expertos […]
         [que] tendrían mejores resultados
         adivinando al azar. Incluso los mejores
         pronosticadores fueron superados por
         reglas generales como “predecir
         siempre que no habrá cambios”.
                       Philip Tetlock, psicólogo y Dan Gardner, periodista

@alexdef • @JaviGala                                               BCNDEVCON 2011
Personas y escenarios




”
         Podemos explicar reglas generales
         derivadas de nuestra experiencia, pero es
         difícil aprender de ellas. Resulta complicado
         recordar abstracciones, pero resulta más
         sencillo recordar una buena historia. Las
         historias avivan nuestras experiencias
         pasadas. Hacen nuestro pasado
         memorable para nosotros y para los demás.

           Roger Schank, lingüista especializado en IA y psicología cognitiva

@alexdef • @JaviGala                                               BCNDEVCON 2011
Test de usabilidad




”
         Lo que pocos saben sobre los tests de
         usabilidad es que son increíblemente
         sencillos de realizar. Sí, alguna gente los
         hace mejor, pero nunca he visto un test de
         usabilidad que no produzca resultados
         útiles, no importa lo mal que se hiciera.



                               Steve Krug, experto en usabilidad

@alexdef • @JaviGala                                  BCNDEVCON 2011
Formularios para humanos




                                ”
                                       Los formularios son un
                                       asco. Si no me crees,
                                       busca a alguien a quien
                                       le guste rellenarlos.




           Luke Wroblewski, diseñador UX, autoridad mundial en formularios

@alexdef • @JaviGala                                            BCNDEVCON 2011
Diseñar no es obedecer al usuario




”
         Si le hubiera preguntado a mis clientes que
         querían, me hubieran dicho que un caballo
         más rápido.




                                 Henry Ford, fundador de Ford

@alexdef • @JaviGala                               BCNDEVCON 2011
Diseñar no es obedecer al cliente




       Matthew Inman, diseñador web (http://theoatmeal.com/comics/design_hell)

@alexdef • @JaviGala                                               BCNDEVCON 2011
z

                       El diseño es un oficio




”
         Lo dibujé en solo unos segundos, pero me
         ha costado 34 años aprender a dibujarlo en
         sólo unos segundos.




                                  Paula Scher, diseñadora gráfica

@alexdef • @JaviGala                                   BCNDEVCON 2011
z

                             Despedida




”
         La experiencia de usuario lo es todo.
         Siempre lo ha sido, pero sigue siendo
         infravalorada y contando con pocos
         recursos. Si no sabes diseño centrado en el
         usuario, estúdialo. Contrata a gente que lo
         conozca. Obsesiónate con él. Convence a
         toda tu empresa.


                       Evan Williams, creador de Blogger y CEO de Twitter

@alexdef • @JaviGala                                           BCNDEVCON 2011
Contacto


                       Alex de Fuenmayor
                       alex@no2.es
                       www.no2.es



                                       Javier Gala
                                       ljgala@gmail.com




@alexdef • @JaviGala                                      BCNDEVCON 2011

Mais conteúdo relacionado

Semelhante a Diseño de aplicaciones para desarrolladores

Devs&Designers - Los que se pelean se desean
Devs&Designers - Los que se pelean se deseanDevs&Designers - Los que se pelean se desean
Devs&Designers - Los que se pelean se deseanFrancisco Aranda
 
Service Design Nagusi.pdf
Service Design Nagusi.pdfService Design Nagusi.pdf
Service Design Nagusi.pdfAsier Perez
 
Service Design Nagusi.pdf
Service Design Nagusi.pdfService Design Nagusi.pdf
Service Design Nagusi.pdfAsier Perez
 
Como prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del WireframeComo prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del WireframeJorge Galindo Cruces
 
Como prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del WireframeComo prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del Wireframebetabeers
 
Sketches, wireframes y prototipos
Sketches, wireframes y prototiposSketches, wireframes y prototipos
Sketches, wireframes y prototiposCeleste North
 
¿Dar el brinco a UX?
¿Dar el brinco a UX?¿Dar el brinco a UX?
¿Dar el brinco a UX?UX Nights
 
¿Qué es diseño? Para entender el Diseño Centrado en el Usuario
¿Qué es diseño? Para entender el Diseño Centrado en el Usuario¿Qué es diseño? Para entender el Diseño Centrado en el Usuario
¿Qué es diseño? Para entender el Diseño Centrado en el UsuarioJuan-Francisco Reyes
 
Cómo ayudar a los Clientes a tomar Decisiones de Diseño
Cómo ayudar a los Clientes a tomar Decisiones de DiseñoCómo ayudar a los Clientes a tomar Decisiones de Diseño
Cómo ayudar a los Clientes a tomar Decisiones de DiseñoSol Mesz
 
Estructura proyecto tecnologico
Estructura proyecto tecnologicoEstructura proyecto tecnologico
Estructura proyecto tecnologicoHirlanny Mosquera
 
¿Cómo trabajamos los diseñadores digitales?
¿Cómo trabajamos los diseñadores digitales?¿Cómo trabajamos los diseñadores digitales?
¿Cómo trabajamos los diseñadores digitales?Jimena Catalina Gayo
 
Diseño y concepto DOC-20240412-WA0023..pdf
Diseño y concepto DOC-20240412-WA0023..pdfDiseño y concepto DOC-20240412-WA0023..pdf
Diseño y concepto DOC-20240412-WA0023..pdfSharonSmis
 
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdf
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdfDiseño ( concepto-caracteristicas y herramientas para el diseño.pdf
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdfSharonSmis
 
Experiencia Interaccion Interfaces
Experiencia Interaccion InterfacesExperiencia Interaccion Interfaces
Experiencia Interaccion InterfacesGonzalo Auza
 
Cuco Vega - Design vs UX
Cuco Vega - Design vs UXCuco Vega - Design vs UX
Cuco Vega - Design vs UXUX Nights
 
TIPOS DE DISEÑO
TIPOS DE DISEÑOTIPOS DE DISEÑO
TIPOS DE DISEÑOariandrea
 
7 Principios de Diseño para un software amigable
7 Principios de Diseño para un software amigable7 Principios de Diseño para un software amigable
7 Principios de Diseño para un software amigableJavier Gala
 
Diseño participativo venezuela
Diseño participativo venezuelaDiseño participativo venezuela
Diseño participativo venezuelaJorge Montana
 

Semelhante a Diseño de aplicaciones para desarrolladores (20)

Devs&Designers - Los que se pelean se desean
Devs&Designers - Los que se pelean se deseanDevs&Designers - Los que se pelean se desean
Devs&Designers - Los que se pelean se desean
 
Service Design Nagusi.pdf
Service Design Nagusi.pdfService Design Nagusi.pdf
Service Design Nagusi.pdf
 
Service Design Nagusi.pdf
Service Design Nagusi.pdfService Design Nagusi.pdf
Service Design Nagusi.pdf
 
Como prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del WireframeComo prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del Wireframe
 
Como prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del WireframeComo prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del Wireframe
 
Sketches, wireframes y prototipos
Sketches, wireframes y prototiposSketches, wireframes y prototipos
Sketches, wireframes y prototipos
 
¿Dar el brinco a UX?
¿Dar el brinco a UX?¿Dar el brinco a UX?
¿Dar el brinco a UX?
 
Doc
DocDoc
Doc
 
¿Qué es diseño? Para entender el Diseño Centrado en el Usuario
¿Qué es diseño? Para entender el Diseño Centrado en el Usuario¿Qué es diseño? Para entender el Diseño Centrado en el Usuario
¿Qué es diseño? Para entender el Diseño Centrado en el Usuario
 
Cómo ayudar a los Clientes a tomar Decisiones de Diseño
Cómo ayudar a los Clientes a tomar Decisiones de DiseñoCómo ayudar a los Clientes a tomar Decisiones de Diseño
Cómo ayudar a los Clientes a tomar Decisiones de Diseño
 
Estructura proyecto tecnologico
Estructura proyecto tecnologicoEstructura proyecto tecnologico
Estructura proyecto tecnologico
 
¿Cómo trabajamos los diseñadores digitales?
¿Cómo trabajamos los diseñadores digitales?¿Cómo trabajamos los diseñadores digitales?
¿Cómo trabajamos los diseñadores digitales?
 
Diseño y concepto DOC-20240412-WA0023..pdf
Diseño y concepto DOC-20240412-WA0023..pdfDiseño y concepto DOC-20240412-WA0023..pdf
Diseño y concepto DOC-20240412-WA0023..pdf
 
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdf
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdfDiseño ( concepto-caracteristicas y herramientas para el diseño.pdf
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdf
 
Experiencia Interaccion Interfaces
Experiencia Interaccion InterfacesExperiencia Interaccion Interfaces
Experiencia Interaccion Interfaces
 
Cuco Vega - Design vs UX
Cuco Vega - Design vs UXCuco Vega - Design vs UX
Cuco Vega - Design vs UX
 
TIPOS DE DISEÑO
TIPOS DE DISEÑOTIPOS DE DISEÑO
TIPOS DE DISEÑO
 
7 Principios de Diseño para un software amigable
7 Principios de Diseño para un software amigable7 Principios de Diseño para un software amigable
7 Principios de Diseño para un software amigable
 
Pixel Perfect Web Design.
Pixel Perfect Web Design.Pixel Perfect Web Design.
Pixel Perfect Web Design.
 
Diseño participativo venezuela
Diseño participativo venezuelaDiseño participativo venezuela
Diseño participativo venezuela
 

Último

INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdfINSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdfautomatechcv
 
658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf
658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf
658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdfSSIETETO
 
dia del niño peruano para cartulina.pdf.
dia del niño peruano para cartulina.pdf.dia del niño peruano para cartulina.pdf.
dia del niño peruano para cartulina.pdf.JimenaPozo3
 
Comandos Autocad Español Autodesk Autocad.pdf
Comandos Autocad Español Autodesk Autocad.pdfComandos Autocad Español Autodesk Autocad.pdf
Comandos Autocad Español Autodesk Autocad.pdfjuandavidbello432
 
CARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdf
CARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdfCARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdf
CARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdfsolidalilaalvaradoro
 
669852196-Manejo-de-Las-Principales-Cuentas-Contables-pptx.pdf
669852196-Manejo-de-Las-Principales-Cuentas-Contables-pptx.pdf669852196-Manejo-de-Las-Principales-Cuentas-Contables-pptx.pdf
669852196-Manejo-de-Las-Principales-Cuentas-Contables-pptx.pdfyolandavalencia19
 
Que es un sistema integrado de Seguridad.pptx
Que es un sistema integrado de Seguridad.pptxQue es un sistema integrado de Seguridad.pptx
Que es un sistema integrado de Seguridad.pptxYeissonRINCONRIVERA
 
TÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdf
TÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdfTÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdf
TÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdfkevinramirezd069bps
 
Arquetipos de Jung ejemplos en el diseño
Arquetipos de Jung ejemplos en el diseñoArquetipos de Jung ejemplos en el diseño
Arquetipos de Jung ejemplos en el diseñosindyaldana1
 
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDDREVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDDElenitaIriarte1
 
trabajo de Texto Escrito y Cómo Aplicarlas.pdf
trabajo de Texto Escrito y Cómo Aplicarlas.pdftrabajo de Texto Escrito y Cómo Aplicarlas.pdf
trabajo de Texto Escrito y Cómo Aplicarlas.pdfcpachecot
 
abecedario cursiva para imprimir y colorear
abecedario cursiva para imprimir y colorearabecedario cursiva para imprimir y colorear
abecedario cursiva para imprimir y colorearNoemiCARABAJAL
 
PPT - EFECTO NETFLIX.pptx ..........................
PPT - EFECTO NETFLIX.pptx ..........................PPT - EFECTO NETFLIX.pptx ..........................
PPT - EFECTO NETFLIX.pptx ..........................RebecaVera12
 
Caza y Pesca Indiscriminada tríptico para el colegio
Caza y Pesca Indiscriminada tríptico para el colegioCaza y Pesca Indiscriminada tríptico para el colegio
Caza y Pesca Indiscriminada tríptico para el colegiosilvias47
 
Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015
Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015
Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015Miriam Tello
 
Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...
Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...
Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...collagedesign18
 
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...UNACH - Facultad de Arquitectura.
 
CRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdf
CRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdfCRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdf
CRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdfpaulmaqueda395
 
Material de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdfMaterial de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdfTpicoAcerosArequipa
 
Duvalin día del niño para negociosss.pdf
Duvalin día del niño para negociosss.pdfDuvalin día del niño para negociosss.pdf
Duvalin día del niño para negociosss.pdfYesiRoh
 

Último (20)

INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdfINSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
 
658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf
658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf
658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf
 
dia del niño peruano para cartulina.pdf.
dia del niño peruano para cartulina.pdf.dia del niño peruano para cartulina.pdf.
dia del niño peruano para cartulina.pdf.
 
Comandos Autocad Español Autodesk Autocad.pdf
Comandos Autocad Español Autodesk Autocad.pdfComandos Autocad Español Autodesk Autocad.pdf
Comandos Autocad Español Autodesk Autocad.pdf
 
CARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdf
CARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdfCARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdf
CARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdf
 
669852196-Manejo-de-Las-Principales-Cuentas-Contables-pptx.pdf
669852196-Manejo-de-Las-Principales-Cuentas-Contables-pptx.pdf669852196-Manejo-de-Las-Principales-Cuentas-Contables-pptx.pdf
669852196-Manejo-de-Las-Principales-Cuentas-Contables-pptx.pdf
 
Que es un sistema integrado de Seguridad.pptx
Que es un sistema integrado de Seguridad.pptxQue es un sistema integrado de Seguridad.pptx
Que es un sistema integrado de Seguridad.pptx
 
TÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdf
TÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdfTÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdf
TÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdf
 
Arquetipos de Jung ejemplos en el diseño
Arquetipos de Jung ejemplos en el diseñoArquetipos de Jung ejemplos en el diseño
Arquetipos de Jung ejemplos en el diseño
 
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDDREVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
 
trabajo de Texto Escrito y Cómo Aplicarlas.pdf
trabajo de Texto Escrito y Cómo Aplicarlas.pdftrabajo de Texto Escrito y Cómo Aplicarlas.pdf
trabajo de Texto Escrito y Cómo Aplicarlas.pdf
 
abecedario cursiva para imprimir y colorear
abecedario cursiva para imprimir y colorearabecedario cursiva para imprimir y colorear
abecedario cursiva para imprimir y colorear
 
PPT - EFECTO NETFLIX.pptx ..........................
PPT - EFECTO NETFLIX.pptx ..........................PPT - EFECTO NETFLIX.pptx ..........................
PPT - EFECTO NETFLIX.pptx ..........................
 
Caza y Pesca Indiscriminada tríptico para el colegio
Caza y Pesca Indiscriminada tríptico para el colegioCaza y Pesca Indiscriminada tríptico para el colegio
Caza y Pesca Indiscriminada tríptico para el colegio
 
Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015
Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015
Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015
 
Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...
Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...
Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...
 
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
 
CRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdf
CRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdfCRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdf
CRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdf
 
Material de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdfMaterial de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdf
 
Duvalin día del niño para negociosss.pdf
Duvalin día del niño para negociosss.pdfDuvalin día del niño para negociosss.pdf
Duvalin día del niño para negociosss.pdf
 

Diseño de aplicaciones para desarrolladores

  • 1. Diseño de aplicaciones Conceptos básicos para desarrolladores Alex de Fuenmayor & Javier Gala @alexdef • @JaviGala BCNDEVCON 2011
  • 2. Quiénes Alex de Fuenmayor Diseñador Visual y de Interacción Responsable de Diseño de Interacción en Tempos21, Grupo Atos @alexdef • alexdef.com Javier Gala Diseñador de Experiencia de Usuario @JaviGala • javiergala.wordpress.com @alexdef • @JaviGala BCNDEVCON 2011
  • 3. Qué Qué es y por qué del diseño Diseño aplicado al software Principios universales Diseño de Guerrilla Consejos finales @alexdef • @JaviGala BCNDEVCON 2011
  • 4. Qué es y por qué del diseño @alexdef • @JaviGala BCNDEVCON 2011
  • 5. Qué es ” La mayor parte de la gente comete el error de pensar que el diseño es cómo se ve. La gente piensa que es un barniz, que a los diseñadores les dan una caja y les dicen “¡Haz que quede bonito!”. Esto no es lo que creemos que es el diseño. No es sólo cómo se ve o cómo se siente. El diseño es cómo funciona. Steve Jobs, CEO de Apple @alexdef • @JaviGala BCNDEVCON 2011
  • 6. z El diseño resuelve problemas Me sorprende la frecuencia con la que aquellos fuera de la disciplina del diseño asumen que lo que hacen los diseñadores es decoración. El buen diseño resuelve problemas. Veen, co-fundador de Adaptive Path Jeffrey @alexdef • @JaviGala BCNDEVCON 2011
  • 7. z El diseño resuelve problemas ” Me sorprende la frecuencia con la que aquellos fuera de la disciplina del diseño asumen que lo que hacen los diseñadores es decoración. El buen diseño resuelve problemas. Jeffrey Veen, co-fundador de Adaptive Path @alexdef • @JaviGala BCNDEVCON 2011
  • 8. z El diseño no es arte ” El buen diseño se define por su adecuación a la audiencia y objetivos, y por su efectividad, no por su adherencia al diseño suizo o el número de premios que gane. Drew Davies, diseñador @alexdef • @JaviGala BCNDEVCON 2011
  • 9. El diseño es inevitable ” Las dudas sobre si el diseño es necesario o asequible son irrelevantes: el diseño es inevitable. La alternativa al buen diseño es el mal diseño, no el “no diseñar”. Douglas Martin, diseñador y tipógrafo @alexdef • @JaviGala BCNDEVCON 2011
  • 10. El diseño es diferencia ” El buen diseño es la forma más importante de diferenciarnos de nuestros competidores. Yun Jong Yong, CEO de Samsung @alexdef • @JaviGala BCNDEVCON 2011
  • 11. El diseño genera satisfacción ” En internet si tienes un cliente descontento no se lo dice a seis amigos, se lo dice a seis mil. Jeff Bezos, CEO de Amazon @alexdef • @JaviGala BCNDEVCON 2011
  • 12. z El diseño aplicado al software @alexdef • @JaviGala BCNDEVCON 2011
  • 13. z Metodología tradicional del diseño ” 1. Definición del problema 2. Elementos del problema 3. Recopilación de datos 4. Análisis de datos 5. Creatividad 6. Materiales - tecnologías 7. Experimentación 8. Modelos 9. Verificación Bruno Munari, diseñador industrial @alexdef • @JaviGala BCNDEVCON 2011
  • 14. El diseño industrial ” Nunca diseño un edificio sin antes ver el lugar y conocer a la gente que lo va a utilizar. Frank Lloyd Wright, arquitecto @alexdef • @JaviGala BCNDEVCON 2011
  • 15. Diseño centrado en el usuario ” El diseño centrado en el usuario significa entender lo que necesitan tus usuarios, cómo piensan, y cómo se comportan – e incorporar este conocimiento en cada faceta de tu proceso. Jesse James Garrett, co-fundador de Adaptive Path @alexdef • @JaviGala BCNDEVCON 2011
  • 16. Experiencia de usuario Peter Morville, arquitecto de información @alexdef • @JaviGala BCNDEVCON 2011
  • 17. Experiencia de usuario ” La arquitectura de información define la estructura de la información. El diseño de interacción hace que podamos manipular y contribuir a la información. El diseño visual comunica estas posibilidades y crea afinidades. La experiencia de usuario es la suma total de estas consideraciones. Luke Wroblewski, diseñador UX @alexdef • @JaviGala BCNDEVCON 2011
  • 18. z Principios universales @alexdef • @JaviGala BCNDEVCON 2011
  • 19. z Menos es más ” El diseño llama la atención sólo cuando falla; cuando tiene éxito es invisible. John D. Berry, Tipógrafo @alexdef • @JaviGala BCNDEVCON 2011
  • 20. z Elementos del Diseño Visual Blanco Jerarquización Tipografía Ilustración e imagen Color @alexdef • @JaviGala BCNDEVCON 2011
  • 21. z Blanco ¿Por qué es tan importante el espacio en blanco? El contenido necesita espacio para respirar. @alexdef • @JaviGala BCNDEVCON 2011
  • 22. z Jerarquización ” Los diseñadores pueden crear la normalidad en medio del caos; pueden comunicar ideas a través de la organización y manipulación de palabras e imágenes. Jeffrey Veen, co-fundador de Adaptive Path @alexdef • @JaviGala BCNDEVCON 2011
  • 23. z Tipografía ” La tipografía debe definir el blanco como la arquitectura debe definir el espacio. Albert Hollestein, Tipógrafo @alexdef • @JaviGala BCNDEVCON 2011
  • 24. z Color ” Uno crea su propia decoración. Eliges tu color, eliges tu estado de ánimo... [Si] estás deprimido, pones un poco de amarillo brillante y de repente estás feliz. Philippe Starck, Diseñador industrial @alexdef • @JaviGala BCNDEVCON 2011
  • 25. z Color http://kuler.adobe.com @alexdef • @JaviGala BCNDEVCON 2011
  • 26. z Proporción aurea y retícula ” La retícula sitúa los elementos en un área espacial dotada de regularidad, lo que los hace accesibles; los lectores saben dónde encontrar la información que buscan, porque las uniones entre las divisiones verticales y las horizontales actúan como señales indicativas para su localización. Timothy Samara, diseñador gráfico y profesor @alexdef • @JaviGala BCNDEVCON 2011
  • 27. z Proporción aurea y retícula @alexdef • @JaviGala BCNDEVCON 2011
  • 28. Teoría de recolección óptima ” Cantidad neta de energía obtenida por la captura de una presa comparada con la energía invertida en la obtención de la presa. Robert H. MacArthur y Eric R. Pianka, biólogos @alexdef • @JaviGala BCNDEVCON 2011
  • 29. Recolección de información Cantidad de información obtenida comparada con el tiempo y esfuerzo invertido. @alexdef • @JaviGala BCNDEVCON 2011
  • 30. Patrones de escaneo @alexdef • @JaviGala BCNDEVCON 2011
  • 31. Patrones y estándares ” Ley de Jakob de la experiencia de usuario: los usuarios pasan la mayor parte de su tiempo en otras páginas. Jakob Nielsen, experto en usabilidad @alexdef • @JaviGala BCNDEVCON 2011
  • 32. z Diseño de guerrilla @alexdef • @JaviGala BCNDEVCON 2011
  • 33. z Diseño de guerrilla Definición de producto y éxito Análisis competitivo orientado Puntos de contacto y fricción Bocetos Resultados @alexdef • @JaviGala BCNDEVCON 2011
  • 34. Definición de producto y éxito ” Si no puedes explicar algo de forma sencilla, entonces es que no lo entiendes bien. Albert Einstein, científico @alexdef • @JaviGala BCNDEVCON 2011
  • 35. Análisis competitivo orientado ” Hace unos días un amigo me habló de su primera visita a IDEO. En un momento dado vio a una docena de investigadores en una cocina improvisada, cada uno con una marca diferente de sartén, haciendo girar tortitas una y otra vez. Había una persona observando y tomando notas con una libreta. Harry Brignull, diseñador UX @alexdef • @JaviGala BCNDEVCON 2011
  • 36. Puntos de contacto y fricción ” Si el punto de contacto entre el producto y la gente se convierte en un punto de fricción, entonces es que el Diseñador Industrial ha fallado. Henry Dreyfuss, diseñador industrial @alexdef • @JaviGala BCNDEVCON 2011
  • 37. Bocetos ” Puedes usar una goma de borrar en la mesa de dibujo o un martillo en la obra. Frank Lloyd Wright, arquitecto @alexdef • @JaviGala BCNDEVCON 2011
  • 38. Resultados ” Por muy hermosa que sea la estrategia, de vez en cuando hay que tener en cuenta los resultados. Winston Churchill, estadista @alexdef • @JaviGala BCNDEVCON 2011
  • 39. Consejos finales @alexdef • @JaviGala BCNDEVCON 2011
  • 40. No eres tu usuario ” Tus usuarios no son tú. No se parecen a ti, no piensan como tú, no hacen las cosas que tú haces, no comparten tus expectativas o suposiciones. Si lo hicieran no serían tus clientes; serían tus competidores. Mike Kuniavsky, co-fundador de Adaptive Path @alexdef • @JaviGala BCNDEVCON 2011
  • 41. Entrevistas ” La gente es muy mala prediciendo el futuro. Esto incluye a los expertos […] [que] tendrían mejores resultados adivinando al azar. Incluso los mejores pronosticadores fueron superados por reglas generales como “predecir siempre que no habrá cambios”. Philip Tetlock, psicólogo y Dan Gardner, periodista @alexdef • @JaviGala BCNDEVCON 2011
  • 42. Personas y escenarios ” Podemos explicar reglas generales derivadas de nuestra experiencia, pero es difícil aprender de ellas. Resulta complicado recordar abstracciones, pero resulta más sencillo recordar una buena historia. Las historias avivan nuestras experiencias pasadas. Hacen nuestro pasado memorable para nosotros y para los demás. Roger Schank, lingüista especializado en IA y psicología cognitiva @alexdef • @JaviGala BCNDEVCON 2011
  • 43. Test de usabilidad ” Lo que pocos saben sobre los tests de usabilidad es que son increíblemente sencillos de realizar. Sí, alguna gente los hace mejor, pero nunca he visto un test de usabilidad que no produzca resultados útiles, no importa lo mal que se hiciera. Steve Krug, experto en usabilidad @alexdef • @JaviGala BCNDEVCON 2011
  • 44. Formularios para humanos ” Los formularios son un asco. Si no me crees, busca a alguien a quien le guste rellenarlos. Luke Wroblewski, diseñador UX, autoridad mundial en formularios @alexdef • @JaviGala BCNDEVCON 2011
  • 45. Diseñar no es obedecer al usuario ” Si le hubiera preguntado a mis clientes que querían, me hubieran dicho que un caballo más rápido. Henry Ford, fundador de Ford @alexdef • @JaviGala BCNDEVCON 2011
  • 46. Diseñar no es obedecer al cliente Matthew Inman, diseñador web (http://theoatmeal.com/comics/design_hell) @alexdef • @JaviGala BCNDEVCON 2011
  • 47. z El diseño es un oficio ” Lo dibujé en solo unos segundos, pero me ha costado 34 años aprender a dibujarlo en sólo unos segundos. Paula Scher, diseñadora gráfica @alexdef • @JaviGala BCNDEVCON 2011
  • 48. z Despedida ” La experiencia de usuario lo es todo. Siempre lo ha sido, pero sigue siendo infravalorada y contando con pocos recursos. Si no sabes diseño centrado en el usuario, estúdialo. Contrata a gente que lo conozca. Obsesiónate con él. Convence a toda tu empresa. Evan Williams, creador de Blogger y CEO de Twitter @alexdef • @JaviGala BCNDEVCON 2011
  • 49. Contacto Alex de Fuenmayor alex@no2.es www.no2.es Javier Gala ljgala@gmail.com @alexdef • @JaviGala BCNDEVCON 2011

Notas do Editor

  1. Crear una aplicación significa tomar parte en un proceso de diseño: diseñar quiere decir cómo se va a comportar nuestra aplicación atendiendo no sólo a la tecnología sino teniendo también en cuenta al usuario y su contexto, humanizando la tecnología.\nVamos a pasar rápidamente sobre algunas consideraciones básicas y consejos prácticas. Nuestro objetivo no es profundizar sino despertar vuestro interés.
  2. Alex es diseñador visual y de interacción, más especializado en el componente visual del diseño.\nJavier está más especializado en definir la estructura y la interacción de los servicios, así como de investigar el comportamiento de los usuarios. Más orientado a funcionalidad.\nNo somos vendehumos, no queremos venderos un curso de diseño. Somos unos apasionados del diseño que creemos que aprender las bases del diseño sirve para todo aquel que tenga que crear aplicaciones para personas, y queremos compartir nuestra experiencia.
  3. Introducción teórica con ideas generales.\nNuestra propuesta con prácticas para mejorar el diseño de aplicaciones.
  4. El diseño comprende el diseño visual, pero también el comportamiento. No se puede apreciar por completo en estático, como pasa con esta moto.\nLos diseñadores no han definido sólo el aspecto de esta moto, sino que se han preocupado de que la postura del conductor sea cómoda para su propósito (pasear), sea sencilla de conducir, fácil de mantener, que exprese los valores de su público objetivo (no es una moto deportiva, sino relajada)… han hecho de la tecnología algo que se disfruta, que mejora la vida de las personas. Eso es el diseño.
  5. El diseño es una definición de cómo se comportará una aplicación en su contacto con los usuarios, teniendo en cuenta el contexto en que es utilizada, y de cara a guiar la implementación.\nPor lo tanto, el diseño no es sólo una descripción visual, sino también estructural (cómo se organizan los elementos) y funcional (qué se puede hacer con ellos).
  6. El diseño no es una demostración de la potencia del Photoshop.\nNo se trata de un festival de luz y de color.
  7. El diseño resuelve problemas, como en este caso era la comunicación eficaz del contenido.
  8. Por lo tanto, el diseñador no es un artista.\nEl diseño no es un medio de expresión personal.\nEl buen diseño responde a la consecución de unos objetivos.
  9. Cuando uno define cómo debe comportarse una aplicación, diseña.\nNo se puede “no diseñar”, como mucho estamos obviando el diseño.\nDiseñar sin conocer la teoría y práctica de este campo de conocimiento dificulta el éxito.
  10. Internet es prácticamente un mercado de competencia infinita, lleno de competidores a un “click” de distancia.\nCuando la capacidad de crear un producto está al alcance de muchos competidores el bien se “comoditiza” y su precio cae.\nLa tecnología para crear aplicaciones es común, pero el buen diseño es escaso. El diseño ayuda a diferenciar y a aportar valor, evitando la “comoditización”.\nEl ejemplo más claro es Apple y su productos de precio “premium”. El Macbook cuesta el doble que otros portátiles tecnológicamente similares pero de peor diseño.
  11. Internet mejora la comunicación entre consumidores (sobre todo cuanto son consumidores descontentos).\nEl diseño humaniza la tecnología, considerando dentro del proceso a los usuarios y el contexto de utilización.\nSatisfacer deseos, valores y metas de los usuarios son parte de los objetivos explícitos del diseño, lo que redunda en una mayor satisfacción que la obtenida por un producto que ofrece transacciones mecánicas.
  12. El diseño se formaliza en la revolución industrial, cuando surge la necesidad de diferenciar los productos fabricados en masa.\nAparecen metodologías formales de diseño, que luego se adaptarán para el diseño de software.
  13. Pasos de la metodología del diseño, utilizando el ejemplo de la preparación de un plato para un restaurante.\nDestacar el qué (comida), para quién (clientes de un restaurante), el contexto (tiempo disponible, el comedor, la cocina del restaurante, el entorno del restaurante).
  14. En la revolución industrial se pasa de un artesano que fabrica 10 tazas para su vecino, a un propietario de una fábrica con 100 obreros que fabrican 10000 tazas para sus clientes por todo el país.\nAumenta la distancia entre usuarios y fabricantes del producto, que además ahora son más especializados y pierden visión de conjunto.\nNace el diseñador como el responsable de definir el producto de forma que tenga éxito. Tendrá que tratar con todas las partes implicadas, incluyendo los usuarios finales.vEl software ha tendido a dejarse llevar por los rápidos e importantes avances tecnológicos.\nSe ha pasado a crear productos no para cubrir necesidades de los usuarios sino porque una nueva tecnología estaba disponible (¿alguien recuerda el intento de sacar adelante la videoconferencia en los antiguos móviles como el Nokia N70?).\nEl diseño centrado en el usuario trata de recuperar la importancia de las necesidades de los usuarios en el diseño de software.
  15. La experiencia de usuario es una disciplina que parte del diseño centrado en el usuario, incorporando conceptos de marketing (deseable), de negocio (valioso) y específicos de tecnologías de la información (accesible, “encontrable”…).\nEn una de las definiciones más conocidas, Morville utiliza esta colmena para ilustrar los principales aspectos que definen la experiencia de usuario.
  16. La experiencia de usuario tiene tres disciplinas básicas:\nLa arquitectura de información, que indica cómo se organiza y estructura la información.\nEl diseño de interacción, que define cómo se puede modificar la información.\nEl diseño visual, que se encarga de comunicar esta organización y posibilidades de interacción.
  17. El estudio y la experiencia han generado un conocimiento sobre buenas prácticas de diseño que se pueden aplicar en muchos casos.\nVamos a hablar de principios de diseño visual, de comportamiento de los usuarios, etc.
  18. Empezamos con el diseño visual.\nEl diseño no es el objetivo.\nHay que utilizar solo los elementos imprescindibles.
  19. La conjugación de estos cinco elementos define el diseño visual.
  20. El blanco une y separa, agrupa y distingue.\nPuede generar agobio o soledad.
  21. Permite comunicar qué es importante y qué no.
  22. Elemento conductor del lenguaje.\nLegibilidad\nInterlineado: al menos 120% (1,2).\n¿Qué es una “serifa”? A qué se refieren los diseñadores cuando hablan de serif y sans-serif?\nFamilias de tipografías y para qué sirve sobre todo cada una: fantasia, serif y sans-serif.
  23. El diseño visual debe ser capaz de funcionar por sí mismo en blanco y negro.\nEl color se utiliza para añadir emoción.\nSe recomienda utilizar un máximo de tres colores, y que sean complementarios.
  24. Si tenemos problemas para elegir colores, podemos utilizar servicios como Kuler, de Adobe.
  25. Otro principio de diseño visual.\nLa proporción aurea es la relación entre la longitud de dos segmentos en los que se divide una línea. Es del 62%-38%.\nSe encuentra en la naturaleza, ya la conocían y aplicaban los griegos, y se utilizó en el Renacimiento.
  26. Aunque no seamos conscientes de su utilización resulta armónica, como vemos en el ejemplo de Twitter.\nLa proporción aurea es rígida y complicada de implementar. Otra forma de conseguir una estructura visual armónica es utilizar una retícula o grid.
  27. El primer patrón funcional que vamos a estudiar viene de la ecología.\nLos biólogos estudiaban por qué unas especies se alimentan de otras, pero no de todas las posibles.\nSe descubre que los animales se alimentan de las especies de las que pueden sacar más energía invirtiendo la menor cantidad de energía y tiempo posible.
  28. En los 70 en el PARC (Palo Alto Research Center) se plantean que pueden aplicar la teoría de la recolección óptima al comportamiento de las personas al buscar información. El hombre como “informávoro”.\nDescubren que las personas utilizan mecanismos similares a los de los animales, buscando minimizar el tiempo y energía dedicados a la búsqueda de información, aunque estas tácticas ahora resulten sub-óptimas para este nuevo contexto.
  29. Se descubre que los usuarios escanean las páginas pero no las leen completas. Ni siquiera leen completos los enlaces (sólo el principio, unas 12 letras o dos palabras según algunos estudios experimentales).\nBuscan el “aroma de la información”, un camino que les lleve rápido hacia el contenido que buscan.\nEn cada página evalúan el “aroma” escaneando, buscando “keywords” que aporten el “aroma”.\nEvalúan también enlaces que indiquen que son un camino para aumentar el “aroma”. Utilizan el “satisficing”, no evaluando toda la página sino siguiendo el primer enlace que esperan que les acerque a su objetivo, guiados por el “aroma” que desprende el enlace.\nSe destaca la importancia de utilizar keywords reconocidos y no términos inventados o de marketing.\nLos enlaces deben indicar claramente el contenido al que ofrecen acceso, huyendo de textos genéricos como “haz click aquí” que no aportan “aroma”.
  30. Los usuarios crean sus expectativas de acuerdo a su experiencia previa, y nuestros usuarios pasan la mayor parte de su tiempo en otras páginas.\nHay que conocer los estándares que se han generado “de facto” en internet y las aplicaciones y reutilizarlos. Hay muchos catálogos de patrones de diseño.\nSólo debemos romper los estándares conscientemente y cuando tengamos un buen motivo.
  31. Muchas veces no hay medios para llevar a cabo un proceso de diseño completo.\nNuestra propuesta es llevar a cabo al menos las siguientes prácticas, que contribuirán a mejorar nuestro diseño.
  32. Hemos definido cinco fases secuenciales, que se llevan a cabo una tras otra. Es la forma más sencilla de empezar a utilizar prácticas de diseño.
  33. Definir el qué, para quién, y en qué contexto.\nInvestigar la audiencia.\nHemos dicho que el diseño no es arte ni decoración y que resuelve problemas: hay que fijar cómo vamos a medir el éxito resolviendo el problema.
  34. Identificar la competencia, e investigarla pero de forma dirigida, no en “estático”.\nEn cuanto a diseño de interacción identificamos el flujo principal y lo llevamos a cabo en las aplicaciones de la competencia, tratando de ponernos en el lugar de la audiencia y verbalizando nuestro comportamiento. Es muy recomendable grabarnos en vídeo con software como Camtasia (PC) o Silverback (Mac).\nEn cuanto a diseño visual buscamos otros productos que agraden a nuestra audiencia para buscar qué valores transmiten y cómo lo hacen.
  35. En el punto anterior hemos visto los puntos de contacto y de fricción:\nEn cuanto a diseño visual prestamos especial atención a lo que funciona para establecer la comunicación y el contacto con los usuarios.\nEn cuanto al diseño de interacción nos centramos en las rupturas del “flow”, ya que serán los principales problemas que deberá resolver el diseño.\nEl resultado será una lista de los principales problemas y puntos fuertes, que podemos consultar durante nuestro proceso.
  36. Hay que hacer pruebas con medios rápidos y baratos (papel por ejemplo) antes de implementar. Como nos cuesta poco será más fácil probar muchas soluciones y descartar las que no nos sirvan.\nTratar de liberarnos de las limitaciones tecnológicas. Podemos comprobar la viabilidad de los bocetos y fomentar la innovación.
  37. El diseño debe generar unos resultados que se puedan consultar.\nSi trabajas en equipo hay que compartir el diseño. Si trabajas sólo puedes simplificar la documentación, pero de alguna forma debes eliminar la necesidad de tener que recordarlo todo en todo momento, documentando el proceso.\nUn “sitemap” de las pantallas estáticas especifica la estructura, una “historia” con unos bocetos de pantallas comentados ilustran el flujo principal, unas representaciones visuales de las pantallas principales deben ilustrar el diseño visual.\nEsta documentación no es exhaustiva y no recoge todas las pantallas. Crearemos una guía de estilo que recoja los elementos comunes y repetidos (colores, tipografías, widgets…) utilizados en nuestra aplicación. Cuando haya que crear pantallas que no estén especificadas las obtendremos a partir de las pantallas ya diseñadas y utilizaremos la guía de estilo para completar.
  38. Finalmente algunos puntos que no queríamos dejar fuera de la charla.
  39. Por mucho que lo intentes pensando fuerte, no eres tu usuario.\nPara hacer una buena aplicación hay que entender al usuario, empatizar con él.\nEs imprescindible investigar a nuestra audiencia, a nuestros usuarios, para poder entenderlos. El diseñador tiene que establecer contacto directo con los usuarios.
  40. La entrevista personal cara a cara e individual es el procedimiento básico de la obtención de información de personas en las ciencias sociales.\nEl diseño utiliza las mismas técnicas de otras disciplinas como la antropología o la sociología. Existen muchos libros y artículos explicando cómo se debe entrevistar.\nUn par de puntos básicos serían:\nLo primero es crear un clima de confianza.\nNo se deben hacer preguntas especulativas, sino sobre comportamientos pasados. También hay que observar, y prestar atención a la comunicación no verbal.
  41. Somos muy malos recordando reglas abstractas, pero muy buenos recordando gente e historias, ya que son habilidades básicas para vivir en sociedad.\nEn la Experiencia de Usuario llamamos “persona” a una forma de concretar la información que hemos obtenido sobre nuestra audiencia. Creamos una especie de “usuario de mentira” con los patrones de comportamiento comunes de nuestra audiencia. Esta “persona” guía nuestro desarrollo y ayuda a comunicar la información de la audiencia al resto del equipo.\nPara especificar comportamientos de la aplicación se pueden utilizar “escenarios”, que son historias de la vida cotidiana que describen la interacción de nuestro “usuario de mentira” con el producto. Sirven para ver esta interacción desde un punto de vista más amplio y no sólo desde la aplicación.\nPara más información sobre “personas” y “escenarios” es recomendable leer a Alan Cooper, el creador de esta técnica, que la explica en libros como “About Face 3”.
  42. Es una forma rápida de comprobar si el diseño permite a los usuarios llevar a cabo las tareas principales.\nSe basa en poner nuestra aplicación delante de un usuario y pedirle que realice esas tareas principales, mientras nosotros observamos en un segundo plano.\nEs muy fácil y se obtiene mucha información. Veremos nuestra aplicación a través de los ojos de un usuario.\nSiempre que he mostrado un test de usabilidad a los desarrolladores ha cambiado su idea del producto.\nMuy recomendable el libro “No me hagas pensar”, de Steve Krug. Es un libro sencillo y amable que explica el valor de los tests de usabilidad y nos da indicaciones de cómo hacer uno de la forma más rápida y barata.
  43. Los formularios son una de las formas principales de recibir “input” de los usuarios.\nRellenar un formulario nunca es un objetivo. El usuario quiere lo que hay detrás del formulario.\nHay muchos problemas con los formularios, necesitaría un libro entero para hablar de ellos. De hecho ya hay uno muy bueno, “Web form design” de Luke Wroblewski, que recomiendo totalmente.
  44. El usuario es un experto en su tarea y detecta rápidamente los problemas, pero no conoce la aplicación lo suficiente como para darnos buenas soluciones. Hay que ver el problema detrás de la solución. No hay que hacer lo que el usuario pide, sino lo que necesita.\nEl diseñador es el experto en la aplicación y el responsable de convertir la información que nos dan los usuarios en diseño.
  45. Tampoco hay que obedecer ciegamente a nuestro cliente (o jefe, según el caso).\nHay que tratar de evitar el “sí” y obedecer, y pasar a preguntar “¿por qué?” para entender el motivo tras la petición. Muchas veces aunque la propuesta no tenga sentido veremos que el motivo tras ella es interesante y podremos ofrecer una solución que se integre mejor con nuestro diseño y que resulte valiosa para nuestro cliente.
  46. El diseño no es un talento innato, se aprende y se practica para conseguir experiencia.\nDiseñar no es dominar el Photoshop, es saber manejar los conceptos del diseño y cómo aplicarlos con la herramienta adecuada.
  47. El diseño no es sólo funcionalidad, sino también contexto y audiencia.\nHay que humanizar la tecnología.\nEl diseño no es un paso en el que se llevan a cabo un par de actividades y ya está.\nHay que aplicar los principios del diseño a toda la definición del producto, y hay que embarcar a toda la empresa en ello.
  48. Alex también diseña juegos para móviles y os invita a que veáis sus últimas creaciones en www.no2.es\nSi tenéis una aplicación que necesita ayuda para definirse y ser útil, Javi es un diseñador freelance que os puede ayudar. Mandad un email, seguro que juntos podemos crear aplicaciones que lleguen mejor a nuestros usuarios.