Libro de investigación

Diseño Basado en Usabilidad Web y sus Principios Carolina Michelle Batres Zayas Stephanie Melissa Orantes Calvo Universidad Francisco Gavidia Edición Gráfica Editorial Lic. Ruth Patricia Navarrete Velasco 18 de marzo de 2021

I

Índice Introducción..........................................................................................................................III Planificación de interfaces gráficas......................................................................................1 Usabilidad.............................................................................................................................3 Análisis de la usabilidad: principios......................................................................................4 Análisis de la usabilidad: técnicas........................................................................................8 Indicadores de usabilidad.....................................................................................................11 Métricas de usabilidad..........................................................................................................12 Errores de usabilidad...........................................................................................................14 Factores de influyen en la usabilidad...................................................................................14 Diseño centrado en la usabilidad.........................................................................................17 Conclusiones........................................................................................................................XXVI Referencias bibliográficas....................................................................................................XXVII

II

Introducción Esta investigación pretende recoger los principales criterios de usabilidad a tener en cuenta en el diseño de aplicaciones web genéricas. A través de la aplicación de los principios y técnicas.

En este libro el lector podrá encontrar una relación de criterios comunes que deben cumplir la mayoría de los diseños web para asegurar cierto nivel de calidad en cuanto a usabilidad, en definitiva, es responsabilidad del diseñador de la aplicación web asegurar el cumplimiento de estos criterios comunes de usabilidad y, adicionalmente, los requeridos por aplicaciones específicas, con el objetivo de obtener un producto usable y aceptado por los usuarios.

Se abordará el concepto de usabilidad y los principios con el fin de evaluar una interfaz o sistema, esté o no en proceso de construcción, así como también veremos los indicadores, errores y factores que influyen en el diseño web.

III

Diseño Basado en Usabilidad Web y sus Principios

Planificación de interfaces gráficas Elementos de diseño: percepción visual A la hora de desarrollar un sitio web 1hay que tener en cuenta qué interfaz web ofrecer y qué elementos incluir en ella. Cada uno de esos elementos contribuirá a la percepción que sus potenciales usuarios tendrán de la aplicación. Una de las primeras impresiones que causará la interfaz2 de usuario será visual. Aunque suene duro, en función de la forma, tamaño, ubicación, color, tipografía, etc., que se le asigne a cada uno de los elementos de la interfaz se influirá, de una manera u otra, en el usuario o visitante de un sitio web. El diseñador ha de tener en cuenta constantemente a lo largo de todo su trabajo estas circunstancias y saber valorar la relación directa que puede identificarse entre sus diseños y cómo estos serán percibidos. La comprensión de los principios, reglas y conceptos del diseño hará aumentar en forma definida su capacidad para la organización visual. La comprensión de los principios, reglas y conceptos del diseño hará aumentar en forma definida su capacidad para la organización visual y conseguir una comunicación eficaz.

Fundamentos de composición Una composición gráfica es ordenar todos los elementos de nuestro diseño, ya sean texto o ilustraciones, destinados a lograr los objetivos propuestos, es decir, impactar visualmente al público receptor de nuestro mensaje. El diseñador ha de tener un profundo conocimiento de los factores que rigen el fenómeno de la percepción para poder establecer sus composiciones de un modo sólido y fundamentado. Algunos de estos factores son: •

Componentes psicosomáticos del sistema nervioso: nos facilitan el contacto visual con nuestro mensaje gráfico haciendo uso del mecanismo de percepción llamado vista. Con ella recogemos información visual (percibimos distintas formas, ubicaciones, longitudes de onda de un color, etc.) Que luego nuestro cerebro interpreta como contornos, texturas, dimensiones, etc., dotándolas de un significado gráfico definido.

1 Un sitio web es el conjunto de páginas web que son accesibles desde un mismo dominio de la World Wide Web. 2 La interfaz de usuario permite el funcionamiento interactivo entre la máquina y el usuario.

1

•

Componentes de tipo cultural: influyen en la interpretación que hacemos de los estímulos desde un punto de vista cultural y educacional. Por ejemplo, el color que en occidente está relacionado con el luto es el negro mientras que en los países orientales este mismo significado se le asigna al color blanco.

•

Experiencias compartidas con el entorno: por ejemplo, conceptos altamente arraigados como: hierba/verde, azul/cielo, hielo/frío. Todas ellas van constituyendo una serie de dualidades que el hombre va aprendiendo desde su infancia y que, posteriormente, serán utilizadas por él como patrones con los que interpretar y dotar de significado la realidad.

El equilibrio visual Antes de hablar del equilibrio3 visual es necesario definir dos conceptos previos de mucha importancia: el equilibrio formal y el informa. El equilibrio formal se basa en la bisimetría.

Se busca con él un centro óptico dentro del diseño y no tiene por qué coincidir con el centro geométrico de la composición. El punto de equilibrio formal suele estar ubicado un poco por encima del centro geométrico. Una composición que decida seguir este esquema compositivo reflejará estabilidad, calma y estatismo. No supone una composición muy audaz o creatividad, aunque lo que sí asegura es una distribución armónica de los elementos. El equilibrio informal por el contrario, está altamente cargado de fuerza gráfica y dinamismo. Prescinde por completo de la simetría y el equilibrio se consigue aquí en base a contraponer y contrastar los pesos visuales de los elementos, buscando diferentes densidades, tanto formales como de color, que consigan armonizar4 visualmente dentro de una asimetría intencionada.

La tensión compositiva Lo opuesto al equilibrio desde el punto de vista estructural es la tensión compositiva.

La tensión tiene como finalidad dirigir la mirada y conseguir fijar la atención del observador.

La tensión se puede conseguir con la combinación de líneas y formas agudas e irregulares.

Hay algunas técnicas para provocar la tensión y conseguir captar la atención del usuario. Las principales técnicas son: 3 En diseño, el equilibrio trasmite a los usuarios estabilidad y cohesión.

4 La armonía de la combinación de elementos en una composición provocan sensación de unidad y de que todo fluye aprop iadamente.

2

Técnica sugestiva: consiste en dirigir intencionadamente la atención a un punto

•

determinado utilizando elementos de apoyo. Por ejemplo, imágenes de personas que miran hacia un punto determinado (que sería el punto de interés).

Técnica rítmica: basada en la tendencia innata del ojo humano a completar

•

secuencias de elementos (ya sean números, formas, figuras geométricas o colores), agrupando aquellos que poseen formas semejantes.

Usabilidad Concepto La usabilidad5 es un término que, aunque no forma parte del diccionario de la real academia española (rae), es bastante habitual en el ámbito de la informática y la tecnología.

El concepto proviene de la palabra inglesa usability, y hace referencia a la facilidad con que un usuario puede utilizar una herramienta fabricada por otras personas con el fin de alcanzar ciertos objetivos.i La usabilidad está vinculada, por tanto, a la simpleza, la facilidad, la comodidad y la practicidad. En otras palabras, el concepto tiene relación con la eficacia percibida de un objeto y la posibilidad de aprovechar todo su potencial. La usabilidad sostiene que si el sistema en cuestión no puede ser utilizado por el usuario en todo su potencial, no es útil y, por tanto, es deficiente. El grado de usabilidad6 se mide a partir de diferentes técnicas de análisis de la usabilidad, que serán introducidas en la siguiente sección.

El grado de usabilidad de un sistema es, por su parte, una medida empírica y relativa de la usabilidad del mismo. Se mide a partir de pruebas empíricas y relativas.

•

Empírica, porque no se basa en opiniones o sensaciones, sino en pruebas de usabilidad realizadas en laboratorio u observadas mediante trabajo de campo.

•

Relativa, porque el resultado no es ni bueno ni malo, sino que depende de las metas planteadas (por lo menos el 80% de los usuarios de un determinado grupo o tipo

5

Según Jakob Nielsen definió la usabilidad como el atributo de calidad que mide lo fáciles que son de usar una interfaz o sistema.

6 Córcoles Tendero,J. Montero Simarro, F. (2014). Diseño de interfaces web. Paracuelos de Jarama, Madrid

3

definido deben poder instalar con éxito el producto x en n minutos sin más ayuda que la guía rápida) o de una comparación con otros sistemas similares.

•

El concepto de usabilidad se refiere a una aplicación (informática) de (software) o un aparato (hardware), aunque también puede aplicarse a cualquier sistema hecho con algún objetivo particular.

Análisis de la usabilidad: principios Un principio de usabilidad consiste en aplicar un objetivo concreto que permita evaluar

una interfaz o sistema, esté o no en proceso de construcción.ii Principios básicos A partir de la conceptualización7 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 predictibilidad8, sintetización, familiaridad, la generalización de los conocimientos previos y la consistencia.

•

Facilidad de uso: facilidad con la que el usuario hace uso de la herramienta, con menos pasos o más naturales a su formación específica. Tiene que ver con la eficacia y eficiencia de la herramienta.

•

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.

7 La conceptualización implica el desarrollo y construcción de ideas para facilitar la comprensión un tema específico.

8 La predictibilidad se caracteriza por tener un orden y conocido por el usuario.

4

Principios generales •

Empatía con los usuarios: lo primero que se debe hacer a la hora de ponerse a crear un nuevo sistema o interfaz es saber quiénes son los usuarios, qué necesitan, qué es lo que tienen que hacer, qué puede hacer el sistema por ellos y cómo conseguir que realicen sus tareas de forma sencilla y eficiente. Durante el proceso de diseño9 del nuevo interfaz o sistema, los desarrolladores y diseñadores se deben poner en el lugar de los usuarios para conseguir que las cosas funcionen como ellos esperan.

•

Documentación y material de apoyo: para conseguir que los usuarios realicen sus tareas de forma simple y eficiente, es necesario conocer la preparación que tienen, el alcance de sus conocimientos y si van a ser capaces de aprender el nuevo sistema o interfaz. Para asegurar que los usuarios sean capaces de aprender se debe poner a su disposición una buena documentación u otro material de apoyo que responda todas las preguntas que puedan hacerse

•

Prevención de errores y retroalimentación: como se comentaba con anterioridad, el éxito de una interfaz viene predefinida por su facilidad de utilización. Si el sistema o interfaz prevé todos los errores que cometen los usuarios, les ayuda a recuperarse de esos errores y proporciona toda la información con mensajes claros no amenazantes ni desconcertantes, posiblemente, el éxito esté un paso más cerca.

•

Facilidad de aprendizaje y uso: los sistemas deben ser fáciles de manejar y utilizar.

En parte, esta afirmación se consigue respondiendo a algunas de las preguntas del principio de contextualización ya que, si se conocen las necesidades de los usuarios y sus experiencias de usuario previas, se pueden realizar diseños más específicos y fáciles de utilizar para ellos. La comunicación entre sistema y usuarios debe utilizar una terminología y simbología familiar. Esta comunicación debe basarse más en reconocimiento de los elementos que en recuerdos de acciones o hechos anteriores.

•

Flexibilidad10: los sistemas o interfaces deben permitir la comunicación a través del mayor número de vías disponibles. Los usuarios no deben perder el control de la

9 El diseño radica de manera visual lo que transmitirá al usuario confianza y credibilidad.

10 La flexibilidad de un sistema permite la personificación de valores y llevar una comunicación eficaz con el usuario.

5

interfaz. Si en algún momento piensan que no tienen ese control, esa sensación, puede convertirse en frustración y provocar el abandono. Para que los usuarios tengan la sensación de que controlan el sistema, deben conocer su situación dentro de un entorno finito. El sistema debe ser personalizable, cómodo y transferible.

•

Consistencia: el principal obstáculo para una interacción efectiva con una interfaz es la falta de familiaridad11 o costumbre basada en conocimiento del sistema. Cuanto mayor sea el tiempo necesario para adquirir esta familiaridad, más difícil es para el usuario interactuar con la interfaz de manera efectiva.

•

Robustez: la robustez es el grado de apoyo que facilita a los usuarios para el cumplimiento de sus objetivos. Efectivamente, la capacidad de observación del usuario puede ser determinante para conseguir sus objetivos. Si la información puede ser fácilmente asumida por el usuario y la tarea sigue un rumbo que no le provoque desconcierto o frustración, el objetivo se verá cumplido.

Principios de Jakob Nielsen •

Visibilidad del estado del sistema: el sistema debe informar a los usuarios del estado del sistema, dando una retroalimentación apropiada en un tiempo razonable. Para cumplir este principio12 se debe informar al usuario a través de barras de progreso o mensajes informativos durante la ejecución de procesos no inmediatos (envío de correos, carga de archivos o imágenes, conexiones remotas, etc.) Y al analizar los mismos.

•

Relación entre el sistema y los usuarios: el sistema debe utilizar un lenguaje al que los usuarios estén habituados, con una jerga o terminología que les sea conocida y legible, en lugar de términos o mensajes genéricos que se utilizan en el sistema, para que al usuario se sienta cómodo al utilizar el sistema. Para cumplir este principio la información debe aparecer en un orden lógico y natural y utilizar iconos o imágenes claras que no dejen lugar a dudas (la papelera como símbolo de eliminar).

11 Empatizar con el cliente.

12 Fernández Casado,P. (2018). Usabilidad Web. Teoría y uso. Paracuelos de Jarama, Madrid

6

•

Control y libertad para el usuario: en casos en los que los usuarios puedan seleccionar una opción del sistema por error, se debe contar con las opciones de deshacer y rehacer para proveer al usuario de una salida fácil que no le provoque frustración13. Para cumplir este principio se deben proporcionar botones o acciones que le permitan al usuario volver al estado anterior y, si la situación lo requiere, disponer de una “salida de emergencia”

•

Consistencia y estándares: el usuario debe seguir las normas y convenios de la plataforma sobre la que está implementando el sistema, para que no se generen dudas y tenga que preguntar el significado de las palabras, situaciones o acciones del sistema. Para cumplir este principio se debe asegurar que los nombres de las acciones se corresponden con lo que hacen, no existen enlaces rotos, que los títulos son representativos del contenido y que cada enlace o botón lleva a un único destino.

•

Prevención de errores: es importante que el usuario entienda lo que sucede en el sistema para poder prevenir las situaciones que puedan provocar frustración. Para cumplir este principio se deben proporcionar métodos para salvar los errores más frecuentes, utilizar mensajes claros y eliminar las acciones predispuestas al error.

•

Reconocer antes que recordar: el sistema debe minimizar la información que el usuario debe recordar14 mostrándosela a través de objetos, acciones u opciones. El usuario puede que no recuerde toda la información que recibió con anterioridad ya sea un momento cercano o no. Para cumplir este principio se deben proporcionar instrucciones para el uso del sistema en todo momento y estar en un lugar visible. Es muy efectivo que una acción sea referida a través de colores, tamaños y/o posiciones distintas.

•

Flexibilidad y eficiencia de uso: se deben proporcionar métodos abreviados o atajos de teclado para que tanto los usuarios novatos como los expertos aprovechen la capacidad del sistema y se puedan adaptar sin importar el nivel de conocimiento de la plataforma. Para cumplir este principio se debe proporcionar una forma para personalizar las acciones más frecuentes en el sistema. Utilizar enlaces personalizados

13 14

Respuesta emocional común a la oposición, relacionada con la ira y la decepción La disponibilidad y visualización efectiva de los ícono que proporciona el sistema.

7

por nombre de usuario en el menú de navegación, proporcionar un buscador avanzado con valores parametrizables.

•

Diálogos estéticos y diseño minimalista: la interfaz no debe contener información que no sea relevante o innecesaria. Cada información extra que se introduzca competirá con la información relevante y disminuirá su visibilidad. Para cumplir este principio se debe evitar los diseños recargados, que carguen rápido, con contenidos bien estructurados, colores equilibrados y bien seleccionados y con, únicamente, las acciones necesarias.

•

Reconocimiento, diagnóstico y recuperación de errores: los mensajes de error deben expresarse en un lenguaje15 claro, indicar exactamente el problema y ser constructivos. Para cumplir este principio se deben evitar mensajes de error como “error 34-x1” o “error 404” que no indican nada al usuario de cómo recuperarse cuando se produce dicho error. Los mensajes deben proporcionen alternativas para que el usuario pueda continuar realizando la tarea.

•

Ayuda y documentación: aunque es mejor que el sitio web o aplicación pueda ser usado sin ayuda, puede ser necesario proveer cierto tipo de ayuda. En este caso, la ayuda debe ser fácil de localizar, es frecuente utilizar un mini tutorial en donde, de manera sencilla, se exponen las funcionalidades principales que evitan tener que leer documentos extensos de ayuda y que pueden resultar aburridos o agotadores.

Análisis de la usabilidad: técnicas Un aspecto importante para lograr incrementar el grado de usabilidad de un sitio web

pasa por identificar qué necesitan los usuarios potenciales de dichos sitios web, y saber cuándo el diseñador las ha tenido en cuenta. Para ello se han propuesto e identificado diferentes técnicas de análisis de la usabilidad. Dichas técnicas se distinguen en tres categorías, esto según el tipo de técnica16 de comprobación utilizada:iii Métodos de inspección Es una técnica que emplea el trabajo de expertos (evaluadores en usabilidad o asesores con experiencia en diseño de interfaces persona-ordenador o cualquier persona 15 16

8

Breve y directo.

Cueva, J. M. (2005) Usabilidad en la Web. Universidad de Oviedo.

relacionada con disciplinas relativas a la web) para inspeccionar aspectos de la interfaz del sistema relacionados con la usabilidad y la accesibilidad que esta ofrece a sus usuarios.

Puede aplicarse en una interfaz, en un prototipo, o aplicarse antes o después de la puesta en explotación del sitio web. Entre ellas tenemos: •

Heurística: es la técnica más utilizada y conocida dentro del contexto de evaluación de usabilidad. Método desarrollado por Nielsen17, que tiene como objetivo encontrar problemas de usabilidad en el diseño de la interfaz de usuario para que estos puedan ser subsanados en el proceso de diseño iterativo. Se revisa la conformidad de la interfaz con respecto a una serie de reglas (heurísticas) previamente determinadas mediante la inspección de varios evaluadores expertos.

•

Recorrido cognitivo (cognitive walkthrough): se centra en evaluar la facilidad de aprendizaje a través de prototipos del sistema, lo cual ayuda a evaluar el software en las etapas iniciales de desarrollo; se reducen los tiempos y costos al poder realizarse sin la intervención del usuario.

•

Recorrido de usabilidad plural: método desarrollado en los laboratorios ibm. Suárez torrente lo define como “una reunión en la que usuarios, desarrolladores y expertos en usabilidad recorren un escenario de tareas impresas y ordenadas, asumen el rol de usuarios del sistema, anotan la secuencia de acciones que desarrollan para llevar a efecto cada tarea, discuten sobre las soluciones y, finalmente, los expertos ofrecen sus opiniones evaluando además cada elemento de diálogo”.

•

Inspección de estándares: el objetivo de este método es verificar que la interfaz de usuario en evaluación esté de acuerdo con los patrones18 establecidos en los estándares industriales, tarea realizada por un experto en usabilidad con amplios conocimientos de los estándares relativos a interfaces de usuarios.

Métodos de indagación Consiste en hablar con los usuarios y observarlos detenidamente usando el sistema en trabajo real y obteniendo respuestas a preguntas formuladas verbalmente o por escrito. Los principales métodos de evaluación por indagación son los siguientes: 17 18

Consultor en el campo de la usabilidad de software y aplicaciones web.

Elementos o componentes que observamos repetidamente.

9

•

Observación de campo: entender cómo los usuarios de los sistemas interactivos realizan sus tareas y más concretamente conocer todas las acciones que estos efectúan durante su realización. Con esto se pretende capturar toda la actividad relacionada con la tarea y el contexto de su realización, así como entender los diferentes modelos mentales que de estas tienen los usuarios.

•

Grupo de discusión dirigido (focusgroup): técnica de recogida de datos donde se reúnen de seis a nueve personas para discutir aspectos relacionados con el sistema.

Permite capturar reacciones espontáneas e ideas de los usuarios que evolucionan en el proceso dinámico del grupo.

•

Entrevista: usada para conocer la opinión de los usuarios o posibles usuarios de un sitio web. Son técnicas exploratorias y en ningún caso pueden constituir medición alguna de la usabilidad. El principal aporte es que nos permite conocer el grado de satisfacción que tiene el usuario con el sitio web y sus valoraciones sobre los contenidos.

•

Cuestionario: técnica exploratoria de usos y motivaciones de los usuarios actuales o potenciales que nos permite conocer preferencias sobre contenidos, momentos de conexión, familiaridad con internet e intereses. No es una técnica para medir usabilidad.

Test Los usuarios representativos trabajan en tareas concretas utilizando el sistema (o el prototipo19) y los evaluadores utilizan los resultados para ver cómo la interfaz de usuario da soporte a estos con sus tareas. Los tests se pueden clasificar en: •

Pensando en voz alta (thinkingaloud): descrito por nielsen. Se les solicita a los usuarios y de forma individual que expresen en voz alta y libremente sus pensamientos, sentimientos y opiniones sobre cualquier aspecto sobre el sistema o prototipo. Eficaz para capturar aspectos relacionados con las actividades cognitivas de los usuarios potenciales del sistema.

•

Ordenación de tarjetas (cardsorting): esta técnica es utilizada para conocer cómo los usuarios visualizan20 la organización de la información. El diseñador utiliza las

19 20

10

Sirve como modelo para la fabricación de los siguientes o como muestra.

Representación de la realidad

aportaciones de los usuarios para decidir cómo deberá estructurarse la información en la interfaz. Es utilizada para decidir la estructura organizativa de cualquier sistema de información. Es una técnica de ayuda en la toma de decisiones para realizar una organización de categorías centrada en el usuario. Esta técnica es realizada por el arquitecto de información.

Indicadores de usabilidad La usabilidad se mide generalmente usando una serie de indicadores que son observables y cuantificables que permiten obtener unos resultados tangibles más allá de la intuición21 Ley de pareto o regla 80/20 Establece que un amplio número de consecuencias tienen origen en un pequeño número de sus causas. Una forma gráfica y útil de aplicar este principio es a través de los diagramas de pareto.

Ley de fitts Es un modelo predictivo que predice el tiempo necesario para moverse rápidamente desde una posición inicial hasta otra final. Se basa en la distancia que existe hasta el objetivo y tamaño de este. Los objetivos que son más pequeños o están más lejos necesitan más tiempo para ser alcanzados.

Esta ley se suele utilizar para medir la navegación de las interfaces. Se complementa con la ley de Hick.

Ley de Hick Demuestra que el tiempo que se tarda en tomar una decisión aumenta en función del número de opciones. Cuantas más alternativas, más tiempo tarda el usuario en tomar una decisión. Se basa en la Teoría de la Información de Shannon22.

21

Fernández Casado,P. (2018). Usabilidad Web. Teoría y uso. Paracuelos de Jarama, Madrid 22 Se ocupa de la medición de la información y de la representación de la misma..

11

Ley de los 3 clics Sugiere que el usuario debe ser capaz de encontrar o que quiere o necesita en solo tres clics desde la página de inicio. Se basa en la premisa de que si un usuario tiene que realizar muchos clics puede frustrarse y abandonar el sitio. Sin embargo, existen algunas evidencias que afirman que esta regla no es una medida objetiva ya que pueden intervenir muchos factores y, usualmente, los usuarios no se frustran por los clics sino por no encontrar lo que buscan.

Mapas de calor Son una técnica analítica web que permite conocer las zonas o áreas en las que interactúan los usuarios. Se utiliza un monitor especial que en función del número de usuarios que convergen en un punto, la zona va tomando “temperatura” y va cambiando de tonos: los fríos simbolizan poca actividad y los cálidos un aumento de actividad.

Mapa de clics Permite adquirir información sobre el comportamiento de los usuarios y sus intereses.

Este mapa genera una representación termográfica23 a partir de los clics realizados en los botones o enlaces durante una sesión y mostrar los caminos que los usuarios han utilizado para llegar a un objetivo concreto.

Analítica de formularios Con esta técnica se puede comprobar el número de usuarios que no ha terminado de rellenar un formulario.

Métricas de usabilidad Una métrica de usabilidad es una medida destinada a conocer o estimar una o varias características o cosas que surgen de la relación entre una interfaz o sistema o sus usuarios.

En esta relación es cuando se puede medir la efectividad, la eficiencia y la satisfacción.24

23

Técnica que permite determinar temperaturas a distancia sin necesidad de contacto físico con el objeto a estudiar.

24 Fernández Casado,P. (2018). Usabilidad Web. Teoría y uso. Paracuelos de Jarama, Madrid

12

Métricas cuantitativas Una métrica cuantitativa es una medida objetiva para hacer referencia a un valor específico que representa un número de cosas. A menudo se utilizan para medir el nivel de productividad de las diferentes áreas de negocio y definir líneas de acción futuras.

•

Eficacia de la eliminación de defectos

•

Disponibilidad de la interfaz o sistema

•

Fiabilidad de la interfaz o sistema

•

Número de errores

•

Número de errores por unidad de tiempo

•

Número de tareas que pueden realizarse

•

Porcentaje de enlaces rotos

•

Porcentaje de presencia de propiedades en los objetos o elementos

•

Porcentaje de tareas finalizadas con éxito

•

Porcentaje de tareas finalizadas con éxito al primer intento

•

Porcentaje de usuarios capaces de finalizar las tareas sin ayuda

•

Tiempo de permanencia

•

Tiempo de finalización de la tarea

•

Tiempo de latencia

Métricas cualitativas Una métrica cualitativa es una medida subjetiva25 para hacer referencia a la calidad de una cosa deducida a partir de un análisis personal.

Las métricas cualitativas subjetivas tienen en cuenta la eficiencia26 y, usualmente, se utilizan para ver el nivel de un servicio o producto.

•

Dificultad de la tarea

•

Expectativas

•

Facilidad de mantenimiento

•

Nivel de satisfacción de la prueba

25 Que se basa en los sentimientos de la persona.

26 Relación entre los recursos utilizados en un proyecto y los logros conseguidos con el mismo.

13

•

Tiempo de reacción del usuario Errores de usabilidad

•

Indefinición del sitio: informar claramente de que es lo que se puede encontrar aquí y cuáles son las ventajas de utilizar esta página.iv

•

Indefinición de las funciones a realidad: hay que enseñar al usuario la ruta claramente de principio a fin. Si los caminos son complejos hay que simplificarlos.

•

Búsquedas de no ofrecen resultados: implementar un buscador de palabras clave que funcione correctamente.

•

Mala navegación: establecer intereses del usuario

•

Enlaces perdidos: los enlaces perdidos sólo demuestran un mal producto. Simplifica el número.

•

Time out: se suele producir cuando la programación es redundante, servidores poco potentes o exceso de seguridad.

•

Exceso de peso: se resuelve quitando imágenes que no son necesarias y dando el formato a la página utilizando los estándares de html.27 Factores de influyen en la usabilidad

Diseño de página Espacio de pantalla El contenido de interés para el usuario debe ocupar al menos la mitad del diseño de una página y, preferiblemente, hasta un 80%. La navegación debe mantenerse por debajo del 20% del espacio de las páginas de destino.

Desde el punto de vista de la usabilidad sería mejor eliminar todos los elementos que no son necesarios, tal como la publicidad28.

Diseño de plataforma cruzada Los diseñadores web tienen que soportar la navegación controlada por el usuario.

Tienen que considerar las distintas posibilidades de acceso a las páginas, y diseñarlas de 27 Cueva, J. M. (2005) Usabilidad en la Web. Universidad de Oviedo.

28 Difusión de información, ideas u opiniones con la intención de que alguien actúe de una determinada manera, piense según unas ideas o adquiera un determinado producto.

14

acuerdo con el tamaño y resolución de la pantalla. Se deben asegurar de que los diseños funcionan bien tanto con fuentes pequeñas como con las grandes.

Separar el significado de la presentación La información relativa a la presentación de la información habrá que mantenerla en un archivo de hoja de estilos separado que estaría vinculado a un archivo de contenido que sólo incluiría marcado semántico.

Tiempos de respuesta Los usuarios solicitan que aceleremos la descarga de páginas. La recomendación normal en torno a los tiempos es: •

0.1 segundos es el límite para que el usuario perciba la descarga como inmediata.

•

1 segundo es el límite que hay para que el usuario pienso que no hay interrupción.

•

10 segundos es el límite máximo para mantener la atención del usuario centrada en el dialogo.

Se debe de indicar el tamaño de archivos cuya descarga vaya a durar más de 10

segundos tomando como referencia el ancho de banda29 de los usuarios.

El tiempo de respuesta depende de una serie de elementos que forman una cadena: rendimiento del servidor, conexión del usuario con Internet, velocidad del navegador y de la computadora del usuario, por lo tanto, las demoras son acumulativas y no dependen de un solo factor.

Vinculación Los vínculos30 constituyen la parte más importante del hipertexto: conectan las páginas y permiten a los usuarios ir a nuevos sitios de la web.

•

Descripciones de los vínculos: evitar el uso de “haga clic aquí”. No más de 2-4 palabras.

•

Títulos de vínculos y directrices de los mismos: los títulos deben tener como máximo 60-80 caracteres. Se debe incluir una breve descripción sobre a dónde lleva y qué se encontrará en el sitio de destino.

29 Cantidad de datos que se pueden transferir entre dos puntos de una red en un tiempo específico.

30 Es un elemento de un documento electrónico que está relacionado con otro recurso.

15

•

Colorear los vínculos: no utilizar colores estándar. Generalmente los vínculos de páginas que el usuario no ha visto son azules y las que ya ha visto aparecen en rojo o morado.

•

Expectativas de los vínculos: utilizar siempre el mismo url para hacer referencia a una determinada página.

•

Crear vínculos con suscripciones y registros: no requiera las suscripciones ni los registros.

•

Vínculos publicitarios: crear vínculos directos con páginas que sigan el mensaje del anuncio en vez de crear vínculos directos con su página de inicio. El banner31 publicitario debe ser diseñado como un vínculo de hipertexto.

Marcos Se recomienda no utilizar marcos por las siguientes razones: •

Se presupone que el usuario tiene una pantalla grande.

•

Muchos navegadores no pueden imprimir adecuadamente páginas con marcos.

•

Los marcos son muy difíciles de aprender.

•

Los motores de búsqueda tienen problemas con los marcos.

•

Algunos navegadores hacen que sea muy difícil detectar marcos.

•

Muchos usuarios prefieren diseños exentos de marcos.

Tablas No es recomendado en usabilidad el uso de tablas ya que, en la mayoría de los casos, basta con dividir el texto a través de saltos de línea, capas, tabulaciones o párrafos y, además, el procesado de las tablas ralentiza la velocidad de carga de la página.

Credibilidad Uno de los principales objetivos de un buen sitio web consiste en establecer la credibilidad como operación de ejecución profesional para ellos opta por el diseño limpio y la buena apariencia32.

31 Pieza de publicidad digital que combina multimedia que se introduce en páginas web para dar visibilidad a una marca, empresa o campaña.

32 Cueva, J. M. (2005) Usabilidad en la Web. Universidad de Oviedo.

16

Imprimir Generar dos tipos de versiones de todos los documentos extensos: una versión optimizada para su visualización en línea y otra optimizada para la impresión.

El archivo imprimible debe estar en postcript o pdf y debe de aceptar los dos formatos internacionales comunes: a4 y carta.

Diseño centrado en la usabilidad Por lo general los usuarios realizan un barrido rápido de los documentos on-line, leyendo palabras y frases sueltas. Esta información supone 79% de los usuarios de internet.

Solo el 16% leen detalladamente los contenidos mostrados.33 En usabilidad cada información compite con el resto para llamar la atención del usuario, con lo que cualquier elemento irrelevante distraerá la atención del documento. Durante el primer barrido rápido se ignoran las áreas de navegación, gráficos y otros elementos de diseño global ya que se suelen centran en las áreas de contenido.

La arquitectura La arquitectura cliente-servidor, también llamada sistema software, está formada por un navegador, un servidor y un protocolo http34.

Uno de los modelos de desarrollo que más se utilizan es la programación por capas.

Para que una arquitectura sea usable debe cumplir una serie de requisitos: •

Tener una estructura consistente y bien organizada

•

Establecer un único tipo de documento sgml y un único formato de codificación de caracteres.

•

Ser fácil de desarrollar y mantener.

•

Ser semántica, es decir, ser capaz de dotar de significado los contenidos.

•

Gestionar de forma óptima los sistemas de almacenamiento como memoria caché.

•

Establecer un tiempo de comunicación entre capas no superior a 1.000 ms.

33

Fernández Casado,P. (2018). Usabilidad Web. Teoría y uso. Paracuelos de Jarama, Madrid.

34 Protocolo de transferencia de hipertexto.

17

Hojas de estilo Las hojas de estilo (css) son un documento que define el estilo de una aplicación o páginas web. Estas hojas se colocan al principio del documento, dentro del elemento contenedor de metadatos head.

Se debe proporcionar una programación compatible con el mayor número de navegadores posible a través de: •

La definición de las psuedo-clases adecuadas para los estados especiales de cada elemento.

•

Establecimiento de todos los prefijos de los proveedores necesarios. Estos prefijos ayudarán a la compatibilidad35 regresiva o retrocompatibilidad y asegurarán su buen funcionamiento.

•

Utilizar medidas relativas en vez de medidas absolutas.

Es importante averiguar si los usuarios que van a acceder a la interfaz o sistema son

invidentes. Si es así, se deben utilizar las propiedades auditivas de css.

Por último, no se deben cambiar las funcionalidades básicas predefinidas a las que están acostumbrados los usuarios.

Javascript Los archivos de javascript deben colocarse dentro del elemento body, al final de este.

El que los scripts estén al principio, y no al final, es una de las razones por las que las páginas adquieren un tiempo de latencia elevado.

Crear comportamientos en javascript es bastante costoso a nivel de procesador, es mejor optar por css36 o svg.

Se debe proporcionar una programación compatible con el mayor número de navegadores posible.

35 Cualidad de ser compatible, de poder concurrir en buenas condiciones con algo o alguien.

36 Hojas de estilo en cascada.

18

Metadatos Un metadato es un término que se refiere a datos sobre los propios datos. Son una información que no se visualiza y que pueden usados para clasificar, recopilar datos o configurar los contenidos de la página. Por tal razón, se deben añadir todos los metadatos que proporcionen información relevante a los usuarios para proporcionar una experiencia de usuario mayor.

Base de datos Las bases de datos son uno de los elementos que más puede influir en el rendimiento de las interfaces o los sistemas. No importa el sistema gestor de base de datos (sgbd) utilizado ni el motor de almacenamiento, lo realmente importante es que se encuentre bien configurado y optimizado.

Para que un sgbd esté correctamente configurado dependerá mucho del tamaño de la caché, número de consultas frecuentes cacheadas, número de tablas abiertas, número de conexiones, etc.

Subir el valor del tamaño de la caché37 puede mejorar mucho los tiempos de respuesta, sin embargo, puede ser insuficiente si no se ajusta.

También los errores de cotejamiento38 de datos en bases de datos pueden provocar problemas en el proceso de inserción y actualización. Por eso es importante que se utilice el mismo tipo de codificación.

Pero, no todos los problemas de rendimiento residen en la configuración ya que, cómo se realicen las consultas puede producir “consultas lentas”. Una consulta lenta es una petición a la base de datos que tarda más tiempo de los permitido o estimado (3 segundos).

Una de las vías para que las consultas no sean lentas es establecer condiciones de filtrado en orden descendente de restricción.

También se puede mejorar los tiempos de respuesta realizando una asignación adecuada de claves primarias, índices y claves foráneas.

37 Es un componente de hardware o software que guarda datos para que las solicitudes futuras de esos datos se puedan atender con mayor rapidez.

38 Orden que van a tener los caracteres o símbolos dentro de un conjunto de caracteres.

19

Seguridad Es importante que la base de datos no este susceptible a cualquier ataque. Para ello, desde el punto de vista de la usabilidad se deben aportar soluciones a las vulnerabilidades que puedan surgir y hacer la comunicación más sencilla sin que se pueda perder la confianza del usuario ni el fácil manejo.

Se considera que un software es seguro y usable si los usuarios que van a utilizar el sistema o interfaz son conscientes de las tareas de seguridad que tienen que llevar a cabo, son capaces de finalizar con éxito las tareas, no cometen errores peligrosos y se sienten satisfechos con el resultado que volverían a utilizarlo. El problema radica que los usuarios no comprenden y, a consecuencia de esto, se hace muy difícil adquirir abstracciones fáciles de implementar.

Por otro lado, las contraseñas no son el mejor método para proporcionar seguridad.

Para solucionar esta parte lo que se está utilizando, desde hace años, es el procedimiento de autenticación single sign on (sso) que permite acceder a varios sistemas mediante una única instancia de identificación o validación39.

Estructura Cabecera La cabecera es un elemento de la interfaz que debe ser constante en todas las secciones o páginas40.

La información que en ella se encuentra suele ir englobada dentro del elemento header.

Debe contener los siguientes elementos principales: •

Logo de la empresa y organización con un enlace a la página de inicio.

•

Un buscador que permita acceder a la información de forma rápida y efectiva.

•

El menú de navegación con las principales acciones a realizar.

•

Selector de idioma.

•

Información y acceso sobre el usuario.

39 Fernández Casado,P. (2018). Usabilidad Web. Teoría y uso. Paracuelos de Jarama, Madrid.

40 Cueva, J. M. (2005) Usabilidad en la Web. Universidad de Oviedo.

20

•

Si es un comercio electrónico se debe establecer un indicador con el número de elementos en la cesta de la compra, acceso a la página del carrito o cesta, un resumen del contenido y un selector de cambio de moneda.

Pie de página El pie de página es un elemento de la interfaz que debe ser constante en todas las secciones o páginas.

La información que en ella se encuentra suele ir englobada dentro del elemento footer.

Al ser una sección de poca visibilidad debe contener los elementos más informativos sobre la empresa y organización: •

Acceso a los textos legales y normas, a través de enlaces, como son la información corporativa, condiciones de uso, avisos legales, política de cookies41, política de privacidad, etc.

•

Información sobre las distintas formas de pago y envío.

•

Información de cómo contactar, y si procede, acceso al formulario de contacto.

•

Acceso a las diferentes redes sociales de la empresa u organización.

Reglas sobre el contenido El contenido de un documento debe estar estructurado y organizado para adquirir significado propio. Hay reglas básicas que no deben romperse:42 •

Solo puede existir un encabezado nivel 1 en el documento.

•

El orden de los niveles de encabeza no se puede romper.

•

Una sección genérica puede contener uno o varios artículos, cero o varias secciones genéricas y cero o varias secciones laterales.

•

Una sección lateral solo puede contener un contenido no directamente relacionado con el contenido principal.

•

Un artículo no debe contener secciones genéricas ni laterales y solo puede tener una cabecera y un pie.

41 Pequeña información enviada por un sitio web y almacenada en el navegador del usuario, de manera que el sitio web puede consultar la actividad previa del navegador.

42 Cueva, J. M. (2005) Usabilidad en la Web. Universidad de Oviedo.

21

•

Una cabecera solo puede contener un nivel de encabezado que indica el título del artículo.

•

El pie del artículo solo puede contener acciones asociadas, información sobre el autor o de contacto o datos sobre los derechos.

Composición Cuando se está creando una composición todos los elementos que se sitúan a la derecha suelen poseer más peso visual que los que están a la izquierda. Los elementos de la derecha proporcionan una sensación de avance o desarrollo mientras que los situados a la izquierda proporcionan una sensación de ligereza o agilidad.

Las formas redondas crean sensación de perfección, armonía y movimiento.

Las formas angulares y alargadas producen una sensación de profundidad puesta que amplían el campo de visión. Sin embargo, las formas angulares y cortas pueden provocar una sensación de timidez o humildad.

Las formas grandes proporcionan una sensación de fortaleza mientras que, las pequeñas, provocan un sentimiento de debilidad o delicadeza.

Color El color influye en la decisión de compra de un cliente, lo que significa que el color puede hacer que un producto sea un éxito o un auténtico fracaso.

Los consumidores accederán al producto predispuestos por la sensación que transmite el color del producto43.

Legibilidad44 La elección de un tipo de fuente u otro puede conllevar posibles problemas de visualización dependiendo del dispositivo dónde se utilice.

La tarea de seleccionar el tipo de fuente lo hace directamente el navegador de forma automática. Lo único que hay que hacer el proporcionarle las direcciones o ubicaciones de dónde están las fuentes y, el navegador, seleccionará la más compatible para el usuario.

43 44

22

Cosa producida natural o artificialmente, o resultado de un trabajo u operación.

Facilidad con que se puede leer y comprender un texto

Como norma, es recomendable utilizar un tamaño de fuente igual o superior a los 10 pixeles. No obstante, es conveniente emplear tamaños de fuente alrededor de los 14 pixeles si la audiencia del sitio web es superior a los 40 años.45 El interlineado se debe utilizar entre un 15-20% superior al tamaño de fuente.

Existen algunas reglas básicas que aseguran la legibilidad en un sitio web: •

Utilizar colores de alto contraste entre el texto y el fondo.

•

Fondos de colores claros o patrones de formato muy sutiles.

•

Fuentes suficientemente grandes para una buena lectura.

•

Texto estático y preferiblemente alineado a la izquierda.

•

Evitar uso de mayúsculas en el texto.

Navegación Menús Los menús de navegación son una lista o conjunto de palabras clave que contienen principales acciones de la interfaz46.

El número de opciones del menú principal se debe limitar a un número entre seis y ocho.

El elemento activo del menú de navegación debe poder diferenciarse claramente del resto. Las opciones de menú en las resoluciones de escritorio pueden utilizar el efecto “rollover” para desplegar subopciones.

Barras de navegación Deben mostrar las principales opciones de navegación y gestionar bien el espacio, sobre todo, si se utilizan dispositivos móviles.

Una forma de presentar las barras de navegación es hacerlas fijas en la zona superior o inferior de la pantalla.

45 Fernández Casado,P. (2018). Usabilidad Web. Teoría y uso. Paracuelos de Jarama, Madrid.

46 Es la conexión física y funcional que se establece entre dos aparatos, dispositivos o sistemas que funcionan independientemente uno del otro.

23

Botones Los botones deben tener una apariencia de botón y no ser extravagantes. Un diseño no formal puede confundir a los usuarios y provocarles frustración.

Se debe separar los botones por funcionalidad y/o contexto.

Los botones deben tener un tamaño suficientemente grande para tener un mejor acceso y diferenciarse por su estilo y forma del resto de contenidos.

Los títulos de acciones como “ver más”, “seguir leyendo” o “clic aquí” empobrecen la usabilidad y ralentizan el reconocimiento visual de los usuarios.

Imágenes Se debe optimizar47 la compresión de las imágenes con la mínima pérdida posible de datos relevantes para disminuir el tiempo de latencia. Los métodos más utilizados para reducir el tamaño de las imágenes son disminuir el número de colores utilizado, aumentando su compresión o reducir su resolución.

Se debe de evitar el uso de imágenes con fines decorativos ya que aumentan el peso de las páginas.

Logo El logo debe situarse siempre en una parte visible y destacada de la pantalla para asegurar la identidad del sitio. Normalmente se sitúa en la zona superior izquierda.

Para facilitar la navegación y la “vuelta atrás” debe tener un enlace a la página de inicio.

Banners Los banners son una práctica muy útil cuando se desea tener el control de los anuncios o espacio publicitarios.48 Deben colocarse al principio para que tengan la mayor efectividad posible y deben situarse en las páginas de inicio.

Su tamaño debe ser adecuado para que llame la atención, pero no resto importancia a los demás contenidos.

47

48

24

Conseguir que algo llegue a la situación óptima o dé los mejores resultados posibles.

Cueva, J. M. (2005) Usabilidad en la Web. Universidad de Oviedo.

Video y multimedia Uno de los problemas que tienen los videos y la multimedia49 es que no todos los navegadores soportan la reproducción a pantalla completa, y además, tener que personalizarlos de forma corporativa o sofisticada puede volverse una tarea muy ardua y tediosa.

El uso del video debe minimizarse debido a las restricciones del ancho de banda.50 Es mejor digitalizar una versión de calidad más alta que la del video y ponerlo a disposición para su descarga. Aunque se pueden utilizar distintos formatos de video que ayudan a comprimirlos y mantener su máxima calidad.

Para dispositivos móviles, los videos deben tener una resolución de 320x240, con un peso de 2 megabytes o menos y una duración media de 20 segundos.

El sonido de buena calidad mejora la experiencia del usuario por lo que es necesario invertir en sonido de calidad profesional.

49 Que está destinado a la difusión por varios medios de comunicación combinados, como texto, fotografías, imágenes de video o sonido, generalmente con el propósito de educar o de entretener.

50 Fernández Casado,P. (2018). Usabilidad Web. Teoría y uso. Paracuelos de Jarama, Madrid.

25

Conclusiones “El principio que considero más importante es Facilidad de Aprendizaje y Uso desarrollado en la página página 5, porque es importante que el usuario pueda entender cómo funciona el sitio, no se frustre una vez este dentro y no lo abandone. Por ello se debe de crear un sistema que sea comprensible y que cumpla con las necesidades para que el usuario se sienta cómodo y se incentive a navegar dentro de la página”.

Carolina Batres “El principio que considero más importante es “Diálogos estéticos y diseño minimalista” de Jakob Nielsen desarrollado en la página página 8, porque estoy de acuerdo que menos es más, pienso que la simplicidad de los elementos en un diseño transmite en los usuarios conceptos de manera limpia y sencilla la información haciéndola fácil de comprender, sin complicaciones o de lo contario, si se sobrecarga la composición se obtendrá objetivo equivocado. Lo que es importante en la usabilidad web ya que su objetivo es brindarles a los usuarios las herramientas necesarias para que no se pierdan dentro de la plataforma y permitir que permanezcan por más tiempo en el sitio web, hasta que consigan lo que están buscando.”

Stephanie Orantes

XXVI

Referencias bibliográficas i

Fernández Casado, P. (2018). Usabilidad Web. Teoría y uso. Madrid: RA-MA. Recupera-

do el 6 de Marzo de 2021, de https://cbues.bibliotecasdigitales.com/read/9788499647739/index ii

Córcoles Tendero, J. E., & Montero Simarro, F. (2014). Diseño de Interfaces Web.

Madrid: RA-MA. Recuperado el 6 de Marzo de 2021, de https://cbues.bibliotecasdigitales.com/ read/9788499643632/index iii

Perurena Cancio, L., & Moráguez Bergues, M. (2013). Usabilidad de los sitios web,

los métodos y técnicas para la evaluación. Revista Cubana de Información en Ciencias de la Salud, 24, 176-194. Recuperado el 11 de Marzo de 2021, de http://scielo.sld.cu/pdf/ics/v24n2/ ics07213.pdf iv

Cueva, J. M. (2005). Usabilidad Web. Universidad de Oviedo. Recuperado el 10 de Mar-

zo de 2021, de http://di002.edv.uniovi.es/~cueva/asignaturas/masters/2005/UsabilidadWeb.pdf

XXVII