Diseño de Web sites atractivos

(Desarrollado a partir del trabajo de Kevin Keeker para Microsoft , "Improving Web Site Usability and Appeal".)

Introduccion
Concepto de atractivo en Web sites

3.1 Relevancia Para que un site sea útil a la audiencia debe proporcionar:

Entretenimiento
Conocimiento
Mejora en la forma en que los usuarios realizan las tareas, como buscar información

checklist: Relevancia

¿El tema tratado será del interés de la audiencia objetivo?

¿Le da la oportunidad al usuario de aprender algo?

para mejorar la: Relevancia

Hacer que el contenido sea significativo, de calidad, valioso, debe ser la prioridad número uno del site. Todo lo demás es secundario.

Hacer análisis de mercado para determinar la audiencia objetivo y como valora esta audiencia el contenido principal del site.

Informar a la audiencia potencial de cómo de valiosos pueden resultarles nuestros contenidos.

Requerir de los usuarios del site feedback de cómo de útiles están encontrando los contenidos.

Identificar (p. ej. pidiendo sugerencias), que tipo de temas o tareas son importantes para la audiencia y aún no están implementados.

3.2 Uso atractivo de Multimedia: El uso de gráficos, sonido o animaciones influye en la percepción emocional que de un sitio tienen los usuarios: las películas o juegos favoritos de la gente siempre tienen sonido y música).

Sin embargo la mala música o los sonidos agresivos o molestos son menos soportables para los visitantes que los gráficos pobres.

Sincronizar audio con animaciones o video.
Utilizar música o sonidos agradables, poco agresivos.
No utilizar audio, video o animaciones no requeridas por el usuario que impliquen ficheros pesados (alto tiempo de descarga).

checklist: Uso atractivo de multimedia

¿Los gráficos utilizados van a resultar atractivos para la audiencia esperada?

¿El audio será agradable para el tipo de usuarios que esperamos?

¿La música utilizada provocará los sentimientos o emociones esperados?

¿La experiencia resultará agradable si el usuario visita el site sin audio?

¿El audio o la música pueden cansar en visitas sucesivas?

para mejorar el: Uso atractivo de multimedia

No repetir audio o animaciones de introducción en visitas sucesivas al site: controlar con variables de sesión el usuario y qué se le ofrece.

El audio repetitivo cansa: utilizar variaciones sutiles del mismo.

Coordinar audio y video o animaciones.

Avisar al usuario que active sus dispositivos de audio antes de ofrecerle fragmentos con sonido, instrucciones , cuñas…

Si tanto audio como video o animaciones pueden requerir atención, avisar al usuario qué es prioritario que atienda.

En efectos de sonido, los de tono bajo (graves) suelen ser más agradables (o menos irritantes) que los de tonos altos (agudos).

Vale la pena investigar en calidad de video y sonido profesional: video de calidad con mal sonido molesta, y biceversa.

Los movimientos violentos de cámara dan al espectador sensación de desequilibrio y precariedad.

Los sonidos que evocan el tic-tac de un reloj producen sensación de urgencia o apresuramiento.

El uso predominante del rojo puede produce cólera o tensión.

La visión de túnel y las perspectivas estrechas de la cámara fotográfica puede crear una buena dosis de claustrofobia.

cuando usar: Audio

Usar audio para comentarios o ayuda de contexto sin interferir la información en pantalla.

Usar audio para crear un ambiente de fondo o aportar personalidad al sitio, pero cuidando de no distraer la atención de la audiencia.

Usar audio para mostrar un fragmento de canción, de un disco o de una banda sonora.

Usar audio para matizar, realzar, enfatizar el discurso de un presentador u orador.

Usar audio para enseñar la pronunciación de palabras o frases de otro idioma.

Usar audio para informar al usuario del estado de ciertos procesos mientras se realizan (descarga de ficheros, llegada de nueva información).

cuando usar: Animaciones

No usar animaciones continuas (en bucle) porque acaban estresando y distraen mucho la atención de los usuarios. (*1)

No usar texto en movimiento ni animaciones sobre el mismo: es menos legible (*2).

Usar una animación para dirigir la atención preferente de la audiencia a un elemento sobre los otros.

Usar una animación para anunciar a los usuarios una información nueva o actualizada.

Usar una animación para indicar la función de una “llamada de atención” (*3)

Usar una animación para indicar que se está atravesando un cambio de situación o que se está entrando en un área nueva.

Usar una animación para indicar una dirección de navegación en el site.

Usar animaciones para iconos poco autoexplicativos con grafismos estáticos (*4).

(*1) Investigaciones demuestran que el movimiento en nuestra visión periférica puede dominar nuestra atención.

(*2) También se ha demostrado que el texto en movimiento es menos legible que el texto estático.

(*3) P. ej.: un muñeco caminando hacia una puerta podría indicar “Final de proceso”.

(*4) Se ha demostrado que la iconografía animada es más autoexplicativa que la estática.

cuando usar: Video

Usar video para anunciar programas de TV, video-clips u otros materiales visuales que normalmente usan video para anunciarse.

NUsar video para realzar la importancia de un discurso, afianzar la personalidad del orador o enfatizar algunas de las frases importantes.

Usar secuencias de video cortas: se descargan antes y dan más dinamismo a la secuencia de acontecimientos.

Si el video es de un orador, enfocar siempre a la cara del mismo: cambios a otros planos distraen la atención del espectador.

Usar video para referirse a acontecimientos que implican movimiento (deportes, ballet, desplazamientos, traslados…)

3.3 Arquitectura apropiada (Depth & Breath): El site será valorado por la calidad y cantidad de contenidos que ofrezca: Es una labor a la que merece la pena dedicarle esfuerzo el estructurar los contenidos en una arquitectura adecuada con un balance idóneo de Extensión versus Profundidad (Depth & Breadth):

Muchos contenidos presentados a un primer nivel pueden causar desbordamiento y consumir demasiado esfuerzo del usuario para captar una visión de conjunto.

Pocos contenidos en primer nivel y varios niveles de profundidad harán compleja la ubicación de usuario durante la navegación y le complicarán adquirir una visión de conjunto.

Vale la pena estructurar la información de forma poco extensa y con pocos niveles de profundidad y agregar la información de detalle en forma de links a información adicional cuando proceda (fundamentalmente en las paginas de ultimo nivel o detalle).

checklist: Arquitectura apropiada

¿Dispone el site de suficiente variedad de información sobre el tema central a que se dedica?

¿Los artículos son de una longitud adecuada?

¿Pueden los usuarios profundizar sobre los temas tratados?

para mejorar la Arquitectura de contenidos

Incluir enlaces a información de calidad sobre los temas tratados en los artículos.

Los links establecerlos a las paginas específicas que contienen los artículos, no a las home pages de los sites que las hospedan.

Indicar con un icono o motivo gráfico cuando un link saca al usuario fuera de nuestro site a otro externo.

Proporcionar suficientes contenidos (breath) para atraer a audiencia no especializada.

Diseñar buenas interfaces de búsqueda, presentando inicialmente una sencilla. Presentar los resultados favoreciendo la exploración rápida.

Aportar herramientas de refinamiento de búsquedas.

3.4 Información actualizada: Actualizar al día la información confiere al site un carácter de más fiable, además de atraer con más frecuencia a los posibles usuarios en busca de nuevos contenidos.

Además es necesario comunicar a la audiencia qué contenidos y con qué frecuencia se han actualizado, así como las últimas novedades.

checklist: Información actualizada

¿Ofrece el site la última información disponible sobre el tema tratado?

¿Informa el site de qué artículos se han actualizado y con qué frecuencia sucede?

para mejorar la Información actualizada

Utilizar pequeños iconos.o indicadores gráficos para indicar la información que se acaba de actualizar.

Incluir algún indicador del evento y fecha de publicación del nuevo contenido.

Si el contenido es muy dinámico, alguna pequeña animación asociada refuerza su carácter de dinamismo.

En ciertos casos, refuerza el carácter de publicación ágil el asociar la fecha de publicación a algún evento de amplia difusión.

Incluir siempre los contenidos más recientemente publicados en la home page: el usuario puede no descubrirlos navegando.

Anunciar de forma destacada los nuevos contenidos verdaderamente valiosos: esto indica a la audiencia que el site es muy activo.

Pedir a la audiencia que vuelva a visitar el site para conocer nuevas publicaciones. Ubicarlos en el “resumen de nuevos artículos”.

Capítulos:
Concepto de atractivo Calidad del contenido Facilidad de uso Contenido promocional Adecuación al medio Respuesta emocional Recursos adicionales