Usabilidad Básica

Usabilidad y Experiencia de
Usuario (UX)
Iniciación
Usabilidad
ASPECTOS LEGALES
Todas las marcas, empresas y servicios de estas páginas que no son propiedad de Instituto Internacional de Mar-
keting son marcas registradas de sus respectivos propietarios y son reconocidas como tales por el Instituto Inter-
nacional de Marketing. Aparecen en esta publicación a efectos de recopilación de información. Dichos propieta-
rios pueden solicitar la modificación o eliminación de la información que les concierna. Por otro lado, la aparición
de estas terceras marcas no implica necesariamente la recomendación de las mismas.
2
Internacional de Marketing
ÍNDICE
1. Introducción a la usabilidad ................................................... 6

1.1. ¿Qué es la usabilidad? ....................................................................... 6
1.2. El origen de la usabilidad web .......................................................... 11
1.3. Conceptos relacionados con la usabilidad ........................................ 13
1.4. La cognición y la percepción humanas ............................................. 19
1.5. La experiencia del usuario (UX) ...................................................... 23
1.6. Importancia y beneficios de la usabilidad web ................................. 27
1.7. Testeo y mejora de la usabilidad ...................................................... 28
1.8. Los tres niveles del diseño ............................................................... 36
1.9. Los profesionales de la usabilidad y la UX ....................................... 40
2. Principios fundamentales de usabilidad ................................. 42

2.1. Los 10 principios de usabilidad de Nielsen....................................... 42
2.2. Principios del diseño de interfaces de Shneiderman ........................ 50
2.3. Recomendaciones generales del diseño de sistemas ......................... 57
2.4. Adaptación a dispositivos móviles ................................................... 66
3
Usabilidad
3. Usabilidad para la conversión................................................ 79

3.1. El ROI (Return On Investment) ....................................................... 82
3.2. El valor de vida del cliente: CLV o Costumer Lifetime Value ............ 86
3.3. El modelo de gestión ....................................................................... 88
3.4. Las landing pages: optimización de la conversión ........................... 91
3.5. Bases de evaluación y testeo .......................................................... 103
Glosario ................................................................................. 108
4
Introducción
“En la búsqueda de soluciones probablemente hemos priorizado demasiado las
soluciones técnicas y nos hemos olvidado de las psicológicas”.
Rory Sutherland
La usabilidad hace referencia a la relación entre un dispositivo, herramienta o

software y la persona que lo utiliza. Más concretamente, habla de la facilidad para
utilizarlo, de la curva de aprendizaje que el ser humano tiene que trazar para lograr
dominarlo y el valor que el objeto aporta a la vida diaria de la persona.
Las directrices de usabilidad que veremos a continuación están basadas en la

investigación y la observación a lo largo de los años, antes incluso de que
Internet se convirtiera en un medio de masas. Al fin y al cabo, la relación
entre la tecnología y el usuario se remonta prácticamente al inicio de los
tiempos, con las primeras herramientas, y hay una serie de principios que
todavía hoy son vigentes con las nuevas tecnologías. En el fondo, la tecnología
ha evolucionado mucho más que los seres humanos, y como veremos los
principios de usabilidad para todo tipo de dispositivos y diseños siguen siendo
aplicables 30 años después de formularse a nivel teórico. Muchas de las
teorías que explicaremos en este libro fueron desarrolladas en la década de los
90 por Jakob Nielsen (1957, Dinamarca), ingeniero de interfaces y una de las
personas más respetadas en el ámbito de la usabilidad.
Con el tiempo y la aparición de nuevos dispositivos y formas de interacción,

estas directrices se han ido adaptando y han aparecido otras de nuevas.
Internet y las tecnologías digitales han sido (y siguen siendo) una revolución
para nuestro día a día, prácticamente en cualquier faceta de nuestras vidas.
Por esto los principios de usabilidad y diseño, orientados a facilitar el acceso y
el uso de cualquier usuario a sus prestaciones, juegan un papel fundamental
en esta era de la digitalización.
En este temario haremos una panorámica teórica del concepto usabilidad, de

su aplicación en las herramientas digitales y en cómo influye directamente en
cualquier aspecto de los negocios con mínima orientación digital.
5
Usabilidad
1. Introducción a la usabilidad
1.1. ¿Qué es la usabilidad?

Existen varias definiciones aplicables al concepto de usabilidad. Veamos
algunas de ellas:
 “La usabilidad se refiere a la capacidad de un software de ser

comprendido, aprendido, usado y ser atractivo para el usuario en
condiciones específicas de uso” (ISO/IEC 9241).
 “Usabilidad es la eficiencia y satisfacción con la que un producto

permite alcanzar objetivos específicos a usuarios específicos en un
contexto de uso específico” (ISO/IEC 9241).
 “La usabilidad es un atributo de calidad que mide lo fáciles que son de

usar las interfaces. La palabra “usabilidad” también se refiere a métodos
que pueden utilizarse durante el proceso de diseño para asegurar la
facilidad de uso de la interfaz” (Jakob Nielsen).
 “La usabilidad es el grado en el cual algo (una aplicación, dispositivo o

cualquier otra cosa) es fácil de usar y está adaptado a las personas que lo
usan” (UXPA - User Experience Professionals Association).
 “La usabilidad se refiere a la medida en que un producto puede ser

utilizado por determinados usuarios para conseguir objetivos específicos
con efectividad, eficiencia y satisfacción en un contexto de uso específico”
(ISO 9241-11).
A pesar de que las aproximaciones de cada fuente son ligeramente distintas, todas
tienen algo en común: hablan sobre la relación, a nivel funcional, que se establece
entre un usuario y un sistema; cuyo principio fundamental es que dicho sistema
esté diseñado de tal forma que sea de fácil uso para el usuario y, de esta forma,
asegurar su satisfacción.
6
Dadas estas definiciones, y otras que puede haber, queda claro que a la hora de
abordar la usabilidad es necesario revisar una serie de aspectos ligados a la manera
cómo se relacionan las personas y los sistemas.
Estos aspectos sirven, a su vez, como baremos de calidad para evaluar que un
espacio o herramienta digital (una aplicación, una página web, un blog, una app,
un software, etc.) cumple con las características necesarias para ser considerado
usable. Los explicamos a continuación los 5 principios de la usabilidad:
1. Facilidad de aprendizaje: ¿Cómo de fácil es para los usuarios llevar a

cabo tareas básicas la primera vez que se encuentran con el diseño?
Básicamente, uno de los objetivos de la usabilidad es que un usuario que se
enfrenta por primera vez a un sistema, sitio web o app pueda intuir
fácilmente cómo empezar a utilizarlo, navegar... en definitiva, que sepa cómo
usarlo.
2. Eficiencia: Una vez que los usuarios ha aprendido el diseño, ¿con qué
rapidez pueden realizar las tareas? Dando continuidad al aprendizaje, el
siguiente objetivo es que los usuarios aprendan en seguida a utilizar todo el
potencial de la herramienta o página con eficiencia y efectividad.
3. Memorabilidad: Cuando los usuarios vuelven al diseño después de un

tiempo sin haberlo usado, ¿con qué facilidad pueden volver a utilizarlo con
soltura? Es importante que el diseño de un sitio o herramienta facilite el
recuerdo de los procesos para que, si un usuario entra de nuevo tiempo
después, no tenga que volver a aprender cómo utilizarla.
4. Errores: ¿Cuántos errores cometen los usuarios, cómo de graves son y con
qué facilidad pueden recuperarse de los mismos? Consiste en anticipar los
posibles errores que pueden cometer los usuarios durante el uso y aportar
soluciones y/o asistencia con celeridad y efectividad.
5. Satisfacción: ¿Cómo de agradable es utilizar el diseño? Los cuatro puntos

anteriores para favorecer la facilidad de uso de un elemento contribuyen a
generar una satisfacción en el usuario. Es un tema subjetivo, pero
consecuencia directa de una buena aplicación de la usabilidad.
7
Usabilidad
Para saber más
Existen varias organizaciones con proyección mundial que desde hace

años se dedican a marcar unas pautas técnicas para la normalización de
estándares globales relacionados con la electrónica, la informática y,
desde hace tiempo, también la usabilidad y el diseño web. Las más im-
portantes son la ISO (International Organization for Standardization),
la IEC (International Electrotechnical Comission) y la BSI (British
Standards Institution).
Según Yusef Hassan y Sergio Ortega, dos referentes en materia de usabilidad, una
de las mejores formas de evaluar la usabilidad de un producto o aplicación es
poniéndola a prueba con usuarios reales, un método conocido como test de
usuarios. Observando cómo diferentes usuarios se enfrentan a tareas interactivas
podemos cuantificar objetivamente la usabilidad del diseño, contabilizando el
número de errores que cometen (eficacia) o midiendo el tiempo que
tardan en completarlas (eficiencia).
Además, preguntando a los usuarios una vez finalizadas sus tareas, podremos
medir la usabilidad subjetiva o percibida, su grado de satisfacción. Esta
naturaleza empírica de la usabilidad hace posible, por ejemplo, comparar la
usabilidad de un diseño y la de su rediseño, y comprobar de este modo si los
cambios realizados han sido acertados o no.
Yusef Hassan es defensor de la premisa que la mejor forma de crear un sitio web
usable es realizando un diseño centrado en el usuario, pensando en él y no en
aspectos puramente tecnológicos, donde la creatividad y las posibilidades técnicas
serían la única limitación porque no se tendría en cuenta que aquello no tendría
que ser utilizado o aprendido por las personas.
Según la UXPA, el diseño centrado en el usuario (UCD, User Centered

Design) es un enfoque de diseño basado en la información sobre las personas que
van a utilizar el producto. Los procesos de diseño centrado en los usuarios se
desarrollan teniéndolos en cuenta en todas las fases, empezando por la
8
planificación del producto, la cual surge de una necesidad detectada en los propios
usuarios.
En este modelo cuatro actividades forman el ciclo principal de trabajo:
Figura. Proceso de diseño centrado en el usuario. 1
1. Especificación del contexto de uso
Identificación de los usuarios que utilizarán el producto, para qué lo utilizarán (es
decir, qué finalidad práctica tiene el producto) y bajo qué condiciones lo utilizarán.
2. Especificación de requerimientos y necesidades
Identificación de cualquier requerimiento de negocio u objetivos de usuarios que

deban ser cumplidos por el producto para ser satisfactorio. Esto determinará las
funcionalidades del producto.
3. Creación de soluciones técnicas y de diseño
Esta parte del proceso se desarrolla por fases, empezando por la creación de un
concepto y un diseño base hasta terminar con el diseño completo para su prueba
piloto.
1 Fuente: http://www.nosolousabilidad.com/manual/3.htm
9
Usabilidad
4. Evaluación del diseño
Lo más importante es que la evaluación, idealmente mediante tests de usabilidad

con usuarios reales que van a utilizar el producto, sea una parte integral del
proceso. El proceso finaliza, y el producto puede ser lanzado, cuando los
requerimientos marcados al principio se cumplen con resultados objetivamente
fiables.
¿Cuál es la diferencia entre Usabilidad y DCU? La usabilidad es un atributo

de calidad del diseño, mientras que el DCU es una vía para alcanzar y mejorar em-
píricamente la usabilidad del producto. En otras palabras, la usabilidad representa
el "qué", mientras el DCU representa el "cómo". Esto significa que se pueden dise-
ñar productos usables sin aplicar la filosofía DCU, pero en cambio poner en prácti-
ca estos principios DCU garantiza la creación de objetos usables.
A modo de resumen, podemos afirmar que un sitio web podrá satisfacer las nece-
sidades de un usuario, organización, institución o empresa si es capaz de dar res-
puesta a las necesidades de los usuarios a través de la calidad de uso, la faci-
lidad de aprendizaje, la eficiencia de sus resultados y la satisfacción generada. Esto
se logra adaptando la tecnología al público que la va a utilizar y cumpliendo las
expectativas, es decir, facilitando la consecución de los objetivos por los cuales
se ha diseñado el objeto, el sitio web, el software o la aplicación.
Las métricas básicas recomendadas para evaluar la usabilidad del producto

resultante son las siguientes:
 Eficacia: Nivel de precisión con la que los usuarios completan las tareas y
alcanzan los objetivos especificados.
 Eficiencia: Cantidad y utilidad de recursos empleados en relación con la

efectividad.
 Satisfacción: Comodidad de uso, facilidad de aprendizaje, memorabilidad

y valoraciones positivas respecto al uso del producto.
10
1.2. El origen de la usabilidad web

La interacción persona-ordenador (HCI, Human Computer Interaction) es una
área de investigación y práctica que surgió a inicios de los años ochenta, inicial-
mente como un área de especialización de ciencias informáticas que abarcaba a las
ciencias cognitivas y a la ingeniería de factores humanos (Human Factors Engi-
neering).
Figura. Esquema básico de la ingeniería de factores humanos.2
Según Joe Dumas, aunque hubieron algunos antecedentes, el interés por la HCI
empezó en un encuentro en 1982 titulado “Factores humanos en los sistemas in-
formáticos”. Durante los siguientes años de esa década, un dedicado grupo de psi-
cólogos e investigadores de factores humanos publicaron estudios e informes de
análisis sobre la interacción persona-ordenador.
Sin embargo, hasta finales de los años setenta las personas tenían acceso a orde-
nadores eran básicamente los profesionales informáticos y otros pocos aficionados
a la materia. Esta situación cambió completamente a finales de los setenta con la
irrupción de los ordenadores personales, que ampliaban el abanico de consumido-
res (usuarios) a gente que no eran de perfil técnico, pero que también deberían de
ser capaces de utilizar las funcionalidades del ordenador, incluyendo sus aplica-
ciones (de productividad, editores de texto, hojas de cálculo y juegos interactivos) y
plataformas (sistemas operativos, lenguajes de programación y equipos).
2 Fuente: http://bit.ly/2n2HJ7s
11
Usabilidad
De entrada no fue así, ya que el choque tecnológico fue notable y requería de una
formación específica y especializada. Esta deficiencia en la relación entre la perso-
na (el cliente) y el ordenador (el producto) reveló la necesidad de pensar en meca-
nismos para facilitar el aprendizaje y el uso de los ordenadores a la gente que los
compraba.
A raíz de esta problemática se empezaron a publicar muchos libros sobre el diseño

de software para usuarios, pero ninguno de ellos incluía el concepto de “usabili-
dad” tal y como lo entendemos hoy. Las discusiones sobre los métodos de evalua-
ción se enfocaban en experimentos de investigación, revisiones de guías y listas de
verificación.
Solo había unos pocos programas académicos de posgrado en HCI y la mayoría se

centraban en la aplicación de métodos e investigación científica conductual. Parte
del problema era la poca amplitud de miras, en el sentido que el HCI era visto co-
mo una nueva área en la cual aplicar métodos tradicionales, más que una que re-
quiriera sus propios métodos.
Los tests de usabilidad eran vistos como una variación de los experimentos de in-
vestigación y las inspecciones de las interfaces de usuario se realizaban mediante la
aplicación de largas listas de guías y buenas prácticas.
El concepto de usabilidad surgiría hacia finales de los ochenta, con la publicación

de una serie de capítulos y de trabajos sobre un tema denominado como “ingenie-
ría de la usabilidad”. Estas publicaciones planteaban una nueva aproximación al
diseño y evaluación de los productos que ponía el foco en una aproximación prác-
tica del diseño de productos en lugar de destacar los experimentos de investiga-
ción.
El enfoque insistía en el establecimiento de metas, prototipado y evaluación itera-

tiva ya desde fases tempranas en los procesos de desarrollo. Destacaba la impor-
tancia del contexto de trabajo al crear productos usables y funcionales para mejo-
rar la productividad. También favorecía la integración de los equipos de usabilidad
en equipos de diseño de producto y en la valoración de los costes y beneficios de
las decisiones de diseño. En definitiva, y simplificando mucho, se hablaba sobre
cómo hacer diseños prácticos de una manera práctica.
12
Este enfoque se convirtió en la base de los principios teóricos y métodos prácticos

de usabilidad durante la siguiente década, los 90. A partir de entonces, “usabili-
dad” se convertiría en el término definitivo a la hora de hablar de diseños de pro-
ductos y procesos pensados para ser utilizados por los usuarios.
1.3. Conceptos relacionados con la usabilidad

Con el tiempo la ciencia de la usabilidad ha ido evolucionando y a su alrededor se
ha ido construyendo una comunidad que ha ido expandiendo sus capacidades y
recursos, cada vez más amplios. Actualmente, la calidad de cualquier sitio web o
aplicación se mide fundamentalmente en base a su grado de usabilidad.
Un sitio web se puede mejorar de muchas formas para hacerlo más satisfactorio
para los usuarios, de modo que al final la usabilidad es una consecuencia de
diferentes factores. Repasamos las diferentes aproximaciones a la
usabilidad que nos pueden ayudar a diseñar un sitio web más satisfactorio:
a. Encontrabilidad (findability)
La encontrabilidad puede entenderse de dos formas:
 Por una parte, es la predisposición de un sitio web, gracias a su diseño y

contenidos, por ser encontrado en Internet.
 Por otro lado, desde una perspectiva más concreta, mide la facilidad con
que los usuarios encuentran la información que buscan dentro del sitio.
Hay elementos externos que influyen directamente en la encontrabilidad, como los

algoritmos de buscadores (y el SEO que realizamos), las campañas de marketing y
las acciones en redes sociales; pero el diseño de interfaces, la navegación
interna y la organización de la información tienen influencia directa en
ellos.
La usabilidad de un sitio web está estrechamente relacionada con la

encontrabilidad, ya que cuanto más sencillo resulte para el usuario navegar por un
sitio web, mayores posibilidades tendrá de encontrar lo que busca.
13
Usabilidad
b. Accesibilidad
La accesibilidad web es un conjunto de técnicas aplicables al diseño y a la usabili-

dad de sitios web para facilitar el acceso y la comprensión de la información
a las personas con algún tipo de discapacidad visual o auditiva.
Su objetivo es, mediante la aplicación de diferentes técnicas, conseguir que el dise-

ño del sitio permita a cualquier persona, independientemente de sus capacidades o
contexto de uso, acceder a sus contenidos. Así mismo, otro requisito para que una
web sea accesible es que cualquier persona pueda visualizar sus conteni-
dos independientemente del dispositivo que use (hardware o software).
Por ejemplo, existen aplicaciones conocidas como lectores de pantalla, como

ChromeVox, Jaws o VoiceOver, que cumplen la función de leer en voz alta la pan-
talla a medida que el usuario mueve el cursor por los diferentes elementos que la
componen.
Figura. En este vídeo puedes ver cómo funciona ChromeVox:

https://www.youtube.com/watch?v=Lgf4-CCjI7I
Estas aplicaciones cumplen su función, pero los webmasters también tienen que
poner de su parte para que el recorrido por las páginas sea comprensible en vez de
14
caótico para alguien que no lo puede ver bien, o directamente que no lo puede ver
en absoluto.
Los usuarios deberían encontrar información de manera rápida y fácil, ya

sea con múltiples herramientas de navegación, que estructuren el contenido o sus
jerarquías para facilitar incluso la lectura en diagonal sin que se pierda informa-
ción esencial. Para ello, hay diferentes características a considerar que forman
parte de la accesibilidad:
 Legibilidad: Los contenidos deberían ser muy fáciles de leer, por lo que la
presentación de la información, la tipografía, tamaños de letra, negritas, y
la paleta de colores escogida (siempre es recomendable letras negras sobre
fondo blanco) son claves.
 Lenguaje: El tipo de lenguaje debe adaptarse al público al que nos dirigi-

mos. Este aspecto influye a nivel de tono, de vocabulario, en la formalidad
de los textos, en la extensión de los contenidos, en los formatos, etc. En ge-
neral, las frases cortas y de estructura simple suelen favorecer bastante la
lectura.
 Visibilidad: Ayuda al usuario a construir un modelo mental del producto

y, por lo tanto, a predecir su comportamiento conforme a las acciones que
tome. Los elementos clave deberían ser especialmente empáticos con el
usuario y estar estructurados de tal forma que sean identificables.
 Mobile-first: Concepto que prioriza el diseño web en los dispositi-

vos móviles (responsive), sobre todo a día de hoy que son el dispositivo
dominante en la navegación y consumo de contenidos digitales.
El máximo organismo dentro de la jerarquía de Internet que se encarga de promo-

ver la accesibilidad es el World Wide web Consortium (W3C), en especial su
grupo de trabajo web Accessibility Initiative (WAI). En 1999 el WAI publicó la ver-
sión 1.0 de sus pautas de accesibilidad web. Con el paso del tiempo se han conver-
tido en un referente internacionalmente aceptado. En diciembre del 2008 las
WCAG 2.0 fueron aprobadas como recomendación oficial.
15
Usabilidad
¿Por qué debe ser mi página web accesible?
 Simplifica el desarrollo web.

 Ahorra costes.
 Mejora la indexación de la página web en buscadores.
 Facilita la independencia de dispositivo y la interoperabilidad.
 Mejora la usabilidad de las páginas web.
 Mejora el acceso en general.
 Aumenta el público objetivo.
¿Quiénes deben por ley tener una página web accesible?
La ley obliga a tener una página web accesible a:
 Administraciones públicas o webs elaboradas y/o mantenidas con fi-

nanciación pública.
 Entidades y empresas que gestionan servicios públicos. Especialmente las

de carácter educativo, sanitario y servicios sociales, así como centros
educativos sostenidos, total o parcialmente, con fondos públicos.
 Empresas que prestan servicios de especial trascendencia económi-

ca (comunicaciones electrónicas, servicios financieros, suministro de agua,
gas o electricidad, agencias de viajes, transporte de viajeros, actividades de
comercio al por menor) siempre y cuando agrupen a más de cien trabajado-
res o tengan un volumen anual de operaciones que exceda de 6.010.121,04
euros.
Prioridad y niveles de la accesibilidad web
El grado de accesibilidad se establece en niveles denominados A, Doble A, y Triple

A, correspondiendo respectivamente a criterios mínimos de accesibilidad, extendi-
dos, y accesibilidad máxima.
Técnicamente la accesibilidad se implementa mediante pautas de lógica estructu-

ral de documentos, contenido autoexplicativo y semántica adicional. La intención
16
es permitir el acceso a la información a la audiencia lo más extensa posible, inde-

pendientemente se su dotación tecnológica y capacidad sensorial.
Se incide especialmente en que las capacidades tecnológicas punteras (entiéndase

por ejemplo animaciones con Adobe Flash, JavaScript, AJAX) se usen con la mo-
deración suficiente para llegar al máximo posible de usuarios con una funcionali-
dad suficiente, sin desvirtuar el concepto de acceso frente al de avance tecnológico
de moda, y prestando especial cuidado de ofrecer información alternativa.
Cada punto de verificación está asignado a uno de los tres niveles de prioridad
establecidos por las pautas:
 Prioridad 1: son aquellos puntos que un desarrollador Web tiene que

cumplir ya que, de otra manera, ciertos grupos de usuarios no po-
drían acceder a la información del sitio Web.
 Prioridad 2: son aquellos puntos que un desarrollador Web debería

cumplir ya que, si no fuese así, sería muy difícil acceder a la infor-
mación para ciertos grupos de usuarios.
 Prioridad 3: son aquellos puntos que un desarrollador Web debería

cumplir ya que, de otra forma, algunos usuarios experimenta-
rían ciertas dificultades para acceder a la información.
En función a estos puntos de verificación se establecen los niveles de

conformidad:
 Nivel de Conformidad "A" (A): todos los puntos de verificación de priori-

dad 1 se satisfacen.
 Nivel de Conformidad "Doble A" (AA): todos los puntos de verificación de

prioridad 1 y 2 se satisfacen.
 Nivel de Conformidad "Triple A" (AAA): todos los puntos de verificación

de prioridad 1, 2 y 3 se satisfacen.
17
Usabilidad
c. Credibilidad
La credibilidad es una de las cualidades más importantes que una marca (personal
o corporativa) puede atesorar en Internet. Ser creíble está asociado a ser ex-
perto en un determinado ámbito y a ofrecer productos y contenidos de calidad. En
definitiva, la credibilidad genera influencia y la influencia genera más seguidores
que pueden convertirse en clientes.
Los criterios de usabilidad web, sobre todo el diseño, contribuyen a favorecer esta
cualidad, a hacer el sitio más fiable y satisfactorio. Es importante que a través de la
imagen hagamos que nuestros productos sean deseables, lo que requiere conseguir
a través de la técnica un vínculo de carácter emocional con los usuarios.
d. Valor o utilidad
Es la gran pregunta: ¿Se han satisfecho las necesidades del usuario?

¿Ofrecemos un valor claro?
Figura. La usabilidad de un sitio web influye tanto en su encontrabilidad como en la

satisfacción del usuario. 3
En relación con la satisfacción surge la experiencia de uso, que según la UXPA

es cada aspecto de la interacción del usuario con sitio: vídeos, imágenes, texto,
sonidos, colores, organización... La experiencia de usuario trabaja para coordinar
3 Fuente: http://bit.ly/1i956BN
18
estos elementos para permitir la mejor interacción posible por parte de los
usuarios y, por tanto, satisfacer sus expectativas.
1.4. La cognición y la percepción humanas

Cuando diseñamos un producto o servicio, es importante entender cómo el cerebro
interpreta la realidad para comprender sus limitaciones y la posibilidad de
distorsión. Tal y como explica Yusef Hassan, “dado que el diseño centrado en el
usuario requiere conocer al usuario -sus necesidades, habilidades, contexto,
entorno, objetivos y motivaciones -, el diseño de interfaces gráficas exige
conocer „los ojos del usuario‟, o más correctamente, cómo las personas
percibimos visualmente”.
Figura. Etapas de la cognición de Ulrich Neisser.4
En otras palabras, ante todo, debemos plantearnos el diseño de un sitio, contenido

o aplicación teniendo en cuenta cómo lo van a percibir los usuarios
(mediante sus sentidos, principalmente la vista).
4 Fuente: http://bit.ly/2DxOqIZ
19
Usabilidad
Un ejemplo muy básico: en marketing de contenidos cada vez están más de moda
los vídeos con subtítulos o textos incorporados que están pensados para ser vistos
sin audio. Esto es porque muchos usuarios van haciendo scroll en sus perfiles de
redes sociales y se quedan mirando los contenidos que les aparecen, muchas veces
en sitios públicos, y no quieren que se les disparen sonidos del teléfono. De esta
forma, se han planteado contenidos de vídeo usables pensados en el momento, el
dispositivo y la forma de consumo.
A continuación exponemos algunos comportamientos del cerebro que afectan

a la percepción y que por tanto debemos tener en cuenta al plantear el diseño de
un sistema.
a) Percibimos lo que esperamos
Nuestro cerebro recoge aquellos elementos de la realidad a los que está atento, el
resto de la información queda en un segundo plano y puede pasar inadvertida.
Este comportamiento fue detectado por Christopher Chabris y Daniel Simons,

(premios Nobel 2004 en Psicología) en 1999, en un test de atención selectiva
(video). “Cuando en nuestra vida cotidiana le prestamos mucha atención a un
área o aspecto de nuestro campo visual, tendemos a no advertir objetos
inesperados, aun cuando sean prominentes. Es un error de percepción, lo que se
denomina “ceguera por falta de atención”, una de las tantas ilusiones con las que
convivimos y nos manejamos todos los días en el mundo.”
b) Nuestra atención es limitada
Actualmente, ante la abundancia de información, los usuarios generan

mecanismos de protección frente a los estímulos que ellos no han
solicitado. Por ejemplo, la ceguera a los banners consiste en que las personas
detectan con la visión periférica que una información es publicidad y
voluntariamente deciden no observarla. Este comportamiento se produce, en la
mayoría de los casos, de forma no consciente.
Según Danah Boyd, mientras las tecnologías de red proliferan en todo el mundo,
podemos asumir que existe un canal de distribución disponible para todos y entre
todos. En teoría cualquiera podría hacer llegar el contenido a otra persona. Al
20
colapsar las barreras a la distribución, lo que importa no es el acto de distribución,

sino el acto de consumo. Así, el poder ya no está en manos de quienes
controlan los canales de distribución, sino en aquellos que controlan
los recursos limitados de la atención.
Este es precisamente el motivo por el cual las estrategias de marketing digital

actualmente están basadas en atraer (pull) al consumidor mediante contenido
valioso e interesante en vez de bombardearlo indiscriminadamente con
información publicitaria (push).
c) Nuestra visión está optimizada para ver estructuras
Nuestro cerebro está diseñado para interpretar la realidad y encontrar

significado en ella. Por ejemplo, el antropomorfismo, la atribución de
características humanas a cosas o eventos no humanos, según Stewart Guthrie nos
sirve para adaptarnos al entorno y sobrevivir en él. Esta característica es lo que
permite que el cerebro se adapte al reconocimiento de nuevos patrones. La teoría
de la Gestalt describe cómo la mente organiza los datos visuales.
Cuanto más fuerte es la claridad de la forma, cuanto más evidente es el

patrón, más eficaz será el diseño. Esto en diseño se traduce en dar visibilidad
a los elementos esenciales y izar la información mediante diferentes recursos
(imágenes, tamaño de letras, negritas, destacados, etc.).
d) Nuestra visión del color es limitada
La percepción del color depende en gran medida del contexto en el que es presen-
tado. Un objeto blanco, bajo una luz de color reflejará el color de esa luz al ojo. Sin
embargo el cerebro, haciendo uso de un fenómeno llamado “constancia de color”
(video), lo percibirá como blanco. Por esto es interesante utilizar contrastes y
códigos de color (colores corporativos en todos los diseños de una empresa, por
ejemplo) para distribuir la información.
e) Nuestra visión periférica es pobre
La fóvea es un punto en el área central de la retina que es responsable de la visión

más aguda. Tiene una gran densidad de conos fotoreceptores que captan la
21
Usabilidad
información visual del exterior y ocupa hasta unos dos grados alrededor del centro.
La parafóvea incluye hasta los 10 grados y más allá, donde hacemos uso de la
visión periférica. En este punto, hay una mucha menor densidad de conos por lo
que nuestra visión es mucho más pobre.
A nivel de usabilidad, es importante colocar la información y elementos clave en

espacios centrales, visibles, que concentren el contenido importante.
f) Nuestra memoria es imperfecta
En el libro “Los siete pecados de la memoria” de Daniel L. Schacter, el autor

describe siete comportamientos del cerebro, que tienen una utilidad específica,
pero que pueden acabar acarreando problemas. Por ejemplo, la atribución errónea
consiste en recordar un hecho, pero atribuirlo incorrectamente a alguien. Estos
comportamientos demuestran que la memoria no es del todo fiable.
Por esta razón hemos mencionado la importancia de la memorabilidad, en el

sentido que cada vez que un usuario entra en un sitio web es capaz de recordar la
estructura y funcionamiento, aunque fuera de contexto quizá no lo haga de forma
exacta.
g) Reconocer es fácil, recordar es difícil
Para un usuario es más fácil escoger entre varias opciones disponibles que pensar
cuáles pueden ser esas opciones y escribir una. Por ello, a la hora de elaborar un
diseño, es recomendable que la información sea visible al usuario, para que el
esfuerzo sea menor.
h) Pensamos más sobre tareas que sobre herramientas
Al utilizar un diseño tenemos una tarea en mente, una acción que deseamos
realizar, y la herramienta que utilizaremos para desempeñar la tarea es un
elemento secundario. Por este motivo, es más adecuado presentar las opciones en
base a tareas y no en base a los elementos necesarios para llevarla a cabo
Por ejemplo, los programas de Microsoft Office a partir del rediseño que sufrieron
en 2007, agrupan las herramientas en base a tareas a lo largo de diferentes
22
pestañas que aparecen colocadas en una menú superior en forma de cinta,

permitiendo al usuario desenvolverse mejor en base a sus objetivos (insertar,
diseño, datos, etc.).
1.5. La experiencia del usuario (UX)

Se conoce como Experiencia de Usuario o UX el proceso de mejora de la satis-
facción del cliente respecto a un producto, reforzando la usabilidad y generando
placer entre la interacción entre cliente y producto. Actualmente es la metodología
que más condiciona las acciones que una empresa toma a la hora de crear o conso-
lidar el diseño de sus servicios y productos.
Como disciplina, es un concepto de múltiples dimensiones que agrupa todo tipo

de especialidades como:
 La Funcionalidad o propósito práctico de un producto o servicio.
 La Usabilidad o capacidad de dicho producto para ser utilizado por parte

de los usuarios.
 El Diseño Interacción (IxD), cuyo objetivo es definir y diseñar la forma

en la que la interfaz efectúa las acciones y operaciones propias que le han
sido asignadas, para cumplir correctamente con su funcionamiento
establecido.
 La Arquitectura de la Información, que es la forma de estructurar la

información para que sea lo más comprensible posible para el usuario.
 La Estrategia de contenidos, que se centra entre otras cosas en escoger

formatos de contenidos y canales de transmisión para hacerlos llegar a los
usuarios.
 El diseño de Interfaz de Usuario (UI), que es el tipo de diseño (look &

feel), enfocado a la presentación visual de un producto digital de manera
consistente.
23
Usabilidad
 El diseño gráfico, centrado en hacer un sitio o producto visualmente

atractivo.
 El diseño emocional, concepto en el cual entraremos en detalle más

adelante, pero que consiste en generar un discurso alrededor de un
producto.
En términos de diseño, seguramente UX (User Experience) es más analítico y téc-

nico que el Diseño de Interfaz (UI), que se encuentra más próximo al diseño gráfi-
co. Por su parte, el Diseño de Interacción (IxD), ocuparía una posición intermedia
entre ambos, ya que relaciona operaciones y funciones con el aspecto visual de las
mismas.
Figura. Viñeta de Scott Adams sobre la UX en productos digitales. 5
Claves de la UX
Anteriormente hemos expuesto los principios fundamentales de la usabilidad.

Veamos ahora los de la Experiencia de Usuario o UX:
5 Fuente: http://bit.ly/2DBwKfK
24
1. Utilidad. Todo el contenido de la web debe tener alguna utilidad práctica

para el usuario.
2. Confianza. Cualidad fundamental para ofrecer una experiencia positi-

va.
3. Facilidad de búsqueda. Es importante que el usuario encuentre rápido

lo que busca en un sitio web y cumpla así parte de sus expectativas al en-
trar.
4. Seguridad. Un factor fundamental en sitios en los que se piden datos per-

sonales o se realizan transacciones económicas.
5. Crear valor añadido. Los contenidos y productos que podamos ofrecer

en nuestro sitio deben aportar un valor añadido más allá de su funcionali-
dad práctica.
6. Deseo. El usuario tiene que sentir que desea lo ofrecemos, es esencial para
desmarcarnos de la competencia. La experiencia del usuario con nuestros
contenidos es fundamental en este sentido, ya que despertarán más sus ga-
nas de interactuar con nuestro sitio.
7. Usabilidad. La eficiencia y eficacia de una web resulta fundamental para

que las visitas logren el objetivo que pretendían con tu sitio web y vuelvan.
Para saber más
En este post de Luisan.net profundizan en la diferencia entre UX y UI, dos

conceptos que a veces también generan cierta confusión:
http://www.luisan.net/blog/diseno-grafico/diferencias-entre-ui-user-
interface-y-ux-user-experience
25
Usabilidad
Relación entre UX y usabilidad
En definitiva, la usabilidad es una cualidad de la experiencia del usuario

que se centra en la facilidad con la que el usuario cumple sus objetivos a través de
un sitio o aplicación, mientras que la experiencia de usuario engloba algo mucho
más amplio y subjetivo: cómo se siente dicho usuario cuando a cómo se siente di-
cho usuario durante el tiempo que pasa interactuando con nuestros servicios.
En otras palabras, para que la experiencia de usuario sea positiva, una buena usa-
bilidad es primordial. Si un cliente no queda satisfecho con la usabilidad,
es prácticamente imposible que quede satisfecho con el producto final,
a pesar de que en otros aspectos roce la excelencia. Por esto la usabilidad es tan
importante.
No podemos perder de vista las otras disciplinas que influyen en la UX porque

también juegan un papel muy importante, pero sin duda la usabilidad es el
menos difícil de compensar cuando falla.
Pensemos en un ejemplo práctico que podemos encontrarnos en la vida cotidia-

na: queremos ir a cenar a un restaurante y visitamos dos webs de dos locales dis-
tintos.
 El restaurante 1 tiene un diseño muy atractivo, mucha variedad en la

carta y fotos de todos los platos. No obstante, los platos están separados
por categorías y hay que hacer clic en cada una, no se ven los precios si no
descargamos la carta completa en pdf. Además, la información de contac-
to no aparece a primera vista y el tiempo de carga es lento.
 El restaurante 2 tiene un diseño bastante pobre y solo hay fotografías

del local, no de los platos, pero la navegación es muy clara y encontramos
lo fundamental en la portada: la información de contacto aparece en la
portada y podemos hacer reserva online. Además, clicando en un desple-
gable aparece el menú con los precios.
La segunda opción será menos apetecible de entrada, pero el hecho de tener un

sitio web más usable nos aportará mayor satisfacción y, por tanto, más confianza
para decantar nuestra decisión de compra.
26
1.6. Importancia y beneficios de la usabilidad web

Según Jakob Nielsen, en Internet la usabilidad es una condición de supervivencia
necesaria. Muy simple: si la web es difícil de usar, los usuarios se van. Si la
página de inicio no comunica adecuadamente lo que la compañía ofrece y lo que
los usuarios pueden hacer en la web, los usuarios se van. Si los usuarios se pierden,
se van. Si la información es difícil de leer o no responde las preguntas de los usua-
rios, se van.
El patrón está en el hecho de que los usuarios no leen, todos los FAQ’s de una web,
ni manuales de instrucciones enteros, ni dedican mucho tiempo a interpretar una
interfaz. Hay multitud de webs disponibles, el abandono es la primera línea de
defensa cuando los usuarios encuentran una dificultad.
La primera ley del ecommerce es que si los usuarios no pueden encontrar el pro-
ducto, tampoco pueden comprarlo.
En el caso de intranets y CRMs la usabilidad es una cuestión de productividad

del empleado. El tiempo que desperdician al perderse en una intranet o desentra-
ñando instrucciones complejas, es dinero que se pierde al pagarles por estar en el
trabajo sin conseguir realizar su cometido.
Según la UXPA, la usabilidad permite obtener los siguientes beneficios:
 Incremento de la productividad: Una intranet empresarial que mejora

su usabilidad, permitirá que sus usuarios realicen más tareas en el mismo
tiempo. Además, a los usuarios les requerirá un menor esfuerzo aprender a
utilizar el sistema y tendrán menos dudas sobre su uso.
 Reducción de la formación y de los costes de soporte: Una aplica-

ción que deba ser usada por diferentes usuarios, necesitará menos forma-
ción y costes de soporte si es intuitiva y no genera dudas.
 Aumento de ventas y de los ingresos: Si el producto diseñado no pre-

senta barreras de usabilidad, los usuarios podrán finalizar los procesos con
27
Usabilidad
mayor facilidad, incluyendo las compras.
 Reducción del tiempo y costes de desarrollo: Las herramientas usa-

bles son más sencillas y consistentes, haciendo que las funcionalidades
sean homogéneas. De esta forma puede conseguirse una reducción en
tiempo y costes.
 Reducción de los costes de mantenimiento: Cuando una aplicación

es usable se generan menos incidencias y se requieren menos cambios y
mejoras, por lo que los costes de mantenimiento son más bajos.
 Aumento de la satisfacción de los clientes: La experiencia de uso me-

jora de forma radical cuando el diseño es intuitivo y fácil de usar. Los usua-
rios se sienten más cómodos y perciben que no les supone trabajo utilizar el
diseño.
 Aumento del tráfico recurrente. Es decir, que tenemos más puntos

para que un usuario después de haber visitado nuestra web o blog, vuelva a
ella en un futuro. Aplicando estos consejos podemos aumentar el número
de visitas de nuestras páginas webs.
 Disminuir el porcentaje de rebote: El porcentaje de rebote no es otra

cosa que conseguir que el tiempo de estancia del usuario sea alto y conse-
guir que navegue por las diferentes partes de nuestro sitio.
1.7. Testeo y mejora de la usabilidad

Tal y como explica Nielsen, la usabilidad juega un papel en cada etapa del proceso
de diseño. Por esto es conveniente realizar diferentes tests y estudios so-
bre diferentes aspectos concretos a medida que los vamos trabajando,
en lugar de realizar una evaluación global de la usabilidad una vez termina-
do todo el diseño.
Muchos de estos problemas pueden ser estructurales y corregirlos podría suponer

cambios importantes en la arquitectura, de modo que es mejor irlos resolviendo
antes de tener un producto cerrado.
28
Figura. El testeo es imprescindible para optimizar herramientas digitales como los sitios
web.6
De esta forma es mucho más sencillo localizar errores o puntos a mejorar, y ade-
más algunos de ellos los podemos trabajar de forma simultánea. Los principales
objetos de estudio en términos de usabilidad son:
1. Antes de empezar diseño nuevo, siempre es interesante testear el anti-

guo para identificar las cualidades que vale la pena conservar o potenciar e
identificar los elementos que generan problemas a los usuarios. Tengamos
en cuenta que si ya tenemos una imagen corporativa, es importante que el
nuevo diseño respete una imagen de marca y una identidad fácil de identi-
ficar para potenciar el branding.
2. Analizar los diseños de tus competidores para obtener referencias de

una variedad de interfaces alternativas que tengan funcionalidades simila-
res a las nuestras y se dirijan a un público objetivo.
3. Investigar el comportamiento de nuestro público objetivo: cómo

llegan a nuestro sitio, qué buscan, qué soluciones podemos ofrecerles con
nuestros productos, qué pueden esperar de nosotros, en qué redes sociales
están presentes…
6 Fuente: http://bit.ly/2rxe5Ml
29
Usabilidad
4. Testear prototipos de diseños antes de dar una por definitivo. Es in-

teresante hacer tests A/B, por ejemplo, haciendo pequeñas variaciones en
un diseño de base. Cuanto menos tiempo inviertas en estas ideas de diseño
mejor, porque tendrás que cambiarlas todas en base a los resultados del
test.
Para saber más
En este post de IEBS explican en qué consiste un test A/B aplicado a las
landing pages. Más adelante los explicaremos con detalle
http://www.iebschool.com/blog/como-testear-landing-pages-test-ab-
analitica-usabilidad/
5. Refinar las ideas de diseño que funcionen mejor mediante múltiples

iteraciones, pasando gradualmente de prototipos de baja fidelidad a repre-
sentaciones de alta fidelidad que se ejecutan en el ordenador.
6. Inspeccionar el diseño en base a guías establecidas de usabilidad

(principios heurísticos), ya sean de estudios previos o de investigaciones
publicadas.
7. Una vez se escoja y se implemente el diseño final, testearlo otra vez y

ver cómo funciona en el mundo real. Los problemas sutiles de usabilidad se
detectan y se pueden resolver durante la implementación.
1.7.1. Métodos de testeo y evaluación de la usabilidad
Existen dos tipos de métodos de evaluación que se pueden aplicar con el ob-
jeto de asegurar la usabilidad de cualquier producto, incluidas las páginas web:
A. Evaluaciones de usabilidad, en las que normalmente no se incluyen los

usuarios.
B. Tests de usabilidad enfocados en observar cómo el usuario interactúa

con el producto.
30
Veamos en qué consisten cada uno de ellos:
A. Evaluaciones de usabilidad
Estas técnicas están dirigidas por expertos de usabilidad. Haciendo uso de encues-
tas, cuestionarios, conocimiento del usuario, observaciones de expertos (análisis
en base a sus conocimientos y experiencia) y evaluaciones heurísticas (revisiones
de un diseño en base a principios de usabilidad) se sientan las bases que poste-
riormente se analizarán con usuarios representativos.
Una vez disponemos de un prototipo del proyecto web se pueden em-

pezar a utilizar estas técnicas.
Los resultados de aplicar estas evaluaciones permitirán identificar las dificul-

tades con las que el usuario real se podrá encontrar. En resumen, las evaluaciones
de usabilidad permiten predecir con qué problemas se encontrará el usuario.
Es fundamental que los sitios web, sistemas, software o aplicaciones sigan los 10
principios de Nielksen, también llamados reglas heurísticas de usabilidad. La
heurística, un término que proviene de la palabra griega eureka, se refiere a la
capacidad humana de buscar soluciones creativas y tomar decisiones a
partir del estudio y la experiencia. Este modelo de resolución de problemas
es también conocido como método IDEAL, acrónimo de sus cinco pasos:
 Identificar el problema.
 Definirlo y presentarlo.
 Explorar las estrategias viables para solucionarlo.
 Avanzar en las estrategias.
 Lograr la solución y evaluar sus efectos.
Los informes de las evaluaciones de usabilidad se redactan en tercera persona y no

se ofrecen opiniones personales. El objetivo es que todo lo que se va comentando
vaya acompañado de una argumentación: aquellos elementos de la interfaz, de
la navegación, de la interacción... que hacen que el usuario se pueda llevar una u
otra impresión.
31
Usabilidad
En este tipo de análisis es muy importante acompañar la descripción de los pro-

blemas con capturas de pantalla para ayudar a comprender mejor todas las
oportunidades de mejora que se detallan. También se puede acompañar cada ob-
servación con un código de colores que ayude a identificar la "gravedad" de cada
problema detallado.
Recuerda
Debemos realizar las evaluaciones de usabilidad con la mayor antelación

posible, ya que nos permitirán predecir con qué problemas se encontrará
el usuario, y poder así corregirlos.
B. Test de usabilidad
Estos tests siempre involucran al usuario. Esta es la única manera de saber si

el sitio web tiene o no carencias de uso que puedan suponer una insatisfacción en
la experiencia de usuario.
Los estudios de usabilidad, por tanto, deben permitirnos descubrir si los diferentes
flujos de uso del sitio web se pueden cualificar de una de las siguientes formas:
 Exitosos: el usuario completa la tarea sin dificultades.
 Exitosos pero con dificultades: el usuario completa la tarea pero en-

cuentra alguna dificultad.
 Si resultan un fracaso en su uso: el usuario no logra completar la ta-

rea.
Un test de usabilidad se compone básicamente de 3 pasos:
1. Conformar un grupo de usuarios representativos del sistema. Pue-

den ser clientes de un ecommerce, consumidores de contenido de un sitio
web o empleados que trabajan con una determinada intranet (que todavía
no estén familiarizados con el diseño nuevo). Con un grupo reducido, por
32
ejemplo de 5 personas, es posible sacar resultados concluyentes en la ma-

yoría de casos.
2. Pedir a esta muestra de usuarios que realicen tareas representativas

con el nuevo diseño. Por ejemplo, si evaluamos un ecommerce, podemos
intentar que encuentren determinados productos, que realicen una compra
o que anulen un pedido.
Es importante que lo hagan de forma individual y sin más ayuda que la

que proporcione el diseño que hemos preparado, ya que los usuarios se en-
contrarán en la misma situación. Si los ayudamos, aunque sea poco, con-
taminaremos los resultados.
3. Observar todo el proceso. Qué hacen, dónde tienen dificultades o dón-

de se encallan, en qué aciertan o se equivocan, etc. Durante este proceso es
muy importante que los usuarios vayan explicando sus sensaciones, expo-
niendo sus dudas o incluso comentando qué les gusta de lo que ven. De-
bemos limitarnos a escuchar y dejar que hablen los usuarios.
Como conclusión, los test de usabilidad sirven para reafirmarse o no en las

hipótesis obtenidas de las evaluaciones y ser capaces por tanto de solucionar
problemas de usabilidad antes del lanzamiento del producto.
Recuerda
El método más efectivo para analizar la usabilidad es el test de la usabi-

lidad. Los usuarios realizan tareas representativas mientras interactúan
unos con otros. Es económico y sencillo, ya que se puede llevar a cabo
con solo cinco personas.
33
Usabilidad
1.7.2. Métricas para evaluar usabilidad y UX
Las métricas y KPIs7 son los indicadores que obtenemos a través de la medición de
datos y que nos indican si hemos logrado los objetivos marcados con una
tarea o acción.
Cuando planteamos una problemática (por ejemplo: el 60% de los usuarios que
ponen productos en el carrito, no acaban realizando la compra), tenemos que
definir unos objetivos que alcanzar con las medidas que proponemos (por
ejemplo: reducir este porcentaje al 30% en 3 meses).
Estos objetivos tienen que seguir la regla S.M.A.R.T:
 ESpecíficos (Specific)
 Medibles (Measurable)
 Alcanzables (Achievable)
 Relevantes (Relevant)
 Temporales (Timely), es decir, acotados en el tiempo.
Por tanto, las métricas y KPIs son los valores numéricos que marcarán si
alcanzamos o no nuestros objetivos y nos servirán para reflexionar cuáles serán
nuestros pasos a seguir.
Figura. Objetivos S.M.A.R.T. 8
7 Definición de KPI: https://www.cicerocomunicacion.es/que-es-un-kpi-ejemplos/

8 Fuente: http://bit.ly/2DDsBHm
34
La fase de medición y análisis forma parte de todas las disciplinas del marketing
digital, incluida la usabilidad. La cuestión es, ¿qué indicadores son los
importantes a la hora de medir la usabilidad web? A continuación
enumeramos los más habituales, pero debemos tener en cuenta que cada tarea
exigirá unos determinados indicadores, siguiendo la regla SMART:
 Tasa de efectividad o de éxito de la tarea. Porcentaje de usuarios capaces

de completarla.
 Tasa de satisfacción o de éxito percibida por el usuario. Es subjetiva y

determina cómo el usuario valora su acción.
 Tiempo invertido en la realización de la tarea. Sirve para medir la efi-

ciencia.
 Momentos de bloqueo o error durante el proceso.
Recuerda
Para medir la usabilidad es importante no medir muchos datos, acciones

o sujetos de estudio a la vez. Además, en la valoración hay que tener en
cuenta las condiciones de contexto.
Google Analytics, la herramienta de medición de Google, también nos aporta

métricas muy útiles para evaluar al usabilidad de un sitio web, como por ejemplo
la velocidad de carga, los flujos de comportamiento (en los que vemos la
navegación realizada en cada sesión) o el tiempo de permanencia en la web.
1.8. Los tres niveles del diseño

El diseño, ya sea de un objeto o de una interfaz, opera a varios niveles en nuestro
cerebro. Es decir, la relación entre un usuario y un objeto usable no se limita a
cuestiones puramente prácticas, hay toda una serie de aspectos relacionados con la
35
Usabilidad
percepción, la forma, el motivo o el momento de uso que también

debemos tener en cuenta de cara a mejorar en el diseño.
Don Norman, profesor de ciencia cognitiva, hace un análisis profundo de este tema
en su libro “Diseño emocional: por qué nos gustan o no los objetos cotidianos”. En
él establece un marco para el análisis de productos en base a tres
características:
 Su atractivo: por qué alguien querría utilizar un producto.
 Su comportamiento: eficiencia en su desempeño y cumplimiento de sus

propósitos.
 La imagen que el objeto presenta de sí mismo y del dueño mientras lo usa:

imagen y posición social que otorga utilizar dicho producto.
Estos tres aspectos se identifican con tres niveles de procesamiento (visceral,

conductual y reflexivo), así que hay un tipo de diseño centrado en adecuar un
producto a cada uno de estos tres niveles. Tener en cuenta los tres será lo que nos
ayudará a diseñar un objeto o un sistema usable y atractivo, aunque siempre hay
un nivel que gana más importancia que otro a la hora de diseñar un
producto. Cuál de los tres dependerá de los objetivos de la marca con dicho
producto. Veamos el significado de cada uno:
a) Diseño visceral
Pone el énfasis en la apariencia y el placer estético, en cómo el consumidor se

siente utilizando cierto producto y qué transmite a los que lo ven haciéndolo. Es
una parte muy importante para el branding y la publicidad, ya que es a través de
este diseño visceral que los consumidores se identifican con las marcas y su
estética.
Independientemente de que el producto sea mejor o peor a nivel práctico, la

principal razón de compra es estética y emocional. Es bastante común en sectores
como el turismo, la moda, en productos de lujo (como la joyería o los relojes) e
incluso en el día a día, donde podemos elegir dos productos parecidos por su
presentación en el envase.
36
Para saber más
En esta presentación de Prezi se repasan las características del diseño

visceral y su importancia para las marcas:
https://prezi.com/hvmk3aqr-5pd/diseno-visceral/
b) Diseño conductual
Se centra fundamentalmente en las características de uso, en su efectividad y el

placer que siente el consumidor a la hora de utilizar el producto.
Aquí entran factores más íntimamente ligados a la usabilidad, como la facilidad de

uso, la ergonomía, la facilidad de aprendizaje, las prestaciones, etc.
Por ejemplo, un consumidor puede decidir utilizar una app de turismo

gastronómico porque le resulta más fácil interactuar con la interfaz y encontrar
restaurantes, o porque incluye una funcionalidad que le permite reservar en pocos
clics y ahorrarse la llamada. En cambio, renuncia a otra de más famosa con una
base de datos más amplia, pero que le cuesta más de utilizar.
c) Diseño reflexivo
El diseño reflexivo es el más elevado dentro del diseño emocional, ya que se basa
en la “intelectualización” de un producto y construir un relato a su alrededor. En
otras palabras, decidimos comprar una marca porque tiene un valor estético, pero
sobre todo porque representa unos valores, un estilo de vida o una forma de ser.
Esto se ve mucho en productos como la tecnología (esencialmente con Apple) o el

automovilismo, donde las marcas de coches se intentan identificar con valores tan
variopintos como la libertad, la autoridad, la fiabilidad o la seguridad; siempre
según el público objetivo al que se dirigen.
37
Usabilidad
EJEMPLO:
Figura. Portada del sitio web de Pastaria: http://eatpastaria.com/stlouis/
Analizamos el sitio web de Pastaria en base al modelo de tres niveles de diseño

propuestos por Don Norman:
a) Visceral:
Al entrar en la página es fácil intuir que es un restaurante o pizzería, el contenido

es claro y la primera imagen que nos encontramos una fotografía de gran tamaño
con una persona cocinando y sonriendo, hecho que hace atractivo el sitio ya de
entrada.
A medida que bajamos encontramos los platos de forma limpia y organizada, todo
parece fresco y bien servido en cada momento todo invita a conocer los productos.
Los precios están a la vista y esto te da la sensación de transparencia.
Un sitio pensado con cariño en el cual como usuario quieres conocer. Para cerrar
de forma “graciosa” están los comentarios de otros usuarios. Es un cierre perfecto
para establecer confianza con el usuario y hacerle presentir que en este sitio va a
38
comer bien y se encontrará buena gente.
El cuidado con las imágenes y tipografía son evidentes a primera vista y rompe con
el estereotipo de muchas páginas de restaurantes de este tipo.
b) Conductual:
Esta página tiene una interacción sencilla, ya que toda la información está a la vis-
ta en una sola página utilizando en scroll. En la medida que quieres profundizar,
conocer los menú o ver más fotos.
El menú general está permanentemente a la vista y esto te permite moverte con

sencillez dentro de cada espacio. Los links funcionan correctamente en la primera
parte al lado del teléfono esta la palabra “contacto” en este caso no es evidente que
sea un link al email y esto puede ser un problema en el caso que estés pensando
escribir al restaurante. Sin embargo, el acceso rápido al teléfono y redes sociales
suple de alguna forma este problema.
La navegación entre las fotografías del restaurante están bien resueltas intentan
mostrar cada parte del proceso, desde la cocina como la presentación de los platos
y distribución del restaurante; siempre teniendo presente el menú para poder
cambiar en el momento en el que lo necesitemos.
c) Reflexivo:
Teniendo en cuenta que la fotografía principal es la de un cocinero joven y con “ta-

tuajes” parece que la imagen que quieren mostrar como restaurante es una imagen
desenfadada, aunque cuidan los detalles se enfocan a un target más joven y con un
perfil urbano.
También transmiten tranquilidad limpieza y con los menú muestran que conocen a
su público objetivo en cada espacio añaden detalles de diseño para que los usuarios
se identifiquen con los detalles.
39
Usabilidad
1.9. Los profesionales de la usabilidad y la UX

Según la UXPA, el profesional de la usabilidad es cualquiera que trabaje o abogue
por la usabilidad de sus productos.
Algunos se especializan en la moderación de test de usabilidad u otros métodos de

investigación de usuarios mientras que otros practican la usabilidad como parte de
otras responsabilidades en el diseño de productos, servicios, aplicaciones de soft-
ware o websites.
La formación y experiencia profesional de los profesionales de la usabilidad es

igualmente amplia. Muchos tienen estudios en campos relacionados como la inter-
acción persona ordenador, el diseño de la información o la psicología. Otros han
utilizado sus estudios en ciencias informáticas, gestión de proyectos, periodismo,
artes plásticas, documentación o negocios como parte de su camino para conver-
tirse en un profesional de la usabilidad.
En términos generales, las actividades de usabilidad pueden ser divididas en:
 Investigación: aprendizaje sobre las personas que utilizan un producto y

el contexto en el que se utilizará.
 Evaluación: observación y aprendizaje de los usuarios mientras trabajan

con un producto antes, durante y después del proceso de diseño y desarro-
llo.
 Diseño: Responsables de crear la interfaz, interacción, información o ex-

periencia de diseño.
En marketing digital todo está enfocado a que el consumo de contenidos, servi-

cios y productos en un ámbito digital, de modo que la usabilidad es un valor
imprescindible en todas las disciplinas. Tengamos en cuenta que los espa-
cios de consumo son sitios web, programas o aplicaciones que además consumi-
mos en dispositivos tecnológicos, es decir, ordenadores, tabletas, teléfonos u otros
dispositivos con capacidad de conectarse, como los televisores.
40
Figura. Distintos campos profesionales de usabilidad. (Fuente: UXPA)
Para saber más
En este post encontrarás una relación de profesiones actuales ligadas a la usa-

bilidad y a la experiencia del usuario:
https://revistadigital.inesem.es/diseno-y-artes-graficas/roles-usabilidad-web/
41
Usabilidad
2. Principios fundamentales de usabilidad

Ahora que hemos visto qué implica la usabilidad desde el punto de vista del usua-
rio, pasaremos a estudiarla desde un punto de vista más técnico. Desde hace años,
diversos expertos en esta disciplina han elaborado marcos teóricos y han estableci-
do líneas maestras sobre qué requisitos debe cumplir un diseño para ser
usable. Esto engloba todo tipo de herramientas, pero también las digitales.
Nosotros nos centraremos fundamentalmente en usabilidad para sitios web y apli-

caciones, tanto para ser utilizadas en ordenador o en dispositivos móviles. Como
veremos, y siguiendo la línea del tema 1, la clave de la usabilidad es tener una vi-
sión sobre cómo será la interacción entre el usuario y la herramienta,
para que ésta sea lo más eficiente y el que la utiliza quede satisfecho.
2.1. Los 10 principios de usabilidad de Nielsen

Si hay que señalar el gurú de referencia en materia de usabilidad, sin duda sería
Jakob Nielsen. Ya a mediados de los años 90 publicó un decálogo con los 10
principios fundamentales de esta disciplina después de pasar mucho tiempo inves-
tigando la relación entre el hombre y el ordenador con el objetivo de hacerla más
fácil.
¿Sabías qué?
Jakob Nielsen, ingeniero de interfaces, es una de las personas más respe-

tadas en el ámbito mundial sobre usabilidad. Su teoría del barrido visual,
el usuario no lee con detalle la página web, se limita a ojear, es uno de los
principios básicos para asegurar la usabilidad de una página web.
Las pautas de usabilidad son recomendaciones reconocidas y establecidas a nivel

internacional que permiten asegurar la usabilidad de un diseño. Estas
recomendaciones suelen llamarse principios heurísticos, que son
procedimientos orientados a la resolución de problemas.
42
Estos “mandamientos” todavía siguen vigentes a día de hoy, y es básico que los
conozcamos ya que cualquier sitio web o sistema usable tiene que cum-
plirlos. Los explicamos a continuación:
1. Visibilidad del estado del sistema
De cara a ofrecer un buen servicio al usuario es importante que el sistema lo man-

tenga informado del progreso de las acciones, sobre todo cuando hay un interés
manifiesto detrás, como por ejemplo una transacción económica o una solicitud de
información.
En un ecommerce, por ejemplo, cuando el usuario realiza una compra es impor-

tante notificar claramente que el pago ha sido realizado y que recibirá el producto
en un determinado tiempo. O cuando alguien rellena un formulario de datos, tam-
bién debe recibir la confirmación de que se han enviado correctamente.
Figura. El servicio de envío de archivos Wetransfer informa del progreso de las transfe-
rencias.
2. Relación sistema / mundo real
Las páginas web funcionan con diferentes lenguajes de programación que la gran
mayoría de los usuarios no entienden. Solo hace falta ver una página y su código
fuente: a efectos prácticos son exactamente lo mismo, pero una es mucho más fácil
de comprender que la otra, ¿verdad?
43
Usabilidad
Figura. Sitio web de IM (arriba) y su código fuente (abajo).
Uno de los principios de la usabilidad es que los procesos que ocurren inter-
namente en los sistemas tengan una traducción comprensible para el
usuario que los utiliza en el mundo real. Es importante que el lenguaje sea claro y
que la interacción entre la persona y el sistema sea natural.
Por ejemplo, no tenemos por qué saber qué es un “error 404”, pero si aparece una
nota diciendo “esta página no está disponible en este momento” y alguna instruc-
ción adicional, comprendemos que ha ocurrido un fallo que nos permite acceder a
un determinado contenido.
O más sencillo todavía, si vemos un recuadro y hay un botón con el icono de “play”,
sabemos que al clicar se reproducirá un vídeo.
44
3. Control y libertad del usuario
Como es natural, los humanos podemos equivocarnos al realizar una acción, ya sea
por ignorancia o por simple error al clicar en un sitio que no corresponde. Un sis-
tema usable ofrece la posibilidad de enmendar estos errores humanos,
dejando que sea siempre el usuario quien mantenga el control sobre las acciones a
realizar.
Por ejemplo, incluir botones que permitan quitar un producto del carrito de la
compra o el comando “ctrl + z” en muchos programas para deshacer acciones son
aplicaciones muy utilizadas y que ya tenemos interiorizadas, pero que representan
muy bien lo que es la buena usabilidad a la hora de dar control al usuario.
4. Consistencia y estándares
Para facilitar la comprensión de los sistemas, es recomendable incorporar es-

tándares, códigos o lenguajes ya establecidos e interiorizados. Por ejem-
plo, utilizar el color verde para los botones de “aceptar” y el rojo para “cancelar”,
copiando el color de los semáforos, es un ejemplo de esta práctica. Así mismo sa-
bemos que las flechas hacia abajo pueden indicar menús desplegables verticales o
que las flechas hacia la derecha suelen indicar “volver a la página anterior”.
Figura. Sabemos que si clicamos en cualquiera de las flechas del menú de IM, se abrirá
un desplegable de contenidos.
5. Prevención de errores
Sabiendo que el usuario puede cometer errores, es interesante hacer lo posible a

través de la usabilidad para evitar que lo hagan. Por ejemplo, una práctica muy
habitual en este sentido es pedir una doble confirmación de los correos electró-
nicos en los formularios de contacto, para solventar así posibles errores tipográfi-
cos a la hora de escribirlo la primera vez.
45
Usabilidad
Otro caso célebre son las búsquedas sugeridas de Google, que aunque no
acierten siempre, a veces nos ayudan a completar información o a escribir correc-
tamente un nombre.
6. Reconocimiento antes que recuerdo
Con un ejemplo lo veremos fácilmente: ¿cuántos de nosotros sabríamos decir de

memoria los pasos a seguir para borrar la memoria caché de las aplicaciones de
nuestro teléfono móvil? Si cogemos el teléfono seguramente llegaremos rápido,
pero no todos somos capaces de decir de memoria cada paso. Esto es porque,
cuando lo tenemos delante, reconocemos la interfaz y sabemos dónde queremos ir,
por lo que no necesitamos tener memorizado el proceso, lo recordamos
cada vez que lo queremos poner en práctica.
Otro ejemplo evidente es el cambio que hizo Microsoft Word con sus fuentes. An-
tes solo había el nombre de cada una en un listado, pero desde hace tiempo apare-
cen con su tipografía, de tal modo que no tenemos que recordar cómo es cada letra
porque ya lo vemos cada vez.
Figura. Word mejoró a nivel de usabilidad incorporando el formato de sus fuentes en el

listado.
46
7. Flexibilidad y eficiencia de uso
Aplicar la flexibilidad en usabilidad es pensar en que no todos los usuarios tendrán

los mismos conocimientos a la hora de utilizar un sistema, pero que esto no debe
suponer un impedimento para que todos puedan hacerlo con un mínimo de efecti-
vidad.
En este sentido, es muy habitual que cualquier programa, aplicación u herramien-

ta, desde un proveedor de correo electrónico hasta un televisor, tengan la opción
de “configuración avanzada” en muchos de sus menús.
8. Estética minimalista en el diseño
Otra característica fundamental de la usabilidad es que los sitios web sean mini-
malistas, fáciles de leer y con los elementos fácilmente ubicables en un solo vistazo.
Esto no significa que los diseños no puedan ser atractivos, pero en diseño web la
estética tiene que estar al servicio de la usabilidad.
Además, no incluir más elementos de la cuenta facilitará otros aspectos como la

accesibilidad y la velocidad de carga, que harán el sitio más eficiente y favorecerá
otros valores como su posicionamiento SEO.
9. Ayudar a los usuarios a diagnosticar y solucionar errores
Si por lo que sea se producen fallos durante el uso de un sitio web, una aplicación o
un proceso, debemos proporcionar la información necesaria al usuario para que
conozca la naturaleza del fallo y, en la medida de lo posible, puede resolverlo (si
está dentro de sus capacidades).
Por ejemplo, si al rellenar un formulario alguien se deja un campo obligatorio, una

solución buena es marcar en rojo cuál es el campo que falta e incluir una nota ex-
plicándolo. De esta forma, en pocos segundos el usuario sabe que tiene que relle-
narlo.
47
Usabilidad
Figura. En este formulario los campos obligatorios están marcados con un asterisco.
Además, si el usuario olvida rellenarlos, aparece un recuadro rojo y una nota informati-
va.9
10. Ayuda y documentación
Por último, otro valor positivo es proporcionar al usuario toda la información

que pueda necesitar para familiarizarse con el funcionamiento de una
herramienta, un sitio o una aplicación. Nadie llega enseñado, y menos cuando
tiene que enfrentarse a un software que no ha visto nunca, por muy intuitivo que
pueda ser.
Para cumplir esta regla podemos utilizar diferentes recursos, todos ellos muy
válidos que podemos escoger según el soporte sobre el que tenemos que informar:
 Apartado o página de FAQ’s (preguntas frecuentes).

 Icono de interrogación con notas desplegables al lado de algunas opciones,
para explicarlas en detalle.
 Vídeos tutoriales de introducción o presentación.
 Manuales de instrucciones.
9 Fuente: http://bit.ly/2ycJyCD
48
Figura. Página de FAQ’s del sitio del Sónar de Barcelona:

https://sonar.es/es/2018/faqs
¿Sabías qué?
Cuando se realiza un análisis heurístico, además de señalar los principios que

se están cumpliendo y los que no, el experto en usabilidad indica el grado de
gravedad -alto, medio o bajo-, teniendo en cuenta tres criterios:
 Frecuencia: Si se trata de un problema común o raro.
 Impacto: Dificultad que les plantea a los usuarios solucionar ese

problema.
 Persistencia: Si el problema se resuelve la primera vez que se usa el

sitio, o si ocurre repetidamente.
El modo de indicarlo más sencillo es utilizando el mismo código de colores de

los semáforos (verde, ámbar, rojo).
49
Usabilidad
2.2. Principios del diseño de interfaces de Shneiderman

Nielsen no es el único experto en usabilidad. Ben Shneiderman, catedrático en
informática, ha dedicado gran parte de su carrera en especializarse en la
interacción entre personas y ordenadores.
Fruto de este trabajo, el catedrático elaboró una guía que tituló “las 8 reglas de
oro del diseño de interfaces”, donde establece unas pautas de usabilidad
(como veremos, algunas parecidas a las de Nielsen) que han sido aplicadas por las
mayores empresas tecnológicas del mundo, como Google, Apple y Microsoft.
Sus reglas se concentran más, tal como dice el título, en las características que
debe tener una interfaz (ya sea de un software, una app o un sitio web)
para facilitar su uso en manos del usuario. Es decir, para ser más usable.
A continuación las repasamos, ya que en definitiva constituyen una guía que

cualquier sitio web o aplicación debe seguir en su diseño.
1. Mantener la coherencia
Tenemos que mantener los elementos de nuestros diseños lógicos y consistentes.

Esto básicamente significa que nuestro sitio web tiene que ser universalmente
entendible a nivel de lenguaje y de códigos visuales.
Un ejemplo muy sencillo es ver los menús de navegación y las páginas habituales,
que mantienen una nomenclatura similar: “contacto”, “sobre nosotros”, “catálogo”,
“home”, “cómo llegar”… es la terminología que se utiliza y a la que todo el mundo
está acostumbrado.
A nivel gráfico también es importante seguir unos códigos. Como vemos en la

imagen, los interfaces de Windows Media Player y YouTube utilizan los mismos
símbolos para indicar las mismas acciones (play, pausa, volumen, siguiente
pista…); que a su vez ya se utilizaban en los reproductores VHS y en los mandos a
distancia. Por esto todo el mundo los conoce y entiende su significado.
50
Figura. Los botones coinciden en todos los reproductores de vídeo (arriba Windows
Media Player, abajo YouTube).
2. Permitir que los usuarios frecuentes utilicen accesos directos
Con el aumento de la frecuencia de uso también aumentan los deseos del usuario
de reducir el número de interacciones e incrementar el ritmo de la misma. A nivel
de relación entre software y hardware, hablamos por ejemplo de comandos y
shortcuts que permiten interactuar más rápidamente con el teclado, en vez de
trabajar siempre buscando el punto adecuado con el cursor en la pantalla.
A nivel web, básicamente significa ofrecer al usuario habitual aquello que

sabemos que busca. Las redes sociales son un buen ejemplo de esta idea, ya que
generalmente en su muro de inicio nos muestran las actualizaciones de los
contactos con los que interactuamos más o los canales a los que estamos suscritos.
Otro tipo de negocios, como por ejemplo las plataformas de vídeo on demand, nos
sugieren contenidos que nos pueden gustar basándose en lo que hemos estado
viendo.
En definitiva, el objetivo es mejorar la experiencia del usuario implementando

mecanismos para ahorrarle trabajo de búsqueda. Obviamente solo podremos
hacerlo con suscritores y clientes habituales, porque son los que hemos podido
monitorizar.
Figura. YouTube muestra en portada las últimas novedades de los canales a los que
estamos suscritos.
51
Usabilidad
3. Ofrecer retroalimentación informativa
Por cada acción realizada por el usuario es importante que haya una
respuesta informativa, sobre todo si el resultado no es inmediato. En
procesos como las compras o las suscripciones es especialmente importante, ya
que los usuarios están dando información sensible.
Un ejemplo claro son los comparadores de vuelos, que manejan gran cantidad
de ofertas y avisan al usuario que están llevando a cabo la tarea de realizar la
búsqueda.
Figura. eDreams indica que está buscando vuelos e incluye información como las
compañías que está comparando y el número de vuelos ojeados para generar mayor
sensación de confianza.
4. Diseña acciones secuenciales
Las secuencias de acción son importantes para informar al usuario de antemano

sobre cuánto tiempo va a tener que invertir en un proceso. El hecho de poder
hacerse una idea aproximada de lo que tiene que hacer, da una sensación de
claridad al consumidor al saber cuándo empieza y cuándo termina.
Estos procesos tienen que ser lo más cortos posible y, sobre todo, ofrecer una
retroalimentación informativa constante e indicaciones que puedan servirle
de ayuda para completar fases.
Como vemos en el ejemplo de Ticketmaster, en la barra superior nos indica en

cuál de las 5 fases de compra estamos. Además, todas ellas son muy cortas y se
completan prácticamente con una sola acción (entre 1 y 3 clics).
52
Figura. Proceso de compra de entradas en Ticketmaster.
Otro punto interesante es la cuenta atrás. Por una parte, aunque es sobradamente
holgado, apremia al consumidor a completar la compra para no tener que repetir
el proceso. Por otra, aporta una información sobre el tiempo máximo que el
usuario va a dedicar a realizar la compra.
5. Prever y evitar errores simples
Los sistemas deben diseñarse para que el usuario no pueda cometer un

error simple, pero potencialmente grave.
Por ejemplo, se sabe que muchos usuarios escogen contraseñas poco seguras y
muy comunes (como la clásica 1234) para no tener que recordaras, pero esto
implica que sus cuentas son fácilmente hackeables. En la imagen vemos un
ejemplo de este diseño usable pensado para evitar errores: en verde aparecen unas
reglas sobre cómo tiene que ser la contraseña para crear una suficientemente
segura, tal como indica la barra de “fuerza”. De este modo, hacen más seguro el
sistema y, consecuentemente, los datos de los usuarios registrados.
53
Usabilidad
Otro ejemplo son los sitios web de reserva de hoteles u otros servicios. Una vez
marcamos una fecha de llegada, se nos impide automáticamente marcar fechas
anteriores para indicar la partida. Así no podemos escogerla por error y realizar
una reserva sin sentido que nos dará problemas en el futuro.
Figura. Indicaciones para evitar errores en la creación de una contraseña.
6. Facilitar la reversión de las acciones
Esta función alivia la ansiedad, ya que el usuario sabe que los errores que cometa
se pueden deshacer sin problema. Esto aumenta la confianza y fomenta que
los usuarios experimenten con funcionalidades desconocidas y descubran
nuestros sitios con más seguridad.
Las unidades de reversibilidad puede consistir en una sola acción, una entrada de
datos, o un grupo completo de acciones.
Figura. Gmail permite recuperar los correos que, por ejemplo, enviamos sin querer a la
papelera.
54
7. Apoyar al usuario con una interfaz amigable
Los operadores experimentados desean tener la sensación de control y que el

sistema responda a sus acciones adecuadamente.
El sitio de Idealista, portal para encontrar vivienda, funciona muy bien en este
sentido porque junta todas las opciones importantes (ubicación, detalle de la
ubicación precio, tamaño, organización de resultados) y permite configurarlas
individualmente para ir modificando ligeramente las búsquedas.
Figura. Interfaz de búsqueda de Idealista.com.
8. Reducir la carga de memoria a corto plazo
Los seres humanos no procesamos demasiado bien la memoria a corto plazo. A

nivel de usabilidad y diseño web, esto se traduce en una necesidad de reducir la
carga de información y estructurarla de forma organizada, de tal forma que queden
4-5 ítems clave, ordenados, que el usuario pueda recordar sin esfuerzo.
Hay muchas formas de hacerlo, siempre según el contexto:
55
Usabilidad
 Alternar tamaños de fuente para diferentes jerarquías de información

(titulares, entradillas, resto del texto), así como las negritas.
 Utilizar colores, formas y estructuras claras para diferenciar las diferentes

partes de una página.
 Mantener un diseño minimalista.
 Favorecer la navegabilidad para aligerar la carga de información de la home

page.
Figura. El sitio web del museo MACBA es un ejemplo de diseño minimalista.10
10 Fuente: http://bit.ly/2AEoLcB
56
El sitio web de MACBA es un buen ejemplo de diseño minimalista pensado para

facilitar el recuerdo en el usuario. En primer lugar, en los destacados están las 5
exposiciones o eventos principales. Justo debajo, además, aparece la agenda del
día. Todo ello con un diseño simple, fácil de leer y ubicar. Por otra parte, tenemos
el menú de secciones bien compartimentado, separado del resto de elementos, en
la parte superior izquierda.
2.3. Recomendaciones generales de diseño de sistemas

Entrando de forma más específica en el diseño de sistemas, en este apartado
vamos a explicar una serie de recomendaciones a seguir para respetar los
principios de Nielsen y Shneiderman a la hora de ofrecer las mejores prestaciones
de usabilidad.
Como veremos, todos los consejos persiguen el objetivo de hacer que el diseño
web y el contenido estén preparados para guiar al usuario hacia sus
objetivos. Lo más importante es alinear nuestros objetivos como marca con los de
los usuarios, como consumidores y presentar la información con una estructura y
un orden que sirva este propósito.
A. Apóyate en los estándares
Los sitios web más efectivos a la hora de dirigir el usuario al lugar adecuado son
aquellos que se ajustan a sus expectativas. Los usuarios no emplearán su
tiempo en memorizar o en aprender el sistema de navegación de sitios diferentes.
Esto significa que es preferible apoyarnos en estándares, formas de uso
extendidas y normalizadas que ya conozcan y dominen.
La consistencia es un concepto fundamental en navegación. Mantener una

estructura de navegación consistente ayuda a visualizar siempre su ubicación
actual dentro de un sitio y sus opciones de moverse por sus páginas de forma
coherente, minimizando así el trabajo de averiguar qué tienen que hacer para
lograr lo que quieren.
La navegación es un medio para lograr un fin: llevar a la gente al lugar que

necesitan de forma rápida. Cuanto más eficiente sea, más aumenta la
57
Usabilidad
probabilidad de mantener su atención. Los temas principales deben ser estáticos y

aparecer enseguida de modo que se puedan ojear las opciones con rapidez.
Figura. El menú de www.rtve.es/ destaca perfectamente el menú de navegación.
Por ejemplo, en la imagen vemos el menú de navegación del sitio web de RTVE. La
televisión pública española tiene hasta 4 canales distintos (y unos cuantos más de
radio) y, consecuentemente, un gran número de contenidos. Para ordenar todo
esto, estructuran la navegación en base a diferentes categorías escogidas según
posibles intereses de los usuarios. Como vemos, la selección no es solamente
temática o por canales, sino una combinación de ambas opciones claramente
optimizada pensando en facilitar la navegación al usuario.
Esperar a que se cargue la navegación es perder el tiempo. Cualquier tipo

de navegación dinámica necesita ser fácil de manejar. Los menús demasiado
sensibles que cambian con el más mínimo movimiento del ratón son demasiado
incómodos, y limitan las oportunidades de retener (y por tanto hacer negocio) con
personas mayores, personas con discapacidades y usuarios web novatos.
B. Enfoca la navegación a acciones
Los usuarios normalmente llegan a una página web con un objetivo en mente:
comprar, conseguir información, leer un contenido, etc. Por tanto, nuestra misión
en materia de usabilidad es simplificar y facilitar el proceso para que los
usuarios logren completar la tarea con éxito y rapidez.
Esta idea se refleja claramente en las landing pages, o páginas de destino, cuyo
objetivo es exclusivamente funcional, para que los usuarios realicen una acción. En
las landing pages es imperativo que la llamada a la acción esté destacada (en el
ejemplo, “comparar seguros”) y que la propuesta de valor sea sintética, clara
y visible (“ahorra hasta 50%”).
A veces la forma más lógica de estructurar contenidos desde una perspectiva

interna no se corresponde exactamente con la lógica de consumo de los usuarios.
58
El ejemplo de RTVE que hemos visto antes también es un buen ejemplo de esta
idea.
Hay que tener en cuenta también que la navegación tiene que adaptarse al
dispositivo, de modo que los diseños siempre tienen que ser responsive.
Figura. Landing page del comparador de seguros https://www.acierto.com/
C. Cubre las necesidades informativas
Hay un par de estadísticas llamativas:
 1 de cada 4 usuarios que tratan de comprar en una web no lo consiguen.
 1 de cada 2 usuarios (o sea, la mitad) que utilizan el buscador para

encontrar una información no lo consiguen.
En ecommerce, la usabilidad tiene que enfocarse en lograr que los consumidores

completen todos los pasos hasta realizar la compra. Hoy en día no solamente es
una cuestión de diseñar un proceso, sino de hacerlo fácil y ofreciendo información
constante.
59
Usabilidad
Los usuarios tienen que saber siempre en qué punto se encuentran, cuántos pasos
tienen que hacer, cuándo van a terminar y ser notificados una vez lo han hecho,
cuándo van a recibir su pedido, a quién pueden consultar dudas, etc.
Se puede generar una ventaja competitiva muy importante ofreciendo una

experiencia de compra satisfactoria y memorable. Al no interactuar directamente
con un vendedor, que ofrece un trato directo y próximo, debemos intentar suplir
esta ausencia con información continua a disposición del usuario, para
que se sienta acompañado en el proceso de la compra.
También es muy útil incentivar las compras estructurando la información de

diferentes maneras que sean atractivas para usuarios indecisos o que no saben
exactamente qué buscan. En este sentido, hay cuatro modelos básicos de clasificar
la información:
 Catálogo de productos, productos recurrentes o favoritos de los usuarios.
 Clasificación por categorías y búsquedas complejas, donde los usuarios

rellenan sus criterios de forma detallada pare encontrar lo más adecuado
para ellos.
 Promociones, descuentos y ofertas. Pueden no ser el objetivo inicial, pero

si son atractivas también pueden ser motivo de compra.
 Descubrimiento de novedades, sugerencias, inspiración, etc.
El portal de cine on demand Filmin tiene una aplicación llamada “el

recomendador” y es muy interesante para usuario que quieren ver una película
pero no saben cual. Con tres sencillos pasos (¿qué te apetece?, ¿de qué época? y
¿cómo de densa?), ofrece un catálogo de propuestas que encajan con estados de
ánimo o apetencias de los usuarios en aquel momento.
60
Figura. El “recomendador” de https://www.filmin.es/
D. Adapta tu contenido
Tal y como se ha comprobado en muchos estudios, los usuarios de Internet

generalmente no leen palabra por palabra, sino que escanean la página
para encontrar la información que han entrado a buscar.
Por tanto, la estructura de la página tiene que responder a esta forma de actuar de
los usuarios y presentar la información de forma lógica, distinguible,
compartimentada y jerárquica.
Algunas técnicas para hacerlo ya las hemos mencionado a lo largo del temario,
pero las revisamos para tenerlas en cuenta:
 Palabras claves resaltadas: enlaces, color, negrita.
 Subtítulos significativos, complementarios al titular.
 Listas con viñetas o puntos.
 Utilizar material gráfico para hacer menos densa la lectura.
61
Usabilidad
 Distinguir los diferentes apartados de un sitio web con cápsulas o

compartimentos.
 En los artículos, utilizar la técnica de poner una idea por párrafo y

ordenar la información en forma de pirámide invertida,
empezando por lo más importante y acabando con la información más
secundaria.
Figura. Parte del la home del periódico deportivo http://www.mundodeportivo.com/
En este pantallazo del Mundo Deportivo vemos como cada noticia está encuadrada
en un cajón. En la sección “fútbol internacional” destacan una noticia y ponen
otras tres a un segundo nivel de importancia. Otras secciones como “multimedia” o
el enlace a La Vanguardia están en un cajón de otro color.
62
Joshua Porter explica en “Designing for the social web” cómo Amazon ha
conseguido la credibilidad y fidelidad de miles de usuarios. Dio la casualidad
que mientras estaba realizando un estudio sobre ecommerce y pedía a los usuarios
que entraran en diversas tiendas para comprar, se encontró con que varios
usuarios le pedían acudir primero a Amazon.
Inicialmente creyeron que querían acudir a Amazon porque tenían una cuenta allí,
sus datos, su lista de deseos... por lo que sería más fácil para ellos realizar allí la
compra. Pero la respuesta de los usuarios fue otra: muchos acudían a Amazon para
investigar sobre un producto y sondear opiniones de clientes, aunque luego lo
fueran a comprar a otro sitio.
Tal y como explica Porter, la fuerza magnética de Amazon son las opiniones de
los usuarios, ya que les permiten conocer la experiencia que otras personas han
tenido con el producto sin que se inmiscuya ninguna información por parte de la
empresa.
Los contenidos son el pilar fundamental del marketing digital y, entre otras cosas,
sirven para generar credibilidad, pero no servirán de nada si no son encontrables o
atractivos de leer. En este sentido, la usabilidad tiene un papel esencial.
E. Unifica los intereses del usuario con los empresariales
Tal y como explica la experta en contenidos Kristina Halvorson, para que el

contenido de una web tenga éxito debe satisfacer las necesidades de los
usuarios y apoyar los objetivos del negocio.
El principal interés de los usuarios es conocer qué puede hacer la empresa para
satisfacer las necesidades que los han llevado hasta allí. Por otra parte, el interés
de la empresa es que el usuario que venga se convierta en cliente y aporte un
beneficio económico.
Para que estos intereses confluyan, un sitio web debe aportar la información
adecuada, destacar el beneficio y llamar a la acción para incentivar la compra o
lograr una conversión. Luego podemos añadir apartados con la historia
corporativa o la presentación del equipo, pero lo fundamental de entrada es
dejar clara la propuesta de valor que nos destaca.
63
Usabilidad
Los usuarios obtienen su primera impresión sobre una web durante el primer
de la visita, una vez han escaneado la pantalla. A veces, si nos han encontrado a
través de Google, puede que ni siquiera necesiten entrar para saber si están
interesados o no.
Esta primera impresión no estará basada en los contenidos, sino en elementos más
superficiales que tienen que ver más con usabilidad: la estructura de la página, la
presentación de información clave, la velocidad de la carga o el diseño de la web.
La segunda impresión ya se genera en los primeros 10 segundos, una vez el

usuario entra, lee los mensajes principales y busca quién está detrás de la web,
qué ofrece y si le interesa.
Si continúa más allá y se queda un minuto en la web podrá llegar a profundizar en

la comunicación secundaria para tratar de entender si la empresa podrá
solucionar la necesidad específica que tiene, si forma parte de la audiencia, etc.
Figura. Pirámide de mensajes de Kristina Halvorson.
64
F. Fideliza
Susan Weinschenk es una psicóloga conductista que ayuda en la elaboración de

sitios web, software y otros sistemas. Según ella, en la relación web-usuario existen
tres factores, que a su vez definen tres estadios de la interacción:
 Can do: ¿Los usuarios encuentran la información que busca? ¿Saben qué
tienen que hacer? ¿Tienen claros qué botones apretar?
 Will do: ¿Nuestro contenido y diseño UX propicia que el usuario actúe en

base a la información proporcionada? ¿Es útil para ellos? ¿Responderán a
las llamadas a la acción?
 Still do: ¿Una vez han realizado el proceso una vez, han quedado
satisfechos? ¿Suficientemente satisfechos para volver?
Un proceso de diseño centrado en el usuario asegurará que se cumple con el

primer factor, “can do”, pero si se desea asegurar el factor “will do” y el “still do”,
será necesario aplicar técnicas de persuasión, vinculación emocional y creación de
lazos de confianza. Hay varias medidas que a nivel de usabilidad y UX
podemos poner en práctica para fomentar la fidelización:
o No ofrecer demasiadas opciones, a no ser que las pidan. La idea es

equivalente a un menú de restaurante. Por un lado tenemos una lista breve
de platos recomendados, y por otra 10 páginas de carta. Puede que nos
interese ver toda la oferta, pero seguro que inicialmente echaremos una
ojeada a las recomendaciones. En los sitios web ocurre lo mismo, tenemos
que destacar una oferta, un producto o un servicio estrella por encima de
los demás; que constituya nuestra principal oferta de valor o rasgo
diferencial como empresa.
o Mostrar una validación social. Cuando no estamos seguros sobre algo,

consultamos opiniones externas para tomar nuestra decisión. En este
sentido, mostrar comentarios positivos, críticas de medios especializados u
opiniones de otros usuarios es de gran utilidad para los potenciales
compradores.
65
Usabilidad
o La exclusividad apremia las decisiones de compra. Ofertas

limitadas, cuentas atrás, número de stock disponible… por ejemplo,
muchas webs de hoteles incluyen mensajes del estilo “solo 2 habitaciones
disponibles”, aunque sea mentira, para generar tensión y apremiar la
decisión.
o Utilizar el contenido gráfico con sentido. Mostrar personas, sobre

todo rostros, ayuda a crear una empatía.
2.4. Adaptación a dispositivos móviles
2.4.1. Características básicas del diseño responsive
Desde la irrupción y posterior masificación del uso de dispositivos móviles con

acceso a Internet supuso un gran cambio en la usabilidad web. En un periodo
relativamente de corto de tiempo (el que tardaron los usuarios en hacer de la
navegación móvil un hábito), los propietarios de sitios web se dieron cuenta de que
no podían apoyarse más en páginas que solamente se apoyaran en la resolución de
una pantalla común (la del ordenador), sino que debían adaptarse a diferentes
tamaños de pantalla, calidades de resolución y contextos de uso.
Como consumidores somos perfectamente conscientes de que no es lo mismo

interactuar con una página en el autobús con el teléfono móvil, que hacerlo
sentados en casa delante de un portátil: la forma de navegar, la visualización del
contenido o el grado de concentración –entre otras cosas– cambian
completamente.
El responsive design se popularizó aproximadamente a partir de 2012, y se basa

fundamentalmente en este concepto de “adaptabilidad”, tanto del dispositivo
como del momento de consumo.
El diseño de la web responsive, por tanto, consiste en aplicar técnicas de diseño

web que permitan que la experiencia del usuario (UX) no se vea afectada por el
cambio de dispositivo. O, en otras palabras, se trata de hacer que la visualización e
66
interacción con el contenido web cambie según el dispositivo para adaptarse a las
condiciones sin perder eficiencia.
En definitiva, se trata de un enfoque flexible y adaptable a la visualización

de contenido web, lograda a través de tecnologías que permiten reorganizar,
cambiar el tamaño y resaltar, añadir o quitar contenido. Esto significa que una
misma web se adapta dependiendo de cuál sea el dispositivo desde el cual accede el
usuario.
En lugar de adaptar diseños independientes a cada dispositivo, el diseño

responsive se basa en integrar diferentes tecnologías para ofrecer una
experiencia óptima independientemente del dispositivo.
Recuerda
No se trata de lograr que la web tenga buen aspecto en los diferentes

dispositivos, sino que debe ofrecer la mejor experiencia de uso posible.
En materia puramente de diseño, Ethan Marcotte11 acuñó el término responsive

web design como una técnica que se apoya en:
 Media Queries: especificaciones de código que aplican unos estilos de

diseño u otros dependiendo de ciertas características del dispositivo, como
el tamaño de la pantalla o la resolución.
 Imágenes flexibles: el tamaño de las imágenes se adapta también a las

características (tamaño, resolución, posición) del dispositivo.
 Cuadrícula fluida: la cuadrícula sobre la que se organizan los contenidos

es fluida, de forma que puede pasar de, por ejemplo, 4 columnas a 3, 2 o 1,
dependiendo del dispositivo.
11 https://ethanmarcotte.com/
67
Usabilidad
Por este motivo, en el desarrollo de un sitio web se realiza un trabajo inicial de

arquitectura de la información que consiste en jerarquizar los contenidos: se
ofrecen primero y de forma más visible los más importantes, mientras que se dejan
los secundarios en segundo término.
También se pueden adaptar los menús de navegación (por ejemplo, se suele

colocar el menú desplegable bajo un icono en una parte visible para optimizar el
espacio en al pantalla) y la presentación de los contenidos.
Figura. Diferentes formas de presentar el contenido web según la pantalla de

visualización.
Luke Wrobleski, en el artículo y posterior libro “Mobile First”12, recomendó

plantear el diseño de sitios web comenzando por la versión móvil, extendiéndola
después a dispositivos de mayor tamaño Ofreciendo con ellos 3 ventajas:
 Adaptar la experiencia a un creciente número de usuarios.
 Dada la limitación de espacio, enfocarse en los contenidos y

funcionalidades más importantes.
12 Descargable aquí: http://www.ferrispark.com/audio/DOCUMENTS/mobile-first.pdf
68
 Ampliar las capacidades mediante las funciones integradas en el móvil:

localización mediante GPS, acelerómetro, diferentes gestos táctiles, acceso
a la cámara, etc.
2.4.2. Recomendaciones para el diseño responsive
La experiencia de uso en móviles está determinada por las características del

dispositivo, que fundamentalmente son:
 Menor tamaño de pantalla.
 Interacción táctil y utilización de diferentes gestos.
 Integración de funciones propias del smartphone, como cámara, redes

sociales, ubicación GPS, etc.
Sin embargo, también hay el condicionante de las situaciones de uso que hoy en
día son prácticamente en cualquier lugar y momento. En las peores
condiciones, el usuario puede incluso acceder a un sitio web con:
 Baja conectividad (baja señal wifi o falta de cobertura)
 Poca visibilidad (luz del sol reflejada en la pantalla, por ejemplo).
 En movimiento (caminando, por ejemplo) o limitación del mismo (de pie

en el metro, por ejemplo).
 Sin sonido (por estar en un lugar público o reunión, donde pueda

molestar).
Debido a estas diferencias notables respecto al consumo de Internet con

ordenadores, todo lo que envuelve la experiencia web: interacción, diseño,
creación de contenidos, etc. ha cambiado notablemente. De hecho, debido al
dominio actual de la navegación móvil, es la navegación con ordenadores la que se
ve más influenciada por el consumo a través de otros dispositivos.
69
Usabilidad
Por ejemplo, en redes sociales cada vez es más común el contenido de vídeo por
encima del escrito. Y no solo eso, estos vídeos ya están planteados para ser vistos
sin sonido (con subtítulos o letras integradas), su reproducción es automática y
tienden a estructurarse para llamar la atención en los primeros 5 segundos.
Figura. También en PC, los vídeos de Facebook se pueden ver con subtítulos,
reproducción automática y sin sonido.
Debido a estas diferencias, a continuación especificamos algunas prácticas a

tener en cuenta para hacer diseños responsive:
 Jerarquizar los contenidos según su importancia
Tal y como se comentaba anteriormente, debido a una limitación de espacio en

dispositivos móviles, es aún más importante organizar los contenidos en base a su
importancia. Ya no es posible ofrecer 30 contenidos distintos y 20 acciones
posibles en una interfaz, es necesario orientar al usuario hacia el contenido más
70
relevante y actual, así como en la acción principal que pretendemos que el visitante
lleve a cabo en el sitio (por ejemplo, suscribirse a la newsletter).
 Diseñar para la distracción
Debido a que los dispositivos móviles pueden ser usados en el exterior donde los
usuarios disponen de menos tiempo, menos atención y múltiples distracciones,
Josh Clark en el libro “Tap worthy - Designing Great iPhone Apps” resume tres
estados o motivos esenciales de uso de dispositivos móviles:
o Microtareas: Uso para tareas rápidas, como por ejemplo leer un correo,
enviar un mensaje o hacer una consulta.
o Local: Encontrar información sobre temas cercanos geográficamente
(comercios, negocios, trabajo, alojamiento, restaurantes, sitios para
visitar…).
o Aburrimiento: En busca de entretenimiento y distracción rápida.
 Facilitar la navegación
Los teclados de los dispositivos móviles resultan más difíciles de usar por su
tamaño, disposición de los dedos respecto al dispositivo, la posibilidad de que el
usuario esté en movimiento, peor iluminación si está en el exterior, etc. Por estos
motivos, se recomienda:
o Limitar el número de datos solicitados (contraseñas, aceptación de cookies,

ventanas emergentes, formularios, etc.)
o Mostrar el teclado correcto: por ejemplo el de números si se va a introducir
un número de teléfono o el de letras si se pasa a introducir la calle.
o Ofrecer la posibilidad de mantener abierta la sesión, recordar contraseñas y
búsquedas anteriores, etc.
 Apoyarse en los gestos del dispositivo
Es importante tener en cuenta la experiencia de uso y la interacción con los

contenidos propias de dispositivos móviles: ampliar imagen, deslizar, arrastrar,
pellizcar, rotar… es importante adaptar el contenido a estas características, dejar
de pensar solamente en el clic.
71
Usabilidad
Por ejemplo, si publicamos una galería de imágenes, en el ordenador tendremos

que hacer clic en flechas para avanzar, o doble clic en la imagen para ampliar. En
un dispositivo móvil, en cambio, es más natural deslizar las imágenes y ampliarlas
con un gesto de los dedos; en ningún caso haciendo clic o cambiando de pantalla.
 Hacer uso de los estándares
Los estándares son aquellos símbolos, códigos o acciones que están asumidos
como naturales y no generan dudas en los usuarios. Generan un lenguaje común y
facilitan la interacción universal con los sitios web y herramientas digitales.
Por ejemplo, el acceso al menú desde un icono en el área superior izquierda o

menús contextuales en el pie de pantalla.
 Crear áreas táctiles adaptadas
Es importante asegurar que las áreas que el usuario debe accionar (botones,
controles de formularios, enlaces, etc.) tienen el tamaño necesario para que
puedan ser utilizadas con comodidad. Los botones grandes mejoran la usabilidad.
Las recomendaciones de iPhone, por ejemplo, indican que el área táctica mínima
debe tener un tamaño de 44x44 píxeles.
En este apartado también hay que tener en cuenta los enlaces, deben ser
fácilmente clicables para poder copiarlos y compartirlos, en caso de que no haya
botón para hacerlo.
 Hacer cómoda la interacción para las manos
Los dedos (los pulgares o el índice) pueden acceder con más facilidad a ciertos
puntos de la pantalla (por ejemplo, el centro o puntos muy esquinados son de
acceso más complicado). Es recomendable colocar los botones y otros elementos
de interacción importante en esas zonas para facilitar el uso.
También es importante acomodar el texto a la mano. Por ejemplo, cuando se

muestra un texto tras hacer un gesto sobre el dispositivo, es importante que
aparezca por encima de la mano y no por debajo para evitar quede ocultado.
72
2.4.3. Características técnicas del diseño mobile
Resumidas las características globales del diseño web responsive teniendo en

cuenta sobre todo la usabilidad y la experiencia del usuario, entremos de forma
más concreta en las características específicas del diseño para los disposi-
tivos móviles.
A continuación profundizaremos más en los estándares y características técni-

cas básicas de la web responsive. Es decir, cuestiones estéticas y prácticas que ne-
cesitamos saber para poner en práctica en el diseño de webs pensando en su uso
móvil:
1. Crear un diseño multipantalla
El objetivo es que el diseño se adapte a diferentes pantallas y resoluciones, pero la

cuestión es cómo hacerlo.
Es muy importante que tengamos claro qué tipo de contenido ofrecemos y

qué acciones queremos que hagan los usuarios, ya que en gran medida esto
determinará el dispositivo y los hábitos (por ejemplo, la recurrencia de visita) de
su interacción con nuestro sitio.
Una vez tenemos claro este punto, deberemos decidir cómo queremos que el dise-
ño del sitio web se adapte a las pantallas. Para ello hay diferentes opciones:
o Diseño fluido: Los elementos se adaptan según el ancho de la pantalla.
o Diseño adaptativo: Cuando la pantalla alcanza cierto límite de tamaño,

se cambia a otro diseño.
o Diseño responsive: Los contenidos se ordenan en bloques que se reor-

ganizan según las características de la pantalla y el navegador que se utiliza.
73
Usabilidad
Figura. De izquierda a derecha: fluido, adaptativo y responsvie .13
Cabe decir que estos tipos de diseño no son excluyentes entre ellos, podemos adap-
tarlo según la página. Lo importante es que escojamos la opción que escojamos,
tengamos en cuenta la interacción con el usuario.
2. Menús de navegación dinámicos
Las pantallas más pequeñas que ocultan el menú de navegación principal es una
buena manera de mantener los diseños simples. Un icono, texto o combinación de
ambos indica al usuario dónde está el menú.
Existen diferentes opciones para los menús dinámicos, y cuál escoger dependerá
de la cantidad de opciones de clic que presentemos y del tipo de nave-
gación que buscamos. Podemos hacer menús deslizantes (que se despliegan,
pero no tapan el contenido), desplegables (que sí lo tapan), canvas (con submenús
desplegables), etc.
13 Fuente: http://bit.ly/2a1hFoF
74
Figura. Ejemplo de menú dinámico deslizantee.14
3. Balance entre el peso de la fuente y el tamaño
La relación entre el tamaño de los encabezados y el texto del párrafo debe estar
bien equilibrada para facilitar su lectura y distinción. El tamaño debe variar según
el dispositivo, ya que por ejemplo un titular largo con una fuente muy grande en el
teléfono puede ocupar toda la pantalla. En cambio, en las pantallas grandes la dis-
tinción debe ser más visible.
También la tipografía es una elección importante. Hay que buscar una que sea en-
tendible, las letras no generen confusión, no haya caracteres extraños, que haya
una buena distinción entre mayúsculas y minúsculas, etc.
14 Fuente y diferentes tipos de menús dinámicos: http://bit.ly/2DgDNdo
75
Usabilidad
4. Anchuras de lectura óptima
Al hacer un diseño más amplio en las pantallas más grandes, es importante tener
en cuenta las longitudes de las líneas de nuestro contenido.
Si una línea de texto es demasiado larga, es más difícil de leer porque es difícil se-
guir la línea sin tener que desplazar la pantalla. Del mismo modo, si las líneas que
son demasiado cortas el ritmo de la lectura se rompe porque los ojos tienen que
moverse hacia arriba y hacia abajo demasiado frecuentemente.
La práctica común es mantener las longitudes de línea en alrededor de 60-75 ca-

racteres. Esto se puede lograr mediante el establecimiento de sus áreas de texto
para tener un máximo de anchura de aproximadamente 500/700 píxeles de ancho.
En este apunto también es importante tener en cuenta los espacios en blanco.

Los diseños que no respiran tienden a estresar la mirada del lector, por lo que la
atención se diluye y el usuario se va. Es conveniente controlar el espaciado y el
interlineado, de tal modo que sea cómodo para la vista. Se trata, pues, de encontrar
el equilibrio entre contenido y espacio en blanco.
5. Calidad de las imágenes y su visualización
Actualmente las páginas web, de media, pesan alrededor de los 2,3 MB. Las imá-
genes y los vídeos en alta calidad son parte de los causantes, pero a su vez la ten-
dencia estética se dirige hacia sitios con mucho contenido visual: grandes fotogra-
fías y muchos vídeos, incluso a toda pantalla.
El diseño web responsive utiliza los media queries de CSS3 para decidir cómo
se va a ver la web para distintos anchos de pantalla. Los saltos pueden ser de hasta
480px, de 481px a 767px, de 768px a 1024px, etc.; y en cada uno de estos saltos
podemos especificar unas reglas de CSS distintas.
La pregunta es: ¿dónde colocamos los saltos y por qué? Si usamos como referencia
el popular framework Bootstrap15 tenemos:
15 https://es.wikipedia.org/wiki/Bootstrap_(framework)
76
Hasta 480px
De 481px a 767px
De 768px a 979px
De 980px a 1199px
Igual o más de 1200px
Estos saltos son bastante óptimos para buena parte de las pantallas, a no ser que
tengan o mucha resolución o sean enormes (como por ejemplo un televisor).
Además, debemos tener presente que en diseño web responsive existe un problema
llamado art direction (dirección del arte). Significa que en una vista una imagen
determinada puede encajar perfectamente, pero en otra se pierde su valor. Un
ejemplo:
Figura. En este ejemplo, la imagen de la cueva se ve muy bien en pantalla grande, pero
en un formato más estrecho no tiene sentido.16
La cueva de la imagen se ve muy bien en pantallas grandes, pero en el móvil pierde

esplendor. En estos casos habría que utilizar imágenes distintas para cada
vista, de tal forma que luzcan mejor en una determinada pantalla.
6. Tiempo de carga
Uno de los principales criterios que va a tener en cuenta Google a la hora de posi-
cionar una página es el tiempo de carga, pues cada vez los usuarios son más “impa-
16 Fuente: http://bit.ly/1kj6AIA
77
Usabilidad
cientes” y el hecho de que una página no se cargue inmediatamente (en menos de 2

segundos) es motivo de abandono.
Es importante tener esto en mente a la hora de diseñar un sitio web, teniendo en

cuenta sobre todo el contenido pesado (imágenes y multimedia) que vamos a in-
cluir. Parte del trabajo de usabilidad consistirá en encontrar un equilibro entre la
cantidad de contenido, su calidad y el tiempo de carga, siendo este prioritario.
Existen herramientas como Google PageSpeed Insights para comprobar la veloci-

dad de carga de las páginas y obtener inputs sobre cómo optimizarla todavía más.
7. Poner la información importante en la parte superior
Lo hemos mencionado anteriormente, pero también es un aspecto importante de

diseño: debemos priorizar los bloques con la información que presentamos en
primer lugar.
En una pantalla de ordenador, tenemos varias columnas que visualizamos en la

misma línea horizontal, pero en un teléfono solo tenemos una. Como responsables
de diseño y usabilidad, debemos decidir cuál y qué información en concreto será la
primera de todas.
También deberemos tenerlo en cuenta para ubicar CTA’s, botones de acción como
el carrito de la compra o información relevante (como la de contacto).
Para saber más
En Google Developers profundizan a nivel técnico sobre los estándares y

características del diseño responsive:
https://developers.google.com/web/fundamentals/design-and-
ux/responsive/?hl=es
78
3. Usabilidad para la conversión

La conversión es un tema muy utilizado en marketing digital, sobre todo durante
los últimos años, en los cuales Internet se ha convertido en el principal medio de
comunicación para los consumidores. Además, la tendencia de realizar compras a
través de Internet se está normalizando cada vez más.
El concepto surge de una filosofía de marketing digital, conocida como inbound

marketing o marketing de atracción, que se basa en captar el interés de los
usuarios a través de contenidos digitales, llevarlos a los canales digitales de la
marca y, con el tiempo y varias interacciones, convertirlos en consumidores de la
misma.
Para saber más
En este post puedes leer un resumen de la historia y la filosofía del

inbound marketing:
https://www.inboundcycle.com/inbound-marketing-que-es
Este proceso de visitante a cliente consta de etapas y, en términos de inbound,

cada vez que un usuario da un paso relevante en el camino hacia la compra, realiza
una conversión. Dicho de otra forma, una conversión es la realización de
una acción pretendida por los responsables de marketing en un canal
digital.
Esta acción puede ser muchas cosas, pero tienen en común que, con cada
conversión, la marca obtiene algo más del cliente: información (email,
teléfono, intereses…), permiso para contactar con él, dinero, etc. Por tanto, pueden
ser conversiones acciones como rellenar un formulario, realizar una descarga de
un material, registrarse al sitio, reproducir un vídeo, suscribirse a una newsletter,
enviar una solicitud de información… y, evidentemente, realizar una compra.
Para entender la importancia de la usabilidad a la hora de lograr conversiones y

ventas en negocios online, veamos este célebre caso llamado The three hundred
79
Usabilidad
million dollar button17. El experto en usabilidad Jared Spool cuenta el caso de

éxito de un ecommerce, que pasó a aumentar sus ventas 300 millones de dólares
tras realizar una mejora de usabilidad:
“Es difícil imaginar un formulario que pueda ser más simple: dos campos, dos
botones y un enlace. Sin embargo, resulta que este formulario impedía que los
clientes compraran en un importante ecommerce por valor de 300.000.000$ al
año. Lo que es aún peor: los diseñadores del sitio no tenían ni idea de que había
un problema.
El formulario era simple. Los campos eran email y contraseña. Los botones eran
Login y Registro. Había un enlace para recuperar la contraseña. Era el inicio de
sesión de la web. Es algo con lo que los usuarios se encuentran todo el tiempo.
¿Cómo iban a tener problemas con él?
El equipo pensaba que el formulario ayudaba a los clientes repetidores a

comprar más rápidamente. A los clientes que compraban por primera vez no les
importaría el esfuerzo inicial porque, después de todo, volverán a por más y lo
apreciarán en compras posteriores. Todo el mundo gana, ¿no?
Estábamos equivocados sobre los que compraban por primera vez. Les
importaba tener que registrarse. Les molestaba tener que registrarse cuando se
encontraban con la página. Un comprador nos dijo: "Yo no estoy aquí para
entrar en una relación. Sólo quiero comprar algo".
Los diseñadores solucionaron el problema. Quitaron el botón “registro”. En su

lugar pusieron un botón “continuar” con un mensaje simple: "No es necesario
crear una cuenta para hacer compras en nuestro sitio, simplemente haz clic en
continuar para proceder al pago y envío. Para hacer tus compras en el futuro
aún más rápido, puedes crear una cuenta durante la compra. "
Los resultados: el número de usuarios que compraban aumentó un 45%. Las

compras adicionales supusieron un aumento de 15 millones de dólares el primer
mes. Para el primer año, el sitio registró un adicional de 300.000.000$.”
17 Artículo completo: https://articles.uie.com/three_hund_million_button/
80
Como podemos comprobar, aplicar medidas para mejorar la usabilidad, el

diseño y, en definitiva, la experiencia del usuario, puede marcar la diferencia a
la hora de generar conversiones y conseguir clientes en un negocio digital.
Con unos canales digitales optimizados y usables:
 Podemos aumentar la satisfacción de nuestro usuario, y si nuestro

usuario está satisfecho será más fiel a nuestra página.
 Facilitamos la navegación del usuario, que encontrará más fá-

cilmente lo que entra a buscar. Es importante que el usuario preste
más atención al contenido que a la navegabilidad.
 Ahorramos tiempo y esfuerzo a los usuarios. Para ellos el tiempo es

oro e Internet se basa mucho en la inmediatez: velocidad de carga, consu-
mo rápido, poco esfuerzo (por ejemplo, no tener que rellenar formularios
largos o realizar muchos pasos para completar un proceso). Si es necesario
rellenar formularios, para una compra online por ejemplo, éstos deben ser
lo más simples posible, ya que al usuario no le gusta gastar tiempo en
rellenar muchos datos.
Logrando todo esto, conseguiremos más conversiones, más ventas y más

beneficios. Otro concepto a tener en cuenta es justamente el KPI del ratio de
conversión, es decir, el porcentaje de veces, respecto al total de visitas, que se
realiza una acción marcada como conversión. Por ejemplo, del total de usuarios
que abren un email, cuántos hacen clic en alguno de los enlaces.
En este tercer tema vamos a aprender cómo aplicar principios de usabilidad en los
canales digitales para provocar y medir las conversiones. Nos centraremos
principalmente en las landing pages y en el concepto del retorno de la inversión
(ROI).
81
Usabilidad
3.1. El ROI
El ROI (Return On Investment) es la cuantificación del beneficio, ahorro o
incremento productivo que se relaciona con una inversión específica. Su cálculo es
necesario para poder entender las consecuencias, a nivel de monetización, de las
acciones que llevamos a cabo, para entender cómo estamos aprovechando las
oportunidades y qué errores estamos cometiendo.
Es una forma de determinar si las mejoras de usabilidad aplicadas han valido la

inversión, comparando el dinero gastado con los beneficios que resulten del
proceso.
Figura. Fórmula para el cálculo del ROI.
El cálculo del ROI tiene en cuenta dos variables, la inversión y el beneficio

obtenido. Si nos imaginamos un proyecto en el cual el trabajo de usabilidad ha
tenido un coste de 10.000 y hemos computado unos ingresos derivados por valor
de 40.000 estaríamos obteniendo un ROI del 300%.
En los negocios digitales los efectos de un trabajo pueden ser valorados de

diferentes maneras, según su propósito: mejorar un proceso, corregirlo o lograr un
objetivo (o sea, convertir). Por esta razón existen tres perspectivas que podemos
adoptar para medir los beneficios de la usabilidad:
 Aumento de las conversiones: Como hemos explicado hasta ahora, un

diseño y un contenido usables facilitan las ventas online y las conversiones
porque satisfacen a los usuarios y les ponen las cosas fáciles. Esta
perspectiva representa el ROI más claro, ya que los números son
completamente objetivos: tanto invertimos, tanto ganamos.
 Disminución de los costes: En ocasiones querremos mejorar la

usabilidad o el diseño para ahorrar costes, que pueden ser de distinta
82
índole: costos de producción, corrección, de mantenimiento, carga de

trabajo, de tiempo… en este caso debemos tener claro qué objetivos
perseguimos para medir los indicadores correctos. En cualquier caso, el
ahorro también se puede considerar como ROI.
 Objetivos concretos del proyecto: Por ejemplo, una campaña de

visibilidad para el lanzamiento de un producto suele ser cara y es probable
que no recuperemos la inversión solamente con las ventas iniciales de este
producto. Sin embargo, hay intangibles como la reputación de la marca, la
fidelización, los nuevos clientes atraídos, el engagement en redes sociales,
etc. que son menos tangibles, pero altamente valiosos en el mundo digital.
Recuerda
El ROI es la forma para determinar si las reformas de usabilidad aplica-

das han valido la inversión, comparando el dinero gastado con los bene-
ficios que resulten del proceso.
El ROI depende mucho de la forma en que se calcula. Los valores que

medimos, las cifras con las que comparamos o los marcos de tiempo son factores
que influyen directamente en los resultados.
Por esto es muy importante definir una estrategia de medición, con parámetros
claros establecidos de antemano, que nos darán información más concisa y fiable
que respalde nuestra valoración de la inversión en UX.
Optimización de la conversión
¿Por qué gastar dinero en usabilidad en lugar de invertirlo en otras

acciones? Es una pregunta que se puede plantear el director de cualquier
empresa, sobre todo si es una empresa grande, ya que sus ventas online es
probable que sigan produciéndose gracias al conocimiento que los consumidores
tienen de la marca. Sin embargo, independientemente del tamaño de la empresa,
las mejoras en usabilidad pueden marcar una gran diferencia.
83
Usabilidad
Hagamos una reflexión: si apostamos por una estrategia digital,

independientemente de lo compleja que sea, esperamos transformar el mayor
número posible de visitantes a los canales digitales en clientes. Es decir, queremos
optimizar las conversiones.
Invirtiendo en marketing digital, community management y contenidos, por

ejemplo, podemos lograr objetivos como atraer usuarios, mantener su atención y
hacerlos afines a la marca, pero de nada sirve si en algún momento no generamos
conversiones que den un retorno de la inversión. Con la usabilidad, en cambio,
mejoramos la experiencia del visitante, facilitamos sus tareas para convertir y,
además, lo logramos de forma permanente.
La usabilidad por tanto es medible y cuantificable, a pesar de que sus variables

muchas veces parecen intangibles. Recordemos las diferentes variables que
proponía Nielsen:
 Facilidad de aprendizaje.
 Capacidad de ser recordado (memorabilidad).
 Eficiencia (tiempo en que se realizan las tareas planteadas).
 Eficacia (grado de error en la realización de las tareas).
 Satisfacción del usuario.
Figura. Con un pequeño cambio de usabilidad, PayPal salva una barrera importante a
la hora de completar las transacciones.18
18 Fuente: Éste y más ejemplos en: http://bit.ly/2DhXIon
84
Fijémonos en el ejemplo de PayPal. Gracias a un cambio a priori tan simple

como “mostrar la contraseña”, salva una barrera tan importante como el olvido de
la misma o una escritura errónea (sobre todo con teclado del móvil) por parte de
los usuarios, algo que bloquea inevitablemente el proceso de pago.
En cambio, con este ligero cambio de usabilidad, el error se reduce

ostensiblemente y aumentan las prestaciones de usabilidad en los términos
planteados por Nielsen; lo cual implica un aumento de las transacciones a través
de la plataforma y, consecuentemente, un aumento del ROI.
Repasemos los beneficios económicos que supone la inversión en el diseño de la

experiencia de usuario:
Optimización de costes de desarrollo:
- Estimaciones más precisas

- Optimización de los tiempos
- Reducción de costes en mantenimiento correctivo
Incremento de ventas:
- Incrementar el número de conversiones, transacciones/ventas

- Incremento en ventas por producto
- Aumento en el tráfico/audiencia
- Mejora en la retención de usuarios y frecuencia de compra
- Incremento en los índices de captación de nuevos clientes
- Aumento de la cuota de mercado (mejora en la competitividad)
Eficacia, eficiencia y satisfacción del usuario:
- Aumentar la tasa de éxito y reducir los errores de los usuarios

- Mejorar la facilidad de uso y facilidad de aprendizaje
- Aumentar la productividad del usuario (reducción del tiempo/tarea)
- Promover la satisfacción de los usuarios
- Reducir los costes de soporte y los costes de formación
- Aumentar la confianza del usuario en el sistema
85
Usabilidad
Ingresos:
- Aumentar las ventas de productos, ingresos y cuota de mercado

- Aumentar el tráfico del sitio y las transacciones/compras
- Atraer y retener a más clientes
3.2. El valor de vida del cliente: CLV o Costumer

Lifetime Value
Figura. El ciclo de vida tiene forma de montículo, con una fase intermedia en la que los
clientes son realmente rentables.19
En ocasiones el retorno de la inversión no se calcula en base a la transacción sino

en base al valor que aportará el cliente a lo largo de todo el tiempo que
dure su relación con la marca. Es lo que se conoce como valor de vida del
cliente o Costumer Lifetime Value (CLV).
19 Fuente: http://bit.ly/2Ag3VjC
86
Este CLV variará según el tipo de productos que vendamos y la capacidad que
tengamos para retener y fidelizar. Se trata, pues, de no poner el foco de
atención en la primera adquisición, sino tener en cuenta también todas las que
pueda realizar después de esta.
Para saber más
En marketing se aplican técnicas de venta para alargar lo máximo po-

sible la relación con el cliente y aumentar su CLV. Las dos más conoci-
das son upselling y cross selling. Puedes leer sobre ellas aquí:
https://medium.com/meilmarketing/cross-selling-y-upselling-
qu%C3%A9-son-y-c%C3%B3mo-aplicar-estas-t%C3%A9cnicas-de-
marketing-a-tu-negocio-89a1ccbc3fa4
A diferencia de hace unos años, en que el objetivo central de las empresas era
captar nuevos clientes, actualmente el gran esfuerzo de marketing consiste
mantener los que ya tienen. Ante la alta competencia las grandes apuestas
estratégicas son la segmentación (también a través de Internet llegamos a un
mercado más amplio) y la adquisición de clientes de calidad con un CLV
longevo y que, a largo plazo, aporten un mayor ROI.
Gracias a la analítica web podemos contribuir a conseguir estos clientes de

calidad, ya que el estudio de métricas sobre acciones concretas, diseños, páginas,
conversiones y, en definitiva, todos los aspectos medibles; podemos aplicar nuevas
mejoras en diferentes disciplinas, entre ellas usabilidad (también marketing de
contenidos, publicidad digital, email marketing, etc.).
Calcular el valor del tiempo de vida es algo más complejo que el simple retorno de
la inversión porque requiere:
 Segmentar a los clientes: Puede segmentarse por canal de adquisición o

por comportamiento de compra, en base al valor medio de los pedidos, la
frecuencia de las compras, los períodos de retención, etc.
87
Usabilidad
 Calcular las tasas de retención para cada segmento: ¿Qué

porcentaje del segmento original se conserva año tras año?
 Calcular el beneficio neto de clientes retenidos cada año: En base

a la frecuencia de compra, la cantidad media de pedidos y los costes.
 Descontar el beneficio neto de cada año para obtener su valor

presente neto, menos los costes de adquisición: La suma de todos
los valores presentes netos menos los costes de adquisición es el valor de
vida del cliente.
Para saber más
David Hughes, un experto en email marketing, introdujo este concepto

en un artículo sobre consejos de analítica web. A continuación puedes
per un ejemplo desglosado del cálculo de este KPI:
http://ecommercerentable.es/calcular-clv-customer-lifetime-value/
3.3. El modelo de gestión

Aunque la creación e implementación de un modelo de gestión es una tarea
ejecutiva, es importante que los responsables de diseño y usabilidad tengan en
cuenta que cada negocio tiene (o debería tener) un modelo de gestión que
determine unas líneas maestras para orientar las acciones, entra ellas los
sitios web y demás productos digitales.
Teniendo claros varios aspectos de este modelo, que debe ser comunicado a los
diseñadores y programadores, tendremos una guía sobre aspectos elementales
sobre la conversión y los objetivos, como son el hecho de saber qué métricas o
KPIs medir y qué elementos optimizar o implementar para mejorar los
resultados.
88
Figura. Imagen que explica gráficamente por qué es necesario un modelo de gestión en
usabilidad: tenemos que alinear el diseño, los objetivos y la experiencia de los usuarios.
Repasemos los puntos de un modelo de gestión que resultan relevantes desde

el punto de vista de la usabilidad:
 Definir cómo podemos utilizar nuestro sitio para lograr los

objetivos de negocio: aumentar las ventas, obtener leads, reducir costes
de soporte, favorecer la fidelización, generar engagement…
 Crear un sitio web pensado para el público objetivo y las actividades que
queremos que realicen en él: informarse, comprar, consumir contenidos
periódicamente, ver un catálogo de productos y servicios, etc.
 Tener una estrategia web clara. Esto significa definir un modelo de

actuación en base a unos objetivos que se puedan medir para sacar
conclusiones estratégicas.
 Medir las métricas adecuadas que nos permitan mejorar las

prestaciones del sitio web en relación a los objetivos definidos:
89
Usabilidad
- Métricas de negocio: Los mismos que la organización utiliza para

medir el éxito a alto nivel. Por lo general son extraídos de un
sistema de gestión de ventas, captación u otro sistema crítico
utilizado por toda la empresa.
- Métricas del usuario: Comentarios de los usuarios recogidas en
encuestas, focus groups y tests de usabilidad. Las métricas más
valiosas suelen provenir de pruebas con usuarios.
- Métricas de negocio: Los mismos que la organización utiliza para
medir el éxito a alto nivel. Por lo general son extraídos de un
sistema de gestión de ventas, captación u otro sistema crítico
utilizado por toda la empresa.
 Priorizar los esfuerzos de diseño. Es importante centrar más

esfuerzos en aquellas páginas que tengan un mayor impacto en el ROI y no
dejarse llevar por la intuición o por criterios subjetivos.
 Probar, aprender y repetir. Los sitios web nunca están finalizados.

Salvo algunas excepciones obvias, los sitios web deben verse como
iniciativas estratégicas a largo plazo. La tecnología está en constante
cambio, el entorno competitivo está cambiando y lo más importante, las
expectativas del usuario evolucionan. Siempre será necesario actualizar los
sitios web para capitalizar sobre las condiciones más actuales, por eso
pensamos en los sitios web como experimentos en curso en lugar de
proyectos.
Para poder determinar la eficiencia de las medidas orientadas a mejorar la UX es

necesario tener una estrategia de medición. Si no están definidos los
objetivos ni una forma de evaluar el efecto de los cambios, será muy difícil calcular
el retorno. Los pasos para crear esta estrategia son:
1. Entender el negocio y sus objetivos estratégicos globales.
2. Hacer un análisis sobre las conversiones, los costos y el ROI a partir del
histórico de datos actual.
3. Definir los intereses particulares del proyecto digital y de cada acción.
90
4. Determinar los indicadores (métricas y KPI’s) asociados a cada uno de los

objetivos y que determinarán, con resultados numéricos, si los alcanzamos.
5. Hacer un seguimiento de las medidas aplicadas y analizar su efecto a través

de los KPI’s.
6. Crear informes cada cierto tiempo para visualizar y seguir los avances.
7. Tomando las métricas de estos importes, definir el ROI de las medidas

implementadas.
3.4. Las landing pages: optimización de la conversión

Una landing page es una página de destino en la que aterrizan los usuarios
después de realizar una búsqueda. Cualquier página de un sitio web puede
ser una página de destino, exceptuando aquellas que hayamos especificado
que no queremos que se indexen en buscadores, pero hay algunas páginas más
importantes que otras, como por ejemplo:
 Páginas de ficha de producto.

 Contenidos de actualidad más recientes.
 Páginas de conversión (formularios, descargas…).
 Página de información de contacto.
Los usuarios “aterrizan” en estas páginas después de clicar en un enlace

externo (búsqueda orgánica o publicidad SEM, banners, anuncios de YouTube,
enlaces naturales, publicaciones patrocinadas o anuncios en redes sociales,
escaneo de códigos QR, etc.). El principio fundamental de la experiencia con la
landing page es que el usuario realice una búsqueda, haga clic en un contenido
que potencialmente le ofrece una solución y llegue a una página (landing page),
donde encuentre esta solución.
A veces las marcas crean landing pages que no están integradas en el mismo
sitio web, sino que corresponden directamente a un proyecto específico o
cumplen un propósito determinado para una campaña. En este segundo caso,
muchas veces ni siquiera tienen menú de navegación porque son una página única.
91
Usabilidad
La diferencia principal entre sitio web y landing page la veremos muy clara con
este ejemplo de Peugeot. La marca de coches tiene su sitio web oficial, centrado
en promocionar sus vehículos, productos, servicios y sucursales. El objetivo de su
sitio es claramente la venta.
Figura. Home del sitio web corporativo de Peugeot España

(http://www.peugeot.es/inicio.html)
Sin embargo, para acciones puntuales como su iniciativa para ofrecer becas a
estudiantes de marketing y formarlos en su empresa. Este proyecto busca hacer
branding y darle una entidad a la marca más allá de sus productos. Al ser una
acción puntual (y periódica) que se aleja de la actividad principal de la marca,
diseñaron una landing page separada de su sitio web corporativo, dedicada
exclusivamente al concurso.
92
Figura. Landing page del concurso Talentos Marketing

(http://talentosmarketingpeugeot.com/).
3.4.1. Funciones estratégicas de la landing page
El concepto de landing page incorpora esta particularidad acentuada de que, en

ella, el usuario debe realizar una acción para alcanzar un objetivo de marketing
definido por la compañía. Puede ser desde rellenar un formulario hasta dar la
información y las herramientas para participar en un concurso, como en el caso del
ejemplo anterior.
Independientemente de la complejidad de la tarea a realizar, las landings tienen en

común que persiguen un objetivo estratégico muy concreto. Al estar
integradas dentro de un proyecto o una campaña (por lo que guardan una
relación con otras acciones y medios, para lograr una finalidad común), deben
cumplir con unas funciones con tal de favorecer el colectivo, cumpliendo su
propósito en el proceso de marketing.
En resumidas cuentas, las landing pages tienen estas funciones estratégicas:
 Deben integrar el ciclo de ventas provocando una conversión:

Seguramente es la misión más importante. Normalmente la landing page es
un paso más en un proceso hacia la venta, pero como escalón intermedio es
93
Usabilidad
fundamental para seguir captando la atención del usuario o conseguir

nuevas vías de contacto directo más eficientes.
 Deben cumplir su finalidad con rapidez: En unos pocos segundos, el

usuario debe poder identificar la propuesta de valor y qué tiene que hacer
para conseguirla. Luego, si le interesa, ya acabará de leer con detalle la
información adicional.
 Generar conocimiento de marca: El porcentaje de usuarios que

visitan por primera vez suele ser más alto en las páginas de destino que en
otras áreas de la web. ¿Por qué? Porque la gente puede escribir la dirección
de la página de inicio o marcar una página de producto para volver
después, pero casi siempre se encuentran con una página de destino
después de hacer clic en un anuncio o de realizar una búsqueda. Es
bastante probable que este tipo de visitante esté menos familiarizado con la
empresa y no tenga ninguna razón de peso para confiar en ella en primer
lugar, por esto el tipo de mensaje, diseño y UX que deben ofrecer estas
páginas se tienen que cuidar especialmente.
 Establecer credibilidad y confianza: En la línea del punto anterior,

además de crear conocimiento de marca, es de vital importancia que una
página de destino genere también confianza para que el usuario realice la
tarea. A parte de ser claro y transparente con la información, es interesante
mostrar credenciales, referencias, comentarios positivos de clientes, etc.
3.4.2. Características de una buena landing page
Como hemos explicado, el objetivo de las landing pages es generar conversiones y

ofrecer una experiencia positiva al usuario que ha realizado la acción establecida.
En base a esta idea principal, desglosamos qué características debe tener una
página de aterrizaje para lograr su propósito, desde la perspectiva de la usabilidad:
1. Diseño simple: minimizar o evitar distracciones
Hasta hace poco, las empresas crean páginas de destino que se ajustaban al diseño
general del sitio, incluyendo el encabezado estándar y la navegación. Es más eficaz,
sin embargo, simplificar la página de destino y separarla del sitio principal, tanto
94
visual como en cuanto a la arquitectura. Este enfoque orienta la atención del

visitante únicamente hacia la propuesta de valor y hacia una acción a realizar.
2. Navegación reducida
¿Tiene sentido crear un sitio web por el cual es imposible navegar? La respuesta es
sí. De hecho, la finalidad de la landing page es ser muy concreto en el mensaje y en
el objetivo, de modo que evitar las distracciones de un menú de navegación y una
composición de varias páginas refuerza este objetivo.
Figura. Ejemplo de landing page de un ebook de Usabilla, concisa y sin navegación.
3. Concisión en el mensaje
No existe tal cosa como un mínimo o un máximo de información que podemos dar,
la cuestión es que solo demos la necesaria e imprescindible para que el potencial
cliente disponga de toda la información que deba saber para decidir si “compra” o
no: beneficio, precio, garantías, condiciones, etc.
El copy de la página debe ser muy nítido y poco sobrecargado. Va muy bien
combinar diferentes fuentes y tamaños para escalar la información según su
importancia, utilizar formatos de listas o columnas, encuadrar el texto en formas o
95
Usabilidad
colores… en definitiva, tirar de recursos de soporte visual para facilitar la lectura y

dosificar la información.
Figura. En esta plantilla vemos diferentes formatos de texto: titular, párrafo, lista por
puntos y, debaxo, un listado de propiedades con iconos gráficos.
4. Llamadas a la acción, enlaces y botones destacados
Los botones en las landings siempre indican el siguiente paso a realizar para
completar el proceso. Es imprescindible que destaquen del resto de elementos y
que se puedan distinguir solo con un vistazo breve. Que sean grandes, tengan un
color distinto y que dentro haya esta llamada la acción (CTA) que marca el camino
con un mensaje directo e imperativo: “empieza ya”, “descarga el archivo”, “prueba
gratis ahora”…
96
Figura. El botón con CTA de Treehouse destaca perfectamente, utilizando el verde del
fondo de la página sobre el formulario blanco.
5. Formularios simples y user friendly
De la misma forma que debemos dar una indicación clara sobre la acción a
realizar, también debemos facilitar el proceso para llevarla a cabo. Lo normal en
cualquier landing es que se solicite información de contacto o un registro para
proceder, por lo que si incluye un formulario que el usuario debe rellenar.
Para incentivar a que lo haga, lo mejor es pedir la información mínima, para que
vea que solo necesita unos segundos de su tiempo y que no pedimos información
susceptible.
6. Alinear la landing page con el anuncio de origen
La principal vía de llegada a una landing page es haciendo clic en un algún tipo de
contenido publicitario que nos haya llamado la atención: un banner, una
publicación patrocinada en Facebook, un vídeo de YouTube, un contenido de una
newsletter, etc.
En este sentido, es muy importante que la experiencia global del usuario en su

proceso de conversión sea consistente y sin fisuras. Para allanar el camino a los
visitantes debemos lograr que la landing page sea una extensión del anuncio,
dando continuidad y completando lo que el consumidor desea.
97
Usabilidad
También implica una continuidad en aspectos como el diseño, el tono, el tipo de

lenguaje utilizado, etc. Incluso es resulta óptimo el hecho de repetir frases o
utilizar un sistema de pregunta-respuesta en los copys.
Figura. Banner de un anuncio de un curso.
Figura. Landing page de General Assembly, a la que llegamos después de clicar en el

banner. Respeta los colores y reproduce el copy del banner, con la posibilidad de acceder
a nueva información.
7. Utilizar imágenes consistentes
La descripción de la oferta es el contenido más importante a nivel práctico, pero

cualquier sitio web tiene que ser visualmente atractivo para captar la atención del
visitante y generar una percepción positiva, una cierta sensación de comodidad y
de confianza. Por esto debemos elegir cuidadosamente qué imagen utilizamos.
Puede ser una fotografía, una ilustración, una composición representativa o

abstracta, una viñeta… pero debe tener una relación directa con la oferta. Es
98
importante que no acapare todo el protagonismo, que recaer sobre todo en el CTA.
Otra opción es, directamente, simplificar al máximo y no utilizar ninguna imagen.
Figura. La landing page de Tiny Letter destaca el botón CTA en rojo y como imagen
gráfica utiliza gráficos de diferentes dispositivos que van rotando.
También podemos incluir vídeos o presentaciones, pero tengamos en cuenta que

requieren más tiempo al usuario y suponen una distracción. Ahora bien, si el
beneficio que ofrecemos es complicado de explicar, a veces un vídeo ilustrativo
de uno o dos minutos es mucho más práctico que un texto demasiado extenso.
Actualmente el vídeo es el formato de contenido estrella de Internet y gracias a la
mejora de las conexiones, no tarda nada en cargarse, de modo que minimiza el
impacto de la distracción.
99
Usabilidad
8. Minimizar la presencia de la marca
De entrada puede sonar absurdo, pero en una landing page reducir la presencia de
la marca al mínimo es un ejercicio que puede resultar muy positivo. ¿Por qué? En
el caso de la landing page, incidir demasiado en vender nuestra marca de forma
genérica provoca una distracción. Con la utilización de determinados colores
corporativos, una estética uniforme con el estilo de la marca y el logotipo es más
que suficiente.
Si lo pensamos bien, los usuarios llegan a las landings atraídos por las propuestas
de valor, pero en la mayoría de casos no conocen la marca que hay detrás. Por
tanto es una evolución natural. Primero logramos seducir con la oferta en concreto
y luego, como habremos conseguido su contacto, podemos empezar a potenciar el
conocimiento de marca y consolidar la relación (CLV) a partir de esta primera
conversión.
9. Repetir o añadir más de un call-to-action
Según cómo sea nuestra página y cuál sea nuestra oferta, puede ser conveniente
introducir más de un CTA. Por ejemplo:
 Cuando hay que hacer scroll, podemos colocar CTA’s para la misma acción
tanto en la parte de arriba como en la de debajo de la página. De esta
manera, el usuario no tiene que volver para encontrar el botón.
 Cuando proponemos diferentes vías para llegar a la conversión. Por

ejemplo chatear con un miembro de atención al cliente, ver un vídeo
tutorial, instalar una versión de prueba, etc.
 Poner más de un CTA, uno de principal que persiga el objetivo primario y

otro de secundario, que persiga un objetivo menor. Cuando lo que
buscamos es la venta, esta opción puede funcionar si la decisión de compra
puede posponerse, pero conseguimos el contacto del potencial cliente para
seguir en contacto con él.
Veamos algunos ejemplos de llamadas a la acción principales y secundarias:
100
Llamada a la acción principal Llamada a la acción secundaria
“Añadir a la cesta” “Descarga el folleto del producto”
“Revisa el pedido” “¿Tienes preguntas” Habla por chat

con uno de los miembros de nuestro
equipo”
“Descarga la versión de prueba “Mira la demo”

ahora”
“Haz una donación” “Conoce nuestra misión”
La llamada a la acción secundaria se muestra de forma menos prominente en la

página de destino, mediante el tratamiento visual, la posición, el tamaño, etc.
Figura. En Live Beep colocan dos CTA distintos, distinguidos por diferentes colores. En
este caso quieren potenciar el conocimiento de las prestaciones de su herramienta, de
modo que las dos opciones les parecen buenas y por esto tienen el mismo “peso”.
101
Usabilidad
Recuerda
Independientemente de que una conversión sea primaria o secunda-

ria, tenemos que hacer una medición y un seguimiento de los resulta-
dos obtenidos.
10. Garantizar la accesibilidad
A la hora de crear una landing page, debemos tener en cuenta también los
dispositivos desde los cuáles va a ser accesible y las condiciones con las que se
pueden encontrar los usuarios. Por tanto tenemos que hacer un diseño
responsive adaptable, no solo para favorecer su lectura y carga, sino pensando
también en aspectos como:
- Priorización y ordenación de la información.

- Ubicación del botón CTA.
- Tamaño y presentación de las imágenes.
Es muy importante que por el hecho de visualizar una landing en el dispositivo

móvil no se pierda información, o sea presentada de un modo diferente al ideado
originalmente.
11. Ofrecer una buena experiencia post-conversión
El hecho de preocuparnos por lograr la conversión en la landing, no significa que

nos podamos olvidar de qué ocurre después, cuando el usuario ya se ha convertido
en lead o en cliente. Llegados a este punto, ya debemos empezar a reforzar su
satisfacción para establecer lazos más estrechos, con futuras conversiones o
compras.
Por esto es imprescindible una página de agradecimiento que también esté

optimizada para generar nuevas conversiones: con otros CTA’s que inviten a
realizar nuevas acciones. Las más comunes son:
- Suscripción al blog o a la newsletter.

- Nuevas descargas (gratuitas o no).
102
- Acceso a descuentos.
- Nuevas solicitudes de información.
- Recomendación a sus contactos (incentivada con puntos, descuentos, etc.).
- Redirección a páginas de venta.
Figura. Esta página de agradecimiento de RoboForm invita a seguir la marca en sus

perfiles sociales y a compartir la experiencia con contactos.
3.5. Bases de evaluación y testeo

Las personas evolucionan y la tecnología también. Si echamos la vista atrás 10
años, el tipo de consumo que hacíamos de páginas web era muy distinto del que
hacemos ahora.
Esto se explica por los cambios constantes que experimentamos: los entornos
digitales cambian a gran velocidad y la forma de interactuar de los usuarios
también. Por esta razón, cualquier emprendedor que pretenda crear un negocio
digital de éxito debe tener claro que tiene que testear la usabilidad y el diseño de
sus productos para saber si realmente responden a las expectativas de los usuarios
y se adaptan a sus intereses, conocimientos, capacidades, etc.
103
Usabilidad
El objetivo principal de la evaluación es identificar y analizar los puntos

positivos y negativos de la interacción de un usuario con una interfaz
digital. Es decir, a través de un estudio empírico, descubrir si surgen problemas
con la navegación, si el usuario comprende qué debe hacer, si los resultados son los
esperados, si pueden mejorar, etc.
A continuación repasaremos los tipos de tests más utilizados en usabilidad

y veremos para qué sirven:
3.5.1. Test A/B
Es uno de los más utilizados. Consiste en medir cuestiones específicos de diseño o

copy para una acción específica, como por ejemplo landing pages o envíos de email
marketing.
Funciona de la siguiente forma: creamos dos páginas de destino con el mismo

objetivo, pero con algún aspecto diferentes (cambio de imagen, ubicación del CTA
cambiada, dos titulares diferentes…). Hacemos que la mitad de visitantes vean la
opción A y la otra mitad la opción B. Finalmente, medimos cuál de las dos
variantes genera más conversiones.
Figura. Esquema de una variable en un test A/B.20
20 Fuente: http://bit.ly/2n0NQsf
104
Para saber más
Este post recoge 8 casos de éxito sobre cómo la realización de tests

A/B ha influido de forma positiva en el ratio de conversión:
http://www.juancmejia.com/diseno-web/8-ejemplos-de-pruebas-
ab-casos-de-exito-en-la-optimizacion-de-la-usabilidad-web/
3.5.2. Test multivariante
Los tests multivariantes pueden siguen la fórmula del test A/B, pero con más
variaciones a la vez. Se crean varias versiones de los elementos más importantes de
una página y a cada versión se le asigna un código. Luego se generan varias
versiones alternativas en base a las diferentes combinaciones y se lanza el estudio.
Cada vez que un visitante llega a la página, el sistema muestra una de las
combinaciones y mide la eficacia de cada una en base a las conversiones logradas.
Figura. Esquema de las diferentes combinaciones, con dos titulares y dos imágenes, en
un posible test multivariante.21
21 Fuente: http://bit.ly/2DvyRBJ
105
Usabilidad
3.5.3. Pruebas con usuarios potenciales
Se trata de probar el producto digital que se haya creado (la web, la aplicación, el
juego…) con potenciales usuarios del mismo. Es decir, una muestra de unas
cuantas personas que se ajusten al perfil de nuestro público objetivo. Estas
pruebas pueden ser pautadas, con un moderador que dirija un poco las acciones
que deben hacer, o naturales, poniendo la muestra delante del producto y ver
cómo actúan.
Sea cuál sea la fórmula utilizada, es muy importante monitorizar las acciones
hechas por los usuarios, prestando especial atención a problemas de uso
que se encuentren, como por ejemplo no encontrar un determinado producto,
dificultades de lectura, interpretación errónea de información, etc.
Al terminar, podemos completar el test con una entrevista o una encuesta,

para acabar de recoger información cualitativa que nos pueda servir para obtener
insights que nos ayuden a mejorar el producto.
3.5.4. Lanzamiento de versiones beta
Las versiones beta ya son versiones completas y funcionales de productos digitales

(fundamentalmente software), que se pueden utilizar para realizar las acciones
básicas por las cuales han sido creados.
Estas versiones se pueden lanzar al mercado (normalmente de forma gratuita),

especificando que están en fase beta, y se estudia la interacción que tienen
los primeros usuarios con el dispositivo. A partir de estos estudios se
corrigen errores de funcionamiento y se incorporan nuevas funcionalidades que
los usuarios echan de menos.
3.5.5. Evaluaciones heurísticas
Es el análisis más experto y avanzado de todos los elementos de usabilidad de un

producto digital. Son análisis técnicos con la finalidad de detectar errores, así
como nuevas oportunidades de mejora.
106
Este método permite detectar prácticamente el 80% de problemas que tienen que
ver con UI, UX y diseño de interfaz, pero también es el más largo y complejo.
Básicamente consiste en crear tests para evaluar un producto digital y comprobar

que se ajusta a los principios de Nielsen que hemos explicado en este temario. El
propio Nielsen recomienda utilizar un sistema de puntuación de cada
aspecto analizado con una escala del 0 al 4, donde “cero” significa que no
existe ningún problema y “cuatro” indica que el error tiene una influencia
determinante para los objetivos del proyecto.
A partir de esta valoración de errores y defectos, determinaremos la prioridad de

las tareas de corrección y mejora. De hecho, hay que remarcar que la evaluación
heurística tiene como objetivo la solución de problemas concretos con medidas
específicas, no un rediseño de la plataforma que pueda conllevar cambios drásti-
cos.
Recuerda
Para mejorar el ROI a través de la usabilidad debemos potenciar

mucho la analítica web y los tests de usabilidad para detectar vías
de optimización.
107
Usabilidad
Glosario
Contexto de uso: El conjunto de usuarios, tareas, equipamiento en hardware,
software y otros materiales, así como los entornos psicológicos y sociales en los que
el producto se utiliza.
Interacción: Intercambio bidireccional de información entre los usuarios, el

equipamiento y el producto.
Interfaz de usuario: El conjunto formado por la capacidad de control, la infor-

mación ofrecida por los elementos del producto y la secuencia de interacciones
posibles que permite al usuario utilizar el producto para el fin por el que fue crea-
do.
Objetivo: Resultado deseado.
Prototipo: Representación limitada en funcionalidad de un producto completo o

una parte de él que se puede utilizar con fines de evaluación de ese producto.
Tarea: Actividad requerida para alcanzar un objetivo específico.
Usuario: Individuo que interactúa con el producto (se entiende que no están in-
cluidos aquellos en el equipo de desarrollo).
Experiencia de usuario o UX (del inglés User Experience): La UX trata acerca

de cómo se siente el usuario cuando utiliza un producto. Es importante distinguirla
del término usabilidad, ya que este último está centrado en la eficacia y la eficien-
cia de la interfaz. Una correcta aplicación de los principios del DCU resulta en un
producto de elevada usabilidad y con una UX favorable.
Accesibilidad: Capacidad de acceso a un sitio Web por todo tipo de usuarios,

independientemente de las limitaciones, de modo que los usuarios sean capaces de
percibir, entender, navegar e interactuar con dicho sitio de forma satisfactoria.
Tiene una vocación universal y es resultado de un diseño para todos.
108
Agile UX: Consiste en la integración de la UX en las metodologías de

desarrollo de software ágil. Por tanto el equipo de UX y el de desarrollo traba-
jan juntos.
Lean UX: Proceso de funciones cruzadas que se caracteriza por rutinas que
predisponen a los equipos a obtener resultados de alta calidad en la
experiencia del usuario de forma eficiente utilizando el tiempo inteligentemen-
te.
Arquitectura de información: Disciplina que se basa en organizar, clasifi-

car, ordenar, estructurar y describir los contenidos de un sitio web, con el
fin de que sus usuarios puedan satisfacer sus necesidades informativas con el me-
nor esfuerzo posible. Cabe destacar la importancia del mapa web en este campo.
Diseño de Interacción: Disciplina que se refiere a la actividad y resultado

de definir el comportamiento interactivo del sitio web. Es decir, qué ac-
ciones se ofrecerán al usuario en cada momento, y cómo responderá la aplicación a
las acciones que realice. También conocido como IxD, tiene una relación estrecha
con la arquitectura de información.
Diseño gráfico: Consiste en diseñar cuál será el aspecto gráfico o visual de un

sitio web. Es muy importante ya que desde el primer momento de la interacción
condicionará la usabilidad. Con un buen diseño gráfico se consigue lograr la expre-
sividad del producto y de potenciar la identidad visual como parte del proceso de
comunicación.
Buyer persona: Estudio de los usuarios usado para añadir características y obje-
tivos importantes de las personas a los datos de usuario. Para realizar este estudio
se usan “personas”, que son usuarios ficticios que representan patrones de conduc-
ta, objetivos y necesidades. Es una de las principales técnicas del diseño de inter-
acción.
Test A/B: Técnica que se usa en el diseño de una web que se basa en introducir un
pequeño cambio en el diseño para saber la efectividad de cada versión de diseño en
base al objetivo definido. Un buen ejemplo para realizar este tipo de test, sería el
proceso de compra de un e-commerce, ya que puede implicar incrementos signifi-
cativos en las ventas.
109
Usabilidad
Wireframe: Técnica que se utiliza en Arquitectura de Información. Consiste en

una guía visual aproximada de la estructura de una página web, definiendo el con-
tenido y su distribución visual. El Wireframe permite centrarse en el diseño de
contenidos antes que en el diseño visual.
Para saber más
En la web Usable y Accesible, encontrarás un amplio glosario sobre

conceptos estrechamente ligados a la usabilidad que engloba los as-
pectos más teóricos y los más técnicos:
https://www.usableyaccesible.com/recurso_glosario.php
110

Usabilidad Básica

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Usabilidad Básica

Cargado por

Copyright:

Formatos disponibles

Usabilidad y Experiencia de

1. Introducción a la usabilidad ................................................... 6

2. Principios fundamentales de usabilidad ................................. 42

3. Usabilidad para la conversión................................................ 79

Glosario ................................................................................. 108

La usabilidad hace referencia a la relación entre un dispositivo, herramienta o

Las directrices de usabilidad que veremos a continuación están basadas en la

Con el tiempo y la aparición de nuevos dispositivos y formas de interacción,

En este temario haremos una panorámica teórica del concepto usabilidad, de

1.1. ¿Qué es la usabilidad?

 “La usabilidad se refiere a la capacidad de un software de ser

 “Usabilidad es la eficiencia y satisfacción con la que un producto

 “La usabilidad es un atributo de calidad que mide lo fáciles que son de

 “La usabilidad es el grado en el cual algo (una aplicación, dispositivo o

 “La usabilidad se refiere a la medida en que un producto puede ser

1. Facilidad de aprendizaje: ¿Cómo de fácil es para los usuarios llevar a

3. Memorabilidad: Cuando los usuarios vuelven al diseño después de un

5. Satisfacción: ¿Cómo de agradable es utilizar el diseño? Los cuatro puntos

Para saber más

Existen varias organizaciones con proyección mundial que desde hace

Según la UXPA, el diseño centrado en el usuario (UCD, User Centered

En este modelo cuatro actividades forman el ciclo principal de trabajo:

Figura. Proceso de diseño centrado en el usuario. 1

1. Especificación del contexto de uso

2. Especificación de requerimientos y necesidades

Identificación de cualquier requerimiento de negocio u objetivos de usuarios que

3. Creación de soluciones técnicas y de diseño

4. Evaluación del diseño

Lo más importante es que la evaluación, idealmente mediante tests de usabilidad

¿Cuál es la diferencia entre Usabilidad y DCU? La usabilidad es un atributo

Las métricas básicas recomendadas para evaluar la usabilidad del producto

 Eficiencia: Cantidad y utilidad de recursos empleados en relación con la

 Satisfacción: Comodidad de uso, facilidad de aprendizaje, memorabilidad

1.2. El origen de la usabilidad web

Figura. Esquema básico de la ingeniería de factores humanos.2

A raíz de esta problemática se empezaron a publicar muchos libros sobre el diseño

Solo había unos pocos programas académicos de posgrado en HCI y la mayoría se

El concepto de usabilidad surgiría hacia finales de los ochenta, con la publicación

El enfoque insistía en el establecimiento de metas, prototipado y evaluación itera-

Este enfoque se convirtió en la base de los principios teóricos y métodos prácticos

1.3. Conceptos relacionados con la usabilidad

La encontrabilidad puede entenderse de dos formas:

 Por una parte, es la predisposición de un sitio web, gracias a su diseño y

Hay elementos externos que influyen directamente en la encontrabilidad, como los

La usabilidad de un sitio web está estrechamente relacionada con la

La accesibilidad web es un conjunto de técnicas aplicables al diseño y a la usabili-

Su objetivo es, mediante la aplicación de diferentes técnicas, conseguir que el dise-

Por ejemplo, existen aplicaciones conocidas como lectores de pantalla, como

Figura. En este vídeo puedes ver cómo funciona ChromeVox:

Los usuarios deberían encontrar información de manera rápida y fácil, ya

 Lenguaje: El tipo de lenguaje debe adaptarse al público al que nos dirigi-

 Visibilidad: Ayuda al usuario a construir un modelo mental del producto

 Mobile-first: Concepto que prioriza el diseño web en los dispositi-

El máximo organismo dentro de la jerarquía de Internet que se encarga de promo-

¿Por qué debe ser mi página web accesible?

 Simplifica el desarrollo web.

¿Quiénes deben por ley tener una página web accesible?

La ley obliga a tener una página web accesible a:

 Administraciones públicas o webs elaboradas y/o mantenidas con fi-

 Entidades y empresas que gestionan servicios públicos. Especialmente las

 Empresas que prestan servicios de especial trascendencia económi-

Prioridad y niveles de la accesibilidad web

El grado de accesibilidad se establece en niveles denominados A, Doble A, y Triple

Técnicamente la accesibilidad se implementa mediante pautas de lógica estructu-