how to improve the ux in your sites, liferay madrid symposium2014

37
Buenas prácticas para proporcionar una gran experiencia de usuario en tu Portal Juan Hidalgo UX Designer

Upload: juan-hidalgo-reina

Post on 22-Jul-2015

133 views

Category:

Design


2 download

TRANSCRIPT

Page 1: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Buenas prácticas para proporcionar una gran experiencia de usuario en tu Portal !!Juan Hidalgo UX Designer

Page 2: How to improve the UX in your Sites, Liferay Madrid Symposium2014

- Navegación 

- Legibilidad 

- Simple

- Personas

- Espacios blancos - Photoshop 6

Page 3: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Navegación 

Page 4: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Navegación 

Page 5: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Navegación 

Page 6: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Navigation 

Page 7: How to improve the UX in your Sites, Liferay Madrid Symposium2014
Page 8: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Navegación 

Page 9: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Legibilidad 

20% / 28%

Page 10: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Estructuración

En esto descubrieron treinta o cuarenta molinos de viento que hay en aquel campo, y así como Don Quijote los vió, dijo a su escudero: la ventura va guiando nuestras cosas mejor de lo que acertáramos a desear; porque ves allí, amigo Sancho Panza, donde se descubren treinta o poco más desaforados gigantes con quien pienso hacer batalla, y quitarles a todos las vidas, con cuyos despojos comenzaremos a enriquecer: que esta es buena guerra, y es gran servicio de Dios quitar tan mala simiente de sobre la faz de la tierra. ¿Qué gigantes? dijo Sancho Panza.

Capítulo octavo 

Del buen suceso que el valeroso Don Quijote tuvo en la espantable y jamás imaginada aventura de los molinos de viento, con otros sucesos dignos de felice recordación

Espacios

En esto descubrieron treinta o cuarenta molinos de viento que hay en aquel campo, y así como Don Quijote los vió, dijo a su escudero: la ventura va guiando…

Don Quijote

En esto descubrieron treinta o cuarenta molinos de viento que hay en aquel campo, y así como Don Quijote los vió.

En esto descubrieron treinta o cuarenta molinos de viento que hay en aquel campo, y así como Don Quijote los vió, dijo a su escudero: la ventura va guiando…

Don Quijote

En esto descubrieron treinta o cuarenta molinos de viento que hay en aquel campo, y así como Don Quijote los vió.

Page 11: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Anchura de Párrafos

En esto descubrieron treinta o cuarenta molinos de viento que hay en aquel campo, y así como Don Quijote los vió, dijo a su escudero: la ventura va guiando nuestras cosas mejor de lo que acertáramos a desear; porque ves allí, amigo Sancho Panza, donde se descubren treinta o poco más desaforados gigantes con quien pienso hacer batalla, y quitarles a todos las vidas, con cuyos despojos comenzaremos a enriquecer: que esta es buena guerra, y es gran servicio de Dios quitar tan mala simiente de sobre la faz de la tierra. ¿Qué gigantes? dijo Sancho Panza.

characters7010-­‐12

pixeles20words

500pixeles

En esto descubrieron treinta o cuarenta molinos de viento que hay en aquel campo, y así como Don Quijote los vió, dijo a su escudero: la ventura va guiando nuestras cosas mejor de lo que acertáramos a desear; porque

En esto descubrieron treinta o cuarenta molinos de viento que hay en aquel campo, y así como Don Quijote los vió, dijo a su escudero: la ventura va guiando nuestras cosas mejor de lo que acertáramos a desear; porque ves allí, amigo Sancho Panza, donde se descubren treinta o poco más desaforados gigantes con quien pienso hacer batalla, y quitarles a todos las vidas, con cuyos despojos comenzaremos a enriquecer: que esta es buena guerra, y es gran servicio de Dios quitar tan mala simiente de sobre la faz de la tierra. ¿Qué gigantes? dijo Sancho Panza.

Page 12: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Separación entre líneas

Page 13: How to improve the UX in your Sites, Liferay Madrid Symposium2014

http://www.pearsonified.com/typography/

Separación entre líneas

Page 14: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Mayúsculas o Minúsculas

Page 15: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Iconos versus etiquetas

Page 16: How to improve the UX in your Sites, Liferay Madrid Symposium2014

La persona, interpreta y supone mas que lee. !- https://medium.com/@jhidalgoreina

Page 17: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Simple

Tiempo Hicks

Chunking Fitts

Page 18: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Tiempo

47%in 2 seconds

40%more than 3 seconds

7%reduction (1 second)

Page 19: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Fitts´ Law

El tiempo requerido para mover el cursor a un objetivo crece logarítmicamente con la distancia y disminuye con el aumento de tamaño del objetivo.

Page 20: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Fitts´ Law

Diseñador

Desarrollador

Form

Nombre Apellidos

EnviarCancelar

Page 21: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Fitts´ Law

Diseñador

Desarrollador

Form

Nombre Apellidos

Enviar Cancelar

Page 22: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Chunking

4 -+

Page 23: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Chunking

llave perro lápiz bombilla escoba

5 {30s

10{30s

llave perro lápiz bombilla escoba cielo zapato sentimiento azul jardin

Page 24: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Chunking

llave perro lápiz bombilla escoba cielo zapato sentimiento azul jardin

10{3{3{4{

llave perro lápiz

bombilla escoba cielo

zapato sentimiento azul jardin

Page 25: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Hicks´ Law

El tiempo que se tarda en tomar una decisión aumenta a medida que el número de alternativas aumenta.

Page 26: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Hicks´ Law

Page 27: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Hicks´ Law

Page 28: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Personas

Form

Cumpleaños

Enviar Cancelar

Teléfono

22/10/2014

22/oct/2014

22/oct/14

22 - Octubre - 2014

123456789

132/465/798

(34) 123 456 789

34 - 123 - 456 -789

Form

Cumpleaños

Enviar Cancelar

Teléfono

DD/MM/AAAA

Ej. +34 123 456 789

Page 29: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Personas

Page 30: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Espacios en Blanco

Horror Vacui = Miedo al espacio vacío

Existe una tendencia a llenar de objetos,

funcionalidádes, iconos, y cualquier tipo de

ornamentación, cualquier espacio vacío.

Page 31: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Horror Vacui, es la forma mas educada de decir: …dejad de poner “chorradas" al diseño…

Espacios en Blanco

Page 32: How to improve the UX in your Sites, Liferay Madrid Symposium2014

“Tener mas espacio en un interfaz, NO  significa utilizarlo, como si no hubiera mañana” !-Proverbio UX

Espacios en Blanco

Page 33: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Espacios en Blanco

Page 34: How to improve the UX in your Sites, Liferay Madrid Symposium2014
Page 35: How to improve the UX in your Sites, Liferay Madrid Symposium2014
Page 36: How to improve the UX in your Sites, Liferay Madrid Symposium2014

Photoshop

Page 37: How to improve the UX in your Sites, Liferay Madrid Symposium2014

tUSERS, USERS, USERS…..

My comments are based on my experience. It´s possible that it goes against industry ¨best practices¨

Juan Hidalgo UX Designer at Liferay Inc.

!@jhidalgoreina