Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

33
PATRONES DE DISEÑO WEB Alex Naupay El INICIO DEL CAMINO A LA SOLUCIÓN

description

Descripción y consejos de ALGUNOS patrones de diseño web (categoría Obtención de información - Getting input). Este es un resumen del documento de texto disponible en: http://www.slideshare.net/AlexNaupay/patrones-de-diseo-web-getting-input-obtencin-de-informacin

Transcript of Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

Page 1: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

PATRONES DE DISEÑO WEB

Alex Naupay

El INICIO DEL CAMINO A LA SOLUCIÓN

Page 2: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

Agenda

Patrones de diseño

Registro de cuenta

Registro Lento (Lazy registration)

Votar para promover

Obtención de información

Page 3: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

PATRÓN

DE DISEÑO

Page 4: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

PATRÓN DE DISEÑO

o Los patrones de diseño son la base para las

soluciones a problemas comunes.

o Conjunto de recomendaciones.

o Pieza de conocimiento: problema, contexto,

solución, ventajas, desventajas, ..

Pretensiones Reutilizar la experiencia

Formar un vocabulario común

Estandarizar el modo de realizar un diseño

Facilitar el aprendizaje a las nuevas generaciones

Page 5: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

o Son un punto de partida, no un destino.

o No están bien o mal, son más útiles o

menos útiles.

o No son una solución en sí misma.

o No son dogmas.

o Son producto de la experiencia.

A tener en cuenta

ww

w.f

lickr.

co

m/p

ho

tos/h

an

sp

oo

/36

58

28

76

58

Page 6: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

ÁMBITOS DE APLICACIÓN

Gran éxito en el desarrollo de software

Patrones de diseño de interfaces de usuario

o Intentan definir las mejores formas de construir

interfaces para la interacción hombre-

computadora.

o Buscan la reutilización de interfaces eficaces y

un manejo óptimo de recursos. Haciendo más

eficaz el consumo del tiempo en diseño.

Page 7: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

REGISTRO

DE CUENTA

Page 8: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

REGISTRO DE CUENTA

Problema

Se quiere conocer al usuario

Usos

Proteger el acceso al sitio.

La información a mostrar depende de quién es

el usuario.

• Ubicación geográfica, zona horaria, edad,

intereses, interacciones anteriores, etc.

Page 9: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

Solución

Permitir al usuario registrar una cuenta en el sitio web

para recordar sus detalles y mostrarle contenidos

personalizados.

Razón fundamental

Saber quién usa el sistema

Saber la frecuencia de visita

Se sabe que hacen en el sitio web

Se podrían diferenciar precios, contenidos, etc.

Puede ofrecer algo diferente a usuarios habituales

Almacenar más información para usarlo después

REGISTRO DE CUENTA

Page 10: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

• Prefieren el anonimato.

• Cada campo es un impedimento

capaz de provocar abandono.

• Completar es desagradable

Formularios en la web, recomendaciones generales de diseño http://www.alzado.org/articulo.php?id_art=50

Preferimos el anonimato

Page 11: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

Solo pida información absolutamente necesaria

Infiera información

Pida datos una sola vez

Trate de reutilizar campos

Agrupe campos lógicamente. Aconsejable los obligatorios

primero

Libera la carga visual

No tenemos

tiempo

http

://w

ww

.flic

kr.

co

m/p

ho

tos/b

ein

gh

um

an

fore

ve

r/8

22

99

51

88

3

Page 12: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

Recomendaciones El botón de registro debe ser

claro y llamativo.

Ubicar el botón en lugares clave.

Page 13: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

Proporciona retroalimentación al usuario.

Retroalimente sobre disponibilidad de usuario instantáneamente.

Proporcione un medidor de seguridad de contraseña.

La fortaleza de la contraseña, depende de la necesidad de

protección.

Page 14: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

http

://w

ww

.flic

kr.

co

m/p

ho

tos/6

58

19

19

5@

N0

0/9

13

16

96

83

6

Nunca hagas

pensar a tu

usuario

Describa detalladamente como llenar el formulario.

Redacte instrucciones en forma positiva.

Usa lenguaje sencillo y claro. http

://w

ww

.flic

kr.

co

m/p

ho

tos/e

co

gre

en

tech

co

/56

33

65

58

55

Page 15: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

1

2

3

Page 16: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

1

3

2

Page 17: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

× Muchos campos

× Diferentes

idiomas

× Obligatorios

× Teléf. y celular

× FEHLT?

× 2 direcciones

× No infiere postal

× Agrupación

Así No

Page 18: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

REGISTRO

LENTO

Page 19: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

REGISTRO LENTO

Problema

El usuario quiere usar y probar el sitio sin

registrarse formalmente.

Usos

Navegación sin registro.

Registro es un gran paso para el usuario.

Probar y comparar con otras alternativas.

El registro involucra dinero.

No ejercer presión sobre el usuario.

Idea de tiempo.

Page 20: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

Deja Interactuar

al usuario

Page 21: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

REGISTRO LENTO

Solución

o Permita que interactúe con el sistema y

posponga el registro.

o Versión ligera – carros de compra.

o Versión pesada – crear una cuenta anónima.

Razón fundamental

Incentiva para que te den sus datos.

El servicio debe valer la pena.

Ofréceles protección y seguridad.

Page 22: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

Jamendo.com

Page 23: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

http://spanish.jotform.com/

Page 24: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

VOTAR PARA

PROMOVER

Page 25: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

VOTAR PARA PROMOVER

Problema

El usuario quiere promover un contenido para

ayudar a decidir cual es mejor.

Usos

Los usuarios eligen democráticamente la

calidad.

Confianza en la subjetividad del usuario.

Gran comunidad.

Page 26: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

VOTAR PARA PROMOVER

Solución

o Mecanismo de votación • Votación, historial y posterior cambio.

• Retroalimente.

o Mostrar los números • Popularidad, comparación.

o Resuma los populares

o Favorezca los populares

Page 27: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

VOTAR PARA PROMOVER

Razón fundamental

Comunidad participativa

Potente detector de contenidos populares

Potente promovedor de contenidos

recientes

Evita contratar revisores profesionales

Page 28: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

VOTAR PARA PROMOVER

A tener en cuenta

o El usuario es el centro, pros y contras.

o Opinión subjetiva de calidad.

o Popularidad = Calidad ?

o Medidas contra el mal uso • Limita el numero de votos.

• Atento a la actividad maliciosa y al mal humor.

• Votos con diferente valor.

Page 29: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

La multitud no tiene sabiduría

¿Sabiduría de las

multitudes?

o Basan su voto a partir

de otros.

o La comunicación entre

la multitud afecta el

juicio cualitativo.

La multitud no

tiene Sabiduría.

Page 30: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

Amazon.com

Page 31: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

votanoticias.com

Page 32: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación
Page 33: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación

RECORDAR