Internet – historia - usabilidad

Historia de internet
VIDEO

Historia de internet (History

of the Internet)
https://youtu.be/9hIQjrMHTv4

Tiene subtitulo en español. Se

activan en youtube desde el
ícono CC y desde el ícono de
configuración seleccionan el
idioma.

Arquitectura web

Usabilidad
La usabilidad tiene que ver con la claridad y sencillez con la que una web es presentada y el modo en
que un usuario interactúa con ella. Recordemos que cuanto más fácil se lo pongas al usuario, más
posibilidades tienes de que sienta ganas de conocer tu producto o servicio. Como dijo Jacob Nielsen,
padre de la usabilidad, “Si no lo haces fácil, los usuarios se marcharán de tu web”. Y no hay vuelta
de hoja, basta con que cada uno piense en sus propias experiencias. Cuando navegar por una web se
convierte en un procedimiento lento y pesado, la información que aparece en ella es algo confusa, o
la componen textos demasiado largos y enrevesados, todo indica que esa web no ha sido pensada
desde la usabilidad y es muy fácil que perdamos la atención y abandonemos rápidamente la página.
Este hecho es conocido como tasa de rebote, o Bounce Rate.

La mejor manera de pensar en la usabilidad de una página web es a través de un

diseño centrado en el usuario y sus necesidades, y no en un diseño centrado en la
tecnología o en la creatividad u originalidad.

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, 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.

1
Internet – historia - usabilidad

• 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.

¿Por qué es tan importante?

Si realmente se quiere que una web sea visitada por el mayor número de personas posible y que
estas personas encuentren fácilmente lo que buscan, la página debe ofrecer facilidades para
encontrar la información, debe ser rápida y debe ser robusta y fiable. Si alguien entra a una página
web en la que no entiende nada, hay miles de opciones en los menús y no son intuitivos, tiene que
pasar por muchas pantallas para llegar a lo que le interesa, hay popups, es lenta y la navegación se
convierte en un infierno, hay errores, etc ... ese usuario seguramente salga antes de encontrar lo
que busca y se vaya a otro sitio que le ofrezca la misma información de mejor forma.

Hay que tener en cuenta que los objetivos y propósitos de cada web son diferentes y por lo tanto su
diseño será diferente y su experiencia de usuario deberá medirse de diferente forma. No es lo
mismo una web como la Wikipedia o Imdb donde se necesita mostrar mucha información de manera
sencilla y rápida que la web de un fotógrafo donde básicamente se van a mostrar fotos.

Steve Krug tiene un libro cuyo título es muy explicativo: "Don't Make
Me Think" (No me hagas pensar). Este título ilustra muy bien qué es lo
que un diseñador tiene que tener en la cabeza a la hora de diseñar una
web.

Los no Los si

http://www.panasonic.com
http://www.lingscars.com/
http://www.apple.com/
http://arngren.net/

2
Internet – historia - usabilidad

10 reglas heurísticas 1 de usabilidad de Jakob Nielsen

Jakob Nielsen “el gurú de la usabilidad” es una de las personas más respetadas en el ámbito mundial
sobre usabilidad en la web, un referente a la hora de diseñar nuestros proyectos.

Jakob estudió 249 problemas de usabilidad y a partir de ellos diseñó lo que denominó las “reglas
generales” para identificar los posibles problemas de usabilidad.

1. Visibilidad del estado del sistema: el sistema siempre debería mantener informados a los
usuarios de lo que está ocurriendo, a través de retroalimentación apropiada dentro de un
tiempo razonable.

2. Relación entre el sistema y el mundo real: el sistema debería hablar el lenguaje de los
usuarios mediante palabras, frases y conceptos que sean familiares al usuario, más que con
términos relacionados con el sistema. Seguir las convenciones del mundo real, haciendo que
la información aparezca en un orden natural y lógico.

3. Control y libertad del usuario: hay ocasiones en que los usuarios elegirán las funciones del
sistema por error y necesitarán una “salida de emergencia” claramente marcada para dejar
el estado no deseado al que accedieron, sin tener que pasar por una serie de pasos. Se
deben apoyar las funciones de deshacer y rehacer.

4. Consistencia y estándares: los usuarios no deberían cuestionarse si acciones, situaciones o

palabras diferentes significan en realidad la misma cosa; siga las convenciones establecidas.

5. Prevención de errores: mucho mejor que un buen diseño de mensajes de error es realizar
un diseño cuidadoso que prevenga la ocurrencia de problemas.

6. Reconocimiento antes que recuerdo: se deben hacer visibles los objetos, acciones y
opciones, El usuario no tendría que recordar la información que se le da en una parte del
proceso, para seguir adelante. Las instrucciones para el uso del sistema deben estar a la vista
o ser fácilmente recuperables cuando sea necesario.

7. Flexibilidad y eficiencia de uso: la presencia de aceleradores, que no son vistos por los
usuarios novatos, puede ofrecer una interacción más rápida a los usuarios expertos que la
que el sistema puede proveer a los usuarios de todo tipo. Se debe permitir que los usuarios
adapte el sistema para usos frecuentes.

8. Estética y diseño minimalista: los diálogos no deben contener información que es

irrelevante o poco usada. Cada unidad extra de información en un diálogo, compite con las
unidades de información relevante y disminuye su visibilidad relativa.

9. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores: los mensajes de

error se deben entregar en un lenguaje claro y simple, indicando en forma precisa el
problema y sugerir una solución constructiva al problema.

10. Ayuda y documentación: incluso en los casos en que el sistema pueda ser usado sin
documentación, podría ser necesario ofrecer ayuda y documentación. Dicha información

1
Reglas heurística: señalan los medios para resolver el problema.

3
Internet – historia - usabilidad

debería ser fácil de buscar, estar enfocada en las tareas del usuario, con una lista concreta
de pasos a desarrollar y no ser demasiado extensa.

10 errores frecuentes de usabilidad

1.- No poner atención a los estándares

Los estándares han sido creados para que la gente los siga. Si bien es cierto que la creatividad
muchas veces significa salirse de lo establecido, también es cierto que si queremos hacer un sitio
fácilmente usable tenemos que considerar que la mayoría de las personas lo entiendan fácilmente.
La mejor manera de hacer esto: seguir estándares.

Algunos ejemplos de estándares que es muy conveniente seguir dentro de nuestros desarrollos:

• La mirada de las personas va de izquierda a derecha, de arriba hacia abajo. Pon tu logo e
información importante siguiendo esa orientación.

• Los links o vínculos debe verse "clickeables". Las palabras subrayadas y de otro color señalan
a las personas la presencia de un link que se puede seguir.

• La iconografía debe ser totalmente ilustrativa o si no mejor no la utilices. Si se va a eliminar

un elemento, una "X" o un bote de basura pueden ser convenientes, más no el dibujo de una
escopeta (aunque puede ser gracioso el uso de ese tipo de iconos en tu desarrollo, la gente
no lo entenderá bien)

• El menú de tu sitio debe ser bien distinguible del otro contenido. Botones o links de menú
del mismo tamaño y escondidos en una columna lateral no serán fáciles de distinguir.

2.- Formas de registro muy largas

Si vas a requerir que las personas se registren en tu sitio para poder acceder, solicita la menor
cantidad de información posible. A menos que las personas tengan forzosamente que registrarse en
tu sitio (por ejemplo por un requerimiento gubernamental o de trabajo), no lo harán si el formato de
registro es tan largo que les da flojera. Hay que recordar que uno de los aspectos más importantes
de la usabilidad es desarrollar para que la gente piense y trabaje menos. Si pretendes hacerlos
trabajar mucho, estás perdido.

3.- No tener un mecanismo de búsqueda eficiente (o no tener ningún mecanismo de búsqueda)

Entre más extenso sea tu sitio y/o la información contenida en él, mas crucial será ofrecer a tus
usuarios mecanismos de búsqueda eficientes para encontrar la información que desean. Es
extremadamente frustrante buscar cierta información en un sitio web y toparse con uno de los
siguientes problemas:

1. El sitio web no cuenta con un buscador

2. El sitio web cuenta con un buscador que no encuentra nada

4
Internet – historia - usabilidad

3. El sitio web cuenta con un buscador que encuentra demasiados resultados (pero ninguno
parece estar relacionado realmente con lo que estamos buscando)

Hay que evitar esto a toda costa. Recuerda el éxito de Google, con unas pocas frases clave podemos
obtener resultados por lo general completos y precisos. A menos que tengas un sitio realmente
masivo tu algoritmo de búsqueda no tiene que ser ni cercanamente tan complejo como el de
Google, pero si es necesario poner atención al funcionamiento de nuestro buscador para mejorar la
experiencia de nuestros usuarios.

4.- Navegación difícil

No tienes un índice. No tienes un menú claro. Se requieren más de 3 – 4 clicks para llegar a cierto
contenido en tu sitio. Tu información no está correctamente agrupada. No posees links internos
entre tu información relacionada. Si cualquiera de estas afirmaciones es cierta, tu sistema de
navegación es deficiente. Es importante arreglar esto ya que es la base de la usabilidad de cualquier
desarrollo web y si no le ponemos atención, los usuarios se irán. Así de simple.

5.- Títulos de las páginas

¿En dónde estoy? Esta es la pregunta que va a surgir si los títulos de tus páginas no están bien
definidos. Un error muy común en los grandes sitios es que todos sus títulos comienzan por una
larga cadena de texto que empieza por la empresa, luego el subsitio, luego la categoría y hasta el
último el tema de la página que estamos viendo (y eso si es que incluyen el tema). Si los títulos de
está página estuvieran escritos así, el título de este artículo sería algo como "Hospedaje web Sitio
Oficial – hospedaje-web.com – Usabilidad – Errores comunes…..". Esto es generalmente un error. Es
conveniente comenzar nuestros títulos con la información más relevante: dónde estoy, de qué
trata esta página, etc. Esto cumplirá también otras funciones: nos ayudará con el posicionamiento de
nuestro contenido en buscadores y le ayudará al usuario a identificar el contenido de las ventanas
cuando las tenga minimizadas.

6.- Inconsistencias

Otra de las claves más elementales de la usabilidad en el desarrollo web es la consistencia. Debemos
asegurarnos de dos cosas:

• Todos nuestros botones, funciones e información persistentes (que se mantienen a lo largo

de nuestro sitio) funcionan igual en todas partes.

• Que nuestras secciones persistentes sean en realidad persistentes, es decir, que se

mantengan visibles en el mismo lugar en todas las pantallas, salvo casos excepcionales
donde el sentido común indique lo contrario.

Es importante que nuestros desarrollos sean predecibles. De esta forma los usuarios los
comprenderán y hasta memorizarán, lo que les facilitará su uso.

7.- No brindar un mecanismo de contacto y retroalimentación

Es terrible para los usuarios no brindarles un mecanismo claro de contacto. Poner una forma de
contacto no debe sustituir preferentemente a ofrecer unas cuantas direcciones de e-mail de

5
Internet – historia - usabilidad

contacto ya que hay pocas cosas más frustrantes que llenar un formulario de contacto en una página
web y nunca recibir una respuesta. Por esto, debemos brindar mecanismos efectivos para que los
mensajes que nos envíen a través de nuestro sitio web los lea un ser humano y hay que hacer lo
posible por responderles a todos y cada uno de ellos.

8.- No brindar la posibildad de navegar con la tecla "Tab"

Es muy útil para los sitios y aplicaciones que se utilizan frecuentemente y aún mas para los que
tienen muchos formatos de llenado, la navegación a través de la tecla "Tab". Para determinar un
correcto orden de navegación entre los elementos activos (campos, ligas, botones) debemos
emplear la etiqueta "tabindex" de HTML que nos permite determinar el orden en que se irán
recorriendo los elementos al navegarlos por medio de la tecla Tab. Si no hacemos esto le quitamos la
posibilidad a los usuarios más frecuentes de nuestro desarrollo de agilizar su trabajo y su
navegación.

9.- Areas activas muy pequeñas (botones y ligas)

Otro grave error de usabilidad que se comete muy frecuentemente es poner áreas activas (botones
y ligas) demasiado pequeñas. Esto genera constantemente clicks erroneos a ligas contiguas o
incluso si las ligas son verdaderamente muy pequeñas, la imposibilidad de navegar correctamente el
sitio o aplicación. Hay que probar la facilidad con la que se le puede dar click a todas nuestras áreas
activas para mejorar tanto el tamaño de las mismas como el espaciamiento que existe entre ellas.

10.- No mantener los campos de un formato cuando hay un error en el llenado

Este tal vez es de los errores de usabilidad más molestos y comunes que existen en los desarrollos
web de la actualidad y consiste en que cuando alguien está llenando un formato y tiene un error, el
sistema le arroja el error pero vuelve a desplegar los campos del formato vacíos, es decir, no
almacenó la información que introdujimos antes del error. Esto es de lo más frustrante que puede
haber al usar un sitio web y más aún si es un formato muy largo o que se tiene que llenar con mucha
frecuencia. Un error de esta naturaleza puede provocar que un usuario simplemente deje de utilizar
nuestro desarrollo.

Navegabilidad
Para que un sitio web sea usable (es decir, le permita al usuario obtener fácilmente lo que quiere),
debe ser navegable. La navegabilidad es la facilidad con que pueden recorrerse las distintas
secciones de un sitio web sin perderse en él.

Una buena navegabilidad es la que permite al usuario saber, en todo momento, dónde se encuentra
y dónde hallar lo que desea. Una regla habitual establece que el usuario debe poder acceder a
cualquier información realizando no más de tres clics. Si bien esta regla no debe ser adoptada a
rajatabla (puede obligar a concentrar demasiada información en pocas páginas), es una buena
referencia para tener en cuenta.

Una Web navegable debe responder a tres sencillas preguntas:

• ¿Dónde estoy?

6
Internet – historia - usabilidad

• ¿Dónde he estado?
• ¿Dónde puedo ir?

Recursos para mejorar la navegabilidad:

• El menú de navegación hacia las principales secciones del sitio web debe repetirse en todas
sus páginas. Es deseable que siempre mantenga el mismo formato. Pueden usarse dos
menús, uno de acceso rápido (en el encabezado de la página) y otro más detallado (en el
pie).

• Los breadcrumbs o migas de pan son ayudas visuales, generalmente situadas en el

encabezado de la página, que nos indican nuestra ubicación actual y su nivel jerárquico
dentro de la estructura del sitio web. Por ejemplo, si accedimos a un sitio web de comercio
electrónico por su página de inicio y navegamos hasta encontrar bicicletas rodado 26, el
breadcrumb puede indicar: “Inicio > Deportes > Ciclismo > Bicicletas > Rodado 26”. Cada
nivel debe estar enlazado, para que podamos subir varios escalones en la jerarquía sin
necesidad de utilizar la opción “Atrás” del navegador varias veces.

• El mapa del sitio muestra todas sus páginas internas organizadas jerárquicamente. Si el
usuario quiere acceder a una página de nivel muy profundo pero no recuerda la sucesión de
enlaces necesaria para llegar a ella, el mapa del sitio le proporcionará un enlace directo.

Una buena navegabilidad agiliza la experiencia de navegación por nuestro sitio web, eliminando
cualquier obstáculo entre el usuario y la información que busca. Puede ser el principio de una
relación cordial entre la marca y sus potenciales consumidores.

La estructura de navegación debe dar pistas claras para que el usuario aprenda a acceder a la
información.

7
Internet – historia - usabilidad

Ejemplos de medición de Usabilidad

• Pautas para tests de Usuario en sitios web: es un documento que permite desarrollar un
test de usuario; contempla las preguntas más relevantes que se deben realizar y el
procedimiento para llevarlo a cabo exitosamente.

• Pautas para Tests Heurísticos: es un documento que muestra los temas principales que se
deben abordar en un test de este tipo, mostrando los aspectos centrales y la forma de
evaluar para generar el informe final correspondiente.

• Checklist de Usabilidad: documento que apoya la comprobación de usabilidad de un Sitio

Web, a través de preguntas directas acerca de las características de su interfaz. Ejemplo a
continuación.

Cumple
Conceptos de Usabilidad
Sí No

Identidad Corporativa

1. ¿La portada del Sitio refleja la identidad y pertenencia de la institución?

¿Existen elementos de la imagen corporativa del Gobierno en la Portada de su Sitio? ¿Se

2.
repiten en todas las páginas?

¿El logotipo del Gobierno ha sido incluido en un lugar importante en la Portada y en las
3.
páginas interiores del Sitio?

¿Todas las páginas cuentan con un título que indique el nombre de la institución e
4.
información de contactos virtuales y físicos al pie de la página?

Utilidad del Sitio Web

¿El Sitio ofrece información sobre las actividades y servicios más recientes e importantes
1.
que está llevando a cabo la institución?

¿Los usuarios pueden encontrar fácilmente en la portada la información acerca de las

2.
actividades y servicios más importantes de la institución?

Navegación

1. ¿El diseño del Sitio es eficiente, rápido e intuitivo?

2. ¿Aparece el menú de navegación en un lugar destacado? ¿Se ve fácilmente?

8
Internet – historia - usabilidad

Cumple
Conceptos de Usabilidad
Sí No

3. ¿Verificó la consistencia de todos los enlaces?

4. ¿El Sitio cuenta con un mapa o buscador que facilite el acceso directo a los contenidos?

5. ¿El Sitio mantiene una navegación consistente y coherente en todas las pantallas?

Visibilidad del estado del sistema

1. ¿Se informa al usuario claramente el área del Sitio que está visitando?

2. ¿El Sitio Web diferencia entre enlaces visitados y enlaces por visitar?

En caso de servicios o trámites en línea, ¿ofrece información de cuántos pasos faltan

3.
para terminar?

Consistencia y cumplimiento de estándares

1. ¿El HTML del Sitio ha sido validado satisfactoriamente según w3c.org?

2. ¿El o los archivos de Hojas de estilo (CSS) han sido aprobados según w3c.org?

3. ¿Comprobó la consistencia de Links usando el verificador de w3c.org?

Atención de errores

1. ¿Usa Javascript para validar formularios durante su llenado y antes de enviarlos?

¿Usa elementos destacados para indicar los campos obligatorios dentro de un

2.
formulario?

¿Después de que ocurre un error, es fácil volver a la página donde se encontraba antes
3.
que se produjese o entrega recomendaciones de los pasos a seguir?

Estética y diseño

1. ¿Usa jerarquías visuales para determinar lo importante con una sola mirada?

2. ¿Las imágenes tienen tamaños adecuados que no dificultan el acceso a las páginas?

9
Internet – historia - usabilidad

Cumple
Conceptos de Usabilidad
Sí No

3. ¿Las imágenes tienen etiqueta ALT en el código HTML para facilitar la navegación?

Ayuda ante errores

En caso de errores de consistencia dentro del sitio, ¿se ofrece un mensaje de

1. personalizado mediante una página explicativa?, (Por ejemplo: Error 404 para página
inexistente)

¿Entrega información de contacto fuera de Internet? (Por ejemplo: teléfono

2.
institucional, fono 600, mesa de ayuda, OIRS)

3. ¿Ofrece área de Preguntas Frecuentes con datos de ayuda a usuarios?

2. ¿Ofrece páginas de ayuda que explican cómo usar el Sitio?

Retroalimentación (Feedback)

¿Puede el usuario ponerse en contacto con el encargado del Sitio Web para hacer
1.
sugerencias o comentarios?

¿Funcionan correctamente los formularios de contacto?, ¿Ha probado cada uno de

2.
ellos?

3. ¿Hay alguien encargado de recibir y contestar estos mensajes?

10
Internet – historia - usabilidad

Análisis eyetracking - Qué miran los usuarios

VIDEO

Eye Tracking Demo

https://youtu.be/lo_a2cfBUGc

Seguimiento de ojos (traducido del inglés eye tracking) es el proceso de evaluar, bien el punto
donde se fija la mirada (donde estamos mirando).

El eyetracking es una solución tecnológica que pretende extraer información del usuario analizando
sus movimientos oculares.

El eyetracker es la herramienta con la que se realiza dicha acción y consiste en un monitor especial
que lanza rayos infrarrojos a los ojos del que está mirando la imagen sujeto de análisis. La dirección
que siguen estos rayos va de la pupila del usuario al aparato, permitiendo así calcular con precisión
dónde está mirando.

¿Qué información extraemos cuando realizamos Eye Tracking?

• Dónde está mirando una persona de forma continua.
• Qué le está llamando la atención y qué se la llamaba hace un momento.
• Qué intenciones tiene esa persona.
• El estado de ánimo de esa persona.
• Donde debe ir colocado el contenido de valor para el cliente.
• Si las señales visuales contenidas en la Web conducen de forma eficaz al cliente.
• Capacidad del cliente para localizar la información que necesita en la Web.

¿Para qué nos sirve esta información?

• Para mejorar la Estructura del Contenido
• Mejorar la experiencia de los usuarios en la web
• Guiar al usuario hacia el objetivo de su negocio
• Facilitar los procesos que desea que realice el usuario
• Conseguir Branding en Internet
• Mejorar la imagen de marca a través del sitio web

Con los resultados que nos proporcionará este análisis podremos extraer conclusiones que afectarán
al diseño y estructura de nuestra web, ya que tendremos que facilitar en la medida de lo posible la
usabilidad de la misma y establecer en lugares destacados la información que consideremos más
relevante.

11
Internet – historia - usabilidad

Banners invisibles
Los usuarios no miran los banners con publicidad tradicional. El contenido es lo más importante.

La importancia de las imágenes

En Facebook y otras redes sociales como youtube o l inkedin, las imágenes tienen más relevancia
que los textos y la atención visual se focaliza en las imágenes.

12
Internet – historia - usabilidad

Youtube, hay que tener en cuenta la imagen que se elije para los videos.

Linkedin y la relevancia de la foto de perfil.

13
Internet – historia - usabilidad

14