Cómo arrancamos un proyecto de diseño UX/UI?

Transcripción

1 DISEÑO UX

2 Cómo arrancamos un proyecto de diseño UX/UI?

3 Primero hay que saber: 1. Qué es UX y UI? En qué se diferencian? 2. A qué llamamos Usabilidad. 3. Cómo es el proceso de diseño y sus etapas?

4 UX UI User Experience o Experiencia de Usuario User Interface Visual Design

5 1. UX y UI Es necesario tener en claro ambos conceptos a la hora de empezar. El ux, va a estar presente en todo el desarrollo del diseño, desde el inicio, desde que se piensa y analiza el proyecto, hasta el final del proyecto, testeando y haciendo pruebas de usabilidad. El diseño UI, comienza en una segunda etapa y va a incorporar al UX, todos los elementos visuales y gráficos. Podemos decir que el diseño UX, se mantiene constante en el proceso de diseño.

6 UX constante UX UI User Experience o Experiencia de Usuario User Interface Visual Design Producto final Entregable

7 UX Podríamos decir, que la experiencia de usuario es el halo que rodea a una marca. El diseño UX, abarca otros aspectos en los que el diseño de Interfaces no se centra, como usabilidad, entrevistas, recopilación de información sobre el producto, estudio de la interacción con el usuario, presentación..

8 Pero qué significa UX?

9 Pero qué significa UX? User experience o Experiencia de Usuario, es toda la experiencia y toda la percepción del usuario con respecto a un producto. De las 5 preguntas fundamentales, (wiki 5w): Es el Cuándo?, durante, mientras, es el momento y tiempo en que un usuario usa, siente y experimenta el producto.

10 UX Aspectos y disciplinas que abarca: Usabilidad User research DCU Arquitectura de la info. Factores humanos Branding Visual design Diseño industrial Diseño de interacción

11 Su objetivo: The Definition of User Experience por Jakob Nielsen y Don Norman Satisfacer las necesidades exactas del usuario. Que el usuario tenga una buena experiencia. No hacer pensar al usuario, que le sea fácil usar aquel producto. La verdadera experiencia de usuario va más allá de darle a éstos lo que dicen que quieren, o proporcionarles las mejoras que necesitan.

12 Cómo nace el término UX? Definición de Don Norman (1998) wiki Inventé el término porque pensé que el diseño de interfaces humanas (UI) y la usabilidad abarcaban demasiado poco; yo quería cubrir todos los aspectos de la experiencia de las personas con un sistema, incluido el diseño industrial, gráfico, de interfaces, la interacción física y manual video Pade del ux y creador del término. Libros:

13 Aspectos y técnicas: Se piensa idea producto, Análisis del producto y del usuario, DCU, userflows, Mapa de sitios, Arquitectura de la información, Benchmarking y Análisis de competencia, Estructura, Navegación, Diseño sketches/wireframes, prototipos, test de usabilidad. UX

14 UX no es lo mismo que UI Experiencia total del usuario (UX) es distinto a diseño de la interfaz de usuario (UI). Aunque UX emerja de disciplinas de diseño, no es una disciplina de diseño Peter Merholz, UX Week 2012

15 UX Abarca más campos y disciplinas de estudio, Basándose en obtener una buena experiencia de usuario y su objeto de estudio principal es el USUARIO.

16 UX UX (es) UI (es) Field research Face to face interviewing Creation of user tests Gathering and organizing statistics Creating personas Product design Feature writing Requirement writing Graphic arts Interaction design Information architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copywriting Presenting and speaking Working tightly with programmers Brainstorm coordination Tema de investigación Entrevista cara a cara Creación de pruebas de usuario Recopilación y organización de estadísticas Creación de personas Diseño de producto Escritura de funciones Requisito escrito Artes gráficas Diseño de interacción Arquitectura informacional Usabilidad Prototipos Diseño de interfaz Diseño de interfaz Diseño visual Creación taxonómica Creación de terminología Redacción de textos Presentando y hablando Trabajando estrechamente con los program. Brainstorm coordinación Tema de investigación Entrevista cara a cara Creación de pruebas de usuario Recopilación y organización de estadísticas Creación de personas Diseño de producto Escritura de funciones Requisito escrito Artes gráficas Diseño de interacción Arquitectura informacional Usabilidad Prototipos Diseño de interfaz Diseño de interfaz Diseño visual Creación taxonómica Creación de terminología Redacción de textos Presentando y hablando Trabajando estrechamente con los programadores Brainstorm coordinación

17 UX constante Etapa de análisis producto y Usuario. Diseño de estructura, navegación. UX Tipografía, volumen, paleta, interfaz gráfica, realización de mockups. UI Producto final Entregable

18 EJ: UX # UI: Acción Pelar Manzana

19 EJ: UX # UI Pelar Manzana Ej acción pelar manzana: UX es el momento en que pelamos el cuchillo, si nos resulta cómodo, fácil o encontramos algún problema. UI: Es el objeto o forma en que accedemos a la experiencia (osea el medio). Por lo tanto UI se refiere a la creación de la interfaz, ya sea gráfica o desarrollada con diversas tecnologías. Mientras que UX, se concentra en ponerse en los zapatos del usuario y verificar la usabilidad de tal o cual producto: diseño web, app, etc.

20 Resumen UX: UX son todas las interacciones y experiencia que una persona tiene con un producto en cierto tiempo. La idea es mejorar una experiencia, en los puntos que el contacto tiene interacción. Objetivo satisfacer las necesidades exactas del usuario. CONSISTENCIA en todos los pasos. La experiencia de usuario, no se añade a un producto, sino uno piensa y toma decisiones en crear una UX ÓPTIMA. UX Es ponerse en los zapatos del usuario

21 2. Y a qué llamamos Usabilidad?

22 Y a qué llamamos Usabilidad? Facilidad de Uso....Es la facilidad con que las personas pueden utilizar una herramienta particular o cualquier otro objeto fabricado por humanos con el fin de alcanzar un objetivo concreto. (wiki)

23 Y a qué llamamos Usabilidad? Jakob Nielsen, considerado el padre de la Usabilidad, la definió como el atributo de calidad que mide lo fáciles de usar que son las interfaces web. Es decir un sitio web usable es aquel en el que los usuarios pueden interactuar de la forma más fácil, cómoda, segura e inteligentemente posible.

24 Finalidad: En el caso de un sitio web/app, es lograr que el usuario encuentre lo que busca en el menor tiempo posible. Lógicamente es imposible crear un sitio web ciento por ciento perfecto, no se puede agradar al mismo tiempo a millones de usuarios, sin embargo, los diseñadores deben tratar de mostrar todos los elementos de una manera clara y concisa, minimizando el número de clics y de scroll. Lo importante en este caso es que el usuario no se deje dominar por el sitio, es decir que sea él mismo que tome el control de la navegación por medio de un aprendizaje sencillo.

25 Finalidad: SteveKrug: Don't make me think.

26 Us. Puede ser medida: En base a 3 variables: Efectividad: Mide la cantidad de tareas que un usuario puede realizar sin ayuda externa Eficiencia: Mide el costo para realizar una tarea. Satisfacción: es una variable cualitativa.

27 Entonces UX es diferente a Usabilidad. UX # Usabilidad: de facilidad de uso. De acuerdo con la definición de Usabilidad, este es un atributo de calidad de la interfaz de usuario, cubriendo si el sistema es fácil de aprender, eficaz de utilizar, agradable, y así sucesivamente. Una vez más, esto es muy importante, y de nuevo, el UX es un concepto aún más amplio. Usabilidad, no es en si la experiencia sino, si es fácil de usar o no. Ergonomía, influye en la usabilidad. Tablets, iphones, y sus medidas.

28 Experiencias diseñadas y experiencias accidentales

29 Experiencias diseñadas y experiencias accidentales

30 UI User interface design. Es la interfaz del usuario, es lo que define la parte visible de una app, web, o un software. Consta de la incorporación de la paleta de colores, imágenes, iconos, botones, tipografía, patrones de diseño, presencia de marca. Es el estilo visual del diseño UX, que pensamos previamente. wiki

31 Qué definimos en UI? - Creamos la interfaz gráfica. Incorporamos paleta, tipografía, elementos visuales, iconografía etc. Consistencia visual en todos los pasos. Hacemos reconocible y pregnante el producto con su propio diseño. Tenemos el producto diseñado como sería en la realidad.

32 UI

33 3. Cómo es el proceso de diseño UX y UI? Ej: tinder

34 1. Primero: Pensamos producto a desarrollar.

35 2. Pensamos el perfil de usuario: persona (DCU).

36 4. Pensamos el camino, pasos que el usuario va a tomar en el producto: Userflows, diagramas, mapas de sitio (AI)

37 5. Analizamos el Benchmarking. Su competencia:

38 7. Se comienza con la estructura y primeros sketches baja calidad.

39 7. Se comienza con la estructura y primeros sketches baja calidad.

40 8. Wireframes, sketches en alta.

41 9. Se arma los primeros prototipos, sketches navegables.

42 10. Se piensan los test/pruebas de usabilidad:sacamos resultados y volvemos a evaluar el diseño UX.

43 11. Se piensa el diseño ui, para incorporar al UX.

44 12. Una vez validado el diseño UI, se realiza un prototipo con bocetos navegables.

45 13. Se arman los mockups: Bocetos reales de como sería la aplicación.

46 Y por último... Una vez con los diseños UI, se pasan a programación. Luego se realizarán nuevos test de usabilidad, para ver resultados más reales.

47 Lista de sitios responsive y buen Ux It e-comerce Turismo Dating mkt:

48 Gracias! Berenice B.