SlideShare una empresa de Scribd logo
1 de 107
Descargar para leer sin conexión
10 claves, un mandamiento
y un par de mentiras
para diseñar webs y apps
Hacemos cosas que funcionan - www.unexpendables.com
Hacemos cosas que funcionan

@unexpendables
Índice

I. 
II. 
III. 
IV. 
V. 

Presentación
Pero ¿Esto qué es?
¿Por qué 10 claves?
10 preguntas que debe responder todo proyecto
1 Mandamiento

2

Hacemos cosas que funcionan

@unexpendables
Presentación

Hacemos cosas que funcionan

@unexpendables
Hola, soy Sergio de la Casa 
@sergiodelacasa,


CEO & UX lead


Unexpendables

Llevo diseñando productos y soluciones desde el siglo
pasado para Panda, Gamesa, Sherpa y otra gente…
Hacemos cosas que funcionan

@unexpendables
Hacemos cosas que funcionan

@unexpendables
Sorprendentemente la fregona es un
invento de los años 50

Hacemos cosas que funcionan

@unexpendables
Era tan fácil como atar el trapo de fregar a
un palo

Hacemos cosas que funcionan

@unexpendables
Pensamos, diseñamos y fabricamos los
palos que convierten los trapos en
flamantes fregonas

Hacemos cosas que funcionan

@unexpendables
Pero…¿Esto qué es?

Hacemos cosas que funcionan

@unexpendables
NO somos una ONG J



Los usuarios felices están bien, pero

sólo porque nos aportan beneficio

Hacemos cosas que funcionan

@unexpendables
La experiencia de usuario es un un medio,
no un objetivo en si mismo.

Un producto bien diseñado tiene que ser
usable. Pero no por ser usable es un buen
producto.

Hacemos cosas que funcionan

@unexpendables
Razón número 1 : Ignorar a los clientes

Hacemos cosas que funcionan

@unexpendables
Según Forrester, un producto debe ser:




Deseable

Usable

Útil

Hacemos cosas que funcionan

@unexpendables
¿Por qué 10 Claves?

Hacemos cosas que funcionan

@unexpendables
Jakob Nielsen

Gurú

Hacemos cosas que funcionan

@unexpendables
En 1990 Nielsen hizo un estudio sobre los 

249 problemas de usabilidad
más comunes.


Observó que se podían agrupar en

10 categorías
Hacemos cosas que funcionan

@unexpendables
…estableció entonces

10 principios heurísticos


Uno por cada categoría de error

Hacemos cosas que funcionan

@unexpendables
Los heurísticos NO son patrones de diseño




Son más bien Reglas de Oro


Un catálogo de 

buenas prácticas 
Hacemos cosas que funcionan

@unexpendables
Cumplirlos, no garantiza el éxito…



…pero no hacerlo garantiza

un fracaso casi seguro.
Recuerda: Los heurísticos nacen como
respuesta a los problemas más comunes de los
usuarios.



Hacemos cosas que funcionan

@unexpendables
Y sobre todo, se apoyan en números


ü 249 problemas de usabilidad.
ü 10 heurísticos.
ü 318 subheurísticos.
Esto significa que…

Hacemos cosas que funcionan

@unexpendables
…No son opinables J
¡Palabra de
Jakob!

Hacemos cosas que funcionan

@unexpendables
Pero… ¿Sólo 10?


Desde 1990 la usabilidad se ha hecho mayor y se

han identificado nuevas reglas que añadir

a la lista.



No obstante, en la lista original siguen siendo 10.

Hacemos cosas que funcionan

@unexpendables
10 preguntas que
debe responder todo
proyecto 

Hacemos cosas que funcionan

@unexpendables
Con ustedes, la famosa lista de heurísticos:
1.  Visibilidad del estado del sistema
2.  Correspondencia entre el sistema y el mundo real
3.  Control y libertad del usuario
4.  Consistencia y estándares
5.  Prevención de errores
6.  Reconocimiento más que memoria
7.  Flexibilidad y eficiencia de uso
8.  Información y diseño minimalista
9.  Reconocimiento y recuperación de errores
10. Ayuda y documentación

Hacemos cosas que funcionan

@unexpendables
Pero vayamos por partes…


Hacemos cosas que funcionan

@unexpendables
1.- Visibilidad del estado del sistema
El sistema siempre debe mantener
informado al usuario acerca de lo que
está pasando, e informarle de cualquier
cambio en un tiempo razonable

Hacemos cosas que funcionan

@unexpendables
Siempre informado del estado de su sistema…

Ejem, ¿Te ocurre

algo sistema?...

Hacemos cosas que funcionan

@unexpendables
“¡Tú sabrás lo que
has hecho!”

¡MAL!
Hacemos cosas que funcionan

@unexpendables
“Todavía no te has dado cuenta de que

¡Los platos no se
lavan solos!”
¡Mucho mejor!
Hacemos cosas que funcionan

@unexpendables
Y no olvidarse de informar de
cualquier cambio…

…en un
tiempo
razonable
Hacemos cosas que funcionan

@unexpendables
Algunos ejemplos reales…
Al pulsar, el botón se
sustituye por una barra
de progreso hasta que
finaliza el proceso
Se muestra un mensaje al
finalizar una tarea
La fortaleza de la
contraseña se muestra
en tiempo real
Hacemos cosas que funcionan

@unexpendables
2.- Correspondencia entre el sistema y el
mundo real
El diseño está adaptado al mundo real
de los usuarios, su lenguaje,
conocimientos, etc

Hacemos cosas que funcionan

@unexpendables
Es necesario manejar 

conceptos y metáforas
familiares al usuario
Una web… 

¡Es como un
toro!
Hacemos cosas que funcionan

@unexpendables
Todos los días:

Archivos
Los guardamos en… Carpetas

Manejamos…

Tiramos cosas a la…

Hacemos cosas que funcionan

Papelera

@unexpendables
En iTunes
La metáfora de una

biblioteca encaja con el
modelo mental de los
usuarios.

Contiene música, películas,
audiolibros…
Hacemos cosas que funcionan

@unexpendables
Skeuomorfismo

Hacemos cosas que funcionan

@unexpendables
3.- Control y libertad del usuario
Los usuarios a menudo eligen opciones
por error. Hay que facilitarles una
salida de emergencia.
Permitir deshacer y rehacer.

Hacemos cosas que funcionan

@unexpendables
En la siguiente rotonda

continúe
recto,
segunda salida

Hacemos cosas que funcionan

@unexpendables
a la

…

izquierda
ha dicho, no?

Hacemos cosas que funcionan

@unexpendables
recalculando
ruta…

…

por tercera vez

Hacemos cosas que funcionan

@unexpendables
A esta opción de búsqueda
es fácil acceder, introducir
información, realizar una
búsqueda y cancelarla
Está marcado
claramente dónde está
el usuario y hacia dónde
puede ir

Hacemos cosas que funcionan

@unexpendables
Y los famosos 

Deshacer y Rehacer
Hacemos cosas que funcionan

@unexpendables
4.- Consistencia y estándares
El diseño es consistente internamente
y con los estándares externos 

Hacemos cosas que funcionan

@unexpendables
¡Mi
pueblo!
Hacemos cosas que funcionan

@unexpendables
¡Mi
abuela!

Hacemos cosas que funcionan

@unexpendables
De mi abuela he aprendido muchas cosas…

“Antena 3
en el tres”
Es así de simple
Hacemos cosas que funcionan

@unexpendables
Gmail:
Adopta el mismo estándar que otros
clientes de email existentes

Office 12:
Idéntico estilo en las toolbars e
iguales opciones en los menús de
todos los productos
Hacemos cosas que funcionan

@unexpendables
5.- Prevención de errores
El diseño debe prevenir los errores de
los usuarios antes de que los cometan

Hacemos cosas que funcionan

@unexpendables
=

+
¡Falso!
Hacemos cosas que funcionan

@unexpendables
+
Hacemos cosas que funcionan

=
@unexpendables
Siempre que diseñes una
escalera…

…ponle una barandilla
(La gente intentará bajar corriendo)
Hacemos cosas que funcionan

@unexpendables
Algunos ejemplos reales…
Mostrar la acción
primaria de forma más
relevante (Ley de Fitts)
El auto-recomendar evita
errores tipográficos
El foco se coloca
automáticamente en el
cajetín de búsqueda
Hacemos cosas que funcionan

@unexpendables
6.- Reconocimiento más que memoria
El diseño se basa en reconocer más que
en recordar para permitir al usuario
interactuar de manera fácil y productiva.

Hacemos cosas que funcionan

@unexpendables
Y tú 

¿De quién
eres?
Soy el nieto de
Angelines



Hacemos cosas que funcionan

@unexpendables
No te recuerda, ni te recordará nunca…

…pero es capaz de

reconocerte



si le das la información adecuada
Hacemos cosas que funcionan

@unexpendables
Vista previa de las fuentes en
lugar de solo el nombre

Recomendaciones al escribir
código en un entorno de
desarrollo

Hacemos cosas que funcionan

@unexpendables
7.- Flexibilidad y eficiencia de uso
Se facilita y optimiza la interacción con
los usuarios cualesquiera que sean sus
características

Hacemos cosas que funcionan

@unexpendables
¿Qué prefieres?

O
Dos herramientas diferentes
para un mismo fin
Hacemos cosas que funcionan

@unexpendables
El usuario elige

una opción
u otra
según el contexto y la necesidad
Hacemos cosas que funcionan

@unexpendables
una opción
u otra
Hacemos cosas que funcionan

@unexpendables
¡Cuidado con los escenarios
improbables!
Nadie come con palillos y tenedor a la vez

Hacemos cosas que funcionan

@unexpendables
¿Un ejemplo de esto?

O

Hacemos cosas que funcionan

Ctrl+V
@unexpendables
8.- Información y diseño minimalista
El diseño evita toda información o
elemento gráfico irrelevante y sólo
incluye la información necesaria

Hacemos cosas que funcionan

@unexpendables
es ruido

Lo que no es información

Hacemos cosas que funcionan

@unexpendables
Menos es

Hacemos cosas que funcionan

Más

@unexpendables
Lo que no suma

resta
Hacemos cosas que funcionan

@unexpendables
Si lo que quieres decir es “Árbol”

¡Quítale los
adornos!
Por favor J
Hacemos cosas que funcionan

@unexpendables
Los cuatro principios del
diseño visual para
diferenciar información:
• Contraste
• Color
• Alineamiento 
• Proximidad

Hacemos cosas que funcionan

@unexpendables
¿Primera mentira?

Hacemos cosas que funcionan

@unexpendables
Existe el concepto de 

Complejidad Explícita

Hacemos cosas que funcionan

@unexpendables
Simple no es escaso, ni de baja
calidad.


Hacemos cosas que funcionan

@unexpendables
Pequeños detalles pueden marcar la
diferencia y la percepción de calidad.

Hacemos cosas que funcionan

@unexpendables
9.- Reconocimiento y recuperación de
errores
Los mensajes de error ayudan a
solucionar el problema

Hacemos cosas que funcionan

@unexpendables
¿Os acordáis de él?

¡Ay!

Hacemos cosas que funcionan

@unexpendables
A veces no tenemos dinero para pagar barandillas…

Si no podemos evitar que se caiga…

ayudémosle por lo menos

…

a levantarse

Hacemos cosas que funcionan

@unexpendables
O puedes encontrarte de pronto con…

Hacemos cosas que funcionan

@unexpendables
v

Estiven
O puedes encontrarte de pronto con…
Sigal


Hacemos cosas que funcionan

@unexpendables
Feedback inmediato
con instrucciones
precisas 

No siempre que ocurre
un error es una tragedia.
Lo importante es
recuperarse.
Hacemos cosas que funcionan

@unexpendables
10.- Ayuda y documentación
La documentación de ayuda está
adaptada a las necesidades de los
usuarios

Hacemos cosas que funcionan

@unexpendables
Y si todo lo demás falla…

…sólo entonces

reconocerá
que necesita
ayuda .
Hacemos cosas que funcionan

@unexpendables
Hay muchas maneras de hacerlo
Ayuda contextual.
Muestra un contenido u
otro en función de
dónde estemos.
Vídeos incrustados. Son
muy útiles para mejorar
los ratios de conversión.

Hacemos cosas que funcionan

@unexpendables
Tooltips.
Para mostrar consejos
sobre un elemento en
concreto.

Y la ayuda de toda la
vida. En ventana nueva
con toda la información.

Hacemos cosas que funcionan

@unexpendables
Y hasta aquí con las 10 claves

Hacemos cosas que funcionan

@unexpendables
Un
mandamiento

Hacemos cosas que funcionan

@unexpendables
Eduard Khil

Hacemos cosas que funcionan

@unexpendables
En 1976 Eduard Khil hizo un aporte impagable a la
humanidad…

http://trololololololololololo.com/

Hacemos cosas que funcionan

@unexpendables
•  Puesta en escena
perfecta
•  Estética cuidada
•  Ejecución es
técnicamente muy
profesional
•  Pero…
Hacemos cosas que funcionan

@unexpendables
¡No dice nada!
Hacemos cosas que funcionan

@unexpendables
debe ser
como una narración.
La interacción con una web


Cuando el usuario se vaya, tiene que ser capaz de

contar lo que le hemos
querido transmitir.
Hacemos cosas que funcionan

@unexpendables
¿Qué vamos a contar?

¿TROLOLO?

Hacemos cosas que funcionan

@unexpendables
Un mandamiento nuevo nos dio el Señor:

Una página, 


Un Objetivo
Hacemos cosas que funcionan

@unexpendables
Si el objetivo principal es vender…

…vamos a vender
Si el objetivo principal es regalar…

… pues todos los esfuerzos a decir
que es

Gratis y Bueno

Hacemos cosas que funcionan

@unexpendables
Pero orientados a UN Objetivo.

Y si hay varios…

…Priorizad


El % de espacio en pantalla que dedicamos a cada
objetivo, es una métrica válida
Hacemos cosas que funcionan

@unexpendables
Por qué decir Trololo, si podemos decir…




Hacemos cosas que funcionan

@unexpendables
¿Segunda mentira?

Hacemos cosas que funcionan

@unexpendables
Done is better than perfect

Hacemos cosas que funcionan

@unexpendables
Pero…
¿Podrías definirme “done”?

Hacemos cosas que funcionan

@unexpendables
Done ≠ Perfect
Done ≠ Chapuza

Hacemos cosas que funcionan

@unexpendables
Mejor

Good enough & done
Is better than
perfect but undone
Hacemos cosas que funcionan

@unexpendables
¿Y para una App?
Recurramos de nuevo a Nielsen

Hacemos cosas que funcionan

@unexpendables
Leslie
Nielsen
A nadie le importaba un comino.

Pero era nuestro comino.
Hacemos cosas que funcionan

@unexpendables
En resumen

Hacemos cosas que funcionan

@unexpendables
Veamos de nuevo la lista de heurísticos:
1.  Muestrale cómo estás y dile porqué.
2.  Háblale en su idioma, con metáforas que entienda
3.  Si se equivoca en un cruce, dale una ruta alternativa.
4.  Pon Antena 3 en el 3. (Cada cosa en su sitio).
5.  Pon barandillas en las escaleras.
6.  Que reconozca lo que muestras. No te recordará.
7.  Dale tenedor o palillos si le hacen falta. No a la vez.
8.  Si quieres decir “Árbol”, no lo pongas con adornos
9.  Si no puedes evitar que se caiga, ayúdale a levantar
10.  Y si todo falla, que pueda acceder a la ayuda

Hacemos cosas que funcionan

@unexpendables
Pero, por encima de todo…

Hacemos cosas que funcionan

@unexpendables
Sed siempre fieles al

Objetivo
Hacemos cosas que funcionan

@unexpendables
Que nadie pueda decir que 
no nos dio la mandanga
por que todo le sonaba a trololó.

Hacemos cosas que funcionan

@unexpendables
¡Muchas gracias!
Para cualquier duda o cuestión
sergio@unexpendables.com
@sergiodelacasa

www.unexpendables.com
Hacemos cosas que funcionan

@unexpendables

Más contenido relacionado

Similar a 10 claves, un mandamiento y un par de mentiras para diseñar webs y apps

5 pasos para crear un buen producto
5 pasos para crear un buen producto5 pasos para crear un buen producto
5 pasos para crear un buen productocarrasmolo
 
El diseñador a medias (con notas). UX Spain 2013
El diseñador a medias (con notas). UX Spain 2013 El diseñador a medias (con notas). UX Spain 2013
El diseñador a medias (con notas). UX Spain 2013 qweos
 
TALLER DE ANÁLISIS.docx
TALLER DE ANÁLISIS.docxTALLER DE ANÁLISIS.docx
TALLER DE ANÁLISIS.docxSariGarcs
 
TALLER DE ANÁLISIS.docx
TALLER DE ANÁLISIS.docxTALLER DE ANÁLISIS.docx
TALLER DE ANÁLISIS.docxIsabella310041
 
Bruxa Avaria - Robótica Educativa y Programación - 01.- Introducción
Bruxa Avaria - Robótica Educativa y Programación - 01.- IntroducciónBruxa Avaria - Robótica Educativa y Programación - 01.- Introducción
Bruxa Avaria - Robótica Educativa y Programación - 01.- IntroducciónManuel Guillermo Fraga Castro
 
Manual tecnico
Manual tecnicoManual tecnico
Manual tecnico604051996
 
Hacia una síntesis de diseño a partir de entender qué es modelar con software
Hacia una síntesis de diseño a partir de entender qué es modelar con softwareHacia una síntesis de diseño a partir de entender qué es modelar con software
Hacia una síntesis de diseño a partir de entender qué es modelar con softwareHernan Wilkinson
 
UX User Experience en un contexto de desarrollo de software
UX User Experience en un contexto de desarrollo de softwareUX User Experience en un contexto de desarrollo de software
UX User Experience en un contexto de desarrollo de softwareHerlency Muñoz García
 
TP de tic por Daiana
TP de tic por DaianaTP de tic por Daiana
TP de tic por Daianadaiiuu
 
Diseno de Interfaces (2011)
Diseno de Interfaces (2011)Diseno de Interfaces (2011)
Diseno de Interfaces (2011)Victor Tisnado
 

Similar a 10 claves, un mandamiento y un par de mentiras para diseñar webs y apps (20)

Portada Y Prologo
Portada Y PrologoPortada Y Prologo
Portada Y Prologo
 
Portada Y Prologo
Portada Y PrologoPortada Y Prologo
Portada Y Prologo
 
5 pasos para crear un buen producto
5 pasos para crear un buen producto5 pasos para crear un buen producto
5 pasos para crear un buen producto
 
Dev Up 2011
Dev Up 2011Dev Up 2011
Dev Up 2011
 
El diseñador a medias (con notas). UX Spain 2013
El diseñador a medias (con notas). UX Spain 2013 El diseñador a medias (con notas). UX Spain 2013
El diseñador a medias (con notas). UX Spain 2013
 
Presentacion
PresentacionPresentacion
Presentacion
 
TALLER DE ANÁLISIS.docx
TALLER DE ANÁLISIS.docxTALLER DE ANÁLISIS.docx
TALLER DE ANÁLISIS.docx
 
TALLER DE ANÁLISIS-4.docx
TALLER DE ANÁLISIS-4.docxTALLER DE ANÁLISIS-4.docx
TALLER DE ANÁLISIS-4.docx
 
TALLER DE ANÁLISIS.docx
TALLER DE ANÁLISIS.docxTALLER DE ANÁLISIS.docx
TALLER DE ANÁLISIS.docx
 
TALLER DE ANÁLISIS.docx
TALLER DE ANÁLISIS.docxTALLER DE ANÁLISIS.docx
TALLER DE ANÁLISIS.docx
 
Bruxa Avaria - Robótica Educativa y Programación - 01.- Introducción
Bruxa Avaria - Robótica Educativa y Programación - 01.- IntroducciónBruxa Avaria - Robótica Educativa y Programación - 01.- Introducción
Bruxa Avaria - Robótica Educativa y Programación - 01.- Introducción
 
Manual tecnico
Manual tecnicoManual tecnico
Manual tecnico
 
Hacia una síntesis de diseño a partir de entender qué es modelar con software
Hacia una síntesis de diseño a partir de entender qué es modelar con softwareHacia una síntesis de diseño a partir de entender qué es modelar con software
Hacia una síntesis de diseño a partir de entender qué es modelar con software
 
UX User Experience en un contexto de desarrollo de software
UX User Experience en un contexto de desarrollo de softwareUX User Experience en un contexto de desarrollo de software
UX User Experience en un contexto de desarrollo de software
 
Usabilidad Temari
Usabilidad TemariUsabilidad Temari
Usabilidad Temari
 
TP de tic por Daiana
TP de tic por DaianaTP de tic por Daiana
TP de tic por Daiana
 
Actividad 3
Actividad 3Actividad 3
Actividad 3
 
Enrique Anchundia
Enrique AnchundiaEnrique Anchundia
Enrique Anchundia
 
Diseno de Interfaces (2011)
Diseno de Interfaces (2011)Diseno de Interfaces (2011)
Diseno de Interfaces (2011)
 
Actividad3
Actividad3Actividad3
Actividad3
 

Último

contaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelocontaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelomabel perez
 
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)lemg25102006
 
Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015
Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015
Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015Miriam Tello
 
arquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2darquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2dheribertaferrer
 
decoración día del idioma, MARIPOSAS Y FESTONES
decoración día del idioma, MARIPOSAS Y FESTONESdecoración día del idioma, MARIPOSAS Y FESTONES
decoración día del idioma, MARIPOSAS Y FESTONESMairaLasso1
 
Trabajo de tesis. Arquitectura para Sanar. PaoaBorlandoFlorenciaSol.pdf
Trabajo de tesis. Arquitectura para Sanar. PaoaBorlandoFlorenciaSol.pdfTrabajo de tesis. Arquitectura para Sanar. PaoaBorlandoFlorenciaSol.pdf
Trabajo de tesis. Arquitectura para Sanar. PaoaBorlandoFlorenciaSol.pdfrociomoral626
 
Diseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzadaDiseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzadaJosAntonioFloresQuis
 
Historia de los estilos artísticos docum
Historia de los estilos artísticos documHistoria de los estilos artísticos docum
Historia de los estilos artísticos documminipuw
 
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDALANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDAdiawaraplast
 
Clase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptxClase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptxVanessaPobletePoblet
 
Arquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdfArquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdfduf110205
 
Material de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdfMaterial de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdfTpicoAcerosArequipa
 
Sesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptxSesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptxMarcosAlvarezSalinas
 
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdfINSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdfautomatechcv
 
PLANTILLA POWER POINT EL NUEVO ECUADOR EC
PLANTILLA POWER POINT EL NUEVO ECUADOR ECPLANTILLA POWER POINT EL NUEVO ECUADOR EC
PLANTILLA POWER POINT EL NUEVO ECUADOR ECESTADISTICAHDIVINAPR
 
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptxDanielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptxaurorialfonzo6
 
2DA SEMANA ABRIL proyecto nivel inicial 3 y 4 años
2DA SEMANA ABRIL proyecto nivel inicial 3 y 4 años2DA SEMANA ABRIL proyecto nivel inicial 3 y 4 años
2DA SEMANA ABRIL proyecto nivel inicial 3 y 4 añosMilagrosMnstx
 
Hospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyendaHospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyendaratc070603hmcmrha7
 
La Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel VelásquezLa Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel VelásquezRosibelVictoriaVelas
 
Afiche Didáctico-Temático de la Modernidad
Afiche Didáctico-Temático de la ModernidadAfiche Didáctico-Temático de la Modernidad
Afiche Didáctico-Temático de la ModernidadDiosymarSuarez
 

Último (20)

contaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelocontaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelo
 
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
 
Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015
Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015
Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015
 
arquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2darquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2d
 
decoración día del idioma, MARIPOSAS Y FESTONES
decoración día del idioma, MARIPOSAS Y FESTONESdecoración día del idioma, MARIPOSAS Y FESTONES
decoración día del idioma, MARIPOSAS Y FESTONES
 
Trabajo de tesis. Arquitectura para Sanar. PaoaBorlandoFlorenciaSol.pdf
Trabajo de tesis. Arquitectura para Sanar. PaoaBorlandoFlorenciaSol.pdfTrabajo de tesis. Arquitectura para Sanar. PaoaBorlandoFlorenciaSol.pdf
Trabajo de tesis. Arquitectura para Sanar. PaoaBorlandoFlorenciaSol.pdf
 
Diseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzadaDiseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzada
 
Historia de los estilos artísticos docum
Historia de los estilos artísticos documHistoria de los estilos artísticos docum
Historia de los estilos artísticos docum
 
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDALANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
 
Clase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptxClase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptx
 
Arquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdfArquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdf
 
Material de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdfMaterial de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdf
 
Sesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptxSesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptx
 
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdfINSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
 
PLANTILLA POWER POINT EL NUEVO ECUADOR EC
PLANTILLA POWER POINT EL NUEVO ECUADOR ECPLANTILLA POWER POINT EL NUEVO ECUADOR EC
PLANTILLA POWER POINT EL NUEVO ECUADOR EC
 
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptxDanielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
 
2DA SEMANA ABRIL proyecto nivel inicial 3 y 4 años
2DA SEMANA ABRIL proyecto nivel inicial 3 y 4 años2DA SEMANA ABRIL proyecto nivel inicial 3 y 4 años
2DA SEMANA ABRIL proyecto nivel inicial 3 y 4 años
 
Hospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyendaHospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyenda
 
La Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel VelásquezLa Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel Velásquez
 
Afiche Didáctico-Temático de la Modernidad
Afiche Didáctico-Temático de la ModernidadAfiche Didáctico-Temático de la Modernidad
Afiche Didáctico-Temático de la Modernidad
 

10 claves, un mandamiento y un par de mentiras para diseñar webs y apps

  • 1. 10 claves, un mandamiento y un par de mentiras para diseñar webs y apps Hacemos cosas que funcionan - www.unexpendables.com Hacemos cosas que funcionan @unexpendables
  • 2. Índice I.  II.  III.  IV.  V.  Presentación Pero ¿Esto qué es? ¿Por qué 10 claves? 10 preguntas que debe responder todo proyecto 1 Mandamiento 2 Hacemos cosas que funcionan @unexpendables
  • 3. Presentación Hacemos cosas que funcionan @unexpendables
  • 4. Hola, soy Sergio de la Casa @sergiodelacasa, CEO & UX lead Unexpendables Llevo diseñando productos y soluciones desde el siglo pasado para Panda, Gamesa, Sherpa y otra gente… Hacemos cosas que funcionan @unexpendables
  • 5. Hacemos cosas que funcionan @unexpendables
  • 6. Sorprendentemente la fregona es un invento de los años 50 Hacemos cosas que funcionan @unexpendables
  • 7. Era tan fácil como atar el trapo de fregar a un palo Hacemos cosas que funcionan @unexpendables
  • 8. Pensamos, diseñamos y fabricamos los palos que convierten los trapos en flamantes fregonas Hacemos cosas que funcionan @unexpendables
  • 9. Pero…¿Esto qué es? Hacemos cosas que funcionan @unexpendables
  • 10. NO somos una ONG J Los usuarios felices están bien, pero sólo porque nos aportan beneficio Hacemos cosas que funcionan @unexpendables
  • 11. La experiencia de usuario es un un medio, no un objetivo en si mismo. Un producto bien diseñado tiene que ser usable. Pero no por ser usable es un buen producto. Hacemos cosas que funcionan @unexpendables
  • 12. Razón número 1 : Ignorar a los clientes Hacemos cosas que funcionan @unexpendables
  • 13. Según Forrester, un producto debe ser: Deseable Usable Útil Hacemos cosas que funcionan @unexpendables
  • 14. ¿Por qué 10 Claves? Hacemos cosas que funcionan @unexpendables
  • 15. Jakob Nielsen Gurú Hacemos cosas que funcionan @unexpendables
  • 16. En 1990 Nielsen hizo un estudio sobre los 249 problemas de usabilidad más comunes. Observó que se podían agrupar en 10 categorías Hacemos cosas que funcionan @unexpendables
  • 17. …estableció entonces 10 principios heurísticos Uno por cada categoría de error Hacemos cosas que funcionan @unexpendables
  • 18. Los heurísticos NO son patrones de diseño Son más bien Reglas de Oro Un catálogo de buenas prácticas Hacemos cosas que funcionan @unexpendables
  • 19. Cumplirlos, no garantiza el éxito… …pero no hacerlo garantiza un fracaso casi seguro. Recuerda: Los heurísticos nacen como respuesta a los problemas más comunes de los usuarios. Hacemos cosas que funcionan @unexpendables
  • 20. Y sobre todo, se apoyan en números ü 249 problemas de usabilidad. ü 10 heurísticos. ü 318 subheurísticos. Esto significa que… Hacemos cosas que funcionan @unexpendables
  • 21. …No son opinables J ¡Palabra de Jakob! Hacemos cosas que funcionan @unexpendables
  • 22. Pero… ¿Sólo 10? Desde 1990 la usabilidad se ha hecho mayor y se han identificado nuevas reglas que añadir a la lista. No obstante, en la lista original siguen siendo 10. Hacemos cosas que funcionan @unexpendables
  • 23. 10 preguntas que debe responder todo proyecto Hacemos cosas que funcionan @unexpendables
  • 24. Con ustedes, la famosa lista de heurísticos: 1.  Visibilidad del estado del sistema 2.  Correspondencia entre el sistema y el mundo real 3.  Control y libertad del usuario 4.  Consistencia y estándares 5.  Prevención de errores 6.  Reconocimiento más que memoria 7.  Flexibilidad y eficiencia de uso 8.  Información y diseño minimalista 9.  Reconocimiento y recuperación de errores 10. Ayuda y documentación Hacemos cosas que funcionan @unexpendables
  • 25. Pero vayamos por partes… Hacemos cosas que funcionan @unexpendables
  • 26. 1.- Visibilidad del estado del sistema El sistema siempre debe mantener informado al usuario acerca de lo que está pasando, e informarle de cualquier cambio en un tiempo razonable Hacemos cosas que funcionan @unexpendables
  • 27. Siempre informado del estado de su sistema… Ejem, ¿Te ocurre algo sistema?... Hacemos cosas que funcionan @unexpendables
  • 28. “¡Tú sabrás lo que has hecho!” ¡MAL! Hacemos cosas que funcionan @unexpendables
  • 29. “Todavía no te has dado cuenta de que ¡Los platos no se lavan solos!” ¡Mucho mejor! Hacemos cosas que funcionan @unexpendables
  • 30. Y no olvidarse de informar de cualquier cambio… …en un tiempo razonable Hacemos cosas que funcionan @unexpendables
  • 31. Algunos ejemplos reales… Al pulsar, el botón se sustituye por una barra de progreso hasta que finaliza el proceso Se muestra un mensaje al finalizar una tarea La fortaleza de la contraseña se muestra en tiempo real Hacemos cosas que funcionan @unexpendables
  • 32. 2.- Correspondencia entre el sistema y el mundo real El diseño está adaptado al mundo real de los usuarios, su lenguaje, conocimientos, etc Hacemos cosas que funcionan @unexpendables
  • 33. Es necesario manejar conceptos y metáforas familiares al usuario Una web… ¡Es como un toro! Hacemos cosas que funcionan @unexpendables
  • 34. Todos los días: Archivos Los guardamos en… Carpetas Manejamos… Tiramos cosas a la… Hacemos cosas que funcionan Papelera @unexpendables
  • 35. En iTunes La metáfora de una biblioteca encaja con el modelo mental de los usuarios. Contiene música, películas, audiolibros… Hacemos cosas que funcionan @unexpendables
  • 36. Skeuomorfismo Hacemos cosas que funcionan @unexpendables
  • 37. 3.- Control y libertad del usuario Los usuarios a menudo eligen opciones por error. Hay que facilitarles una salida de emergencia. Permitir deshacer y rehacer. Hacemos cosas que funcionan @unexpendables
  • 38. En la siguiente rotonda continúe recto, segunda salida Hacemos cosas que funcionan @unexpendables
  • 39. a la … izquierda ha dicho, no? Hacemos cosas que funcionan @unexpendables
  • 40. recalculando ruta… … por tercera vez Hacemos cosas que funcionan @unexpendables
  • 41. A esta opción de búsqueda es fácil acceder, introducir información, realizar una búsqueda y cancelarla Está marcado claramente dónde está el usuario y hacia dónde puede ir Hacemos cosas que funcionan @unexpendables
  • 42. Y los famosos Deshacer y Rehacer Hacemos cosas que funcionan @unexpendables
  • 43. 4.- Consistencia y estándares El diseño es consistente internamente y con los estándares externos Hacemos cosas que funcionan @unexpendables
  • 44. ¡Mi pueblo! Hacemos cosas que funcionan @unexpendables
  • 45. ¡Mi abuela! Hacemos cosas que funcionan @unexpendables
  • 46. De mi abuela he aprendido muchas cosas… “Antena 3 en el tres” Es así de simple Hacemos cosas que funcionan @unexpendables
  • 47. Gmail: Adopta el mismo estándar que otros clientes de email existentes Office 12: Idéntico estilo en las toolbars e iguales opciones en los menús de todos los productos Hacemos cosas que funcionan @unexpendables
  • 48. 5.- Prevención de errores El diseño debe prevenir los errores de los usuarios antes de que los cometan Hacemos cosas que funcionan @unexpendables
  • 49. = + ¡Falso! Hacemos cosas que funcionan @unexpendables
  • 50. + Hacemos cosas que funcionan = @unexpendables
  • 51. Siempre que diseñes una escalera… …ponle una barandilla (La gente intentará bajar corriendo) Hacemos cosas que funcionan @unexpendables
  • 52. Algunos ejemplos reales… Mostrar la acción primaria de forma más relevante (Ley de Fitts) El auto-recomendar evita errores tipográficos El foco se coloca automáticamente en el cajetín de búsqueda Hacemos cosas que funcionan @unexpendables
  • 53. 6.- Reconocimiento más que memoria El diseño se basa en reconocer más que en recordar para permitir al usuario interactuar de manera fácil y productiva. Hacemos cosas que funcionan @unexpendables
  • 54. Y tú ¿De quién eres? Soy el nieto de Angelines Hacemos cosas que funcionan @unexpendables
  • 55. No te recuerda, ni te recordará nunca… …pero es capaz de reconocerte si le das la información adecuada Hacemos cosas que funcionan @unexpendables
  • 56. Vista previa de las fuentes en lugar de solo el nombre Recomendaciones al escribir código en un entorno de desarrollo Hacemos cosas que funcionan @unexpendables
  • 57. 7.- Flexibilidad y eficiencia de uso Se facilita y optimiza la interacción con los usuarios cualesquiera que sean sus características Hacemos cosas que funcionan @unexpendables
  • 58. ¿Qué prefieres? O Dos herramientas diferentes para un mismo fin Hacemos cosas que funcionan @unexpendables
  • 59. El usuario elige una opción u otra según el contexto y la necesidad Hacemos cosas que funcionan @unexpendables
  • 60. una opción u otra Hacemos cosas que funcionan @unexpendables
  • 61. ¡Cuidado con los escenarios improbables! Nadie come con palillos y tenedor a la vez Hacemos cosas que funcionan @unexpendables
  • 62. ¿Un ejemplo de esto? O Hacemos cosas que funcionan Ctrl+V @unexpendables
  • 63. 8.- Información y diseño minimalista El diseño evita toda información o elemento gráfico irrelevante y sólo incluye la información necesaria Hacemos cosas que funcionan @unexpendables
  • 64. es ruido Lo que no es información Hacemos cosas que funcionan @unexpendables
  • 65. Menos es Hacemos cosas que funcionan Más @unexpendables
  • 66. Lo que no suma resta Hacemos cosas que funcionan @unexpendables
  • 67. Si lo que quieres decir es “Árbol” ¡Quítale los adornos! Por favor J Hacemos cosas que funcionan @unexpendables
  • 68. Los cuatro principios del diseño visual para diferenciar información: • Contraste • Color • Alineamiento • Proximidad Hacemos cosas que funcionan @unexpendables
  • 69. ¿Primera mentira? Hacemos cosas que funcionan @unexpendables
  • 70. Existe el concepto de Complejidad Explícita Hacemos cosas que funcionan @unexpendables
  • 71. Simple no es escaso, ni de baja calidad. Hacemos cosas que funcionan @unexpendables
  • 72. Pequeños detalles pueden marcar la diferencia y la percepción de calidad. Hacemos cosas que funcionan @unexpendables
  • 73. 9.- Reconocimiento y recuperación de errores Los mensajes de error ayudan a solucionar el problema Hacemos cosas que funcionan @unexpendables
  • 74. ¿Os acordáis de él? ¡Ay! Hacemos cosas que funcionan @unexpendables
  • 75. A veces no tenemos dinero para pagar barandillas… Si no podemos evitar que se caiga… ayudémosle por lo menos … a levantarse Hacemos cosas que funcionan @unexpendables
  • 76. O puedes encontrarte de pronto con… Hacemos cosas que funcionan @unexpendables
  • 77. v Estiven O puedes encontrarte de pronto con… Sigal Hacemos cosas que funcionan @unexpendables
  • 78. Feedback inmediato con instrucciones precisas No siempre que ocurre un error es una tragedia. Lo importante es recuperarse. Hacemos cosas que funcionan @unexpendables
  • 79. 10.- Ayuda y documentación La documentación de ayuda está adaptada a las necesidades de los usuarios Hacemos cosas que funcionan @unexpendables
  • 80. Y si todo lo demás falla… …sólo entonces reconocerá que necesita ayuda . Hacemos cosas que funcionan @unexpendables
  • 81. Hay muchas maneras de hacerlo Ayuda contextual. Muestra un contenido u otro en función de dónde estemos. Vídeos incrustados. Son muy útiles para mejorar los ratios de conversión. Hacemos cosas que funcionan @unexpendables
  • 82. Tooltips. Para mostrar consejos sobre un elemento en concreto. Y la ayuda de toda la vida. En ventana nueva con toda la información. Hacemos cosas que funcionan @unexpendables
  • 83. Y hasta aquí con las 10 claves Hacemos cosas que funcionan @unexpendables
  • 84. Un mandamiento Hacemos cosas que funcionan @unexpendables
  • 85. Eduard Khil Hacemos cosas que funcionan @unexpendables
  • 86. En 1976 Eduard Khil hizo un aporte impagable a la humanidad… http://trololololololololololo.com/ Hacemos cosas que funcionan @unexpendables
  • 87. •  Puesta en escena perfecta •  Estética cuidada •  Ejecución es técnicamente muy profesional •  Pero… Hacemos cosas que funcionan @unexpendables
  • 88. ¡No dice nada! Hacemos cosas que funcionan @unexpendables
  • 89. debe ser como una narración. La interacción con una web Cuando el usuario se vaya, tiene que ser capaz de contar lo que le hemos querido transmitir. Hacemos cosas que funcionan @unexpendables
  • 90. ¿Qué vamos a contar? ¿TROLOLO? Hacemos cosas que funcionan @unexpendables
  • 91. Un mandamiento nuevo nos dio el Señor: Una página, Un Objetivo Hacemos cosas que funcionan @unexpendables
  • 92. Si el objetivo principal es vender… …vamos a vender Si el objetivo principal es regalar… … pues todos los esfuerzos a decir que es Gratis y Bueno Hacemos cosas que funcionan @unexpendables
  • 93. Pero orientados a UN Objetivo. Y si hay varios… …Priorizad El % de espacio en pantalla que dedicamos a cada objetivo, es una métrica válida Hacemos cosas que funcionan @unexpendables
  • 94. Por qué decir Trololo, si podemos decir… Hacemos cosas que funcionan @unexpendables
  • 95. ¿Segunda mentira? Hacemos cosas que funcionan @unexpendables
  • 96. Done is better than perfect Hacemos cosas que funcionan @unexpendables
  • 97. Pero… ¿Podrías definirme “done”? Hacemos cosas que funcionan @unexpendables
  • 98. Done ≠ Perfect Done ≠ Chapuza Hacemos cosas que funcionan @unexpendables
  • 99. Mejor Good enough & done Is better than perfect but undone Hacemos cosas que funcionan @unexpendables
  • 100. ¿Y para una App? Recurramos de nuevo a Nielsen Hacemos cosas que funcionan @unexpendables
  • 101. Leslie Nielsen A nadie le importaba un comino. Pero era nuestro comino. Hacemos cosas que funcionan @unexpendables
  • 102. En resumen Hacemos cosas que funcionan @unexpendables
  • 103. Veamos de nuevo la lista de heurísticos: 1.  Muestrale cómo estás y dile porqué. 2.  Háblale en su idioma, con metáforas que entienda 3.  Si se equivoca en un cruce, dale una ruta alternativa. 4.  Pon Antena 3 en el 3. (Cada cosa en su sitio). 5.  Pon barandillas en las escaleras. 6.  Que reconozca lo que muestras. No te recordará. 7.  Dale tenedor o palillos si le hacen falta. No a la vez. 8.  Si quieres decir “Árbol”, no lo pongas con adornos 9.  Si no puedes evitar que se caiga, ayúdale a levantar 10.  Y si todo falla, que pueda acceder a la ayuda Hacemos cosas que funcionan @unexpendables
  • 104. Pero, por encima de todo… Hacemos cosas que funcionan @unexpendables
  • 105. Sed siempre fieles al Objetivo Hacemos cosas que funcionan @unexpendables
  • 106. Que nadie pueda decir que no nos dio la mandanga por que todo le sonaba a trololó. Hacemos cosas que funcionan @unexpendables
  • 107. ¡Muchas gracias! Para cualquier duda o cuestión sergio@unexpendables.com @sergiodelacasa www.unexpendables.com Hacemos cosas que funcionan @unexpendables