Curso Taller de Gestión y Configuración de Tiendas Online TEMA 8: ARQUITECTURA, USABILIDAD Y NAVEGABILIDAD DE UN SITIO WEB 1. Introducción Debido a la velocidad de navegación de los usuarios, para captar su atención es necesario optimizar la utilidad de Sitio Web. Contamos con 5 segundos para darle al usuario la información que necesita y decida quedarse en nuestro Sitio. Entender al usuario es un factor importante en el desarrollo y estructura de un Sitio Web, por eso, las principales funciones del mismo deben ser: Acceso muy rápido a la información y Retención del usuario. 2. Arquitectura Web 2.1. Concepto de Usabilidad y Navegabilidad La arquitectura del sitio Web se analiza y deduce a partir del entendimiento de cómo utiliza Internet y cómo navega nuestro público objetivo. Esto que significa? Cuando creamos un sitio Web apuntamos a determinado perfil de consumidores, los productos o servicios que comercializamos pueden ser más o menos masivos que otros, pero debemos entender e interpretar quienes son los que navegaran por nuestro sitio, a saber: edad, intereses, grupo social, área de estudio, trabajo, en que horario navega, etc. La mayoría de los sitios Web creados se desarrollan a partir del criterio de un diseñador, y cabe preguntarnos: Cuáles son esos criterios? cuál es su gusto? Y Página 1
eso va a ir ligado a la actividad que tenga como diseñador, cuáles son los sitios que visita?, colores de preferencia, tendencias de diseño, etc. Entonces vamos al grano: es primordial entender quien es nuestro público objetivo. Esa información es la que debemos tener en cuenta a la hora de desarrollar el sitio Web, ya que si dejamos el diseño a criterio de cualquier persona nuestro sitio puede transformarse en un cúmulo de información y diseños organizados según criterios equivocados. Entendamos lo siguiente: según algunos estudios, el 80% de las personas que tienen una necesidad o un deseo buscan información en un buscador, entonces piensa en este momento como ejecutas tus búsquedas seguramente abres la página de un buscador, colocas una palabra clave por medio de la cual consideras que el buscador arrojará el resultado que necesitas y el mismo arrojará una cantidad de resultados. En ese momento y en función del título y descripción que arroje el buscador en sus resultados comenzarás a investigar las distintas opciones (el buscador no arroja una sola), e inconscientemente le das unos 7 segundos (promedio) para escanear rápidamente la información que este te brinda, si consideras que éste puede ser relevante, le darás unos 30 segundos más para seguir en la búsqueda, si no después de los primeros 7 segundos lo desecharas. Esto significa que nuestro sitio Web tendrá que contener un rápido acceso a la información Qué información? La información que nuestro público objetivo está buscando y esto se deduce en función al análisis que realizaste con el fin de entender como navega tu público objetivo. Por tanto, el diseño del sitio debe estar desarrollado en función de las acciones que queremos que nuestro público realice dentro de nuestro sitio, eso significa lo siguiente: si el objetivo principal del sitio es que el usuario se dirija a determinada sección esta deba estar destacada sobre las demás. Piensa en este momento como Página 2
son la mayoría de los sitios: pueden contener un menú horizontal arriba, o uno vertical a la izquierda y cada una de las opciones tiene el mismo grado de importancia que las demás. 2.2. Definiciones formales de Usabilidad La Organización Internacional para la Estandarización (ISO) ofrece dos definiciones de usabilidad: Primera: "La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso". Esta definición hace énfasis en los atributos internos y externos del producto, los cuales contribuyen a su funcionalidad y eficiencia. La usabilidad no sólo depende del producto sino también del usuario. Por ello un producto no es en ningún caso intrínsecamente usable, sólo tendrá la capacidad de ser usado en un contexto particular y por usuarios particulares. La usabilidad no puede ser valorada estudiando un producto de manera aislada (Bevan, 1994). Segunda: "Usabilidad es la eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico". Esta es una definición centrada en el concepto de calidad en el uso, es decir, se refiere a cómo el usuario realiza tareas específicas en escenarios específicos con efectividad. 2.3. Principios básicos en los que se basa la usabilidad A partir de la conceptualización llevada a cabo por la ISO, se infieren los principios básicos en los que se basa la usabilidad: Facilidad de Aprendizaje: facilidad con la que nuevos usuarios desarrollan una interacción efectiva con el sistema o producto. Está relacionada con la predictibilidad, síntesis, familiaridad, la generalización de los conocimientos previos y la consistencia. Página 3
Flexibilidad: relativa a la variedad de posibilidades con las que el usuario y el sistema pueden intercambiar información. También abarca la posibilidad de diálogo, la multiplicidad de vías para realizar la tarea, similitud con tareas anteriores y la optimización entre el usuario y el sistema. Robustez: es el nivel de apoyo al usuario que facilita el cumplimiento de sus objetivos. Está relacionada con la capacidad de observación del usuario, de recuperación de información y de ajuste de la tarea al usuario. 2.4. Ergonomía En informática, la ergonomía está muy relacionada con la accesibilidad, hasta el punto de que algunos expertos consideran que una forma parte de la otra o viceversa. Uno de estos expertos de la ergonomía en los entornos Web es Jakob Nielsen, quien definió la ergonomía en el 2003 como "un atributo de calidad que mide lo sencillez de uso de las interfaces Web". Otra definición clarificadora es la de Redish (2000), para quien es preciso diseñar sitios Web para que los usuarios sean capaces de "encontrar lo que necesitan, entender lo que encuentran y actuar apropiadamente dentro del tiempo y esfuerzo que ellos consideran adecuado para esa tarea". Fuera del ámbito informático, la usabilidad está más relacionada con la ergonomía y los factores humanos. La ergonomía parte de los principios del diseño universal o diseño para todos. La buena ergonomía puede lograrse mediante el diseño centrado en el usuario (que no necesariamente dirigido por él), aunque se emplean diversas técnicas. El diseñador de ergonomía proporciona un punto de vista independiente de las metas de la programación porque el papel del diseñador es actuar como defensor del usuario. Por ejemplo, tras interactuar con los usuarios, el diseñador de Página 4
ergonomía puede identificar necesidades funcionales o errores de diseño que no hayan sido anticipados. La ergonomía incluye consideraciones como: Quiénes son los usuarios, cuáles sus conocimientos, y qué pueden aprender? Qué quieren o necesitan hacer los usuarios? Cuál es la formación general de los usuarios? Cuál es el contexto en el que el usuario está trabajando? Qué debe dejarse a la máquina? Qué al usuario? Las respuestas a estas preguntas pueden conseguirse realizando análisis de usuarios y tareas al principio del proyecto. 2.5. Beneficios de la usabilidad Entre los principales beneficios encontramos: Reducción de los costes de aprendizaje. Disminución de los costes de asistencia y ayuda al usuario. Optimización de los costes de diseño, rediseño y mantenimiento. Aumento de la tasa de conversión de visitantes a clientes de un sitio Web. Mejora la imagen y el prestigio. Mejora la calidad de vida de los usuarios, ya que reduce su estrés, incrementa la satisfacción y la productividad. Página 5
Todos estos beneficios implican una reducción y optimización general de los costes de producción, así como un aumento en la productividad. La usabilidad permite mayor rapidez en la realización de tareas y reduce las pérdidas de tiempo. 2.6. Navegabilidad La navegabilidad Web es la facilidad con la que un usuario puede desplazarse por todas las páginas que componen un sitio Web. Para lograr este objetivo, un sitio Web debe proporcionar un conjunto de recursos y estrategias de navegación diseñados para conseguir un resultado óptimo en la localización de la información y en la orientación para el usuario. Las interfaces de navegación tienen que ayudar a los usuarios a responder a tres preguntas fundamentales relacionadas con la navegación: Dónde estoy? Dónde he estado? Dónde puedo ir? Dónde estoy? La pregunta más importante de la navegación probablemente sea " Dónde estoy?", ya que los usuarios nunca podrán llegar a entender la estructura del sitio si no saben dónde están. Si no sabe dónde está, tampoco tendrá la capacidad de interpretar el significado del vínculo que acaba de seguir. La ubicación actual del usuario debe mostrarse a dos niveles diferentes: En relación con la Web como un todo En relación con la estructura del sitio Página 6
Es necesario que identifique el sitio en todas las páginas, ya que forman un subconjunto de la Web. Todas las páginas Web se parecen mucho desde la perspectiva del usuario; comparten técnicas de interacción, se descargan en Internet y tienen diseños parecidos. Estas similitudes son buenas, ya que permiten a los usuarios una forma de transmitir las habilidades desde un sitio a otro. La Web en su conjunto domina la experiencia del usuario, ya que éste no suele ver más de cinco páginas a la vez. La desventaja potencial es que los usuarios no sabrán en que sitio están al menos que se les indique. Por lo tanto, la primera regla de navegación consiste en incluir el logotipo (u otro identificador del sitio) en cada página. El logotipo deberá tener una colocación coherente (preferentemente, la esquina superior izquierda si la página está en un lenguaje que se lea de izquierda a derecha) y deberá convertirse en un vínculo de hipertexto con la página de inicio, de forma que los usuarios puedan llegar a su página de inicio desde cualquier otra página. La ubicación relativa a la estructura del sitio suele darse mostrando estructuras del sitio y resaltando el área donde se encuentra la página. También es importante tener un titular principal claro en la página que indique su nombre o contenido principal. Por último, el título de la página de la definición de encabezado HTML debe utilizarse para generar un nombre significativo en cada una de las páginas, de forma que los usuarios puedan localizarla fácilmente en su lista de marcadores. Dónde he estado? Dado que la tecnología Web estándar no tiene estado, es posible que sea arduo para los diseñadores de páginas contestar directamente a la pregunta " Dónde he estado?", ya que el sitio no lo sabe sin acudir a cookies u otras medidas de control del usuario. Por suerte, algunos de los mecanismos de desplazamiento de los navegadores actuales despejan ciertas dudas sobre esta cuestión. El botón Atrás lleva al usuario directamente a la página anterior, la lista de historial incluye una Página 7
lista de páginas recientemente visitadas, y los vínculos de hipertexto aparecen en un color diferente si señalan a las páginas anteriormente visitadas. No es recomendable cambiar los colores de vínculo estándar, ya que los usuarios sólo entenderán su significado si tienen el color habitual. Saber los vínculos que conducen a las páginas anteriormente visitadas es útil por dos motivos: ayuda a los usuarios a aprender la estructura del sitio y les impide perder el tiempo yendo a la misma página muchas veces. Dónde puedo ir? A esta pregunta responden las numerosas opciones de navegación y todos los demás vínculos que pueda haber en la página. Además si presuponemos que el usuario ha entendido medianamente la estructura del sitio, se habrá hecho una idea general de otros sitios a los que ir. Dado que es imposible mostrar todos los destinos posibles en todas las páginas, resulta obvio que una buena estructura de sitio constituye una ventaja muy importante a la hora de ayudar a los usuarios a responder a la pregunta " Dónde puedo ir?" Existen tres tipos de vínculos de hipertexto que se pueden usar en una página: Los vínculos incrustrados: constituyen el texto subrayado normal que indica que hay "más cosas" acerca de algún tema que se menciona en el cuerpo del texto Los vínculos estructurados: son vínculos que señalan sistemáticamente a otros niveles de la estructura del sitio, además de a los iguales o secundarios de una jerarquía. Es importante tener los mismos vínculos estructurales en todas las páginas, de modo que el usuario entienda qué opciones de navegación estructural pueden esperar. Página 8
Evidentemente, los destinos exactos señalados por los vínculos estructurales diferirán de página a página. Por tanto, normalmente es mejor usar anclas de vínculo que llamen a los destinos específicos, aparte de dar la relación estructural genérica que hay entre la página actual y la de destino. Los vínculos asociativos: se usan para dar a los usuarios pistas "véase también" acerca de las páginas que les puedan interesar, ya que se parecen o están relacionadas con la página actual. 2.7. Recomendaciones para conseguir una buena navegabilidad en nuestras páginas Web Navegación Recursiva: Se llama al menú que tiene que estar siempre presente en todas nuestras páginas Web, es decir, el link que va a la página principal, o también llamada Home y todo aquello que creamos relevante en nuestra página que deba tener visible nuestro lector, tal como nuestra dirección de e- mail o cualquier medio de contacto. Mapa del Sitio: En la medida de lo posible, siempre que nuestro site sea lo suficientemente amplio, debemos incluir un link, en nuestra navegación recursiva, que se enseñe el mapa del sitio Web. Directorio Dinámico: Conocido como migas de pan, es otra de las cosas sencillas de hacer que proporcionan un valor añadido a nuestras páginas. Se trata de una pequeña línea en la parte superior de la página que nos va indicando el lugar donde nos encontramos y por el que vamos navegando. Nos enseña los directorios y subdirectorios por los que hemos pasado, hasta llegar a la página actual. Además, no hay que olvidar añadirles un link que nos permita volver hacia atrás en nuestra navegación con solo un clic en cualquier momento. Distribución lógica de la información: La finalidad de esto es conseguir un mejor acceso a la información de forma rápida y clara, con los menores Página 9
toques de ratón posibles. Tengamos en cuenta que cada toque de ratón significa el volver a cargar una página en el navegador, que conlleva un mayor tiempo muerto delante de la pantalla. Hay que tener muy presente, que una parte de la población se conecta a la red con una baja transferencia de datos. Inclusión de imágenes de bajo peso: Siempre que sea posible hay que añadir imágenes relacionadas con el tema en cuestión, ya que Internet es mayoritariamente visual. Pero por lo comentado anteriormente, debemos tener en cuenta que las imágenes tardan en cargar bastante en los navegadores y por ello deben ser lo menos pesadas posible. Para tener una referencia, una imagen no debería pesar más allá de los 50 Kb. 3. Comportamiento de los Internautas Existen muchos estudios sobre el comportamiento de las personas cuando navegan en la Web. Estos estudios analizan cómo los usuarios completan las tareas en la Web: cómo y dónde hacen clicks, en qué orden navegan y, lo que más nos interesa, cómo leen. Para conocer cómo leen los usuarios, existen estudios que analizan el movimiento de ojos de los usuarios cuando leen (eyetracking). Página 10
En la imagen se muestran las zonas de actividad de los ojos de los lectores sobre una página. Las zonas en rojo es donde más se posa la mirada, después las zonas amarillas y finalmente las azules. Las conclusiones a las que se llega en estos estudios son: Los usuarios no leen. Escanean el texto. Leen en lo que se llama Patrón F: Hacen dos barridos horizontales y luego en vertical. Leen las dos o tres primeras palabras de las líneas siguientes. A la luz de los resultados anteriores, debe tener en cuenta los siguientes consejos: Vaya al grano. No use palabrería. No utilice el mismo texto que aparece en sus folletos impresos. No da resultado. Los dos primeros párrafos son los más importantes. Sobre todo el primero. Céntrese en colocar ahí su mensaje. Utilice viñetas (bullets) y comience los textos con las expresiones clave. Es muy probable que el usuario no llegue al final de la línea. Recuerde también escribir para que lo encuentren en los buscadores. Utilice las palabras clave por las que supuestamente le buscarán sus potenciales visitantes. 4. Errores comunes al construir un sitio Web Un sitio Web debe ser una herramienta eficaz de marketing y ventas que cumpla con los objetivos de negocios de corto, mediano y largo plazo de su empresa. Como profesional involucrado en el mundo de Internet, Ud. debe saber cuáles son las Página 11
principales razones que impedirían que un sitio Web llegue a ser esa herramienta eficaz. Error Fatal 1: Crear un sitio Web basado íntegramente en tecnología Flash. Sabía Ud. que un estudio reciente, se encontró que aquellos sitios Web desarrollados íntegramente en Flash provocaron una disminución en la respuesta de los visitantes de hasta un 40%? La razón es simple: Los visitantes navegan por su sitio Web utilizando diferentes tipos de ordenadores, velocidades de conexión a Internet y configuraciones de navegación. Lo que para un visitante puede lucir agradable puede ni siquiera aparecer en la pantalla para otro. Probablemente usted haya invertido cientos o quizás miles de euros para tener un sitio Web creado íntegramente en tecnología Flash. Permítame decirle que algunos visitantes nunca lograrán verlo. Otra razón, no menos importante, es que los sitios Web basados íntegramente en tecnología Flash difícilmente lograrán un buen ranking en los principales buscadores, éstos por ahora prefieren sitios Web ricos en texto y con una estructura de navegación sencilla. Si Ud. desea un sitio Web que atraiga, limite el contenido Flash a ciertos sectores de la pantalla en las diferentes páginas. Lo importante es usar Flash, u otra tecnología de animación, adecuadamente para enriquecer la experiencia del usuario sin que las páginas ocupen un tamaño excesivo y tarden demasiado en descargarse. Error Fatal 2: No tomar en cuenta a los motores de búsqueda. En promedio, el 90% de los usuarios de Internet utiliza motores de búsqueda para encontrar un producto o servicio en la red. Actualmente, Google es motor de búsqueda más utilizado en el mundo. Página 12
Sus usuarios realizan más de 500 millones de búsquedas cada día. Si su sitio Web no está rankeado en los principales motores de búsqueda, realmente usted. Está perdiendo dinero. Es como colocar una buena revista dentro de un cajón: nadie la podrá leer. El buen ranking de un sitio Web en buscadores se debe planificar e implementar mientras se construye el sitio (mejor aún si es antes). El contenido y las tecnologías empleadas deben lograr un sitio amigable para los distintos motores de búsqueda. Error Fatal 3: Crear un sitio Web centrado en motores de búsqueda y no en clientes. Este es el extremo opuesto al error anterior. En este caso se pone excesivo énfasis en alcanzar buenos rankings y se descuida a los usuarios. Para forzar los buenos rankings muchas veces los programadores utilizan técnicas poco éticas como colocar textos ocultos y saturar el sitio con palabras clave (keywords), que muchas veces no tienen sentido para los usuarios. Otra técnica poco ética es presentar a los buscadores un contenido distinto al de los usuarios. Al respecto, Google indica claramente: Cree páginas para usuarios y no para motores de búsqueda. No engañe a sus usuarios ni presente a los motores de búsqueda contenido distinto al que usted desea mostrar a éstos. Evite trucos destinados a mejorar los rankings de los motores de búsqueda. Error Fatal 4: Crear un sitio Web con demasiados gráficos y contenido "pesado". Definitivamente, los gráficos, videos y demás contenido multimedia nos pueden ayudar a visualizar mejor una situación o circunstancia particular, un producto o servicio. Pero Sabe que si nos excedemos en el uso de ellos podemos distraer a nuestros visitantes y alejarlos de nuestro mensaje de ventas? Después de todo, el mensaje de ventas es el principal elemento generador de ingresos en un sitio Web. Si sus visitantes ponen más atención a sus gráficos profesionales que a su mensaje de ventas usted está perdiendo dinero. Página 13
Otra razón para no sobrecargar su sitio Web con gráficos y demás contenido multimedia es la siguiente: Desde el momento en que un visitante ingresa a un sitio Web hasta el instante en que decide quedarse para comprar, obtener más información o abandonar el sitio transcurren en promedio siete segundos. Si en este intervalo su sitio Web aún está cargando en pantalla debido a sus muchos gráficos y/o contenido "pesado", probablemente el visitante decida abandonarlo. Página 14