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

2013

Alex Naupay
Universidad Nacional Mayor de San Marcos
08/11/2013

INTRODUCCIÓN
Antes de empezar a ver algunos patrones usados en el diseño web, en concreto
patrones para la obtención de información, vamos a definir brevemente que es un
patrón de diseño, que se pretende al usarlos, lo que hay que tener en cuenta al hablar
sobre patrones y su aplicación a diferentes ámbitos.
¿Qué es un patrón de diseño?
Los patrones de diseño son la base para las soluciones a problemas comunes en el
desarrollo de software y otros ámbitos referentes al diseño de interacción o interfaces
(Wikipedia).
Un patrón de diseño es un conjunto de recomendaciones que describen como afrontar
tareas y solucionar problemas que surgen durante el desarrollo de software.
Los patrones de diseño aportan una posible solución a un problema concreto,
usualmente relacionado con la estructura básica de una aplicación. Teniendo en cuenta las
características de la aplicación a desarrollar y el tipo de problemas detectados durante el
diseño de dicha aplicación, es posible determinar qué patrón de diseño será el más
apropiado para resolver dichos problemas.
Un patrón es una pieza de conocimiento que incluye información sobre un problema y
su solución en un contexto, con sus ventajas e inconvenientes y toda la información
necesaria para tener un buen entendimiento de los aspectos relacionados con él.
Al usar patrones de diseño se pretende:
Evitar la reiteración en la búsqueda de soluciones a problemas ya conocidos y
solucionados anteriormente. ¡Reutilizar la experiencia!
 Formalizar un vocabulario común entre diseñadores.
 Estandarizar el modo en que se realiza el diseño.
 Facilitar el aprendizaje de las nuevas generaciones de diseñadores condensando
conocimiento ya existente.


Asimismo, tenemos que tener en cuenta que:
 Los patrones son un punto de partida, no un destino.
Los miembros del mentado “Banda de los cuatro”, autores del libro ‘Design
Patterns’ que recoge los primeros 23 patrones de diseño, destacan que los
patrones no son un destino sino un punto de partida.
 Los patrones no están bien o mal, sino que son más o menos útiles


2013

PATRONES DE OBTENCIÓN DE INFORMACIÓN [DISEÑO WEB]

 Un patrón de diseño no es una solución en sí mismo, sino la documentación de la
forma en que se construyeron soluciones a problemas similares en el pasado, lo
cual permite una mejor gestión de la experiencia y transferencia de conocimientos
 Los patrones de diseño no son dogmas que deben ser aceptados sin cuestionarlos.
 No son abstracciones teóricas, sino que están fundados sobre una fuerte base
práctica y pragmática, producto de la experiencia.
No es obligatorio utilizar los patrones, solo es aconsejable en el caso de tener el mismo
problema o similar que soluciona el patrón, siempre teniendo en cuenta que en un caso
particular puede no ser aplicable. Abusar o forzar el uso de los patrones puede ser un
error.
Ámbitos de aplicación de patrones
Además de su aplicación directa en la construcción de software en general, y derivado
precisamente del gran éxito que han tenido, los patrones de diseño han sido aplicados a
múltiples ámbitos, entre ellos al diseño de interacción o interfaces de usuario.




Los patrones de interacción buscan la reutilización de interfaces eficaces y un
manejo óptimo de los recursos de las páginas web, haciendo más eficaz el consumo
de tiempo en el diseño del sitio web y permitiendo a los programadores novatos
adquirir más experiencia.
Patrones de interfaces de usuario, esto es, aquellos que intentan definir las
mejores formas de construir interfaces hombre-máquina.

PATRONES DE DISEÑO EN LA WEB
I. REGISTRO DE USUARIO


Problema
Se quiere conocer al usuario con el fin de ofrecerle contenido personalizado o
la oportunidad de llevar a cabo una compra.



Usos
 Cuando desea proteger el acceso a los contenidos del sitio web. Solo
usuarios registrados pueden ver los contenidos.
 Cuando la información a mostrar depende de quién es el usuario. Esto
dependerá de la región geográfica, zona horaria, edad, intereses e
incluso las interacciones anteriores del sitio.
 Cuando desea proteger la información del usuario.


2013




Solución
Permita que el usuario registre una cuenta, a través de un formulario, en su
sitio web para que el sistema pueda recordar detalles acerca de él y utilizarlo
para personalizar el contenido a mostrar.
Razón fundamental
Una vez registrado la cuenta, el sitio web puede ofrecer contenido
personalizado a sus usuarios. El registrar una cuenta permite recordar detalles
acerca del usuario como preferencias, intereses, direcciones de envió y
facturación y otros. Además de contar con los siguientes beneficios:
Se sabe quién usa el sistema.
Se sabe con qué frecuencia visitan el sitio web.
Se sabe que hacen en el sitio web.
Puede almacenar información de los usuarios que puede necesitar
después, tales como información de facturación o listas de deseo para
futuras compras.
 Puede usar información del usuario para reservar contenido especial
para usuarios habituales.
 Puede diferenciar precios, información que se muestra y derechos de
acceso en función de quien es el usuario conectado.







Recomendaciones para una buen formulario de registro
Debemos tomar en cuenta que los usuarios no quieren identificarse hasta que
realmente lo necesitan. Necesitan cuando han decidido tomar acciones, por
ejemplo para comprar un producto. Hasta entonces no debe privar al usuario
de navegar por su sitio web. Los usuarios odian registrarse para hacer algo
sencillo.
También es necesario dejar en claro que el beneficiado va a ser el usuario ya
que este paso es una carga para él. Una forma de hacerlo es comunicárselo
directamente con palabras como “Recibir ofertas”, “Obtén canciones gratis”,
“Obtén funciones avanzadas”, etc. Otra forma de animarlos a registrase es
bloqueando puntos de acción como el añadir comentarios o bloquear el acceso
a ciertos contenidos.
A continuación algunos consejos extras:
 Presenta el formulario libre de ruidos visuales.
 Si es posible indica como usarás sus datos (público o privado).
 Pida solo información absolutamente necesaria.
 Infiera información a partir de otras. Provincia a partir de Código postal.
 Pida un dato una y solo una vez.
 Reutilice campos. Email como nombre de usuario.
 Utilice léxico claro y familiar.

2013


 Use preguntas sencillas. No haga pensar al usuario!
 Redacte instrucciones en forma afirmativa.
 Organice los campos lógicamente. Es preferible los campos obligatorios
al principio del formulario.
 Llamar la atención sobre operaciones cruciales como “Registrar Nueva
Cuenta”, “Iniciar Sesión” y “Olvidé mi contraseña”. Al menos que se
vean como enlaces. Mostrar claramente el botón de registro.
 Describir detalladamente los requisitos de nombre de usuario y
contraseña.
 Puede comprobar la disponibilidad de nombre de usuario cada vez que
el usuario teclee (por ejemplo con AJAX), en lugar de mostrar un error
recién al enviar el formulario.
 Puede disponer de un medidor de seguridad de contraseña para
proporcionar una retroalimentación al instante.
 La fortaleza de la contraseña debe coincidir con la necesidad de
protección. Una política de contraseña demasiado estricta puede
dificultar el registro.
 Ofrecer la oportunidad de iniciar sesión en lugares clave. Los lugares
clave son puntos de acción como por ejemplo, cuando el usuario quiere
añadir un comentario a una entrada en el blog.
 Al iniciar sesión, volver a la página de dónde provino el usuario. Si el
punto de acción fue añadir un comentario al blog, redirigir al formulario
de comentarios al iniciar sesión.


2013




Ejemplos.
Registro de una cuenta en Google
Es uno de los mejores formularios de registro que he encontrado.
 En la página de registro solo encontramos el formulario (no hay ruido
visual).
 La información pedida me parece adecuada, va de acuerdo al propósito.
 Retroalimenta instantáneamente si algún campo no es completado.
 Dispone de un medidor del nivel de seguridad de contraseña.
 Retroalimentación de disponibilidad de nombre de usuario.
 Pero no todo es perfecto, si no das y quitas el foco a un campo
“obligatorio”, jamás te enteras de esa condición.

Registro en TVE – http://www.rtve.es/alacarta/
Sitio web de un canal de televisión de España.
 Es un registro muy corto.
 Indica con asteriscos los campos obligatorios.
 Indica cómo se usará mis datos.
 Ofrece la posibilidad de crear iniciar sesión mediante OpenId, que es un
estándar de identificación digital descentralizado, en resumen, inicias
sesión con otra cuenta que ya tienes creado (Facebook, Yahoo, Google,
Twitter, Microsoft, etc.). Es bastante moderno.


2013


Citrix – http://citrixmobility2013.com/H2/Madrid/index.html
Registro para un evento online
Este es un
×
×
×
×
×
×
×
×

mal ejemplo de un formulario de registro.
Demasiados campos por llenar.
El título del formulario y las etiquetas están en distintos idiomas!
No indica cuales son obligatorios.
No basta con un teléfono?
FEHLT, no es muy conocido. No hay una explicación.
No basta con una dirección?
Ciudad no sale del código postal?
No hay agrupación de campos.


2013



2013


II. LAZY REGISTRATION (Registro perezoso)
 Problema
El usuario quiere usar y probar inmediatamente su sitio web sin realizar
previamente un registro formal.


Usos
 Cuando es importante que el usuario navegue e interactúe con su sitio
web antes de registrarse formalmente.
 Cuando la información requerida para el registro de la cuenta es un
gran paso para el usuario.
 Cuando se quiere permitir al usuario probar el sitio web (y a su vez
compararlo con otras alternativas) antes que tome la decisión de
registrar una cuenta.
 Cuando el registro de una cuenta involucra dinero, el podría desear
“hojear” primero antes de tomar una decisión.
 Cuando no se quiere obligar un registro al principio, para no ejercer
demasiada presión sobre el usuario.
 Cuando quiere que los usuarios comiencen a introducir sus datos luego
que lleven tiempo interactuando con el sistema, así el tiempo dedicado
al registro será menor que si no llevan tiempo interactuando.



Solución
Permita que el usuario interactúe con el sistema y posponga el registro para
después.
La versión más ligera de este patrón son los “carros de compra” que permite
acumular los productos hasta que el usuario decida comprar, en este momento
se hace el registro.
La versión más pesada de este patrón pasa por crear una cuenta anónima
automáticamente.
Razón fundamental
Para que este patrón finalice en un registro. Debe proporcionar un incentivo a
los usuarios para que estén dispuestos a cederle sus datos. El servicio que se
brinda debe valer la pena como para que los usuarios den sus datos a cambio.
Si los datos de registro son sensibles para el usuario, debemos asegurar que
estos datos estarán protegidos y seguros.


2013




Ejemplos
Jamendo - http://www.jamendo.com
Ofrece música gratuita para escuchar y descargar. Se registra al usuario
cuando decide comprar una licencia comercial para poder usar las canciones.

Animoto - http://animoto.com/create
Animoto es una aplicación web para crear videos con muy variados efectos a
partir de fotos. Se permite explorar los videos que comparten otros usuarios
para que te animes a registrarte.


2013


III.


VOTAR PARA PROMOVER
Problema
El usuario quiere promover un contenido específico con el fin de ayudar,
democráticamente, a decidir que contenido es más popular.



Uso
 Cuando quiere que sus usuarios elijan democráticamente que contenido
es de mejor calidad.
 Cuando confía en la opinión subjetiva de sus usuarios para decidir que
contenido tiene más calidad que otros.
 No lo use cuando su sitio web tiene una pequeña comunidad, es
necesario tener una gran cantidad de usuarios para generar los votos y
tener una comparación entre contenidos significativo.



Solución
Este patrón consta de una serie de mecanismos que trabajan en conjunto.
 Mecanismo de votación
Proporcione un mecanismo de votación para que el usuario pueda votar
a favor o en contra de un contenido en su web. Permita que el usuario
cambie su voto. Cuando el usuario vote, proporcione retroalimentación
de esta acción. Permita al usuario ver sus votaciones anteriores y
cambiarlas si así lo decide.
 Mostrar el número de votos que un elemento ha recibido.
Esto dará a los visitantes una clara indicación de la popularidad del
elemento y le permitirá compararlo con otros elementos.
 Resume los elementos populares
Proporcionar una lista de contenidos populares en una página principal.
 Favorecer elementos populares
Favorecer elementos populares en los resultados de búsqueda y
mostrar información relacionada.
 Proporcionar un widget para el usuario pueda colocarlo en su sitio web.
Razón fundamental
El patrón “Votar para promover” promueve la participación de la comunidad y
es muy potente para ayudar a detectar los contenidos más populares y
promover los contenidos más recientes.
Su comunidad le ayudara a juzgar que es más popular, así evitara contratar
revisores profesionales.



A tener en cuenta
Se trata de implementar un control democrático sobre el contenido de su sitio
web con los pros y contras de convertir al usuario en el centro del sitio web.
Cada voto de un usuario es una opinión de lo que él define como buena
calidad: su opinión es subjetiva. Esto hace plantear si los elementos se pueden

2013


comparar teniendo en cuenta la cantidad numérica de votos que ha recibido y
si el elemento con más votos es realmente el elemento de mayor calidad.
Tal vez sea necesario que el voto de determinados usuarios cuente más que los
demás. Esto puede ser necesario si se quiere mantener la definición de calidad.
Contenido popular no es necesariamente igual a calidad.
Considerar una serie de medidas para evitar que los usuarios hagan mal uso
del sistema.
 Limite la actividad del usuario. Limitar el número de votaciones que
puede realizar el usuario en un lapso.
 Este atento a la actividad maliciosa en contra de otro usuario.
Un usuario puede entrar de mal humor y empezar a degradar el
contenido de otro. Limite el número de veces que un usuario puede
disminuir el nivel de contenido de otro usuario.
 Algunos votos cuentan más que otros. Considera la posibilidad de
dar mayor valor a los votos extraños que al de los amigos.
La sabiduría de las multitudes
Esto podría funcionar si cada usuario evaluara la calidad del contenido
aisladamente y no basar su evaluación a partir del voto de otros usuarios, sin
embargo, esto no sucede.
La comunicación entre la multitud afecta el juicio cualitativo de las personas y
este se deja llevar por el mínimo común de la opiniones. La multitud no
tiene sabiduría!!!


Ejemplos.
VotaNoticias - http://www.votanoticias.com/
La propuesta es centralización de la información difuminada en todos los medios de
comunicación del continente, todos los enfoques y la participación de las personas con
una moderación basada en los votos y comentarios, sin censura, de todos los inscritos.


2013


Amazon - http://www.amazon.es/
Pide a sus clientes que hagan rankings y sugieran libros, y luego añade estos datos
para ofrecer recomendaciones de utilidad a los clientes que puedan estar interesados
en adquirir productos relacionados. Los clientes también pueden “etiquetar” libros
para encontrar artículos o grupos de discusión relacionados dentro del sitio Web.

FUENTES DE INFORMACIÓN
1. UI- Patterns


http://ui-patterns.com

2. Formularios en la web, recomendaciones generales de diseño - Eduardo manchón
(Consultor en usabilidad).
 http://www.alzado.org/articulo.php?id_art=50
3. 60 directrices para un formulario usable – Olga Carreras (Experta en usabilidad y
accesibilidad web).


http://olgacarreras.blogspot.com/2007/02/formularios-usables-60-directrices-de.html

4. Patrón: votar para promover – Yahoo Patterns.


http://developer.yahoo.com/ypatterns/social/objects/feedback/votetopromote.html


2013


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

Más contenido relacionado

La actualidad más candente (20)

Similar a Patrones de Diseño Web (Getting Input - Obtención de Información) (20)

Último (20)

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