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

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

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

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

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

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

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

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

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.