Usabilidad Web Dra Silvia Schiaffino

Usabilidad Web
Prof. Dra. Silvia Schiaffino
ISISTAN (CONICET - UNCPBA)

silvia.schiaffino@gmail.com
I Congreso Internacional de Diseño Gráfico Publicitario

UTEQ – Ecuador – Nov. 2017
Usabilidad Web Silvia Schiaffino

De donde vengo
• ISISTAN, Instituto de Sistemas Tandil

• Universidad Nacional del Centro de la Provincia de
Buenos – Facultad de Ciencias Exactas
• CONICET, Consejo Nacional de Inv. Científicas y
Técnicas
• Tandil, Buenos Aires, Argentina

Tandil

Agenda
• Concepto de Usabilidad
• Concepto de Usabilidad Web
• Proceso de Diseño
• Criterios de Diseño
• Principios de Diseño (Nielsen)
• Herramientas de Análisis
• Accesibilidad Web

Usabilidad
• Usabilidad se refiere a la facilidad con

que las personas pueden utilizar una
herramienta particular o cualquier otro
objeto fabricado por humanos con el fin
de alcanzar un objetivo concreto.

Definición de Usabilidad
• Hay 1 estandar internacional que define la

usabilidad como:
“La medida (o el grado) con la que un producto

se puede usar por usuarios determinados
para conseguir objetivos específicos con
efectividad, eficiencia y satisfacción en un
contexto de uso concreto.” - ISO 9241-11

Efectividad
• La efectividad es exactitud e integridad con la

que los usuarios alcanzan los objetivos
especificados, y por lo tanto implica la
facilidad de aprendizaje, la ausencia de
errores del producto o la facilidad del mismo
para ser recordado.

Eficiencia
• La eficiencia se refiere a los recursos

empleados (esfuerzo, tiempo, etc.) en
relación con la exactitud e integridad
con la que los usuarios alcanzan los
objetivos especificados.

Satisfacción
• La Satisfacción es un factor subjetivo

que implica una actitud positiva en el
uso del producto

Estándares relacionados
• “Diseño Centrado en el Humano se

caracteriza por: incluir activamente a los
usuarios , clara comprensión del usuario y de
los requerimientos de las tareas, distribución
adecuada de funciones entre usuarios y
tecnologías, iteración de las soluciones de
diseño, diseño multi-disciplinario." - ISO
13407

Componentes de Usabilidad
La usabilidad puede definirse con 5 atributos de calidad:

• Aprendizaje: Qué tan fácil es para los usuarios realizar
tareas básicas la primera vez que se encuentran con el
diseño?
• Eficiencia: Una vez que los usuarios aprendieron el
diseño, cuánto les toma realizar tareas complejas?
• Facilidad para recordar: Cuando los usuarios retoman
el diseño después de cierto tiempo de no usarlo, cuán
fácil pueden lograr buena performance?
• Errores: Cuántos errores cometen los usuarios, qué tan
severos son, y cuán fácil es recuperarse de esos
errores?
• Satisfacción: Qué tan agradable es usar el diseño?

Por qué es importante la usabilidad?
• En la Web, la usabilidad es una condición necesaria para

la supervivencia del sitio.
• En intranets, la usabilidad afecta la productividad de los

empleados
• Para el diseño de proyectos internos, duplicar la

usabilidad implica recortar costos de entrenamiento a la
mitad y duplicar la cantidad de transacciones de los
empleados
• Para diseños externos, implica duplicar las ventas,
duplicar el número de usuarios registrados, o duplicar
cualquiera sea el objetivo que motivó el diseño.

Beneficios de la Usabilidad
• Reducción de los costos de aprendizaje y esfuerzos.

• Disminución de los costos de asistencia y ayuda al
usuario.
• Disminución en la tasa de errores cometidos por el
usuario y del re-trabajo.
• Optimización de los costos de diseño, rediseño y
mantenimiento.
• Aumento de la tasa de conversión de visitantes a clientes
de un sitio web.
• Aumento de la satisfacción y comodidad del usuario.
• 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.
Objetivos de la Usabilidad
• Efectivo de usar
• Eficiente de usar
• Seguro de usar
• Con buena utilidad
• Fácil de aprender
• Fácil de recordar cómo usarlo

Cuando trabajar en Usabilidad
• La usabilidad juega un rol importante en cada

etapa del proceso de diseño
– Testear el diseño viejo

– Testear el diseño del competidor
– Estudio de campo
– Prototipos en papel
– Realizar múltiples iteraciones
– Guías de usabilidad aceptadas
– Testear el diseño final

Usabilidad Web
• Los sitios web usables resultan de una

combinación de arte e ingeniería
– El buen diseño gráfico provee mayor claridad a

las páginas individuales, y puede facilitar la
experiencia del visitante en el sitio
– Las estructuras de información bien diseñadas

facilitan a los visitantes la navegación del sitio

Usabilidad Web
• Cómo diseñar un sitio Web?

– Determinar objetivo del sitio
• Información, promoción, comercio
– Conocer los potenciales usuarios
• Edad, género, tecnología usada, experiencia, etc.
– Aplicar alguna metodología de diseño iterativo
– Prototipos en papel
– Principios de diseño específicos para Web
– Evaluación con usuarios reales

Proceso de diseño
• Descubrimiento
– Comprender a los usuarios objetivo y sus necesidades, conceptualizar el negocio
y los objetivos de los clientes en el sitio
• Exploración
– Generar varios diseños borradores iniciales para el sitio
• Refinar el diseño.
– Pulir la navegación, layout, y flujo a través del diseño seleccionado.
• Producción
– Desarrollar un prototipo completo y una especificación del diseño
• Implementación
– Desarrollar el código, contenido e imágenes para el sitio Web
• Lanzamiento
– Realizar el deployment del sitio Web para su uso real
• Mantenimiento
– Brindar soporte al sitio, recoger y analizar métricas de éxito

Descubrimiento
• Determinar las necesidades de los usuarios
– Comprender las expectativas del cliente

– Determinar el alcance del proyecto
– Determinar las características de la
población de usuarios
– Evaluar el sitio existente propio o de
competidores

Exploración
• Generar múltiples diseños
– Visualizar soluciones para las situaciones

descubiertas
– Información y diseño de navegación
– Diseño gráfico preliminar
– Elegir un diseño para desarrollarlo

Refinar el diseño
• Desarrollar el diseño
– Aumentando el nivel de detalle

– Enfatizando en el diseño gráfico
– Iterar sobre el diseño

Producción
• Preparar el diseño para su entrega
– Crear la versión final

– Especificaciones, guías y prototipos
– Proveer tanto detalle como sea posible

Artefactos de diseño
• Durante el proceso de diseño se

pueden ir usando:
– Mapas del sitio

– Storyboards
– Esquemas
– Mock-ups

Mapas del sitio

Storyboards

Storyboards

Esquemas

Esquemas

Mock-ups

Criterios de Diseño
• Criterios locales
• Layout
• Navegación
• Links
• Gráficos
• Calidad
• Subjetividad
• Criterios globales
• Navegación
• Calidad
• Subjetividad
Criterios Locales: Layout
• Largo de página
– Los usuarios no desean efectuar scrolling

– El largo de cada página no debe exceder 1 ½ pantallas
– La Home Page no debe superar el largo de una pantalla
– Colocar elementos de navegación al comienzo de cada
página
• Barras de scroll horizontales
– Su uso dificulta la interacción a los usuarios

Criterios Locales: Layout
• Porcentaje de texto
– Por claridad, el % de texto de una página no
debiera superar el 30% (resto: imágenes,
blancos, etc.)
• Párrafos cortos
– El usuario prefiere escanear la página, no leer
– Deben utilizarse párrafos cortos
– La longitud de los párrafos debiera ser menor a
80/120 palabras

Criterios Locales: Navegación
• Links textuales
– En lo posible, todos los links debieran tener una
representación textual
– Los links gráficos (imágenes) deben tener un link textual
alternativo
• Links inadecuados
– En lo posible debe evitarse la presencia de links tales como
“volver”, “regresar”, “adelante”, “atrás”
– El texto debe ser más significativo
– La navegación del sitio por el visitante no necesariamente
sigue la estructura del sitio

Criterios Locales: Navegación
• Tabla de links (barras de navegación)

– La presencia de los links de navegación en una
barra o tabla facilita la navegación del visitante
• Links al comienzo de la página

– La presencia de un link al comienzo de la página
es importante, especialmente en páginas largas

Criterios locales: links
• Links con sustantivos

– Los links deben contener al menos un sustantivo (significativo)
• Longitud de los links

– Los links deben ser cortos para posibilitar la lectura rápida
– Hasta 3/4 palabras
• Link “click here”

– No proporciona información acerca de la página destino

Criterios locales: gráficos
• Imágenes con texto alternativo

– El usuario puede desactivar la carga de imágenes
(por motivos de performance)
• Tamaño de las imágenes en una página

– Debe acotarse el tamaño total destinado a
imágenes en una página
– Mayor cantidad de imágenes producen mayor
tiempo de descarga

Criterios locales: gráficos
• Indicador del tamaño de la imagen

– La provisión del tamaño de la imagen permite al
browser determinar exactamente su localización
– El texto de la página aparece rápidamente en su
posición final
– El usuario puede leer el texto mientras se carga la
página

Criterios locales: calidad
• Link a la Home Page

– Permite al visitante regresar al comienzo del sitio
– Intenta evitar la desorientación
– Nunca se conoce de donde proceden los visitantes
• Dirección del sitio al cual pertenece la página

– Similar al criterio anterior
– Desorientación
– Desconocimiento del origen de los visitantes
• Dirección del Webmaster

– Recolección de comentarios, quejas, sugerencias, etc. de
los visitantes

Criterios locales: calidad
• Copyright
– Indicar a los visitantes los derechos de propiedad de las
páginas
• Fecha de última actualización

– Indicador de la actualidad y calidad de los datos contenidos
• Tamaño de la página
– La velocidad es el problema más importante en el diseño de
páginas
– Conocer la tecnología disponible por los usuarios potenciales
– Determinar el tamaño de las páginas de acuerdo a dicha
tecnología

Criterios locales: Subjetividad
• Home Page representativa del contenido del sitio

– El visitante debe obtener una idea rápida del objetivo y
contenido del sitio
• Claridad en los conceptos contenidos en la página

– Facilitar la comprensión del visitante
• Distribución de los elementos visuales y textuales

– Balance entre los elementos contenidos en la página

Criterios locales: subjetividad
• Combinación adecuada de caracteres

– No producir fatiga visual al visitante
– No dificultar la comprensión de la información
• Tipo y forma de los caracteres

– Utilizar caracteres fáciles de leer
– Ej. las letras cursivas son más difíciles de leer
• Animaciones
– Evitar la presencia de animaciones que distraigan al
visitante

Criterios globales: Navegación
• Links desactualizados
– Evitar la presencia de links “cortados”
• Páginas sueltas
– Evitar la existencia de páginas aisladas (o semi-aisladas)
• Consistencia en los links principales

– Asegurar la misma colocación y presentación de los links de
navegación, en todas las páginas del sitio
• Indicador del camino

– Es conveniente mostrar al usuario el camino desde la home page a
su página actual
– Evitar desorientación
Criterios globales: calidad
• Mapa del sitio

– Brinda un modelo mental muy claro al visitante
acerca de la estructura del sitio
– Acelerador para la navegación del sitio
• Motor de búsqueda interno

– Facilita la localización de información específica
• Fecha de última actualización del sitio

– Permite al visitante determinar si la información es
de su interés o no
Criterios globales: calidad
• Formulario de cuestiones y/o sugerencias

– Comunicación con los visitantes del sitio
• Provisión de FAQs
– Ayuda de importancia para los visitantes

Criterios globales: subjetividad
• Arquitectura lógica de la información

– Proveer una organización clara de los contenidos del sitio
– Facilita la elaboración del modelo mental del visitante
– No un “baúl” de datos
• Información no relacionada con el sitio

– Evitar la presencia de este tipo de información
– Da menor cohesión al sitio
– Desorienta al usuario acerca de la información contenida

Criterios globales: subjetividad
• Proveer un diseño gráfico unificado

– Utilizar metáforas adecuadas
• Garantizar calidad de la información

– Los usuarios buscan información!
– La información debe ser confiable e interesante
– Una alta calidad facilita la lealtad de los visitantes

Principios de Diseño
• Abstracciones generalizables para pensar en

diferentes aspectos del diseño
• Lo que hay que hacer y lo que no en el
diseño de interacción
• Qué colocar y qué no en la página Web
• Amplias reglas generales y no específicas

directrices de 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,

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/producto 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.

Quien es Jakob Nielsen?
• Es uno de los expertos mundiales en el área

de Usabilidad Web
• Posee un PhD en HCI, Universidad Técnica

de Dinamarca
• https://www.nngroup.com/people/jakob-
nielsen/

Principios de Usabilidad (Nielsen)
• Visibilidad del estado del sistema

• Relación entre el sistema y el mundo real
• Dar libertad y control al usuario
• Consistencia y estándares
• Ayudar a los usuarios a reconocer, diagnosticar y
recuperarse de errores
• Prevenir errores
• Reconocer antes que recordar
• Flexibilidad y eficiencia de uso
• Diseño estético y minimalista
• Ayuda y documentación

Visibilidad del estado del sistema
• Siempre tenemos que tener informado al

usuario de lo que está pasando en nuestra
Web, a través de un feedback provisto en
un tiempo razonable.

Visibilidad del estado del sistema
Informar al usuario sobre:
– Lo que está haciendo

– La interpretación que se le está dando a
las acciones del usuario
– El usuario siempre debe estar consciente
de lo que está haciendo

Ejemplos
• Las barras de carga de las imágenes o de los

procesos de descarga de archivos.
• Los Breadcrumbs o migas de pan que nos muestran
dónde nos encontramos dentro de la web.
• Los indicadores de los procesos de compra que
suelen indicarnos en qué fase nos encontramos.
• Las páginas de situación de suscripción con
confirmación donde cargas una página que indica
que hemos enviado un mail para que haga click en el
enlace

Relación entre el sistema y el mundo real
• El sistema tiene que “hablar” el lenguaje del usuario con

palabras o frases que a éste le sean familiares y que
pueda reconocer con facilidad.
• Los mensajes de error y feedback deben referirse a

objetos del dominio del usuario
• Utilizar palabaras comunes, no vocabulario o jerga técnica
• La información tiene que mostrarse con un orden lógico y

las imágenes o iconos usados tienen que ser claros, sin
darle la posibilidad al usuario de equivocarse.
Hablar el lenguaje del usuario

Control y libertad del usuario
• Los usuarios a menudo eligen opciones por error y

necesitarán una salida de emergencia
• Tenemos que darle al usuario la posibilidad de
subsanar el error y no sentirse frustrado por no poder
realizar algo. (Opción de Deshacer, de editar un perfil
personal)

Detectar y prevenir errores
• Todos los usuarios cometen errores

• Errores afectan la productividad
• Es conveniente prevenir errores

• Completar campos de texto de formularios a
través de menúes y no texto libre
• Detectar los errores lo más pronto posible

• Ofrecer instrucciones para reparar el error
• Las acciones erróneas no deberían cambiar el
estado del sistema

Ejemplos
• Opción de autocompletar de Google: El buscador te

da la opción de completar tu texto, se acota tu
búsqueda y se asegura de que escribes el texto
correctamente.
• Confirmación de dirección de correo electrónico o de
la contraseña con doble campo en los formularios
• Comprobación de campos de formularios en tiempo
real

Reconocer antes que recordar
• Minimizar la carga en la memoria del usuario

haciendo los objetos, acciones y opciones
visibles al usario
• El usuario no debería tener que recordar

diferentes partes del diálogo.
• El usuario debiera reconocer, no recordar

Reconocer antes que recordar
• short-term memory
– Limitaciones humanas para el
procesamiento de información
– 7 +/- 2 ítems, 30 seg. a 2 min, a menos que sea
interrumpida
– Esta memoria es extremadamente frágil
– Las distracciones pueden producir la pérdida de su
contenido
– Requiere presentaciones simples

Flexibilidad y eficiencia de uso
• Un sitio web debe estar preparado para todo

tipo de usuario, desde los más novatos hasta
los más experimentados .
• Dando opciones a los más experimentados

obtenemos eficiencia.

Ejemplo
Buscador de Google:
• Sin mucha experiencia en su uso, simplemente se

pone lo que se quiere buscar y listo.
• Un usuario más experimentado que quiere conseguir

búsquedas más específicas puede usar operadores
(booleanos, etiquetas) dentro del buscador.

Consistencia y estándares
• Seguir convenciones establecidas para

íconos
• Seguir convenciones con colores (rojo y
verde)
• Mantener las posiciones de opciones de
navegación en todo el sitio (por ej. siempre a
la izquierda)

Diseño estético y minimalista
• Las páginas web no deben contener

información innecesaria, distrae al usuario y
puede llegar a molestar en la navegación.
• No recargar el diseño de tu página web.

Proveer ayuda y documentación
• Siempre tenemos que dar al usuario la

posibilidad de tener un pequeño manual de
funcionamiento.
• Esa información deber ser fácil de acceder,

enfocada en las necesidades del usuario,
listar paso concretos y no muy extensa

Ayuda y documentación
• Tutoriales – “Getting started”

• Tours en línea – Demos
• FAQ´s

More about (Web) Usability
• Jakob Nielsen http://www.useit.com/jakob/

http://www.nngroup.com/
http://www.useit.com/papers/heuristic/heuristic_
list.html
• http://www.usability.gov/
• http://www.useit.com/alertbox/

Herramientas de análisis
Tipos de herramientas
• Test on-line para ser respondidos por visitantes
– Usabilla: https://usabilla.com/
• Test basados en heuristicas
– UX Check
• Captura de video e interaccion
– Silverback: https://silverbackapp.com/
• Feedback de usuarios / expertos
– Concept feedback: http://www.conceptfeedback.com/
• Simulación de percepción
– Feng-GUI: https://www.feng-gui.com/ (eyetracking)

UX Check
• UX Check es una extensión de Chrome que ayuda a

identificar problemas de usabilidad a través de una
evaluación heurística
• Se basa en los principios de usabilidad de Nielsen

UX Check
• Una vez instalado en el navegador, puedes

visitar la página y ver qué elementos no
cumplen con los principios, agregar notas y
hacer capturas de pantallas.
• También permite exportar la información en

un documento para analizarla y planificar los
cambios.
• http://www.uxcheck.co/
Otro tipo de herramientas
• CrazyEgg
– Es una herramienta de usabilidad y optimización
web que monitoriza la actividad de los usuarios en
una página web.
– Nos muestra en qué partes de nuestra web se
detienen los usuarios y si están o no haciendo clic
en aquellos puntos pensados para ello

Crazy Egg
• Heatmap: Mapa de calor que se construye en

base a los clics.
• Scrollmap: Mapa de scroll que se construye

en base a los desplazamientos que se
realizan en la página, mostrando las
partes que más se ven.
• Confetti: Mapa de clics avanzado con

filtro de métricas.
Preguntas?

Usabilidad Web Dra Silvia Schiaffino

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Usabilidad Web Dra Silvia Schiaffino

Uploaded by

Copyright:

Available Formats

Usabilidad Web

Prof. Dra. Silvia Schiaffino

ISISTAN (CONICET - UNCPBA)

I Congreso Internacional de Diseño Gráfico Publicitario

Usabilidad Web Silvia Schiaffino

• ISISTAN, Instituto de Sistemas Tandil

Usabilidad Web Silvia Schiaffino

Usabilidad Web Silvia Schiaffino

Usabilidad Web Silvia Schiaffino

• Usabilidad​​ se refiere a la facilidad con

Usabilidad Web Silvia Schiaffino

• Hay 1 estandar internacional que define la

“La medida (o el grado) con la que un producto

Usabilidad Web Silvia Schiaffino

• La efectividad es exactitud e integridad con la

Usabilidad Web Silvia Schiaffino

• La eficiencia se refiere a los recursos

Usabilidad Web Silvia Schiaffino

• La Satisfacción es un factor subjetivo

Usabilidad Web Silvia Schiaffino

• “Diseño Centrado en el Humano se

Usabilidad Web Silvia Schiaffino

La usabilidad puede definirse con 5 atributos de calidad:

Usabilidad Web Silvia Schiaffino

• En la Web, la usabilidad es una condición necesaria para

• En intranets, la usabilidad afecta la productividad de los

• Para el diseño de proyectos internos, duplicar la

Usabilidad Web Silvia Schiaffino

• Reducción de los costos de aprendizaje y esfuerzos.

Usabilidad Web Silvia Schiaffino

• La usabilidad juega un rol importante en cada

– Testear el diseño viejo

Usabilidad Web Silvia Schiaffino

• Los sitios web usables resultan de una

– El buen diseño gráfico provee mayor claridad a

– Las estructuras de información bien diseñadas

Usabilidad Web Silvia Schiaffino

• Cómo diseñar un sitio Web?

Usabilidad Web Silvia Schiaffino

Usabilidad Web Silvia Schiaffino

• Determinar las necesidades de los usuarios

– Comprender las expectativas del cliente

Usabilidad Web Silvia Schiaffino

• Generar múltiples diseños

– Visualizar soluciones para las situaciones

Usabilidad Web Silvia Schiaffino

– Aumentando el nivel de detalle

Usabilidad Web Silvia Schiaffino

• Preparar el diseño para su entrega

– Crear la versión final

Usabilidad Web Silvia Schiaffino

• Durante el proceso de diseño se

– Mapas del sitio

Usabilidad Web Silvia Schiaffino

Usabilidad Web Silvia Schiaffino

Usabilidad Web Silvia Schiaffino

Usabilidad Web Silvia Schiaffino

Usabilidad Web Silvia Schiaffino

Usabilidad Web Silvia Schiaffino

Usabilidad Web Silvia Schiaffino

– Los usuarios no desean efectuar scrolling

• Barras de scroll horizontales

– Su uso dificulta la interacción a los usuarios

Usabilidad Web Silvia Schiaffino

• Usabilidad se refiere a la facilidad con