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

Documentos relacionados
Parte 1: Información Curso Código-Curso: Tiene como prerrequisito: Programa-Semestre: Intensidad semanal: Créditos: Objetivo General:

Descripción. Objetivos de Aprendizaje. Estructura y Contenidos

Curso ONLINE de Experiencia de Usuario_. Duración: 50 sesiones aprox. (150 horas lectivas)

Descripción. Objetivos de Aprendizaje. Estructura y Contenidos

Metodología y acciones. Jaime Moncho

Tema 2. Principios de diseño centrado en el usuario

Programa - Diseño UX (Carrera) Tabla de contenido. Acerca del Curso Destinatarios Requerimientos y Modalidad Programa Contacto

Fuente: Actívate, Google España 2014.

usuario Diseño Centrado en el Usuario. Diseño para la Multimedia

Taller de Usabilidad. Mario A Moreno Rocha Dayfel L Hernández Martínez UTM

Comunicación Hombre Máquina

Alejandro Ostalé User Experience Design Portfolio

Análisis Histórico - Conceptual

Metodología de Desarrollo de Sitios Web. El desarrollo de software vs. El desarrollo de sitios web

MAESTRÍA EN TECNOLOGÍA DE LA INFORMACIÓN

ARQUITECTURA DE INFORMACIÓN, USABILIDAD, ACCESIBILIDAD

Elementos de la experiencia de usuario

Accesibilidad y Usabilidad web segun el Marketing

Francisco Gras. Contenidos. Portfolio de Proyectos. Actualizado enero 2017

GRADO EN INGENIERÍA INFORMÁTICA DE GESTIÓN Y SISTEMAS DE LA INFORMACIÓN

Javascript para diseñadores

Sistemas & Telemática ISSN: EditorSyT@icesi.edu.co Universidad ICESI Colombia

About ExpErto En MKt y EstrAtEgiA DigitAl

UF 6.1 Diseño de interfaz de usuario Experiencia de usuario. Arquitectura de la información, usabilidad y accesibilidad. Módulo 6

EL DOCUMENTO DE DISEÑO DE JUEGO

Edición digital, documentos digitales y usability

MAQUETACIÓN HTML Y CSS. PARA DISEÑADORES WEB.

Juegos Serios Fundamentos y experiencias de desarrollo

ESTÁNDARES WEB Y LA W3C

EL PERFIL IDEAL: CUÁNDO DÓNDE COSTO. Personas entusiastas con experiencia técnica que estén interesadas en aprender desarrollo en ios

Tema 3. Gestión de proyectos de desarrollo multimedia y sistemas web. Diseño para web. Guías de estilo

Un vocabulario visual para describir arquitectura de información y diseño de interacción Edgar Valarezo Sergio Luján Mora

Desarrollo de Productos Editoriales Multimedia

Somos la Agencia Digital de los emprendedores en Chile.

Multimedia Educativo

DISEÑO DE LOS WIREFRAMES DE UNA HERRAMIENTA WEB DEDICADA A LA BÚSQUEDA DE EMPLEO, DESDE EL ENFOQUE Y METODOLOGÍAS DEL DISEÑO CENTRADO EN EL USUARIO

Capacitación YELL. Usabilidad. Jorge Vera Vargas Abril 2012

SOFTWARE PARA LA REALIZACIÓN DE MAQUETAS

Tarea 1: Revisión del Diseño UX.

Multimedia

Tema 4. Usabilidad. Experiencia de Usuario Material Extra

DESARROLLO DEL PROYECTO

Cristian Parra Gamar Milano Interacción Humano-Computador

TECNICAS QUE HABRA QUE REGIR PARA LA CONTRATACIÓN MEDIANTE PROCEDIMIENTO ABIERTO

Guía basada en conceptos de usabilidad web

GNOME. XI encuentro de Linux Universidad del Bio Bio. GNOME y su HIG. Fabio Duran V

Pontificia Universidad Católica Argentina Santa María de los Buenos Aires Facultad de Ciencias Sociales, Políticas y de la Comunicación

D. Diseño y Desarrollo de Aplicaciones Móviles O17

ENTRADAS EFECTIVAS Sesión 12 Cap. 12 Kendall & Kendall. Ana Mercedes Cáceres Año 2006

Ciclo Formativo de Grado Superior en Desarrollo de Aplicaciones Multiplataforma, Especialista en Diseño Digital y Experiencia de Usuario

Javier Baeza, Oscar Alberto Chávez Bosquez Fecha de elaboración: 28 de mayo de 2010 Fecha de última actualización:

Proyecto Multimedia. Elio Sancristóbal Ruiz

Sexy Web Design (30 horas)

Sistemas Centrados en el Usuario "Metodología de Definición y Diseño de Interfaces Gráficas de Software (GUI)"

Metodología centrada en la Experiencia del Usuario

Programa Analítico Vicerrectoría de Educación Superior

Usabilidad, Principios de Diseño Web Mercadeo Electrónico- ULACIT SITIOS WEB Y LA PÁGINA DE INICIO

LOS 8 PERFILES MÁS DEMANDADOS EN RELACIÓN CON EL MARKETING DIGITAL Y LOS MEJOR PAGADOS

Qué es la usabilidad? Definición de Usabilidad

Tema 2. Principios de diseño centrado en el usuario

Modalidades.

PORTFOLIO de Juanma Pérez Diseñador Gráfico Ilustrador Motion Grapher

Usabilidad de revistas electrónicas especializadas en Ciencias de la Salud: medición y evaluación

Campaña de branding e identidad visual vinos Un colp al mar

La ergonomía cognitiva y sus aplicaciones

UNIVERSIDAD AUTÓNOMA DE CHIAPAS LICENCIATURA EN SISTEMAS COMPUTACIONALES

Mapa de empatía. Aplicado a la búsqueda de empleo

Planificación Académica

PRUEBAS DE USABILIDAD PRUEBAS DE USABILIDAD

Presencia y versatilidad en un mundo cambiante

No tengo qué pensar. J

MÁSTER en DISEÑO GRÁFICO Y WEB_

PRESENTACIÓN OBJETIVO PERFIL DE INGRESO PERFIL DE EGRESO DIRECCIÓN DE DOCENCIA EN TIC DIPLOMADO PLANEACIÓN Y CONSTRUCCIÓN DE SITIOS WEB

Ingeniería de Software II

Qué es el Desarrollo Web?

F1162 Diseño gráfico de sistemas 1/9

ecommerce como estrategia de internacionalización Laura M. Anchico Directora de Nuevos Negocios PlacetoPay

Verificación y Validación. 5.7 GUI Funcionalidad, Performance, entre otros.

Modelos de calidad. Técnicas de prueba del software Estrategias de prueba del software. Calidad del software. Factores de Calidad. producto.

Sistema Gestor de Portales Gubernamentales

Usabilidad web para PYMES y autónomos 6 de febrero de 2006

ISO/IEC 9126 ISO/IEC : Part 2 Guidance on task requeriments (1992)

BLOQUE I 2. Usabilidad

F.7. Pensando en el usuario: la usabilidad Por Jordi Grau

Aceleramos la innovación empresarial. Transformación digital en la gestión del cliente

Diseño en HCI (Preece et al 2002) Prototipos Diseño conceptual Uso de prototipos en el diseño conceptual Diseño físico

Caso práctico: Definición del problema, objetivos esenciales y planteamiento de la investigación

Diseño y Desarrollo Web. Espinola Raul 2008 basado en una Presentación de G. Gaona.

WordPress para diseñadores web

Interfaz Humano Computadora DRA. LETICIA FLORES PULIDO PRIMAVERA 2012

ELECTIVA III. Entregables Minimos

Pre-requisito: Dominio de Photoshop nivel básico. Contenido y desarrollo del curso:

Rafael Mena de la Rosa, Gilberto Murillo González Fecha de elaboración: Mayo 2010 Fecha de última actualización:

UF 6.1 Diseño de interfaz de usuario. Módulo 6

Horas Semanales. Prácticas 2 4 Profesional Integrado

Hola! Somos Rooster, un estudio de diseño gráfico orientado al desarrollo y gestión de marcas; al branding. El branding para PYMES es posible.

Curso UI/UX (b-m) TOOLS. 26h lectivas. Sketch InVision Keynote Principle ENE 2018

Aspectos Generales de la Interacción Humano Computador(IHC)

DISEÑO Y CONSTRUCCION DE MODELOS WEB

Transcripción:

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 Experience o Experiencia de Usuario User Interface Visual Design

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 constante UX UI User Experience o Experiencia de Usuario User Interface Visual Design Producto final Entregable

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

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: Usabilidad User research DCU Arquitectura de la info. Factores humanos Branding Visual design Diseño industrial Diseñ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/

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

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

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. http://www.uxisnotui.com/

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

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

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é llamamos Usabilidad?

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)

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.

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.

Experiencias diseñadas y experiencias accidentales

Experiencias diseñadas y experiencias accidentales

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

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 Ux It https://www.globant.com/ http://coderhouse.com/ e-comerce http://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/ Turismo http://www.despegar.com.ar/ https://almundo.com.ar/ http://www.avantrip.com/ http://www.garbarinoviajes.com.ar/ Dating https://www.gotinder.com/ https://www.happn.com/es/ email mkt: https://www.fromdoppler.com/ https://litmus.com/ https://mailchimp.com/

Gracias! Berenice B.