Diseño de Web sites atractivos

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

1. Botones
2. Äreas de trabajo
3. Calidad de contenido



4. Facilidad de uso

Pueden intentarse muchas definiciones de en qué consiste la facilidad de uso de un site pero una muy sencilla es que esté construído de tal forma que los usuarios siempre sepan qué pueden o qué deberían hacer en cada momento y cómo hacerlo, lo que implica:

1. Inmediatamente el visitante debe saber el objetivo y alcance del sitio.
2. En seguida debe darse cuenta de por donde empezar y de qué manera.
3. En cualquier punto de la navegación, deben saber:
   1. 3.1 Inmediatamente el visitante debe saber el objetivo y alcance del sitio.
   2. 3.2 En seguida debe darse cuenta de por donde empezar y de qué manera.
   3. 3.3 En cualquier punto de la navegación, deben saber:

Salvo excepciones, la mayoría de los visitantes a un site no vuelven al mismo si lo encuentran confuso o complicado de usar.

1. 4.1 Objetivos del site: Hay que encontrar la mejor manera de comunicar a la audiencia cuales son los objetivos del site y su alcance, de manera que el visitante lo perciba inmediatamente al entrar a la home page. Suele ayudar una distribución y diseño gráfico adecuados así como un lenguaje claro e inteligible para comunicarlo.

   De igual manera es importante presentar de forma muy clara los mejores o más interesantes contenidos del site de forma que el visitante sepa de su existencia enseguida contribuyendo a conformar una visión de site valioso.

   checklist: Objetivos del site

   ¿El objetivo y materias tratadas en el site quedan inmediatamente claros? ¿Se comunica al visitante de forma clara en qué forma puede serle de utilidad el site? ¿Son intuitivos y evidentes los pasos básicos para alcanzar los objetivos primordiales del site? ¿En procesos queda muy claro cuántos pasos implican, la situación actual y los pasos restantes para finalizar? ¿Hay riesgo de que el lenguaje, las metáforas, los gráficos, etc., utilizados desvirtúen las expectativas del usuario?

   para mejorar la comunicación de los Objetivos del site

   Priorizar el contenido. Anunciar el contenido más interesante con tipografía, colores y posición prioritaria en pantalla. Llevar el menos interesante a segundo plano. Diseñar la estructura de la home page diferenciando visualmente áreas, y agrupar la información por tipo, funcionalidad y prioridad. Anunciar artículos, novedades, nuevas funcionalidades de forma específica y, sobre todo dinámicamente. Usar etiquetado (labeling) de botones o secciones de forma clara y consistente procurando que sea muy significativo.





2. 4.2 Estructura: Una estructura de contenidos simple, clara y ubicada de forma prominente en el site facilitará la navegación de los usuarios y aumentará el atractivo del site.

   El uso de iconos, etiquetados gráficos o metáforas pueden confundir.

   Tanto la utilización de niveles de forma coherente y clara como el etiquetado son primordiales.

   	checklist: Estructura
   ¿El diseño y disposición muestra claramente las actividades principales del site? ¿Los términos utilizados en el etiquetado de título de site, secciones, navegación indican claramente dónde llevan? ¿Los puntos clave del site requieren un número mínimo de “clicks” (<=3)? ¿En su caso, un usuario puede obviar pasos, revisarlos y tener control sobre todo lo que hace?

   para mejorar la Estructura

   El despliegue de detalle del sistema de navegación no debe originar scroll de forma que se muestren de un vistazo todas las opciones. No deben saturarse los sistemas de navegación con muchas opciones al mismo nivel: no es recomendable más de 5 por grupo. Una página debe tener una única unidad de contenido, y es preferible que esté completa en la página a que el usuario tenga que paginar. Si por la extensión un contenido se divide en páginas, usar “continuar”, “sigue” o “→” justo al final del texto de cada página. Mejor describir [Cápitulo 4], [aptdo. (4 / 7)] o [Nombre del siguiente capítulo] que [más], [siguiente] o [anterior]. Dar información adicional sobre lo que contiene el enlace: [PDF], [78 KB], [t descarga estim. 2 min.]… Diferenciar entre los elementos gráficos generales o decorativos y los de navegación. Agrupar las opciones de navegación en áreas específicas claramente diferenciadas de los contenidos: ayuda a automatizar la navegación. Procurar poner el Área de Navegación siempre en la misma localización en todas las paginas del site (automatización de la navegación). Poner un acceso muy visible a la home page en todas las paginas, y siempre en el mismo sitio. La home page es siempre el “sitio seguro”. Dividir las frases en unidades cortas que tengan sentido para facilitar la lectura por exploración rápida. Cuando la secuencia de párrafos se interrumpa por salto de página, buscar mecanismos gráficos o de marcadores consecutivos para ligarlos. Evitar que un visitante tenga que hacer scroll para acceder a puntos cruciales, ni que tenga que explorar la página buscando la navegación. No usar paginas trampa para atrapar usuarios a los que se les impide hacer “back” con los controles del navegador. Aportar ayuda de contexto para la realización de tareas complejas: Descripción de los pasos de la tarea. Descripción de los campos manejados. Demo. Tour guiado donde se muestre todo el proceso con un ejemplo Usar contenidos de ejemplo para los campos en formularios que ayuden a los usuarios a entender como cumplimentarlos. Tabular los valores de los campos (con Selects, Checkboxes…) siempre que sea posible para facilitar al usuario la introducción de datos.





3. 4.3 Feedback: Avanzar en la navegación de un site desconocido produce incertidumbre en menor o mayor medida y cuando tras un click no se encuentra lo esperado, impaciencia.

   Es muy importante mostrarle al usuario “las huellas” de la historia de su navegación, lo que en inglés se llama “breadcrumbs”. Esto le informa de:

   • Cómo ha llegado hasta dónde está y, consecuentemente.
   • En qué punto de la estructura está (vista parcial).
   • Cómo volver hacia atrás

   Idealmente este breadcrumb (secuencia de páginas por las que ha pasado el usuario hasta el momento) debiera ner “clickable”, es decir, que con sólo pinchar en uno de los enlaces pudiera volver a la página concreta en la que estuvo. De no ser posible esto, al menos un breadcrumb “no-clickable” le aporta información de ubicación.

   Otros elementos de feedback para el usuario son:

   • Correcto titulado de las páginas con información de las secciones de las que depende.
   • Información de estados de procesos antes y durante su realización (cargas, descargas, verificaciones…)
   • Información de la situación del sistema (de un chat, de un foro, de una consulta, del pedido de una compra, de una subasta…)
   • Información a la terminación de un proceso, si ha sido exitoso o no, que cabe esperar a continuación…

   	checklist: Feedback
   ¿Los títulos de las paginas ayudan al usuario a saber en dónde está exactamente? ¿Puede producirle frustración al usuario algún tiempo excesivo de carga de una página, un documento, una descarga, etc? ¿Se da información suficiente de resumen y consecuencias a la terminación de un proceso?

   para mejorar el Feedback

   … de Navegación Utilizar títulos de página claros y bien visibles para procurar feedback de localización. Informar visualmente de en qué secciones está encuadrada página en curso. Utilizar mensajes de error claros y explicativos que apunten además la forma de operar correcta. … de Espera Avisar de tiempos de descarga largos. Al menos de peso del objeto a descargar. Es deseable mostrar el tiempo estimado en segundos. (*1) Informar de tiempos de carga de paginas, documentos, audio, video que requieran espera. Utilizar indicadores de estado de carga y descarga. Hay discrepancias sobre lo que un usuario es capaz de esperar: influyen las expectativas sobre la calidad, el valor o el atractivo del objeto. El usuario considerará al sistema lento si se defraudan sus expectativas: se debe ser claro y franco con lo que puede esperar tras un click. Una página intermedia de presentación, informativa o de selección de opciones debe ser rápida. Una final de contenidos puede ser lenta. Distraer al usuario con pequeñas tareas complementarias o flashes informativos para hacerle menos tediosa la espera. Hacer cargas pesadas en “batch” mientras se hace otra tarea es una solución (vigilando no realizarlo de nuevo en una revisión de la tarea). Si es posible hacer una descarga larga por partes: al mejorar la interactividad y el control del usuario se atenúa la percepción de espera. Avisar al usuario de la cantidad de tiempo estimada para descargar un objeto pesado, de manera que pueda decidir y, en su caso, no se irrite.

   (*1) A partir de más de 10 segundos de espera se produce la pérdida de atención.

Capítulos:

Concepto de atractivo

Calidad del contenido

Facilidad de uso

Contenido promocional

Adecuación al medio

Respuesta emocional

Recursos adicionales