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

Alex Naupay

Universidad Nacional Mayor de San Marcos

08/11/2013

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

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.


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

2013

Los patrones no están bien o mal, sino que son más o menos útiles 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

ProblemaSe 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.



2013

Cuando desea proteger la información del usuario.

SoluciónPermita 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 registroDebemos 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.



2013

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. 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 GoogleEs 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.



http://www.rtve.es/alacarta/

2013

Citrix – http://citrixmobility2013.com/H2/Madrid/index.htmlRegistro 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.



http://citrixmobility2013.com/H2/Madrid/index.html

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ónPermita 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 fundamentalPara 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

EjemplosJamendo - http://www.jamendo.comOfrece 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/createAnimoto 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.



http://animoto.com/create

http://www.jamendo.com/

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ónEste patrón consta de una serie de mecanismos que trabajan en conjunto.

Mecanismo de votaciónProporcione 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 popularesProporcionar una lista de contenidos populares en una página principal.

Favorecer elementos popularesFavorecer 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 fundamentalEl 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.



2013

Su comunidad le ayudara a juzgar que es más popular, así evitara contratar revisores profesionales.

A tener en cuentaSe 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 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 multitudesEsto 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.



http://www.votanoticias.com/

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



http://www.amazon.es/

2013

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



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

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

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

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

http://www.alzado.org/articulo.php?id_art=50

http://ui-patterns.com/

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

Education

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