• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introducción al Diseño de Experiencia del Usuario – UX2013
 

Introducción al Diseño de Experiencia del Usuario – UX2013

on

  • 798 views

Esta presentación se realizó para el evento "UX 2013: Usabilidad, Accesibilidad, Diseño y Tecnología" en el marco del Día Mundial de la Usabilidad, el martes 3 de diciembre de 2013 en la ...

Esta presentación se realizó para el evento "UX 2013: Usabilidad, Accesibilidad, Diseño y Tecnología" en el marco del Día Mundial de la Usabilidad, el martes 3 de diciembre de 2013 en la Universidad Católica Argentina (UCA, Campus Puerto Madero).

El objetivo es presentar las disciplinas que convergieron para dar origen a lo que llamamos Diseño de Experiencia del Usuario, haciendo referencia a los Factores Humanos e Interacción Humano-Computadora (HCI).

Definir qué es el Diseño de UX, las diferencias entre UX y UI, los principios de Diseño Centrado en el Usuario (DCU), y los componentes y beneficios del diseño de UX.
Se menciona la importancia de conocer los estándares, convenciones, patrones de diseño y guías de estilo.

Se presentan los roles de los miembros de un equipo de UX, y ejemplos de los entregables de cada etapa del proceso de diseño.

Statistics

Views

Total Views
798
Views on SlideShare
780
Embed Views
18

Actions

Likes
8
Downloads
1
Comments
0

2 Embeds 18

https://twitter.com 10
http://www.linkedin.com 8

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

Introducción al Diseño de Experiencia del Usuario – UX2013 Introducción al Diseño de Experiencia del Usuario – UX2013 Presentation Transcript

  • Introducción al Diseño de Experiencia del Usuario! Gabriel Celemin | Giro54 @gcelemin | Giro54.com
  • Temas: – Orígenes – Qué es la Experiencia del Usuario – Diseño de UX – UX vs UI Diseño Centrado en el Usuario – – Componentes del Diseño de UX – Buenas Experiencias Giro54
  • – Estándares, convenciones y más – Contexto – Estándares técnicos – Patrones de diseño – Guías de estilo – Equipo de UX. Roles – Entregables Giro54
  • Orígenes del Diseño de UX Giro54
  • Giro54
  • Giro54
  • Giro54
  • “Error humano” Giro54
  • Giro54
  • Giro54
  • Factores Humanos Estudia el diseño de herramientas y lugares de trabajo para que coincidan con las características físicas y las habilidades cognitivas de las personas. Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Interacción HumanoComputadora (HCI) Estudia la interacción entre las personas y las computadoras a través del diseño, evaluación e implementación de sistemas y las consecuencias de su uso. Giro54
  • También: – Diseño industrial – Psicología cognitiva – Antropología y sociología – Ciencias de la computación Giro54
  • Estudios de conducta humana Factores Humanos Interacción Humanocomputadora Diseño (HCI) de UX Era de la Información PC + Web 1900-20s 1940s 1970s 1990-2000s Revolución industrial 2º Guerra Mundial Giro54
  • Giro54
  • Experiencia del Usuario User Experience Giro54
  • HCI UX Transformación desde la evaluación de interfaces hacia tratar de lograr un entendimiento más profundo de las personas. Giro54
  • La Experiencia del usuario abarca toda la relación de una persona con una empresa y sus productos y servicios. Giro54
  • No sólo productos y servicios digitales. Giro54
  • HCI Usabilidad Instalación Uso Descarte Reciclado ien rcam to inicia e l Ac Compra Ac t u a li z c i o n e s a Se rvici nte o a l c li e Giro54
  • La Experiencia del Usuario incorpora también el componente emocional. Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Diseño de UX User Experience Design Giro54
  • Las “experiencias” ocurren en la mente de las personas. Giro54
  • Podemos diseñar los elementos que crean y modelan las experiencias. Giro54
  • UX = Arquitectura de la información + Diseño de interacción + Diseño de UI + Usabilidad + Maquetadores + Programadores + Redactores etc. Giro54
  • UX vs UI Giro54
  • Imagen: Ed Lea Giro54
  • Imagen: Ed Lea Giro54
  • Imagen: Ed Lea Giro54
  • El diseño de UX se basa en los principios del Diseño Centrado en el Usuario (DCU). Giro54
  • Giro54
  • 1. Colocar al usuario en el centro del proceso de diseño. Giro54
  • 2. Identificar qué es importante para la audiencia (tareas, objetivos, necesidades). Giro54
  • 3. Diseñar de manera iterativa y con la participación de los usuarios. Giro54
  • 4. Evaluar el diseño y recolectar información para mejorarlo. Giro54
  • Contexto de uso Evaluación Requerimientos Diseño Giro54
  • Componentes del Diseño de UX Giro54
  • Fuente: Jesse James Garrett Giro54
  • Una buena UX debe responder a las expectativas y necesidades del usuario y evocar sentimientos y emociones positivas. Giro54
  • útil deseable usable valioso fácil de encontrar accesible creíble Fuente: Peter Morville Giro54
  • Ejemplos Giro54
  • Gabriel Gabriel http://www.gabriel.com Giro54
  • gabriel@email.com gabriel Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • gabriel@email.com Giro54
  • Giro54
  • Giro54
  • Estándares, convenciones y más Giro54
  • Contexto = Caos Giro54
  • Imagen: bradfrostweb.com Giro54
  • Imagen: bradfrostweb.com Giro54
  • Imagen: bradfrostweb.com Giro54
  • Giro54
  • Estándares técnicos Apuntan a reducir los costos y la complejidad y a mejorar la accesibilidad y la vida útil de los desarrollos web. Giro54
  • Imagen: www.evolutionoftheweb.com Giro54
  • – W3C (X/HTML, CSS, accesibilidad) – ECMA (JavaScript) – IETF (protocolos: TCP/IP, SMTP) – The Web Standards Project * * Disuelto en Marzo de 2013. Giro54
  • Giro54
  • Patrones de diseño Describen una solución óptima para un problema común. Giro54
  • http://developer.yahoo.com/ypatterns/ Giro54
  • http://developer.android.com/design/patterns/ Giro54
  • http://developer.apple.com/library/IOS/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html Giro54
  • Guías de estilo Documentan decisiones de diseño para poder evolucionar y escalar de manera lógica y ordenada. Giro54
  • – Uso de marcas, colores, tipografías, imágenes. – Diagramación y grillas – Tipologías de pantallas – Estándares de UI (ej. mensajes de sistema, errores, botones, etc.) Giro54
  • Giro54
  • Giro54
  • Giro54
  • ISO 9241-210 (2010) Ergonomics of human-system interaction. Part 210: Humancentered design for interactive systems Giro54
  • El equipo de UXD Giro54
  • Giro54
  • Arquitecto de información Se ocupa de la organización, nomenclatura y esquemas de navegación, con el objetivo de ayudar a las personas a encontrar y manejar información. Giro54
  • Área de trabajo: Sitios donde los usuarios buscan información y conocimiento (universidades, empresas, instituciones gubernamentales, medios, etc.) Giro54
  • Diseñador de interacción Define la manera en la cual un producto interactivo responde a las acciones de los usuarios de forma tal que este “diálogo” sea lo más intuitivo, simple y claro posible. Giro54
  • Área de trabajo: Sitios y aplicaciones donde los usuarios “hacen cosas” (e-commerce, banca online, redes sociales, juegos, etc.) Giro54
  • Diseñador de interfaces Encargado de definir el estilo visual de un sitio web (colores, tipografías, imágenes) y producir el material necesario para llevarlo a cabo. Giro54
  • Área de trabajo: Diagramación, jerarquías de información, tipografía, legibilidad, teoría de color, identidad corporativa, ilustración y fotografía. Giro54
  • Especialista en usabilidad Observa y evalúa, con diferentes métodos, el nivel de eficiencia, eficacia y satisfacción de las personas al usar un sitio web; y hace recomendaciones para mejorar su experiencia. Giro54
  • Área de trabajo: Análisis contextual, evaluación heurística, pruebas de usabilidad con usuarios, diseño iterativo, encuestas, reportes con recomendaciones, pruebas de accesibilidad. Giro54
  • Otros roles: – Maquetadores de Front-End (HTML/ CSS/JS) – Programadores de Back-End (funcionalidad, bases de datos, etc.) – Redactores y editores de textos – Fotógrafos e ilustradores – Gerentes de proyecto Giro54
  • Entregables Giro54
  • Beneficios – Eficiencia – Foco – Registro – Claridad y síntesis Giro54
  • Eficiencia La introducción de cambios tiene menor costo en las etapas tempranas. Giro54
  • Foco Ayudan a enfocar las charlas y decisiones en lo que es importante en cada etapa. Giro54
  • Registro Capturan y hacen explícitas las decisiones y las documentan para informar las etapas siguientes. Giro54
  • Claridad y síntesis Facilitan el entendimiento de los acuerdos, por ser más fáciles de interpretar que la documentación escrita. Giro54
  • Ejemplos Giro54
  • Análisis / relevamiento Mapas conceptuales, perfiles de usuario (personas), escenarios de uso, storyboards. Giro54
  • Giro54
  • Giro54
  • Giro54
  • Arquitectura de información / diseño de interacción Inventarios de contenido, sitemaps, flujos de tareas, wireframes. Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Diseño de interfaz Diseños conceptuales, diseños visuales, guías de estilo, patrones de diseño. Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Giro54
  • Investigación de usuarios Diseño participativo, evaluación heurística, pruebas y reportes de usabilidad. Giro54
  • Giro54
  • Giro54
  • Giro54
  • Conclusiones Giro54
  • 1. UX como englobadora de disciplinas: – Arquitectura de la información – Diseño de interacción – Diseño de interfaces – Usabilidad 2. Familiaridad con los roles y entregables del equipo de UX. 3. ... Giro54
  • Giro54
  • 3. El usuario en el centro del proceso de desarrollo y diseño. Giro54
  • http://www.google.com/about/company/philosophy/ Giro54
  • Recursos Information Architecture Institute – www.iainstitute.org Interaction Design Association – www.ixda.org Usability Professionals’ Association – www.upassoc.org Jesse James Garrett – www.jjg.net/ia Peter Morville – semanticstudios.com Jakob Nielsen – www.useit.com Don Norman – www.jnd.org Wikipedia, Google Giro54
  • Muchas gracias. Gabriel Celemin @gcelemin Giro54 Giro54.com | @Giro54 Giro54