DISEÑO UX Fundamentos y aplicación práctica

DISEÑO

UXFundamentos y aplicación práctica

miguelsanchez.com CETICJornadas Tecnológicas/////////////////////////////////////////////////////////////////////////

http://www.miguelsanchez.com

DISEÑO UX: Fundamentos y aplicación práctica miguelsanchez.comCETIC Vitoria-Gasteiz |

LICENCIA

Esta obra se publica bajo licencia Creative Commons: Attribution-NonCommercial-ShareAlike 4.0 International License.


http://www.vitoria-gasteiz.org/cetic

http://creativecommons.org/licenses/by-nc-sa/4.0/


VUESTROS OBJETIVOS

DISEÑO

UX




LA JORNADA




GUÍA DE REFERENCIAS




MI AYUDAmiguelsanchez.com




TRAP ADVENTURE 2......o nuestra experiencia en algunas webs.



https://www.youtube.com/watch?v=wvti-SKu2pk


RETO O PROBLEMA

PARA LOS USUARIOS

SOLUCIÓN EFICAZ Y

SATISFACTORIA




RETOS / PROBLEMAS SOLUCIONES






https://www.amazon.es/gp/product/B01MURX53U/ref=oh_aui_detailpage_o03_s00?ie=UTF8&psc=1























































































































RETO O PROBLEMA

PARA LOS USUARIOS

SOLUCIÓN EFICAZ Y

SATISFACTORIA

Y COMUNICAR




SABER ESCUCHAR A

LOS USUARIOS

SABER COMUNICAR LA SOLUCIÓN

Y COMUNICAR




GRAN DISEÑADOR/A

UXGRAN

COMUNICADOR/A=




SABER ESCUCHAR A

LOS USUARIOS

SABER COMUNICAR LA SOLUCIÓN

Y COMUNICAR

CON SENCILLEZ




«Pero si es muy simple queda feo y no comunica»




SaulBASS




Don't decorate,

COMMUNICATE!

FUENTE: Web Design from Scratch.



https://webdesignfromscratch.com/basics/dont-decorate-communicate/




https://mailchimp.com




https://www.tesla.com/?redirect=no




https://www.trulia.com




https://www.airbnb.com


DISEÑO DE EXPERIENCIA DE USUARIOEs el proceso de aumentar la satisfacción del usuario mejorando la usabilidad, accesibilidad y placer ofrecidos en la interacción entre un usuario y un producto.




No es sobre el producto.Es sobre la experiencia

usando el producto.




Propósito del sitio/aplicaciónAudiencia objetivaTipología de web

DEFINIR METAS DE UN PROYECTO WEB




USUARIO

InformationArchitecture

VisualDesign

Functionality

UsabilityTypography

UserInterface

ContentStrategy

InteractionDesign




FASES FUNDAMENTALES DEL DISEÑO UX

INVESTIGACIÓN

PROCESO ITERATIVO

DESCUBRIMIENTODEFINICIÓN DISEÑO DESARROLLO

MEDICIÓN

VALIDACIÓN




DOUBLE DIAMOND

FUENTE: British Design Council.



https://www.designcouncil.org.uk



INVESTIGACIÓN

PROCESO ITERATIVO


MEDICIÓN

VALIDACIÓN




ENVÍA"PREMIO USUARIO" AL 5555Y CONSIGUE!GRANDES PREMIOS¡ PREMIO USUARIO

PREMIO USUARIO

PREMIO USUARIO

PREMIO USUARIO

PREMIO USUARIO




FUENTE: Nielsen Norman Group.



https://www.nngroup.com/articles/ux-research-cheat-sheet/


Qué objetivo quieren lograr.Cómo lo hacen hasta ahora.Qué aman y odian del proceso.Qué dificultades experimentan.Qué soluciones / trucos usan.

Contextual inquiry

Investigación contextual

Investigación contextual

Qué quieren los usuarios




INVESTIGACIÓN CONTEXTUAL

USUARIO

TAREAS

CONTEXTO





Grabar audiocon usuarios

Fotografiar el entorno*Con permiso previo

AnotarobservacionesNo interpretaciones

Grabar pantallade los usuariosCon herramienta de screencast





60 - 90 minutos cada entrevista

Muéstrame cómo hacer tu trabajo Muéstrame cómo haces __________.Qué pasos principales sigues para __________.

Evitarrespuestas«Sí» / «No»

Acordar previamente con tu cliente y equipo:

¿Qué preguntas son fundamentales para el proyecto?



* * * * *

INVESTIGACIÓN CONTEXTUAL: MERCADONA




https://www.mercadona.es/ns/entrada.php?js=1


«Bajadas PVP» = ¿Ofertas?




123456789

1011121314

151617

¿Dónde buscaríais un Cola Cao?






http://www.expansion.com/valencia/2017/03/02/58b8223d22601d7e5e8b469f.html


+ User story map

Mapa de historiade usuario

Affinity diagraming

Diagramas de afinidad




FUENTE: Envato Tuts+.



https://webdesign.tutsplus.com/tutorials/how-to-prepare-and-use-an-affinity-diagram--cms-28388


+ EscenariosPersonas




PERSONAS

Manuel Ibáñez

Edad: 45 años.Ocupación: carpintero.Localización: Vitoria-Gasteiz.

«Siempre suelo comprar lo mismo y prefiero el móvil al ordenador».

(Breve descripción del perfil de este usuario). Lorem ipsum dolor sit met, facials fuisset voluptatibus cu vim. Ei posit malorum dolour vel, pro ridens debutis ut. Alia present sapientem est ut. Oratio liberalisme ad pro, vim liber poster ex.

Objetivos • (Describir concisamente un objetivo del usuario en nuestra web).• (Describir concisamente un objetivo del usuario en nuestra web).

Problemas / retos • (Describir concisamente un obstáculo del usuario en nuestra web).• (Describir concisamente un obstáculo del usuario en nuestra web).




ESCENARIOS

MercadonaManuel está comprando desde el móvil y pierde la conexión.

IberiaA Maite le han perdido las maletas y busca ayuda en la web.




Arquitectura dela informaciónContenidos




INICIO

Servicios

Tienda

Ofertas Novedades Segunda Mano

Préstamo de vinilos Discográfica

Alquiler de locales

Empresa

HistoriaContactar (ubicación)

Foros

Clásica Jazz Pop Heavy Contactar

Términos legales

Condiciones de uso Seguridad





INVESTIGACIÓN

PROCESO ITERATIVO


MEDICIÓN

VALIDACIÓN



* * * * *

USABILIDAD


«Es la cualidad que determina lo sencillo que es utilizar una interfaz de usuario».

Jakob Nielsen




«El grado hasta el que un producto puede ser utilizado por unos usuarios específicos para realizar unos objetivos específicos de forma efectiva, eficiente y satisfactoria dentro de un contexto de uso específico».

ISO 9241-11




«El 63 % de todos los proyectos de desarrollo de software sobrepasan su presupuesto, siendo las causas más importantes relacionadas con usabilidad».

Cost-justifying Usability: An Update for an Internet Age. Lederer and Prasad, 1992



https://books.google.es/books?id=ZqMQOT9SMhAC&pg=PA24&lpg=PA24&dq=Lederer+y+Prasad+1992+projects+usability&source=bl&ots=53mx815TnY&sig=ZkwQ6x5myma1tL1uu8HXewqRBfo&hl=es&sa=X&ved=0ahUKEwjEh9nnyvjTAhWBvSwKHY-FDB8Q6AEINzAC#v=onepage&q=Lederer%20y%20Prasad%201992%20projects%20usability&f=false


MANTENIMIENTO DE UN PROYECTO

"80% of maintenance is due to unmet or unforeseen user requirements."

"Only 20% is due to bugs or reliability problems."

FUENTE: Martin and McClure, 1983; Pressman, 1992.




EFICAZ

Satisfactorio

Fácil derecordar

Gestión deerrores

Fácil deaprender




MENOS ES MÁS

CONTENT IS KING

LA WEB SE USA, NO SE CONTEMPLA

DON'T DECORATE, COMMUNICATE




NO HAN IDO A VER TU WEB




«La simplicidad es la máxima sofisticación».- Leonardo da Vinci




- Enemigo del proyecto

«Esto también hay que ponerlo».




HORROR VACUI




Vamos a crear una web con CONVENCIONES DE USABILIDAD




Enlace Botón




Eliminar subrayado ante excesiva densidad




TÍTULO




<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Título de la página</title> <link rel="stylesheet" href="css/main.css"> </head>

<body> Aquí van los contenidos de nuestra página. </body> </html>

HTML




25Caracteres perdidos




PRINCIPAL

INTERIOR




ACME - Fotografía y vídeo para drones

LOGO





ACME Siempre enlaza a página principal





ACME IDIOMAS




¿Usamos banderas?




Español - Inglés - Francés

English




Las banderas representan países

NO IDIOMASIndícame mi idioma

EN MI IDIOMA




Español - English - Français





ACME Buscar

Castellano - English - Français

BUSCADOR




BuscarCámara Ca

BuscarCámara Canon 70d DSLR





ACME Buscar


NAVEGACIÓN




Fotografía Vídeo Drones Contactar

Home Fotografía Vídeo Drones Contactar

Inicio




Boletín




No ocultar la navegación a los usuarios




REGLADEL 7 2+




1 2 3 4 5 6 7 8

1 2 3 4 5 6

1 2 3 4 5 6



inarocket.comHTML FOR BEGINNERS: Start in 5 min

EXCEPCIONES

http://www.inarocket.com



ACME Buscar


Fotografía Vídeo Drones ContactarInicio

CONTENIDOS PRINCIPALES




CLÍNICA DENTAL

Tu salud dental con seguimiento personalizado.

CLÍNICA DENTAL





CTA: CLICK-TO-ACTION

CLÍNICA DENTAL


Solicitarpresupuesto CTA






https://www.mozilla.org/en-GB/firefox/new/


1 2

3

45

Adivina el CTA




4.360 px



https://www.mrw.es



ACME Buscar



APRENDE A CONQUISTAR LOS CIELOS CON TUS FOTOSAPRENDE A CONQUISTAR LOS CIELOS CON TUS FOTOS

CURSO GRATUITO





ACME Buscar



CONTENIDOS PRINCIPALES




CONTENIDO




En Internet no leemos.

ESCANEAMOS.




EL PATRÓN CON FORMA DE F




https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/


A:

C:

B:

D:

Como máximo, ¿cuánto texto leen los usuariosen una página web?

15 % 34 %

56 % 28 %


Blablabla...Blabla...



https://www.nngroup.com/articles/how-little-do-users-read/




http://www.elperiodico.com/es/sociedad/20171205/alumnos-espanoles-primaria-informe-pirls-comprension-lectora-2016-6473781


Abril de 2017Marzo de 2017

FUENTE: The Guardian.



https://www.theguardian.com/books/2017/apr/27/screen-fatigue-sees-uk-ebook-sales-plunge-17-as-readers-return-to-print

https://www.theguardian.com/books/2017/mar/14/ebook-sales-continue-to-fall-nielsen-survey-uk-book-sales


CLARO

3C CONCISO

CORRECTO




Otra web perdida, Don Vito.




PALABRERÍA CORPORATIVA




Además, incluye drivers compatibles con los sistemas de impresión y los dispositivos de

captura de imágenes.




CLARO

3C CONCISO

CORRECTO




«Nuestras actuaciones se encaminan desde el análisis a la preparación, elaboración, gestión, desarrollo, evaluación y difusión de todo tipo de iniciativas e instrumentos que favorezcan y permitan una “arquitectura de participación” en red para las organizaciones.ACME S.A, está avalada por la amplia experiencia y cualificación de los profesionales que integran su equipo multidisciplinar de trabajo, con expertos en materias y campos tan diversos como la administración empresarial, la documentación, la seguridad integral, los recursos humanos, las nuevas tecnologías de información y comunicación, la programación y gestión informacional.Nuestro proyecto, anticipación imaginativa, es un constante esfuerzo, un empeño comunicacional».

¿Conciso? ¿qué ofrecen?




FUENTE: Bienvenido Mr. Marshall.




No te preguntes qué rollo puedes contarme de ti.

Pregúntate qué puedes hacer por mí.






https://www.levainbakery.com


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

ERROR

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.




PÁRRAFOS = 2-3 LÍNEAS




UN PÁRRAFO = UNA IDEA

IDEA

IDEA

IDEA




PIRÁMIDE INVERTIDA

CONCLUSIÓN

...

DETALLES




CLARO

3C CONCISO

CORRECTO




AIRACME

Bienvenido/aSomos una compañia lider en el sector aeronautico con más de veinte años de experiencia como aerolinea que ofrece vuelos a las principales capitales europeas con un equipo de grandes profesionales con una apuesta continua por la calidad. La satisfaccion de nuestros clientes, nuestra razon de ser.

Conocenos Donde volamos Club VIP

Quienes somos Historia Equipo Aviones Vuelos




HOYGAN




HOYGAN.(Voz expresiva. amb. Or. Neologismo de internet). 1. amb. coloq. Persona que debido a su incultura o desinterés en escribir correctamente su lenguaje escribe de manera ortográfica y gramaticalmente incorrecta.2. amb. coloq. Por metonimia, texto escrito por un HOYGAN.3. amb. coloq. Persona de poca cultura.






http://www.fundeu.es/

* * * * *

NIELSEN & NORMAN


Donald Norman



https://en.wikipedia.org/wiki/Don_Norman


Jakob Nielsen



https://en.wikipedia.org/wiki/Jakob_Nielsen_(usability_consultant)


Nielsen Norman Group

Donald NormanJakob Nielsen






https://twitter.com/nngroup




https://www.nngroup.com/articles/

* * * * *

EVALUACIÓN


EVALUACIÓN HEURÍSTICA



* * * * *

RETOS


INTERFAZ VOZ

APPLE

AMAZO

N GOO

GLE




Echo Dot

Echo

Echo Plus

Echo Spot

Echo Show

Echo Look

Fire TV




Assistant

Android

Android TV

Android Gear

Home Max

HomeHome Mini

Chrome OS

Google App

+



https://developers.google.com/assistant/sdk/


Mac & MacBook / ProiPad Apple TV

iPhone

Watch

HomePod




INTERFAZ VR



* * * * *

PASAR A LA ACCIÓN: FORMACIÓN


CETICA partir de abril






https://www.udacity.com/course/product-design--ud509




https://eu.udacity.com/course/ux-design-for-mobile-developers--ud849




https://theuxreader.com




https://www.uxpin.com/studio/ebooks/




https://www.sitepoint.com/premium/topics/all?q=&limit=400&offset=0&page=1&content_types%5B%5D=All&slugs%5B%5D=designux&states%5B%5D=available&order=




https://www.sitepoint.com/premium/books/get-started-in-ux


BOLETÍN



http://www.oreilly.com/design/newsletter.html


REVISTAS



http://www.creativebloq.com/net-magazine

https://www.imaginesubs.co.uk/subscribe-to-web-designer?offerCode=WEB100




https://medium.freecodecamp.org/the-complete-list-of-user-experience-ux-resources-tools-7af32aa129f6

* * * * *

PASAR A LA ACCIÓN: EMPLEO


YA SE PUEDE SALIR




CRECIMIENTO DE EMPLEO PARA DISEÑADORES UX

FUENTE: Justin Baker / Emsi Analyst 2017.



https://medium.muz.li/2018s-ux-designer-salary-forecast-32ccc1dfcd5f




https://www.glassdoor.com/List/Best-Jobs-in-America-2017-LST_KQ0,25.htm

https://www.glassdoor.com/List/Best-Jobs-in-America-2017-LST_KQ0,25.htm




https://www.indeed.com/salaries/User-Experience-Designer-Salaries




https://www.glassdoor.com/knowyourworth/dashboard.htm


FUENTE: Justin Baker / The Creative Group.





FUENTE: Justin Baker / Enterprise UX Industry Report 2017–2018.







https://basecamp.com/books/remote




https://whoishiring.io/




https://www.upwork.com/
















































































































































































































































































































































































































https://99designs.es/


















































































































































































































































https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://envato.com/

https://www.toptal.com/
































































































































































































































































































DISEÑO

UXFundamentos y aplicación práctica

miguelsanchez.com CETICJornadas Tecnológicas/////////////////////////////////////////////////////////////////////////

GRACIAS


DISEÑO UX Fundamentos y aplicación práctica

Documents

Transcript of DISEÑO UX Fundamentos y aplicación práctica