Está en la página 1de 112

CARLOS HUERTA MILOS | UX

Cien elementos que debe


tener un Sitio Web
Juan Carlos Camus
CARLOS HUERTA MILOS | UX

Identidad, Branding y
Contacto
CARLOS HUERTA MILOS | UX

1. Aplicación de imagen corporativa y logotipo

Objetivo a conseguir:
Se deben utilizar los elementos necesarios para que cualquier página de un sitio
web pueda ser identificada como perteneciente a una marca.

Cómo se hace:
Los usuarios pueden llegar a la página de un sitio utilizando un enlace, sin pasar
por la portada que está preparada para tal efecto. ¿Se darán cuenta a quién
pertenece el espacio digital que visitan? ¿Se animaran a visitar algo más que la
página a la que llegaron? Cada página de un sitio web debe incluir una imagen
corporativa y un ambiente que dé cuenta de las características de los productos y
servicios que ofrece, desplegando, al menos, los siguientes elementos:

Un cabezal que incluya la marca que identifique a la empresa u organización.

El cabezal debe utilizarse el mismo en todo el sitio web con el fin de evitar que el
usuario tenga que “aprender” más de un método para navegar por sus páginas.

El logotipo que aparezca en el cabezal debe ir acompañado de un lema o eslogan


que dé a conocer la actividad principal de la organización.

El logotipo debe ir enlazado a la portada del sitio web, para que desde cada
página se pueda llegar hasta la portada con una acción simple (un click o un
toque de la pantalla táctil). Hay que considerar que se hace necesario que la
organización cuente con algún documento referido a su imagen corporativa
(por ejemplo, un manual de uso de marca) que incluya tanto su utilización en
elementos físicos como en medios digitales, desarrollando la aplicación de la marca
para pantallas.
CARLOS HUERTA MILOS | UX

2. Explicar el sitio mediante un eslogan.

Objetivo a conseguir:
Desplegar una frase que explique el contenido del sitio web en forma simple para
dar a entender de qué se trata el espacio digital a quien no conoce la marca.

Cómo se hace:
Para muchas personas el sitio web será su primer contacto con la empresa u
organización que lo mantiene. De allí que sea relevante que se les ofrezca una
explicación resumida acerca de lo que hace o bien, cuál es su área de trabajo.
El uso de un lema, eslogan o frase publicitaria que sea simple de entender y de
recordar, permitirá dar a conocer su actividad central y apoyar al visitante que
revisa sus páginas. El eslogan debe formar parte del cabezal superior del sitio web
(por ejemplo, junto o cerca del logotipo de la institución), para que esté presente
en todas las páginas y entregue un mensaje consistente, sin importar cuál sea
la primera página que elija ver el usuario que lo visita. Hay diferentes tipos de
eslóganes por lo que se debe considerar lo siguiente:

Descriptivo: si la organización es poco conocida, se debe optar por una frase


que describa lo que hace y sus principales productos, de tal manera de informar
adecuadamente a quien la visita acerca de sus características y capacidades.

Institucional: si la organización es más conocida, a través del lema se pone énfasis


en los valores más permanentes de la entidad y que no necesariamente se refieren
a productos sino que habitualmente, a la forma de trabajo de la organización y así
se logra un segundo objetivo que es reforzar la marca.

Emocional: se refiere a las emociones que desea despertar el producto principal


que entrega la organización y por lo mismo, su uso debe estar muy alineado con
la estrategia comercial para que no haya diferencias entre lo que se ofrece en el
texto y la realidad.
CARLOS HUERTA MILOS | UX

3. Inclusión de direcciones y teléfonos.

Objetivo a conseguir: Cómo llegar: también es una idea interesante entregar datos para ir físicamente
Facilitar la entrega de datos relevantes de la empresa u organización en cada al lugar, explicando la ubicación con un mapa que muestre la ubicación física
página, para favorecer el contacto con los clientes. y la forma de acercarse ya sea en vehículo propio o bien usando la locomoción
colectiva de la ciudad. Una alternativa factible es la inclusión de un mapa de
Google personalizado, que será de utilidad para los usuarios que vean el sitio en
Cómo se hace: dispositivos móviles.
Los sitios web son espacios de comunicación que buscan acercar a las
Formulario de contacto: que permita enviar e-mails desde el sitio web, sin
organizaciones, sus productos y servicios, con las personas que se interesan por los
que el usuario deba usar su software de correo electrónico. Ver más adelante la
temas en los que trabajan y las ofertas de información que hacen. Por lo mismo,
información acerca de este tipo de formularios.
hay que entenderlos como espacios de contacto y apoyar esa idea mediante la
entrega de los elementos relevantes orientados a cumplir ese objetivo.

En la interfaz del sitio web se debe ofrecer un espacio permanente con las
diferentes formas de contacto. Esto se puede hacer de varias maneras, como se
describe a continuación:

Datos al pie de página: lo recomendable es que al final de cada una de las


páginas del sitio web, se incluya el nombre de la empresa, dirección (incluyendo
código postal, ciudad y país), teléfono con códigos de numeración internacional,
información legal y/o tributaria relevante, enlace a un organigrama de la
organización, dirección de correo electrónico y enlaces hacia las redes sociales
disponibles.

Redes sociales: se deben presentar las redes sociales relevantes del momento
(por ejemplo, Facebook, Twitter u otros), lo que además de validar dichas cuentas
como las oficiales, permitirán mantener una comunicación adicional e incluso
alternativa, para contactos individuales con clientes y para enfrentar aquellos
momentos en que el sitio web no esté en funcionamiento y se deba mantener la
comunicación con ellos.
CARLOS HUERTA MILOS | UX

4. Presentar la organización: Quiénes somos

Objetivo a conseguir: Explicar qué es y a qué se dedica la empresa u facilitar y extender el desarrollo de negocios.
organización, junto con mostrar a sus representantes, aumenta la credibilidad y
Redes sociales: incluir las que se utilicen, validando la existencia del perfil oficial en
estimula los contactos con clientes.
cada caso.

Cómo se hace: Puesto que muchas personas usarán el sitio web como primer
contacto con la organización, debe entregarse una breve historia de su trayectoria,
dar a conocer un organigrama o reseña de sus principales ejecutivos e informar
cuáles son los clientes con los que se han desarrollado proyectos. Este espacio
ayudará a aumentar la credibilidad en su desempeño y estimulará contactos con
clientes interesados.

Se recomienda la existencia de una sección llamada genéricamente Quiénes


somos mediante la cual se entregue información acerca de la organización
propietaria del sitio web. Entre los elementos que se deberían incluir se
recomienda los siguientes:

Historia y trayectoria: informar de manera breve los principales hitos desde


la creación destacando mediante frases, aquellos que sean relevantes de dar a
conocer.

Organigrama: permite a un cliente entender la forma en que está organizada la


entidad y darle contexto a su relación con ella.

Certificaciones: mostrar las que cumple (por ejemplo, normas ISO) y si es del
caso, el organismo que fiscaliza sus operaciones, ayuda a entender el nivel de la
empresa u organización. Se puede incluir también información de tipo legal y/o
tributaria que sea necesaria.

Principales clientes y proyectos: permite aumentar la credibilidad, mostrando


a quién se ha atendido y en qué tipo de actividades. Gracias a esto se puede
CARLOS HUERTA MILOS | UX

5. Agenda de contactos

Objetivo a conseguir: Principales ejecutivos: se debe poner énfasis en aquellas personas que dirigen
Dar a conocer los nombres y datos de los ejecutivos para facilitar la realización la organización y que tienen relación directa con clientes, de manera de facilitar
de negocios, como también los contactos necesarios para temas de post venta y el contacto con ellos. La incorporación de teléfonos, correo electrónico y otros
relaciones públicas. elementos similares, así como una fotografía, ayuda a generar credibilidad entre
los clientes.

incluir las que se utilicen, validando la existencia de un perfil oficial en cada caso.
Cómo se hace:
Como se planteó en el tema anterior “Quiénes somos, la organización”, el
sitio web es la puerta de entrada hacia la organización o empresa que tienen los
interesados en sus productos o servicios.

Entonces, se recomienda la existencia de una sección llamada genéricamente


Agenda de contactos que entregue los datos de las personas que estarán
disponibles para abordar temas relacionados con las áreas que cubre la
organización propietaria del sitio web. La idea de esta página es estimular
contactos en los temas que la organización desee encontrar clientes, dando a
conocer los nombres de los ejecutivos (datos de contacto -sin su casilla de e-mail
para evitar el spam-, teléfono con formato internacional para facilitar la llamada
desde móviles e incluso, fotografía de los principales) que faciliten la realización
de negocios, como también los relacionados con temas de post venta y los de
contacto para comunicaciones o relaciones públicas.

Entre los elementos que se debería incluir se recomienda los siguientes:

Guía interna de expertos: informa con quién hablar de diferentes temas en la


organización, ya sean consultas de tipo comercial, administrativo u organizacional.
Permitirá facilitar la atención y eliminará barreras entre los clientes interesados y
la organización.
CARLOS HUERTA MILOS | UX

6. Herramientas de contacto

Objetivo a conseguir: Tiempo de respuesta: en forma adicional a lo anterior, se recomienda dar una
Ofrecer espacios y canales de comunicación que funcionen dentro del propio sitio fecha de respuesta posible, para que el cliente que utiliza el formulario sepa a
web y sin necesidad de software adicional, para apoyar la comunicación con los qué atenerse y entienda que su petición no sólo ha sido recibida sino que será
clientes. atendida.

Finalmente, se debe anotar que en todos los casos en que se hacen promesas
relacionadas con tiempo, se debe contar con el flujo administrativo adecuado para
Cómo se hace:
dar cumplimiento a lo prometido.
En la interfaz del sitio web se debe ofrecer un espacio permanente que presente
las diferentes formas de contacto, que permita acceder a la información básica.

Esto se puede hacer de diferentes maneras, como se describe a continuación:

Formulario de contacto: debe permitir el envío de e-mails o mensajes a través


de la interfaz web, sin que el usuario tenga que usar su software de correo
electrónico; como se mencionó antes, en la página debe ofrecerse además la
información corporativa de contacto con la organización.

Datos solicitados: se estima que el formulario sólo debería solicitar los datos
básicos para establecer la comunicación (Nombre, correo electrónico y mensaje)
para evitar que se transforme en una barrera a quién desee enviar un mensaje. Si
se requieren más datos, se pueden solicitar en forma posterior.

Uso de Captcha: se recomienda incorporar este sistema que permite diferenciar a


una persona de un software que rellena el formulario sólo para efecto de spam. Su
uso facilita sólo contar con ingresos válidos de comunicaciones hacia el sitio web.

Respuesta automática: Se recomienda que el formulario pueda dar una respuesta


al usuario que lo utiliza, en particular asignando a la comunicación algún tipo de
numeración o folio que pueda ser seguida posteriormente desde el propio sitio
web o mediante consultas telefónicas. Esto le da seriedad a la petición.
CARLOS HUERTA MILOS | UX

7. Elección del nombre de dominio (URL)

Objetivo a conseguir: Con el fin de evitar complicaciones por parte del usuario, se debe permitir que el
Elegir un nombre de dominio que sea lo más simple posible, para ayudar a sus dominio funcione ya sea escribiendo o no las WWW, para asegurar que, en ningún
usuarios a que lo recuerden. caso, se pierda una visita por este motivo.

Asimismo, se recomienda inscribir el sitio web en el dominio local del país y otro
más universal que pueda ser usado en todo el mundo. Por ejemplo, un dominio
Cómo se hace:
.travel para espacios turísticos o bien el .org para organizaciones.
Dado que las personas que ingresan a un sitio web normalmente obtendrán su
nombre desde algún medio, la dirección debe ser lo más simple posible con el fin
de ayudar a recordarla. En este sentido, cualquier complicación ya sea en cuanto a
idioma, combinación de números y letras o tipos de letras que no conformen una
palabra (por ejemplo una sigla compleja), requerirán de un esfuerzo adicional de
comunicación que puede atentar contra este propósito.

Al registrar el dominio en la organización correspondiente (NIC.cl en Chile) se


debe tener la precaución de, al menos, cumplir con las siguientes condiciones:

Que sea simple de escribir; ayudará que sea similar al nombre de la organización
a la que se refiere, siempre ésta sea conocida. De lo contrario, es mejor preferir
un término común que represente el producto o servicio ofrecido o bien, que haga
referencia a su eslogan o nombre de su principal producto o servicio.

Si el nombre de dominio es complejo y el público tiende a escribirlo con errores,


hay que asegurarse de tener también las redacciones alternativas (ejemplo:
Google, Gogle y Gooogle) y que todas ellas redirijan al visitante al dominio
correcto.

Se recomienda que el nombre de dominio no tenga más de diez letras para


facilitar el recuerdo y que sea una palabra rápida de recordar por las personas.
CARLOS HUERTA MILOS | UX

Creación de contenidos
de calidad
CARLOS HUERTA MILOS | UX

8. Estrategia de contenidos

Objetivo a conseguir: requerimientos de la organización para generar los documentos que deban darse a
Desarrollar un sistema de generación de información con un flujo conocido por conocer de una manera que se enfoque en atender sus necesidades.
todos los participantes, que defina lo que se desea publicar, su frecuencia y
Publicación: debe habilitarse un conjunto de herramientas que ayude a dar a
contenido y los objetivos que se buscará conseguir a través de ellos.
conocer los contenidos desarrollados en el punto anterior. Para ello, se debe contar
con herramientas online y offline que permitan desarrollar en el tiempo requerido,
en la forma que se necesite y para la plataforma que se requiera, la información
Cómo se hace:
que sea indispensable y dejarla en manos de la audiencia que se busque atender.
El concepto de Estrategia de contenidos fue definido inicialmente por Kristina
Halvorson en 2008, y se refiere a la “planificación estratégica para la creación, Difusión: debe contar con un sistema para dar a conocer el trabajo que se
publicación y administración de contenido útil y usable”. ha desarrollado, para que lo realizado sea conocido en forma adecuada por la
audiencia a la que se dirige. Esto implica ofrecer una experiencia equivalente en
El uso de esta metodología implica que el desarrollo de los contenidos para cada
las diferentes plataformas que se generen para dar a conocer los contenidos que
espacio digital se apoya en una política editorial concreta, que le permite a los
se hayan creado (web, redes sociales, e-mail, publicidad, impresos, etc).
redactores tomar decisiones acerca de qué publicar, la forma y frecuencia de
La Estrategia de contenidos debe plasmarse en un documento (actualizado
hacerlo y la manera de darlo a conocer. También que es posible, para la persona
adecuadamente) que permita su consulta y entregue bases claras al equipo de
a cargo o el equipo de trabajo, tomar decisiones rápidas y acertadas acerca de lo
trabajo, respecto de sus funciones y responsabilidades.
que se debe publicar, como en lo referido a las acciones para su correspondiente
difusión.

Para contar con una Estrategia de contenidos, se debe definir al menos lo


siguiente:

Administración: debe existir un flujo conocido de aprobaciones del contenido (por


ejemplo, autor, corrector, editor, publicador) que sea simple, rápido y conocido, de
manera tal que facilite la toma de decisiones de publicación.

Creación: debe disponer de un grupo de personas que le dé forma a un sistema


de trabajo que cuente con herramientas para entender las necesidades de
la audiencia (tanto en la forma como en el fondo) y desarrolle las acciones
necesarias para ofrecer contenidos que los satisfagan. Asimismo, debe asumir los
CARLOS HUERTA MILOS | UX

9. Tono del mensaje

Objetivo a conseguir: considerar como parte del tono, la redacción y mensajes redactados en forma
Determinar cuál es el tono adecuado (formal o informal), cercanía o lejanía del cercana y familiar (tratando de tú al visitante) o bien con el respeto que esas
asunto, orientado a entendidos o público en general. personas buscan.

Cómo se hace:
Cuando se desarrolla un espacio digital se está creando un autoservicio de
información al que el público llega para revisar lo que está publicado e, idealmente,
realizar una acción en relación con lo que se le ofrece.

Las preguntas a responder son, qué buscaba la persona que llegó a ver este
espacio, si consiguió lo que necesitaba y si recibió una propuesta de acción a partir
del contenido desplegado. Finalmente, se puede verificar si esa visita confió lo
suficiente en lo que encontró como para realizar lo que se le propuso (enviar una
pregunta, suscribirse a un newsletter o comprar algo, por ejemplo).

Para que todo esto ocurra, se hace necesario tener un conocimiento concreto
acerca de la audiencia y además, actuar con la empatía necesaria como para
adelantarse a sus necesidades y requerimientos. En esa línea se debe considerar
que hay que definir el tipo de relación que se desea mantener con quienes llegan
al sitio web para comunicarse usando el tono que corresponda a ese tipo de
clientes. Además, se debe apoyar en la forma en que se desarrolla el relato y la
manera en que están diseñados y presentados los contenidos que se ofrecen en
las páginas disponibles para consulta.

Hay que considerar que el mensaje que se ofrece en los contenidos debe estar
redactado de una manera que sea acorde al público que lo va a recibir: si es
público especializado, se podrán usar términos complejos y conocidos del área
de que se trate, mientras que, si se trata de personas que vienen a entender de
un asunto, hay que entregar elementos simples (por ejemplo, un video corto y
explicativo) además de enlaces hacia temas más complejos. También hay que
CARLOS HUERTA MILOS | UX

10. Frecuencia de publicación y actualización

Objetivo a conseguir: la actualidad los sistemas buscadores, la renovación frecuente de los contenidos es
Tener un ritmo de publicación periódica, para mantener el interés de la audiencia y premiada con un mejor posicionamiento en sus páginas de resultados.
mostrar actualizados los espacios digitales que se hayan elegido.

Cómo se hace:
Con el objetivo de que la audiencia que se ha captado y que visita los espacios
digitales en los que se esté trabajando, siga interesada en lo que se va ofreciendo
a través de éste, hay que mantener un ritmo de publicación periódico.

Para esto se deben definir cada cuánto tiempo es adecuado incorporar nueva
información de acuerdo a las necesidades de la organización o empresa y también
a los intereses de la audiencia.

Respecto de los primeros, aquí concurren intereses comerciales tales como


actualizar precios y ofertas o bien, contar con landing pages adecuadas cuando se
desarrollen actividades que las utilicen y también de tipo administrativo, entre los
que están dar a conocer nuevos procedimientos, productos o servicios.

Respecto de los intereses de la audiencia, las publicaciones en el sitio web


como en las redes sociales se deben hacer de acuerdo a los horarios en que la
comunidad sea más receptiva a los mensajes que se entregan. No se debe publicar
una gran cantidad de elementos seguidos o a una hora de baja participación;
hay que elegir la mejor hora, según las métricas de visitas y de interacción,
privilegiando los momentos en que están conectados quienes están interesados.

Cabe indicar que es necesario publicar con la frecuencia debida ya que los
seguidores y clientes del producto o servicio que se ofrece, agradecerán estar
informados y encontrarán motivos para estar en contacto en las actualizaciones de
información. Asimismo, se debe considerar que según la manera que funcionan en
CARLOS HUERTA MILOS | UX

11. Escribir títulos para la web

Objetivo a conseguir: las páginas interiores, por lo que su duración tiene relación con el tiempo que esté
Redactar los títulos de los contenidos considerando el rol que cumplirán tanto en en dicho espacio. Mientras que los segundos son permanentes y están junto al
las páginas de resultados de los buscadores, como al transformarse en enlaces que contenido que corresponde, por lo que se deben redactar con las consideraciones
se ofrecen a los visitantes. que se indican.

Ante todo se debe evitar el uso de títulos que despierten la curiosidad o apelen
al sensacionalismo sin informar (clickbait), ya que lo que se busca es generar
Cómo se hace:
credibilidad y confianza en la audiencia más que sólo visitas, por lo que cada
Los títulos son la puerta de entrada a un espacio digital porque son las palabras
enlace visitado debe contribuir a ese objetivo.
que se transforman en el enlace desde la página de resultados de un buscador.
Por lo anterior, para maximizar su efecto en ese espacio, hay que respetar cuatro
reglas concretas:

No debe tener más de 60 caracteres, para evitar que el buscador trunque su


contenido y lo muestre parcialmente. Esto facilita además su difusión a través de
redes sociales.

Su contenido debe motivar el click del usuario, vale decir, lo que diga debe ofrecer
una razón para hacer una visita al sitio web, sin apelar al clickbait.

Debe ser autoexplicativo, ya que muchas veces el título estará citado en otros
lugares y si es demasiado lírico, no ayudará a que el usuario se interese por visitar
el contenido.

Debe tener un verbo o acción y que lo revisa en estos espacios, estar en pasado
o presente, no en tiempo futuro, para evitar que su indexación en un buscador lo
deje como algo que siempre estará por ocurrir.

Adicionalmente, dentro de un sitio web, hay que considerar que para un mismo
contenido, puede haber diferencia entre el título de portada y el del propio texto
en la página en que se despliega completo. Los primeros sirven para llamar la
atención y funcionan como un componente efectista destinado a invitar a visitar
CARLOS HUERTA MILOS | UX

12. Resumen para ayudar a la lectura

Objetivo a conseguir:
Facilitar la lectura mediante contenidos relevantes, tales como un resumen del
texto para facilitar su comprensión o bien, datos acerca del tiempo requerido de
lectura.

Cómo se hace:
Debido a que los estudios de lectoría realizados han detectado que las personas
leen muy poco del contenido que se ofrece en los espacios digitales, es muy
importante entregar la información de manera concisa y en espacios concretos.
De esta manera se capturará la atención y habrá mayores posibilidades de que
se continúe leyendo e interactuando con el contenido que se ofrece. Asimismo, al
indicar el tiempo de lectura aproximado, será posible que el usuario comprenda
el nivel de compromiso requerido y le otorgue el tiempo indicado a la revisión del
contenido.

Se sugiere en este sentido que junto al título haya un párrafo de resumen, que
le dé contexto al contenido de la página y que haga ofertas concretas acerca de
lo que allí se entrega. De esta manera, aunque la lectura sea mínima, habrá la
posibilidad de que el usuario se interese y realice la acción que se le propone. En
periodismo escrito se utiliza este recurso y al resumen se le llama de diferentes
formas, según el país de que se trata; puede ser sumario, subtítulo, copete o
bajada.

Adicionalmente, este resumen puede ser programado para que se utilice como
la descripción del contenido, usando para ello el metadato “description”, lo que
ayudará posteriormente en las tareas de optimización para buscadores (SEO).
También esto facilitará el uso del mismo elemento para otras plataformas, como
redes sociales.
CARLOS HUERTA MILOS | UX

13. Autor / Contacto de la nota

Objetivo a conseguir:
Facilitar el acceso hacia quien ha escrito el contenido, para apoyar el feedback de
los usuarios y la posibilidad de obtener mayor información acerca de la audiencia.

Cómo se hace:
Se debe indicar junto al título y otros elementos de la cabecera de la información,
el nombre del autor, más un correo electrónico u otra forma digital de contacto
(por ejemplo, su perfil en alguna red social) con algún sistema simple para que
los usuarios puedan escribir. También es posible ofrecer enlaces hacia otras notas
redactadas por el mismo autor, con el objetivo de mejorar el conocimiento de la
audiencia acerca de su trabajo.

En caso de que haya un equipo y no se desee entregar el nombre de alguno de


sus integrantes, igualmente se puede adoptar una identidad genérica (nombre
del producto, por ejemplo), para cumplir el concepto de facilitar el contacto entre
quienes leen y quienes escriben, entendiendo que, de esta manera, se logra la
meta comunicacional del espacio digital.

Este tipo de acciones permite aumentar la credibilidad del sitio web, al tiempo
que establece lazos entre los usuarios y quienes están encargados de ofrecer
información puesto que, a través de este tipo de contactos, se podrá obtener
mayor información acerca de quienes visitan el sitio web, sondear preferencias y
obtener información acerca de nuevas áreas de trabajo que se pudieran abarcar.
CARLOS HUERTA MILOS | UX

14. Indicar la fecha y lugar del contenido

Objetivo a conseguir:
Dar contexto y un marco temporal a la información que se presenta, evitando
problemas relacionados con la vigencia de lo que se publica tanto para el usuario
como para la empresa u organización que hace la difusión.

Cómo se hace:
Debido a que en muchos casos la información que se publica en un espacio
digital incluye elementos temporales o presenta ofertas relacionadas con fechas
determinadas, es necesario que se indique cuándo fue actualizado ese contenido.
De esta manera los usuarios que lo visiten, podrán hacerse una idea acerca de la
vigencia del mismo, y tendrán la capacidad de interpretar las alusiones temporales
que contenga (ayer, hoy, mañana, etc.).

Del mismo modo, será relevante ofrecer una idea clara acerca del lugar de origen
de la información que se entrega, indicando ya sea en cada nota o en algún lugar
destacado, la ciudad y/o el país al que pertenece la empresa u organización y
desde el cual ofrece la información. Esto permitirá entender desde las expresiones
hasta las unidades de medida o incluso la moneda en la que se expresan los
valores que se presentan.

Por último, se debe enfatizar que en todo contenido que contenga elementos que
sean sujeto de cambio en relación a su temporalidad (en especial, los precios o
la duración de ofertas) se deben comunicar estos plazos de manera directa en el
propio espacio en que se presenta para evitar interpretaciones.
CARLOS HUERTA MILOS | UX

15. Cantidad de texto adecuada

Objetivo a conseguir: • Destacar palabras significativas del texto para facilitar el acceso al contenido.
Aumentar la cantidad de información que los usuarios leen en un sitio web, a
• Crear listas de elementos (como la que está leyendo) en lugar de ofrecer largos
través del uso de técnicas de redacción que enfatizan sobre escribir de manera
párrafos de texto.
más directa y sucinta.
• Ofrecer enlaces hacia otras páginas relevantes que ayuden a profundizar en el
tema.
Cómo se hace:
• Preferir enlaces o botones en lugar de textos explicativos, en el caso de
Desde el inicio de la web en la década de los ‘90 e incluso antes, en las pantallas
formularios.
sólo de texto, se ha estudiado forma en que las personas las usan [7]. La
conclusión es que leen menos que en publicaciones impresas e incluso, que lo • Dependiendo de la audiencia, evitar las abreviaciones y la jerga técnica.
hacen saltándose líneas llegando a leer un promedio que va entre el 10% y 20%
del texto disponible. Debido a esto, se han generado una serie de guías para
aumentar la lectura, mediante el uso de técnicas que enfatizan en el desarrollo de
la información de manera sucinta.

En forma simple se sugiere:

• Enfocarse en la audiencia, adecuando el contenido a su nivel de lenguaje y


vocabulario.

• Simplificar el texto, ofreciendo sólo una idea por párrafo.

• Usar verbos directos para definir acciones.

• Evitar las explicaciones a partir de una negación.

• Establecer jerarquías de información (“pirámide invertida” o decir primero lo más


importante).

• Preferir los hechos a los discursos, usando enlaces para ofrecer más datos.

• Crear subtítulos destacados que ayuden a entender qué se ofrece en el texto.


CARLOS HUERTA MILOS | UX

16. ¿Qué hacer con los textos largos?

Objetivo a conseguir:
Superar la barrera de baja cantidad de lectura que registran las personas que leen
en pantallas y entregar documentos de mayor tamaño para su lectura y uso.

Cómo se hace:
Se ha establecido a través de diversas investigaciones realizadas en los últimos
veinte años, que los usuarios de pantallas leen en forma diferente en estos
dispositivos respecto de cómo lo hacen en los impresos. Las personas evitan las
publicaciones largas en las pantallas, llegando incluso a saltarse líneas de la lectura
que se les ofrece.

Por lo anterior, es necesario diseñar estrategias diferentes para la entrega de


textos de mayor tamaño. Para esto se sugiere:

• Ofrecer al inicio un índice enlazado que facilite el acceso a cualquier parte del
documento aunque ello signifique que no se va a leer en el orden establecido por
el autor;

• Distribuir el texto en varias páginas ofreciendo un sistema de avance y retroceso


simple;

• Ofrecer el texto en formato para enviar o imprimir que facilite usarlo en otros
espacios, como es el uso de archivos PDF preparados para su uso en estas
circunstancias.

Como se planteó antes, indicar el tiempo de lectura aproximado para que el


usuario comprenda el nivel de compromiso que requiere. Adicionalmente, para la
redacción y presentación de estos documentos en pantalla, se sugiere emplear las
guías que se indican en el texto “Cantidad de texto adecuada”.
CARLOS HUERTA MILOS | UX

17. Uso de listas de elementos

Objetivo a conseguir:
Facilitar la lectura de información a través de la entrega de textos resumidos
formando una lista, para ser leídos en una mirada.

Cómo se hace:
Debido a que la lectura en pantallas se caracteriza por el poco tiempo que el
usuario le asigna a esta actividad y a la necesidad de aprovecharlo mejor, se hace
necesario que los textos sean redactados de una manera diferente, orientada a
facilitar la experiencia de uso.

En este sentido, se recomienda usar listados de elementos en lugar de párrafos


que expliquen en forma sucinta la información. Esas listas deben estar enfocadas
en ofrecer un dato por cada línea y en caso de extenderse, enlazar a otros
contenidos que ayuden al usuario a profundizar en los temas que le interesen.

Cabe recordar en este aspecto que el lenguaje HTML ofrece listas ordenadas
(con números árabes o romanos, o bien con letras) y no ordenadas (con guiones o
bullets), además de listas descriptivas que permiten crear pares de términos y sus
definiciones.

En cuanto al número de elementos que debe tener una lista, se sugiere que no
sean más de siete, debido a las características de comprensión de las personas.
CARLOS HUERTA MILOS | UX

18. Uso de subtítulos, negritas, cursivas

Objetivo a conseguir:
Debido a la baja cantidad de palabras que las personas leen de los textos en las
pantallas, es necesario guiar su mirada hacia los elementos más relevantes.

Cómo se hace:
Para facilitar la lectura de la información que se incorpora en una pantalla, es
necesario contar con elementos que ayuden en esta tarea. Entre ellos destaca el
uso de zonas que guíen la mirada y que corresponden a elementos tipográficos
destacados, como son los subtítulos, las letras en negrita y cursiva.

Los subtítulos son elementos que separan párrafos y funcionan como un título
interno del texto que resume la información que se incluirá en las siguientes
líneas. Gracias a eso, el usuario podrá ir avanzando por los subtítulos y decidiendo
leer aquellas partes de la información que se acerquen a lo que requiere.

En tanto, las palabras marcadas en negritas o en cursivas permitirán indicar los


conceptos relevantes que se desee destacar dentro de los párrafos, facilitando
de esta manera que el usuario pueda encontrar la información ofrecida.
Naturalmente, estos elementos deben usarse con discreción, para que se marque
de manera efectiva una diferencia con el texto que los rodea.

Finalmente, a través del software utilizado, se pueden destacar estos fragmentos


y dejarlos disponibles para que sean enviados a redes sociales por los usuarios que
decidan difundirlos por esas vías.
CARLOS HUERTA MILOS | UX

19. Fotografías con lectura

Objetivo a conseguir:
Apoyar las imágenes con un texto que ayude a comprenderlas y darles contexto,
evitando que pasen desapercibidas.

Cómo se hace:
Debido a que existe el fenómeno “ceguera de los anuncios” que lleva a que los
usuarios no consideren los elementos gráficos de un espacio digital para evitar
confundirlos con avisos, es importante que los elementos de contenido que no son
publicidad, sean entendidos como tales. Por este motivo, las fotografías deben ser
dispuestas en las páginas como elementos de contenido y apoyadas con un texto
que las describa adecuadamente.

Adicionalmente, se debe proveer texto alterno de la imagen (el atributo alt en


la etiqueta <img> de HTML), apoyando la accesibilidad del sitio web. Dicho
contenido debe ser una explicación del contenido gráfico, que facilite su
comprensión para quien no pudiera verla; allí también se pueden indicar los
créditos correspondientes para el autor de la imagen.

Finalmente y mediante la programación correspondiente, es posible destacar estas


fotografías y dejarlas disponibles para que sean enviadas hacia las redes sociales
por los usuarios que visiten estos contenidos.
CARLOS HUERTA MILOS | UX

20. Contenido para redes sociales

Objetivo a conseguir:
Preparar los contenidos para facilitar su envío por los usuarios hacia las redes
sociales en las que ellos participan.

Cómo se hace:
Una de las formas más habituales de acceso a los contenidos de un espacio
digital, además del posicionamiento en buscadores, tiene que ver con el hecho de
encontrarlo mencionado en redes sociales por alguna persona a la que seguimos.
Con el voto de confianza que da el hecho de ser mencionado por un tercero, la
posibilidad de recibir una visita es muy alta y de allí que sea necesario facilitar la
capacidad técnica de permitir que el contenido desplegado en cada página pueda
ser enviado hacia ellas.

Dependiendo de la red social de que se trate, las acciones a seguir son las
siguientes:

Habilitar Twitter Cards para permitir que los contenidos se desplieguen sin
dificultad en Twitter cuando una persona envía un enlace de nuestro sitio
mediante un tuit.

Habilitar el marcado de Open Graph que permite que varias redes sociales utilicen
su información para que el contenido se despliegue de la manera más adecuada,
cuando un usuario comparte un enlace en esos espacios. Este sistema es usado
por Facebook, Pinterest y Google+.

Nuevas redes: en la medida que aparezcan otras relevantes, se debe explorar la


forma de incluirlas, en atención a los usuarios que participan en ellas.

En cada caso se recomienda hacer las pruebas correspondientes para verificar su


correcto funcionamiento.
CARLOS HUERTA MILOS | UX

21. Llamadas a la acción desde el contenido

Objetivo a conseguir:
Hacer un oferta concreta de acciones a desarrollar, a partir de frases que se
indiquen en el contenido y que guíen al usuario a realizar acciones específicas.

Cómo se hace:
Una vez que se ha entregado la información suficiente al usuario a través de
la pantalla, lo que se espera es que éste realice actividades a partir de esos
elementos.

La forma de hacerlo es mediante la creación de frases concretas que inviten y


motiven a la realización de las actividades que se relacionen con el contenido
entregado, las que se deben redactar mediante el uso de verbos activos que
describan la acción a la que se invita.

En este sentido, se puede diseñar una batería de elementos de acción que


irán aumentando en intensidad de participación, avanzando desde algo poco
complejo como bajar un documento al computador desde el sitio web a cambio
de dejar algún dato como el correo electrónico para futuras interacciones, hasta
llegar a situaciones en que sea factible producir una llamada de un vendedor o
representante para comprar lo que se ofrece en pantalla.

En este sentido se debe considerar que entre los usuarios se podrá encontrar a
personas en todos los estados posibles, vale decir, desde quienes estén indecisos
y busquen más datos para decidir, hasta aquellos que están en la zona más
avanzada en la curva de interés y ya quieren contar con aquello que se les
muestra; para todos ellos debe haber alguna acción a ejecutar.
CARLOS HUERTA MILOS | UX

22. Oferta de enlaces internos y externos

Objetivo a conseguir:
Permitir que el usuario navegue dentro de un grupo de contenidos que le entregue
más información y complemente los temas en que ha demostrado interés.

Cómo se hace:
Debido a que seguir los enlaces constituye la forma más natural de interacción
en espacios digitales, se debe preparar el contenido para que el usuario pueda
profundizar en la información que se ofrece, navegando desde la página que se
visita hacia cualquier otra información relacionada que esté disponible.

Como se indicó antes, esto significa que al momento de crear el contenido se


debe planificar la experiencia que tendrá el usuario que visite el espacio y en
este sentido, serán bien evaluados los enlaces que se desplieguen en espacios
contextualmente correctos.

Para tomar la decisión de abrir las nuevas páginas en la misma pestaña o ventana
o en una nueva, se debe considerar que el usuario tendrá el botón “volver” de su
navegador a la mano y, por tanto, hay que determinar cuál experiencia es mejor.
Como buena práctica, se aconseja dejar al usuario en la misma pestaña o ventana
si el enlace es del propio sitio y en una nueva si se trata de un sitio de terceros.

Finalmente se debe enfatizar que el acceso hacia información de calidad en un


sitio diferente del propio, es parte de una buena experiencia de usuario. Por lo
mismo, si la calidad del sitio de destino es alta, el sitio desde el que se origina la
visita recibirá una buena evaluación de los usuarios en retribución a la entrega de
ese dato con tan buen contenido.
CARLOS HUERTA MILOS | UX

23. Despliegue de contenidos relacionados

Objetivo a conseguir: Es importante considerar que mientras más específica sea la etiqueta, mayor
Permitir que el usuario que llega al espacio digital pueda ver otros contenidos del relación se conseguirá entre los contenidos que se despliegan respecto del que se
mismo tipo o área de interés, aumentará su disposición hacia la oferta general que está viendo, aunque por su especificidad, probablemente exista el riesgo de que
nuestro sitio pueda hacerle. haya menos objetos que estén asociados a cada una de ellas.

Cómo se hace:
Una de las características actuales del consumo de contenidos digitales, es que
los usuarios llegan a revisarlos sin conocimiento acerca de quién los ofrece, sino
que probablemente acceden gracias a la recomendación de un tercero en redes
sociales o bien, por los resultados de un buscador.

Por lo mismo, cuando ellos visitan nuestro espacio digital, es muy probable
que no tengan un conocimiento previo del sitio y, por tanto, es muy probable
que se marcharán después de ver la página actual. La forma de evitar ese
comportamiento es atrayéndolos mediante elementos que pertenezcan a la misma
temática de lo que están viendo o que estén relacionados por las personas o los
productos que se mencionan.

La forma de conseguirlo es mediante algún sistema de clasificación disponible en


el sistema de administración de contenidos (CMS) que ayude a generar conjuntos
de información que incluyan lo que el usuario está viendo; así al ver un texto de
una temática, se le podrán ofrecer también otros textos, como también videos,
imágenes, audios o personas relacionados a ella.

La forma tradicional de cumplir con esta tarea, es que al momento de crear los
contenidos, se los clasifique con etiquetas que luego puedan ser agrupadas y
mostradas en forma contextual a quien visite cualquiera de los elementos que
pertenecen a ese grupo.
CARLOS HUERTA MILOS | UX

24. Protección de la Propiedad Intelectual

Objetivo a conseguir:
Determinar el tipo de propiedad que tendrán los contenidos que serán publicados
en los espacios digitales, con el fin de permitir su distribución y difusión.

Cómo se hace:
Debido a que la definición de cómo se protege o resguarda la propiedad
intelectual del contenido permitirá o pondrá trabas a la difusión y distribución del
mismo por terceras personas, es relevante que la empresa, organización o persona
que publica adopte una definición acerca de su uso.

La ley vigente, dependiendo del país en que ésta se produzca y tenga efecto,
protege la creación intelectual hasta 50 ó 70 años después de fallecido el autor.
Esto indica que nadie puede utilizar ese contenido de ninguna forma, a menos
que tenga una autorización expresa para hacerlo. En Chile la Ley 17.336 sobre
Propiedad Intelectual regula los derechos de autor y derechos conexos.

Una alternativa para permitir el uso de lo que se publica se logra a través de la


iniciativa Creative Commons, que se presenta como un complemento del derecho
de autor al permitir el uso más libre del contenido, permitiendo la reserva parcial
de algunos derechos y ayudando a la creación de adaptaciones que facilitan la
distribución de las obras.

La definición del tipo de propiedad intelectual y la libertad de maniobra que se


ofrezca al usuario, incidirá directamente en la posibilidad que tendrán los usuarios
para distribuir lo que se está difundiendo a través del espacio digital que se
presenta al público.
CARLOS HUERTA MILOS | UX

Distribución de
contenidos
CARLOS HUERTA MILOS | UX

25. Creación y uso de canales de difusión

Objetivo a conseguir: • Uso de publicidad: debe ser un mensaje que ayude a entender el concepto
Dar a conocer la aparición de nuevas publicaciones y funcionalidades a los usuarios destacado, con llamados a la acción concretos. De preferencia usar los avisos con
e interesados en los temas que abarca el sitio web, de acuerdo a lo que se haya textos, más que con imágenes.
planteado en la Estrategia de Contenidos.
En cada caso, será necesario determinar cuál es la página de ingreso específica
(que sea parte del sitio web) hacia la cual se dirija el enlace ofrecido, para facilitar
la llegada de los usuarios y en la que se concentre la oferta que se quiere hacer.
Cómo se hace:
No se recomienda que sea la portada, por la cantidad de mensajes diferentes
Se requiere de un sistema de divulgación que permita dar a conocer el trabajo
que debe ofrecer cada día. Es preferible crear una landing page específica, que
que se ha desarrollado tanto en contenido como en funcionalidades a fin de
formalice la oferta realizada y que tenga una duración temporal.
acceder adecuadamente a la audiencia a la que se dirige el espacio digital. Por lo
anterior, se debe generar una forma de trabajo que permita avisar a los usuarios
e interesados acerca de lo nuevo y lo que está disponible, un enlace que permita
el acceso y un llamado a la acción que justifique el tiempo que se invertirá en la
visita.

Para la mayor eficacia de la comunicación, es necesario determinar qué canales


se emplearán incluyendo envío de correo electrónico, uso de redes sociales,
publicidad interna y externa, etc. Para realizar esta actividad se debe tener en
cuenta lo siguiente:

• Uso de correo electrónico: la redacción del correo debe considerar un “asunto”


que sea llamativo, corto y enfocado en la audiencia, ya que de eso depende que el
correo sea abierto y leído. El mensaje debe tener un título atractivo y un llamado
a la acción que dé una razón para que sea seguido. El mensaje debe ser enviado a
una base de datos de direcciones de correo cuyos dueños hayan aceptado el envío
de mensajes (opt-in), evitando de esta manera el spam.

• Uso de redes sociales: la redacción debe ser directa, explícita y con un llamado a
la acción claro. Debe ser especializado para cada red social que se utilice.
CARLOS HUERTA MILOS | UX

26. Herramientas de difusión

Objetivo a conseguir: • Suscripción a lista de correo electrónico: una buena práctica es crear listas de
Contar como parte de la interfaz del producto digital, con una serie de elementos correos segmentadas por el tema del que se trate el contenido; de esta manera se
que faciliten la conexión de los usuarios a través de las redes sociales, para que enviará un correo avisando la publicación de un nuevo ítem de ese espacio. Esto
ellos difundan el contenido que están revisando. permitirá realizar una labor de fidelización y oferta de productos hacia los usuarios.

Cómo se hace:
En la interfaz del producto digital en el que se despliegue el contenido, se deben
disponer los enlaces hacia las redes sociales y sistemas de correo electrónico que
se haya definido, para facilitar las acciones de difusión que los usuarios quieran
ejecutar. Entre otros se recomienda tener al menos los siguientes:

• Botones de redes sociales: ofrecer estos elementos en una zona cercana al título
y resumen de la nota, ya que será la zona con la mayor actividad de lectura. Luego
se pueden dejar como elementos contextuales en espacios destacados del propio
contenido. Se debe tener la precaución de programar los botones de tal manera
que con un click ya tenga el contenido listo para ser enviado, facilitando la acción
del usuario.

• Botón de seguimiento en redes sociales: permite que el usuario con una sola
acción, se una al grupo de seguidores de la red en la que ambos, tanto el sitio
como la persona, participan. Se recomienda tener a las redes más populares en los
botones disponibles.

• Envío de correo electrónico: facilitar el envío del enlace del contenido que se
revisa a través de e-mail; para ello se recomienda crear un formulario que ya tenga
todos los campos escritos y sólo requiera el ingreso de los datos del Remitente y
Destinatario, más un breve mensaje.
CARLOS HUERTA MILOS | UX

27. Preparación de landing page

Objetivo a conseguir: primera parte de la pantalla.


Desplegar en una sola página los contenidos y funcionalidades que requiera un
• Entregar la información que se desea dar en textos concisos; evitar los textos
usuario que sigue un enlace desde algún sitio externo, para que se cumpla la
largos.
promesa que se hace a través de él y que motivó la visita.
• De ser posible, ofrecer testimonios de terceros que apoyen el concepto general.

• Algún mecanismo para concretar la oferta presentada.


Cómo se hace:
Una landing page es la página de llegada dentro de un sitio web, para quienes • Ofrecer mecanismos o medios alternativos de contacto (offline), tales como
han seguido un enlace que haya sido publicado en una campaña publicitaria o una direcciones, teléfonos, etc.
red social. Debido a esto, es el espacio para desplegar los elementos que sean
necesarios para cumplir la promesa que se hizo en el lugar de origen del enlace.

En la “página de llegada” se debe procurar la “conversión” de la visita con el fin de


obtener aquello que se espera que haga el usuario, que puede ir desde ingresar su
información para ser contactado hasta concretar la adquisición de algún producto
o servicio.

Debido a que se trata de una tarea muy específica y relacionada con el mensaje
que se le ha entregado, no es adecuado hacer de la portada del sitio web el
destino de los enlaces, ya que se perderá la posibilidad de buscar la conversión
deseada. Por el contrario, debe ser una página del propio sitio o bien, una que
haya sido preparada especialmente para lograr dicho efecto.

Para conseguir lo anterior, una página de este tipo debe contar al menos con lo
siguiente:

• Identificación correcta del espacio digital (nombre, logo, etc.)

• Ofrecer un diseño ordenado y profesional que dé sensación de seriedad.

• Mensaje claro y concreto de la oferta que se realiza al usuario, ubicado en la


CARLOS HUERTA MILOS | UX

28. Envío de contenidos por e-mail

Objetivo a conseguir:
Permitir que los usuarios distribuyan el contenido mediante una aplicación que
facilite su envío por correo electrónico.

Cómo se hace:
En zonas destacadas de la interfaz del producto digital en el que se despliega el
contenido, se debe disponer de un acceso a un sistema que facilite la acción de
enviar mediante correo electrónico lo que se está viendo, hacia otra persona.

Para hacerlo, se recomienda disponer un ícono cerca del título y también al final
del contenido, mediante el cual se acceda a un formulario simple para que el
usuario ingrese los datos del Remitente y Destinatario, más un breve mensaje.

Como resultado de esta acción, el Destinatario recibirá un mensaje que incluirá


el contenido destacado, su enlace (con la URL específica que corresponda) e
incluso alguna imagen, más el mensaje que le haya escrito el Remitente. Lo que se
espera es que a su recepción, este usuario siga el enlace y visite el espacio digital
recomendado.

Idealmente, se debe detectar la realización de la acción con el objetivo de preparar


una experiencia especial a quien realiza la visita, personalizando la interfaz y
generando acciones específicas que apoyen la conversión de la visita hacia alguna
acción de interés para el espacio digital que la recibe; por ejemplo, suscribirse a
un newsletter, publicar un comentario en una red social o continuar la navegación
hacia contenidos relacionados desplegados junto a lo que vino a ver.
CARLOS HUERTA MILOS | UX

29. Envío de contenidos mediante Twitter

Objetivo a conseguir:
Permitir que los usuarios de Twitter puedan distribuir el contenido a través de una
aplicación que facilite el envío con sus comentarios a la red social.

Cómo se hace:
En la interfaz del producto digital en el que se muestre el contenido se debe
disponer de un botón para que facilite la acción de enviar lo que se está viendo
hacia los seguidores en Twitter que tenga la persona que decida compartir.

Para hacerlo, se recomienda disponer un ícono de Twitter cerca del título y


también al final del contenido. Esta actividad normalmente involucra que el
usuario ingrese los datos de autentificación en la red social, tras lo cual aparece el
formulario donde se escribe el mensaje que se distribuirá y la URL del enlace que
estará incorporado.

Como resultado, los seguidores de la persona verán un tuit en el que aparece el


mensaje más el enlace. Lo que se espera es que a su recepción, los seguidores
sigan el enlace y visiten el espacio digital recomendado, ayudando a su difusión.

Para mejorar la experiencia de publicación se recomienda usar, a nivel de


programación, el protocolo Twitter Cards, mediante el cual esa red social hace un
despliegue más completo de la información que difunde, incluyendo una tarjeta
digital con datos adicionales a los que haya ingresado el usuario que escribió el
tuit original.

Si se cuenta con mayores recursos de programación, es posible preparar zonas de


los contenidos para que estén listas para ser tuiteadas con frases destacadas y
preparadas para tal acción.
CARLOS HUERTA MILOS | UX

30. Envío de contenidos mediante Facebook

Objetivo a conseguir: el cual esa red social hace un despliegue más completo de la información que
Permitir que los usuarios de Facebook distribuyan el contenido de manera simple difunde, incluyendo una tarjeta digital con una diagramación acorde al espacio que
en esa red social, a través de una aplicación que facilite esa actividad. ocupa.

Asimismo, Facebook ofrece una lista de chequeo para determinar si la forma de


compartir está siendo bien aplicada y una herramienta de validación en línea
Cómo se hace:
(requiere estar autentificado con una cuenta en Facebook) para probar los
En la interfaz del producto digital en el que se muestre el contenido, se debe
resultados.
disponer de un botón que facilite la acción de compartir lo que se está viendo con
los seguidores en Facebook que tenga la persona que realice la acción.

Para hacerlo, se recomienda disponer un ícono de Facebook cerca del título y


también al final del contenido. Esta acción normalmente involucra que el usuario
ingrese los datos de autentificación en la red social, tras lo cual aparece el
formulario donde se escribe el mensaje que se distribuirá y la URL del enlace que
estará incorporado.

Como resultado de esta acción, los seguidores de la persona que ha hecho esa
publicación verán una entrada en su propio muro, con una imagen, el título y
resumen o bajada, más el enlace. Lo que se espera es que al ver este contenido,
sus seguidores hagan click en el enlace y visiten el espacio digital recomendado,
ayudando a su difusión.

Es importante considerar que Facebook ofrece una amplia variedad de botones


para ser instalados en los espacios digitales, entre los que se incluyen los de Me
gusta, Compartir, Enviar, Seguir e incluso Comentar. Por lo anterior, deberá ser
el encargado del espacio digital quien determine cuál de ellos es el que va a ser
utilizado, dependiendo de la experiencia de usuario que quiera ofrecer.

Para mejorar las características de la publicación, se recomienda usar, a nivel


de programación, el protocolo Open Graph [24] que utiliza Facebook, mediante
CARLOS HUERTA MILOS | UX

31. Relación entre redes sociales y el sitio web

Objetivo a conseguir: • Usuarios que permanecen en la red: se deben crear mensajes, imágenes, videos y
Aumentar la relación entre los usuarios que sólo toman contacto con los medios acciones que se realicen dentro de ese espacio, en forma paralela a lo que se haya
participando de las redes sociales de la marca, con los contenidos que se publican determinado realizar en el sitio web. Vale decir, generar contenidos especiales
en el sitio web. y exclusivos para la red y métodos de interacción que le saquen provecho a las
características de las que se disponga en cada una en específico.

En cada caso anterior, se deberán hacer mediciones permanentes de actividad


Cómo se hace:
para establecer número de seguidores, número de publicaciones y las acciones
Debido a la importancia que tienen las redes sociales, la organización o empresa
que se generen a partir de lo que se publica. Entre ellas se debe medir el alcance
debe mantener una presencia continua en la red social que elija, para desarrollar
que, dependiendo de la red, se entenderá como el número total de personas a las
una conversación constante con su audiencia, mediante una voz distintiva que
que se llega gracias a la difusión de los contenidos hecha por los usuarios y las
converse, responda y logre dar un tono propio a la comunidad con la que se
conversaciones que se produzcan.
trabaja.
Otro tema a tener en cuenta acerca de la importancia de tener redes sociales,
En este sentido, es vital contar con una Estrategia de Contenidos que determine
es el hecho de que esos espacios ayudarán a informar cuando haya dificultades
lo que se publica, cuándo se hace y la forma en que se presenta y difunde, de
de funcionamiento en el espacio principal, y los integrantes de la comunidad
tal manera que haya coherencia en el mensaje que se está entregando por las
difundirán la correcta explicación de lo que esté ocurriendo.
diferentes vías de comunicación.
La comunidad que se forme es parte de los activos con que cuenta el espacio
Asimismo, se debe considerar que mientras algunos usuarios pasarán desde las
digital y es la extensión natural de las tareas de información y acción que ofrece el
redes sociales hacia el sitio web, otros se mantendrán sólo dentro de la red social.
ambiente digital.
Por ello, en cada caso se deben tomar acciones concretas que les permitan tener
una experiencia similar.

• Usuarios que pasan de la red al sitio: se deben generar contenidos especiales


(o bien, adelantados respecto de su publicación general) como también ofertas
específicas(rebajas, concursos, etc.), que les entreguen un beneficio por el hecho
de ser parte de la comunidad. Lo que se busca es la creación de contenidos que
ofrezcan una acción en la red social, pero que se ejecute mediante una visita
hacia el sitio web, para que los usuarios se acostumbren a visitarlo y adquieran la
sensación de que hay un beneficio por hacerlo.
CARLOS HUERTA MILOS | UX

32. Creación del formato de impresión

Objetivo a conseguir:
Generar un formato del contenido que se adecúe a las características de la
impresora o bien que permita obtenerlo en formato PDF.

Cómo se hace:
Gran parte de los usuarios que llegan a un espacio digital lo hacen para conseguir
información y, en lo posible, enviarla a otras personas interesadas o bien obtener
una copia que puedan tener de manera física. Por lo anterior, es relevante que la
información pueda ser impresa sin mayores dificultades y con un formato que no
sólo ahorre tinta y papel, sino que además tenga una presentación que genere una
buena experiencia a quien elige imprimir.

Por lo tanto, lo que se busca es que el contenido de la página que se imprime


se acomode en la menor cantidad de hojas que sea posible, que tenga la
identificación del sitio web, que incluya la dirección desde la cual fue impresa y
que los contenidos que incorpore estén adaptados al espacio disponible. Todo lo
anterior se puede realizar en forma directa mediante la adecuada programación de
CSS (hojas de estilo en cascada).

Finalmente se puede ofrecer la opción de que el documento en ese mismo


formato, pueda ser descargado en formato Adobe Acrobat PDF, para ser utilizado
en la computadora del usuario que lo descargue.
CARLOS HUERTA MILOS | UX

Elementos de
navegación
CARLOS HUERTA MILOS | UX

33. Consistencia de la interfaz

Objetivo a conseguir: Sistema uniforme de navegación: en todas las pantallas se debe disponer de los
Facilitar el uso del espacio digital mediante una interfaz que se presenta de mismos elementos para mostrar la ubicación y la forma de pasar entre una y otra;
manera similar en todas las pantallas que lo componen. la consistencia entre ellas permitirá al usuario entender cómo avanzar y retroceder.

Cabe notar que esta regla de la consistencia es útil para casi todos los casos y
la única excepción puede ser el proceso final de la compra en sitios de comercio
Cómo se hace:
electrónico, cuando algunos de estos elementos no están presentes para evitar
El principal desafío de todo sistema digital que funcione como un autoservicio
distracciones que alejen al usuario de la tarea de completar la transacción de pago
de información, es permitir que los usuarios puedan revisar y avanzar por los
que inició.
contenidos y realizar las acciones que se le ofrezcan en la pantalla, sin necesidad
de ayuda externa. Para ello, el espacio digital debe funcionar de manera similar
con el fin de que el usuario aprenda sólo una vez acerca de su uso, sin necesidad
de tener que entender todo de nuevo. Esto implica, entre otras cosas, lo siguiente:

Ubicación de elementos: se espera que en todas las pantallas los elementos


relevantes estén ubicados en los mismos lugares; vale decir, logotipo, menú de
navegación, buscador, etc.

Uso de colores: se deben usar las mismas claves de colores con significados
similares; si se usa rojo para dar cuenta de una acción (por ejemplo, eliminar un
elemento de la interfaz), debe emplearse con ese mismo sentido en el resto de las
pantallas y acciones.

Comportamiento de botones: los botones deben tener un funcionamiento


equivalente en todas las pantallas en que aparezcan, para que los usuarios no
tengan dudas acerca de su acción. Asimismo en cuanto a color y forma, se deben
seguir las reglas generales y no adaptar su uso en relación con colores corporativos
u otras consideraciones.

Resultados de formularios: cada vez que se ofrezca un formulario se debe generar


un patrón de actividad similar para llenado, envío y confirmación de la acción.
CARLOS HUERTA MILOS | UX

34. Destacar y marcar la sección actual en el menú


de navegación

Objetivo a conseguir:
Ofrecer un menú que muestre e incluya las secciones principales para que esté
visible en todas las páginas del sitio web, marcando la que visita el usuario.

Cómo se hace:
Debido a que los usuarios no siempre llegarán al sitio web a través de su portada,
sino que por cualquier página que esté indexada en los buscadores, se hace
necesario que todas ellas ofrezcan una referencia clara de la sección a la que
pertenecen y entreguen indicaciones visibles acerca de cómo llegar tanto a la
portada como a otros contenidos relevantes.

Para conseguirlo se debe cumplir al menos con lo siguiente:

Menú de navegación: en cada página debe estar el mismo menú de navegación,


ubicado en el mismo lugar de la interfaz y con las mismas opciones, para ofrecer
consistencia al usuario.

Sección actual: se debe mostrar gráficamente a qué sección pertenece la página


que se está revisando, mediante algún elemento que la destaque en el menú de
navegación.

Breadcrumbs (migas de pan): línea de texto con la posición relativa de la página


en el sitio (ver siguiente elemento en este capítulo).

Funcionamiento: el menú de navegación debe tener un sistema de despliegue y


funcionamiento similar en todas las páginas, con el fin de que el usuario lo pueda
usar sin problemas una vez que entienda su forma de operación.
CARLOS HUERTA MILOS | UX

35. Uso de Breadcrumbs

Objetivo a conseguir:
Ofrecer una indicación gráfica y visible de la posición relativa de la página que
se visita respecto de la portada del sitio web, para facilitar la navegación de los
usuarios que visitan.

Cómo se hace:
Se denomina breadcrumbs (miga de pan) a una línea de texto ubicada
generalmente en la zona superior de cada página, que indica de manera simple
cómo ir desde la página actual en que está el usuario, hasta la portada, pasando
por las principales páginas intermedias. Para ello muestra como enlace el nombre
de la portada, luego un signo de separación, seguida del nombre de la sección
actual y tras otro signo de separación, el nombre de la página actual.

En forma convencional, se estila que esta línea aparezca junto al menú de


navegación en todas las páginas y normalmente esté antecedida por la frase
“Usted está en:” y luego siguen como enlace el nombre de cada una de las páginas
señaladas, hasta la página actual, que no necesita estar enlazada.

Gracias a esta información, el usuario que acceda a cualquier página del sitio
web, será capaz de entender la posición relativa que tiene ese contenido dentro
del conjunto y podrá navegar hasta la página inicial. Asimismo, este sistema de
navegación alternativo le permitirá encontrar contenidos similares al actual e
incluso, conocer otras líneas de información de productos y servicios a los que no
tendría acceso si no fuera por este método.

Este procedimiento es especialmente útil para aquellos casos en que un usuario


llega a una página específica sin pasar por la portada o la navegación; por ejemplo,
al seguir un enlace desde un buscador.
CARLOS HUERTA MILOS | UX

36. Informar resultados antes de producir la acción

Objetivo a conseguir:
Evitar que el usuario sea sorprendido por comportamientos inesperados de la
interfaz, informando de manera adecuada y oportuna el resultado que tendrá la
acción que va a ejecutar.

Cómo se hace:
Durante la navegación en un espacio digital se debe ofrecer libertad y control al
usuario, informándole acerca del resultado que va a tener una acción que ejecute,
antes de que la efectúe.

La forma de cumplir con esta tarea será entregar datos acerca de las
consecuencias de la acción, cuando ésta no sea la normal y habitual como es abrir
una nueva página o modificar el estado de algún elemento presente en ella.

Por ejemplo, algunos de los problemas habituales a evitar son que el click de
un usuario genere una acción que sea diferente de la que se informa o espera,
como es abrir un archivo, activar un control que despliegue multimedia, enviar
algún elemento hacia terceros o cambiar un estado. En todos los casos será muy
importante requerir confirmación previa del usuario para ejecutarlo.

Cuando se genera un mensaje en forma previa a la acción que se ofrece, se debe


cuidar que la redacción ayude a entender que presionando una opción dicha
actividad se realiza y que usando la otra, la acción se cancela y evita. Un ejemplo
es evitar el texto “click aquí” y en su lugar usar una frase que exprese una acción
concreta con la información concreta acerca de lo que va a ocurrir para que no
haya sorpresas: “Descarga el folleto (Formato: PDF – 200 Kb)”.
CARLOS HUERTA MILOS | UX

37. Cambio de color de los enlaces visitados

Objetivo a conseguir:
Marcar los enlaces que ya han sido visitados con un color diferente, para apoyar la
experiencia de uso del visitante.

Cómo se hace:
Para facilitar la navegación de los usuarios en el espacio digital, se hace necesario
ir “marcando” los contenidos que ya han sido visitados y diferenciarlos de los que
falta por revisar, en particular en la portada y portadillas de sección en las que
los contenidos se ofrecen como enlaces. Gracias a esta pista gráfica, con sólo
un vistazo el usuario podrá entender qué ha visto y qué contenidos le faltan por
revisar.

Desde el inicio de la web el uso habitual era que los enlaces disponibles se
desplegarán de color azul y subrayados; al presionarlos con el mouse para visitarlos
se cambiaba su color a rojo y, una vez visitados, se quedaban con un color morado,
manteniendo el subrayado de las palabras. Gracias a eso, con una mirada era
posible entender cómo se había usado la información de la página.

Sin embargo, esos colores se pueden modificar como también cualquier


característica que los destaque (subrayado, color de relleno, etc.), para que
haya una diferencia entre los que han sido visitados con aquellos que aún no se
han utilizado, aunque se debe mantener la consistencia de que el mismo color
y decoración signifique lo mismo a lo largo de todas las pantallas para evitar
sorpresas al usuario.

Cabe consignar que las particularidades de los enlaces pueden ser asignadas
mediante el uso de CSS (hojas de estilo en cascada), teniendo en cuenta los
aspectos relacionados con accesibilidad web.
CARLOS HUERTA MILOS | UX

38. Uso de colores contrastados en texto y


navegación

Objetivo a conseguir:
Elegir colores contrastados entre ellos para apoyar la legibilidad y atender a
personas que tienen condiciones visuales que afectan su percepción de los colores.

Cómo se hace:
Para aumentar la legibilidad de los contenidos que se ofrecen, se debe tener la
precaución de que los colores que se emplean para el texto y el fondo sobre el
que está escrito, como también aquellos que se utilizan para indicar secciones,
cambios de estado a raíz de la interacción y opciones de menús, deben ofrecer
contraste entre ellos. Esto significa, grosso modo, que mientras el color de las
letras es oscuro, el del fondo debe ser claro; o que en tanto el color de un estado
es claro, el color que se use para el estado opuesto deberá ser oscuro. También se
debe considerar que en la medida que los dispositivos usados para ver los sitios
web sean móviles, será más complejo ver textos cuyo fondo sea oscuro, por lo que
deben ser evitados.

El uso de tonos que ofrezcan contraste entre ellos ayudará a las personas que
tengan una condición visual que les impida la percepción de los colores en la
forma que lo hace la mayoría (como ocurre con el 8% de los hombres), puesto que
podrán leer mejor y además podrán entender el cambio de estado o el contenido
del texto de los botones y podrá diferenciarlos sólo con mirar la pantalla.
Asimismo, esto ayudará a quienes deban revisar los contenidos en pantallas que
sólo desplieguen blanco y negro.

Existe una serie de herramientas disponibles que facilitan la revisión de los colores,
por lo que el uso de ellas podrá apoyar esta tarea.
CARLOS HUERTA MILOS | UX

39. Mapa del sitio

Objetivo a conseguir:
Crear y mantener una página con los enlaces más importantes del sitio web, para
facilitar la navegación y la optimización para buscadores.

Cómo se hace:
Para facilitar la navegación de los usuarios en el espacio digital se debe contar
con una página o un espacio dedicado, en la que estén disponibles enlaces hacia
las principales zonas del sitio, incluyendo la portada y portadillas de las secciones
existentes. Adicionalmente se debe poner un enlace a este “Mapa del Sitio” en
todas las páginas (por ejemplo, al pie de cada una de ellas).

Gracias a esta página un usuario que llegue al sitio web, podrá revisar en un solo
lugar el conjunto de contenidos y este espacio actuará como si se tratara del
índice de un libro.

Otra ventaja asociada, será que esa página permitirá que los buscadores como
Google tengan un lugar donde puedan obtener enlaces para llegar hacia todo el
sitio web, facilitando la indexación de sus contenidos.

Es importante que el Mapa del Sitio pueda generarse de manera automática para
que se actualice cada vez que se modifican los contenidos (por ejemplo, aparición
o cierre de secciones), o bien que sea actualizado manualmente cada vez que ello
ocurra.
CARLOS HUERTA MILOS | UX

40. Apoyo de contenido mediante enlaces internos

Objetivo a conseguir:
Ofrecer enlaces que permitan navegar hacia otros contenidos relacionados al
actual.

Cómo se hace:
Una de las características que debe tener un espacio digital consiste en entregar
una experiencia interesante mediante los contenidos propios que puede ofrecer al
usuario. Por lo mismo, se debe mostrar que no sólo el contenido actual es lo que la
persona busca, sino que hay otros elementos relacionados dentro del propio sitio,
que permiten obtener más información sobre el tema que esté siendo revisado.

Para ello y como parte del contenido se deben disponer elementos relacionados
que pueden ser del tipo contenidos (notas relacionadas), funcionalidades (sistemas
interactivos) o bien, elementos de difusión como podría ser la posibilidad de
suscribirse a algún sistema que avise al usuario cada vez que se publiquen nuevos
contenidos del mismo tema.

Adicionalmente, y usando algún sistema automático, el contenido actual puede


estar etiquetado con una palabra clave que ayude a relacionar con otros del
mismo tema y mediante esa clasificación, construir un sistema de navegación que
permita encontrar otros contenidos similares. De esta manera, el usuario podrá ver
que su experiencia de información es o supera lo que buscaba y permitirá clasificar
al espacio digital que se visita, como uno que aporta buena información y quedará
en su memoria para volver a visitarlo cada vez que lo requiera.
CARLOS HUERTA MILOS | UX

41. Apoyo de contenido mediante enlaces externos

Objetivo a conseguir:
Ofrecer enlaces que permitan ver ejemplos de contenido relacionado disponible,
pero en otros sitios.

Cómo se hace:
Una de las características que debe cumplir un espacio digital es que sus páginas
deben ser siempre el punto de partida de una experiencia interesante, ya sea por
sus contenidos, sus funcionalidades o ambas.

En muchos casos, el contenido propio no bastará para eso, pero sí podrá ser
un espacio para hacer una oferta de interés para el área de conocimientos que
abarca. En este sentido, lo que se recomienda es que si un contenido está muy
bien desarrollado en otro espacio, hay que ofrecer un enlace hacia él, cumpliendo
con la característica central de la web que es el hecho de conectar contenidos.

No es demasiado relevante si el contenido nuevo se abre en la misma ventana o


pestaña o en una nueva ya que lo que el usuario recordará es dónde obtuvo la
información y, por lo mismo, le asignará a quien le dio el dato, parte de la calidad
del sitio que visita desde allí.

Por lo tanto, la conclusión es que siempre hay que ofrecer enlaces, ya sean propios
o externos, consumando la característica del espacio digital de ser un buen
conjunto de contenidos al que se querrá volver siempre.
CARLOS HUERTA MILOS | UX

41. Apoyo de contenido mediante enlaces externos

Objetivo a conseguir: Ofrecer enlaces que permitan ver ejemplos de contenido


relacionado disponible, pero en otros sitios. Cómo se hace: Una de las
características que debe cumplir un espacio digital es que sus páginas deben
ser siempre el punto de partida de una experiencia interesante, ya sea por sus
contenidos, sus funcionalidades o ambas. En muchos casos, el contenido propio
no bastará para eso, pero sí podrá ser un espacio para hacer una oferta de interés
para el área de conocimientos que abarca. En este sentido, lo que se recomienda
es que si un contenido está muy bien desarrollado en otro espacio, hay que ofrecer
un enlace hacia él, cumpliendo con la característica central de la web que es el
hecho de conectar contenidos [30]. No es demasiado relevante si el contenido
nuevo se abre en la misma ventana o pestaña o en una nueva ya que lo que el
usuario recordará es dónde obtuvo la información y, por lo mismo, le asignará a
quien le dio el dato, parte de la calidad del sitio que visita desde allí. Por lo tanto,
la conclusión es que siempre hay que ofrecer enlaces, ya sean propios o externos,
consumando la característica del espacio digital de ser un buen conjunto de
contenidos al que se querrá volver siempre.
CARLOS HUERTA MILOS | UX

Herramientas de
interacción
CARLOS HUERTA MILOS | UX

42. Oferta de actividad desde cada página

Objetivo a conseguir:
Facilitar la realización de actividades relacionadas con el contenido que se publica,
integrándolas de manera contextual en la propia pantalla que revisa el usuario.

Cómo se hace:
Dado que la información que se entrega tiene como objetivo poner en contacto a
un usuario con lo que la organización desea darle a conocer, lo que habitualmente
se buscará es que una vez que lea o revise sus contenidos, realice alguna actividad
relacionada. Esta puede ir desde ver más información en detalle, imprimir
documentos más específicos, enviar la información a sus contactos en redes sociales,
suscribirse a un sistema de alertas de correo con novedades del mismo tema, e,
incluso, tomar contacto con los autores del contenido para saber más al respecto.

Por esto, quienes publican la información deben diseñar la experiencia que tendrá
el usuario y preparar en forma anticipada las posibles actividades a realizar, con el
objetivo de ofrecerlas en forma directa en la propia pantalla, facilitando la realización
de tales acciones. Lo interesante es que cada página debe entenderse como el punto
de partida de una actividad, más que como el destino final de una visita.

Aunque hay varias formas de hacerlo, la mejor es transformar las acciones en


elementos que estén relacionados con el contexto en el que se presentan y que
permitan la realización de las actividades posibles de llevar a cabo (publicar en
redes sociales, enviar un e-mail, descargar un documento, etc.), desde cada zona
del contenido donde sea relevante hacerlo, mediante elementos que resuelvan la
acción con una única actividad del usuario.

A mayor simplicidad de la interacción que se proponga, mejor será la respuesta


que se obtenga.
CARLOS HUERTA MILOS | UX

43. Oferta de respuesta en formularios del sitio

Objetivo a conseguir:
Generar un procedimiento administrativo concreto para responder las consultas
que lleguen, en tiempos adecuados.

Cómo se hace:
Para que el sitio web apoye la comunicación con los clientes interesados en lo que
se da a conocer en sus páginas, se debe contar con la capacidad de ofrecerles
herramientas que permitan mantener el contacto y la relación.

Sin embargo, para cumplir adecuadamente con este objetivo hay que considerar
que la tarea tiene dos aspectos: técnico y administrativo:

Técnico: disponer de un Formulario de Contacto a través del cual se envíen


comunicaciones; en este sistema se debe pedir al interesado que ingrese ciertos
datos mínimos (Nombre, correo electrónico y mensaje); tras el envío se le
debe ofrecer una respuesta en pantalla y por e-mail, donde se indique el plazo
aproximado en el que se le hará llegar una respuesta. Como buena práctica, se
puede incluir el texto de lo que la persona escribió en el formulario.

Administrativo: contar con un sistema de seguimiento, respuesta y gestión de los


mensajes recibidos, que garantice dar una respuesta en el menor tiempo posible.
De esta manera se podrá hacer un seguimiento de la conversación y asegurar que
se cumplan las expectativas de quien escribe. Asimismo, a partir del análisis de los
mensajes recibidos, se podrán realizar revisiones de calidad general que ayuden
a entender las percepciones que tienen los usuarios respecto de los diferentes
aspectos de la organización o empresa que es representada por el sitio web.
CARLOS HUERTA MILOS | UX

44. Conexión con redes sociales

Objetivo a conseguir:
Facilitar acceso a Twitter, Facebook y las redes sociales actuales, desde cada
página de información.

Cómo se hace:
Debido a la importancia creciente de las redes sociales se debe considerar
que cada usuario que visita el espacio digital es un potencial promotor de los
contenidos a los que accede. Por ello, desde cada página se debe contar con la
capacidad de realizar dos tipos de acciones desde las redes sociales más populares
(por ejemplo, Facebook y Twitter) y que corresponden a las siguientes:

Seguir al perfil en la red social: debe estar disponible el botón que permite
convertirse en seguidor del espacio digital, con el fin de recibir los contenidos a
través de la red social, sin visitar necesariamente el sitio web. Aunque a futuro
se pueden perder visitas directas ya que en muchos casos las personas preferirán
estar en sólo en la red social sin visitar el sitio web, en el fondo se cumplirá con el
objetivo de mantener a la persona conectada con nuestro espacio de contenidos.

Compartir contenidos: debe ofrecerse la posibilidad de que la persona que visita el


espacio digital pueda compartir los contenidos (u opinar de ellos) desde la propia interfaz
del sitio web de manera simple, completando esa actividad mediante un solo click.

Hay que considerar que las redes sociales normalmente ofrecen elementos para
ser incrustados en los sitios web, mediante la inclusión de código HTML en
la propia interfaz, facilitando la tarea señalada en este elemento. Para ello se
debe revisar la documentación que se entregue en el área para desarrolladores
de la red social y revisar periódicamente su funcionamiento, ya que se generan
muchas mejoras de código que podrían dejar fuera de funcionamiento lo que está
instalado y funcionando sin problemas en un momento determinado.
CARLOS HUERTA MILOS | UX

45. Ejecución de la interacción en el mismo espacio

Objetivo a conseguir:
Privilegiar la ejecución de la interacción en la misma página en que se muestra,
respondiendo a las acciones de los usuarios.

Cómo se hace:
Una de las características que diferencian a los espacios digitales de otros medios,
es su capacidad interactiva. Con el objetivo de hacerla más efectiva, es necesario
utilizar elementos de programación que permitan que la acción ofrecida se lleve
a cabo en el mismo espacio en el que se presenta, sin necesidad de abrir nuevas
páginas o cambiar al usuario del espacio en el que está ubicado.

Esta posibilidad se consigue a través de sistemas de software basados en


Javascript, los que facilitan que las acciones de los usuarios se expresen en
resultados inmediatos que se muestran en la interfaz, sin necesidad de cambiar de
página o de demoras en su ejecución.

Con el fin de trabajar con mayor velocidad, se recomienda el uso de una


“biblioteca de estilos” que reúne la manera en que se utilizan los elementos de
CSS (hojas de estilo en cascada) o bien un “ framework”, que es un conjunto de
elementos de diseño y programación disponibles para su uso inmediato, puesto
que ambas implementaciones tecnológicas facilitan la incorporación de elementos
interactivos dentro de cualquier página web.

Se deben tener en cuenta los principios básicos de usabilidad de las interfaces


y realizar pruebas de usuarios de las funcionalidades que se implementen, de tal
manera de verificar que lo que se está ofreciendo se cumple de la manera en que
fue definido.
CARLOS HUERTA MILOS | UX

46. Entrega de información contextual

Objetivo a conseguir: son mencionadas en el texto o las imágenes, que sirven como apoyo a lo que
Ofrecer información directa y simple mediante textos cortos, incluidos en los se está presentando en la página, que aumentan el tiempo de exposición a los
lugares en que se va a realizar una interacción. contenidos y mejoran la experiencia que tiene el usuario en el sitio.

Cómo se hace:
Debido a que los espacios interactivos basan su funcionamiento en la capacidad
de las personas que los utilizan, sin apoyo ni ayuda externa, los autores de
las interfaces deben extremar su cuidado para ofrecer espacios en los que
interacciones se produzcan de manera simple. La forma de llevarlo a cabo es
mediante espacios que hayan sido probados previamente mediante trabajo con
usuarios, y permitido detectar y corregir las principales dificultades.

Lo que se busca es aumentar la efectividad de los resultados del sitio web,


mediante la entrega de ayuda en el momento en que el usuario más lo requiere.
Una forma concreta de hacerlo es mediante textos de ayuda breve que respondan
las dudas que puedan tener los usuarios al momento de realizar alguna acción.
Por ejemplo, junto a un formulario en que se debe ingresar un dato, explicar
mediante textos de “micro-ayuda” cómo deben escribir la información, para evitar
equivocaciones y pérdidas de tiempo en la interacción.

Sin embargo, existen otras formas de ver este mismo aspecto, como por ejemplo,
al profundizar los contenidos que se muestran mediante la entrega de elementos
de apoyo a lo que se presenta en la pantalla a través de diferentes objetos de
información que ayuden a que el visitante tenga enlaces que seguir o actividades
a desarrollar, una vez que ha terminado revisar lo que se le presenta en pantalla.
Es así como un hecho relatado puede ser apoyado con más elementos que ofrecen
profundidad de información, tales como y a modo de ejemplo, una línea de tiempo
de eventos relacionados, con pequeñas biografías de las personas relevantes que
CARLOS HUERTA MILOS | UX

47. Interacción en formularios de búsqueda

Objetivo a conseguir: Cada uno de los elementos que se muestran debe tener un título enlazado, más
Ofrecer un formulario fácil de usar, para simplificar las búsquedas dentro del sitio un extracto que entregue una idea acerca del contenido.
web.
De ser posible, ofrecer algún elemento de taxonomía o clasificación, como
una etiqueta que agrupe al tipo de contenidos de que se trata, para acceder a
contenidos relacionados a los del listado.
Cómo se hace:
Un sistema de búsqueda que sea simple y fácil de usar debe integrarse dentro de
cada página del sitio web, idealmente en la esquina superior derecha, debido a que
es el espacio donde comúnmente se despliega. Cuando se haga una búsqueda, se
debe acceder a una página que muestre las palabras o la frase buscada y luego,
ordenados por relevancia, los resultados. Debido a la importancia que ha adquirido
Google como sistema buscador, se recomienda ofrecer una presentación similar en
la página de resultados.

Entre los elementos a tener en cuenta dentro de las interfaces descritas, los
siguientes son los más importantes a considerar:

Formulario de búsqueda: Debe tener un campo de texto que permita ingresar al


menos cuatro palabras (20 caracteres); cabe señalar que mientras más amplio es
ese espacio, los usuarios tienden a escribir más palabras lo que genera resultados
más exactos.

Debe contar con un botón a la derecha del campo de texto que contenga la
palabra Buscar. El uso de esa palabra es preferible a emplear un ícono (por
ejemplo, una lupa).

Página de resultados: Informar el número de hallazgos realizados, con el fin


de dar a conocer de antemano la disponibilidad de la información buscada. Los
elementos que aparecen en el listado de resultados deben contener la fecha de
actualización del contenido.
CARLOS HUERTA MILOS | UX

48. Mensajes del buscador ante cero resultados

Objetivo a conseguir:
Ofrecer información adecuada al usuario cuando la búsqueda realizada no entrega
resultados.

Cómo se hace:
Debido a que habrá consultas que harán los usuarios en el buscador que no
generarán respuestas debido a que no se dispone de contenidos en relación con lo
que se busca, o bien porque las palabras están mal escritas, es importante que la
página de resultados ofrezca algún tipo de información con el fin de que no quede
la sensación de que el sistema no funciona.

Para el primer caso, en que efectivamente no hay nada que mostrar porque
no existe ese tipo de información, se recomienda que en la zona de resultados
aparezca una frase que lo indique; por ejemplo: “No hay resultados para la
búsqueda realizada”. Junto a esa información, se pueden dar recomendaciones
que aunque no correspondan exactamente a las palabras ingresadas por la
persona, pudieran estar vinculadas con lo que se está requiriendo. Adicionalmente
se pueden presentar enlaces para acceder al Mapa del sitio y a un sistema de
“búsqueda avanzada” que permita hacer consultas más complejas mediante
conectores y comodines.

En tanto, en el caso de que se trate de que las palabras buscadas estén mal
escritas, se debe procurar que haya un mensaje que interprete lo escrito y permita
señalar “tal vez quisiste buscar esto:” y mostrar resultados para la búsqueda con
las palabras correctas y un listado de enlaces para acceder a esa información.
CARLOS HUERTA MILOS | UX

49. Botones con términos adecuados al contexto

Objetivo a conseguir: lo opuesto a lo que se espera. O bien, el botón “Enviar” que implica que la
Al crear botones en zonas en que se ofrece una acción, se deben emplear palabras información que se ha ingresado se entrega al destinatario, deberá evitarse en una
adecuadas al contexto en que se ejecuta la acción que se ofrece. pantalla donde sea más adecuado un verbo diferente, como “Grabar” o “Guardar”.

Cómo se hace:
Los botones que se ofrecen en los formularios y los elementos interactivos del
sitio web deben tener en cuenta el contexto en el que se están presentando,
para evitar una interpretación errónea de la acción que se propone a través de la
pantalla.

En este tipo de pantallas existe la acción primaria, que es la que se busca que
el usuario realice y que está descrita con un verbo que representa la acción y es
presentada mediante un botón con colores que llamen a la actividad. También
está la acción secundaria, que es la que normalmente evita la acción principal y
que aparece, aunque de manera menos destacada y al lado de la principal.

El botón correspondiente a la acción primaria debe tener un verbo que dé cuenta


de la acción que se ofrece. La forma más apropiada de elegir el término correcto
o validar la comprensión de las palabras usadas, es realizar pruebas con usuarios
que demuestren que la persona que emplea la pantalla está efectivamente
entendiendo lo que ésta realiza en el espacio que se evalúa.

Un ejemplo clásico es el uso de la palabra “Cancelar” que significa normalmente


anular una operación pero que en ciertas situaciones (o incluso, en determinados
países) puede significar algo distinto como, por ejemplo, extinguir o pagar una
deuda; por lo tanto, en una pantalla de pago donde estén las acciones “Pagar” y
“Cancelar”, para algunos usuarios tendrán el mismo significado y podría ejecutar
CARLOS HUERTA MILOS | UX

50. Descripción simple en espacios interactivos

Objetivo a conseguir:
Escribir la cantidad justa de texto en los espacios interactivos y preferir los enlaces
para dar explicaciones.

Cómo se hace:
En los espacios en que se ofrece algún tipo de interacción, los usuarios tienden
a privilegiar llevar a cabo la actividad que se está ofreciendo sin llegar a leer las
instrucciones que explican cómo ejecutarla. Debido a esto, se hace innecesario
describir lo que ocurre en la pantalla al estilo de un manual de usuario en el
mismo lugar, porque en la práctica esa información no será leída.

Lo que se sugiere realizar es lo siguiente:

• Aclarar mediante una frase breve la actividad que se propone, usando


instrucciones breves y precisas.

• Dar explicaciones concisas junto a los espacios en que se desarrolla cada parte
de la acción, destacadas con un ícono que represente el concepto de ayuda.

• Ofrecer enlaces hacia páginas con explicaciones más amplias, con el objetivo de
profundizar la información destinada a aquellos usuarios que lo requieren.

• Monitorear los sistemas de consulta interno y de redes sociales, para ver qué
problemas enfrentan los usuarios en esos espacios de interacción, y obtener
elementos que ayuden a mejorar la interfaz del espacio interactivo.

• Ofrecer elementos de apoyo mediante textos de “micro-ayuda” para entender


qué es lo que se debe ingresar en el espacio que se muestra.

• Realizar pruebas con usuarios para ver la forma en que son utilizados estos
elementos de apoyo, optimizando su presentación y despliegue.
CARLOS HUERTA MILOS | UX

Formularios que
capturan datos
CARLOS HUERTA MILOS | UX

51. Qué incluir en un formulario efectivo

Objetivo a conseguir: • Conseguir que el formulario funcione en diferentes tipos de pantalla, en especial
Hacer de los formularios una herramienta efectiva para obtener información de los en las de dispositivos móviles e integrar su diseño al del sitio web para que sea
usuarios. un elemento que se complemente con la experiencia que el usuario tiene con los
contenidos que está revisando.

• Entregar información de apoyo contextual mediante textos de “micro-ayuda” que


Cómo se hace:
faciliten la forma de llenar los campos solicitados y ofrecer una respuesta una vez
Los formularios son aplicaciones que permiten solicitar y recoger información de
que se haya enviado el formulario.
parte de los usuarios que se dan la tarea de llenarlos. Junto al carro de compra,
representan el momento en que se logra que las personas que visitan, realicen la • En determinados casos, una vez que el formulario se ha completado y procesado,
acción que justifica la existencia de este espacio de información e interacción. es adecuado presentar toda la información que se ha ingresado en una sola
pantalla, para que el usuario haga una revisión final antes de enviarla.
Por su relevancia, deben ser diseñados para aumentar su efectividad y aprovechar
el tiempo que los usuarios invierten en ellos, dando a cambio, un beneficio
tangible.

Entre los consejos a tener en cuenta en este aspecto, los más relevantes se
orientan a conseguir que se optimice su funcionamiento solicitando la menor
cantidad de información que sea posible y haciendo simple su uso.

En este sentido, su efectividad aumenta siguiendo estas recomendaciones:

• En el encabezado describir sólo lo justo y necesario para que el usuario entienda


el objetivo del formulario y cómo serán usados los datos que ingrese. Cualquier
información adicional, debe ofrecerse mediante enlaces para que el usuario la
revise si la requiere.

• Solicitar sólo la información que sea necesaria, para emplear de la manera


más eficiente el tiempo del usuario; por ejemplo, nombre y teléfono si se le va a
contactar por esa vía o bien sólo e-mail, si se usará ese medio.
CARLOS HUERTA MILOS | UX

52. Destacar los campos obligatorios del formulario

Objetivo a conseguir:
Marcar cuáles son los campos que el usuario debe llenar para que el formulario se
procese adecuadamente.

Cómo se hace:
Los formularios deben solicitar sólo la información que sea indispensable, de
manera de emplear eficientemente el tiempo que el usuario dedica a completarlos.
Si es necesario agregar otros campos para facilitar el llenado, debe indicarse de
alguna manera cuáles son los datos obligatorios y cuáles opcionales. Para ello se
hace necesario que en cada campo se indique esa condición, idealmente usando
la palabra “Obligatorio” o con algún sistema o marca que haga evidente la acción
requerida.

En cada caso se debe usar lenguaje sencillo y directo para explicar qué escribir en
cada campo, de tal manera que el usuario sepa qué hacer y evitar problemas al
enviarlo.

Es importante considerar que el número de campos obligatorios dependerá del


objetivo que persigue el formulario, puesto que el tiempo que el usuario dedique
a ingresar información será proporcional al objetivo que persiga con su llenado. Si
la cantidad de campos se ve muy numerosa o compleja o también si visualmente
la página se ve gráficamente congestionada (ver siguiente elemento en este
capítulo), el usuario podría optar por no participar y dejarlo sin completar.
CARLOS HUERTA MILOS | UX

53. Cuidar la organización visual del formulario

Objetivo a conseguir:
Ofrecer una visualización del formulario que permita al usuario entenderlo y
percibir que su llenado será simple y rápido.

Cómo se hace:
Como se indicó antes, si la cantidad de campos a completar en un formulario
se ve muy numerosa o compleja, el usuario podría optar por no participar y
seguir la navegación sin llenarlo e incluso, abandonar el sitio web. Por ello, se
hace imprescindible que el formulario esté organizado de una manera tal, que
visualmente se entienda como una tarea abordable en un período razonable de
tiempo.

Para conseguir este objetivo los campos a llenar se deben ordenar en una sola
columna, agrupar los temas similares en zonas que tengan subtítulos que las
describan, ofrecer instrucciones simplificadas y destacar los que sea obligatorio
llenar.

Otro elemento importante es que a medida que la persona vaya llenando el


formulario, se le deben proporcionar ayudas visuales y de escritura mediante
textos de “micro-ayuda” a modo de ejemplo, que el simplifiquen la experiencia de
ingreso de datos, haciendo más fácil y rápida la actividad.

Adicional a esto, disponer un solo botón para ejecutar la acción con un texto que
identifique la actividad a realizar de manera simple. Por ejemplo, usar la palabra
Enviar en lugar de Aceptar si se trata de ese tipo de acción. Asimismo, evite usar
el botón Cancelar o Borrar, ya que la persona que enfrente la tarea de llenar el
formulario y que no decida no completarlo, simplemente se irá de la página sin
hacer nada. En caso de que sea necesario usarlo, preferir presentarlo como enlace
y no como botón.
CARLOS HUERTA MILOS | UX

54. Ayuda para evitar errores en el llenado

Objetivo a conseguir: • Permitir llenar los campos del formulario sólo con el teclado, usando la tecla
Entregar ayuda contextual usando textos cortos y simples para facilitar la <tab> o bien el botón <Siguiente> en el teclado de dispositivos móviles; para ello
compresión de lo que hay que escribir en cada campo del formulario. se debe marcar el orden de llenado con la etiqueta <tabindex> en el código del
formulario.

• Asimismo si falta un dato o su ingreso es incorrecto, se debe validar y marcar el


Cómo se hace:
error tras su ingreso para evitar otros posteriores. Una buena práctica asociada
Para facilitar el llenado del formulario, es necesario que cada campo tenga
a formularios es presentar toda la información que se ha ingresado en una sola
una explicación simple (en una frase o menos) acerca del dato a ingresar. La
pantalla, para que el usuario haga una revisión final antes de enviarla.
información debe entregarse en la misma zona que ocupa el campo del formulario,
para evitar que el usuario se distraiga y no termine de ingresar la información que
se le solicita. Como se indicó antes, la entrega de ayuda en el momento y en el
lugar en que el usuario más lo requiere aumenta su efectividad.

Para desarrollar esta tarea, se recomienda lo siguiente:

• Ofrecer la información mediante una frase directa, incluso señalar el dato


requerido mediante textos de “micro-ayuda” a modo de ejemplo [40]. La frase de
apoyo debe estar situada junto al espacio en que se debe ingresar la información
para facilitar la comprensión de la ayuda.

• Se debe ofrecer la información de manera contextual, de acuerdo a lo que


necesite el usuario al momento de enfrentar el campo del formulario.

• Si se presenta una lista, dejar marcado por omisión el dato que se asuma como
el más usado para el llenado (si el campo permite elegir países desde una lista, por
omisión aparecerá el país más usado).

• Se deben entregar pistas gráficas interactivas que marquen el ingreso correcto


de información; por ejemplo, un visto bueno de color verde si el dato solicitado
cumple con lo requerido.
CARLOS HUERTA MILOS | UX

55. Entrega de mensajes de resultado en


formularios

Objetivo a conseguir:
Mostrar información completa de lo que se ingresó y su resultado, para ofrecer
seguridad y tranquilidad a quien realiza esa acción.

Cómo se hace:
La retribución que el usuario recibe al ingresar información en un formulario, se
relaciona con el cumplimiento de la promesa hecha a cambio de realizar esta
acción. Por ejemplo, si el formulario es de consulta se debe indicar en cuánto
tiempo habrá una respuesta. En tanto, si es un formulario de suscripción o una
actividad de pago, la acción debe completarse con el envío de un e-mail a la casilla
ingresada por el usuario con un resumen de lo realizado.

Por lo anterior, durante el proceso de creación del formulario, se deben contemplar


como parte de su contenido los mensajes que sean necesarios para asegurar
al usuario que ha ingresado los datos requeridos y que se ha completado
adecuadamente el proceso de ingreso.

Dichos mensajes deben aparecer en la medida que el usuario va ingresando la


información, marcando los errores de manera inmediata, en la medida que eso sea
posible, para evitar que aparezcan cuando el usuario hace el envío del formulario.

De esta manera la experiencia de uso será la que el usuario espera y se ayudará


a mantener la expectativa que tuvo al completar el formulario de la manera
solicitada.
CARLOS HUERTA MILOS | UX

56. Tipo y tamaño de los campos del formulario

Objetivo a conseguir: antes cuánto tiempo demora llenarlo y qué elementos se requieren ingresar
Facilitar el llenado del formulario, solicitando los datos adecuados y entregar (números de documentos o registros, por ejemplo) para que la persona los tenga
campos con un espacio apropiado para la cantidad de información que se requiera disponibles cuando sea necesario su ingreso.
ingresar.

Cómo se hace:
Como lo que se busca es facilitar la vida al usuario que utiliza el formulario, se
aconseja solicitar sólo los datos que sean imprescindibles para la acción que se
cumplirá al llenarlo. Hay que considerar que el usuario mirará el formulario antes
de hacerlo y si es extenso, es probable que opte por no hacerlo.

Por ejemplo, si el formulario es para hacer un reclamo, lo más razonable es que


sólo se requiera la identidad y forma de contacto de la persona (nombre, teléfono
y/o e-mail) ya que lo demás que se necesite se podrá pedir través del contacto
directo. Si es un contacto para pedir información de un producto, lo más seguro es
que se requiera agregar un campo de texto para que el usuario haga una consulta.
En este caso, menos simple es más, ya que significa la diferencia entre que el
contacto se produzca o no.

Asimismo, si se pide el nombre de la persona, el campo para escribir no debe ser


largo y tiene que facilitar el ingreso de no más de 20 caracteres; en cambio, si
es el campo de consulta, debe permitir varias líneas. De esa manera se guiará
efectivamente al usuario, en la cantidad de información que se espera que
entregue. Adicionalmente se debe cuidar la diagramación de los campos y la forma
en que se desplaza el cursor entre ellos mediante el uso del teclado.

Por último, si el formulario debe ser largo debido a la característica del proceso
que se realiza, se puede evaluar dividirlo en etapas e ir grabando los avances para
que pueda ser ejecutado en diferentes momentos. También es adecuado informar
CARLOS HUERTA MILOS | UX

57.Validación de formularios

Objetivo a conseguir: • Que el usuario reciba en la casilla de e-mail que haya ingresado en el formulario,
Asegurar el funcionamiento del formulario cuando es enviado, incluyendo el caso una copia de su envío, para que tenga un registro de lo realizado y le permita
en que se envía sin completar ningún dato. seguir en contacto.

• Que en el sistema de administración de contenidos, quede almacenado el


mensaje enviado, con el fin de realizar acciones sobre dicha información.
Cómo se hace:
Es muy importante asegurar el correcto funcionamiento de los formularios • Que haya un sistema administrativo y logístico interno en la organización que
mediante pruebas que validen su actividad, puesto que se trata de aplicaciones recibe la comunicación del cliente, que realice acciones efectivas en torno a lo que
para solicitar y recoger información de parte de los usuarios y, gracias a eso, ha escrito la persona en el formulario y se cumpla la promesa que se ha hecho
capturan la acción que justifica la existencia del espacio digital. desde el espacio digital.

Entre ellas, la más importante es la que permite comprobar si el formulario tiene


toda la información obligatoria que se solicita al usuario; si se han completado los
datos de la manera requerida y si esos datos cumplen con el formato señalado en
la ayuda contextual provista para cada campo.

En este sentido, se requiere validar lo siguiente:

• Que el formulario no se pueda enviar si faltan los campos obligatorios, los que
deben marcarse para que el usuario los distinga de los demás.

• Que se marquen aquellos campos donde un dato ha sido ingresado de manera


incorrecta; idealmente se debe hacer al momento en que el usuario pasa de ese
campo al siguiente y antes de hacerlo.

• Que al hacer el envío se muestre en pantalla un mensaje redactado


especialmente para la ocasión en la que se informe al usuario de las acciones que
siguen al envío.
CARLOS HUERTA MILOS | UX

58. Botones con forma y mensajes simples y


directos

Objetivo a conseguir:
Privilegiar el uso adecuado de texto para invitar a la acción, con mensajes que
sean explícitos de lo que se requiere realizar.

Cómo se hace:
Para facilitar la comprensión de las acciones que se ofrecen en el espacio digital,
es necesario que los botones que produzcan la acción del formulario, sean claros
y precisos, empleando la palabra adecuada para que no haya dudas acerca de la
acción a ejecutar.

El primer elemento a tener en cuenta es que por tratarse de botones que son
pulsados por el usuario, deben ser diseñados y construidos para que luzcan como
tales y tengan un comportamiento que esté conforme con lo que el usuario
espera. En este sentido, se debe considerar que las acciones que funcionan
adecuadamente en la versión del escritorio (por ejemplo, cambio de color cuando
el mouse pasa por encima), no estarán disponibles en la versión móvil que carece
de esa capacidad.

Adicionalmente, ya que se trata de acciones que el usuario debe ejecutar, será


importante que los botones que se empleen incluyan una palabra que corresponda
a un verbo y que éste sea el más adecuado para representar la acción a ejecutar.

Por último, es importante considerar que el color usado en el botón debe ser
adecuado para la acción que se ofrece, ya que hay determinadas tonalidades
asociadas a las actividades más concretas; por ejemplo, rojo para cancelar o evitar
una acción y verde para aceptarla. Finalmente se debe anotar que la elección de
los colores debe ser compatible con las medidas de accesibilidad web y que no
es adecuado utilizar los colores corporativos en este ámbito, ya que puede ir en
contra de las prácticas ya señaladas.
CARLOS HUERTA MILOS | UX

Diseño de errores
CARLOS HUERTA MILOS | UX

59. Redacción de los mensajes de error

Objetivo a conseguir: • La redacción debe ser gentil, que no culpe a los usuarios.
Indicar, de manera clara, qué no funcionó en la acción realizada por el usuario para
• Entregar consejos constructivos para arreglar el problema.
ayudarle a corregir el problema.
• Los mensajes deben ser visibles y muy destacados.

• Se deben ofrecer enlaces hacia páginas con más información sobre el error.
Cómo se hace:
Cada vez que un sistema no cumple con lo que el usuario solicita debido a algún
tipo de problema, se debe realizar una acción que le informe tanto al usuario como
al administrador del sistema que esa situación está ocurriendo. De esta manera el
primero sabrá cómo reaccionar y, el segundo, tendrá una alarma acerca de lo que
se debe corregir.

En este sentido, es importante que los encargados del sitio web diseñen en forma
previa a su ocurrencia, los tipos de respuesta que se ofrecerán ante los errores
que existan y que se desarrolle un sistema administrativo para enfrentarlos. Por lo
mismo, los principales errores a cuidar son los del tipo 400 que son generados por
acciones de los usuarios (por ejemplo, el Error 404 que se refiere a que un recurso
solicitado por el usuario no existe en esa dirección) o los del tipo 500, referidos a
que el servidor no responde por un motivo relacionado con su operación.

En cada caso, la pantalla de reacción ante los errores debe cumplir con las
siguientes guías :

• La pantalla debe contar con el diseño normal del sitio web, para mantener la
consistencia.

• Ofrecer una indicación explícita de que algo ha salido mal.

• Disponer de una descripción precisa de problemas concretos.

• Proporcionar la información en un lenguaje entendible para las personas.


CARLOS HUERTA MILOS | UX

60. Presentación de los mensajes de error

Objetivo a conseguir:
Lograr que el error se despliegue en la pantalla de manera inequívoca, para evitar
las dudas del usuario.

Cómo se hace:
Cuando se hace necesario informar al usuario que un sistema no cumple con lo
que se solicita debido a algún tipo de problema, la información del error debe ser
directa e inequívoca con el fin de informar y al mismo tiempo dar instrucciones al
usuario acerca de los pasos a seguir para repararlo.

Debido a que el problema puede ser producto del propio sistema o a una acción
equivocada del usuario, se necesita que la información sea breve y explícita y que
ocupe un espacio importante en la pantalla. Por lo mismo, se debe evitar entregar
la información de errores en ventanas de alerta, ya que probablemente el usuario
las cerrará sin leer la información que entregan.

Asimismo, se deben usar colores adecuados para informar los errores siguiendo las
convenciones comunes a estos aspectos que indican que (como en el caso de los
semáforos de tránsito) las tonalidades verdes son para indicar que una tarea fue
ejecutada correctamente; gamas amarillas para señalar una advertencia y tonos
rojos para indicar una situación equivocada, de error o de peligro.

Por último, se debe señalar en el mismo mensaje una acción para resolver el
problema, la que se pueda activar desde el mismo espacio en el que se realiza esta
comunicación.
CARLOS HUERTA MILOS | UX

61. Mensajes para el Error 404

Objetivo a conseguir: contenidos que puedan ser mejorados para evitar la generación del error (por
Explicar que lo que se solicita no está disponible y hacer una oferta de otras ejemplo, enlaces dirigidos a direcciones inexistentes, imágenes o fotografías que
actividades y contenidos. no están bien referenciadas, etc.).

Cómo se hace:
El Error 404 se refiere a que un recurso solicitado por el usuario no existe en la
dirección que ingresó, ya sea porque el usuario escribió mal la dirección o porque
el administrador del sitio lo cambió de lugar y ya no se encuentra donde solía
estar. En ambos casos el servidor web responde con una página estándar que
anuncia esta situación y que en caso de que no sea preparada adecuadamente, no
ofrece mayor información al respecto salvo presentar el texto “Error 404” [47].

Por lo anterior, es muy importante preparar esa página con la siguiente


información:

• Ofrecer una explicación en un lenguaje entendible para las personas acerca de


que lo solicitado ya no está disponible.

• La página que se muestra debe tener la imagen corporativa e información de


contacto.

• Se debe incluir un buscador que permita encontrar el contenido de interés y un


enlace al Mapa del Sitio para ayudar a buscar la información.

• Disponer de un formulario para notificar el error, para que el usuario sienta que
está siendo activo y participando en la reparación del problema.

En forma adicional, el administrador debe hacer una revisión periódica del sistema
de analítica web del que disponga, para detectar estos errores y resolver los
problemas que sean de su ámbito de competencia o bien, que se deriven de
CARLOS HUERTA MILOS | UX

62. Mensajes para el Error 500

Objetivo a conseguir:
Explicar que la acción o el contenido que se solicita no funciona, pero se puede
hacer algo para corregirlo.

Cómo se hace:
El Error 500 y todos aquellos que empiezan con un número 5 se refieren a que el
servidor no puede completar la petición que hace el usuario debido a un problema
interno. Sin embargo, aunque el contenido del sitio web puede no ser accesible, el
servidor web sí puede mostrar una página de respuesta personalizada con el fin de
entregar información al usuario.

Por lo mismo, es muy importante preparar esa página con la siguiente información:

Una explicación en un lenguaje entendible para las personas, acerca de que lo


solicitado ya no está disponible.

La página que se muestra debe tener la imagen corporativa e información de


contacto.

Disponer de un enlace hacia una red social en la que se vaya entregando


información actualizada acerca del estado del problema.

En forma adicional, el administrador del sistema debe revisar esta situación con el
objetivo de corregir el motivo que lo esté produciendo para evitar su repetición.
CARLOS HUERTA MILOS | UX

63. Mensajes para períodos de mantenimiento

Objetivo a conseguir:
Cada vez que el servidor se detenga para actividades de mantenimiento, se debe
indicar la razón, incluyendo la fecha y hora de retorno de la operación normal.

Cómo se hace:
Cuando el servidor web que contiene al sitio debe detenerse para realizar
actividades de mantenimiento de su hardware o software, el usuario debe ser
informado para que no tenga la impresión de que el servicio ha desaparecido
súbitamente.

Para ello se debe preparar una página que contenga al menos la siguiente
información:

• Una explicación en un lenguaje comprensible para las personas, acerca de lo que


está ocurriendo en el momento.

• La página que se muestra debe tener la imagen corporativa e información de


contacto.

• Se debe incluir la fecha y hora de retorno de la operación normal con alternativas


de acción si la persona que visita requiere hacer algo importante con la empresa u
organización.

• Disponer de un enlace hacia una red social en la que se vaya entregando


información actualizada acerca del estado del problema.

• No obstante, también es aconsejable enviar información vía correo electrónico


a la comunidad que sigue el sitio web, anunciando la situación y los plazos
involucrados.
CARLOS HUERTA MILOS | UX

64. Mensajes por exceso de visitas

Objetivo a conseguir:
Entregar un mensaje adecuado a los usuarios para informar que el contenido no se
puede mostrar porque hay más tráfico del que puede ser atendido.

Cómo se hace:
Cuando el servidor web recibe más usuarios de los que su capacidad permite,
normalmente entregará un error que dejará al usuario ante un callejón sin salida.
Por lo mismo, se debe prever esta situación y contar con la capacidad de informar
sobre lo que está ocurriendo mediante una pantalla especialmente preparada para
el efecto.

Para ello la página debe contener al menos lo siguiente:

• Proporcionar una explicación en un lenguaje comprensible para las personas


acerca de lo que está ocurriendo.

• La página debe tener la imagen corporativa e información de contacto.

• Se debe solicitar a los usuarios volver a visitar el sitio web dentro de un período
corto de tiempo.
CARLOS HUERTA MILOS | UX

Posicionamiento en
buscadores
CARLOS HUERTA MILOS | UX

65. Uso de robots.txt

Objetivo a conseguir:
Informar al software de indexación de un buscador qué debe o no llevar de
nuestro sitio web a sus registros.

Cómo se hace:
Los sistemas que ofrecen buscadores utilizan unos programas llamados robots
(también conocidos como spiders o crawlers) para acceder a los sitios web,
recopilar la información y llevarla a bases de datos especializadas que ordenan y
categorizan de acuerdo a sus algoritmos, lo que luego mostrarán en sus páginas
de resultados.

Para ello cuentan con el protocolo de exclusión de robots que opera gracias a la
existencia de un archivo de texto que se instala en la raíz del sitio web y en cuyo
contenido entrega instrucciones acerca de qué no se debe indexar, evitando que
esa información sea transferida a la respectiva base de datos del buscador.

El contenido del archivo es el siguiente:

User-agent: *

Disallow: /

Allí se muestra en la primera línea que cualquier robot que visite el sitio debe seguir la
instrucción de la segunda línea, en la que se indica que no está permitida la indexación; si
ese campo se deja en blanco, todo el contenido del sitio web será indexado.

Por lo tanto, una buena práctica es contar con el archivo robots.txt, marcando lo
que no se debe indexar. Esta actividad se debe hacer en forma simultánea con la
inclusión del metadato de robots a nivel de cada página web, para asegurar un
buen posicionamiento del sitio.
CARLOS HUERTA MILOS | UX

66. Uso de sitemap.xml

Objetivo a conseguir: <priority>0.8</priority>


Indicar al software de indexación de un buscador lo que debe llevar de nuestro
</url>
sitio web a sus registros para ser indexado.
</urlset>

Gracias a este archivo, los principales buscadores obtendrán la información


Cómo se hace:
necesaria para acceder al contenido del sitio web e indexarlo, elemento
Cada vez que un sistema de búsqueda en la web accede a un sitio con el fin de
fundamental de la actividad de posicionamiento en buscadores (SEO).
indexar un contenido, comienza buscando el archivo robots.txt para determinar si
hay exclusiones. Luego, revisa la existencia del archivo sitemap.xml que registra
cada una de las direcciones internas donde existe contenido que puede ser
indexado.

El protocolo Sitemap emplea un archivo en formato XML que se instala en el


servidor y que puede ser referenciado desde el archivo robots.txt para que el
software de indexación lo utilice. En su contenido se registra la URL de cada
elemento, su fecha de última modificación, frecuencia de actualización y prioridad
de importancia dentro del sitio web.

El contenido del archivo es el siguiente:

<?xml version=”1.0” encoding=”UTF-8”?>

<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9”>

<url>

<loc>http://www.example.com/</loc>

<lastmod>2005-01-01</lastmod>

<changefreq>monthly</changefreq>
CARLOS HUERTA MILOS | UX

67. Uso de metadatos: robots

Objetivo a conseguir:
Informar al buscador si la página web que contiene este metadato debe ser
indexada y sus enlaces deben ser seguidos.

Cómo se hace:
Los metadatos son anotaciones que van en la sección <head> de cada página web
y permiten entregar información de contexto respecto del propio archivo.

El metadato robots forma parte de la especificación oficial de la W3C acerca de


HTML [52] y permite que los creadores de archivos HTML informen a los robots
de buscadores que visitan la página, acerca de si debe ser indexada y si a partir de
ella se debe continuar visitando otros enlaces o detenerse allí, lo que es un factor
clave para la actividad de posicionamiento en buscadores (SEO).

Para el caso que se desee que se indexe el contenido y que se sigan los enlaces
que se ofrecen en la página, se utiliza la siguiente sintaxis:

<META name=”ROBOTS” content=”INDEX, FOLLOW”>

Los otros valores posibles en dicho estándar son ALL, INDEX, NOFOLLOW,
NOINDEX y se utilizan dependiendo de si se desea indexar el contenido y si se
quiere que el robots siga los enlaces que se ofrecen en cada página en que este
metadato esté presente.
CARLOS HUERTA MILOS | UX

68. Uso de metadatos: description

Objetivo a conseguir:
Entregar una descripción completa acerca del contenido que se incluye en la
página web, para ser mostrado como apoyo en la página de resultados del
buscador.

Cómo se hace:
Los metadatos son anotaciones que van en la sección <head> de cada página web
y permiten entregar información de contexto respecto del propio archivo.

Mediante el metadato description se entrega una descripción concreta acerca


del contenido del que trata cada página web. Esta información será usada por
el buscador y la desplegará en su página de resultados al lado del enlace que
se ofrezca hacia nuestro sitio web. Por lo mismo, se debe elegir muy bien su
contenido ya que será lo que permitirá que un usuario decida darle click para
acceder al sitio, con la recomendación de que no sea superior a 150 caracteres.

La sintaxis de este metadato es la siguiente:

<meta name=”description” content=”100 elementos que debe tener un sitio web


efectivo”>

Este metadato debe ser incorporado en cada página que se desee indexar en los
sistemas de búsqueda. Su inexistencia hará que no se despliegue información o
que el propio buscador elija lo que muestra de ella.
CARLOS HUERTA MILOS | UX

69. Uso de etiqueta <title>

Objetivo a conseguir:
Entregar el título que representa al contenido de la página web, el que será usado
por el buscador como el enlace hacia nuestro sitio en la página de resultados.

Cómo se hace:
Los metadatos son anotaciones que van en la sección <head> de cada página web
y permiten entregar información de contexto respecto del propio archivo.

Mediante la etiqueta <title> se entrega el título que representa el contenido de


la página web que se visita. Este texto debe ser tratado con mucho cuidado ya
que se transforma en el enlace que se ofrece desde la página de resultados de los
buscadores, hacia el sitio web. Por lo mismo debe ser preciso acerca del contenido
que trata la página, debe entenderse fuera del contexto del sitio y apoyar el click
por parte del usuario que lo revisa allí, evitando el uso de signos tipográficos que
no apoyan con información.

Se recomienda además que sea equivalente al contenido que se ofrece en la


etiqueta <h1> que se detalla a continuación en este capítulo. La sintaxis de este
metadato es la siguiente:

<title>100 Elementos: Uso de la etiqueta de título</title>

Este metadato debe ser incorporado en cada página que se desee indexar y de
no estar presente, no se mostrará información o bien el propio buscador elegirá lo
que muestra.
CARLOS HUERTA MILOS | UX

70. Uso de etiquetas para títulos <h1> y <h2>

Objetivo a conseguir:
Mostrar los elementos principales de la página web para destacar los componentes
que tienen mayor importancia dentro del contenido.

Cómo se hace:
Las páginas web se construyen mediante el uso del lenguaje HTML que cuenta
con una estructura que permite destacar la importancia de sus elementos,
destacando entre ellos los títulos. Para estos ofrece las etiquetas que utilizan la
letra h minúscula y un número que va desde el 1 al 6, para marcar su importancia,
siendo <h1> para el título principal y por lo tanto sólo puede haber uno por página;
<h2> en tanto, se emplea para los subtítulos. Los siguientes valores de <hn> se
usan para destacar elementos que tengan menor jerarquía.

Es importante considerar que la manera en que se despliegan gráficamente los


contenidos de esas etiquetas del HTML son determinados por la Hoja de Estilos
en Cascada (CSS) en relación con su tipografía, tamaño, color y ubicación, entre
otros aspectos. Además hay que considerar que en la versión 5 de HTML, que
incorpora nuevas etiquetas para artículo y sección, se plantea que puede existir
títulos con la marca <h1> por cada una de ellas, por lo que sí puede haber más de
uno por página.

La sintaxis de esta etiqueta es la siguiente:

<h1>Uso de la etiqueta de título</h1>

Al hacer la validación del cumplimiento de los estándares HTML y CSS se puede


revisar el adecuado cumplimiento de este elemento.
CARLOS HUERTA MILOS | UX

71. Uso de URL-Friendly

Objetivo a conseguir:
Incorporar las palabras del título en la denominación para favorecer el
posicionamiento en buscadores (SEO).

Cómo se hace:
Para favorecer la comprensión acerca del contenido de una página web y el
posicionamiento en los sistemas buscadores, se recomienda que en el nombre de
los archivos se utilicen palabras que describen su contenido e, idealmente, sea el
mismo que se emplea en el título que se usa en la etiqueta <title> y <h1>.

De esta manera y debido a que el nombre del archivo forma parte de la dirección
web (URL), se mantendrá una coherencia de información entre los tres elementos,
lo que ayudará a su indexación, apoyará las expectativas de quien desee visitar el
sitio y facilitará la experiencia de las personas que por diversos medios reciban la
dirección (mediante correo electrónico, por ejemplo), antes de acceder al sitio web
donde se encuentra.

En este sentido, se debe evitar en la medida de lo posible, que la dirección web


haga referencia a un número de identidad o registro o cualquier elemento que no
sea mnemotécnico.
CARLOS HUERTA MILOS | UX

72. Redacción para buscadores

Objetivo a conseguir: Por último, se debe considerar que la actualización frecuente de los contenidos es
Posicionar el sitio web en los buscadores ofreciendo contenido adecuado para los otro actor relevante al momento de mejorar el posicionamiento de un sitio en las
términos que buscan las personas, en lugar de recurrir a “trucos” para apurar esa páginas de resultados de los buscadores.
indexación.

Cómo se hace:
Una de las estrategias más utilizadas en las acciones de posicionamiento web,
consiste en la repetición. Se asume que incluyendo muchas veces una palabra
en un texto y ubicándola en diversos lugares, se “convencerá” a los robots de
búsqueda que el contenido corresponde a dicho término.

Sin embargo, los encargados de los buscadores plantean que la mejor estrategia
es usar las palabras adecuadas para las personas y no para los robots, ya que la
repetición puede jugar en contra del posicionamiento. Lo que resulta adecuado
es utilizar los términos oficiales (por ejemplo, la marca de un producto) y aquellos
que las personas utilizan (la forma genérica en que las personas lo denominan), de
tal manera que el buscador registre ambos.

Adicionalmente, se sugiere que la palabra que se quiere posicionar aparezca en


lugares estratégicos como el <title>, el título y subtítulos (marcados con <h1> y
<h2>, respectivamente), palabras enlazadas y el nombre de la propia página que
se visita.

En forma paralela se puede hacer un trabajo específico en los enlaces hacia el sitio
web que se quiere posicionar. Consiste en que las palabras enlazadas en estos
sitios correspondan a los términos que se busca posicionar para que los robots de
búsqueda relacionen el sitio con la palabra enlazada, de la misma manera en que
lo harán las personas que siguen el enlace.
CARLOS HUERTA MILOS | UX

73. Revisión de enlaces propios en el buscador

Objetivo a conseguir:
Comprobar cuántas y qué páginas de un sitio web determinado se encuentran
indexadas en un sistema buscador.

Cómo se hace:
Una de las tareas iniciales que deben tener los encargados de un sitio web
que comienza su actividad, consiste en inscribir o “dar de alta” el dominio en
los principales sistemas buscadores para que sus páginas queden indexadas
y a disposición de los usuarios que buscan palabras que formen parte de sus
contenidos.

Esa acción se realiza en formulario provistos por cada buscador y no tiene costo;
consiste en indicar la URL principal del sitio web y, dependiendo del caso, ofrecer
alguna indicación acerca de su temática y contenido.

Posteriormente y una vez que los robots de indexación hayan recorrido el sitio
por primera vez, será posible revisar cuántas páginas han sido incorporadas en sus
índices, para lo cual cada uno de los sistemas de búsqueda entrega herramientas
propias.

Sin embargo, desde los principales buscadores (Google, Bing, Yahoo!) es posible
usar el operador site:dominio (por ejemplo, escribir site:100elementos.com) para
consultar a través del propio buscador cuántas y cuáles páginas se encuentran
indexadas. Mediante la revisión de los resultados obtenidos se puede hacer gestión
acerca del contenido.
CARLOS HUERTA MILOS | UX

74. Chequeo de enlaces entrantes al sitio web

Objetivo a conseguir:
Verificar cuántos enlaces y de qué tipo llegan a un sitio web determinado.

Cómo se hace:
Uno de los múltiples factores que los sistemas buscadores tienen en cuenta para
calcular la relevancia de una página web, consiste en medir cuántos enlaces llegan
a un sitio web y desde dónde lo hacen. Mientras más enlaces provenientes desde
sitios de mejor calidad (los que a su vez están mejor posicionados), se asume que
hay una mayor confianza en nuestros contenidos y esto lleva a que aparezcan en
posiciones más relevantes en las páginas de resultados.

Por lo mismo es importante conseguir que un sitio web sea enlazado por otro, en
particular si el sitio que enlaza es confiable, popular y ofrece contenido relevante,
entre otros aspectos.

Es importante señalar que es relevante la palabra que aparece enlazada, ya que


ese término constituye una definición acerca del contenido que se muestra (por lo
mismo, siempre hay que evitar escribir “haga click aquí” como enlace).

Para verificar el número de enlaces, en Google se usa el operador link + nombre


dominio en la caja de búsqueda, mientras que en otros buscadores (Bing, Yahoo!)
se deben emplear sus herramientas internas.
CARLOS HUERTA MILOS | UX

75. Uso de herramientas de buscadores

Objetivo a conseguir:
Utilizar las herramientas provistas por Google Search Console y Bing Webmasters.

Cómo se hace:
Cada uno de los principales sistemas de búsqueda (Google y Bing) cuentan con
sistemas internos que permiten hacer el control y gestión del desempeño que
tiene un sitio web en sus páginas de resultados.

Para esto, el dueño del sitio debe darse de alta en dichos sistemas e incorporar
algún método de verificación de la propiedad del sitio web, con el objetivo de
ofrecer reportes personalizados y con información a la que sólo el propietario
puede acceder.

Entre los elementos que pueden ser revisados mediante estos sistemas está el
número de páginas indexadas, el número de sitios que enlazan hacia nuestras
páginas; las palabras más buscadas por los usuarios que finalmente los llevan
a visitar el sitio; los errores de indexación, además de entregar información
demográfica relevante.

En el caso de Google la herramienta se denomina Search Console y en Bing es


Herramientas para administradores.
CARLOS HUERTA MILOS | UX

Uso de dispositivos
móviles
CARLOS HUERTA MILOS | UX

76. Experiencia de uso móvil

Objetivo a conseguir: • Permitir compartir el contenido de manera fácil, puesto que desde el teléfono
Comprender la situación en que se usa el móvil antes de decidir lo que se va a será más simple lograr que los usuarios envíen información de manera inmediata.
ofrecer en éste.
• Facilitar y privilegiar el contacto por teléfono con la organización, porque es
el modo nativo que tendrán los usuarios, evitándoles tener que escribir y luego
esperar una respuesta acerca de lo que requieren saber de manera inmediata.
Cómo se hace:
Cuando ya se cuenta con un espacio digital orientado a los computadores
de escritorio, se debe entender que la versión móvil no consiste sólo en una
adaptación física a una pantalla más pequeña como la del teléfono celular
respecto del computador, sino que requiere de un diseño que resuelva los
problemas que enfrenta la persona que usa el dispositivo en condiciones complejas
de movimiento, iluminación y estrés.

Por lo tanto, lo que se busca es que se ofrezca una experiencia diferente,


enfatizando en lo siguiente:

• Entender lo que los usuarios requieren desde un móvil y ayudarles a llegar a esos
contenidos de manera simple y rápida.

• Aminorar el peso total de las páginas que se despliegan, para mejorar la


velocidad de desempeño del espacio digital.

• Cambiar la interfaz dejando sólo los objetos que se necesite mostrar, para lograr
que los relevantes ocupen mayores espacios en la pantalla.

• Aprovechar las capacidades del sistema operativo del dispositivo que se esté
empleando, para usar sus botones y forma de navegación. Gracias a eso el usuario
empleará los mismos elementos que utiliza el teléfono o la tableta que está
acostumbrado a usar.
CARLOS HUERTA MILOS | UX

77. Navegación y acceso con las manos

Objetivo a conseguir: • Zona que se esconde con la mano: la parte de la interfaz que se esconde bajo
Determinar si la interfaz toma en cuenta el uso de las manos como elemento de la mano que sostiene el dispositivo, no debe contar con elementos que sean
navegación. relevantes para el funcionamiento del contenido que se ofrece, considerando que
hay usuarios diestros y zurdos.

• Contraste de colores: se debe ofrecer un sistema de colores que sea fácil de


Cómo se hace:
distinguir en condiciones de iluminación bajo los límites óptimos (mucha luz del
Una de las principales diferencias que ofrecen los dispositivos móviles respecto del
exterior o poca luz en interiores).
diseño para escritorio, es el hecho de que el usuario deja de usar un instrumento
de precisión como el mouse para realizar actividades, y lo cambia por el uso de
gestos con los dedos de las manos. Esto tiene un efecto concreto en el tamaño
que deben tener los objetos con los cuales interactúa la persona, ya que requieren
ser optimizados para ser tocados y por tanto, ser usados de esa manera.

Entre los elementos más relevantes a considerar dentro de este tema, se deben
tomar en cuenta los siguientes:

• Tamaño de los botones deben ser lo suficientemente grandes para el tamaño de


un dedo (48 pixeles).

• Ubicación de la zona de navegación: debe estar visible y accesible, permitiendo su


uso simple y directo, mostrando la forma de avanzar y retroceder entre secciones.

• Distancia entre elementos clickeables: debe tener la separación suficiente como


para evitar que dos elementos sean clickeados en forma simultánea.

• Capacidad de uso con una mano: los elementos relevantes deben estar al alcance
de los dedos de la misma mano que sostiene el dispositivo.

• Gravedad de errores por taps accidentales: se debe prevenir que las acciones
relevantes puedan ser hechas sólo presionando un elemento; si es algo relevante
debe solicitar confirmación y así evitar la ocurrencia de errores.
CARLOS HUERTA MILOS | UX

78. Despliegue adecuado para el tipo de móvil

Objetivo a conseguir: forma automática a cualquier cambio de tamaño que haya en el dispositivo desde
Adaptar el diseño a los principales grupos de visitas que llegan al espacio digital el que se realice la visita. No hay tamaños previos y por tanto se trata de un
mediante dispositivos móviles. diseño que reacciona a los cambios que se produzcan en el dispositivo (ancho y
alto de la pantalla) del que se revisa la información.

Cómo se hace:
Uno de los problemas que enfrenta quien diseña interfaces móviles, es la gran
variedad de dispositivos utilizados por los usuarios para acceder a los contenidos,
lo que genera muchos tamaños distintos a los que se debe poner atención,
además de tener que funcionar en modo vertical y horizontal. Por ello se debe
preparar un sistema de visualización que lo contemple, para ofrecer un despliegue
que aproveche las características del dispositivo que se está empleando o bien, se
degrade aceptablemente permitiendo el acceso a la información.

Al respecto hay tres posibilidades:

• Diseño Líquido: consiste en que se muestra la misma interfaz, disminuyendo


o aumentando los tamaños de los elementos para ocupar todo el espacio
posible. Si los elementos no tienen dimensiones proporcionales, no se mostrarán
adecuadamente; además, si el espacio del dispositivo es pequeño, el contenido se
verá minúsculo y el usuario deberá realizar acciones para agrandarlo y revisarlo.

• Diseño Adaptable: es un sistema que permite reordenar los elementos de una


página, dependiendo del tamaño de la pantalla. Corresponde al término inglés
adaptive y consiste en una vista que se decide al inicio de la visita y se mantiene
igual independiente de que cambien las condiciones del dispositivo que se esté
empleando.

• Diseño Adaptativo: es una evolución del anterior y corresponde al término


inglés responsive; su principal característica es que el contenido se adapta en
CARLOS HUERTA MILOS | UX

79. Tamaño de tipografía en móviles

Objetivo a conseguir:
Determinar si el tipo de letra y la cantidad de texto que se muestra, cumple con la
tarea de desplegar adecuadamente la información que se ofrece.

Cómo se hace:
Uno de los temas relevantes al diseñar una interfaz móvil y determinar la forma de
desplegar su contenido, es considerar la situación en que se utiliza el dispositivo
para acceder a la información a través de su pantalla. Por lo tanto no sólo hay
que pensar en la capacidad visual de la persona sino en la situación en que está
ubicada (lugar, tiempo, ubicación, etc).

Al diseñar se deben considerar dos anchos: cuando el usuario mantiene el


dispositivo en vertical y cuando lo hace en forma horizontal. Sin embargo, en
ambos casos, para la tipografía se debe considerar que el ancho máximo para ser
leído debe cumplir con las siguientes características:

• Dejar espacio en blanco en relación con las orillas.

• Es mejor una alineación izquierda que una justificada, para ayudar a que el lector
siga el orden de la línea y encuentre la siguiente a terminar cada una.

• Cada línea de texto no debe ser superior a 65 caracteres en formato horizontal y


40 en vertical.

• El tamaño de la letra debe ser grande (ej: 16 pixeles), lo mismo su interlineado


(ej: 1.25 em) y se debe adaptar al tamaño de pantalla.

• El tipo de letra debe ser elegida considerando su legibilidad; aunque no hay


un estudio concluyente, se ha comprobado que las letras con serif generan más
confusiones de lectura en pantalla.
CARLOS HUERTA MILOS | UX

80. Elección y manejo de colores

Objetivo a conseguir:
Ofrecer contraste en los espacios de colores, para permitir destacar las diferencias
durante la navegación.

Cómo se hace:
Debido a que el uso de los dispositivos móviles se produce más probablemente en
situaciones de estrés y de baja comodidad, es necesario que la información que se
ofrece se muestre a través de sistemas en los que se facilite la lectura y el acceso.

Esto se logra mediante el uso de espacios vacíos entre los objetos y la


incorporación de un adecuado contraste de colores entre los elementos que se
están ofreciendo.

En este sentido se recomienda seguir las normas de accesibilidad ya disponibles


para la web, en las que se requiere que la relación entre el color de fondo con el
del texto sea de 4.5:1. Esto se consigue dividiendo la luminancia de ambos colores;
los valores van de 1 a 21 y se pueden revisar mediante simuladores disponibles
online. (http://www.msfw.com/Services/ContrastRatioCalculator)

En términos más simples, lo que se busca es que para fondos claros se ofrezca la
información con textos oscuros, más allá del color correspondiente.

La norma plantea en este sentido que los colores que contrastan deben ser de
aquellos elementos significativos, ya que las decoraciones y otros pueden ser
obviados; además señala que, gracias a esto, es posible atender a públicos que
tienen problemas visuales ya sea por enfermedad o por edad.
CARLOS HUERTA MILOS | UX

81. Ubicación del menú de navegación y opciones

Objetivo a conseguir:
Enfrentar la falta de espacio de la interfaz móvil para facilitar el uso con una
mano.

Cómo se hace:
Debido a que normalmente el dispositivo móvil es utilizado con una sola mano
o bien en situaciones en que la persona se está moviendo, se hace necesario
optimizar los elementos presentes en la pantalla para simplificar las opciones y
dejar al alcance de los dedos las operaciones que se pueden hacer en ella. Si se
deben usar las dos manos, hay que pensar de qué acción se trata e incluso avisarlo
antes de que se comience su uso.

En este sentido y como se plantea antes en este capítulo, se deben aprovechar los
elementos que ofrece el sistema operativo del dispositivo que se esté empleando,
ya que cuenta con botones y un sistema de navegación al que el usuario está
acostumbrado, más que ofrecer algo nuevo que deba ser aprendido junto con
entender la información a la que se accede.

Asimismo se debe cuidar que la zona de navegación esté dentro del radio de alcance
del pulgar de la persona que sostiene el dispositivo, con el fin de facilitar la operación.

Adicionalmente, desde el punto de vista del contenido, se debe hacer un esfuerzo


para que el nombre de las opciones ofrecidas sea significativo y permita su
comprensión con una sola mirada, evitando que la persona deba consumir mucho
tiempo mirando la pantalla, para comprender lo que debe hacer o de qué manera
reaccionar ante una oferta de acción.

Es importante no esconder las opciones más importantes a través de un símbolo,


ya que al no ser vistas no serán utilizadas; si son relevantes deben estar a la vista.
CARLOS HUERTA MILOS | UX

82. Peso del sitio web que se despliega

Objetivo a conseguir:
Definir valores máximos que aseguren una experiencia adecuada y un despliegue
que dé prioridad a la velocidad.

Cómo se hace:
La importancia de este aspecto radica en que mientras menor sea el peso del
sitio al que se accede, más rápido será el despliegue de la información. Gracias a
esto los usuarios esperarán menos y el consumo de datos del móvil será menor.
La estadística actual plantea que el peso promedio de las páginas de inicio de los
sitios está sobre 1,5 Mb y subiendo y que el tiempo de espera de los usuarios para
que un sitio se despliegue en el móvil es de un promedio de 4 segundos.

Para mejorar el peso del sitio web para su despliegue en dispositivos móviles, se
recomienda optimizar al menos los siguientes aspectos:

Imágenes: normalmente son los elementos que mayor peso agregan al total. Es
importante mejorar la compresión de las imágenes y utilizar formas de diseño que
eviten que se carguen (es decir, se transfieran desde el servidor al dispositivo del
cliente) si no van a ser usadas.

Scripts: hay que cargar sólo aquellos elementos que sean necesario usar. En este
sentido se requieren pruebas de uso para eliminar aquellos objetos que están
orientados a las versiones de escritorio y que no aporten sus funcionalidades en
los móviles.

Contenido: corresponde entregar lo que sea adecuado para la situación en que se


consume la información, eliminando elementos superfluos. El tiempo de lectura en
móviles no es mayor a 1 minuto para textos que incluyen información breve.
CARLOS HUERTA MILOS | UX

83. Uso de elementos que sólo funcionan con el


mouse

Objetivo a conseguir: • Copiar y Enviar: facilitar mediante algún elemento gráfico (ícono o botón), la
Evitar el uso de elementos pensados para el escritorio: usar sólo aquellos que posibilidad de tomar contenido para ser utilizado en otros espacios, como redes
hacen sentido en la pantalla del móvil. sociales.

Cómo se hace:
Previamente se destacó la diferencia que representa el hecho de que en los
dispositivos móviles el usuario no cuenta con el mouse para realizar actividades
interactivas, sino que debe hacerlas con la mano.

Por lo mismo, es importante evitar que en la forma de presentación y navegación,


se generen acciones que hacen mucho sentido cuando se cuenta con un mouse,
pero que son inútiles al no existir este dispositivo. Entre ellas, se deben considerar
los siguientes:

• Mouse over: son las interacciones que se producen cuando el mouse se ubica
sobre algún elemento sin hacer click y genera un cambio que ofrece más información
acerca de lo que se realiza. En este caso se debe considerar otra forma de entregar
retroalimentación al usuario, que sea tan efectiva como la anterior.

• Distancia entre elementos clickeables: tal como en el caso anterior, se deben


separar para facilitar el acceso a la información, evitando problemas generados por
la cercanía entre ellos.

• Elementos desplegables: se debe programar cualquier elemento que se


despliegue con un click, para que quede abierto al tocarlo, sin necesidad de otra
acción evitando la necesidad de quede presionado para estar activo.

• Formularios: se debe trabajar con instrucciones que permitan avanzar en forma


ordenada con el teclado y sin que sea necesario ir tocando los campos en los que
se escribirá.
CARLOS HUERTA MILOS | UX

84. Publicidad en móviles

Objetivo a conseguir: • Ofrecer avisos relevantes a la persona: preparar la plataforma de publicación


Definir cómo desplegar contenidos publicitarios o promocionales que hagan para apoyar su personalización, ofreciendo mensajes adecuados para las personas
sentido a la experiencia de uso. que los revisan, aumentando así la calidad y el valor ofrecido tanto al anunciante
como a quien recibe el anuncio.

Cómo se hace:
De acuerdo a las previsiones que se hacen respecto del mercado publicitario
global, la publicidad en dispositivos móviles será relevante en los siguientes años.
Por lo anterior, se hace necesario preparar las interfaces de sitios móviles, para
lograr un adecuado despliegue de la información comercial, dependiendo de las
características de las campañas. En este sentido, los elementos a considerar son
los siguientes:

• Publicidad responsiva: la información debe desplegarse de acuerdo a las


características del dispositivo que estará mostrando los avisos.

• Acciones compatibles con el espacio que se ofrece: se deben hacer pruebas


adecuadas con la publicidad a incluir, de manera de determinar qué tipo de
interacción se estará proponiendo al usuario, debido a que muchas veces él
entenderá que se trata de una acción que pertenece al sitio que la ofrece y no a la
publicidad.

• Tecnologías compatibles: se deben ofrecer guías adecuadas acerca de la tecnología


permitida, para evitar problemas en los dispositivos usados por los usuarios.

Promover la geolocalización: preparar la plataforma de publicación del espacio


de publicidad, con el objetivo de que quien realice la campaña pueda mostrar los
avisos en relación al lugar en que se encuentra la persona que está utilizando el
móvil. Esto además ayudará a generar una tarifa especial para el despliegue de ese
tipo de publicidad.
CARLOS HUERTA MILOS | UX

85. Validación de despliegue del sitio móvil

Objetivo a conseguir:
Validar si el sitio se ve adecuadamente en dispositivos móviles (tablets y celulares).

Cómo se hace:
Una tarea habitual relacionada con el diseño y programación del sitio web es que
pueda ser desplegado adecuadamente en dispositivos móviles, permitiendo que los
usuarios cumplan el objetivo de la visita que realizan.

En este sentido, se puede dar una degradación aceptable del espacio digital, vale
decir que el despliegue no tenga todos los elementos que están disponibles, pero
que finalmente ayude a que las personas entiendan el contenido y logren utilizarlo
para los fines que se buscan tanto por los dueños del espacio digital como por sus
visitantes.

En la actualidad existen una serie de herramientas que ayudan desde entender


el tamaño de los dispositivos móviles, hasta otros que chequean el código HTML
y CSS (hojas de estilo en cascada) para determinar si está construido con el
software adecuado para el despliegue móvil.

La recomendación es hacer este tipo de validaciones, enfocándose en aquellos


dispositivos más utilizados por la audiencia que emplea el sitio web, con el
objetivo de optimizar el contenido para que se muestre adecuadamente y
conseguir que las aplicaciones que contiene, funcionen de acuerdo a lo que se
espera.
CARLOS HUERTA MILOS | UX

Operaciones habituales
CARLOS HUERTA MILOS | UX

86. Renovación del dominio y el hosting

Objetivo a conseguir:
Verificar que el sitio no deje funcionar por falta de pago y/o renovación de
proveedores.

Cómo se hace:
Debido a que se hace en forma poco frecuente, es decir anualmente o cada dos
años, la renovación en el pago del dominio (el nombre en el .CL), el hosting (el
espacio donde se dejan los archivos) y otros elementos de hardware o software
usados en la operación (por ejemplo, renovación del certificado SSL, de licencias
de bases de datos o incluso de uso de imágenes) de un sitio web, es una tarea
que muchas veces pasa de ser un trámite y se transforma en un problema.

Por lo mismo, es necesario que estas actividades estén marcadas en la agenda y


se realicen de manera anticipada, con el fin de evitar inconvenientes. No pocas
empresas han pasado bochornos importantes al ver sus cuentas suspendidas por
no pago oportuno e incluso, es posible que puedan hasta perder su nombre de
dominio por no actuar a tiempo.

Cada hosting tiene su propio sistema de cobro y en el caso de los nombres


de dominio, el registrador avisa con anticipación acerca de este proceso. Si es
conveniente, se recomienda el pago anticipado por varios años, lo que no evita que
la preocupación de este tema se mantenga vigente.
CARLOS HUERTA MILOS | UX

87. Habilitación de un sitio seguro

Objetivo a conseguir:
Incorporar un sello de seguridad que permita a la organización o empresa
demostrar su propia identidad y establecer transacciones y comunicaciones
seguras para sus usuarios.

Cómo se hace:
En la medida que se desarrolla la actividad del sitio web y se generan intercambios
de información y transacciones comerciales, se hace necesario validar que el
espacio digital pertenece a quien corresponde y ofrecer seguridad y confianza a
sus usuarios. Para ello se utiliza la tecnología SSL (Security Socket Layer) que
realiza varias acciones, siendo la principal autentificar la identidad del servidor,
ofrecida por una entidad certificadora que entrega el software necesario para
asegurar que la empresa que usa la tecnología es la que fue individualizada
previamente y autorizada para usarlo.

En este sentido, la tecnología SSL cifra el contenido para que no pueda ser
revisado por nadie sin autorización; mantiene la integridad de lo que se envía para
que no sea modificado durante las transferencias de datos y en caso de que eso
ocurra, detecta la infracción y, por último, autentifica que el servidor que usa el
certificado, pertenece a la empresa que lo adquirió, evitando la suplantación.

El usuario tendrá una confirmación visible en su browser al ingresar un sitio que


use un certificado SSL, en la barra de la dirección se mostrará algún elemento
distintivo (un candado de algún color) más información que se despliega con los
datos que entrega la entidad certificadora correspondiente. Adicionalmente, la
URL tendrá el protocolo seguro “https” en las direcciones que publique.
CARLOS HUERTA MILOS | UX

88. Peso (de los elementos) del sitio web

Objetivo a conseguir: En lo técnico se debe disminuir el número de peticiones de archivos al servidor


Verificar que el peso sea adecuado para ofrecer una respuesta rápida a quienes lo (http requests) juntando los que tengan elementos en común, evitar la carga de
visitan. scripts que no estén en uso en la pantalla que se visita, comprimir elementos
comunes y eliminar todo lo que no sea requerido en la pantalla actual. La
consigna: menos es más.
Cómo se hace:
Si se consigue que una pantalla muestre todo lo que se requiere con un peso
Cuidar el peso total del conjunto de archivos que se transfieren desde el servidor
bajo los 100 kb se aumentará el nivel de visitas y en algunos casos, la cobertura,
al dispositivo del usuario en una visita, debe ser una tarea a la que se asigne
ya que audiencias con menor velocidad de conexión quedarán habilitadas para
relevancia y cuidado permanente. Cada byte que se agrega significa mayor tiempo
acceder al contenido que se ofrece.
de descarga y por lo tanto, la posibilidad de que menos personas esperen a su
despliegue y funcionamiento.

Se debe considerar que en particular con el acceso por móviles, el tiempo de


espera de los usuarios es más acotado y el ancho de banda de los dispositivos
muchas veces es menor que la del escritorio por esto, es muy relevante tomar las
acciones que sean necesarias, tanto en el contenido como en el área técnica, para
disminuir el peso total.

En el contenido se debe vigilar especialmente el peso de las imágenes porque


siempre representarán la mayor proporción de peso a descargar. Una medida
adecuada es comparar los diferentes tipos de compresión para utilizar el más
eficiente en cada caso (gif, jpg o png) en relación a la calidad esperada, a lo
que se suma la transformación de íconos en sprits para su despliegue mediante
llamados desde CSS (hojas de estilo en cascada), consiguiendo que el peso total
sea inferior respecto de usarlos como archivos individuales. Asimismo, se puede
incluir el uso del formato SVG para aquellas imágenes que puedan ser utilizadas
de esa manera, ya que ofrecen pesos mínimos en relación a la calidad de imagen
que entregan.
CARLOS HUERTA MILOS | UX

89. Medir la velocidad de descarga de las páginas

Objetivo a conseguir:
Usar software especializado para medir la velocidad de acceso y optimizar el
contenido, evitando demoras al usuario.

Cómo se hace:
Por la relevancia que adquiere ofrecer un acceso rápido a las páginas más
relevantes de un sitio web, es de particular importancia estar midiendo de manera
frecuente la velocidad de descarga de dichos archivos. Para ello, es recomendable
utilizar herramientas de software especializado que ayuden a comprender cuáles
son los elementos que componen y descargan en cada página y definir de qué
manera es posible su optimización para ofrecer una mejor experiencia de uso.

En este sentido, se recomienda comenzar por el Inspector de Elementos presente


tanto en Firefox como en Chrome, ya que permite identificar cada uno de los
elementos, su peso y el tiempo que toma su descarga en la conexión actual desde
la que se hace la prueba.

Adicionalmente se pueden emplear aplicaciones en línea (ej: Gtmetrix, Pingdom,


Webpagetest, Google PageSpeed y YSlow) que miden la velocidad de carga y
hacen recomendaciones acerca de cómo realizar mejoras que apoyen en este
aspecto; todas las anteriores son gratuitas, aunque algunos de ellas pueden
generar un cobro por uso continuo.

Con los resultados, se deben tomar las acciones correspondientes para mejorar el
desempeño de los objetos que presenten las mayores demoras, considerando que
cualquier mejora en la velocidad de carga significará que más usuarios pueden
visitar el sitio y aumentar las posibilidades de que éste cumpla los objetivos que se
haya planteado.
CARLOS HUERTA MILOS | UX

90. Determinar capacidad de carga del sitio web

Objetivo a conseguir: Con los resultados se podrán tomar medidas con anticipación a eventos en los
Determinar el número máximo de usuarios concurrentes de un sitio o aplicación, que se espere un alto número de visitas y de esa manera prevenir la ocurrencia de
antes de dejar de funcionar. problemas mayores, preparando a la audiencias ante los imprevistos.

Cómo se hace:
Debido a que se requiere tener la seguridad de saber cómo responderá el servidor
web a un tráfico excesivo por parte de los usuarios, es interesante conocer el
límite de peticiones que pueden ser atendidos en forma simultánea. Gracias a
esto, se podrá activar planes de contingencia que permitan optimizar diversos
aspectos del servidor y del producto digital y sus contenidos.

Para hacer esta actividad se debe desarrollar lo que se conoce como una prueba
de carga, que es la simulación de las visitas hechas por grupos grandes de
usuarios, con el fin de determinar la manera en que se comportará el servidor web
y a partir de los resultados, tomar las medidas que sean adecuadas para enfrentar
la situación que se encuentre.

En el mercado existen diferentes software, gratuitos y pagados, que ayudan


a realizar estas pruebas de manera automatizada. Lo que se busca es que los
encargados de la plataforma computacional ejecuten las pruebas en un ambiente
real para anticipar los problemas y determinar cómo atender tales contingencias.
Lo normal es que cualquier sistema atienda hasta un nivel determinado y luego
comience a presentar fallas; lo que se requiere saber previamente es de qué
manera responde la plataforma instalada y entender qué hacer cuando se llegue y
sobrepase al límite.

Para encontrar herramientas de software para ser instalado, como también sitios
que se dedican a este tipo de tareas, se sugiere hacer la búsqueda mediante la
frase “web load testing”.
CARLOS HUERTA MILOS | UX

91. Contar con sistemas de medición de visitas

Objetivo a conseguir:
Registrar y revisar la información de las visitas, realizando evaluaciones periódicas
de los valores conseguidos.

Cómo se hace:
Debido a que los sistemas computacionales que permiten el funcionamiento de los
sitios web tienen la capacidad de registrar cada una de las visitas que se realizan,
contabilizando los archivos más vistos y los errores que se producen, es posible
contar con sistemas que permiten visualizar esa información de manera simple y
expedita.

A raíz de esto nace la disciplina de la analítica web, que consiste en la revisión


pormenorizada de las visitas y sus actividades, la cual se nutre de software
que permite recolectar tales datos. Esta puede obtenerse en forma asincrónica
mediante el análisis del registro (log) de visitas como es el caso de software como
AWStats o bien de manera sincrónica o en tiempo real, como lo hace Google
Analytics mediante una aplicación web.

Más allá del uso de una u otra herramienta, lo importante es que cada sitio web
y espacio digital cuente con sistemas de registro de visitas y que se genere en
forma periódica un reporte que destaque los elementos más relevantes, incluyendo
diferentes temas de interés que pueden ir desde lo cuantitativo (número de
visitas, páginas más visitadas) hasta lo cualitativo (número de personas que
cumplieron un ciclo de tareas a través de varias páginas).

Con la información que se obtenga se deben tomar acciones de optimización de


contenidos y funcionalidades en el marco de un proceso de mejora continua.
CARLOS HUERTA MILOS | UX

92. Revisión general de visitas

Objetivo a conseguir: • Sesiones: Es el conjunto de las actividades que realiza un usuario en un sitio
Obtener información permanente acerca del desempeño y metas alcanzadas a web, dentro de un período de tiempo. Habitualmente las sesiones finalizan luego
través del sitio web (visitantes únicos, page views, etc.). de 30 minutos consecutivos de inactividad de la persona en el espacio digital en
el que está participando.

Debido a la diversidad de estadísticas que se pueden obtener mediante estos


Cómo se hace:
sistemas, se debe elegir la métrica adecuada para obtener datos que permitan
Una actividad habitual del sitio web es la revisión de las estadísticas relacionadas
hacer la gestión del área que se esté revisando. En este sentido, se debe notar
con las visitas mediante el uso de alguna herramienta de analítica, ya sea de
que un sistema adecuado de medición puede registrar flujos de las visitas durante
análisis del log (ej: AWStats) o una aplicación web como es el caso de Google
una sesión (qué vio primero y qué navegación realizó), el tiempo que permaneció
Analytics.
en las páginas del sitio y en qué página lo hizo más tiempo o también, medir la
Debido a que cada acceso que se produce hacia un producto digital puede ser efectividad de un llamado a la acción.
registrado, es necesario mantener una revisión de los números relacionados con
esas actividades para determinar diversas métricas que van desde determinar las
áreas más y/o menos populares hasta encontrar los errores que se producen en el
sitio web (por ejemplo, Error 404). Con eso se podrá evaluar el funcionamiento
del producto y determinar si el comportamiento de los usuarios cumple con los
objetivos esperados.

Entre los principales valores a medir, destacan los siguientes:

• User / Usuario: Se refiere a cada computador desde el que se realiza una visita
a un sitio web, independiente de quién lo esté usando. Se contabiliza como un
solo usuario, aunque sea utilizado por muchas personas.

• Unique Visitors / Visitantes únicos: Cantidad de usuarios distintos que usan


un programa navegador para ingresar al sitio en un período determinado (día,
mes), se identifica a través de un número único que es asignado la primera vez
que ingresa al sitio.
CARLOS HUERTA MILOS | UX

93. Revisión de los contenidos más visitados

Objetivo a conseguir: En este sentido, es posible crear los embudos de conversión (del inglés funnel)
Revisar los contenidos más visitados por la audiencia del sitio web. y determinar si el comportamiento de los usuarios cumple con los objetivos
esperados [81]. Cabe señalar que un embudo hace referencia a los pasos que
da un usuario a través de una o más pantallas, para realizar una tarea que se le
Cómo se hace: propone a través de un sitio web. La definición del conjunto de acciones permite
Mediante la revisión de las estadísticas relacionadas con las visitas al sitio web medir en forma posterior el porcentaje de usuarios que completa esas tareas y, de
es posible conocer de manera directa cuáles son los contenidos más visitados de esa manera, es posible mejorar el proceso con miras a aumentar el porcentaje de
un espacio digital y, por lo mismo, aquellos que tienen un desempeño menor al cumplimiento del objetivo final que se haya planeado.
esperado.

Como todo acceso hacia un producto digital puede ser registrado, es posible
conocer qué páginas han sido visitadas e incluso, entender cuál es la circulación
del usuario, permitiendo comprender cuál es la página en la que inicia la visita y
cuál es aquella en que se va del sitio.

Asimismo, el análisis permite revisar con qué palabras asocian los usuarios a los
contenidos que se ofrecen a través del espacio digital, ya que cuando las personas
escriben palabras o frases en alguno de los sitios de búsqueda y siguen los enlaces
que se les ofrecen en las páginas de resultados, el sitio web registra las palabras
que las personas escribieron en el buscador y permite determinar aquellas con que
los usuarios asocian nuestros contenidos.

Con esta información se pueden tomar diversas acciones para potenciar los
términos bien posicionados y avanzar en el trabajo con otros términos que en
la actualidad no están siendo incluidos dentro de los primeros resultados en los
buscadores. Para ello se deben tomar acciones ya descritas en el capítulo dedicado
al Posicionamiento en Buscadores.

Asimismo, gracias al análisis de esta información será posible evaluar si el


producto digital está cumpliendo su objetivo y de qué manera lo está haciendo.
CARLOS HUERTA MILOS | UX

94. Respaldo y recuperación de los contenidos

Objetivo a conseguir:
Realizar las operaciones de respaldo y recuperación de la información que contiene
el sitio web de manera frecuente para enfrentar fallas o ataques a los sistemas
que lo hacen funcionar.

Cómo se hace:
Un aforismo muy usado en computación señala que los usuarios se dividen en
dos: los que han perdido información y aquellos que la van a perder, dado que se
entiende que por tratarse de mecanismos físicos, existe la posibilidad de falla.

Por lo tanto, es necesario que una operación habitual sea la de respaldar el


contenido del sitio web, incluyendo en esto tanto las aplicaciones como los
datos almacenados. Asimismo, se deben ejecutar los procesos computacionales
necesarios como para hacer la restauración del respaldo realizado y comprobar que
efectivamente se están guardando todos los elementos fundamentales.

Para lo anterior, se recomienda la existencia y funcionamiento de una política de


seguridad de información que indique al menos:

• Las tareas a realizar con su periodicidad y características.

• Los elementos que serán respaldados, incluyendo aplicaciones, archivos, datos, etc.

• Los encargados de llevar a cabo esas operaciones.

• Mecanismos de auditoría que permitan verificar el cumplimiento de la política.

Asimismo, como parte de la misma política, se recomienda contar con un


procedimiento de trabajo definido para actuar ante fallas o ataques que
comprometan el contenido y funcionamiento del sitio web o aplicación y probar
cada cierto tiempo su validez y forma de operación.
CARLOS HUERTA MILOS | UX

95. Uso de navegadores

Objetivo a conseguir:
Determinar cuáles son los navegadores o browsers más usados y de qué manera
se está mostrando el sitio en ellos.

Cómo se hace:
Usando la información que se recopila mediante los sistemas que miden las visitas
al sitio web se registra el tipo de plataformas que utilizan los usuarios (escritorio,
móvil, etc.) y también los software usados para hacerlo. Gracias a esto, es posible
conocer qué tecnologías se están empleando e investigar de qué manera se están
desplegando los contenidos que se ofrecen a través del espacio digital.

Cabe señalar que dichos sistemas utilizan la información del browser (user agent)
para determinar el sistema operativo y el tipo y versión del software utilizado en
el acceso, generando de esa manera estadísticas relativas al uso en escritorio y
móviles y tipos de tecnologías usadas, permitiendo tener los datos para tomar
decisiones que mejoren el acceso a través de algunos de ellos.

El objetivo de esta tarea es determinar si la experiencia es similar para todos ellos


o bien, existen algunos en los cuales no se está ofreciendo toda la información
y hay zonas del sitio web que no se despliegan adecuadamente. Con esto, será
posible tomar medidas para mejorar esa situación y conseguir que la oferta que se
hace, pueda ser vista y utilizada por todos los que acceden.

En este sentido, hay que considerar que puede haber una degradación aceptable
del espacio digital si permite que los usuarios cumplan el objetivo de la visita,
aunque el despliegue no tenga todos los elementos que están disponibles.
CARLOS HUERTA MILOS | UX

96. Revisión de los errores más frecuentes

Objetivo a conseguir:
Revisar en qué zonas el sitio no está funcionando para apoyar la gestión y solución
de los problemas encontrados.

Cómo se hace:
Usando la información que se recopila mediante los sistemas que miden las visitas
al sitio web es posible conocer las situaciones en las que el espacio digital no ha
funcionado correctamente y tomar decisiones que ayuden a resolver ese tipo de
problemas.

En este sentido, es necesario buscar las situaciones en que se produce el Error


404 (cuando el contenido solicitado no existe) y el Error 500 (cuando una falla
impide el funcionamiento) que suelen ser los más frecuentes y que generan los
problemas más importantes a los usuarios.

Además se debe contar con un sistema administrativo que permita la revisión,


análisis y respuesta de las comunicaciones enviadas por los usuarios, ya sea a
través del sitio web y/o las redes sociales, en las que den a conocer este tipo de
problemas, con el fin de darles atención de la manera más oportuna posible.

Adicionalmente, es posible trabajar con herramientas de monitoreo permanente


que levanten alertas acerca de situaciones inesperadas y de esa manera ayuden a
mantener el funcionamiento adecuado del espacio digital.
CARLOS HUERTA MILOS | UX

97. Verificación de enlaces rotos e imágenes


perdidas

Objetivo a conseguir:
Usar herramientas para encontrar enlaces e imágenes que entreguen un Error 404
al usuario y resolver tales problemas.

Cómo se hace:
Mediante los datos que aportan los sistemas que miden las visitas al sitio web es
posible conocer aquellos casos en que se produce el Error 404, que es cuando el
contenido solicitado no existe y por lo tanto no se puede desplegar.

Esto ocurre por varios motivos, pero lo normal es:

• Enlace externo: un enlace que llega desde otro sitio a una página que ya no existe;
la forma de evitarlo es solicitar un cambio al sitio donde se origina el enlace.

• Enlace interno: es un enlace dentro del propio sitio, lo que puede ser corregido
directamente al conocer desde dónde se origina y poner el correcto o eliminarlo.

Tal vez el problema más importante es detectar la existencia de este tipo de


error y por ello es recomendable utilizar de manera periódica las herramientas
orientadas a este aspecto como son Xenu [86], Link Checker de W3C [87] y
Search Console [88] de Google. Una vez que se obtienen los resultados, se deben
hacer las correcciones correspondientes.

Por último, se debe anotar que la página que se muestra cuando ocurre un Error
404 debe ser preparada de antemano y definida a través del software del servidor
web. Gracias a esto, la página del error no sólo declarará que el contenido no
puede ser entregado, sino que además permitirá entregar elementos de contexto
(identificación del sitio y explicación del error) junto a las herramientas (menú del
sitio y buscador) que ayuden a mejorar la experiencia que está viviendo la persona
que no llega al resultado que espera.
CARLOS HUERTA MILOS | UX

98. Validación de estándares HTML y CSS

Objetivo a conseguir: insignias gráficas en señal de cumplimiento que pueden ser utilizadas para
Utilizar las herramientas adecuadas para definir si se emplea bien la tecnología. destacar que se está siguiendo el estándar utilizado.

Cómo se hace:
Cada página que integra un sitio web se desarrolla utilizando una tecnología
creada por la World Wide Web Consortium (W3C), que es la organización
mundial que propone, desarrolla y mantiene los estándares de esa tecnología.
Aunque es posible crear productos digitales que no los cumplan, al seguir sus
recomendaciones y buenas prácticas se asegura que todas las personas que
utilizan dichos productos puedan acceder a ellos sin problemas, que los sistemas
automatizados de los buscadores puedan indexarlos y que las personas que tengan
capacidades distintas, no tengan trabas de accesibilidad que les impidan ingresar y
obtener los contenidos ofrecidos.

La W3C tiene una norma para el HyperText Markup Language (HTML) que es el
lenguaje que permite construir los contenidos y su forma de presentarse a través
de un browser. Este lenguaje ha ido evolucionando en el tiempo y en la actualidad
está en la versión conocida como HTML5 [89], que puede ser utilizada por todos
los browsers de última generación.

Asimismo, cuenta con una norma para la forma en que se despliega el HTML
en el browser que se conoce como CSS (hojas de estilo en cascada) que en la
actualidad está en la versión CSS3. Su uso adecuado facilita la presentación
de los contenidos de acuerdo a la plataforma y el sistema operativo empleado,
ayudando a ofrecer una experiencia de usuario adecuada.

Para ambos estándares el W3C ofrece un software online de validación que


permite hacer revisiones automatizadas de los sitios web, y que facilitan la
corrección de sus contenidos hasta llegar a cumplir el estándar; asimismo ofrece
CARLOS HUERTA MILOS | UX

99. Revisar el cumplimiento de accesibilidad web

Objetivo a conseguir:
Probar frecuentemente el nivel de cumplimiento de los estándares que facilitan el
acceso a personas con algún tipo de discapacidad.

Cómo se hace:
La accesibilidad web se entiende como la disciplina que busca eliminar las barreras
que puedan impedir que una persona con algún tipo de discapacidad utilice
las herramientas y espacios digitales basados en la tecnología web. Adicional a
eso, este tipo de trabajo permite que otras personas que tiene sus capacidades
disminuidas por otros temas, como la edad o una enfermedad transitoria, se vean
favorecidas también por las mejoras en el acceso y que el público en general se
vea beneficiado por su adopción.

Para ello el World Wide Web Consortium (W3C) ha desarrollado una serie de
normas que están relacionadas con los estándares HTML y CSS (hojas de estilo
en cascada) y que se agrupan en las directivas conocidas como la Iniciativa de
Acceso Web que ha generado la Guía de Accesibilidad de Contenido Web (WCAG)
que ya se encuentra en la versión 2.1 y que señala cómo abordar los diferentes
temas referidos a los contenidos y las formas de presentarlos. Estas guías pueden
ser verificadas mediante software y pruebas manuales, permitiendo otorgar a los
sitios web niveles de accesibilidad que se marcan con letras (desde A hasta AAA).

En este sentido se recomienda el uso de la aplicación HERA ofrecida por la


Fundación Sidar (Seminario Iberoamericano sobre Diversidad y Accesibilidad
en la Red) porque entrega resultados online y en español, permitiendo una
mirada completa y comprensiva a las actividades que se deben realizar para dar
cumplimiento a las guías.
CARLOS HUERTA MILOS | UX

100. Gestionar las comunicaciones de los usuarios

Objetivo a conseguir: vía deben ser redactados de una manera acorde al público que lo va a recibir, de
Verificar y gestionar los mensajes enviados por los usuarios a través de los canales tal manera de expresar autoridad (por tratarse de la organización hablando de lo
de comunicación que están abiertos y disponibles en el entorno digital. que ofrece) y cercanía, con el fin de servir de ayuda y apoyo a quien escribe, como
también de guía para entender y resolver los temas que les motivan a escribir.

• Buscar feedback: se debe aprovechar la ocasión de hablar con “público real”


Cómo se hace:
para ver si la oferta del espacio digital cumple con lo que se espera y qué mejoras
Debido a que uno de los objetivos del sitio web y del trabajo con los contenidos
se pueden realizar sobre lo que está publicado.
digitales, es generar y mantener una comunicación constante con los usuarios, es
muy probable que se generen flujos de comunicación de parte de ellos en busca En lo posible se debe contar con un sistema que ayude a seguir y gestionar los
de más información o la realización de negocios a partir de lo publicado. mensajes recibidos para dar una respuesta adecuada, en el menor tiempo posible.

Por este motivo se hace necesario establecer un proceso administrativo concreto


que esté a cargo de dar seguimiento y respuesta a los mensajes recibidos a través
de los métodos habilitados, ya sea en redes sociales como en los formularios
dispuestos en el sitio web. Lo que se espera es que haya una persona o un equipo
que esté encargado de tomar acciones concretas respecto de esos mensajes y
que se cumpla la promesa que se ha hecho desde el espacio digital. Para ello es
necesario tener en cuenta los siguientes aspectos:

• Tiempo de respuesta: se recomienda una contestación rápida (en algunas


horas para el sitio web o en minutos, en el caso de redes sociales) para iniciar la
conversación. La primera comunicación puede ser instantánea para que el cliente
vea que su petición fue recibida y la siguiente, para informar una respuesta inicial
o bien una fecha de respuesta posible.

• Personalización: por tratarse de una comunicación con un cliente que entrega


su información personal, se debe buscar una atención más directa y enfocada en la
necesidad de quien escribe.

• Tono del mensaje: los mensajes que se intercambien con los clientes por esta

También podría gustarte