Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación
-
Upload
alex-naupay -
Category
Internet
-
view
190 -
download
3
description
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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/1.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/2.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/3.jpg)
PATRÓN
DE DISEÑO
![Page 4: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/4.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/5.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/6.jpg)
Á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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/7.jpg)
REGISTRO
DE CUENTA
![Page 8: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/8.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/9.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/10.jpg)
• 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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/11.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/12.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/13.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/14.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/15.jpg)
1
2
3
![Page 16: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/16.jpg)
1
3
2
![Page 17: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/17.jpg)
× 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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/18.jpg)
REGISTRO
LENTO
![Page 19: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/19.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/20.jpg)
Deja Interactuar
al usuario
![Page 21: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/21.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/22.jpg)
Jamendo.com
![Page 23: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/23.jpg)
http://spanish.jotform.com/
![Page 24: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/24.jpg)
VOTAR PARA
PROMOVER
![Page 25: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/25.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/26.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/27.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/28.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/29.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/30.jpg)
Amazon.com
![Page 31: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/31.jpg)
votanoticias.com
![Page 32: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/32.jpg)
![Page 33: Patrones de Diseño Web (Getting Input - Obtención de Información) - Presentación](https://reader033.fdocuments.net/reader033/viewer/2022052321/5497d579ac7959482e8b5394/html5/thumbnails/33.jpg)
RECORDAR