DISEÑO UX

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

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?

UX UI

User InterfaceVisual Design

User Experienceo Experiencia de

Usuario

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.

UX UI

User InterfaceVisual Design

User Experienceo Experiencia de

Usuario

UX constante

Producto finalEntregable

UX

Podríamos decir, que la experiencia de usuario es el halo querodea 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..

¿Pero qué significa UX?

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

UX Aspectos y disciplinas que abarca:

UsabilidadUser researchDCUArquitectura de la info.Factores humanosBrandingVisual designDiseño industrialDiseño de interacción

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.

¿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 https://youtu.be/9BdtGjoIN4E

Pade del ux y creador del término. Libros: http://cazuela.info/libro-1/

UX

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

http://www.uxisnotui.com/

UX Abarca más campos y disciplinas de estudio, Basándose en obtener unabuena experiencia de usuarioy su objeto de estudio principales el USUARIO.

UX

Field researchFace to face interviewingCreation of user testsGathering and organizing statisticsCreating personasProduct designFeature writingRequirement writingGraphic artsInteraction designInformation architectureUsabilityPrototypingInterface layoutInterface designVisual designTaxonomy creationTerminology creationCopywritingPresenting and speakingWorking tightly with programmersBrainstorm coordination

UX (es)

Tema de investigaciónEntrevista cara a caraCreación de pruebas de usuarioRecopilación y organización de estadísticasCreación de personasDiseño de productoEscritura de funcionesRequisito escritoArtes gráficasDiseño de interacciónArquitectura informacionalUsabilidadPrototiposDiseño de interfazDiseño de interfazDiseño visualCreación taxonómicaCreación de terminologíaRedacción de textosPresentando y hablandoTrabajando estrechamente con los program.Brainstorm coordinación

UI (es)

Tema de investigaciónEntrevista cara a caraCreación de pruebas de usuarioRecopilación y organización de estadísticasCreación de personasDiseño de productoEscritura de funcionesRequisito escritoArtes gráficasDiseño de interacciónArquitectura informacionalUsabilidadPrototiposDiseño de interfazDiseño de interfazDiseño visualCreación taxonómicaCreación de terminologíaRedacción de textosPresentando y hablandoTrabajando estrechamente con los programadoresBrainstorm coordinación

UX UI

UX constante

Etapa de análisis producto y

Usuario. Diseño de estructura, navegación.

Producto finalEntregable

Tipografía, volumen, paleta, interfaz gráfica, realización de

mockups.

EJ: UX # UI: Acción Pelar Manzana

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.

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”

2. ¿Y a qué llamamosUsabilidad?

¿Y a qué llamamosUsabilidad?“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)

¿Y a qué llamamosUsabilidad?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.

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.

Finalidad: SteveKrug: Don't make me think.

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.

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.

Experienciasdiseñadas y experiencias accidentales

Experienciasdiseñadas y experiencias accidentales

UIUser 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

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

UI

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

1. Primero: Pensamos producto a desarrollar.

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

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

5. Analizamos el Benchmarking. Su competencia:

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

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

8. Wireframes, sketches en alta.

9. Se arma los primeros prototipos, sketches navegables.

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

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

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

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

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.

Lista de sitios responsive y buen UxIthttps://www.globant.com/http://coderhouse.com/

e-comercehttp://www.mercadolibre.com.ar/https://www.alamaula.com/http://www.apple.com/la/https://www.olx.com.ar/https://www.zonajobs.com.ar/https://es.airbnb.com/

Turismohttp://www.despegar.com.ar/https://almundo.com.ar/http://www.avantrip.com/http://www.garbarinoviajes.com.ar/

Datinghttps://www.gotinder.com/https://www.happn.com/es/

email mkt:https://www.fromdoppler.com/https://litmus.com/https://mailchimp.com/

¡Gracias!Berenice B.